Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
wgx
|
0c1546ee02 |
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<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 %>layui/dist/css/layui.css">-->
|
||||
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const requests = axios.create({
|
|||
// 请求拦截器
|
||||
requests.interceptors.request.use((config)=>{
|
||||
config.headers['X-Access-Token'] = localStorage.getItem("token") // 请求头带上token
|
||||
config.headers['X-Tenant-Id'] = '1001'
|
||||
return config
|
||||
},(error)=>{
|
||||
return Promise.reject(new Error('faile'));
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
|
|
@ -122,7 +122,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
dTitle: '长期定位监测',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
|
||||
deployType: 'soil',
|
||||
allData: null,
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
<div class="main2">
|
||||
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
|
||||
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
|
||||
<source src="http://fxnsp.zgzhny.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>
|
||||
<div class="nav">
|
||||
<span class="nav_ti nav_mag">{{DetailList.stationName}}</span>
|
||||
<span class="nav_tit">治理效果评价与预警一张图</span>
|
||||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||||
</div>
|
||||
<div class="nav_btn">
|
||||
<div class="btn_left">
|
||||
|
|
@ -172,7 +172,7 @@
|
|||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
|
||||
<img src="http://fxnsp.zgzhny.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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -359,7 +359,7 @@ export default {
|
|||
name: "CqyzList",
|
||||
data(){
|
||||
return {
|
||||
urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
urlimg:'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
player: null,
|
||||
enableZ:false, //默认关闭电子放大
|
||||
play: false, //默认停止播放
|
||||
|
|
@ -410,7 +410,7 @@ export default {
|
|||
this.DisplayListstinkList0 = val.result.stink[0].detailList[0]
|
||||
})
|
||||
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.TNSummry = res.result[0].TNSummry
|
||||
this.TPSummry = res.result[0].TPSummry
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
>
|
||||
<div class="nav">
|
||||
<span class="nav_ti nav_mag">汾西县黄河流域农业面源污染平台</span>
|
||||
<span class="nav_tit">治理效果评价与预警一张图</span>
|
||||
<span class="nav_ti nav_mag">武乡县黄河流域农业面源污染平台</span>
|
||||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||||
</div>
|
||||
<div class="nav_btn">
|
||||
<div class="btn_left">
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
<div class="in1con_lf_img">
|
||||
<div
|
||||
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="">
|
||||
<span class="in1con_lf_imglf_tit">对竹河监测站</span>
|
||||
<img src="@/assets/image/xmgk01.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="2" :key="stationCount0" duration="3000"></animate-number>个
|
||||
|
|
@ -88,11 +88,20 @@
|
|||
</div>
|
||||
<div
|
||||
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="">
|
||||
<span class="in1con_lf_imglf_tit">团柏河监测站</span>
|
||||
<img src="@/assets/image/xmgk02.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="2" :key="stationCount0" duration="3000"></animate-number>个
|
||||
:to="1" :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/xmgk04.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
|
||||
|
|
@ -104,6 +113,15 @@
|
|||
: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 style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||||
|
|
@ -171,15 +189,19 @@
|
|||
<div v-if="mapTypeFlag==true" class="mapTuLi">
|
||||
<div class="scdlist" @click="switchIcon('duizhuhe')">
|
||||
<img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
|
||||
<span class="scdlist_tit">对竹河监测站</span>
|
||||
<span class="scdlist_tit">畜禽污染监测站</span>
|
||||
</div>
|
||||
<div class="scdlist" @click="switchIcon('tuanbaihe')">
|
||||
<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>
|
||||
<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>
|
||||
<transition enter-active-class="animate__animated animate__backInUp"
|
||||
|
|
@ -194,13 +216,13 @@
|
|||
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
|
||||
<div v-loading="tabsLoading" element-loading-text=" "
|
||||
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"
|
||||
:content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
|
||||
placement="top-start">
|
||||
<span class="dataTypeEchart" @click="switchEchartType">
|
||||
{{ dataTypeEchart ? '监测值' : '对比值' }}
|
||||
</span>
|
||||
<!-- <span class="dataTypeEchart" @click="switchEchartType">-->
|
||||
<!-- {{ dataTypeEchart ? '监测值' : '对比值' }}-->
|
||||
<!-- </span>-->
|
||||
</el-tooltip>
|
||||
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
|
||||
<el-option
|
||||
|
|
@ -210,14 +232,14 @@
|
|||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<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 stationInfoList" :label="item.stationShortName?item.stationShortName:item.stationName" lazy>
|
||||
<template>
|
||||
<div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</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>
|
||||
<template>
|
||||
<div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;"></div>
|
||||
|
|
@ -233,6 +255,7 @@
|
|||
leave-active-class="animate__animated animate__backOutRight">
|
||||
<template v-if="mapTypeFlag">
|
||||
<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_youshang.png" class="in2con_zys" 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="">
|
||||
<div>
|
||||
<div class="home_dlhj">
|
||||
<span class="in1con_lf_titshow12" >监测指标统计</span>
|
||||
<el-carousel :autoplay="false" indicator-position="none" arrow="always" height="320px">
|
||||
<el-carousel-item v-for="item in stationInfoList" :key="item.id">
|
||||
<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>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
|
|
@ -327,7 +351,7 @@
|
|||
<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_titshow1">长期定位监测实时数据</span>
|
||||
<span class="in1con_lf_titshow1">实时数据展示</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)">
|
||||
|
|
@ -483,7 +507,7 @@ export default {
|
|||
markersSoil: [],
|
||||
markersOther: [],
|
||||
lastClickIcon: '',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
mapTypeFlag: true,
|
||||
nowTime: '',
|
||||
briefconCode: "",
|
||||
|
|
@ -601,7 +625,7 @@ export default {
|
|||
this.getPollutionDictList();
|
||||
this.infor();
|
||||
this.indexinfor();
|
||||
this.handleClick({index: this.echartIndex});
|
||||
this.doGetIndexSummry({index: this.echartIndex});
|
||||
this.initSoilData();
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -631,7 +655,7 @@ export default {
|
|||
}
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.handleClick({index: 0});
|
||||
this.doGetIndexSummry({index: 0});
|
||||
})
|
||||
}, 1000)
|
||||
} else {// 地图模式
|
||||
|
|
@ -808,7 +832,17 @@ export default {
|
|||
},
|
||||
getNewestDataList() {
|
||||
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() {
|
||||
|
|
@ -822,17 +856,17 @@ export default {
|
|||
this.echartInit[key].dispose();
|
||||
}
|
||||
this.echartInit = {};
|
||||
this.handleClick({index: this.echartIndex});
|
||||
this.doGetIndexSummry({index: this.echartIndex});
|
||||
},
|
||||
switchEchartType() {
|
||||
this.dataTypeEchart = (!this.dataTypeEchart);
|
||||
this.echartInit = {};
|
||||
this.activeName2 = this.riverList[0].stationName
|
||||
// this.activeName2 = this.riverList[0].stationName
|
||||
setTimeout(() => {
|
||||
this.handleClick({index: 0});
|
||||
this.doGetIndexSummry({index: 0});
|
||||
}, 300);
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
doGetIndexSummry(tab, event) {
|
||||
this.tabsLoading = true;
|
||||
this.echartIndex = tab.index - 0;
|
||||
if (this.summryAllData) {
|
||||
|
|
@ -845,30 +879,30 @@ export default {
|
|||
this.summryAllData = res.result;
|
||||
let len = this.summryAllData.length;
|
||||
this.riverList = [];
|
||||
this.summryAllData.map((item1, index) => {
|
||||
if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
|
||||
let data1 = item1['datas'];
|
||||
let keys = Object.keys(data1);
|
||||
let data2 = this.summryAllData[index + 1]['datas'];
|
||||
let data3 = {}
|
||||
let item3 = JSON.parse(JSON.stringify(item1));
|
||||
if (data2) {
|
||||
keys.map(key => {
|
||||
if (data1[key] instanceof Array) {
|
||||
data3[key] = []
|
||||
data1[key].map((itemSub, index) => {
|
||||
if (data2[key][index] && data1[key][index]){
|
||||
data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
item3['datas'] = data3;
|
||||
this.riverList.push(item3);
|
||||
}
|
||||
}
|
||||
});
|
||||
// console.log('对比数据初始化：', this.riverList)
|
||||
//计算对比值，2号站数据减1号站
|
||||
// this.summryAllData.map((item1, index) => {
|
||||
// if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
|
||||
// let data1 = item1['datas'];
|
||||
// let keys = Object.keys(data1);
|
||||
// let data2 = this.summryAllData[index + 1]['datas'];
|
||||
// let data3 = {}
|
||||
// let item3 = JSON.parse(JSON.stringify(item1));
|
||||
// if (data2) {
|
||||
// keys.map(key => {
|
||||
// if (data1[key] instanceof Array) {
|
||||
// data3[key] = []
|
||||
// data1[key].map((itemSub, index) => {
|
||||
// if (data2[key] && data2[key][index] && data1[key][index]){
|
||||
// data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// item3['datas'] = data3;
|
||||
// this.riverList.push(item3);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => { // 加载echarts图
|
||||
this.initEchartData(this.echartIndex)
|
||||
|
|
@ -879,7 +913,7 @@ export default {
|
|||
}
|
||||
},
|
||||
// 折线图数据
|
||||
initEchartData(index) {
|
||||
initEchartData(index, times) {
|
||||
this.$nextTick(() => {
|
||||
let domKey = `myChartDiv${index}`;
|
||||
let data = this.summryAllData[index];
|
||||
|
|
@ -893,7 +927,10 @@ export default {
|
|||
// console.log('初始化echart：', index, domKey, data, /^\d+$/.test(index) ,this.echartInit[domKey])
|
||||
let divDom = document.getElementById(domKey);
|
||||
if (!divDom) {
|
||||
console.log('没找到dom：', domKey, divDom)
|
||||
console.log('没找到dom,两秒后重试：', domKey, divDom)
|
||||
if(times!==2){
|
||||
setTimeout(()=>{this.initEchartData(index,2)}, 1500);
|
||||
}
|
||||
return;
|
||||
}
|
||||
console.log('开始初始化echart：')
|
||||
|
|
@ -1554,7 +1591,20 @@ a:hover {
|
|||
border: 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 {
|
||||
font-size: 1vw;
|
||||
|
|
@ -1568,6 +1618,9 @@ a:hover {
|
|||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.in1con_lf_titshow13{
|
||||
color: #ffa;
|
||||
}
|
||||
.in1con_lf_titshow2 {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
>
|
||||
<div class="nav">
|
||||
<span class="nav_ti nav_mag">汾西县黄河流域农业面源污染平台</span>
|
||||
<span class="nav_tit">治理效果评价与预警一张图</span>
|
||||
<span class="nav_ti nav_mag">武乡县黄河流域农业面源污染平台</span>
|
||||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||||
</div>
|
||||
<div class="nav_btn">
|
||||
<div class="btn_left">
|
||||
|
|
@ -505,7 +505,7 @@ export default {
|
|||
},
|
||||
data(){
|
||||
return {
|
||||
urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
urlimg:'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
isShow: true,
|
||||
nowTime: '',
|
||||
briefconCode:"",
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
<video autoplay loop muted preload
|
||||
style="width: 100%; height: 100%; object-fit: fill">
|
||||
<!-- <source src="@/assets/image/loginback.mp4">-->
|
||||
<source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/loginback.mp4">
|
||||
<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4">
|
||||
</video>
|
||||
<img src="@/assets/image/logintltle.png" alt="" class="logintltle">
|
||||
<img src="@/assets/image/logintltle3.png" alt="" class="logintltle">
|
||||
<el-form
|
||||
class="loginipt demo-ruleForm"
|
||||
:rules="rules"
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
<div class="main2" v-if="stationDetail">
|
||||
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
|
||||
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
|
||||
<source src="http://fxnsp.zgzhny.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>
|
||||
<div class="nav">
|
||||
<span class="nav_ti nav_mag">{{ stationDetail.stationName }}</span>
|
||||
<span class="nav_tit">治理效果评价与预警一张图</span>
|
||||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||||
</div>
|
||||
<div class="nav_btn">
|
||||
<div class="btn_left">
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<img src="@/assets/image/sanguang.png" class="sanguang" alt="">
|
||||
<div>
|
||||
<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/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> -->
|
||||
<span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
<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>
|
||||
<span class="in1con_lf_titshow">重点指标实时数据</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<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="sanguangbt2" alt="">
|
||||
<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-option
|
||||
v-for="item in dateTypeOptions"
|
||||
|
|
@ -192,12 +192,36 @@
|
|||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
|
||||
<img src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
|
||||
<span class="zhpjtit">{{ DisplayListdetailList.detailValue }}</span>
|
||||
<img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
|
||||
<span class="zhpjtit">{{ DisplayListdetailList2?.detailValue }}</span>
|
||||
</div>
|
||||
</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 ">
|
||||
<span class="in1con_lf_titshow">常规五参数实时监测</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
|
|
@ -255,6 +279,71 @@
|
|||
</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>
|
||||
<div class="in1con_lf_tit ">
|
||||
|
|
@ -336,7 +425,8 @@ export default {
|
|||
singleEchartDialogShowFlag: false,
|
||||
singleEchartData: null,
|
||||
stationCode: '',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
stationType:'',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
player: {},
|
||||
timer: {},
|
||||
interval: {},
|
||||
|
|
@ -346,7 +436,10 @@ export default {
|
|||
DetailListAirData: '',
|
||||
// DetailListSoilData: '',
|
||||
DisplayList: '',
|
||||
DisplayListdetailList: '',
|
||||
DisplayListdetailList0: '',
|
||||
DisplayListdetailList1: '',
|
||||
DisplayListdetailList2: '',
|
||||
DisplayListdetailList3: '',
|
||||
inforname: '',
|
||||
dialogVisible: false,
|
||||
fullscreen: false, //全屏
|
||||
|
|
@ -371,19 +464,7 @@ export default {
|
|||
};
|
||||
},
|
||||
destroyed() {
|
||||
//离开页面是销毁
|
||||
Object.values(this.timer).map(item => {
|
||||
if(item){
|
||||
clearTimeout(item);
|
||||
}
|
||||
});
|
||||
Object.values(this.interval).map(item => {
|
||||
if(item){
|
||||
clearInterval(item);
|
||||
}
|
||||
});
|
||||
this.interval = {};
|
||||
this.timer = {};
|
||||
this.doDestroyed();
|
||||
},
|
||||
created() {
|
||||
this.stationCode = this.$route.query.stationCode
|
||||
|
|
@ -403,22 +484,51 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initStart();
|
||||
this.stationInfoApi();
|
||||
this.initStart()
|
||||
},
|
||||
methods: {
|
||||
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 = {};
|
||||
let that = this;
|
||||
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(){
|
||||
this.loading = true;
|
||||
// 实时时间
|
||||
this.infor()
|
||||
getStationDisplay(this.stationCode).then(val => {
|
||||
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.stationDetailApi();
|
||||
this.getNowTime();
|
||||
this.initMaintainLog();
|
||||
this.stationInfoApi();
|
||||
},
|
||||
initMaintainLog(){//巡检日志
|
||||
getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
|
||||
|
|
@ -441,38 +551,42 @@ export default {
|
|||
if (res.code === 200) {
|
||||
this.summryAllData = res.result;
|
||||
let len = this.summryAllData.length;
|
||||
this.summryAllData.map((item1, index) => {
|
||||
if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
|
||||
let data1 = item1['datas'];
|
||||
let keys = Object.keys(data1);
|
||||
let data2 = this.summryAllData[index + 1]['datas'];
|
||||
let data3 = {}
|
||||
let item3 = JSON.parse(JSON.stringify(item1));
|
||||
if (data2) {
|
||||
keys.map(key => {
|
||||
if (data1[key] instanceof Array) {
|
||||
data3[key] = []
|
||||
data1[key].map((itemSub, index) => {
|
||||
data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
|
||||
})
|
||||
}
|
||||
})
|
||||
item3['datas'] = data3;
|
||||
this.riverList.push(item3);
|
||||
}
|
||||
}
|
||||
});
|
||||
// this.summryAllData.map((item1, index) => {
|
||||
// if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
|
||||
// let data1 = item1['datas'];
|
||||
// let keys = Object.keys(data1);
|
||||
// let data2 = this.summryAllData[index + 1]['datas'];
|
||||
// let data3 = {}
|
||||
// let item3 = JSON.parse(JSON.stringify(item1));
|
||||
// if (data2) {
|
||||
// keys.map(key => {
|
||||
// if (data1[key] instanceof Array) {
|
||||
// data3[key] = []
|
||||
// data1[key].map((itemSub, index) => {
|
||||
// data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// item3['datas'] = data3;
|
||||
// this.riverList.push(item3);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
this.initEchartDom(this.echartIndex)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 折线图数据
|
||||
initEchartDom(index) {
|
||||
initEchartDom(index, times) {
|
||||
this.$nextTick(() => {
|
||||
console.warn('初始化echarts')
|
||||
let domKey = `myChartDiv0`;
|
||||
let divDom = document.getElementById(domKey);
|
||||
if (!divDom) {
|
||||
console.log('没找到dom：', domKey, divDom)
|
||||
console.warn('没找到dom,两秒后重试：', domKey, divDom)
|
||||
if(times!==2){
|
||||
setTimeout(()=>{this.initEchartDom(index,2)}, 1500);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if(this.echartObj){
|
||||
|
|
@ -480,7 +594,7 @@ export default {
|
|||
}
|
||||
this.echartObj = this.$echarts.init(divDom);
|
||||
let data = this.summryAllData[index];
|
||||
console.log('开始初始化echart：' )
|
||||
console.warn('开始初始化echart：' )
|
||||
let dataObj = [];
|
||||
let i = 0;
|
||||
let colors = [
|
||||
|
|
@ -571,6 +685,8 @@ export default {
|
|||
series: seriesData
|
||||
};
|
||||
this.echartObj.setOption(optionLine);
|
||||
|
||||
console.warn('初始化echarts结束')
|
||||
})
|
||||
},
|
||||
zdinfor(){
|
||||
|
|
@ -644,6 +760,7 @@ export default {
|
|||
}
|
||||
getStationDetail(this.stationCode).then(res => {
|
||||
this.stationDetail = res.result
|
||||
this.stationType = res.result.stationType
|
||||
this.DetailListAirData = res.result.latestAirData[0]
|
||||
//空气数据
|
||||
if (this.DetailListAirData) { }
|
||||
|
|
@ -704,12 +821,15 @@ export default {
|
|||
that.timer[itm.deployCode] && clearTimeout(that.timer[itm.deployCode]);
|
||||
if (that.player[itm.deployCode]) {
|
||||
console.log('萤石云播放器播放成功自定义回调2', that.player[itm.deployCode])
|
||||
that.player[itm.deployCode].closeSound();
|
||||
that.timer[itm.deployCode] = setTimeout(() => {
|
||||
that.player[itm.deployCode].closeSound();
|
||||
if(that.player[itm.deployCode] && that.player[itm.deployCode].closeSound){
|
||||
that.player[itm.deployCode].closeSound();
|
||||
}
|
||||
}, 2000)
|
||||
that.timer[itm.deployCode] = setTimeout(() => {
|
||||
that.player[itm.deployCode].pause()
|
||||
if(that.player[itm.deployCode] && that.player[itm.deployCode].pause){
|
||||
that.player[itm.deployCode].pause()
|
||||
}
|
||||
}, 60000)
|
||||
}
|
||||
},
|
||||
|
|
@ -719,6 +839,7 @@ export default {
|
|||
stationInfo().then(res => {
|
||||
this.stationInfoList = res.result
|
||||
if (this.stationInfoList) {
|
||||
this.stationList = [];
|
||||
res.result.map(item => {
|
||||
this.stationList.push({
|
||||
stationCode: item.stationCode,
|
||||
|
|
@ -729,7 +850,8 @@ export default {
|
|||
})
|
||||
},
|
||||
switchStation(e){
|
||||
console.log(e);
|
||||
console.log('切换站点');
|
||||
this.doDestroyed();
|
||||
// this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
|
||||
this.initStart();
|
||||
},
|
||||
|
|
@ -2431,5 +2553,95 @@ a:hover {
|
|||
z-index: 2000;
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!-- src="https://i.tianqi.com?c=code&id=10&color=%23FFFFFF&icon=1&py=fenxi&site=12"-->
|
||||
<!-- 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=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=wuxiang" frameborder="0"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue