修复小bug

This commit is contained in:
wgx 2026-07-30 16:45:26 +08:00
parent c04b3e4908
commit f2ab33a2ce
1 changed files with 174 additions and 159 deletions

View File

@ -58,13 +58,13 @@
<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>
@ -345,25 +345,25 @@
</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>-->
<!-- <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 style="padding-left: 30px; margin-top: 26px; ">-->
<!-- <el-timeline>--> <!-- <el-timeline>-->
<!-- <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"--> <!-- <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"-->
<!-- :placement="`top`">--> <!-- :placement="`top`">-->
<!-- <div class="maintainLog">--> <!-- <div class="maintainLog">-->
<!-- <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>--> <!-- <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>-->
<!-- <div class="maintainLogPerson">维护人{{activity.maintainPerson}}</div>--> <!-- <div class="maintainLogPerson">维护人{{activity.maintainPerson}}</div>-->
<!-- <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;--> <!-- <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;-->
<!-- <span class="el-icon-time"></span> {{activity.maintainTime}}</div>--> <!-- <span class="el-icon-time"></span> {{activity.maintainTime}}</div>-->
<!-- </div>--> <!-- </div>-->
<!-- </el-timeline-item>--> <!-- </el-timeline-item>-->
<!-- </el-timeline>--> <!-- </el-timeline>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<div> <div>
<div class="in1con_lf_tit "> <div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">监测与预警</span> <span class="in1con_lf_titshow">监测与预警</span>
@ -380,7 +380,7 @@
<span>{{activity.itemName}}</span> <span>{{activity.itemName}}</span>
<span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span> <span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span>
<span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}}&nbsp;</span> <span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}}&nbsp;</span>
<!-- <span>标准值&nbsp;{{activity.normalValue}}{{activity.survUnit}}</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> <span :style="{color:activity.readStatus=='low'?'#66A8F1FF':activity.readStatus=='high'?'#ff676a':''}">({{activity.readStatus=='low'?'偏低':activity.readStatus=='high'?'偏高':'正常'}})</span>
</div> </div>
<div class="maintainLogPerson"></div> <div class="maintainLogPerson"></div>
@ -466,7 +466,7 @@ export default {
return { return {
loading: true, loading: true,
stationList:[], stationList:[],
currentPlayerLive: true, currentPlayerLive: {},
singleEchartDialogShowFlag: false, singleEchartDialogShowFlag: false,
singleEchartData: null, singleEchartData: null,
stationCode: '', stationCode: '',
@ -490,8 +490,7 @@ export default {
fullscreen: false, // fullscreen: false, //
qczddialogTableVisible: false, qczddialogTableVisible: false,
waterData: {}, waterData: {},
summryAllData: null, summryAllDataJson: null,
echartIndex: 0,
maintainLogList: [], maintainLogList: [],
dateType: 'monthDays', dateType: 'monthDays',
dateTypeOptions: [ { dateTypeOptions: [ {
@ -614,58 +613,40 @@ export default {
}) })
}, },
changeDateType() { changeDateType() {
// this.summryAllData = null;
this.initChartData(); this.initChartData();
}, },
initChartData() { initChartData() {
let that = this;
this.riverList = []; this.riverList = [];
this.summryAllData = []; this.summryAllDataJson = {};
getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => { getIndexSummry({summrayMode: this.dateType, stationCode: this.stationCode}).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.summryAllData = res.result; res.result.map(item => {
let len = this.summryAllData.length; that.summryAllDataJson[item.stationCode] = item;
// this.summryAllData.map((item1, index) => { });
// if (index % 2 === 0 && item1['datas'] && (index + 1) < len) { this.initEchartDom()
// 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, times) { initEchartDom(times) {
this.$nextTick(() => { this.$nextTick(() => {
let domKey = `myChartDiv0`; let domKey = `myChartDiv0`;
let divDom = document.getElementById(domKey); let divDom = document.getElementById(domKey);
if (!divDom) { if (!divDom) {
console.warn('没找到dom,两秒后重试:', domKey, divDom) console.warn('没找到dom,两秒后重试:', domKey, divDom)
if(times!==2){ if (times !== 2) {
setTimeout(()=>{this.initEchartDom(index,2)}, 1500); setTimeout(() => {
this.initEchartDom(2)
}, 1500);
} }
return; return;
} }
if(this.echartObj){ if (this.echartObj) {
this.echartObj.dispose(); this.echartObj.dispose();
} }
this.echartObj = this.$echarts.init(divDom); this.echartObj = this.$echarts.init(divDom);
let data = this.summryAllData[index]; let data = this.summryAllDataJson[this.stationCode];
let dataObj = []; let dataObj = [];
let i = 0; let i = 0;
let colors = [ let colors = [
@ -673,7 +654,7 @@ export default {
'#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4', '#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
'#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000', '#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
'#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321' '#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'
] ; ];
for (let key in data['datas']) { for (let key in data['datas']) {
if (data['datas'][key] instanceof Array) { if (data['datas'][key] instanceof Array) {
dataObj[i++] = { dataObj[i++] = {
@ -759,17 +740,17 @@ export default {
}) })
}, },
zdinfor(){ zdinfor() {
this.qczddialogTableVisible=true; this.qczddialogTableVisible = true;
}, },
showEchartDialog(item, survItem) { showEchartDialog(item, survItem) {
console.log('showEchartDialog', item, survItem) console.log('showEchartDialog', item, survItem)
if(survItem === 1){ if (survItem === 1) {
console.log('showEchartDialog111', item, survItem) console.log('showEchartDialog111', item, survItem)
const dom = item.target.closest(".jcsssj2"); // const dom = item.target.closest(".jcsssj2"); //
if (dom) { // / if (dom) { // /
survItem = dom.dataset.survitem survItem = dom.dataset.survitem
if(survItem){ if (survItem) {
this.showEchartDialog(this.stationDetail, survItem) this.showEchartDialog(this.stationDetail, survItem)
} }
} }
@ -802,7 +783,7 @@ export default {
// //
getNowTime() { getNowTime() {
let that = this let that = this
this.interval['time'] = setInterval(() =>{ this.interval['time'] = setInterval(() => {
that.nowTime = that.timeNumber() that.nowTime = that.timeNumber()
}, 1000) }, 1000)
}, },
@ -825,7 +806,7 @@ export default {
stationDetailApi() { stationDetailApi() {
let that = this; let that = this;
// this.stationDetail = null // this.stationDetail = null
if(that.stationDetail){ if (that.stationDetail) {
that.stationDetail.latestData = [] that.stationDetail.latestData = []
} }
getStationDetail(this.stationCode).then(res => { getStationDetail(this.stationCode).then(res => {
@ -833,18 +814,19 @@ export default {
this.stationType = res.result.stationType this.stationType = res.result.stationType
this.DetailListAirData = res.result.latestAirData[0] this.DetailListAirData = res.result.latestAirData[0]
// //
if (this.DetailListAirData) { } if (this.DetailListAirData) {
}
if (this.stationDetail.latestWaterData[0]) { // if (this.stationDetail.latestWaterData[0]) { //
this.stationDetail.latestWaterData.map(item => { this.stationDetail.latestWaterData.map(item => {
if(item.survItem == 'dataWaterTemp'){ if (item.survItem == 'dataWaterTemp') {
that.waterData.dataWaterTemp = item.value that.waterData.dataWaterTemp = item.value
} else if(item.survItem == 'dataWaterPh'){ } else if (item.survItem == 'dataWaterPh') {
that.waterData.dataWaterPh = item.value that.waterData.dataWaterPh = item.value
} else if(item.survItem == 'dataWaterDo'){ } else if (item.survItem == 'dataWaterDo') {
that.waterData.dataWaterDo = item.value that.waterData.dataWaterDo = item.value
} else if(item.survItem == 'dataWaterDdl'){ } else if (item.survItem == 'dataWaterDdl') {
that.waterData.dataWaterDdl = item.value that.waterData.dataWaterDdl = item.value
} else if(item.survItem == 'dataWaterNtu'){ } else if (item.survItem == 'dataWaterNtu') {
that.waterData.dataWaterNtu = item.value that.waterData.dataWaterNtu = item.value
} }
}); });
@ -853,34 +835,39 @@ 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,
autoplay: true, autoplay: true,
@ -892,12 +879,12 @@ export default {
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.timer[itm.deployCode] = setTimeout(() => { that.timer[itm.deployCode] = setTimeout(() => {
if(that.player[itm.deployCode] && that.player[itm.deployCode].closeSound){ 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){ if (that.player[itm.deployCode] && that.player[itm.deployCode].pause) {
that.player[itm.deployCode].pause() that.player[itm.deployCode].pause()
} }
}, 60000) }, 60000)
@ -905,7 +892,7 @@ export default {
}, },
}) })
}, },
stationInfoApi(){ stationInfoApi() {
stationInfo().then(res => { stationInfo().then(res => {
this.stationInfoList = res.result this.stationInfoList = res.result
if (this.stationInfoList) { if (this.stationInfoList) {
@ -919,24 +906,24 @@ export default {
} }
}) })
}, },
switchStation(e){ switchStation(e) {
console.log('切换站点'); console.log('切换站点');
this.doDestroyed(); this.doDestroyed();
// this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}}) // this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
this.initStart(); this.initStart();
}, },
addAnimateObj(dom){ addAnimateObj(dom) {
this.animateObj.push(dom); this.animateObj.push(dom);
// console.log('', this.animateObj.length); // console.log('', this.animateObj.length);
}, },
hhlistxunh() { hhlistxunh() {
// console.log(' ', this.animateObj); // console.log(' ', this.animateObj);
if(this.timer['water']){ if (this.timer['water']) {
clearTimeout(this.timer['water']) clearTimeout(this.timer['water'])
} }
this.animateObj.forEach((item, index) => { this.animateObj.forEach((item, index) => {
// console.log(' ', item); // console.log(' ', item);
if(Boolean(Math.round(Math.random()))) { if (Boolean(Math.round(Math.random()))) {
item && item.start && item.start(); item && item.start && item.start();
} }
@ -1526,7 +1513,7 @@ export default {
height: 2.4vw; height: 2.4vw;
background: #0c2139; background: #0c2139;
float: right; float: right;
display:block; display: block;
} }
.jcsssj_rt_tit { .jcsssj_rt_tit {
@ -2533,6 +2520,7 @@ a:hover {
display: flex; display: flex;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
.wucanshuDiv { .wucanshuDiv {
width: 144px; width: 144px;
height: 104px; height: 104px;
@ -2541,6 +2529,7 @@ a:hover {
background-size: cover; background-size: cover;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
.wucanshuValueDiv { .wucanshuValueDiv {
font-weight: 300; font-weight: 300;
font-family: HYChangLiSongKeBen, sans-serif; font-family: HYChangLiSongKeBen, sans-serif;
@ -2552,20 +2541,23 @@ a:hover {
padding-left: 27px; padding-left: 27px;
padding-top: 12px; padding-top: 12px;
cursor: pointer; cursor: pointer;
.typeStyle { .typeStyle {
font-family: sans-serif; font-family: sans-serif;
margin-left: 4px; margin-left: 4px;
font-size: 12px; font-size: 12px;
} }
} }
.wucanshuValueDiv:hover { .wucanshuValueDiv:hover {
color: #f4d877; color: #f4d877;
font-size: 29px; font-size: 29px;
} }
} }
.wucanshuDiv:hover { .wucanshuDiv:hover {
color: #f4d877 !important; color: #f4d877 !important;
font-size: 29px!important; font-size: 29px !important;
} }
.wucanshuNameDiv { .wucanshuNameDiv {
@ -2576,7 +2568,8 @@ a:hover {
font-size: 14px; font-size: 14px;
} }
} }
.maintainLog{
.maintainLog {
position: relative; position: relative;
bottom: 28px; bottom: 28px;
width: 344px; width: 344px;
@ -2585,7 +2578,8 @@ a:hover {
background-origin: border-box; background-origin: border-box;
background-size: contain; background-size: contain;
color: white; color: white;
.maintainLogContent{
.maintainLogContent {
padding-left: 74px; padding-left: 74px;
//padding-top: 8px; //padding-top: 8px;
color: #81b8e9; color: #81b8e9;
@ -2594,78 +2588,96 @@ a:hover {
text-overflow: ellipsis; /* 显示省略号 */ text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 禁止换行 */ white-space: nowrap; /* 禁止换行 */
} }
.maintainLogPerson{
.maintainLogPerson {
display: none; display: none;
} }
.maintainLogTime{
.maintainLogTime {
padding-left: 74px; padding-left: 74px;
padding-top: 8px; padding-top: 8px;
color: #bcbbbb; color: #bcbbbb;
} }
} }
.el-timeline-item__tail { .el-timeline-item__tail {
border-left-color: rgb(71 105 172) !important; border-left-color: rgb(71 105 172) !important;
} }
.dataTypeEchart2{
.dataTypeEchart2 {
left: 246px; left: 246px;
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);
} }
.switchStation { .switchStation {
position: absolute; position: absolute;
right: 450px; right: 450px;
cursor:pointer; cursor: pointer;
z-index: 2000; z-index: 2000;
width: 180px width: 180px
} }
.xuqingchuli{
.in1con_lf_tit{ .xuqingchuli {
.in1con_lf_tit {
width: 100%; width: 100%;
height: 3vw; height: 3vw;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.in1con_lf_titshow{
.in1con_lf_titshow {
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
text-shadow: 0px 2px 0px rgba(4,49,52,0.55); text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
display: block; display: block;
margin-top: 0.9vw; margin-top: 0.9vw;
font-family: douyuFont; font-family: douyuFont;
} }
.qxfwzcl{ .qxfwzcl {
width: 100%; width: 100%;
margin-top: 1vw; margin-top: 1vw;
overflow: hidden; overflow: hidden;
} }
.qxfwzcl_left{
.qxfwzcl_left {
width: 40%; width: 40%;
float: left; float: left;
} }
.qxfwzcl_rit{
.qxfwzcl_rit {
width: 60%; width: 60%;
float: right; float: right;
position: relative; position: relative;
} }
.qxfwzcl_left_tit{
.qxfwzcl_left_tit {
width: 90%; width: 90%;
height: 1.4vw; height: 1.4vw;
line-height: 1.4vw; line-height: 1.4vw;
background: url(../../assets/image/qctit.png)no-repeat; background: url(../../assets/image/qctit.png) no-repeat;
background-size: cover; background-size: cover;
margin-left: 5%; margin-left: 5%;
color:#e5eefa ; color: #e5eefa;
padding-left: 0.6vw; padding-left: 0.6vw;
font-size: 0.7vw; font-size: 0.7vw;
} }
.qxfwzcl_left_num{
.qxfwzcl_left_num {
width: 100%; width: 100%;
display: block; display: block;
text-align: center; text-align: center;
@ -2674,14 +2686,15 @@ a:hover {
margin-top: 0.2vw; margin-top: 0.2vw;
margin-bottom: 1vw; margin-bottom: 1vw;
} }
.in1con_lf_imglf_num_jix{
.in1con_lf_imglf_num_jix {
font-size: 1.5vw; font-size: 1.5vw;
font-weight: 300; font-weight: 300;
font-family: HYChangLiSongKeBen; font-family: HYChangLiSongKeBen;
letter-spacing:0.1vw letter-spacing: 0.1vw
} }
.qxfwzcl_rit_smt{ .qxfwzcl_rit_smt {
font-size: 0.7vw; font-size: 0.7vw;
color: #fff; color: #fff;
position: absolute; position: absolute;
@ -2689,15 +2702,17 @@ a:hover {
left: 25%; left: 25%;
z-index: 2; z-index: 2;
} }
.qxfwzcl_rit_num{
.qxfwzcl_rit_num {
font-size: 2vw; font-size: 2vw;
color: #f1ff0d; color: #f1ff0d;
position: absolute; position: absolute;
top:4.4vw; top: 4.4vw;
left: 34%; left: 34%;
z-index: 2; z-index: 2;
} }
.png01_iSpt{
.png01_iSpt {
width: 150%; width: 150%;
position: absolute; position: absolute;
top: -3vw; top: -3vw;
@ -2705,7 +2720,7 @@ a:hover {
z-index: 2; z-index: 2;
} }
.qcshuj{ .qcshuj {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: -2vw; top: -2vw;