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

修复小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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
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>
@ -345,25 +345,25 @@
</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="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>
@ -380,7 +380,7 @@
<span>{{activity.itemName}}</span>
<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>标准值&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>
@ -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,58 +613,40 @@ export default {
})
},
changeDateType() {
// this.summryAllData = null;
this.initChartData();
},
initChartData() {
let that = this;
this.riverList = [];
this.summryAllData = [];
getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => {
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);
if (times !== 2) {
setTimeout(() => {
this.initEchartDom(2)
}, 1500);
}
return;
}
if(this.echartObj){
if (this.echartObj) {
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 = [
@ -673,7 +654,7 @@ export default {
'#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
'#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
'#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'
] ;
];
for (let key in data['datas']) {
if (data['datas'][key] instanceof Array) {
dataObj[i++] = {
@ -759,17 +740,17 @@ export default {
})
},
zdinfor(){
this.qczddialogTableVisible=true;
zdinfor() {
this.qczddialogTableVisible = true;
},
showEchartDialog(item, survItem) {
console.log('showEchartDialog', item, survItem)
if(survItem === 1){
if (survItem === 1) {
console.log('showEchartDialog111', item, survItem)
const dom = item.target.closest(".jcsssj2"); // 定位元素
if (dom) { // 是否是滚动组件的某一行/列
survItem = dom.dataset.survitem
if(survItem){
if (survItem) {
this.showEchartDialog(this.stationDetail, survItem)
}
}
@ -802,7 +783,7 @@ export default {
// 实时时间
getNowTime() {
let that = this
this.interval['time'] = setInterval(() =>{
this.interval['time'] = setInterval(() => {
that.nowTime = that.timeNumber()
}, 1000)
},
@ -825,7 +806,7 @@ export default {
stationDetailApi() {
let that = this;
// this.stationDetail = null
if(that.stationDetail){
if (that.stationDetail) {
that.stationDetail.latestData = []
}
getStationDetail(this.stationCode).then(res => {
@ -833,18 +814,19 @@ export default {
this.stationType = res.result.stationType
this.DetailListAirData = res.result.latestAirData[0]
//空气数据
if (this.DetailListAirData) { }
if (this.DetailListAirData) {
}
if (this.stationDetail.latestWaterData[0]) { //水数据
this.stationDetail.latestWaterData.map(item => {
if(item.survItem == 'dataWaterTemp'){
if (item.survItem == 'dataWaterTemp') {
that.waterData.dataWaterTemp = item.value
} else if(item.survItem == 'dataWaterPh'){
} else if (item.survItem == 'dataWaterPh') {
that.waterData.dataWaterPh = item.value
} else if(item.survItem == 'dataWaterDo'){
} else if (item.survItem == 'dataWaterDo') {
that.waterData.dataWaterDo = item.value
} else if(item.survItem == 'dataWaterDdl'){
} else if (item.survItem == 'dataWaterDdl') {
that.waterData.dataWaterDdl = item.value
} else if(item.survItem == 'dataWaterNtu'){
} else if (item.survItem == 'dataWaterNtu') {
that.waterData.dataWaterNtu = item.value
}
});
@ -853,34 +835,39 @@ 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){
initPlayer(itm, live) {
let that = this;
if(this.currentPlayerLive === live){
if (this.currentPlayerLive[itm.deployCode] === live) {
return;
}
that.currentPlayerLive = live;
if(that.player[itm.deployCode]){
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,
template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
url: itm.deviceUrl || itm.deviceIotUrl,
template: live ? "pcLive" : "pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启
sound: 0,
autoplay: true,
@ -892,12 +879,12 @@ export default {
if (that.player[itm.deployCode]) {
console.log('萤石云播放器播放成功自定义回调2', that.player[itm.deployCode])
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();
}
}, 2000)
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()
}
}, 60000)
@ -905,7 +892,7 @@ export default {
},
})
},
stationInfoApi(){
stationInfoApi() {
stationInfo().then(res => {
this.stationInfoList = res.result
if (this.stationInfoList) {
@ -919,24 +906,24 @@ export default {
}
})
},
switchStation(e){
switchStation(e) {
console.log('切换站点');
this.doDestroyed();
// this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
this.initStart();
},
addAnimateObj(dom){
addAnimateObj(dom) {
this.animateObj.push(dom);
// console.log('特效数组添加', this.animateObj.length);
},
hhlistxunh() {
// console.log('数据特效 轮询展示', this.animateObj);
if(this.timer['water']){
if (this.timer['water']) {
clearTimeout(this.timer['water'])
}
this.animateObj.forEach((item, index) => {
// console.log('数据特效 轮询展示', item);
if(Boolean(Math.round(Math.random()))) {
if (Boolean(Math.round(Math.random()))) {
item && item.start && item.start();
}
@ -1526,7 +1513,7 @@ export default {
height: 2.4vw;
background: #0c2139;
float: right;
display:block;
display: block;
}
.jcsssj_rt_tit {
@ -2533,6 +2520,7 @@ a:hover {
display: flex;
justify-content: center;
cursor: pointer;
.wucanshuDiv {
width: 144px;
height: 104px;
@ -2541,6 +2529,7 @@ a:hover {
background-size: cover;
text-align: center;
cursor: pointer;
.wucanshuValueDiv {
font-weight: 300;
font-family: HYChangLiSongKeBen, sans-serif;
@ -2552,20 +2541,23 @@ a:hover {
padding-left: 27px;
padding-top: 12px;
cursor: pointer;
.typeStyle {
font-family: sans-serif;
margin-left: 4px;
font-size: 12px;
}
}
.wucanshuValueDiv:hover {
color: #f4d877;
font-size: 29px;
}
}
.wucanshuDiv:hover {
color: #f4d877 !important;
font-size: 29px!important;
font-size: 29px !important;
}
.wucanshuNameDiv {
@ -2576,7 +2568,8 @@ a:hover {
font-size: 14px;
}
}
.maintainLog{
.maintainLog {
position: relative;
bottom: 28px;
width: 344px;
@ -2585,7 +2578,8 @@ a:hover {
background-origin: border-box;
background-size: contain;
color: white;
.maintainLogContent{
.maintainLogContent {
padding-left: 74px;
//padding-top: 8px;
color: #81b8e9;
@ -2594,78 +2588,96 @@ a:hover {
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 禁止换行 */
}
.maintainLogPerson{
.maintainLogPerson {
display: none;
}
.maintainLogTime{
.maintainLogTime {
padding-left: 74px;
padding-top: 8px;
color: #bcbbbb;
}
}
.el-timeline-item__tail {
border-left-color: rgb(71 105 172) !important;
}
.dataTypeEchart2{
.dataTypeEchart2 {
left: 246px;
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);
}
.switchStation {
position: absolute;
right: 450px;
cursor:pointer;
cursor: pointer;
z-index: 2000;
width: 180px
}
.xuqingchuli{
.in1con_lf_tit{
.xuqingchuli {
.in1con_lf_tit {
width: 100%;
height: 3vw;
text-align: center;
overflow: hidden;
position: relative;
}
.in1con_lf_titshow{
.in1con_lf_titshow {
font-size: 1vw;
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;
margin-top: 0.9vw;
font-family: douyuFont;
}
.qxfwzcl{
.qxfwzcl {
width: 100%;
margin-top: 1vw;
overflow: hidden;
}
.qxfwzcl_left{
.qxfwzcl_left {
width: 40%;
float: left;
}
.qxfwzcl_rit{
.qxfwzcl_rit {
width: 60%;
float: right;
position: relative;
}
.qxfwzcl_left_tit{
.qxfwzcl_left_tit {
width: 90%;
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;
margin-left: 5%;
color:#e5eefa ;
color: #e5eefa;
padding-left: 0.6vw;
font-size: 0.7vw;
}
.qxfwzcl_left_num{
.qxfwzcl_left_num {
width: 100%;
display: block;
text-align: center;
@ -2674,14 +2686,15 @@ a:hover {
margin-top: 0.2vw;
margin-bottom: 1vw;
}
.in1con_lf_imglf_num_jix{
.in1con_lf_imglf_num_jix {
font-size: 1.5vw;
font-weight: 300;
font-family: HYChangLiSongKeBen;
letter-spacing:0.1vw
letter-spacing: 0.1vw
}
.qxfwzcl_rit_smt{
.qxfwzcl_rit_smt {
font-size: 0.7vw;
color: #fff;
position: absolute;
@ -2689,15 +2702,17 @@ a:hover {
left: 25%;
z-index: 2;
}
.qxfwzcl_rit_num{
.qxfwzcl_rit_num {
font-size: 2vw;
color: #f1ff0d;
position: absolute;
top:4.4vw;
top: 4.4vw;
left: 34%;
z-index: 2;
}
.png01_iSpt{
.png01_iSpt {
width: 150%;
position: absolute;
top: -3vw;
@ -2705,7 +2720,7 @@ a:hover {
z-index: 2;
}
.qcshuj{
.qcshuj {
width: 100%;
position: absolute;
top: -2vw;