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

武乡大屏改造基本完成

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

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

@ -187,15 +187,15 @@
</transition> </transition>
<!-- 地图左下图例--> <!-- 地图左下图例-->
<div v-if="mapTypeFlag==true" class="mapTuLi"> <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=""> <img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
<span class="scdlist_tit">畜禽污染监测站</span> <span class="scdlist_tit">畜禽污染监测站</span>
</div> </div>
<div class="scdlist" @click="switchIcon('tuanbaihe')"> <div class="scdlist" @click="switchIcon('orient')">
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt=""> <img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
<span class="scdlist_tit">农田污染监测站</span> <span class="scdlist_tit">农田污染监测站</span>
</div> </div>
<div class="scdlist" @click="switchIcon('soil')"> <div class="scdlist" @click="switchIcon('watershed')">
<img src="@/assets/image/waterlive.png" class="xcdimg" alt=""> <img src="@/assets/image/waterlive.png" class="xcdimg" alt="">
<span class="scdlist_tit">小流域监测站</span> <span class="scdlist_tit">小流域监测站</span>
</div> </div>
@ -562,6 +562,7 @@ export default {
soidShowFlag: false, soidShowFlag: false,
soilDataId: '', soilDataId: '',
tabsLoading: false, tabsLoading: false,
lastZIndex: 1,
}; };
}, },
created() { created() {
@ -767,7 +768,7 @@ export default {
viewMode: '3D', viewMode: '3D',
resizeEnable: true, resizeEnable: true,
zoom: zoomnum, zoom: zoomnum,
center: [111.436625, 36.771975],//默认的地图中心经纬度 center: [112.83100231396601, 36.872032399813556],//默认的地图中心经纬度
mapStyle: 'amap://styles/blue', mapStyle: 'amap://styles/blue',
dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制 dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制 jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
@ -783,10 +784,15 @@ export default {
}); });
that.aMap.on('complete', (e) => { that.aMap.on('complete', (e) => {
var markerData = res.result; 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 => { Marker.map(item => {
let marker = new AMap.Marker({ 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, icon: this.urlimg + item.picUrl,
position: [item.longitude, item.latitude], position: [item.longitude, item.latitude],
offset: new AMap.Pixel(item.width, item.height),//偏移量 offset: new AMap.Pixel(item.width, item.height),//偏移量
@ -796,7 +802,8 @@ export default {
extPics: item.extPics, extPics: item.extPics,
notes: item.notes, notes: item.notes,
name: item.name, name: item.name,
item: item item: item,
stationType: item.type
} }
}); });
if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗 if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗
@ -804,16 +811,16 @@ export default {
let indexnumb = e.target.getExtData().ids.slice(-1); let indexnumb = e.target.getExtData().ids.slice(-1);
this.qcdtinfor = this.stationInfoList[indexnumb] this.qcdtinfor = this.stationInfoList[indexnumb]
this.qcdtdialogTableVisible = true this.qcdtdialogTableVisible = true
console.log('livestock or orient', this.qyinformation) // console.log('livestock or orient', this.qyinformation)
}) })
this.markersOrient.push(marker) this.markersOrient.push(marker)
} else if(item.type == 'soil'){//土壤弹窗，长期监测站 } else if(item.type == 'soil'){//土壤弹窗，长期监测站
marker.on('click', e => { marker.on('click', e => {
this.soilDataId = e.target.getExtData() this.soilDataId = e.target.getExtData()
this.soidShowFlag = true this.soidShowFlag = true
console.log('soil click', ) // console.log('soil click', )
}) })
this.markersSoil.push(marker) this.markersSoil.push(marker);
} else { } else {
this.markersOther.push(marker) this.markersOther.push(marker)
} }
@ -823,7 +830,7 @@ export default {
// that.aMap.setFitView(null, false, [100,400,200,200], 16); // that.aMap.setFitView(null, false, [100,400,200,200], 16);
that.aMap.setFitView(); that.aMap.setFitView();
setTimeout(() => { 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();//矫正显示标点位置在正中心 // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]); // that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]);
}, 2000) }, 2000)
@ -1046,15 +1053,15 @@ export default {
// 跳转页面3 // 跳转页面3
jumpStationPage(e) { jumpStationPage(e) {
let stationCode = e.stationCode let stationCode = e.stationCode
if (e.stationType == 'livestock') { // if (e.stationType == 'livestock') {
this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}}) // this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}})
// this.$message({ // // this.$message({
// message: '站点正在建设中......', // // message: '站点正在建设中......',
// showClose: true, // // showClose: true,
// }); // // });
} else { // } else {
this.$router.push({path: '/MywrList', query: {stationCode: stationCode}}) this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
} // }
}, },
// 弹窗退出登录 // 弹窗退出登录
handleClosetuichu(done) { handleClosetuichu(done) {
@ -1109,22 +1116,27 @@ export default {
this.lastClickIcon = '' this.lastClickIcon = ''
} else { } else {
this.lastClickIcon = flag; this.lastClickIcon = flag;
if (flag == 'duizhuhe') { if (flag == 'livestock') {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1); arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1);
} else if (flag == 'tuanbaihe') { } else if (flag == 'orient') {
arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1); 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') { } else if (flag == 'soil') {
arr = this.markersSoil; arr = this.markersSoil;
} }
} }
if (arr && arr.length > 0) { 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(() => { // setTimeout(() => {
// let temp = that.aMap.getCenter();//矫正显示标点位置在正中心 // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]); // that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
// },2000) // },2000)
} else { } else {
that.aMap.setFitView(null, false, [100, 400, 200, 200], 16); that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
} }
} }
}, },

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

@ -370,7 +370,8 @@
<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=" margin-top: 26px; margin-bottom: 10px; "> <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`" <el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`"
:size="'normal'" :placement="`top`" style="top: 20px;" > :size="'normal'" :placement="`top`" style="top: 20px;" >
<div class="maintainLog"> <div class="maintainLog">
@ -389,9 +390,15 @@
</div> </div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </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 style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>
</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> </div>
</div> </div>
@ -499,7 +506,7 @@ export default {
}], }],
echartObj: null, echartObj: null,
animateObj: [], animateObj: [],
alertList: [], alertList: null,
}; };
}, },
destroyed() { destroyed() {
@ -527,6 +534,8 @@ export default {
}, },
methods: { methods: {
doDestroyed(){ doDestroyed(){
let that = this;
that.alertList = null;
//离开页面时销毁 //离开页面时销毁
Object.values(this.timer).map(item => { Object.values(this.timer).map(item => {
if(item){ if(item){
@ -540,7 +549,6 @@ export default {
}); });
this.interval = {}; this.interval = {};
this.timer = {}; this.timer = {};
let that = this;
if(that.player){ if(that.player){
Object.keys(that.player).forEach(key => { Object.keys(that.player).forEach(key => {
if(that.player[key]){ if(that.player[key]){