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

优化界面

This commit is contained in:
wgx 2026-07-30 19:21:47 +08:00
parent 266c5c5eac
commit 3ac1c6f49f
7 changed files with 13101 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

12974
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/api/request.js
View File

@ -1,7 +1,7 @@
import axios from "axios";
const requests = axios.create({
baseURL:"/lh-api",
timeout:20000,
baseURL: "/lh-api",
timeout: 40000,
});

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

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

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

@ -92,29 +92,29 @@
<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
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
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>个
:to="2" :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-->
<!-- 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">-->
@ -195,14 +195,14 @@
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
<span class="scdlist_tit">农田污染监测站</span>
</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 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>
<transition enter-active-class="animate__animated animate__backInUp"
leave-active-class="animate__animated animate__backOutDown">
@ -217,14 +217,7 @@
<div v-loading="tabsLoading" element-loading-text=" "
element-loading-background="rgba(0, 0, 0, 0.8)">
<span class="zywr_titshow">治理效果分析</span>
<el-tooltip class="item" effect="dark"
: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-select class="dataTypeEchart2" style="width:90px;" v-model="dateType" placeholder="请选择" @change="changeDateType">
<el-option
v-for="item in dateTypeOptions"
:key="item.value"
@ -232,8 +225,15 @@
:value="item.value">
</el-option>
</el-select>
<el-tooltip class=" " effect="dark" style="position: absolute;left: 300px;"
:content="dataTypeEchart?'当前：监测值为正常历史监测数据。':'当前：对比值为1#监测站数据减去2#监测站数据。'"
placement="top-start">
<span class="dataTypeEchart" @click="switchEchartType">
{{ 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.stationShortName:item.stationName" lazy>
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName||item.stationName" lazy>
<template>
<div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div>
</template>
@ -280,7 +280,7 @@
</viewer>
</div>
<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="">
@ -293,6 +293,18 @@
{{ valist.unit }}</span>
</div>
</div>
<div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
:data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
<img :src="urlimg + valist.icon" class="tpimg" alt="">
<div class="jczbtm_lf_rt">
<span class="jczbtm_lf_rttit">{{ valist.name }}</span>
<span class="jczbtm_lf_rtnum">
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="valist.code"-->
<!-- :key="valist.tylename+'_key'" duration="3000"></animate-number>-->
<span class="in1con_lf_imglf_num_jix">{{valist.code?parseFloat((valist.code-0).toFixed(2)):'--'}}</span>
{{ valist.unit }}</span>
</div>
</div>
</vue-seamless-scroll>
</div>
@ -302,13 +314,13 @@
</div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></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>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
<!-- <span class="in1con_lf_titshow2 " style="">台账>></span>-->
</div>
<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_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span>
@ -316,7 +328,7 @@
<!-- :to="effect_assess0.detailValue" />-->
</span>
</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_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
@ -324,7 +336,7 @@
<!-- :to="effect_assess0.detailValue" />-->
</span>
</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="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"-->
@ -332,7 +344,7 @@
</span>
<span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
</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="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"-->
@ -768,7 +780,7 @@ export default {
viewMode: '3D',
resizeEnable: true,
zoom: zoomnum,
center: [112.83100231396601, 36.872032399813556],//默认的地图中心经纬度
center: [110.719361, 36.068184],//默认的地图中心经纬度
mapStyle: 'amap://styles/blue',
dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
@ -780,7 +792,7 @@ export default {
showIndoorMap: false, // 隐藏地图自带的室内地图图层
expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
forceVector: true,
scale: (2 , 2.5)
scale: (2, 2.5)
});
that.aMap.on('complete', (e) => {
var markerData = res.result;
@ -887,29 +899,29 @@ export default {
let len = this.summryAllData.length;
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);
// }
// }
// });
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)
@ -1130,7 +1142,7 @@ export default {
arr.map(item => {
item.setzIndex((that.lastZIndex+=2));
});
that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16);
that.aMap.setFitView(arr, false, [300, 500, 360, 360], 16);
// setTimeout(() => {
// let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);

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

@ -58,13 +58,13 @@
<span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
</div>
<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-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>
</div>
@ -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"
@ -175,7 +175,7 @@
</div>
<div class="switchStation">
<el-select v-model="stationCode" placeholder="切换站点" @change="switchStation" >
<el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode"></el-option>
<el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationShortName||item.stationName" :value="item.stationCode"></el-option>
</el-select>
</div>
<div class="leftBox right baseBoxHjleft" style="width:22.5%">
@ -466,7 +466,7 @@ export default {
return {
loading: true,
stationList:[],
currentPlayerLive: true,
currentPlayerLive: {},
singleEchartDialogShowFlag: false,
singleEchartData: null,
stationCode: '',
@ -490,8 +490,7 @@ export default {
fullscreen: false, //全屏
qczddialogTableVisible: false,
waterData: {},
summryAllData: null,
echartIndex: 0,
summryAllDataJson: null,
maintainLogList: [],
dateType: 'monthDays',
dateTypeOptions: [ {
@ -614,50 +613,29 @@ export default {
})
},
changeDateType() {
// this.summryAllData = null;
this.initChartData();
},
initChartData() {
this.riverList = [];
this.summryAllData = [];
getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => {
let that = this;
this.summryAllDataJson = {};
getIndexSummry({summrayMode: this.dateType, stationCode: this.stationCode}).then(res => {
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.initEchartDom(this.echartIndex)
res.result.map(item => {
that.summryAllDataJson[item.stationCode] = item;
});
this.initEchartDom()
}
})
},
// 折线图数据
initEchartDom(index, times) {
initEchartDom(times) {
this.$nextTick(() => {
let domKey = `myChartDiv0`;
let divDom = document.getElementById(domKey);
if (!divDom) {
console.warn('没找到dom,两秒后重试：', domKey, divDom)
if(times!==2){
setTimeout(()=>{this.initEchartDom(index,2)}, 1500);
setTimeout(()=>{this.initEchartDom(2)}, 1500);
}
return;
}
@ -665,7 +643,7 @@ export default {
this.echartObj.dispose();
}
this.echartObj = this.$echarts.init(divDom);
let data = this.summryAllData[index];
let data = this.summryAllDataJson[this.stationCode];
let dataObj = [];
let i = 0;
let colors = [
@ -853,33 +831,38 @@ export default {
}
// 土壤数据
// this.DetailListSoilData = res.result.latestSoilData[0]
that.currentPlayerLive = false;
that.currentPlayerLive = {};
// 监控画面
setTimeout(() => {
this.switchLive(true);
}, 2000)
})
},
switchLive(live){
switchLive(live, deployCode){
let that = this;
this.stationDetail.deviceList.forEach((item) => {
if(!deployCode){
that.initPlayer(item, live);
} else if(deployCode == item.deployCode){
that.initPlayer(item, live);
}
})
},
initPlayer(itm, live){
let that = this;
if(this.currentPlayerLive === live){
if(this.currentPlayerLive[itm.deployCode] === live){
return;
}
that.currentPlayerLive = live;
that.currentPlayerLive[itm.deployCode] = live;
if(that.player[itm.deployCode]){
that.player[itm.deployCode].stop();
that.player[itm.deployCode].destroy();
}
that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({
id: itm.deployCode,
id: 'ezplayer' + itm.deployCode,
accessToken: itm.ysToken,
url: itm.deviceUrl,
url: itm.deviceUrl || itm.deviceIotUrl,
template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启
sound: 0,
@ -909,13 +892,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,
stationName: item.stationName,
})
})
this.stationList = res.result;
}
})
},
@ -2611,7 +2588,7 @@ a:hover {
top: 0px;
}
.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 {
color: rgb(236, 196, 23);

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"-->
<!-- 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=wuxiang" 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>
</template>