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

Compare commits

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

7 Commits
main ... jixian

Author SHA1 Message Date
wgx 3ac1c6f49f 优化界面 2026-07-30 19:21:47 +08:00
wgx 266c5c5eac 初始化~ 2026-07-18 18:22:54 +08:00
wgx c04b3e4908 去掉太阳能 2026-06-02 11:22:03 +08:00
wgx 9ae166d778 武乡大屏改造基本完成 2026-05-11 19:17:48 +08:00
wgx a7c1decc3e 武乡大屏改造基本完成 2026-03-26 17:01:54 +08:00
wgx 7ecd1ac2ae 武乡大屏改造基本完成 2026-03-25 16:52:37 +08:00
wgx 0c1546ee02 武乡大屏改造基本完成 2026-03-20 19:30:32 +08:00
18 changed files with 13591 additions and 192 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

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

12974
package-lock.json generated Normal file
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,3 +138,40 @@ 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: 45000, timeout: 40000,
}); });
// 请求拦截器 // 请求拦截器
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: 13px; left: 185px !important;
top: 30px; /*top: 30px;*/
.el-input__inner{ .el-input__inner{
height: 34px; height: 34px;
background: #0e2e4f; background: #0e2e4f;

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

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

Binary file not shown.
Side by Side

After

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: 20 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

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

Binary file not shown.
Side by Side

After

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="https://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4"> <source src="http://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="https://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt=""> <img src="http://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

233
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/xmgk04.png" class="in1con_lf_imgone" alt=""> <img src="@/assets/image/xmgk01.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,22 +88,40 @@
</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/xmgk02.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/xmgk03.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="7" :key="stationCount0" duration="3000"></animate-number>个 <!-- :to="1" :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>
@ -169,18 +187,22 @@
</transition> </transition>
<!-- 地图左下图例--> <!-- 地图左下图例-->
<div v-if="mapTypeFlag==true" class="mapTuLi"> <div v-if="mapTypeFlag==true" class="mapTuLi">
<div class="scdlist" @click="switchIcon('duizhuhe')"> <div class="scdlist" @click="switchIcon('livestock')">
<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('tuanbaihe')"> <div class="scdlist" @click="switchIcon('orient')">
<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">
@ -194,15 +216,8 @@
<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-tooltip class="item" effect="dark" <el-select class="dataTypeEchart2" style="width:90px;" v-model="dateType" placeholder="请选择" @change="changeDateType">
:content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
placement="top-start">
<span class="dataTypeEchart" @click="switchEchartType">
{{ dataTypeEchart ? '监测值' : '对比值' }}
</span>
</el-tooltip>
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
<el-option <el-option
v-for="item in dateTypeOptions" v-for="item in dateTypeOptions"
:key="item.value" :key="item.value"
@ -210,14 +225,21 @@
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<el-tabs type="card" @tab-click="handleClick" v-show="dataTypeEchart"> <el-tooltip class=" " effect="dark" style="position: absolute;left: 300px;"
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName?item.stationShortName:item.stationName" lazy> :content="dataTypeEchart?'当前：监测值为正常历史监测数据。':'当前：对比值为1#监测站数据减去2#监测站数据。'"
placement="top-start">
<span class="dataTypeEchart" @click="switchEchartType">
{{ dataTypeEchart ? '监测值' : '对比值' }}
</span>
</el-tooltip>
<el-tabs type="card" @tab-click="doGetIndexSummry" v-show="dataTypeEchart">
<el-tab-pane v-for="(item,index) in stationInfoList" :label="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="handleClick" v-show="!dataTypeEchart"> <el-tabs type="card" @tab-click="doGetIndexSummry" 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>
@ -233,6 +255,7 @@
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="">
@ -241,10 +264,11 @@
<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 " style="cursor: pointer" <span class="in1con_lf_titshow1 in1con_lf_titshow13" 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>
@ -256,7 +280,19 @@
</viewer> </viewer>
</div> </div>
<div class="jczbtm" @click="showEchartDialog($event, 1)" > <div class="jczbtm" @click="showEchartDialog($event, 1)" >
<vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod"> <vue-seamless-scroll :data="[...item.wrwcode,...item.wrwcode]" class="wp-1 hp-1" :class-option="classWrwcod">
<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>
<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="">
@ -278,13 +314,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;" @click="taizhangDialogShowFlag=true"> <div class="in1con_lf_tit " style="cursor: pointer;" @click1="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" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')"> <div class="mywrcov_one mywrcov_onehover" @click1="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>
@ -292,7 +328,7 @@
<!-- :to="effect_assess0.detailValue" />--> <!-- :to="effect_assess0.detailValue" />-->
</span> </span>
</div> </div>
<div class="mywrcov_two mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')"> <div class="mywrcov_two mywrcov_onehover" @click1="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>
@ -300,7 +336,7 @@
<!-- :to="effect_assess0.detailValue" />--> <!-- :to="effect_assess0.detailValue" />-->
</span> </span>
</div> </div>
<div class="mywrcov_three mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')"> <div class="mywrcov_three mywrcov_onehover" @click1="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"-->
@ -308,7 +344,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" @click="taizhangDialogShowFlag=true"> <div class="mywrcov_four mywrcov_onehover" @click1="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"-->
@ -327,7 +363,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)">
@ -538,6 +574,7 @@ export default {
soidShowFlag: false, soidShowFlag: false,
soilDataId: '', soilDataId: '',
tabsLoading: false, tabsLoading: false,
lastZIndex: 1,
}; };
}, },
created() { created() {
@ -601,7 +638,7 @@ export default {
this.getPollutionDictList(); this.getPollutionDictList();
this.infor(); this.infor();
this.indexinfor(); this.indexinfor();
this.handleClick({index: this.echartIndex}); this.doGetIndexSummry({index: this.echartIndex});
this.initSoilData(); this.initSoilData();
}, },
methods: { methods: {
@ -631,7 +668,7 @@ export default {
} }
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
this.handleClick({index: 0}); this.doGetIndexSummry({index: 0});
}) })
}, 1000) }, 1000)
} else {// 地图模式 } else {// 地图模式
@ -743,7 +780,7 @@ export default {
viewMode: '3D', viewMode: '3D',
resizeEnable: true, resizeEnable: true,
zoom: zoomnum, zoom: zoomnum,
center: [111.436625, 36.771975],//默认的地图中心经纬度 center: [110.719361, 36.068184],//默认的地图中心经纬度
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 方法控制
@ -759,10 +796,15 @@ export default {
}); });
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');//其他类型 let Marker = markerData.filter(ele => ele.type != 'light').sort((a,b) => {
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 == 'orient' ? 1000 : 500, zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
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),//偏移量
@ -772,24 +814,25 @@ 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') {//监测站弹窗 if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗
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)
} }
@ -799,7 +842,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, 200, 200], 16); that.aMap.setFitView(null, false, [130, 380, 480, 480], 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)
@ -808,7 +851,17 @@ export default {
}, },
getNewestDataList() { getNewestDataList() {
getNewestData().then(res => { getNewestData().then(res => {
this.listData = res.result.soilHisSurvData let tempArray = [];
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() {
@ -822,17 +875,17 @@ export default {
this.echartInit[key].dispose(); this.echartInit[key].dispose();
} }
this.echartInit = {}; this.echartInit = {};
this.handleClick({index: this.echartIndex}); this.doGetIndexSummry({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.handleClick({index: 0}); this.doGetIndexSummry({index: 0});
}, 300); }, 300);
}, },
handleClick(tab, event) { doGetIndexSummry(tab, event) {
this.tabsLoading = true; this.tabsLoading = true;
this.echartIndex = tab.index - 0; this.echartIndex = tab.index - 0;
if (this.summryAllData) { if (this.summryAllData) {
@ -845,6 +898,7 @@ 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'];
@ -857,7 +911,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][index] && data1[key][index]){ if (data2[key] && 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))
} }
}) })
@ -868,7 +922,6 @@ export default {
} }
} }
}); });
// console.log('对比数据初始化：', this.riverList)
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { // 加载echarts图 this.$nextTick(() => { // 加载echarts图
this.initEchartData(this.echartIndex) this.initEchartData(this.echartIndex)
@ -879,7 +932,7 @@ export default {
} }
}, },
// 折线图数据 // 折线图数据
initEchartData(index) { initEchartData(index, times) {
this.$nextTick(() => { this.$nextTick(() => {
let domKey = `myChartDiv${index}`; let domKey = `myChartDiv${index}`;
let data = this.summryAllData[index]; let data = this.summryAllData[index];
@ -893,7 +946,10 @@ 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：')
@ -1009,15 +1065,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) {
@ -1072,22 +1128,27 @@ export default {
this.lastClickIcon = '' this.lastClickIcon = ''
} else { } else {
this.lastClickIcon = flag; this.lastClickIcon = flag;
if (flag == 'duizhuhe') { if (flag == 'livestock') {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1); arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1);
} else if (flag == 'tuanbaihe') { } else if (flag == 'orient') {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1); arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("orient") != -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) {
that.aMap.setFitView(arr, false, [200, 500, 300, 300], 16); arr.map(item => {
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, 200, 200], 16); that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
} }
} }
}, },
@ -1554,7 +1615,20 @@ 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;
@ -1568,6 +1642,9 @@ 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">

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

@ -4,9 +4,11 @@
<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>
<img src="@/assets/image/logintltle.png" alt="" class="logintltle"> <div class="maintitle">吉县农业面源污染在线监测平台</div>
<!-- <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"
@ -135,18 +137,30 @@ export default {
width: 100%; width: 100%;
height:100%; height:100%;
} }
.loginipt{ .maintitle{
/* position: absolute; position: relative;
top: 28%; margin: 100px auto;
right: 33%; */ text-align: center;
margin: 0 auto; color: #e6e6e6;
margin-right: 8%; font-size: 4.3rem;
margin-top: 17%; font-weight: 900;
width: 552px; font-style: italic;
height: 475px; font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
background: url(../../assets/image/login_bg_img.png)no-repeat; letter-spacing: 6px;
background-size: 100% 100%; /* 原有立体浮雕阴影 + 外层淡投影阴影 */
overflow: hidden; 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{ .logintltle{
position: absolute; position: absolute;
@ -154,6 +168,19 @@ export default {
right: 20%; right: 20%;
width: 60%; width: 60%;
} }
.loginipt{
/* position: absolute;
top: 28%;
right: 33%; */
margin: 0 auto;
margin-right: 8%;
/*margin-top: 17%;*/
width: 552px;
height: 475px;
background: url(../../assets/image/login_bg_img.png)no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.login_title_img{ .login_title_img{
display: block; display: block;
margin: 0 auto; margin: 0 auto;

395
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="https://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4"> <source src="http://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="jczimg" :id="value.deployCode"></div> <div class="switchLive">
<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,12 +192,36 @@
<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="https://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt=""> <img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
<span class="zhpjtit">{{ DisplayListdetailList.detailValue }}</span> <span class="zhpjtit">{{ DisplayListdetailList2?.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> <div class="xuqingchuli" v-if="stationType==='livestock'">
<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="">
@ -255,24 +279,126 @@
</div> </div>
</div> </div>
</div> </div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div v-if="stationType==='orient'">
<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="padding-left: 30px; margin-top: 26px; "> <div v-if="stationDetail.latestData && stationDetail.latestData.length > 0">
<el-timeline> <div class="changguiwucanshu">
<el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'" <div @click="showEchartDialog(stationDetail,stationDetail.latestData[0].survItem)"
:placement="`top`"> 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>-->
<!-- <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 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=" margin-top: 26px; margin-bottom: 10px; ">
<el-collapse-transition>
<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 alertList" :key="index" :color="`#66a8f1`"
:size="'normal'" :placement="`top`" style="top: 20px;" >
<div class="maintainLog"> <div class="maintainLog">
<div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div> <div class="maintainLogContent">
<div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div> <span class="el-icon-mobile"></span>&nbsp;
<div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp; <span>{{activity.itemName}}</span>
<span class="el-icon-time"></span> {{activity.maintainTime}}</div> <span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span>
<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>
@ -315,7 +441,15 @@
<script> <script>
import ScaleBox from 'vue2-scale-box' import ScaleBox from 'vue2-scale-box'
import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api'; import {
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";
@ -332,10 +466,11 @@ export default {
return { return {
loading: true, loading: true,
stationList:[], stationList:[],
currentPlayerLive: true, currentPlayerLive: {},
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: {},
@ -346,7 +481,10 @@ export default {
DetailListAirData: '', DetailListAirData: '',
// DetailListSoilData: '', // DetailListSoilData: '',
DisplayList: '', DisplayList: '',
DisplayListdetailList: '', DisplayListdetailList0: '',
DisplayListdetailList1: '',
DisplayListdetailList2: '',
DisplayListdetailList3: '',
inforname: '', inforname: '',
dialogVisible: false, dialogVisible: false,
fullscreen: false, //全屏 fullscreen: false, //全屏
@ -367,22 +505,11 @@ 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
@ -402,22 +529,53 @@ 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.DisplayListdetailList = val.result.effect_assess[0].detailList[2] this.DisplayListdetailList0 = val.result.effect_assess[0].detailList[0]
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 => {
@ -429,6 +587,31 @@ 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();
}, },
@ -461,7 +644,6 @@ 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 = [
@ -552,6 +734,7 @@ export default {
series: seriesData series: seriesData
}; };
this.echartObj.setOption(optionLine); this.echartObj.setOption(optionLine);
}) })
}, },
zdinfor(){ zdinfor(){
@ -625,6 +808,7 @@ 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) { }
@ -647,33 +831,38 @@ export default {
} }
// 土壤数据 // 土壤数据
// this.DetailListSoilData = res.result.latestSoilData[0] // this.DetailListSoilData = res.result.latestSoilData[0]
that.currentPlayerLive = false; that.currentPlayerLive = {};
// 监控画面 // 监控画面
setTimeout(() => { setTimeout(() => {
this.switchLive(true); this.switchLive(true);
}, 2000) }, 2000)
}) })
}, },
switchLive(live){ switchLive(live, deployCode){
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 === live){ if(this.currentPlayerLive[itm.deployCode] === live){
return; return;
} }
that.currentPlayerLive = live; that.currentPlayerLive[itm.deployCode] = 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: itm.deployCode, id: 'ezplayer' + itm.deployCode,
accessToken: itm.ysToken, accessToken: itm.ysToken,
url: itm.deviceUrl, url: itm.deviceUrl || itm.deviceIotUrl,
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,
@ -685,12 +874,15 @@ 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)
} }
}, },
@ -700,12 +892,13 @@ 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(e); console.log('切换站点');
this.doDestroyed();
// this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}}) // this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
this.initStart(); this.initStart();
}, },
@ -2371,7 +2564,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; /* 隐藏超出部分 */
@ -2395,7 +2588,7 @@ a:hover {
top: 0px; top: 0px;
} }
.switchLive { .switchLive {
position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500; position: absolute; cursor:pointer; top: 2px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
} }
.switchLive:hover { .switchLive:hover {
color: rgb(236, 196, 23); color: rgb(236, 196, 23);
@ -2405,7 +2598,97 @@ a:hover {
right: 450px; right: 450px;
cursor:pointer; cursor:pointer;
z-index: 2000; z-index: 2000;
width: 170px width: 180px
}
.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=fenxi" 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>
</div> </div>
</template> </template>