武乡大屏改造基本完成

This commit is contained in:
wgx 2026-05-11 19:17:48 +08:00
parent a7c1decc3e
commit 9ae166d778
2 changed files with 49 additions and 29 deletions

View File

@ -187,15 +187,15 @@
</transition>
<!-- 地图左下图例-->
<div v-if="mapTypeFlag==true" class="mapTuLi">
<div class="scdlist" @click="switchIcon('duizhuhe')">
<div class="scdlist" @click="switchIcon('livestock')">
<img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
<span class="scdlist_tit">畜禽污染监测站</span>
</div>
<div class="scdlist" @click="switchIcon('tuanbaihe')">
<div class="scdlist" @click="switchIcon('orient')">
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
<span class="scdlist_tit">农田污染监测站</span>
</div>
<div class="scdlist" @click="switchIcon('soil')">
<div class="scdlist" @click="switchIcon('watershed')">
<img src="@/assets/image/waterlive.png" class="xcdimg" alt="">
<span class="scdlist_tit">小流域监测站</span>
</div>
@ -562,6 +562,7 @@ export default {
soidShowFlag: false,
soilDataId: '',
tabsLoading: false,
lastZIndex: 1,
};
},
created() {
@ -767,7 +768,7 @@ export default {
viewMode: '3D',
resizeEnable: true,
zoom: zoomnum,
center: [111.436625, 36.771975],//
center: [112.83100231396601, 36.872032399813556],//
mapStyle: 'amap://styles/blue',
dragEnable: true,//truesetStatus/getStatus
jogEnable: true,//使truesetStatus/getStatus
@ -783,10 +784,15 @@ export default {
});
that.aMap.on('complete', (e) => {
var markerData = res.result;
let Marker = markerData.filter(ele => ele.type != 'light');//
let Marker = markerData.filter(ele => ele.type != 'light').sort((a,b) => {
if (b.type=='soil') return 1;
if (b.type!='soil') return -1;
return 0;
});//
console.log(Marker,'Marker')
Marker.map(item => {
let marker = new AMap.Marker({
zIndex: item.type == 'orient' ? 1000 : 500,
zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
icon: this.urlimg + item.picUrl,
position: [item.longitude, item.latitude],
offset: new AMap.Pixel(item.width, item.height),//
@ -796,7 +802,8 @@ export default {
extPics: item.extPics,
notes: item.notes,
name: item.name,
item: item
item: item,
stationType: item.type
}
});
if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//
@ -804,16 +811,16 @@ export default {
let indexnumb = e.target.getExtData().ids.slice(-1);
this.qcdtinfor = this.stationInfoList[indexnumb]
this.qcdtdialogTableVisible = true
console.log('livestock or orient', this.qyinformation)
// console.log('livestock or orient', this.qyinformation)
})
this.markersOrient.push(marker)
} else if(item.type == 'soil'){//
marker.on('click', e => {
this.soilDataId = e.target.getExtData()
this.soidShowFlag = true
console.log('soil click', )
// console.log('soil click', )
})
this.markersSoil.push(marker)
this.markersSoil.push(marker);
} else {
this.markersOther.push(marker)
}
@ -823,7 +830,7 @@ export default {
// that.aMap.setFitView(null, false, [100,400,200,200], 16);
that.aMap.setFitView();
setTimeout(() => {
that.aMap.setFitView(null, false, [130, 380, 200, 200], 16);
that.aMap.setFitView(null, false, [130, 380, 480, 480], 16);
// let temp = that.aMap.getCenter();//
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]);
}, 2000)
@ -1046,15 +1053,15 @@ export default {
// 3
jumpStationPage(e) {
let stationCode = e.stationCode
if (e.stationType == 'livestock') {
this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}})
// this.$message({
// message: '......',
// showClose: true,
// });
} else {
// if (e.stationType == 'livestock') {
// this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}})
// // this.$message({
// // message: '......',
// // showClose: true,
// // });
// } else {
this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
}
// }
},
// 退
handleClosetuichu(done) {
@ -1109,22 +1116,27 @@ export default {
this.lastClickIcon = ''
} else {
this.lastClickIcon = flag;
if (flag == 'duizhuhe') {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1);
} else if (flag == 'tuanbaihe') {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1);
if (flag == 'livestock') {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1);
} else if (flag == 'orient') {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("orient") != -1);
} else if (flag == 'watershed') {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1);
} else if (flag == 'soil') {
arr = this.markersSoil;
}
}
if (arr && arr.length > 0) {
that.aMap.setFitView(arr, false, [200, 500, 300, 300], 16);
arr.map(item => {
item.setzIndex((that.lastZIndex+=2));
});
that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16);
// setTimeout(() => {
// let temp = that.aMap.getCenter();//
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
// },2000)
} else {
that.aMap.setFitView(null, false, [100, 400, 200, 200], 16);
that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
}
}
},

View File

@ -370,7 +370,8 @@
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div style=" margin-top: 26px; margin-bottom: 10px; ">
<el-timeline v-if="alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;">
<el-collapse-transition>
<el-timeline v-if="alertList && alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;">
<el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`"
:size="'normal'" :placement="`top`" style="top: 20px;" >
<div class="maintainLog">
@ -389,9 +390,15 @@
</div>
</el-timeline-item>
</el-timeline>
<div v-if="alertList.length <= 0">
</el-collapse-transition>
<div v-if="alertList && alertList.length <= 0">
<div style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>
</div>
<div v-if="!alertList">
<div style="margin:60px auto; width: 100%;font-size: 30px;color: #edd792; text-align: center;">
<i class="el-icon-loading"></i>
</div>
</div>
</div>
</div>
</div>
@ -499,7 +506,7 @@ export default {
}],
echartObj: null,
animateObj: [],
alertList: [],
alertList: null,
};
},
destroyed() {
@ -527,6 +534,8 @@ export default {
},
methods: {
doDestroyed(){
let that = this;
that.alertList = null;
//
Object.values(this.timer).map(item => {
if(item){
@ -540,7 +549,6 @@ export default {
});
this.interval = {};
this.timer = {};
let that = this;
if(that.player){
Object.keys(that.player).forEach(key => {
if(that.player[key]){