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

升级播放器版本、增加监控回放、总氮磷COD弹窗

This commit is contained in:
wgx 2025-12-04 19:52:09 +08:00
parent 8a0f7d5c17
commit 98b2652041
3 changed files with 161 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -439,10 +439,8 @@ export default {
mounted(){
// 实时时间
this.getNowTime();
setTimeout(() =>{
this.drawChart();
}, 1000)
this.getliststation()
setTimeout(() =>{this.drawChart();}, 1000)
this.getliststation()
},
beforeDestroy(){
if(this.play)this.player.stop();

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

@ -286,22 +286,33 @@
<div class="mywrcov_one mywrcov_onehover" @click="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>
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span>
<!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"-->
<!-- :to="effect_assess0.detailValue" />-->
</span>
</div>
<div class="mywrcov_two mywrcov_onehover" @click="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></span>
<span class="mywrcov_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
<!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"-->
<!-- :to="effect_assess0.detailValue" />-->
</span>
</div>
<div class="mywrcov_three mywrcov_onehover" @click="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></span>
<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"-->
<!-- :to="effect_assess0.detailValue" />-->
</span>
<span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
</div>
<div class="mywrcov_four mywrcov_onehover" @click="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></span>
<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"-->
<!-- :to="effect_assess0.detailValue" />-->
</span>
<span class="mywrcov_onetit">{{ effect_assess3.detailCode }}</span>
</div>
<div class="mywrcovcen">

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

@ -5,6 +5,7 @@
bgc="transparent"
:delay="100"
:isFlat="true"
>
<div class="main2" v-if="stationDetail">
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
@ -40,7 +41,7 @@
</el-dialog>
</div>
</div>
<div class="content">
<div class="content" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.7)" element-loading-spinner="el-icon-loading">
<div class="centerBox">
<div class="baseBox centerMainBox1" style="height:100%">
<div class="baseBoxLeft left baseBoxHjleft">
@ -54,10 +55,10 @@
<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>
<span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
</div>
<div class="jczcov">
<div style="position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;">
<div class="switchLive">
<span v-show="!currentPlayerLive" @click="switchLive(true)">录播</span>
<span v-show="currentPlayerLive" @click="switchLive(false)">直播</span>
</div>
@ -66,13 +67,6 @@
<div class="jczimg" :id="value.deployCode"></div>
</el-carousel-item>
</el-carousel>
<!-- <div class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id">
<div class="jczimg" :id="value.deployCode" >
</div>
</div> -->
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
@ -179,6 +173,11 @@
</div>
</div>
</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-select>
</div>
<div class="leftBox right baseBoxHjleft" style="width:22.5%">
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
@ -203,17 +202,22 @@
<span class="in1con_lf_titshow">常规五参数实时监测</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div>
<div v-if="waterData.dataWaterTemp">
<div class="changguiwucanshu">
<div @click="showEchartDialog(stationDetail,'dataWaterTemp')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterTemp }}<span class="typeStyle">℃</span></div>
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="waterData.dataWaterTemp" />
<span class="typeStyle">℃</span></div>
</div>
<div class="wucanshuNameDiv">水温</div>
</div>
<div @click="showEchartDialog(stationDetail,'dataWaterPh')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterPh }}<span class="typeStyle"></span></div>
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="waterData.dataWaterPh" /> <span class="typeStyle"></span></div>
</div>
<div class="wucanshuNameDiv">PH值</div>
</div>
@ -221,19 +225,30 @@
<div class="changguiwucanshu" >
<div @click="showEchartDialog(stationDetail,'dataWaterDo')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterDo }}<span class="typeStyle">mg/L</span></div>
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="waterData.dataWaterDo" />
<span class="typeStyle">mg/L</span></div>
</div>
<div class="wucanshuNameDiv">溶解氧</div>
</div>
<div @click="showEchartDialog(stationDetail,'dataWaterDdl')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterDdl }}<span class="typeStyle">μS/cm</span></div>
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
:to="waterData.dataWaterDdl" />
<span class="typeStyle">μS/cm</span>
</div>
</div>
<div class="wucanshuNameDiv">电导率</div>
</div>
<div @click="showEchartDialog(stationDetail,'dataWaterNtu')">
<div class="wucanshuDiv">
<div class="wucanshuValueDiv">{{ stationDetail.latestWaterData[0].dataWaterNtu }}<span class="typeStyle">NTU</span></div>
<div class="wucanshuValueDiv">
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0" :to="waterData.dataWaterNtu" />
<span class="typeStyle">NTU</span>
</div>
</div>
<div class="wucanshuNameDiv">浊度</div>
</div>
@ -263,7 +278,7 @@
</div>
</div>
<!-- 台账禽畜弹窗 -->
<!-- 站点介绍弹窗 -->
<el-dialog width="60%" :visible.sync="qczddialogTableVisible" >
<div class="tz_cov">
<img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
@ -300,7 +315,7 @@
<script>
import ScaleBox from 'vue2-scale-box'
import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog} from '@/api';
import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api';
import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue'
import SoilDialog from "@/components/SoilDialog.vue";
@ -317,6 +332,8 @@ export default {
name: "MywrList",
data() {
return {
loading: true,
stationList:[],
currentPlayerLive: true,
singleEchartDialogShowFlag: false,
singleEchartData: null,
@ -324,48 +341,19 @@ export default {
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
player: {},
timer: {},
enableZ: false, //默认关闭电子放大
interval: {},
play: false, //默认停止播放
nowTime: '',
stationDetail: '',
stationDetail: null,
DetailListAirData: '',
DetailListSoilData: '',
// DetailListSoilData: '',
DisplayList: '',
DisplayListdetailList: '',
inforname: '',
dialogVisible: false,
rotation: {
x: 0,
y: 450,
z: 0
},
AirDataWind: 0,
AirDataFallout: 0,
AirDataRainFall: 0,
AirDataSpeed: 0,
AirDataTemp: 0,
AirDataAirWet: 0,
AirDataAirPress: 0,
// 土壤
DetailSoilTemp: 0,
DetailSoilWet: 0,
DetailSoilDdl: 0,
DetailSoilTemp2: 0,
DetailSoilWet2: 0,
DetailSoilDdl2: 0,
DetailSoilTemp3: 0,
DetailSoilWet3: 0,
DetailSoilDdl3: 0,
refresh: true,
fullscreen: false, //全屏
trqxzxdialogTableVisible: false,
qczddialogTableVisible: false,
trbgzhuanq: false,
radiotr: '1',
trbg: null,
trzx: false,
timetr: [new Date(), new Date()],
descriptionValue: null,
waterData: {},
summryAllData: null,
echartIndex: 0,
maintainLogList: [],
@ -379,29 +367,28 @@ export default {
}, {
value: 'yearMonth',
label: '12个月'
}]
}],
echartObj: null,
animateObj: [],
};
},
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 = {};
},
created() {
this.infor()
this.stationCode = this.$route.query.stationCode
getStationDisplay(this.stationCode).then(val => {
this.DisplayList = val.result
this.DisplayListdetailList = val.result.effect_assess[0].detailList[2]
})
this.initChartData();//下方echart监测图标
this.hhlist();//土壤空气数据
// 实现轮询
this.timer['soil'] = setInterval(() => this.hhlistxunh(), 5000);
},
computed: {
classOption() {
@ -418,29 +405,44 @@ export default {
},
},
mounted() {
// 实时时间
this.getNowTime();
this.initMaintainLog();
this.initStart();
this.stationInfoApi();
},
methods: {
initMaintainLog(){
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.initChartData();//下方echart监测图标
this.stationDetailApi();
this.getNowTime();
this.initMaintainLog();
},
initMaintainLog(){//巡检日志
getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
if (res.code === 200) {
this.maintainLogList = res.result.records;
console.log('maintainLogList',this.maintainLogList)
setTimeout(() => {
this.loading = false;
}, 1000)
}
})
},
changeDateType() {
this.summryAllData = null;
// this.summryAllData = null;
this.initChartData();
},
initChartData() {
this.riverList = [];
this.summryAllData = [];
getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => {
if (res.code === 200) {
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'];
@ -470,13 +472,17 @@ export default {
initEchartDom(index) {
this.$nextTick(() => {
let domKey = `myChartDiv0`;
let data = this.summryAllData[index];
let divDom = document.getElementById(domKey);
if (!divDom) {
console.log('没找到dom：', domKey, divDom)
return;
}
console.log('开始初始化echart：', domKey, divDom, data)
if(this.echartObj){
this.echartObj.dispose();
}
this.echartObj = this.$echarts.init(divDom);
let data = this.summryAllData[index];
console.log('开始初始化echart：' )
let dataObj = [];
let i = 0;
let colors = [
@ -565,9 +571,7 @@ export default {
},
series: seriesData
};
//为echarts对象加载数据
let echartObj = this.$echarts.init(divDom);
echartObj.setOption(optionLine);
this.echartObj.setOption(optionLine);
})
},
zdinfor(){
@ -612,12 +616,10 @@ export default {
},
// 实时时间
getNowTime() {
let speed = 1000
let that = this
let theNowTime = function () {
this.interval['time'] = setInterval(() =>{
that.nowTime = that.timeNumber()
}
setInterval(theNowTime, speed)
}, 1000)
},
timeNumber() {
let today = new Date()
@ -633,28 +635,30 @@ export default {
return val
},
qcguanbi() {
this.trqxzxdialogTableVisible = false
this.qczddialogTableVisible = false
},
hhlist() {
stationDetailApi() {
let that = this;
let stationCode = this.$route.query.stationCode
getStationDetail(stationCode).then(res => {
// this.stationDetail = null
if(that.stationDetail){
that.stationDetail.latestData = []
}
getStationDetail(this.stationCode).then(res => {
this.stationDetail = res.result
this.DetailListAirData = res.result.latestAirData[0]
//空气数据
if (this.DetailListAirData) {
this.AirDataWind = this.DetailListAirData.dataWindDirection
this.AirDataFallout = this.DetailListAirData.dataSunFallout
this.AirDataRainFall = this.DetailListAirData.dataRainFall
this.AirDataSpeed = this.DetailListAirData.dataWindSpeed
this.AirDataTemp = this.DetailListAirData.dataAirTemp
this.AirDataAirWet = this.DetailListAirData.dataAirWet
this.AirDataAirPress = this.DetailListAirData.dataAirPress
if (this.DetailListAirData) {}
if (this.stationDetail.latestWaterData[0]) { //水数据
this.waterData.dataWaterTemp = this.stationDetail.latestWaterData[0].dataWaterTemp
this.waterData.dataWaterPh = this.stationDetail.latestWaterData[0].dataWaterPh
this.waterData.dataWaterDo = this.stationDetail.latestWaterData[0].dataWaterDo
this.waterData.dataWaterDdl = this.stationDetail.latestWaterData[0].dataWaterDdl
this.waterData.dataWaterNtu = this.stationDetail.latestWaterData[0].dataWaterNtu
this.animateObj = [];
this.hhlistxunh();
}
// 土壤数据
this.DetailListSoilData = res.result.latestSoilData[0]
this.hhlistxunh();
// this.DetailListSoilData = res.result.latestSoilData[0]
that.currentPlayerLive = false;
// 监控画面
setTimeout(() => {
@ -704,25 +708,41 @@ export default {
},
})
},
stationInfoApi(){
stationInfo().then(res => {
this.stationInfoList = res.result
if (this.stationInfoList) {
res.result.map(item => {
this.stationList.push({
stationCode: item.stationCode,
stationName: item.stationName,
})
})
}
})
},
switchStation(e){
console.log(e);
// this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
this.initStart();
},
addAnimateObj(dom){
this.animateObj.push(dom);
// console.log('特效数组添加', this.animateObj.length);
},
hhlistxunh() {
if (this.DetailListSoilData) {
this.DetailSoilTemp = this.DetailListSoilData.dataSoilTemp
this.DetailSoilWet = this.DetailListSoilData.dataSoilWet
this.DetailSoilDdl = this.DetailListSoilData.dataSoilDdl
this.DetailSoilTemp2 = this.DetailListSoilData.dataSoilTemp2
this.DetailSoilWet2 = this.DetailListSoilData.dataSoilWet2
this.DetailSoilDdl2 = this.DetailListSoilData.dataSoilDdl2
this.DetailSoilTemp3 = this.DetailListSoilData.dataSoilTemp3
this.DetailSoilWet3 = this.DetailListSoilData.dataSoilWet3
this.DetailSoilDdl3 = this.DetailListSoilData.dataSoilDdl3
// 移除组件
this.refresh = false
// 在组件移除后，重新渲染组件
// this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
this.$nextTick(() => {
this.refresh = true
})
// console.log('数据特效 轮询展示', this.animateObj);
if(this.timer['water']){
clearTimeout(this.timer['water'])
}
this.animateObj.forEach((item, index) => {
// console.log('数据特效 轮询展示', item);
if(Boolean(Math.round(Math.random()))) {
item && item.start && item.start();
}
})
this.timer['water'] = setTimeout(() => this.hhlistxunh(), 5000);
},
screen() {
let element = document.documentElement;
@ -2391,5 +2411,18 @@ a:hover {
left: 246px;
top: 0px;
}
.switchLive {
position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
}
.switchLive:hover {
color: rgb(236, 196, 23);
}
.switchStation {
position: absolute;
right: 450px;
cursor:pointer;
z-index: 2000;
width: 180px
}
</style>