|
|
@@ -38,18 +38,25 @@
|
|
|
</section>
|
|
|
|
|
|
<section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
|
|
|
- <MyEcharts
|
|
|
+ <Numerical class="left-item" :data="page2numerical" />
|
|
|
+ <!-- <MyEcharts
|
|
|
class="left-item chart-wrap"
|
|
|
mid="page2Char1"
|
|
|
:option="page2Char1"
|
|
|
ref="page2Char1"
|
|
|
- />
|
|
|
+ /> -->
|
|
|
<MyEcharts
|
|
|
class="left-item chart-wrap"
|
|
|
mid="page2Char2"
|
|
|
:option="page2Char2"
|
|
|
ref="page2Char2"
|
|
|
/>
|
|
|
+ <MyEcharts
|
|
|
+ class="left-item chart-wrap"
|
|
|
+ mid="page2Char3"
|
|
|
+ :option="page2Char3"
|
|
|
+ ref="page2Char3"
|
|
|
+ />
|
|
|
</section>
|
|
|
|
|
|
<!-- 林业经济 -->
|
|
|
@@ -79,6 +86,12 @@
|
|
|
ref="page6Char1"
|
|
|
:option="page6Char1"
|
|
|
/>
|
|
|
+ <MyEcharts
|
|
|
+ class="left-item chart-wrap"
|
|
|
+ mid="page6Char2"
|
|
|
+ ref="page6Char2"
|
|
|
+ :option="page6Char2"
|
|
|
+ />
|
|
|
</section>
|
|
|
|
|
|
<section class="right-wrap">
|
|
|
@@ -89,7 +102,7 @@
|
|
|
<i class="el-icon-search el-input__icon" slot="suffix" @click="xiaobansearch"></i>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
- <section class="scroll-board-wrap blur-wrap">
|
|
|
+ <section class="scroll-board-wrap" :class="{close:showScrollBoard==true}">
|
|
|
<dv-scroll-board
|
|
|
:key="scrollBoardKey"
|
|
|
class="scroll-board-01"
|
|
|
@@ -98,6 +111,9 @@
|
|
|
@click="scrollBoardClick"
|
|
|
:style="scrollBoardStyle"
|
|
|
/>
|
|
|
+ <div class="scroll-board-tool" @click="toggleShowScrollBoard">
|
|
|
+ <div class="inner"><img src="../assets/img/jiantou.png" alt=""></div>
|
|
|
+ </div>
|
|
|
</section>
|
|
|
</section>
|
|
|
</dv-full-screen-container>
|
|
|
@@ -124,14 +140,17 @@ import {
|
|
|
page1echarts02,
|
|
|
rightScrollData,
|
|
|
alarmDataApi,
|
|
|
+ page2numerical,
|
|
|
page2echarts01,
|
|
|
page2echarts02,
|
|
|
+ page2echarts03,
|
|
|
page5numerical,
|
|
|
typeSlideApi,
|
|
|
page5echarts01,
|
|
|
page5echarts02,
|
|
|
page6numerical,
|
|
|
page6echarts01,
|
|
|
+ page6echarts02,
|
|
|
smallClassMap
|
|
|
} from '../service/index';
|
|
|
|
|
|
@@ -140,9 +159,11 @@ import page1Char1Schema from '../dataSchema/page1Char1Schema';
|
|
|
import page1Char2Schema from '../dataSchema/page1Char2Schema';
|
|
|
import page2Char1Schema from '../dataSchema/page2Char1Schema';
|
|
|
import page2Char2Schema from '../dataSchema/page2Char2Schema';
|
|
|
+import page2Char3Schema from '../dataSchema/page2Char3Schema';
|
|
|
import page5Char1Schema from '../dataSchema/page5Char1Schema';
|
|
|
import page5Char2Schema from '../dataSchema/page5Char2Schema';
|
|
|
import page6Char1Schema from '../dataSchema/page6Char1Schema';
|
|
|
+import page6Char2Schema from '../dataSchema/page6Char2Schema';
|
|
|
|
|
|
// import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
|
|
|
export default {
|
|
|
@@ -158,6 +179,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ showScrollBoard:false,
|
|
|
page: 1,
|
|
|
// addrOptions: regionDataPlus,
|
|
|
addrSelectedOptions: ['520000', ''],
|
|
|
@@ -172,7 +194,7 @@ export default {
|
|
|
scrollBoardKey: Date.now(),
|
|
|
scrollBoardStyle: {
|
|
|
width: '100%',
|
|
|
- height: '72vh'
|
|
|
+ height: '60vh'
|
|
|
},
|
|
|
scrollBoardConfig: scrollBoardSchema,
|
|
|
page1numerical: [
|
|
|
@@ -186,14 +208,17 @@ export default {
|
|
|
],
|
|
|
page1Char1: page1Char1Schema,
|
|
|
page1Char2: page1Char2Schema,
|
|
|
+ page2numerical:[],
|
|
|
page2Char1: page2Char1Schema,
|
|
|
page2Char2: page2Char2Schema,
|
|
|
+ page2Char3: page2Char3Schema,
|
|
|
page5numerical: [],
|
|
|
typeSlideData: [],
|
|
|
page5Char1: page5Char1Schema,
|
|
|
page5Char2: page5Char2Schema,
|
|
|
page6numerical: [],
|
|
|
page6Char1: page6Char1Schema,
|
|
|
+ page6Char2: page6Char2Schema,
|
|
|
xiaobaninput: ''
|
|
|
};
|
|
|
},
|
|
|
@@ -265,8 +290,10 @@ export default {
|
|
|
this.getPage1echarts02();
|
|
|
this.getRightScrollData();
|
|
|
} else if (this.$store.state.addr.page == 'treeSpecies') {
|
|
|
- this.getPage2echarts01();
|
|
|
+ this.getPage2numerical();
|
|
|
+ // this.getPage2echarts01();
|
|
|
this.getPage2echarts02();
|
|
|
+ this.getPage2echarts03();
|
|
|
this.getRightScrollData();
|
|
|
} else if (this.$store.state.addr.page == 'economics') {
|
|
|
this.getPage5numerical();
|
|
|
@@ -277,6 +304,7 @@ export default {
|
|
|
} else if (this.$store.state.addr.page == 'event') {
|
|
|
this.getPage6numerical();
|
|
|
this.getPage6echarts01();
|
|
|
+ this.getPage6echarts02();
|
|
|
this.getAlarmData();
|
|
|
this.getRightScrollData();
|
|
|
}
|
|
|
@@ -311,6 +339,10 @@ export default {
|
|
|
this.page1Char1.series[0].data = res.data.map((item) => {
|
|
|
return item.number;
|
|
|
});
|
|
|
+ //数量过小时隐藏滚动
|
|
|
+ if(this.page1Char1.xAxis.data.length<=7){
|
|
|
+ this.page1Char1.dataZoom[0].show = false
|
|
|
+ }
|
|
|
let charUuid = this.$refs.page1Char1.mid;
|
|
|
this.$refs.page1Char1.intChar(charUuid);
|
|
|
})
|
|
|
@@ -333,6 +365,10 @@ export default {
|
|
|
this.page1Char2.series[0].data = res.data.map((item) => {
|
|
|
return item.number;
|
|
|
});
|
|
|
+ //数量过小时隐藏滚动
|
|
|
+ if(this.page1Char2.xAxis.data.length<=7){
|
|
|
+ this.page1Char2.dataZoom[0].show = false
|
|
|
+ }
|
|
|
let charUuid = this.$refs.page1Char2.mid;
|
|
|
this.$refs.page1Char2.intChar(charUuid);
|
|
|
})
|
|
|
@@ -389,6 +425,22 @@ export default {
|
|
|
console.log('echarts01 err', err);
|
|
|
});
|
|
|
},
|
|
|
+ getPage2numerical() {
|
|
|
+ let param = {
|
|
|
+ cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
+ countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
+ townId: this.$store.state.addr.vuexSelectStreet.areaId,
|
|
|
+ smallNumber:this.xiaobaninput
|
|
|
+ };
|
|
|
+ page2numerical(param)
|
|
|
+ .then((res) => {
|
|
|
+ // console.log('res',res);
|
|
|
+ this.page2numerical = res.data;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log('page2numerical err', err);
|
|
|
+ });
|
|
|
+ },
|
|
|
getPage2echarts01() {
|
|
|
let param = {
|
|
|
smallNumber: this.xiaobaninput,
|
|
|
@@ -472,6 +524,11 @@ export default {
|
|
|
// console.log(seriesList)
|
|
|
this.page2Char2.series = seriesList;
|
|
|
|
|
|
+ //数量过小时隐藏滚动
|
|
|
+ if(this.page2Char2.xAxis.data.length<=7){
|
|
|
+ this.page2Char2.dataZoom[0].show = false
|
|
|
+ }
|
|
|
+
|
|
|
let charUuid = this.$refs.page2Char2.mid;
|
|
|
this.$refs.page2Char2.intChar(charUuid);
|
|
|
})
|
|
|
@@ -479,6 +536,82 @@ export default {
|
|
|
console.log('getPage2echarts02 err', err);
|
|
|
});
|
|
|
},
|
|
|
+ getPage2echarts03() {
|
|
|
+ let param = {
|
|
|
+ smallNumber: this.xiaobaninput,
|
|
|
+ cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
+ countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
+ townId: this.$store.state.addr.selectStreet.areaId
|
|
|
+ };
|
|
|
+ page2echarts03(param)
|
|
|
+ .then((res) => {
|
|
|
+ // console.log('res',res);
|
|
|
+ // this.page2Char2 = res.data;
|
|
|
+ // console.log('this.page2Char2.series', this.page2Char2.series);
|
|
|
+
|
|
|
+ this.page2Char3.xAxis.data = [];
|
|
|
+ this.page2Char3.series = [];
|
|
|
+
|
|
|
+ const rows = res.data;
|
|
|
+ // console.log(rows)
|
|
|
+ // x坐标
|
|
|
+ this.page2Char3.xAxis.data = rows.map((item) => {
|
|
|
+ return item.areaName;
|
|
|
+ });
|
|
|
+ // console.log('x坐标', this.page2Char2.xAxis.data)
|
|
|
+ // 获取所有项
|
|
|
+ let seriesList = rows.map((item) => {
|
|
|
+ return item.treeList;
|
|
|
+ });
|
|
|
+ // 数组扁平化
|
|
|
+ seriesList = seriesList.flat();
|
|
|
+ // 去重
|
|
|
+ let obj = {};
|
|
|
+ seriesList = seriesList.reduce((newArr, next) => {
|
|
|
+ obj[next.name] ? '' : (obj[next.name] = true && newArr.push(next));
|
|
|
+ return newArr;
|
|
|
+ }, []);
|
|
|
+ seriesList = seriesList.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ });
|
|
|
+ // console.log(seriesList)
|
|
|
+ rows.forEach((item) => {
|
|
|
+ seriesList.forEach((jtem, index) => {
|
|
|
+ let num = 0;
|
|
|
+ item.treeList.map((ktem) => {
|
|
|
+ if (ktem.name.indexOf(jtem.name) > -1) {
|
|
|
+ num = ktem.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ seriesList[index].data.push(num);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // console.log(seriesList)
|
|
|
+ this.page2Char3.series = seriesList;
|
|
|
+
|
|
|
+ //数量过小时隐藏滚动
|
|
|
+ if(this.page2Char3.xAxis.data.length<=7){
|
|
|
+ this.page2Char3.dataZoom[0].show = false
|
|
|
+ }
|
|
|
+
|
|
|
+ let charUuid = this.$refs.page2Char3.mid;
|
|
|
+ this.$refs.page2Char3.intChar(charUuid);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log('getPage2echarts03 err', err);
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
getPage5numerical() {
|
|
|
let param = {
|
|
|
@@ -526,6 +659,10 @@ export default {
|
|
|
this.page5Char1.series[0].data = res.data.map((item) => {
|
|
|
return item.baseArea;
|
|
|
});
|
|
|
+ //数量过小时隐藏滚动
|
|
|
+ if(this.page5Char1.xAxis.data.length<=7){
|
|
|
+ this.page5Char1.dataZoom[0].show = false
|
|
|
+ }
|
|
|
let charUuid = this.$refs.page5Char1.mid;
|
|
|
this.$refs.page5Char1.intChar(charUuid);
|
|
|
})
|
|
|
@@ -549,6 +686,10 @@ export default {
|
|
|
this.page5Char2.series[0].data = res.data.map((item) => {
|
|
|
return item.number;
|
|
|
});
|
|
|
+ //数量过小时隐藏滚动
|
|
|
+ if(this.page5Char2.xAxis.data.length<=7){
|
|
|
+ this.page5Char2.dataZoom[0].show = false
|
|
|
+ }
|
|
|
let charUuid = this.$refs.page5Char2.mid;
|
|
|
this.$refs.page5Char2.intChar(charUuid);
|
|
|
})
|
|
|
@@ -584,18 +725,39 @@ export default {
|
|
|
// console.log('res',res);
|
|
|
// this.page6Char1 = res.data;
|
|
|
|
|
|
- this.page6Char1.xAxis[0].data = [];
|
|
|
+ // this.page6Char1.xAxis[0].data = [];
|
|
|
+ // this.page6Char1.series[0].data = [];
|
|
|
+ // this.page6Char1.series[1].data = [];
|
|
|
+ // this.page6Char1.series[2].data = [];
|
|
|
+ // res.data &&
|
|
|
+ // res.data.forEach((element) => {
|
|
|
+ // this.page6Char1.xAxis[0].data.push(element.villageName);
|
|
|
+ // this.page6Char1.series[0].data.push(element.fireCount);
|
|
|
+ // this.page6Char1.series[1].data.push(element.cutCount);
|
|
|
+ // this.page6Char1.series[2].data.push(element.pestCount);
|
|
|
+ // });
|
|
|
+ this.page6Char1.xAxis.data = [];
|
|
|
this.page6Char1.series[0].data = [];
|
|
|
this.page6Char1.series[1].data = [];
|
|
|
this.page6Char1.series[2].data = [];
|
|
|
- res.data &&
|
|
|
- res.data.forEach((element) => {
|
|
|
- this.page6Char1.xAxis[0].data.push(element.villageName);
|
|
|
- this.page6Char1.series[0].data.push(element.fireCount);
|
|
|
- this.page6Char1.series[1].data.push(element.cutCount);
|
|
|
- this.page6Char1.series[2].data.push(element.pestCount);
|
|
|
- });
|
|
|
|
|
|
+ const rows = res.data;
|
|
|
+ // console.log(rows)
|
|
|
+ // x坐标
|
|
|
+ this.page6Char1.xAxis.data = rows.map((item) => {
|
|
|
+ return item.villageName;
|
|
|
+ });
|
|
|
+ rows.forEach(element => {
|
|
|
+ this.page6Char1.series[0].data.push(element.pestCount);
|
|
|
+ this.page6Char1.series[1].data.push(element.cutCount);
|
|
|
+ this.page6Char1.series[2].data.push(element.fireCount);
|
|
|
+ });
|
|
|
+ // console.log('x坐标', this.page6Char1.xAxis.data)
|
|
|
+
|
|
|
+ //数量过小时隐藏滚动
|
|
|
+ if(this.page6Char1.xAxis.data.length<=7){
|
|
|
+ this.page6Char1.dataZoom[0].show = false
|
|
|
+ }
|
|
|
let charUuid = this.$refs.page6Char1.mid;
|
|
|
this.$refs.page6Char1.intChar(charUuid);
|
|
|
})
|
|
|
@@ -603,6 +765,42 @@ export default {
|
|
|
console.log('getPage6echarts01 err', err);
|
|
|
});
|
|
|
},
|
|
|
+ getPage6echarts02(){
|
|
|
+ let param = {
|
|
|
+ cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
+ countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
+ townId: this.$store.state.addr.selectStreet.areaId
|
|
|
+ };
|
|
|
+
|
|
|
+ page6echarts02(param).then(res=>{
|
|
|
+ console.log('page6echarts02 res', res);
|
|
|
+ const rows = res.data;
|
|
|
+ // console.log(rows)
|
|
|
+ // x坐标
|
|
|
+ this.page6Char2.xAxis.data = [];
|
|
|
+ this.page6Char2.series[0].data = [];
|
|
|
+ this.page6Char2.series[1].data = [];
|
|
|
+ this.page6Char2.series[2].data = [];
|
|
|
+ this.page6Char2.xAxis.data = rows.map((item) => {
|
|
|
+ return item.month;
|
|
|
+ });
|
|
|
+
|
|
|
+ rows.forEach(element => {
|
|
|
+ // console.log('element',element.eventList);
|
|
|
+ this.page6Char2.series[0].data.push(element.eventList[0].value);
|
|
|
+ this.page6Char2.series[1].data.push(element.eventList[1].value);
|
|
|
+ this.page6Char2.series[2].data.push(element.eventList[2].value);
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log('this.page6Char2.series',this.page6Char2.series);
|
|
|
+
|
|
|
+ let charUuid = this.$refs.page6Char2.mid;
|
|
|
+ this.$refs.page6Char2.intChar(charUuid);
|
|
|
+
|
|
|
+ }).catch((err) => {
|
|
|
+ console.log('page6echarts02 err', err);
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
xiaobansearch() {
|
|
|
// console.log('xiaobansearch');
|
|
|
@@ -611,6 +809,9 @@ export default {
|
|
|
},
|
|
|
scrollBoardClick(e) {
|
|
|
console.log('scrollBoardClick', e);
|
|
|
+ },
|
|
|
+ toggleShowScrollBoard(){
|
|
|
+ this.showScrollBoard = !this.showScrollBoard;
|
|
|
}
|
|
|
}
|
|
|
};
|
