@@ -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,70 +561,76 @@ export default {
data(){
return {
aMap: null,
- urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
- isShow: true,
+ dataTypeEchart: true,
+ markersOrient: [],
+ markersOther: [],
+ lastClickIcon: '',
+ urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
+ mapTypeFlag: true,
nowTime: '',
- briefconCode:"",
- briefconValue:[],
- climate_env:[],
- water_conser:[],
- roll_info:[],
- stationInfoList:[],
- wrwcode:[],
- ntfmnumblist:[],
- ntfmnumbtotal:'',
- qcfmnumblist:[],
- qcfmnumbtotal:'',
- getPollutionDictCover:[],
- effect_assess0:'',
- effect_assess0Value:0,
- effect_assess1:'',
- effect_assess2:'',
- effect_assess3:'',
- effect_assess4:'',
- pestLightCount:0,
- stationCount0:0,
- stationCount1:0,
- // showData:[],
- dialogTableVisible:false,
- qcdialogTableVisible:false,
- qcdtdialogTableVisible:false,
- qyinfordtdialogTableVisible:false,
- shipdialogTableVisible:false,
- trqxzxdialogTableVisible:false,
- trbg:null,
- trzx:false,
+ briefconCode:"",
+ briefconValue:[],
+ climate_env:[],
+ water_conser:[],
+ roll_info:[],
+ stationInfoList:[],
+ wrwcode:[],
+ ntfmnumblist:[],
+ ntfmnumbtotal:'',
+ qcfmnumblist:[],
+ qcfmnumbtotal:'',
+ getPollutionDictCover:[],
+ effect_assess0:'',
+ effect_assess0Value:0,
+ effect_assess1:'',
+ effect_assess2:'',
+ effect_assess3:'',
+ effect_assess4:'',
+ pestLightCount:0,
+ stationCount0:0,
+ stationCount1:0,
+ // showData:[],
+ dialogTableVisible:false,
+ qcdialogTableVisible:false,
+ qcdtdialogTableVisible:false,
+ qyinfordtdialogTableVisible:false,
+ shipdialogTableVisible:false,
+ trqxzxdialogTableVisible:false,
+ trbg:null,
+ trzx:false,
trbgzhuanq:false,
- descriptionValue:null,
- timetr: [new Date(), new Date()],
+ descriptionValue:null,
+ timetr: [new Date(), new Date()],
radiotr: '1',
- qyinformation:'',
- listData: [],
- activeName: '0',
- NOSummry:[],
- TNSummry:[],
- TPSummry:[],
- qcdtinfor:'',
- resourcedirect:[],
- dialogVisible: false,
- inforname:'',
- loading: true,
- zoomData:14,
- isShowLightNumber:'1',
- switchValue:true,
- fullscreen: false, //全屏
- dataStr:'',
+ qyinformation:'',
+ listData: [],
+ summryAllData: null,
+ echartInit: {},
+ riverList:[],
+ qcdtinfor:'',
+ resourcedirect:[],
+ dialogVisible: false,
+ inforname:'',
+ loading: true,
+ zoomData:14,
+ isShowLightNumber:'1',
+ switchValue:true,
+ fullscreen: false, //全屏
+ 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,45 +684,48 @@ 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) {
+ methods: {
+ formatter: function (num) {
return num.toFixed(3)
},
- sbdscdBtn(){
- var url = 'https://wlw.zklsfk.com/admin/index?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmsrPmtKXluILlhpzkuJrlhpzmnZHlsYAiLCJleHAiOjE2ODk2MjU0ODUsImlhdCI6MTY4ODEzMDI1NiwianRpIjoiNTcxMTY5MTAtODczZC00ZjI1LWFkNzItZjA2NWU3NmFkNDIwIn0.52iF21xidGFllgfcsSgN-cLlysI0W7Ad8ie48LsV9x4'
- //跳转1
- window.open(url,"_blank");
- },
- isShowBtn(){
- this.isShow = !this.isShow
- this.$nextTick(()=> { // 加载echarts图
- this.zxong()
- this.zxtwoong()
- })
- if (this.isShow==true) {
+ sbdscdBtn(){
+ var url = 'https://wlw.zklsfk.com/admin/index?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmsrPmtKXluILlhpzkuJrlhpzmnZHlsYAiLCJleHAiOjE2ODk2MjU0ODUsImlhdCI6MTY4ODEzMDI1NiwianRpIjoiNTcxMTY5MTAtODczZC00ZjI1LWFkNzItZjA2NWU3NmFkNDIwIn0.52iF21xidGFllgfcsSgN-cLlysI0W7Ad8ie48LsV9x4'
+ //跳转1
+ window.open(url,"_blank");
+ },
+ 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,84 +982,35 @@ 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
- // });
-
- // })
-
- // }
+ var markerData = res.result;
+ 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),//偏移量
+ extData:{
+ ids:item.ids,
+ extPics:item.extPics,
+ notes:item.notes,
+ name:item.name,
+ item: item
+ }
+ });
+ 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)
+ })
+ this.markersOrient.push(marker)
+ } else {
+ this.markersOther.push(marker)
+ }
+ marker.setMap(that.aMap);
})
- Marker.map(item=>{
- let marker = new AMap.Marker({
- icon: this.urlimg + item.picUrl,
- position:[item.longitude,item.latitude],
- offset: new AMap.Pixel(item.width,item.height),//偏移量
- extData:{
- ids:item.ids,
- extPics:item.extPics,
- notes:item.notes,
- name:item.name,
- }
- });
- if (item.type=="livestock"||item.type=="orient") {
- marker.on("click", e => {
- let indexnumb = e.target.getExtData().ids.slice(-1);
- this.qcdtinfor = this.stationInfoList[indexnumb]
- this.qcdtdialogTableVisible = true
- })
- } 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
- })
- }
- marker.setMap(that.aMap);
- })
- // 一次性将海量点添加到图层
- layer.add(markers);
this.$forceUpdate()
that.aMap.setFitView();
setTimeout(() => {
@@ -1249,241 +1182,165 @@ 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
- }
- this.$nextTick(()=> { // 加载echarts图
- this.zxong()
- this.zxtwoong()
- })
- })
- },
- 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图
- setTimeout(() =>{
- this.zxong()
- }, 1000)
- })
- }
- }
- })
- },
+ changeDateType() {
+ this.summryAllData = null;
+ for(let key in this.echartInit){
+ this.echartInit[key].dispose();
+ }
+ this.echartInit = {};
+ this.handleClick({index: this.echartIndex});
+ },
+ switchEchartType(){
+ this.dataTypeEchart = (!this.dataTypeEchart);
+ this.echartInit = {};
+ this.activeName2 = this.riverList[0].stationName
+ setTimeout(() => {
+ 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);
- var optionLine = {
- 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:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
- data:this.dataStr,
- axisLine: {
- lineStyle: {
- color: '#2295ee', //x轴的颜色
- width: 1, //轴线的宽度
- },
- },
- },
- yAxis: {
- type: 'value',
- /*min:0,
- max:60,
- splitNumber:6*/
- splitLine: {
- lineStyle: {
- // 设置背景横线
- color: '#2295ee'
+ 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]
}
- },
- axisLine: {
- lineStyle: {
- color: '#2295ee', //x轴的颜色
- width: 1, //轴线的宽度
+ }
+ }
+ let dataStr = data['dateStr']
+ this.echartInit[domKey] = this.$echarts.init(divDom);
+ var optionLine = {
+ 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: dataObj.map(item => item.name),
+ textStyle:{
+ fontSize: 12,//字体大小
+ color: '#ffffff'//字体颜色
},
- },
- },
- series: [ {
- name:'总氮',
- type:'line',
- stack: '总量1',
- data:this.TNSummry,
- 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' // 设置线的颜色为红色
- },
- smooth:true,
- }
- ]
- };
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: 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: dataObj.map(item => {
+ return {
+ name: item.name,
+ type:'line',
+ stack: '总量1',
+ data: item.value,
+ lineStyle: {
+ 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 () {
@@ -1547,28 +1404,51 @@ export default {
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
- document.exitFullscreen();
+ document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
- document.webkitCancelFullScreen();
+ document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
+ document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
- document.msExitFullscreen();
+ document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
- element.requestFullscreen();
+ element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
- element.webkitRequestFullScreen();
+ element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
+ element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
- element.msRequestFullscreen();
+ element.msRequestFullscreen();
}
}
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);
+ }
+ }
},
}
@@ -2442,7 +2322,7 @@ export default {
.mapTuLi{
position: absolute;
- bottom: -51px;
+ bottom: 334px;
left: 456px;
}
diff --git a/src/pages/Home/index map.vue b/src/pages/Home/index_map.vue11123
similarity index 98%
rename from src/pages/Home/index map.vue
rename to src/pages/Home/index_map.vue11123
index 5820c11..0f026ca 100644
--- a/src/pages/Home/index map.vue
+++ b/src/pages/Home/index_map.vue11123
@@ -208,27 +208,27 @@
-
畜禽养殖污染监测站
+
对竹河监测站
-
畜禽养殖污染监测站
+
团百河监测站
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ 
@@ -97,16 +75,6 @@
农田面源污染监测站
@@ -42,38 +41,17 @@
-
- 
- 
- 
- 
- 
- 
- 
- 
+ 
+ 