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

优化大屏加载速度和打包大小

This commit is contained in:
wgx 2025-11-20 19:44:06 +08:00
parent 445f8b6e6a
commit 4c86d844df
8 changed files with 461 additions and 575 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/index.js
View File

@ -69,12 +69,12 @@ export function login(data) {
})
}
// 污染治理效果折线图
export function getIndexSummry(stationCode) {
export function getIndexSummry(data) {
return requests({
url: '/zh-applet-admin/appmana/bigScreen/getIndexSummry?stationCode='+stationCode,
url: '/zh-applet-admin/appmana/bigScreen/getIndexSummry',
method: 'post',
headers: {},
stationCode
headers: { 'content-type': 'application/json; charset=UTF-8' },
data: data? data : {}
})
}

90
src/assets/css/index.css
View File

@ -556,6 +556,49 @@
margin-left: 3%;
font-family: douyuFont;
}
.dataTypeEchart{
width: 53px;
height: 31px;
color: #fff;
margin-top: 15px;
line-height: 32px;
background: rgb(14 44 63);
border-radius: 0.4vw;
border: 1px solid #4b677c;
cursor: pointer;
float: left;
margin-left: 15px;
padding: 0px;
text-align: center;
z-index: 500;
position: absolute;
}
.dataTypeEchart2{
width: 66px;
height: 32px;
color: #fff;
margin-top: 15px;
line-height: 32px;
background: rgb(14 44 63);
border-radius: 0.4vw;
border: 1px solid #4b677c;
cursor: pointer;
float: left;
margin-left: 15px;
padding: 0px;
text-align: center;
z-index: 500;
position: absolute;
left: 13px;
top: 30px;
.el-input__inner{
height:30px;
background: #0e2e4f;
}
.el-input__icon{
height:36px;
}
}
.zywr_titrt{
width: 25%;
height: 3vw;
@ -608,48 +651,17 @@
}
#chart1{height:12vw;}
.scdlist{
width: 9vw;
width: 7vw;
height: 2vw;
margin-top: 0.4vw;
line-height: 2vw;
background: rgba(0,0,0,0.8);
border-radius: 0.4vw;
border: 1px solid #4b677c;
position: absolute;
/*position: absolute;*/
bottom: 16vw;
left: 24%;
}
.scdlist2{
width: 9vw;
height: 2vw;
line-height: 2vw;
background: rgba(0,0,0,0.8);
border-radius: 0.4vw;
border: 1px solid #4b677c;
position: absolute;
bottom: 19vw;
left: 24%;
}
.scdlist3{
width: 9vw;
height: 2vw;
line-height: 2vw;
background: rgba(0,0,0,0.8);
border-radius: 0.4vw;
border: 1px solid #4b677c;
position: absolute;
bottom: 22vw;
left: 24%;
}
.scdlist4{
width: 9vw;
height: 2vw;
line-height: 2vw;
background: rgba(0,0,0,0.8);
border-radius: 0.4vw;
border: 1px solid #4b677c;
position: absolute;
bottom: 25vw;
left: 24%;
cursor: pointer;
}
.scdlistpos{
width: 9vw;
@ -697,13 +709,7 @@
}
.xcdimg{
width: 0.9vw;
/* margin-top: 0.4vw; */
margin-left: 0.4vw;
margin-right: 0.4vw;
}
.xcd2img{
width: 0.7vw;
/* margin-top: 0.1vw; */
margin-top: 0.4vw;
margin-left: 0.4vw;
margin-right: 0.4vw;
}

