Administrator
/
FenXiNspBigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Administrator:jixian
Branches Tags
Administrator:main
Administrator:wuxiang
Administrator:jixian
..
compare: Administrator:main
Branches Tags
Administrator:wuxiang
Administrator:jixian
Administrator:main

3 Commits
jixian ... main

Author SHA1 Message Date
wgx 0e2b5316c6 小bug 2026-07-30 18:33:12 +08:00
wgx e0cc367300 小bug 2026-07-30 17:02:16 +08:00
978184212@qq.com e53ef58edb 域名修改 2026-03-13 10:51:41 +08:00
18 changed files with 190 additions and 13589 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,7 +2,6 @@
node_modules node_modules
/dist /dist
/unpackage
# local env files # local env files
.env.local .env.local

12974
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>吉县黄河流域农业面源污染平台</title> <title>汾西县黄河流域农业面源污染平台</title>
<link rel="stylesheet" href="<%= BASE_URL %>reset.css"> <link rel="stylesheet" href="<%= BASE_URL %>reset.css">
<!-- <link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.css">--> <!-- <link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.css">-->
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>--> <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->

37
src/api/index.js
View File

@ -138,40 +138,3 @@ export function getMaintainLog(params) {
params params
}) })
} }
/**
* //监测预警数据
* stationCode=S_1 站点编号
* &deployId=1679816437477228546 设备ID
* &pageNo=1 页号
* &pageSize=10 页宽
* &yearStr=2026 年份
*
* 回执
* {
* "id": "2027671112451649538",
* "tenantId": "租户",
* "deployCode": "16111113",
* "deployId": "1679816437477228546",
* "alertTime": "告警时间",
* "itemCode":"检测项编号"
* "itemName": "钾离子",
* "deviceName": "设备名称",
* "fullDeviceName":"带站点名称的设备名字"
* "readStatus":"low=偏低，high=偏高",
* "survUnit":"单位"
* "survValue":"监测值"
* "nomalValue":"正常值范围"
* }
* @param params
* @returns {*}
*/
export function doGetAlertRecord(params) {
return requests({
url: '/appmana/bigScreen/alertRecord',
method: 'get',
headers: {},
params
})
}

4
src/api/request.js
View File

