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({ return requests({
url: '/zh-applet-admin/appmana/bigScreen/getIndexSummry?stationCode='+stationCode, url: '/zh-applet-admin/appmana/bigScreen/getIndexSummry',
method: 'post', method: 'post',
headers: {}, headers: { 'content-type': 'application/json; charset=UTF-8' },
stationCode data: data? data : {}
}) })
} }

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

@ -556,6 +556,49 @@
margin-left: 3%; margin-left: 3%;
font-family: douyuFont; 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{ .zywr_titrt{
width: 25%; width: 25%;
height: 3vw; height: 3vw;
@ -608,48 +651,17 @@
} }
#chart1{height:12vw;} #chart1{height:12vw;}
.scdlist{ .scdlist{
width: 9vw; width: 7vw;
height: 2vw; height: 2vw;
margin-top: 0.4vw;
line-height: 2vw; line-height: 2vw;
background: rgba(0,0,0,0.8); background: rgba(0,0,0,0.8);
border-radius: 0.4vw; border-radius: 0.4vw;
border: 1px solid #4b677c; border: 1px solid #4b677c;
position: absolute; /*position: absolute;*/
bottom: 16vw; bottom: 16vw;
left: 24%; left: 24%;
} cursor: pointer;
.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%;
} }
.scdlistpos{ .scdlistpos{
width: 9vw; width: 9vw;
@ -697,13 +709,7 @@
} }
.xcdimg{ .xcdimg{
width: 0.9vw; width: 0.9vw;
/* margin-top: 0.4vw; */ margin-top: 0.4vw;
margin-left: 0.4vw;
margin-right: 0.4vw;
}
.xcd2img{
width: 0.7vw;
/* margin-top: 0.1vw; */
margin-left: 0.4vw; margin-left: 0.4vw;
margin-right: 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

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

@ -20,7 +20,6 @@
<div class="nav_btn"> <div class="nav_btn">
<div class="btn_left"> <div class="btn_left">
<span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"></span> <span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"></span>
</div> </div>
<div class="btn_right"><hefentianqi /> <div class="btn_right"><hefentianqi />
<img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt=""> <img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt="">
@ -42,38 +41,17 @@
</el-button> </el-button>
<img src="@/assets/image/sanjiao.png" class="sanjiao" alt=""> <img src="@/assets/image/sanjiao.png" class="sanjiao" alt="">
</el-dialog> </el-dialog>
</div> </div>
<div class="content"> <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="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/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="mapTypeSwitch" style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
<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> <!-- <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>-->
<!-- <img src="@/assets/image/sbdscd.png" @click="sbdscdBtn" style="position: fixed;top:5.2vw;left:26%;z-index: 999;width:12vw;cursor: pointer;" alt="" > --> <!-- <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>
<!-- <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>
<!-- 左上头部-->
<transition enter-active-class="animate__animated animate__backInLeft" leave-active-class="animate__animated animate__backOutLeft"> <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"> <div class="baseBoxLeft left baseBoxHjleft">
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt=""> <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" 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_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> <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>
<!-- <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> </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>
@ -162,74 +130,19 @@
</div> </div>
</template> </template>
</transition> </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 v-if="mapTypeFlag==true" class="mapTuLi">
<!-- <div class="scdlist" @click="sbdscdBtn" style="cursor: pointer;">--> <div class="scdlist" @click="switchIcon('duizhuhe')">
<!-- <img src="@/assets/image/xcd.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 class="scdlist2">
<img src="@/assets/image/xcd2.png" class="xcd2img" alt="">
<span class="scdlist_tit">农田面源污染监测站</span>
</div> </div>
<div class="scdlist3"> <div class="scdlist" @click="switchIcon('tuanbaihe')">
<img src="@/assets/image/xcd3.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="scdlist4">-->
<!-- <img src="@/assets/image/xcd4.png" class="xcdimg" alt="">-->
<!-- <span class="scdlist_tit">企业站点</span>-->
<!-- </div>-->
</div> </div>
<transition enter-active-class="animate__animated animate__backInUp" leave-active-class="animate__animated animate__backOutDown"> <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"> <div class="zlxg_btm">
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt=""> <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" 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=""> <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
<div> <div>
<span class="zywr_titshow">重要污染物治理效果</span> <span class="zywr_titshow">重要污染物治理效果</span>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" > <span class="dataTypeEchart" @click="switchEchartType">
<el-tab-pane v-for="item in stationInfoList" :key="item.id" :label="item.stationName" :name="item.name" lazy > {{dataTypeEchart?'监测值':'对比值'}}
<template v-if="item.name == 0||item.name==1"> </span>
<div id="myChartDiv" style="height:12vw;width:100%;" v-if="activeName == item.name"></div> <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>
<template v-else> </el-tab-pane>
<div id="zlxgChart" style="height:12vw;width:100%;" v-if="activeName == item.name"></div> </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> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
</template> </template>
</transition> </transition>
<!-- 右侧展示栏-->
<transition enter-active-class="animate__animated animate__backInRight" leave-active-class="animate__animated animate__backOutRight"> <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;"> <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_zuoshang.png" class="in2con_zlf" alt="">
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt=""> <img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
@ -416,6 +344,51 @@
</div> </div>
</div> </div>
</el-dialog> </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" > <el-dialog width="60%" :visible.sync="qcdialogTableVisible" >
<div class="tz_cov"> <div class="tz_cov">
@ -579,7 +552,7 @@ import { displayInfo, stationInfo, fwlist, ntfmlist, getNewestData, getPollution
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue' import hefentianqi from '@/pages/weather/weather.vue'
export default { export default {
name: "Home", name: 'Home',
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
hefentianqi, hefentianqi,
@ -588,8 +561,12 @@ export default {
data(){ data(){
return { return {
aMap: null, aMap: null,
dataTypeEchart: true,
markersOrient: [],
markersOther: [],
lastClickIcon: '',
urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/', urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
isShow: true, mapTypeFlag: true,
nowTime: '', nowTime: '',
briefconCode:"", briefconCode:"",
briefconValue:[], briefconValue:[],
@ -627,10 +604,9 @@ export default {
radiotr: '1', radiotr: '1',
qyinformation:'', qyinformation:'',
listData: [], listData: [],
activeName: '0', summryAllData: null,
NOSummry:[], echartInit: {},
TNSummry:[], riverList:[],
TPSummry:[],
qcdtinfor:'', qcdtinfor:'',
resourcedirect:[], resourcedirect:[],
dialogVisible: false, dialogVisible: false,
@ -640,18 +616,21 @@ export default {
isShowLightNumber:'1', isShowLightNumber:'1',
switchValue:true, switchValue:true,
fullscreen: false, //全屏 fullscreen: false, //全屏
dataStr:'', echartIndex: 0,
dateType: 'monthDays',
dateTypeOptions: [ {
value: 'dayhours',
label: '日'
}, {
value: 'monthDays',
label: '月'
}, {
value: 'yearMonth',
label: '年'
}]
}; };
}, },
created(){ created(){
// 实时时间
this.getNowTime();
this.indexleft();
this.getNewestDataList();
this.getPollutionDictList();
this.getIndexSummrycover();
this.infor();
this.indexinfor();
}, },
computed: { computed: {
@ -693,6 +672,7 @@ export default {
}, },
}, },
mounted() { mounted() {
console.log('开始初始化！！！！')
setTimeout(() =>{ setTimeout(() =>{
this.$nextTick(() => { this.$nextTick(() => {
this.indexinfor(); this.indexinfor();
@ -704,8 +684,16 @@ export default {
this.PestLight(this.zoomData,this.isShowLightNumber); this.PestLight(this.zoomData,this.isShowLightNumber);
}) })
}, 2000) }, 2000)
//初始化数据
this.getNowTime();
this.indexleft();
this.getNewestDataList();
this.getPollutionDictList();
this.infor();
this.indexinfor();
this.handleClick({index: this.echartIndex});
}, },
methods:{ methods: {
formatter: function (num) { formatter: function (num) {
return num.toFixed(3) return num.toFixed(3)
}, },
@ -714,35 +702,30 @@ export default {
//跳转1 //跳转1
window.open(url,"_blank"); window.open(url,"_blank");
}, },
isShowBtn(){ mapTypeSwitch(){
this.isShow = !this.isShow this.mapTypeFlag = !this.mapTypeFlag
this.$nextTick(()=> { // 加载echarts图 if (this.mapTypeFlag==true) {//正常模式
this.zxong()
this.zxtwoong()
})
if (this.isShow==true) {
this.zoomData = 14 this.zoomData = 14
if (this.isShowLight==undefined) { if (this.isShowLight==undefined) {
let isShowLight = '1' let isShowLight = '1'
this.PestLight(this.zoomData,isShowLight); this.PestLight(this.zoomData,isShowLight);
} else { } else {
let isShowLight = this.isShowLight let isShowLight = this.isShowLight
this.PestLight(this.zoomData,isShowLight); this.PestLight(this.zoomData,isShowLight);
} }
setTimeout(() => {
} else { this.$nextTick(()=> {
this.handleClick({index: 0});
})
}, 1000)
} else {// 地图模式
this.zoomData = 15 this.zoomData = 15
if (this.isShowLight==undefined) { if (this.isShowLight==undefined) {
let isShowLight = '1' this.PestLight(this.zoomData,'1');
this.PestLight(this.zoomData,isShowLight);
} else { } else {
let isShowLight = this.isShowLight this.PestLight(this.zoomData,this.isShowLight);
this.PestLight(this.zoomData,isShowLight);
} }
} }
}, },
indexleft(){ indexleft(){
displayInfo().then(res=>{ displayInfo().then(res=>{
@ -764,7 +747,6 @@ export default {
this.effect_assess2 = res.result.effect_assess.detailList[2] this.effect_assess2 = res.result.effect_assess.detailList[2]
this.effect_assess3 = res.result.effect_assess.detailList[3] this.effect_assess3 = res.result.effect_assess.detailList[3]
this.effect_assess4 = res.result.effect_assess.detailList[4] this.effect_assess4 = res.result.effect_assess.detailList[4]
}) })
}, },
indexinfor(){ indexinfor(){
@ -1000,53 +982,11 @@ export default {
scale:(2 , 2.5) scale:(2 , 2.5)
}); });
that.aMap.on('complete', (e) =>{ 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; var markerData = res.result;
let LabelMarker = markerData.filter(ele=>ele.type == 'light'); let Marker = 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
// });
// })
// }
})
Marker.map(item=>{ Marker.map(item=>{
let marker = new AMap.Marker({ let marker = new AMap.Marker({
zIndex: item.type=='orient'?1000:500,
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),//偏移量
@ -1055,29 +995,22 @@ export default {
extPics:item.extPics, extPics:item.extPics,
notes:item.notes, notes:item.notes,
name:item.name, name:item.name,
item: item
} }
}); });
if (item.type=="livestock"||item.type=="orient") { if (item.type=='orient') {//监测站弹窗
marker.on("click", e => { marker.on('click', e => {
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)
}) })
} else if(item.type=="cusLocaltion"){ this.markersOrient.push(marker)
marker.on("click", e => { } else {
this.qyinformation= { this.markersOther.push(marker)
extPics:e.target.getExtData().extPics,
notes:e.target.getExtData().notes,
name:e.target.getExtData().name,
}
console.log("this.qyinformation",this.qyinformation)
this.qyinfordtdialogTableVisible = true
})
} }
marker.setMap(that.aMap); marker.setMap(that.aMap);
}) })
// 一次性将海量点添加到图层
layer.add(markers);
this.$forceUpdate() this.$forceUpdate()
that.aMap.setFitView(); that.aMap.setFitView();
setTimeout(() => { setTimeout(() => {
@ -1249,47 +1182,98 @@ export default {
this.getPollutionDictCover = res.result this.getPollutionDictCover = res.result
}) })
}, },
handleClick(tab, event) { changeDateType() {
let stationCode = '' this.summryAllData = null;
getIndexSummry(stationCode).then(res=>{ for(let key in this.echartInit){
if (res.code ='200') { this.echartInit[key].dispose();
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
} }
this.$nextTick(()=> { // 加载echarts图 this.echartInit = {};
this.zxong() this.handleClick({index: this.echartIndex});
this.zxtwoong()
})
})
}, },
getIndexSummrycover(){ switchEchartType(){
let stationCode = '' this.dataTypeEchart = (!this.dataTypeEchart);
getIndexSummry(stationCode).then(res=>{ this.echartInit = {};
if (res.code ='200') { this.activeName2 = this.riverList[0].stationName
this.NOSummry = res.result[0].NOSummry setTimeout(() => {
this.TNSummry = res.result[0].TNSummry this.handleClick({index: 0});
this.TPSummry = res.result[0].TPSummry }, 300);
this.dataStr = res.result[4].dataStr },
if (this.NOSummry ) { handleClick(tab, event) {
this.echartIndex = tab.index - 0;
if(this.summryAllData) {
this.$nextTick(()=> { // 加载echarts图 this.$nextTick(()=> { // 加载echarts图
setTimeout(() =>{ this.initEchartData(this.echartIndex)
this.zxong() })
}, 1000) } 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(() => { this.$nextTick(() => {
let divDom = document.getElementById('myChartDiv'); let domKey = `myChartDiv${index}`;
if(!divDom){return;} let data = this.summryAllData[index];
var myChartLine = this.$echarts.init(divDom); 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 = { var optionLine = {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
@ -1301,13 +1285,12 @@ export default {
bottom: '9%', bottom: '9%',
containLabel: true containLabel: true
}, },
toolbox: { toolbox: {},
},
legend: { legend: {
padding:[10,50,0,0], padding:[10,50,0,0],
x:'right', //可设定图例在左、右、居中 x:'right', //可设定图例在左、右、居中
y:'top', //可设定图例在上、下、居中 y:'top', //可设定图例在上、下、居中
data: ['总氮', '总磷', '硝态氮'], data: dataObj.map(item => item.name),
textStyle:{ textStyle:{
fontSize: 12,//字体大小 fontSize: 12,//字体大小
color: '#ffffff'//字体颜色 color: '#ffffff'//字体颜色
@ -1315,9 +1298,8 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap:false, boundaryGap: false,
// data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], data: dataStr,
data:this.dataStr,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#2295ee', //x轴的颜色 color: '#2295ee', //x轴的颜色
@ -1343,147 +1325,22 @@ export default {
}, },
}, },
}, },
series: [ { series: dataObj.map(item => {
name:'总氮', return {
name: item.name,
type:'line', type:'line',
stack: '总量1', stack: '总量1',
data:this.TNSummry, data: item.value,
lineStyle: { lineStyle: {
color: '#00FF89' // 设置线的颜色为红色 color: item.color // 设置线的颜色为红色
},
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' // 设置线的颜色为红色
}, },
smooth:true, smooth:true,
} }
] }),
}; };
//为echarts对象加载数据 //为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 () { getNowTime () {
@ -1569,6 +1426,29 @@ export default {
} }
this.fullscreen = !this.fullscreen; 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> </script>
@ -2442,7 +2322,7 @@ export default {
.mapTuLi{ .mapTuLi{
position: absolute; position: absolute;
bottom: -51px; bottom: 334px;
left: 456px; left: 456px;
} }

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

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