BIN
src/assets/image/icon-blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/image/icon-yellow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/image/xcd2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/image/xcd22.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -20,7 +20,6 @@
<div class="nav_btn">
<div class="btn_left">
<span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"></span>
</div>
<div class="btn_right"><hefentianqi />
<img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt="">
@ -42,38 +41,17 @@
</el-button>
<img src="@/assets/image/sanjiao.png" class="sanjiao" alt="">
</el-dialog>
</div>
<div class="content">
<!-- <button @click="isShowBtn" style="position: fixed;top:5.2vw;left:26%;z-index: 999;">切换</button> -->
<img src="@/assets/image/qiehuan2.png" @click="isShowBtn" style="position: fixed;top:5.2vw;right:26%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-if="isShow==true" >
<img src="@/assets/image/qiehuan.png" @click="isShowBtn" style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
<!-- <img src="@/assets/image/sbdscd.png" @click="sbdscdBtn" style="position: fixed;top:5.2vw;left:26%;z-index: 999;width:12vw;cursor: pointer;" alt="" > -->
<!-- <el-tooltip content="杀虫灯" effect="light" placement="top">-->
<!-- <el-switch-->
<!-- v-model="switchValue"-->
<!-- active-color="#13ce66"-->
<!-- inactive-color="#ff4949"-->
<!-- @change="switchBtn"-->
<!-- v-if="isShow==true"-->
<!-- style="position: fixed;bottom:17.2vw;right:25%;z-index: 999;">-->
<!-- </el-switch>-->
<!-- <el-switch-->
<!-- v-model="switchValue"-->
<!-- active-color="#13ce66"-->
<!-- inactive-color="#ff4949"-->
<!-- @change="switchBtn"-->
<!-- v-else-->
<!-- style="position: fixed;bottom:6.2vw;right:3%;z-index: 999;">-->
<!-- </el-switch>-->
<!-- </el-tooltip>-->
<div id="container" v-if="fullscreen==false" style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;transform:scale(1.05,1.05);"></div>
<div id="container" v-else style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>
<img src="@/assets/image/qiehuan2.png" @click="mapTypeSwitch" style="position: fixed;top:5.2vw;right:26%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-if="mapTypeFlag==true" >
<img src="@/assets/image/qiehuan.png" @click="mapTypeSwitch" style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
<!-- <div id="container" v-if="fullscreen==false" style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;transform:scale(1.05,1.05);"></div>-->
<!-- <div id="container" v-else style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>-->
<div id="container" style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>
<!-- 左上头部 -->
<transition enter-active-class="animate__animated animate__backInLeft" leave-active-class="animate__animated animate__backOutLeft">
<template v-if="isShow" >
<template v-if="mapTypeFlag" >
<div class="baseBoxLeft left baseBoxHjleft">
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
@ -97,16 +75,6 @@
<span class="in1con_lf_imglf_tit">农田面源污染监测站</span>
<span class="in1con_lf_imglf_num"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="stationCount0" :key="stationCount0" duration="3000"></animate-number>个 </span>
</div>
<!-- <div class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
<!-- <img src="@/assets/image/xmgk02.png" class="in1con_lf_imgone" alt="">-->
<!-- <span class="in1con_lf_imglf_tit">畜禽养殖污染监测站</span>-->
<!-- <span class="in1con_lf_imglf_num"><animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="stationCount1" :key="stationCount1" duration="3000"></animate-number>个</span>-->
<!-- </div>-->
<!-- <div class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
<!-- <img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">-->
<!-- <span class="in1con_lf_imglf_tit">太阳能诱虫灯</span>-->
<!-- <span class="in1con_lf_imglf_num"><animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="pestLightCount" :key="pestLightCount" duration="3000"></animate-number>盏</span>-->
<!-- </div>-->
</div>
</div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
@ -162,74 +130,19 @@
</div>
</template>
</transition>
<!-- 禽畜弹窗 -->
<el-dialog :visible.sync="qcdtdialogTableVisible">
<div class="jctc" id="modal1" >
<div class="in1con_lf_tit ">
<img src="@/assets/image/tctiimg.png" class="tctiimg" alt="">
<span class="in1con_lf_titshow1" >{{qcdtinfor.stationName}}</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div class="jctcvban1">
<img src="@/assets/image/jctctiao.png" class="jctctiao" alt="">
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">站点位置：{{qcdtinfor.stationLocation}}</span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">建站时间：{{qcdtinfor.buildTime}}</span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">设备数量：
<!-- <span style="color: #f1ff0d;">{{qcdtinfor.deviceCount}}</span> -->
<span style="color: #f1ff0d;">5</span>
</span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">监测指标</span>
</div>
<div style="margin-left: 3%;">
<!-- survItemList -->
<span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index" :style="{background:(item.color)}" >{{item.name}}</span>
<!-- <span class="jctc_text" style="background: #445fb4;">总氮</span>
<span class="jctc_text" style="background: #52ac2a;">硝钛氨</span>
<span class="jctc_text" style="background: #ac4f2a;">空气温度</span>
<span class="jctc_text" style="background: #ac4f2a;">空气湿度</span>
<span class="jctc_text" style="background: #4c9bb5;">风速</span>
<span class="jctc_text" style="background: #6a4cb5;">风向</span>
<span class="jctc_text" style="background: #4cb585;">大气压</span>
<span class="jctc_text" style="background: #ad8f49;">太阳全辐射</span>
<span class="jctc_text" style="background: #52ac2a;">土壤温度</span>
<span class="jctc_text" style="background: #4c9bb5;">土壤盐分</span> -->
</div>
<img src="@/assets/image/ljjr.png" class="ljjr" @click="addTask3(qcdtinfor)" alt="">
</div>
</el-dialog>
<!-- 地图左下图例-->
<div v-if="isShow==true" class="mapTuLi">
<!-- <div class="scdlist" @click="sbdscdBtn" style="cursor: pointer;">-->
<!-- <img src="@/assets/image/xcd.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">联网式太阳能杀虫灯</span>-->
<!-- </div>-->
<div class="scdlist2">
<img src="@/assets/image/xcd2.png" class="xcd2img" alt="">
<span class="scdlist_tit">农田面源污染监测站</span>
<div v-if="mapTypeFlag==true" class="mapTuLi">
<div class="scdlist" @click="switchIcon('duizhuhe')">
<img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
<span class="scdlist_tit">对竹河监测站</span>
</div>
<div class="scdlist3">
<img src="@/assets/image/xcd3.png" class="xcdimg" alt="">
<span class="scdlist_tit">畜禽养殖污染监测站</span>
<div class="scdlist" @click="switchIcon('tuanbaihe')">
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
<span class="scdlist_tit">团百河监测站</span>
</div>
<!-- <div class="scdlist4">-->
<!-- <img src="@/assets/image/xcd4.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">企业站点</span>-->
<!-- </div>-->
</div>
<transition enter-active-class="animate__animated animate__backInUp" leave-active-class="animate__animated animate__backOutDown">
<template v-if="isShow">
<template v-if="mapTypeFlag">
<div class="zlxg_btm">
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
@ -239,23 +152,38 @@
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
<div>
<span class="zywr_titshow">重要污染物治理效果</span>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
<el-tab-pane v-for="item in stationInfoList" :key="item.id" :label="item.stationName" :name="item.name" lazy >
<template v-if="item.name == 0||item.name==1">
<div id="myChartDiv" style="height:12vw;width:100%;" v-if="activeName == item.name"></div>
<span class="dataTypeEchart" @click="switchEchartType">
{{dataTypeEchart?'监测值':'对比值'}}
</span>
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
<el-option
v-for="item in dateTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-tabs type="card" @tab-click="handleClick" v-show="dataTypeEchart">
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationName" lazy >
<template >
<div :id="`myChartDiv${index}`" style="height:12vw;width:100%;" ></div>
</template>
<template v-else>
<div id="zlxgChart" style="height:12vw;width:100%;" v-if="activeName == item.name"></div>
</el-tab-pane>
</el-tabs>
<el-tabs type="card" @tab-click="handleClick" v-show="!dataTypeEchart" >
<el-tab-pane v-for="(item,index) in riverList" :label="item.stationName.split('-')[0]" lazy >
<template>
<div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;" ></div>
</template>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
</transition>
<!-- 右侧展示栏-->
<transition enter-active-class="animate__animated animate__backInRight" leave-active-class="animate__animated animate__backOutRight">
<template v-if="isShow" >
<template v-if="mapTypeFlag" >
<div class="leftBox right baseBoxHjleft" style="width:22.5%;overflow: hidden;">
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
@ -416,6 +344,51 @@
</div>
</div>
</el-dialog>
<!-- 监测站弹窗 -->
<el-dialog :visible.sync="qcdtdialogTableVisible">
<div class="jctc" id="modal1123123" >
<div class="in1con_lf_tit ">
<img src="@/assets/image/tctiimg.png" class="tctiimg" alt="">
<span class="in1con_lf_titshow" >{{qcdtinfor.stationName}}</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div class="jctcvban1">
<img src="@/assets/image/jctctiao.png" class="jctctiao" alt="">
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">站点位置：{{qcdtinfor.stationLocation}}</span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">建站时间：{{qcdtinfor.buildTime}}</span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">设备数量：<span style="color: #f1ff0d;">{{qcdtinfor.deviceCount}}</span> </span>
</div>
<div class="jctc_add">
<img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
<span class="jctcvban_tit">监测指标</span>
</div>
<div style="margin-left: 3%;">
<!-- survItemList -->
<span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index" :style="{background:(item.color)}" >{{item.name}}</span>
<!-- <span class="jctc_text" style="background: #445fb4;">总氮</span>
<span class="jctc_text" style="background: #52ac2a;">硝钛氨</span>
<span class="jctc_text" style="background: #ac4f2a;">空气温度</span>
<span class="jctc_text" style="background: #ac4f2a;">空气湿度</span>
<span class="jctc_text" style="background: #4c9bb5;">风速</span>
<span class="jctc_text" style="background: #6a4cb5;">风向</span>
<span class="jctc_text" style="background: #4cb585;">大气压</span>
<span class="jctc_text" style="background: #ad8f49;">太阳全辐射</span>
<span class="jctc_text" style="background: #52ac2a;">土壤温度</span>
<span class="jctc_text" style="background: #4c9bb5;">土壤盐分</span> -->
</div>
<img src="@/assets/image/ljjr.png" class="ljjr" @click="addTask3(qcdtinfor)" alt="">
</div>
</el-dialog>
<!-- 台账禽畜弹窗 -->
<el-dialog width="60%" :visible.sync="qcdialogTableVisible" >
<div class="tz_cov">
@ -579,7 +552,7 @@ import { displayInfo, stationInfo, fwlist, ntfmlist, getNewestData, getPollution
import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue'
export default {
name: "Home",
name: 'Home',
components: {
vueSeamlessScroll,
hefentianqi,
@ -588,8 +561,12 @@ export default {
data(){
return {
aMap: null,
dataTypeEchart: true,
markersOrient: [],
markersOther: [],
lastClickIcon: '',
urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
isShow: true,
mapTypeFlag: true,
nowTime: '',
briefconCode:"",
briefconValue:[],
@ -627,10 +604,9 @@ export default {
radiotr: '1',
qyinformation:'',
listData: [],
activeName: '0',
NOSummry:[],
TNSummry:[],
TPSummry:[],
summryAllData: null,
echartInit: {},
riverList:[],
qcdtinfor:'',
resourcedirect:[],
dialogVisible: false,
@ -640,18 +616,21 @@ export default {
isShowLightNumber:'1',
switchValue:true,
fullscreen: false, //全屏
dataStr:'',
echartIndex: 0,
dateType: 'monthDays',
dateTypeOptions: [ {
value: 'dayhours',
label: '日'
}, {
value: 'monthDays',
label: '月'
}, {
value: 'yearMonth',
label: '年'
}]
};
},
created(){
// 实时时间
this.getNowTime();
this.indexleft();
this.getNewestDataList();
this.getPollutionDictList();
this.getIndexSummrycover();
this.infor();
this.indexinfor();
},
computed: {
@ -693,6 +672,7 @@ export default {
},
},
mounted() {
console.log('开始初始化！！！！')
setTimeout(() =>{
this.$nextTick(() => {
this.indexinfor();
@ -704,6 +684,14 @@ export default {
this.PestLight(this.zoomData,this.isShowLightNumber);
})
}, 2000)
//初始化数据
this.getNowTime();
this.indexleft();
this.getNewestDataList();
this.getPollutionDictList();
this.infor();
this.indexinfor();
this.handleClick({index: this.echartIndex});
},
methods: {
formatter: function (num) {
@ -714,35 +702,30 @@ export default {
//跳转1
window.open(url,"_blank");
},
isShowBtn(){
this.isShow = !this.isShow
this.$nextTick(()=> { // 加载echarts图
this.zxong()
this.zxtwoong()
})
if (this.isShow==true) {
mapTypeSwitch(){
this.mapTypeFlag = !this.mapTypeFlag
if (this.mapTypeFlag==true) {//正常模式
this.zoomData = 14
if (this.isShowLight==undefined) {
let isShowLight = '1'
this.PestLight(this.zoomData,isShowLight);
} else {
let isShowLight = this.isShowLight
this.PestLight(this.zoomData,isShowLight);
}
} else {
setTimeout(() => {
this.$nextTick(()=> {
this.handleClick({index: 0});
})
}, 1000)
} else {// 地图模式
this.zoomData = 15
if (this.isShowLight==undefined) {
let isShowLight = '1'
this.PestLight(this.zoomData,isShowLight);
this.PestLight(this.zoomData,'1');
} else {
let isShowLight = this.isShowLight
this.PestLight(this.zoomData,isShowLight);
this.PestLight(this.zoomData,this.isShowLight);
}
}
},
indexleft(){
displayInfo().then(res=>{
@ -764,7 +747,6 @@ export default {
this.effect_assess2 = res.result.effect_assess.detailList[2]
this.effect_assess3 = res.result.effect_assess.detailList[3]
this.effect_assess4 = res.result.effect_assess.detailList[4]
})
},
indexinfor(){
@ -1000,53 +982,11 @@ export default {
scale:(2 , 2.5)
});
that.aMap.on('complete', (e) =>{
// 创建 AMap.LabelsLayer 图层
var layer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: false,
});
// 将图层添加到地图
that.aMap.add(layer);
var markers = [];
var markerData = res.result;
let LabelMarker = markerData.filter(ele=>ele.type == 'light');
let Marker = markerData.filter(ele=>ele.type != 'light');
LabelMarker.map((item,index)=>{
let curData = {
position:[item.longitude,item.latitude],
icon:{
// type: 'image',
image:this.urlimg + item.picUrl,
anchor:'bottom-center',
type:item.type,
name:item.name,
ids:item.ids,
extPics:item.extPics,
notes:item.notes,
zIndex: item.type=="orient"?999999:item.type=="cusLocaltion"?888888:1,
},
offset: new AMap.Pixel(item.width,item.height),//偏移量
};
var labelMarker = new AMap.LabelMarker(curData);
markers.push(labelMarker);
// else {
// mouseover
// labelMarker.on("click", (e) => {
// console.log("eeeeeee",e)
// this.$notify({
// title: item.name,
// duration:1000
// });
// })
// }
})
let Marker = markerData.filter(ele=> ele.type != 'light');//其他类型
Marker.map(item=>{
let marker = new AMap.Marker({
zIndex: item.type=='orient'?1000:500,
icon: this.urlimg + item.picUrl,
position:[item.longitude,item.latitude],
offset: new AMap.Pixel(item.width,item.height),//偏移量
@ -1055,29 +995,22 @@ export default {
extPics:item.extPics,
notes:item.notes,
name:item.name,
item: item
}
});
if (item.type=="livestock"||item.type=="orient") {
marker.on("click", e => {
if (item.type=='orient') {//监测站弹窗
marker.on('click', e => {
let indexnumb = e.target.getExtData().ids.slice(-1);
this.qcdtinfor = this.stationInfoList[indexnumb]
this.qcdtdialogTableVisible = true
console.log('livestock or orient',this.qyinformation)
})
} else if(item.type=="cusLocaltion"){
marker.on("click", e => {
this.qyinformation= {
extPics:e.target.getExtData().extPics,
notes:e.target.getExtData().notes,
name:e.target.getExtData().name,
}
console.log("this.qyinformation",this.qyinformation)
this.qyinfordtdialogTableVisible = true
})
this.markersOrient.push(marker)
} else {
this.markersOther.push(marker)
}
marker.setMap(that.aMap);
})
// 一次性将海量点添加到图层
layer.add(markers);
this.$forceUpdate()
that.aMap.setFitView();
setTimeout(() => {
@ -1249,47 +1182,98 @@ export default {
this.getPollutionDictCover = res.result
})
},
handleClick(tab, event) {
let stationCode = ''
getIndexSummry(stationCode).then(res=>{
if (res.code ='200') {
this.NOSummry = res.result[tab.index].NOSummry
this.TNSummry = res.result[tab.index].TNSummry
this.TPSummry = res.result[tab.index].TPSummry
this.NHSummry = res.result[tab.index].NHSummry
this.CODSummry = res.result[tab.index].CODSummry
this.dataStr = res.result[4].dataStr
changeDateType() {
this.summryAllData = null;
for(let key in this.echartInit){
this.echartInit[key].dispose();
}
this.$nextTick(()=> { // 加载echarts图
this.zxong()
this.zxtwoong()
})
})
this.echartInit = {};
this.handleClick({index: this.echartIndex});
},
getIndexSummrycover(){
let stationCode = ''
getIndexSummry(stationCode).then(res=>{
if (res.code ='200') {
this.NOSummry = res.result[0].NOSummry
this.TNSummry = res.result[0].TNSummry
this.TPSummry = res.result[0].TPSummry
this.dataStr = res.result[4].dataStr
if (this.NOSummry ) {
this.$nextTick(()=> { // 加载echarts图
switchEchartType(){
this.dataTypeEchart = (!this.dataTypeEchart);
this.echartInit = {};
this.activeName2 = this.riverList[0].stationName
setTimeout(() => {
this.zxong()
}, 1000)
this.handleClick({index: 0});
}, 300);
},
handleClick(tab, event) {
this.echartIndex = tab.index - 0;
if(this.summryAllData) {
this.$nextTick(()=> { // 加载echarts图
this.initEchartData(this.echartIndex)
})
} else {
getIndexSummry({summrayMode: this.dateType}).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'];
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])
})
}
})
item3['datas'] = data3;
this.riverList.push(item3);
}
}
});
// console.log('对比数据初始化：', this.riverList)
setTimeout(() => {
this.$nextTick(()=> { // 加载echarts图
this.initEchartData(this.echartIndex)
})
}, 1000);
}
})
}
},
// 折线图数据
zxong(){
initEchartData(index){
this.$nextTick(() => {
let divDom = document.getElementById('myChartDiv');
if(!divDom){return;}
var myChartLine = this.$echarts.init(divDom);
let domKey = `myChartDiv${index}`;
let data = this.summryAllData[index];
if(!this.dataTypeEchart) {// 对比数据
domKey = `myChartDiv2${index}`;
data = this.riverList[index];
}
if(this.echartInit[domKey]) {
this.echartInit[domKey].dispose()
}
// console.log('初始化echart：', index, domKey, data, /^\d+$/.test(index) ,this.echartInit[domKey])
let divDom = document.getElementById(domKey);
if(!divDom){
console.log('没找到dom：', domKey, divDom)
return;
}
console.log('开始初始化echart：')
let dataObj = [];
let i = 0;
let colors = ['#2295ee', '#5cdd67', '#c0ca41', '#6115d1', '#ee6922'];
for(let key in data['datas']){
if(data['datas'][key] instanceof Array) {
dataObj[i++] = {
name: key,
color: colors[i],
value: data['datas'][key]
}
}
}
let dataStr = data['dateStr']
this.echartInit[domKey] = this.$echarts.init(divDom);
var optionLine = {
tooltip: {
trigger: 'axis'
@ -1301,13 +1285,12 @@ export default {
bottom: '9%',
containLabel: true
},
toolbox: {
},
toolbox: {},
legend: {
padding:[10,50,0,0],
x:'right', //可设定图例在左、右、居中
y:'top', //可设定图例在上、下、居中
data: ['总氮', '总磷', '硝态氮'],
data: dataObj.map(item => item.name),
textStyle:{
fontSize: 12,//字体大小
color: '#ffffff'//字体颜色
@ -1316,8 +1299,7 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
// data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
data:this.dataStr,
data: dataStr,
axisLine: {
lineStyle: {
color: '#2295ee', //x轴的颜色
@ -1343,147 +1325,22 @@ export default {
},
},
},
series: [ {
name:'总氮',
series: dataObj.map(item => {
return {
name: item.name,
type:'line',
stack: '总量1',
data:this.TNSummry,
data: item.value,
lineStyle: {
color: '#00FF89' // 设置线的颜色为红色
},
smooth:true,
},
{
name:'总磷',
type:'line',
stack: '总量1',
data:this.TPSummry,
lineStyle: {
color: '#FF0D00' // 设置线的颜色为红色
},
smooth:true,
},
{
name:'硝态氮',
type:'line',
stack: '总量1',
data:this.NOSummry,
lineStyle: {
color: '#FFC100' // 设置线的颜色为红色
color: item.color // 设置线的颜色为红色
},
smooth:true,
}
]
}),
};
//为echarts对象加载数据
myChartLine.setOption(optionLine);
this.echartInit[domKey].setOption(optionLine);
})
},
zxtwoong(){ //畜禽数据折线图
this.$nextTick(() => {
let divDom = document.getElementById('zlxgChart')
if(!divDom){return;}
var zlxgmyChartLine = this.$echarts.init(divDom);
var zlxgoptionLine = {
tooltip: {
trigger: 'axis'
},
grid: {
top:'14%',
left: '3%',
right: '4%',
bottom: '9%',
containLabel: true
},
toolbox: {
},
legend: {
padding:[10,50,0,0],
x:'right', //可设定图例在左、右、居中
y:'top', //可设定图例在上、下、居中
// data: ['总氮', '总磷', '硝态氮'],
textStyle:{
fontSize: 12,//字体大小
color: '#ffffff'//字体颜色
},
},
xAxis: {
type: 'category',
boundaryGap:false,
data:this.dataStr,
axisLine: {
lineStyle: {
color: '#2295ee', //x轴的颜色
width: 1, //轴线的宽度
},
},
},
yAxis: {
type: 'value',
/*min:0,
max:60,
splitNumber:6*/
splitLine: {
lineStyle: {
// 设置背景横线
color: '#2295ee'
}
},
axisLine: {
lineStyle: {
color: '#2295ee', //x轴的颜色
width: 1, //轴线的宽度
},
},
},
series: [
{
name:'总氮',
type:'line',
stack: '总量1',
data:this.TNSummry,
lineStyle: {
color: '#009DB2' // 设置线的颜色为红色
},
smooth:true,
},
{
name:'总磷',
type:'line',
stack: '总量1',
data:this.TPSummry,
lineStyle: {
color: '#00FF89' // 设置线的颜色为红色
},
smooth:true,
},
{
name:' 氨氮',
type:'line',
stack: '总量1',
data:this.NHSummry,
lineStyle: {
color: '#FF0D00' // 设置线的颜色为红色
},
smooth:true,
},
{
name:' 化学需氧量',
type:'line',
stack: '总量1',
data:this.CODSummry,
lineStyle: {
color: '#FFC100' // 设置线的颜色为红色
},
smooth:true,
}
]
};
//为echarts对象加载数据
zlxgmyChartLine.setOption(zlxgoptionLine);
})
},
// 实时时间
getNowTime () {
@ -1569,6 +1426,29 @@ export default {
}
this.fullscreen = !this.fullscreen;
},
switchIcon(flag){
let that = this;
let arr = [];
if(this.lastClickIcon == flag){
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(arr && arr.length > 0){
that.aMap.setFitView(arr, false, [200,500,300,300], 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);
}
}
},
}
</script>
@ -2442,7 +2322,7 @@ export default {
.mapTuLi{
position: absolute;
bottom: -51px;
bottom: 334px;
left: 456px;
}

34
src/pages/Home/index map.vue → src/pages/Home/index_map.vue11123
View File

@ -208,27 +208,27 @@
<!-- </div>-->
<div class="scdlist2">
<img src="@/assets/image/xcd2.png" class="xcd2img" alt="">
<span class="scdlist_tit">畜禽养殖污染监测站</span>
<span class="scdlist_tit">对竹河监测站</span>
</div>
<div class="scdlist3">
<img src="@/assets/image/xcd3.png" class="xcdimg" alt="">
<span class="scdlist_tit">畜禽养殖污染监测站</span>
<span class="scdlist_tit">团百河监测站</span>
</div>
</div>
<div v-else>
<!-- <div class="scdlistpos" @click="sbdscdBtn" style="cursor: pointer;">-->
<!-- <img src="@/assets/image/xcd.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">联网式太阳能杀虫灯</span>-->
<!-- <div v-else>-->
<!--&lt;!&ndash; <div class="scdlistpos" @click="sbdscdBtn" style="cursor: pointer;">&ndash;&gt;-->
<!--&lt;!&ndash; <img src="@/assets/image/xcd.png" class="xcdimg" alt="">&ndash;&gt;-->
<!--&lt;!&ndash; <span class="scdlist_tit">联网式太阳能杀虫灯</span>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="scdlist2pos">-->
<!-- <img src="@/assets/image/xcd2.png" class="xcd2img" alt="">-->
<!-- <span class="scdlist_tit">畜禽养殖污染监测站</span>-->
<!-- </div>-->
<!-- <div class="scdlist3pos">-->
<!-- <img src="@/assets/image/xcd3.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">畜禽养殖污染监测站</span>-->
<!-- </div>-->
<!-- </div>-->
<div class="scdlist2pos">
<img src="@/assets/image/xcd2.png" class="xcd2img" alt="">
<span class="scdlist_tit">畜禽养殖污染监测站</span>
</div>
<div class="scdlist3pos">
<img src="@/assets/image/xcd3.png" class="xcdimg" alt="">
<span class="scdlist_tit">畜禽养殖污染监测站</span>
</div>
</div>
<transition enter-active-class="animate__animated animate__backInUp" leave-active-class="animate__animated animate__backOutDown">
<template v-if="isShow">
<div class="zlxg_btm">
@ -242,7 +242,7 @@
<span class="zywr_titshow">重要污染物治理效果</span>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
<el-tab-pane v-for="item in stationInfoList" :key="item.id" :label="item.stationName" :name="item.name" lazy >
<div id="myChart" style="height:12vw;width:100%;" v-if="activeName == item.name"></div>
<div id="myChart2222" style="height:12vw;width:100%;" v-if="activeName == item.name"></div>
</el-tab-pane>
</el-tabs>
<!-- <ul class="layui-tab-title" style="width:70%;" >
@ -958,7 +958,7 @@ export default {
},
// 折线图数据
zxong(){
var myChartLine = this.$echarts.init(document.getElementById('myChart'));
var myChartLine = this.$echarts.init(document.getElementById('myChart2222'));
var optionLine = {
tooltip: {
trigger: 'axis'