@ -1,14 +1,14 @@
import axios from "axios"; import axios from "axios";
import router from '@/router'
const requests = axios.create({ const requests = axios.create({
baseURL: "/lh-api", baseURL: "/lh-api",
timeout: 40000, timeout: 45000,
}); });
// 请求拦截器 // 请求拦截器
requests.interceptors.request.use((config)=>{ requests.interceptors.request.use((config)=>{
config.headers['X-Access-Token'] = localStorage.getItem("token") // 请求头带上token config.headers['X-Access-Token'] = localStorage.getItem("token") // 请求头带上token
config.headers['X-Tenant-Id'] = '1002'
return config return config
},(error)=>{ },(error)=>{
return Promise.reject(new Error('faile')); return Promise.reject(new Error('faile'));

6
src/assets/css/index.css
View File

@ -571,7 +571,7 @@
padding: 0px; padding: 0px;
text-align: center; text-align: center;
z-index: 500; z-index: 500;
/*position: absolute;*/ position: absolute;
} }
.dataTypeEchart2{ .dataTypeEchart2{
width: 90px; width: 90px;
@ -589,8 +589,8 @@
text-align: center; text-align: center;
z-index: 500; z-index: 500;
position: absolute; position: absolute;
left: 185px !important; left: 13px;
/*top: 30px;*/ top: 30px;
.el-input__inner{ .el-input__inner{
height: 34px; height: 34px;
background: #0e2e4f; background: #0e2e4f;

BIN
src/assets/image/logintltle2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/image/logintltle3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
src/assets/image/waterlive.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/image/xmgk04.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/image/xmgk044.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/image/xmgk05.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

8
src/pages/CqyzList/index.vue
View File

@ -9,11 +9,11 @@
<div class="main2"> <div class="main2">
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop=""> <video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">--> <!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4"> <source src="https://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
</video> </video>
<div class="nav"> <div class="nav">
<span class="nav_ti nav_mag">{{DetailList.stationName}}</span> <span class="nav_ti nav_mag">{{DetailList.stationName}}</span>
<span class="nav_tit">治理效果评价和监测一张图</span> <span class="nav_tit">治理效果评价与预警一张图</span>
</div> </div>
<div class="nav_btn"> <div class="nav_btn">
<div class="btn_left"> <div class="btn_left">
@ -172,7 +172,7 @@
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">--> <!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
<img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt=""> <img src="https://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
<span class="zhpjtit" >{{DisplayListdetailList.detailValue}}</span> <span class="zhpjtit" >{{DisplayListdetailList.detailValue}}</span>
</div> </div>
</div> </div>
@ -410,7 +410,7 @@ export default {
this.DisplayListstinkList0 = val.result.stink[0].detailList[0] this.DisplayListstinkList0 = val.result.stink[0].detailList[0]
}) })
getIndexSummry(stationCode).then(res=>{ getIndexSummry(stationCode).then(res=>{
if (res.code == '200' && res.result.length > 0) { if (res.code ='200'&&res.result.length>0) {
this.NHSummry = res.result[0].NHSummry this.NHSummry = res.result[0].NHSummry
this.TNSummry = res.result[0].TNSummry this.TNSummry = res.result[0].TNSummry
this.TPSummry = res.result[0].TPSummry this.TPSummry = res.result[0].TPSummry

243
src/pages/Home/index.vue
View File

@ -14,8 +14,8 @@
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
> >
<div class="nav"> <div class="nav">
<span class="nav_ti nav_mag">吉县黄河流域农业面源污染平台</span> <span class="nav_ti nav_mag">汾西县黄河流域农业面源污染平台</span>
<span class="nav_tit">治理效果评价和监测一张图</span> <span class="nav_tit">治理效果评价与预警一张图</span>
</div> </div>
<div class="nav_btn"> <div class="nav_btn">
<div class="btn_left"> <div class="btn_left">
@ -79,8 +79,8 @@
<div class="in1con_lf_img"> <div class="in1con_lf_img">
<div <div
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse"> class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<img src="@/assets/image/xmgk01.png" class="in1con_lf_imgone" alt=""> <img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">
<span class="in1con_lf_imglf_tit">农田污染监测站</span> <span class="in1con_lf_imglf_tit">对竹河监测站</span>
<span class="in1con_lf_imglf_num"> <span class="in1con_lf_imglf_num">
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
:to="2" :key="stationCount0" duration="3000"></animate-number>个 :to="2" :key="stationCount0" duration="3000"></animate-number>个
@ -88,40 +88,22 @@
</div> </div>
<div <div
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse"> class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<img src="@/assets/image/xmgk02.png" class="in1con_lf_imgone" alt=""> <img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">
<span class="in1con_lf_imglf_tit">畜禽污染监测站</span> <span class="in1con_lf_imglf_tit">团柏河监测站</span>
<span class="in1con_lf_imglf_num"> <span class="in1con_lf_imglf_num">
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
:to="2" :key="stationCount0" duration="3000"></animate-number>个 :to="2" :key="stationCount0" duration="3000"></animate-number>个
</span> </span>
</div> </div>
<!-- <div--> <div
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">--> class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<!-- <img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">--> <img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">
<!-- <span class="in1con_lf_imglf_tit">小流域污染监测站</span>--> <span class="in1con_lf_imglf_tit">长期定位监测点位</span>
<!-- <span class="in1con_lf_imglf_num">--> <span class="in1con_lf_imglf_num">
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"--> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
<!-- :to="1" :key="stationCount0" duration="3000"></animate-number>个--> :to="7" :key="stationCount0" duration="3000"></animate-number>个
<!-- </span>--> </span>
<!-- </div>--> </div>
<!-- <div-->
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
<!-- <img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">-->
<!-- <span class="in1con_lf_imglf_tit">长期定位监测点位</span>-->
<!-- <span class="in1con_lf_imglf_num">-->
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"-->
<!-- :to="7" :key="stationCount0" duration="3000"></animate-number>个-->
<!-- </span>-->
<!-- </div>-->
<!-- <div-->
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
<!-- <img src="@/assets/image/xmgk05.png" class="in1con_lf_imgone" alt="">-->
<!-- <span class="in1con_lf_imglf_tit">太阳能诱虫灯数量</span>-->
<!-- <span class="in1con_lf_imglf_num">-->
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"-->
<!-- :to="1" :key="stationCount0" duration="3000"></animate-number>个-->
<!-- </span>-->
<!-- </div>-->
</div> </div>
</div> </div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
@ -187,22 +169,18 @@
</transition> </transition>
<!-- 地图左下图例--> <!-- 地图左下图例-->
<div v-if="mapTypeFlag==true" class="mapTuLi"> <div v-if="mapTypeFlag==true" class="mapTuLi">
<div class="scdlist" @click="switchIcon('livestock')"> <div class="scdlist" @click="switchIcon('duizhuhe')">
<img src="@/assets/image/icon-blue.png" class="xcdimg" alt=""> <img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
<span class="scdlist_tit">畜禽污染监测站</span> <span class="scdlist_tit">对竹河监测站</span>
</div> </div>
<div class="scdlist" @click="switchIcon('orient')"> <div class="scdlist" @click="switchIcon('tuanbaihe')">
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt=""> <img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
<span class="scdlist_tit">农田污染监测站</span> <span class="scdlist_tit">团柏河监测站</span>
</div>
<div class="scdlist" @click="switchIcon('soil')">
<img src="@/assets/image/soil.png" class="xcdimg" alt="">
<span class="scdlist_tit">长期定位监测</span>
</div> </div>
<!-- <div class="scdlist" @click="switchIcon('watershed')">-->
<!-- <img src="@/assets/image/waterlive.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">小流域监测站</span>-->
<!-- </div>-->
<!-- <div class="scdlist" @click="switchIcon('soil')">-->
<!-- <img src="@/assets/image/soil.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">长期定位监测站</span>-->
<!-- </div>-->
</div> </div>
<transition enter-active-class="animate__animated animate__backInUp" <transition enter-active-class="animate__animated animate__backInUp"
leave-active-class="animate__animated animate__backOutDown"> leave-active-class="animate__animated animate__backOutDown">
@ -216,30 +194,30 @@
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
<div v-loading="tabsLoading" element-loading-text=" " <div v-loading="tabsLoading" element-loading-text=" "
element-loading-background="rgba(0, 0, 0, 0.8)"> element-loading-background="rgba(0, 0, 0, 0.8)">
<span class="zywr_titshow">治理效果分析</span> <span class="zywr_titshow">重要污染物治理效果</span>
<el-select class="dataTypeEchart2" style="width:90px;" v-model="dateType" placeholder="请选择" @change="changeDateType"> <el-tooltip class="item" effect="dark"
<el-option :content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
v-for="item in dateTypeOptions" placement="top-start">
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-tooltip class=" " effect="dark" style="position: absolute;left: 300px;"
:content="dataTypeEchart?'当前：监测值为正常历史监测数据。':'当前：对比值为1#监测站数据减去2#监测站数据。'"
placement="top-start">
<span class="dataTypeEchart" @click="switchEchartType"> <span class="dataTypeEchart" @click="switchEchartType">
{{ dataTypeEchart ? '监测值' : '对比值' }} {{ dataTypeEchart ? '监测值' : '对比值' }}
</span> </span>
</el-tooltip> </el-tooltip>
<el-tabs type="card" @tab-click="doGetIndexSummry" v-show="dataTypeEchart"> <el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName||item.stationName" lazy> <el-option
v-for="item in dateTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-tabs type="card" @tab-click="handleClick" v-show="dataTypeEchart">
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName?item.stationShortName:item.stationName" lazy>
<template> <template>
<div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div> <div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div>
</template> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-tabs type="card" @tab-click="doGetIndexSummry" v-show="!dataTypeEchart"> <el-tabs type="card" @tab-click="handleClick" v-show="!dataTypeEchart">
<el-tab-pane v-for="(item,index) in riverList" :label="(item.stationShortName?item.stationShortName:item.stationName).split('-')[0]" lazy> <el-tab-pane v-for="(item,index) in riverList" :label="(item.stationShortName?item.stationShortName:item.stationName).split('-')[0]" lazy>
<template> <template>
<div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;"></div> <div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;"></div>
@ -255,7 +233,6 @@
leave-active-class="animate__animated animate__backOutRight"> leave-active-class="animate__animated animate__backOutRight">
<template v-if="mapTypeFlag"> <template v-if="mapTypeFlag">
<div class="leftBox right baseBoxHjleft" style="width:22.5%;overflow: hidden;"> <div class="leftBox right baseBoxHjleft" style="width:22.5%;overflow: hidden;">
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt=""> <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt=""> <img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt=""> <img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
@ -264,11 +241,10 @@
<img src="@/assets/image/sanguang.png" class="sanguangbt" alt=""> <img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
<div> <div>
<div class="home_dlhj"> <div class="home_dlhj">
<span class="in1con_lf_titshow12" >监测指标统计</span>
<el-carousel :autoplay="false" indicator-position="none" arrow="always" height="320px"> <el-carousel :autoplay="false" indicator-position="none" arrow="always" height="320px">
<el-carousel-item v-for="item in stationInfoList" :key="item.id"> <el-carousel-item v-for="item in stationInfoList" :key="item.id">
<div class="in1con_lf_tit " > <div class="in1con_lf_tit " >
<span class="in1con_lf_titshow1 in1con_lf_titshow13" style="cursor: pointer" <span class="in1con_lf_titshow1 " style="cursor: pointer"
@click="jumpStationPage(item)">{{ item.stationName }}</span> @click="jumpStationPage(item)">{{ item.stationName }}</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
@ -280,7 +256,7 @@
</viewer> </viewer>
</div> </div>
<div class="jczbtm" @click="showEchartDialog($event, 1)" > <div class="jczbtm" @click="showEchartDialog($event, 1)" >
<vue-seamless-scroll :data="[...item.wrwcode,...item.wrwcode]" class="wp-1 hp-1" :class-option="classWrwcod"> <vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod">
<div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index" <div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
:data-item="JSON.stringify(item)" :data-survItem="valist.tylename" > :data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
<img :src="urlimg + valist.icon" class="tpimg" alt=""> <img :src="urlimg + valist.icon" class="tpimg" alt="">
@ -293,18 +269,6 @@
{{ valist.unit }}</span> {{ valist.unit }}</span>
</div> </div>
</div> </div>
<div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
:data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
<img :src="urlimg + valist.icon" class="tpimg" alt="">
<div class="jczbtm_lf_rt">
<span class="jczbtm_lf_rttit">{{ valist.name }}</span>
<span class="jczbtm_lf_rtnum">
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="valist.code"-->
<!-- :key="valist.tylename+'_key'" duration="3000"></animate-number>-->
<span class="in1con_lf_imglf_num_jix">{{valist.code?parseFloat((valist.code-0).toFixed(2)):'--'}}</span>
{{ valist.unit }}</span>
</div>
</div>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
@ -314,13 +278,13 @@
</div> </div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div> <div>
<div class="in1con_lf_tit " style="cursor: pointer;" @click1="taizhangDialogShowFlag=true"> <div class="in1con_lf_tit " style="cursor: pointer;" @click="taizhangDialogShowFlag=true">
<span class="in1con_lf_titshow1">核算与评估</span> <span class="in1con_lf_titshow1">核算与评估</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
<!-- <span class="in1con_lf_titshow2 " style="">台账>></span>--> <!-- <span class="in1con_lf_titshow2 " style="">台账>></span>-->
</div> </div>
<div class="mywrcov"> <div class="mywrcov">
<div class="mywrcov_one mywrcov_onehover" @click1="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')"> <div class="mywrcov_one mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')">
<span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span>
<span class="mywrcov_onenum"> <span class="mywrcov_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span>
@ -328,7 +292,7 @@
<!-- :to="effect_assess0.detailValue" />--> <!-- :to="effect_assess0.detailValue" />-->
</span> </span>
</div> </div>
<div class="mywrcov_two mywrcov_onehover" @click1="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')"> <div class="mywrcov_two mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')">
<span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span>
<span class="mywrcov_onenum"> <span class="mywrcov_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
@ -336,7 +300,7 @@
<!-- :to="effect_assess0.detailValue" />--> <!-- :to="effect_assess0.detailValue" />-->
</span> </span>
</div> </div>
<div class="mywrcov_three mywrcov_onehover" @click1="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')"> <div class="mywrcov_three mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')">
<span class="mywrcov_onenum" style="margin-top: 1vw;"> <span class="mywrcov_onenum" style="margin-top: 1vw;">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span>
<!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"--> <!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"-->
@ -344,7 +308,7 @@
</span> </span>
<span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
</div> </div>
<div class="mywrcov_four mywrcov_onehover" @click1="taizhangDialogShowFlag=true"> <div class="mywrcov_four mywrcov_onehover" @click="taizhangDialogShowFlag=true">
<span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer"> <span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span>
<!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"--> <!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"-->
@ -363,7 +327,7 @@
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div> <div>
<div class="in1con_lf_tit "> <div class="in1con_lf_tit ">
<span class="in1con_lf_titshow1">实时数据展示</span> <span class="in1con_lf_titshow1">长期定位监测实时数据</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)"> <div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)">
@ -574,7 +538,6 @@ export default {
soidShowFlag: false, soidShowFlag: false,
soilDataId: '', soilDataId: '',
tabsLoading: false, tabsLoading: false,
lastZIndex: 1,
}; };
}, },
created() { created() {
@ -638,7 +601,7 @@ export default {
this.getPollutionDictList(); this.getPollutionDictList();
this.infor(); this.infor();
this.indexinfor(); this.indexinfor();
this.doGetIndexSummry({index: this.echartIndex}); this.handleClick({index: this.echartIndex});
this.initSoilData(); this.initSoilData();
}, },
methods: { methods: {
@ -668,7 +631,7 @@ export default {
} }
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
this.doGetIndexSummry({index: 0}); this.handleClick({index: 0});
}) })
}, 1000) }, 1000)
} else {// 地图模式 } else {// 地图模式
@ -780,7 +743,7 @@ export default {
viewMode: '3D', viewMode: '3D',
resizeEnable: true, resizeEnable: true,
zoom: zoomnum, zoom: zoomnum,
center: [110.719361, 36.068184],//默认的地图中心经纬度 center: [111.436625, 36.771975],//默认的地图中心经纬度
mapStyle: 'amap://styles/blue', mapStyle: 'amap://styles/blue',
dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制 dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制 jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
@ -792,19 +755,14 @@ export default {
showIndoorMap: false, // 隐藏地图自带的室内地图图层 showIndoorMap: false, // 隐藏地图自带的室内地图图层
expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20 expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
forceVector: true, forceVector: true,
scale: (2, 2.5) scale: (2 , 2.5)
}); });
that.aMap.on('complete', (e) => { that.aMap.on('complete', (e) => {
var markerData = res.result; var markerData = res.result;
let Marker = markerData.filter(ele => ele.type != 'light').sort((a,b) => { let Marker = markerData.filter(ele => ele.type != 'light');//其他类型
if (b.type=='soil') return 1;
if (b.type!='soil') return -1;
return 0;
});//其他类型
console.log(Marker,'Marker')
Marker.map(item => { Marker.map(item => {
let marker = new AMap.Marker({ let marker = new AMap.Marker({
zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1), zIndex: item.type == 'orient' ? 1000 : 500,
icon: this.urlimg + item.picUrl, icon: this.urlimg + item.picUrl,
position: [item.longitude, item.latitude], position: [item.longitude, item.latitude],
offset: new AMap.Pixel(item.width, item.height),//偏移量 offset: new AMap.Pixel(item.width, item.height),//偏移量
@ -814,25 +772,24 @@ export default {
extPics: item.extPics, extPics: item.extPics,
notes: item.notes, notes: item.notes,
name: item.name, name: item.name,
item: item, item: item
stationType: item.type
} }
}); });
if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗 if (item.type == 'orient') {//监测站弹窗
marker.on('click', e => { marker.on('click', e => {
let indexnumb = e.target.getExtData().ids.slice(-1); let indexnumb = e.target.getExtData().ids.slice(-1);
this.qcdtinfor = this.stationInfoList[indexnumb] this.qcdtinfor = this.stationInfoList[indexnumb]
this.qcdtdialogTableVisible = true this.qcdtdialogTableVisible = true
// console.log('livestock or orient', this.qyinformation) console.log('livestock or orient', this.qyinformation)
}) })
this.markersOrient.push(marker) this.markersOrient.push(marker)
} else if(item.type == 'soil'){//土壤弹窗，长期监测站 } else if(item.type == 'soil'){//土壤弹窗，长期监测站
marker.on('click', e => { marker.on('click', e => {
this.soilDataId = e.target.getExtData() this.soilDataId = e.target.getExtData()
this.soidShowFlag = true this.soidShowFlag = true
// console.log('soil click', ) console.log('soil click', )
}) })
this.markersSoil.push(marker); this.markersSoil.push(marker)
} else { } else {
this.markersOther.push(marker) this.markersOther.push(marker)
} }
@ -842,7 +799,7 @@ export default {
// that.aMap.setFitView(null, false, [100,400,200,200], 16); // that.aMap.setFitView(null, false, [100,400,200,200], 16);
that.aMap.setFitView(); that.aMap.setFitView();
setTimeout(() => { setTimeout(() => {
that.aMap.setFitView(null, false, [130, 380, 480, 480], 16); that.aMap.setFitView(null, false, [130, 380, 200, 200], 16);
// let temp = that.aMap.getCenter();//矫正显示标点位置在正中心 // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]); // that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]);
}, 2000) }, 2000)
@ -851,17 +808,7 @@ export default {
}, },
getNewestDataList() { getNewestDataList() {
getNewestData().then(res => { getNewestData().then(res => {
let tempArray = []; this.listData = res.result.soilHisSurvData
Object.keys(res.result).map(key => {
console.log(key)
tempArray = tempArray.concat(res.result[key])
})
// this.listData = res.result.soilHisSurvData
tempArray.map(item => {
if(!item.value){item.value = '0';}
})
this.listData = tempArray
console.log(this.listData)
}) })
}, },
getPollutionDictList() { getPollutionDictList() {
@ -875,17 +822,17 @@ export default {
this.echartInit[key].dispose(); this.echartInit[key].dispose();
} }
this.echartInit = {}; this.echartInit = {};
this.doGetIndexSummry({index: this.echartIndex}); this.handleClick({index: this.echartIndex});
}, },
switchEchartType() { switchEchartType() {
this.dataTypeEchart = (!this.dataTypeEchart); this.dataTypeEchart = (!this.dataTypeEchart);
this.echartInit = {}; this.echartInit = {};
// this.activeName2 = this.riverList[0].stationName this.activeName2 = this.riverList[0].stationName
setTimeout(() => { setTimeout(() => {
this.doGetIndexSummry({index: 0}); this.handleClick({index: 0});
}, 300); }, 300);
}, },
doGetIndexSummry(tab, event) { handleClick(tab, event) {
this.tabsLoading = true; this.tabsLoading = true;
this.echartIndex = tab.index - 0; this.echartIndex = tab.index - 0;
if (this.summryAllData) { if (this.summryAllData) {
@ -898,7 +845,6 @@ export default {
this.summryAllData = res.result; this.summryAllData = res.result;
let len = this.summryAllData.length; let len = this.summryAllData.length;
this.riverList = []; this.riverList = [];
//计算对比值，2号站数据减1号站
this.summryAllData.map((item1, index) => { this.summryAllData.map((item1, index) => {
if (index % 2 === 0 && item1['datas'] && (index + 1) < len) { if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
let data1 = item1['datas']; let data1 = item1['datas'];
@ -911,7 +857,7 @@ export default {
if (data1[key] instanceof Array) { if (data1[key] instanceof Array) {
data3[key] = [] data3[key] = []
data1[key].map((itemSub, index) => { data1[key].map((itemSub, index) => {
if (data2[key] && data2[key][index] && data1[key][index]){ if (data2[key][index] && data1[key][index]){
data3[key].push((data2[key][index] - data1[key][index]).toFixed(2)) data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
} }
}) })
@ -922,6 +868,7 @@ export default {
} }
} }
}); });
// console.log('对比数据初始化：', this.riverList)
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { // 加载echarts图 this.$nextTick(() => { // 加载echarts图
this.initEchartData(this.echartIndex) this.initEchartData(this.echartIndex)
@ -932,7 +879,7 @@ export default {
} }
}, },
// 折线图数据 // 折线图数据
initEchartData(index, times) { initEchartData(index) {
this.$nextTick(() => { this.$nextTick(() => {
let domKey = `myChartDiv${index}`; let domKey = `myChartDiv${index}`;
let data = this.summryAllData[index]; let data = this.summryAllData[index];
@ -946,10 +893,7 @@ export default {
// console.log('初始化echart：', index, domKey, data, /^\d+$/.test(index) ,this.echartInit[domKey]) // console.log('初始化echart：', index, domKey, data, /^\d+$/.test(index) ,this.echartInit[domKey])
let divDom = document.getElementById(domKey); let divDom = document.getElementById(domKey);
if (!divDom) { if (!divDom) {
console.log('没找到dom,两秒后重试：', domKey, divDom) console.log('没找到dom：', domKey, divDom)
if(times!==2){
setTimeout(()=>{this.initEchartData(index,2)}, 1500);
}
return; return;
} }
console.log('开始初始化echart：') console.log('开始初始化echart：')
@ -1065,15 +1009,15 @@ export default {
// 跳转页面3 // 跳转页面3
jumpStationPage(e) { jumpStationPage(e) {
let stationCode = e.stationCode let stationCode = e.stationCode
// if (e.stationType == 'livestock') { if (e.stationType == 'livestock') {
// this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}}) this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}})
// // this.$message({ // this.$message({
// // message: '站点正在建设中......', // message: '站点正在建设中......',
// // showClose: true, // showClose: true,
// // }); // });
// } else { } else {
this.$router.push({path: '/MywrList', query: {stationCode: stationCode}}) this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
// } }
}, },
// 弹窗退出登录 // 弹窗退出登录
handleClosetuichu(done) { handleClosetuichu(done) {
@ -1128,27 +1072,22 @@ export default {
this.lastClickIcon = '' this.lastClickIcon = ''
} else { } else {
this.lastClickIcon = flag; this.lastClickIcon = flag;
if (flag == 'livestock') { if (flag == 'duizhuhe') {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1); arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1);
} else if (flag == 'orient') { } else if (flag == 'tuanbaihe') {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("orient") != -1); arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1);
} else if (flag == 'watershed') {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1);
} else if (flag == 'soil') { } else if (flag == 'soil') {
arr = this.markersSoil; arr = this.markersSoil;
} }
} }
if (arr && arr.length > 0) { if (arr && arr.length > 0) {
arr.map(item => { that.aMap.setFitView(arr, false, [200, 500, 300, 300], 16);
item.setzIndex((that.lastZIndex+=2));
});
that.aMap.setFitView(arr, false, [300, 500, 360, 360], 16);
// setTimeout(() => { // setTimeout(() => {
// let temp = that.aMap.getCenter();//矫正显示标点位置在正中心 // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]); // that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
// },2000) // },2000)
} else { } else {
that.aMap.setFitView(null, false, [100, 400, 360, 360], 16); that.aMap.setFitView(null, false, [100, 400, 200, 200], 16);
} }
} }
}, },
@ -1615,20 +1554,7 @@ a:hover {
border: none; border: none;
background: none; background: none;
} }
.in1con_lf_titshow12 {
font-size: 1vw;
color: #fff;
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
font-family: douyuFont;
//position: absolute;
top: 1vw;
left: 0%;
display: block;
width: 100%;
text-align: center;
margin: 0;
margin-top: 15px;
}
.in1con_lf_titshow1 { .in1con_lf_titshow1 {
font-size: 1vw; font-size: 1vw;
@ -1642,9 +1568,6 @@ a:hover {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.in1con_lf_titshow13{
color: #ffa;
}
.in1con_lf_titshow2 { .in1con_lf_titshow2 {
font-size: 11px; font-size: 11px;
color: #fff; color: #fff;

4
src/pages/Home/index_map.vue11123
View File

@ -13,8 +13,8 @@
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
> >
<div class="nav"> <div class="nav">
<span class="nav_ti nav_mag">武乡县黄河流域农业面源污染平台</span> <span class="nav_ti nav_mag">汾西县黄河流域农业面源污染平台</span>
<span class="nav_tit">治理效果评价和监测一张图</span> <span class="nav_tit">治理效果评价与预警一张图</span>
</div> </div>
<div class="nav_btn"> <div class="nav_btn">
<div class="btn_left"> <div class="btn_left">

101
src/pages/Login/index.vue
View File

@ -4,11 +4,9 @@
<video autoplay loop muted preload <video autoplay loop muted preload
style="width: 100%; height: 100%; object-fit: fill"> style="width: 100%; height: 100%; object-fit: fill">
<!-- <source src="@/assets/image/loginback.mp4">--> <!-- <source src="@/assets/image/loginback.mp4">-->
<!-- <source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4">-->
<source src="https://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4"> <source src="https://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4">
</video> </video>
<div class="maintitle">吉县农业面源污染在线监测平台</div> <img src="@/assets/image/logintltle.png" alt="" class="logintltle">
<!-- <img src="@/assets/image/logintltle3.png" alt="" class="logintltle">-->
<el-form <el-form
class="loginipt demo-ruleForm" class="loginipt demo-ruleForm"
:rules="rules" :rules="rules"
@ -137,73 +135,48 @@ export default {
width: 100%; width: 100%;
height:100%; height:100%;
} }
.maintitle{
position: relative;
margin: 100px auto;
text-align: center;
color: #e6e6e6;
font-size: 4.3rem;
font-weight: 900;
font-style: italic;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
letter-spacing: 6px;
/* 原有立体浮雕阴影 + 外层淡投影阴影 */
text-shadow:
0 1px #0077cc,
0 2px #006bb8,
0 3px #005fa3,
0 4px #00508a,
0 5px 8px rgba(0, 15, 50, 0.55),
/* 新增外层柔和淡阴影 */
0 8px 15px rgba(0, 40, 90, 0.3),
/* 新增外围微弱蓝光发光效果 */
0 0 6px rgba(80, 180, 255, 0.6),
0 0 12px rgba(60, 160, 240, 0.6);
transform: scaleX(1.05);
}
.logintltle{
position: absolute;
top: 10%;
right: 20%;
width: 60%;
}
.loginipt{ .loginipt{
/* position: absolute; /* position: absolute;
top: 28%; top: 28%;
right: 33%; */ right: 33%; */
margin: 0 auto; margin: 0 auto;
margin-right: 8%; margin-right: 8%;
/*margin-top: 17%;*/ margin-top: 17%;
width: 552px; width: 552px;
height: 475px; height: 475px;
background: url(../../assets/image/login_bg_img.png)no-repeat; background: url(../../assets/image/login_bg_img.png)no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
} }
.login_title_img{ .logintltle{
display: block; position: absolute;
margin: 0 auto; top: 10%;
margin-top: 1.6vw; right: 20%;
} width: 60%;
.loginipt_list1{ }
width: 80%; .login_title_img{
height: 60px; display: block;
margin: 0 auto; margin: 0 auto;
margin-top: 32px; margin-top: 1.6vw;
background: #0B2136; }
border: 1px solid #074856; .loginipt_list1{
box-shadow: inset 0 0 13px 0 rgba(1,9,17,.8); width: 80%;
border-radius: 4px; height: 60px;
position: relative; margin: 0 auto;
} margin-top: 32px;
.loginipt_list1:hover{ background: #0B2136;
border: 1px solid #00f6ff; border: 1px solid #074856;
} box-shadow: inset 0 0 13px 0 rgba(1,9,17,.8);
.login_btn_anniu{ border-radius: 4px;
width: 50%; position: relative;
height: 60px; }
/* line-height: 3vw;s */ .loginipt_list1:hover{
border: 1px solid #00f6ff;
}
.login_btn_anniu{
width: 50%;
height: 60px;
/* line-height: 3vw;s */
text-align: center; text-align: center;
margin-top: 24px; margin-top: 24px;
margin-left: 25%; margin-left: 25%;

397
src/pages/MywrList/index.vue
View File

@ -10,11 +10,11 @@
<div class="main2" v-if="stationDetail"> <div class="main2" v-if="stationDetail">
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop=""> <video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">--> <!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4"> <source src="https://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
</video> </video>
<div class="nav"> <div class="nav">
<span class="nav_ti nav_mag">{{ stationDetail.stationName }}</span> <span class="nav_ti nav_mag">{{ stationDetail.stationName }}</span>
<span class="nav_tit">治理效果评价和监测一张图</span> <span class="nav_tit">治理效果评价与预警一张图</span>
</div> </div>
<div class="nav_btn"> <div class="nav_btn">
<div class="btn_left"> <div class="btn_left">
@ -52,19 +52,19 @@
<img src="@/assets/image/sanguang.png" class="sanguang" alt=""> <img src="@/assets/image/sanguang.png" class="sanguang" alt="">
<div> <div>
<div class="in1con_lf_tit" style="position: relative;"> <div class="in1con_lf_tit" style="position: relative;">
<span class="in1con_lf_titshow">站点分析</span> <span class="in1con_lf_titshow">站点信息</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
<!-- <img src="@/assets/image/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> --> <!-- <img src="@/assets/image/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> -->
<span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span> <span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
</div> </div>
<div class="jczcov"> <div class="jczcov">
<div class="switchLive">
<span v-show="!currentPlayerLive" @click="switchLive(true)">录播</span>
<span v-show="currentPlayerLive" @click="switchLive(false)">直播</span>
</div>
<el-carousel width="100%" arrow="always" :interval="5000"> <el-carousel width="100%" arrow="always" :interval="5000">
<el-carousel-item class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id"> <el-carousel-item class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id">
<div class="switchLive"> <div class="jczimg" :id="value.deployCode"></div>
<span v-show="!currentPlayerLive[value.deployCode]" @click="switchLive(true, value.deployCode)">录播</span>
<span v-show="currentPlayerLive[value.deployCode]" @click="switchLive(false, value.deployCode)">直播</span>
</div>
<div class="jczimg" :id="'ezplayer' + value.deployCode"></div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
@ -127,7 +127,7 @@
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div> <div>
<div class="in1con_lf_tit "> <div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">重点指标实时数据</span> <span class="in1con_lf_titshow">重要污染实时监测</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<ul class="liMarqueeUp" style="height:206px;overflow:hidden;" @click="showEchartDialog($event, 1)" > <ul class="liMarqueeUp" style="height:206px;overflow:hidden;" @click="showEchartDialog($event, 1)" >
@ -159,7 +159,7 @@
<img src="@/assets/image/sanguang.png" class="sanguang2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
<div class="zywr_lf_tit"> <div class="zywr_lf_tit">
<span class="zywr_titshow">重要污染指标</span> <span class="zywr_titshow">重要污染物趋势图</span>
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType"> <el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
<el-option <el-option
v-for="item in dateTypeOptions" v-for="item in dateTypeOptions"
@ -192,36 +192,12 @@
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">--> <!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
<img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt=""> <img src="https://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
<span class="zhpjtit">{{ DisplayListdetailList2?.detailValue }}</span> <span class="zhpjtit">{{ DisplayListdetailList.detailValue }}</span>
</div> </div>
</div> </div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div class="xuqingchuli" v-if="stationType==='livestock'"> <div>
<div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">畜禽粪污处理</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div class="qxfwzcl">
<div class="qxfwzcl_left">
<div class="qxfwzcl_left_tit">
{{DisplayListdetailList0?.detailCode}}
</div>
<span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList0?.detailValue}}</span>
<div class="qxfwzcl_left_tit">
{{DisplayListdetailList1?.detailCode}}
</div>
<span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList1?.detailValue}}</span>
</div>
<div class="qxfwzcl_rit">
<img src="@/assets/image/png01_iSpt.png" class="png01_iSpt" alt="">
<img src="@/assets/image/qcshuj.png" class="qcshuj" alt="">
<span class="qxfwzcl_rit_smt">{{DisplayListdetailList3?.detailCode}}</span>
<span class="qxfwzcl_rit_num in1con_lf_imglf_num_jix">{{DisplayListdetailList3?.detailValue}} <span style="font-size: 0.5vw;">万头</span> </span>
</div>
</div>
</div>
<div v-if="stationType==='watershed'">
<div class="in1con_lf_tit "> <div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">常规五参数实时监测</span> <span class="in1con_lf_titshow">常规五参数实时监测</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
@ -279,126 +255,24 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="stationType==='orient'">
<div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">水质数据实时监测</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div v-if="stationDetail.latestData && stationDetail.latestData.length > 0">
<div class="changguiwucanshu">
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[0].survItem)"
v-if="stationDetail.latestData.length > 0">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="(stationDetail.latestData[0].value?stationDetail.latestData[0].value:0)" />
<span class="typeStyle">{{ stationDetail.latestData[0].unit }}</span></div>
</div>
<div class="wucanshuNameDiv">{{stationDetail.latestData[0].name}}</div>
</div>
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[1].survItem)"
v-if="stationDetail.latestData.length > 1">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="(stationDetail.latestData[1].value?stationDetail.latestData[1].value:0)" />
<span class="typeStyle">{{ stationDetail.latestData[1].unit }}</span></div>
</div>
<div class="wucanshuNameDiv">{{stationDetail.latestData[1].name}}</div>
</div>
</div>
<div class="changguiwucanshu" >
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[2].survItem)"
v-if="stationDetail.latestData.length > 2">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="stationDetail.latestData[2].value?stationDetail.latestData[2].value:0" />
<span class="typeStyle">{{ stationDetail.latestData[2].unit }}</span></div>
</div>
<div class="wucanshuNameDiv">{{stationDetail.latestData[2].name}}</div>
</div>
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[3].survItem)"
v-if="stationDetail.latestData.length > 3">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="stationDetail.latestData[3].value?stationDetail.latestData[3].value:0" />
<span class="typeStyle">{{ stationDetail.latestData[3].unit }}</span>
</div>
</div>
<div class="wucanshuNameDiv">{{stationDetail.latestData[3].name}}</div>
</div>
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[4].survItem)"
v-if="stationDetail.latestData.length > 4">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="stationDetail.latestData[4].value?stationDetail.latestData[4].value:0" />
<span class="typeStyle">{{ stationDetail.latestData[4].unit }}</span>
</div>
</div>
<div class="wucanshuNameDiv">{{stationDetail.latestData[4].name}}</div>
</div>
</div>
</div>
</div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<!-- <div>-->
<!-- <div class="in1con_lf_tit ">-->
<!-- <span class="in1con_lf_titshow">监测站维护日志</span>-->
<!-- <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">-->
<!-- </div>-->
<!-- <div style="padding-left: 30px; margin-top: 26px; ">-->
<!-- <el-timeline>-->
<!-- <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"-->
<!-- :placement="`top`">-->
<!-- <div class="maintainLog">-->
<!-- <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>-->
<!-- <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>-->
<!-- <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;-->
<!-- <span class="el-icon-time"></span> {{activity.maintainTime}}</div>-->
<!-- </div>-->
<!-- </el-timeline-item>-->
<!-- </el-timeline>-->
<!-- </div>-->
<!-- </div>-->
<div> <div>
<div class="in1con_lf_tit "> <div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">监测与预警</span> <span class="in1con_lf_titshow">监测站维护日志</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div> </div>
<div style=" margin-top: 26px; margin-bottom: 10px; "> <div style="padding-left: 30px; margin-top: 26px; ">
<el-collapse-transition> <el-timeline>
<el-timeline v-if="alertList && alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;"> <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"
<el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`" :placement="`top`">
:size="'normal'" :placement="`top`" style="top: 20px;" >
<div class="maintainLog"> <div class="maintainLog">
<div class="maintainLogContent"> <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>
<span class="el-icon-mobile"></span>&nbsp; <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>
<span>{{activity.itemName}}</span> <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;
<span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span> <span class="el-icon-time"></span> {{activity.maintainTime}}</div>
<span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}}&nbsp;</span>
<!-- <span>标准值&nbsp;{{activity.normalValue}}{{activity.survUnit}}</span>-->
<span :style="{color:activity.readStatus=='low'?'#66A8F1FF':activity.readStatus=='high'?'#ff676a':''}">({{activity.readStatus=='low'?'偏低':activity.readStatus=='high'?'偏高':'正常'}})</span>
</div>
<div class="maintainLogPerson"></div>
<div class="maintainLogTime">
<span class="el-icon-time"></span>&nbsp;{{activity.alertTime}}
</div>
</div> </div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</el-collapse-transition>
<div v-if="alertList && alertList.length <= 0">
<div style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>
</div>
<div v-if="!alertList">
<div style="margin:60px auto; width: 100%;font-size: 30px;color: #edd792; text-align: center;">
<i class="el-icon-loading"></i>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -441,15 +315,7 @@
<script> <script>
import ScaleBox from 'vue2-scale-box' import ScaleBox from 'vue2-scale-box'
import { import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api';
getStationDetail,
getStationDisplay,
getIndexSummry,
survItemSummary,
getMaintainLog,
stationInfo,
getAlertRecord, doGetAlertRecord
} from '@/api';
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue' import hefentianqi from '@/pages/weather/weather.vue'
import SingleEchartDialog from "@/components/SingleEchartDialog.vue"; import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
@ -466,11 +332,10 @@ export default {
return { return {
loading: true, loading: true,
stationList:[], stationList:[],
currentPlayerLive: {}, currentPlayerLive: true,
singleEchartDialogShowFlag: false, singleEchartDialogShowFlag: false,
singleEchartData: null, singleEchartData: null,
stationCode: '', stationCode: '',
stationType:'',
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/', urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
player: {}, player: {},
timer: {}, timer: {},
@ -481,10 +346,7 @@ export default {
DetailListAirData: '', DetailListAirData: '',
// DetailListSoilData: '', // DetailListSoilData: '',
DisplayList: '', DisplayList: '',
DisplayListdetailList0: '', DisplayListdetailList: '',
DisplayListdetailList1: '',
DisplayListdetailList2: '',
DisplayListdetailList3: '',
inforname: '', inforname: '',
dialogVisible: false, dialogVisible: false,
fullscreen: false, //全屏 fullscreen: false, //全屏
@ -505,11 +367,22 @@ export default {
}], }],
echartObj: null, echartObj: null,
animateObj: [], animateObj: [],
alertList: null,
}; };
}, },
destroyed() { destroyed() {
this.doDestroyed(); //离开页面是销毁
Object.values(this.timer).map(item => {
if(item){
clearTimeout(item);
}
});
Object.values(this.interval).map(item => {
if(item){
clearInterval(item);
}
});
this.interval = {};
this.timer = {};
}, },
created() { created() {
this.stationCode = this.$route.query.stationCode this.stationCode = this.$route.query.stationCode
@ -529,53 +402,22 @@ export default {
}, },
}, },
mounted() { mounted() {
this.initStart() this.initStart();
this.stationInfoApi();
}, },
methods: { methods: {
doDestroyed(){
let that = this;
that.alertList = null;
//离开页面时销毁
Object.values(this.timer).map(item => {
if(item){
clearTimeout(item);
}
});
Object.values(this.interval).map(item => {
if(item){
clearInterval(item);
}
});
this.interval = {};
this.timer = {};
if(that.player){
Object.keys(that.player).forEach(key => {
if(that.player[key]){
console.log(that.player[key])
if(that.player[key].stop){that.player[key].stop();}
if(that.player[key].destroy){that.player[key].destroy();}
}
})
that.player = {};
}
},
initStart(){ initStart(){
this.loading = true; this.loading = true;
// 实时时间 // 实时时间
this.infor() this.infor()
getStationDisplay(this.stationCode).then(val => { getStationDisplay(this.stationCode).then(val => {
this.DisplayList = val.result this.DisplayList = val.result
this.DisplayListdetailList0 = val.result.effect_assess[0].detailList[0] this.DisplayListdetailList = val.result.effect_assess[0].detailList[2]
this.DisplayListdetailList1 = val.result.effect_assess[0].detailList[1]
this.DisplayListdetailList2 = val.result.effect_assess[0].detailList[2]
this.DisplayListdetailList3 = val.result.effect_assess[0].detailList[3]
}) })
this.initChartData();//下方echart监测图标 this.initChartData();//下方echart监测图标
this.stationDetailApi(); this.stationDetailApi();
this.getNowTime(); this.getNowTime();
this.initMaintainLog(); this.initMaintainLog();
this.stationInfoApi();
this.getAlertRecord();
}, },
initMaintainLog(){//巡检日志 initMaintainLog(){//巡检日志
getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => { getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
@ -587,31 +429,6 @@ export default {
} }
}) })
}, },
getAlertRecord(){
doGetAlertRecord({stationCode: this.stationCode, pageSize: 3}).then(res => {
console.warn('监测预警数据',res)
if (res.code === 200) {
if(res.result.records.length === 0 && this.stationDetail.latestData !== 0){
//itemName survValue survUnit normalValue survUnit readStatus alertTime
let tempData = [];
this.stationDetail.latestData.map(item => {
tempData.push({
itemName: item.name,
survValue: item.value,
survUnit: item.unit,
normalValue: item.value,
readStatus: 'normal',
alertTime: item.dataDateTime,
});
})
this.alertList = tempData;
} else {
this.alertList = res.result.records;
}
}
})
},
changeDateType() { changeDateType() {
this.initChartData(); this.initChartData();
}, },
@ -644,6 +461,7 @@ export default {
} }
this.echartObj = this.$echarts.init(divDom); this.echartObj = this.$echarts.init(divDom);
let data = this.summryAllDataJson[this.stationCode]; let data = this.summryAllDataJson[this.stationCode];
console.log('开始初始化echart：' )
let dataObj = []; let dataObj = [];
let i = 0; let i = 0;
let colors = [ let colors = [
@ -734,7 +552,6 @@ export default {
series: seriesData series: seriesData
}; };
this.echartObj.setOption(optionLine); this.echartObj.setOption(optionLine);
}) })
}, },
zdinfor(){ zdinfor(){
@ -808,7 +625,6 @@ export default {
} }
getStationDetail(this.stationCode).then(res => { getStationDetail(this.stationCode).then(res => {
this.stationDetail = res.result this.stationDetail = res.result
this.stationType = res.result.stationType
this.DetailListAirData = res.result.latestAirData[0] this.DetailListAirData = res.result.latestAirData[0]
//空气数据 //空气数据
if (this.DetailListAirData) { } if (this.DetailListAirData) { }
@ -831,38 +647,33 @@ export default {
} }
// 土壤数据 // 土壤数据
// this.DetailListSoilData = res.result.latestSoilData[0] // this.DetailListSoilData = res.result.latestSoilData[0]
that.currentPlayerLive = {}; that.currentPlayerLive = false;
// 监控画面 // 监控画面
setTimeout(() => { setTimeout(() => {
this.switchLive(true); this.switchLive(true);
}, 2000) }, 2000)
}) })
}, },
switchLive(live, deployCode){ switchLive(live){
let that = this; let that = this;
this.stationDetail.deviceList.forEach((item) => { this.stationDetail.deviceList.forEach((item) => {
if(!deployCode){ that.initPlayer(item, live);
that.initPlayer(item, live);
} else if(deployCode == item.deployCode){
that.initPlayer(item, live);
}
}) })
}, },
initPlayer(itm, live){ initPlayer(itm, live){
let that = this; let that = this;
if(this.currentPlayerLive[itm.deployCode] === live){ if(this.currentPlayerLive === live){
return; return;
} }
that.currentPlayerLive[itm.deployCode] = live; that.currentPlayerLive = live;
if(that.player[itm.deployCode]){ if(that.player[itm.deployCode]){
that.player[itm.deployCode].stop(); that.player[itm.deployCode].stop();
that.player[itm.deployCode].destroy(); that.player[itm.deployCode].destroy();
} }
that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({ that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({
id: 'ezplayer' + itm.deployCode, id: itm.deployCode,
accessToken: itm.ysToken, accessToken: itm.ysToken,
url: itm.deviceUrl || itm.deviceIotUrl, url: itm.deviceUrl,
template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版； template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启 audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启
sound: 0, sound: 0,
@ -874,15 +685,12 @@ export default {
that.timer[itm.deployCode] && clearTimeout(that.timer[itm.deployCode]); that.timer[itm.deployCode] && clearTimeout(that.timer[itm.deployCode]);
if (that.player[itm.deployCode]) { if (that.player[itm.deployCode]) {
console.log('萤石云播放器播放成功自定义回调2', that.player[itm.deployCode]) console.log('萤石云播放器播放成功自定义回调2', that.player[itm.deployCode])
that.player[itm.deployCode].closeSound();
that.timer[itm.deployCode] = setTimeout(() => { that.timer[itm.deployCode] = setTimeout(() => {
if(that.player[itm.deployCode] && that.player[itm.deployCode].closeSound){ that.player[itm.deployCode].closeSound();
that.player[itm.deployCode].closeSound();
}
}, 2000) }, 2000)
that.timer[itm.deployCode] = setTimeout(() => { that.timer[itm.deployCode] = setTimeout(() => {
if(that.player[itm.deployCode] && that.player[itm.deployCode].pause){ that.player[itm.deployCode].pause()
that.player[itm.deployCode].pause()
}
}, 60000) }, 60000)
} }
}, },
@ -892,13 +700,12 @@ export default {
stationInfo().then(res => { stationInfo().then(res => {
this.stationInfoList = res.result this.stationInfoList = res.result
if (this.stationInfoList) { if (this.stationInfoList) {
this.stationList = res.result; this.stationList = res.result
} }
}) })
}, },
switchStation(e){ switchStation(e){
console.log('切换站点'); console.log(e);
this.doDestroyed();
// this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}}) // this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
this.initStart(); this.initStart();
}, },
@ -2564,7 +2371,7 @@ a:hover {
color: white; color: white;
.maintainLogContent{ .maintainLogContent{
padding-left: 74px; padding-left: 74px;
//padding-top: 8px; padding-top: 8px;
color: #81b8e9; color: #81b8e9;
width: 258px; /* 设置容器宽度 */ width: 258px; /* 设置容器宽度 */
overflow: hidden; /* 隐藏超出部分 */ overflow: hidden; /* 隐藏超出部分 */
@ -2588,7 +2395,7 @@ a:hover {
top: 0px; top: 0px;
} }
.switchLive { .switchLive {
position: absolute; cursor:pointer; top: 2px;right: 16px;color: rgb(255, 255, 255);z-index: 500; position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
} }
.switchLive:hover { .switchLive:hover {
color: rgb(236, 196, 23); color: rgb(236, 196, 23);
@ -2598,97 +2405,7 @@ a:hover {
right: 450px; right: 450px;
cursor:pointer; cursor:pointer;
z-index: 2000; z-index: 2000;
width: 180px width: 170px
}
.xuqingchuli{
.in1con_lf_tit{
width: 100%;
height: 3vw;
text-align: center;
overflow: hidden;
position: relative;
}
.in1con_lf_titshow{
font-size: 1vw;
color: #fff;
text-shadow: 0px 2px 0px rgba(4,49,52,0.55);
display: block;
margin-top: 0.9vw;
font-family: douyuFont;
}
.qxfwzcl{
width: 100%;
margin-top: 1vw;
overflow: hidden;
}
.qxfwzcl_left{
width: 40%;
float: left;
}
.qxfwzcl_rit{
width: 60%;
float: right;
position: relative;
}
.qxfwzcl_left_tit{
width: 90%;
height: 1.4vw;
line-height: 1.4vw;
background: url(../../assets/image/qctit.png)no-repeat;
background-size: cover;
margin-left: 5%;
color:#e5eefa ;
padding-left: 0.6vw;
font-size: 0.7vw;
}
.qxfwzcl_left_num{
width: 100%;
display: block;
text-align: center;
font-size: 1.8vw;
color: #f1ff0d;
margin-top: 0.2vw;
margin-bottom: 1vw;
}
.in1con_lf_imglf_num_jix{
font-size: 1.5vw;
font-weight: 300;
font-family: HYChangLiSongKeBen;
letter-spacing:0.1vw
}
.qxfwzcl_rit_smt{
font-size: 0.7vw;
color: #fff;
position: absolute;
top: 8.4vw;
left: 25%;
z-index: 2;
}
.qxfwzcl_rit_num{
font-size: 2vw;
color: #f1ff0d;
position: absolute;
top:4.4vw;
left: 34%;
z-index: 2;
}
.png01_iSpt{
width: 150%;
position: absolute;
top: -3vw;
left: -34%;
z-index: 2;
}
.qcshuj{
width: 100%;
position: absolute;
top: -2vw;
left: 0;
z-index: 1;
}
} }
</style> </style>

2
src/pages/weather/weather.vue
View File

@ -6,7 +6,7 @@
<!-- src="https://i.tianqi.com?c=code&amp;id=10&amp;color=%23FFFFFF&amp;icon=1&amp;py=fenxi&amp;site=12"--> <!-- src="https://i.tianqi.com?c=code&amp;id=10&amp;color=%23FFFFFF&amp;icon=1&amp;py=fenxi&amp;site=12"-->
<!-- style="pointer-events: none;"></iframe>--> <!-- style="pointer-events: none;"></iframe>-->
<!-- <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=11&icon=1&color=%23FFFFFF" frameborder="0"></iframe>--> <!-- <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=11&icon=1&color=%23FFFFFF" frameborder="0"></iframe>-->
<iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=jixian" frameborder="0"></iframe> <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=fenxi" frameborder="0"></iframe>
</div> </div>
</template> </template>