<!--
* @Description:
* @Author: wangcc
* @Date: 2022-07-06 15:56:45
* @LastEditors: gcz
* @LastEditTime: 2022-11-04 14:48:39
* @FilePath: \ntbigscreen\src\views\index.vue
* @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved.
-->
<template>
<div class>
<!-- <dv-full-screen-container> -->
<Map></Map>
<Header></Header>
<section class="nav-wrap">
<div
class="nav-item"
:class="{ active: (index + 1) == page }"
v-for="(item,index) in navList"
@click="navClick(index + 1)"
:key="index"
>{{ item.text }}</div>
</section>
<Alarm v-if="page == 6 && alarmData.length >= 1" :data="alarmData" />
<section class="left-wrap" v-if="$store.state.addr.page == 'forest'">
<Numerical class="left-item" :data="page1numerical" pageName="forest" />
<MyEcharts
class="left-item chart-wrap"
mid="page1Char1"
streetTitleText="各小班"
ref="page1Char1"
:option="page1Char1"
style
/>
<MyEcharts
class="left-item chart-wrap"
mid="page1Char2"
streetTitleText="各小班"
ref="page1Char2"
:option="page1Char2"
style
/>
</section>
<section class="left-wrap" v-if="$store.state.addr.page == 'treeSpecies'">
<Numerical class="left-item" :data="page2numerical" pageName="treeSpecies" />
<!-- <MyEcharts
class="left-item chart-wrap"
mid="page2Char1"
:option="page2Char1"
ref="page2Char1"
/>-->
<MyEcharts
class="left-item chart-wrap"
mid="page2Char2"
streetTitleText="各小班"
:option="page2Char2"
ref="page2Char2"
/>
<MyEcharts
class="left-item chart-wrap"
mid="page2Char3"
streetTitleText="各小班"
:option="page2Char3"
ref="page2Char3"
/>
</section>
<!-- 林业经济 -->
<section class="left-wrap" v-if="$store.state.addr.page == 'economics'">
<!-- <Typeslide :data="typeSlideData" /> -->
<Numerical class="left-item" :data="page5numerical" pageName="economics" />
<MyEcharts
class="left-item chart-wrap"
mid="page5Char2"
ref="page5Char2"
:option="page5Char2"
/>
<MyEcharts
class="left-item chart-wrap"
mid="page5Char1"
ref="page5Char1"
:option="page5Char1"
/>
</section>
<!-- 事件信息 -->
<section class="left-wrap event-page" v-if="$store.state.addr.page == 'event'">
<Numerical class="left-item" :data="page6numerical" />
<MyEcharts
class="left-item chart-wrap"
mid="page6Char1"
ref="page6Char1"
:option="page6Char1"
/>
<!-- <MyEcharts
class="left-item chart-wrap"
mid="page6Char2"
ref="page6Char2"
:option="page6Char2"
/>-->
<div class="left-item">
<!-- <div class="ntitle">{{$store.state.addr.selectAddr}}事件发生记录</div> -->
<div class="ntitle">
<span
v-if="$store.state.addr.mapLevel == 'province'"
>{{ $store.state.addr.selectAddr }}各地州(市)事件发生记录</span>
<span
v-if="$store.state.addr.mapLevel == 'city'"
>{{ $store.state.addr.selectAddr }}各县事件发生记录</span>
<span
v-if="$store.state.addr.mapLevel == 'district'"
>{{ $store.state.addr.selectAddr }}各乡镇事件发生记录</span>
<span
v-if="$store.state.addr.mapLevel == 'street'"
>{{ $store.state.addr.selectAddr }}各村事件发生记录</span>
</div>
<dv-scroll-board
:key="scrollBoardKey"
class="scroll-event"
:config="scrollEventConfig"
ref="scrollBoard"
@click="scrollEventClick"
@mouseout="scrollEventOut"
/>
</div>
</section>
<section class="right-wrap">
<PickerAddr />
<div v-if="showbase" class="xiaoban u-flex">
<div class="title">基地查询：</div>
<el-input v-model="baseinput" placeholder="请输入基地名称">
<i class="el-icon-search el-input__icon" slot="suffix" @click="basesearch"></i>
</el-input>
</div>
<div class="right_xiaoban">
<div class="tab-box" v-if="showxiaoban">
<div
class="tab-btn"
:class="classFunc(index)"
@click="tabLink(index)"
v-for="(item, index) in tabData"
:key="index"
>
<span class="tab-span">{{ item.name }}</span>
</div>
</div>
<div v-if="showxiaoban" class="xiaoban u-flex">
<div class="tab-class-search" v-if="cur == 1">
<!-- <div class="title">小班查询：</div> -->
<el-input v-model="xiaobaninput" placeholder="请输入小班号">
<i class="el-icon-search el-input__icon" slot="suffix" @click="xiaobansearch"></i>
</el-input>
</div>
<div class="tab-class-search" v-if="cur == 0">
<!-- <div class="title">项目查询：</div> -->
<el-input v-model="projectInput" placeholder="请输入项目名称">
<i class="el-icon-search el-input__icon" slot="suffix" @click="projectSearch"></i>
</el-input>
</div>
</div>
<section
v-if="showxiaoban || showbase"
class="scroll-board-wrap"
:class="{ close: showScrollBoard == true }"
>
<dv-scroll-board
v-if="showbase"
:key="scrollBoardKey"
class="scroll-board-01 scroll-base"
:config="scrollBaseListConfig"
ref="scrollBaseList"
@click="scrollBaseListClick"
@mouseout="baseListClick"
/>
<dv-scroll-board
v-if="showxiaoban && cur == 1"
:key="scrollBoardKey"
class="scroll-board-01"
:config="scrollBoardConfig"
ref="scrollBoard"
@click="scrollBoardClick"
:style="scrollBoardStyle"
/>
<dv-scroll-board
v-if="showxiaoban && cur == 0"
:key="scrollBoardKey"
class="scroll-board-01"
id="projectId"
:config="scrollPeojectConfig"
ref="scrollProjectBoard"
@click="scrollProjectClick"
@mouseout="scrollOutPro"
:style="scrollBoardStyle"
/>
<div class="scroll-board-tool" @click="toggleShowScrollBoard">
<div class="inner">
<img src="../assets/img/jiantou.png" alt />
</div>
</div>
</section>
</div>
</section>
<!-- </dv-full-screen-container> -->
</div>
</template>
<script>
import Map from '../components/amapPow.vue';
import Header from '../components/header';
import MyEcharts from '../components/echarts';
import Numerical from '../components/numerical';
import Alarm from '../components/alarm';
import PickerAddr from '../components/pickerAddr';
import Typeslide from '../components/typeslide';
import { Message } from 'element-ui';
import { debounce } from '@/utils/mdebounce';
import { sliceArray } from '@/utils/sliceArray';
import { mapMutations, mapState, mapGetters } from 'vuex';
import {
page1numerical,
page1echarts01,
page1echarts02,
rightScrollData,
baseList,
alarmDataApi,
page2numerical,
page2echarts01,
page2echarts02,
page2echarts03,
page5numerical,
typeSlideApi,
page5echarts01,
page5echarts02,
page6numerical,
page6echarts01,
page6echarts02,
eventList,
smallClassDetail,
smallInfo,
eventDetail,
financeBaseDetail,
projectList,
projectSmallClass
} from '../service/index';
import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
import scrollPeojectSchema from '../dataSchema/scrollPeojectSchema';
import scrollBaseListSchema from '../dataSchema/scrollBaseListSchema';
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 scrollEventSchema from '../dataSchema/scrollEventSchema';
//柱状图颜色
let colorArr = ['#00FAFD', '#FF4E46', '#FFAA00', '#19D800'];
// import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
export default {
name: '',
components: {
Map,
Header,
MyEcharts,
Numerical,
Alarm,
PickerAddr,
Typeslide
},
data() {
return {
tabData: [
{
id: 1,
name: '项目查询'
},
{
id: 2,
name: '小班查询'
}
],
rowList: [],
cur: 0,
showxiaoban: true,
showbase: false,
showScrollBoard: false,
alarData: {},
page: 1,
// addrOptions: regionDataPlus,
addrSelectedOptions: ['520000', ''],
navList: [
{ text: '森林资源', en: 'forest' },
{ text: '林木结构', en: 'treeSpecies' },
{ text: '碳汇管理', en: 'sink' },
{ text: '林下经济', en: 'economics' },
{ text: '土地流转', en: 'circulation' },
{ text: '事件信息', en: 'event' }
],
scrollBoardKey: Date.now(),
scrollBoardStyle: {
// width: '100%',
// height: '60vh'
},
scrollBoardConfig: scrollBoardSchema,
scrollBaseListConfig: scrollBaseListSchema,
scrollPeojectConfig: scrollPeojectSchema,
page1numerical: [
{ name: '蓄积量', number: '2309', unit: '立方米' },
{ name: '占地面积', number: '55.4', unit: '万亩' }
],
alarmData: [
// {msg:'三都林场01小班于15：00：00发现火情，请尽快处理！'},
// {msg:'测试1！'},
// {msg:'测试22222222！'},
],
page1Char1: page1Char1Schema,
page1Char2: page1Char2Schema,
page2numerical: [],
page2Char1: page2Char1Schema,
page2Char2: page2Char2Schema,
page2Char3: page2Char3Schema,
page5numerical: [],
typeSlideData: [],
page5Char1: page5Char1Schema,
page5Char2: page5Char2Schema,
page6numerical: [],
page6Char1: page6Char1Schema,
page6Char2: page6Char2Schema,
scrollEventConfig: scrollEventSchema,
xiaobaninput: '',
projectInput: '',
baseinput: ''
};
},
created() {},
computed: {
...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
},
mounted() {
this.getPageData();
// this.getRightScrollData();
setInterval(() => {
this.getPageData();
}, 1160000);
window.onresize = () => {
//图表resize
if (this.$store.state.addr.page == 'forest') {
let page1Char1Uuid = this.$refs.page1Char1.mid;
this.$refs.page1Char1.resizeChar(page1Char1Uuid);
let page1Char2Uuid = this.$refs.page1Char2.mid;
this.$refs.page1Char2.resizeChar(page1Char2Uuid);
} else if (this.$store.state.addr.page == 'treeSpecies') {
let page2Char2Uuid = this.$refs.page2Char2.mid;
this.$refs.page2Char2.resizeChar(page2Char2Uuid);
let page2Char3Uuid = this.$refs.page2Char3.mid;
this.$refs.page2Char3.resizeChar(page2Char3Uuid);
} else if (this.$store.state.addr.page == 'economics') {
let page5Char1Uuid = this.$refs.page5Char1.mid;
this.$refs.page5Char1.resizeChar(page5Char1Uuid);
let page5Char2Uuid = this.$refs.page5Char2.mid;
this.$refs.page5Char2.resizeChar(page5Char2Uuid);
} else if (this.$store.state.addr.page == 'event') {
let page6Char1Uuid = this.$refs.page6Char1.mid;
this.$refs.page6Char1.resizeChar(page6Char1Uuid);
let page6Char2Uuid = this.$refs.page6Char2.mid;
this.$refs.page6Char2.resizeChar(page6Char2Uuid);
}
};
},
watch: {
xiaobaninput: {
handler: function () {
debounce(this.xiaobansearch, 500, false);
}
},
projectInput: {
handler: function () {
debounce(this.projectSearch, 500, false);
}
},
baseinput: {
handler: function () {
debounce(this.basesearch, 500, false);
}
},
'$store.state.addr.selectCity'(val) {
// debounce(this.getPageData(), 1000, false)
this.getPageData();
},
'$store.state.addr.selectDistrict'(val) {
this.getPageData();
},
'$store.state.addr.selectStreet'(val) {
this.getPageData();
},
'$store.state.addr.mapLevel': {
handler(val) {
console.log(val);
console.log(this.$store.state.addr.selectCity.prop);
if (val === 'city' && this.$store.state.addr.selectCity.prop == '2') {
this.jumpDistrict();
}
}
},
'$store.state.addr.selectProject'(val) {
// console.log('addr.selectProject',val);
this.getPageData();
},
},
methods: {
...mapMutations([
'changeSearchSmallClass',
'changeEvenData',
'changeBaseDetail',
'changeSelectCity',
'changeSelectDistrict',
'changeSelectStreet',
'getProjectSmallClassMap',
'changeSelectProject'
]),
addrChange(value) {
console.log('addrChange', value);
},
navClick(index) {
let pageName = this.navList[index - 1].en;
if (pageName == 'sink' || pageName == 'circulation') {
Message('暂未开放！');
return;
}
this.$store.commit('changePage', this.navList[index - 1].en);
console.log('this.navList[index-1].en', this.navList[index - 1].en);
this.page = index;
console.log('index', index);
if (this.navList[index - 1].en == 'economics') {
this.showbase = true;
this.showxiaoban = false;
} else if (this.navList[index - 1].en == 'event') {
this.showbase = false;
this.showxiaoban = false;
} else {
this.showbase = false;
this.showxiaoban = true;
}
// 切换专题时，重置区域
// this.$store.dispatch('searchArea', {
// parentId: '520000',
// name: '贵州省',
// mapLevel: 'province'
// });
this.getPageData();
},
getPageData() {
debounce(this.debounceGetData, 1000, true);
},
debounceGetData() {
console.log('请求数据');
// console.log('page', this.$store.state.addr.page);
// {text:'森林资源',en:'forest'},
// {text:'林木结构',en:'treeSpecies'},
// {text:'碳汇管理',en:'sink'},
// {text:'林下经济',en:'economics'},
// {text:'土地流转',en:'circulation'},
// {text:'事件信息',en:'event'},
if (this.$store.state.addr.page == 'forest') {
this.getPage1numerical();
this.getPage1echarts01();
this.getPage1echarts02();
this.getRightScrollData();
this.getProjectScrollData();
} else if (this.$store.state.addr.page == 'treeSpecies') {
this.getPage2numerical();
// this.getPage2echarts01();
this.getPage2echarts02();
this.getPage2echarts03();
this.getRightScrollData();
this.getProjectScrollData();
} else if (this.$store.state.addr.page == 'economics') {
this.getPage5numerical();
// this.getTypeSlideData();
this.getPage5echarts01();
this.getPage5echarts02();
this.getBaseList();
} else if (this.$store.state.addr.page == 'event') {
this.getPage6numerical();
this.getPage6echarts01();
this.getEventList();
// this.getPage6echarts02();
this.getAlarmData();
// this.getRightScrollData();
}
},
getPage1numerical() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId,
courseId:this.$store.state.addr.selectProject.ProjectID,
};
page1numerical(param)
.then((res) => {
// console.log('res',res);
this.page1numerical = res.data;
})
.catch((err) => {
console.log('echarts01 err', err);
});
},
getPage1echarts01() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId,
courseId:this.$store.state.addr.selectProject.ProjectID,
};
// console.log('cityId',param.cityId);
page1echarts01(param)
.then((res) => {
this.page1Char1.xAxis.data = res.data.map((item) => {
return item.name;
});
this.page1Char1.series[0].data = res.data.map((item) => {
return item.number;
});
//数量过小时隐藏滚动
if (this.page1Char1.xAxis.data.length <= 5) {
this.page1Char1.dataZoom[0].show = false;
} else {
this.page1Char1.dataZoom[0].show = true;
}
let charUuid = this.$refs.page1Char1.mid;
this.$refs.page1Char1.intChar(charUuid);
})
.catch((err) => {
console.log('getPage1echarts01 err', err);
});
},
getPage1echarts02() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId,
courseId:this.$store.state.addr.selectProject.ProjectID,
};
// console.log('cityId',param.cityId);
page1echarts02(param)
.then((res) => {
this.page1Char2.xAxis.data = res.data.map((item) => {
return item.name;
});
this.page1Char2.series[0].data = res.data.map((item) => {
return item.number;
});
//数量过小时隐藏滚动
if (this.page1Char2.xAxis.data.length <= 5) {
this.page1Char2.dataZoom[0].show = false;
} else {
this.page1Char2.dataZoom[0].show = true;
}
let charUuid = this.$refs.page1Char2.mid;
this.$refs.page1Char2.intChar(charUuid);
})
.catch((err) => {
console.log('getPage1echarts02 err', err);
});
},
getRightScrollData() {
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,
pageNum:1,
pageSize:50,
};
rightScrollData(param)
.then((res) => {
// console.log('res',res.rows.length);
// console.log('this.scrollBoardConfig',this.scrollBoardConfig);
//当小班滚动数据少时重设参数
// if(res.rows.length<=15){
// this.scrollBoardConfig.rowNum = 5;
// this.scrollBoardStyle.height = '25vh'
// }
this.scrollBoardConfig.data = [];
res.rows.forEach((element) => {
this.scrollBoardConfig.data.push([
element.smallNumber,
element.treeComp,
element.perAcreStock + 'm³',
element.landArea + '亩',
element.id
]);
});
this.scrollBoardKey = Date.now();
this.$refs.scrollBoard&&this.$refs.scrollBoard.updateRows(this.scrollBoardConfig.data);
// console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
// this.scrollBoardConfig = res.data;
})
.catch((err) => {
console.log('scrollBoard err', err);
});
},
getProjectScrollData() {
let param = {
courseName: this.projectInput,
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId,
pageNum:1,
pageSize:50,
};
projectList(param)
.then((res) => {
// console.log('res',res.rows.length);
// console.log('this.scrollBoardConfig',this.scrollBoardConfig);
//当小班滚动数据少时重设参数
// if(res.rows.length<=15){
// this.scrollBoardConfig.rowNum = 5;
// this.scrollBoardStyle.height = '25vh'
// }
let that = this;
this.scrollPeojectConfig.data = [];
res.rows.forEach((element) => {
this.scrollPeojectConfig.data.push([
element.courseName,
element.smallClassStock + 'm³',
element.landArea + '亩',
element.classNumber,
element.id
]);
});
this.scrollBoardKey = Date.now();
this.$refs.scrollProjectBoard.updateRows(
this.scrollPeojectConfig.data
);
//监听是否有选中项目,有的话高亮
let timer1 = setInterval(function(){ // 每 10 毫秒检查一下 html 是否已存在
let domId = that.$store.state.addr.selectProject.ProjectID;
let dom = document.getElementById(that.$store.state.addr.selectProject.ProjectID);
// console.log('dom',domId);
if(domId&&dom){
// console.log('dom',dom.classList);
if(dom.classList.contains('active')==true){
// clearInterval(timer1);
}else{
dom.classList.add('active');
}
}
},500);
// setTimeout(() => {
// this.$store.state.addr.selectProject.ProjectID&&document.getElementById(this.$store.state.addr.selectProject.ProjectID).classList.add('active');
// }, 2000);
// console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
// this.scrollBoardConfig = res.data;
})
.catch((err) => {
console.log('scrollProjectBoard err', err);
});
},
getBaseList() {
let param = {
baseName: this.baseinput,
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
baseList(param)
.then((res) => {
this.scrollBaseListConfig.data = [];
res.rows.forEach((element) => {
let cateInfoList = element.cateInfoList;
let cropName = '';
for (let index = 0; index < cateInfoList.length; index++) {
const item = cateInfoList[index];
cropName += item.cropName + ',';
}
cropName = cropName.substring(0, cropName.lastIndexOf(','));
this.scrollBaseListConfig.data.push([
element.baseName,
cropName || '暂无作物',
element.baseArea + '亩',
element.id
]);
});
this.scrollBoardKey = Date.now();
})
.catch((err) => {
console.log('echarts01 err', err);
});
},
getEventList() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
eventList(param)
.then((res) => {
this.scrollEventConfig.data = [];
res.rows.forEach((element) => {
this.scrollEventConfig.data.push([
element.createTime.slice(5, 16),
element.townName + element.villageName,
this.eventTypeFilter(element.eventType),
// element.createBy,
this.eventStateFilter(element.state),
element.id
]);
});
this.scrollBoardKey = Date.now();
})
.catch((err) => {
console.log('getEventList err', err);
});
},
eventTypeFilter(e) {
if (e == '1') {
return '火灾';
} else if (e == '2') {
return '砍伐';
} else if (e == '3') {
return '病虫害';
} else if (e == '4') {
return '偷盗林木';
}
},
eventStateFilter(e) {
if (e == '0') {
return '未反馈';
} else if (e == '1') {
return '已反馈';
}
},
getAlarmData() {
alarmDataApi()
.then((res) => {
// console.log('this.page',this.page);
// console.log('res',res);
this.alarmData = res.data;
// console.log('alarmData.length',this.alarmData.length);
})
.catch((err) => {
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.selectStreet.areaId,
smallNumber: this.xiaobaninput,
courseId:this.$store.state.addr.selectProject.ProjectID,
};
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,
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId,
courseId:this.$store.state.addr.selectProject.ProjectID,
};
page2echarts01(param)
.then((res) => {
// console.log('res',res);
this.page2Char1.series[0].data = [];
this.page2Char1.series[0].data = res.data;
let charUuid = this.$refs.page2Char1.mid;
this.$refs.page2Char1.intChar(charUuid);
})
.catch((err) => {
console.log('getPage2echarts01 err', err);
});
},
getPage2echarts02() {
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,
courseId:this.$store.state.addr.selectProject.ProjectID,
};
page2echarts02(param)
.then((res) => {
// console.log('res',res);
// this.page2Char2 = res.data;
// console.log('this.page2Char2.series', this.page2Char2.series);
this.page2Char2.xAxis.data = [];
this.page2Char2.series = [];
const rows = res.data;
// console.log(rows)
// x坐标
this.page2Char2.xAxis.data = rows.map((item) => {
return item.smallNumber;
});
// 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) => {
// console.log('page2Char2 seriesList',seriesList);
// console.log('page2Char2 next',next);
obj[next.name] ? '' : (obj[next.name] = true && newArr.push(next));
return newArr;
}, []);
seriesList.sort((star, next) => {
// 按name的指定顺序排序,不排序可以删掉
var order = ['杉木', '马尾松', '软阔', '硬阔'];
return order.indexOf(star.name) - order.indexOf(next.name);
});
seriesList = seriesList.map((item, index) => {
let itemColor = null;
if (item.name == '杉木' || item.name == '杉') {
itemColor = colorArr[0];
} else if (item.name == '马尾松' || item.name == '马') {
itemColor = colorArr[1];
} else if (item.name == '软阔' || item.name == '软') {
itemColor = colorArr[2];
} else if (item.name == '硬阔' || item.name == '硬') {
itemColor = colorArr[3];
}
return {
name: item.name,
type: 'bar',
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
data: [],
itemStyle: {
normal: { color: itemColor || 'auto' }
}
};
});
// console.log(seriesList)
rows.forEach((item) => {
seriesList.forEach((jtem, index) => {
let num = 0;
item.treeList &&
item.treeList.map((ktem) => {
if (ktem.name.indexOf(jtem.name) > -1) {
num = ktem.value;
}
});
seriesList[index].data.push(num);
});
});
// console.log('page2echarts02 seriesList',seriesList)
this.page2Char2.series = seriesList;
//数量过小时隐藏滚动
if (this.page2Char2.xAxis.data.length <= 5) {
this.page2Char2.dataZoom[0].show = false;
} else {
this.page2Char2.dataZoom[0].show = true;
}
let charUuid = this.$refs.page2Char2.mid;
this.$refs.page2Char2.intChar(charUuid);
})
.catch((err) => {
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,
courseId:this.$store.state.addr.selectProject.ProjectID,
};
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.smallNumber;
});
// 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;
}, []);
// console.log('seriesList',seriesList);
seriesList.sort((star, next) => {
// 按name的指定顺序排序,不排序可以删掉
var order = ['杉木', '马尾松', '软阔', '硬阔'];
return order.indexOf(star.name) - order.indexOf(next.name);
});
seriesList = seriesList.map((item, index) => {
let itemColor = null;
if (item.name == '杉木' || item.name == '杉') {
itemColor = colorArr[0];
} else if (item.name == '马尾松' || item.name == '马') {
itemColor = colorArr[1];
} else if (item.name == '软阔' || item.name == '软') {
itemColor = colorArr[2];
} else if (item.name == '硬阔' || item.name == '硬') {
itemColor = colorArr[3];
}
return {
name: item.name,
type: 'bar',
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
data: [],
itemStyle: {
normal: { color: itemColor || 'auto' }
}
};
});
// console.log(seriesList)
rows.forEach((item) => {
seriesList.forEach((jtem, index) => {
let num = 0;
item.treeList &&
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 <= 5) {
this.page2Char3.dataZoom[0].show = false;
} else {
this.page2Char3.dataZoom[0].show = true;
}
let charUuid = this.$refs.page2Char3.mid;
this.$refs.page2Char3.intChar(charUuid);
})
.catch((err) => {
console.log('getPage2echarts03 err', err);
});
},
getPage5numerical() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
page5numerical(param)
.then((res) => {
// console.log('res',res);
this.page5numerical = res.data;
})
.catch((err) => {
console.log('echarts01 err', err);
});
},
getTypeSlideData() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
typeSlideApi(param)
.then((res) => {
this.typeSlideData = sliceArray(res.data, 3);
// console.log(' this.typeSlideData', this.typeSlideData);
})
.catch((err) => {
console.log('getTypeSlideData err', err);
});
},
getPage5echarts01() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
page5echarts01(param)
.then((res) => {
// console.log('res',res);
// this.page5Char1 = res.data;
this.page5Char1.xAxis.data = res.data.map((item) => {
return item.baseName;
});
this.page5Char1.series[0].data = res.data.map((item) => {
return item.baseArea;
});
//数量过小时隐藏滚动
if (this.page5Char1.xAxis.data.length <= 5) {
this.page5Char1.dataZoom[0].show = false;
} else {
this.page5Char1.dataZoom[0].show = true;
}
let charUuid = this.$refs.page5Char1.mid;
this.$refs.page5Char1.intChar(charUuid);
})
.catch((err) => {
console.log('getPage5echarts01 err', err);
});
},
getPage5echarts02() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
page5echarts02(param)
.then((res) => {
// console.log('res',res);
// this.page5Char2 = res.data;
this.page5Char2.xAxis.data = res.data.map((item) => {
return item.name;
});
this.page5Char2.series[0].data = res.data.map((item) => {
return item.number;
});
//数量过小时隐藏滚动
if (this.page5Char2.xAxis.data.length <= 5) {
this.page5Char2.dataZoom[0].show = false;
} else {
this.page5Char2.dataZoom[0].show = true;
}
let charUuid = this.$refs.page5Char2.mid;
this.$refs.page5Char2.intChar(charUuid);
})
.catch((err) => {
console.log('getPage5echarts02 err', err);
});
},
getPage6numerical() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
//第一屏统计
page6numerical(param)
.then((res) => {
// console.log('res',res);
this.page6numerical = res.data;
})
.catch((err) => {
console.log('getPage6numerical err', err);
});
},
getPage6echarts01() {
let param = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
};
page6echarts01(param)
.then((res) => {
// console.log('res',res);
// this.page6Char1 = res.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 = [];
this.page6Char1.series[3].data = [];
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.fireCount);
this.page6Char1.series[2].data.push(element.cutCount);
this.page6Char1.series[3].data.push(element.stealCount);
});
// console.log('x坐标', this.page6Char1.xAxis.data)
//数量过小时隐藏滚动
if (this.page6Char1.xAxis.data.length <= 5) {
this.page6Char1.dataZoom[0].show = false;
} else {
this.page6Char1.dataZoom[0].show = true;
}
let charUuid = this.$refs.page6Char1.mid;
this.$refs.page6Char1.intChar(charUuid);
})
.catch((err) => {
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');
this.getRightScrollData();
this.getPageData();
},
projectSearch() {
// console.log('projectSearch');
this.getProjectScrollData();
// this.getPageData();
},
basesearch() {
// console.log('xiaobansearch');
this.getBaseList();
this.getPageData();
},
scrollBoardClick(e) {
let param = {
id: e.row[4]
};
smallClassDetail(param).then((res) => {
this.changeSearchSmallClass(res.data);
console.log(res.data);
this.alarData = res.data;
// if (this.$store.state.addr.mapLevel == 'city') {
// this.jumpDistrict();
// } else {
// this.vuexCityList.forEach((element) => {
// if (res.data.cityId === element.areaId) {
// this.changeSelectCity({
// value: element.areaCode,
// label: res.data.cityName,
// areaId: element.areaId
// });
// this.$store.dispatch('searchArea', {
// parentId: element.areaCode.substring(0, 6),
// name: res.data.cityName,
// mapLevel: 'city'
// });
// }
// });
// }
});
},
removeAllClass(className) {
//找到所有包含className的结点
let nodeList = document.querySelectorAll(
`.dv-scroll-board .${className}`
);
// let nodeList = document.getElementsByClassName('row-item');
//删除这些标签对应的class
Array.prototype.forEach.call(nodeList, (el) => {
el&&el.classList.remove(className);
});
},
scrollProjectClick(e) {
console.log('scrollProjectClick',e);
// 点击添加class
// let removeAllClass = (className)=>{
// //找到所有包含className的结点
// let nodeList = document.querySelectorAll(`.dv-scroll-board .${className}`);
// // let nodeList = document.getElementsByClassName('row-item');
// //删除这些标签对应的class
// Array.prototype.forEach.call(nodeList,(el)=>{
// el.classList.remove(className)
// })
// }
let proClass = document.getElementsByClassName('row-item');
// proClass[e.rowIndex].style.background = 'rgb(4, 145, 110)';
this.removeAllClass('active');
// console.log('proClass',proClass);
// proClass[e.rowIndex]&&proClass[e.rowIndex].classList.add('active');
let rowId = e.row[4];
this.changeSelectProject({ProjectID:rowId,ProjectName:e.row[0]});
document.getElementById(rowId).classList.add('active');
let param = {
courseId: rowId
// pageNum: 1,
// pageSize: 20
};
projectSmallClass(param).then((res) => {
if (res.code == 200) {
this.getProjectSmallClassMap(res.rows);
}
});
},
jumpDistrict() {
if (this.vuexDistrictList) {
this.vuexDistrictList.forEach((element) => {
if (this.alarData.countyId === element.areaId) {
this.changeSelectDistrict({
value: element.areaCode,
label: this.alarData.cityName,
areaId: element.areaId
});
this.$store.dispatch('searchArea', {
parentId: element.areaCode.substring(0, 6),
name: element.areaName,
mapLevel: 'district'
});
}
});
}
},
scrollOut(e) {
// console.log(e);
this.changeSearchSmallClass({ name: false });
},
scrollOutPro(e) {
// let proClass = document.getElementsByClassName('row-item')
// proClass[e.rowIndex].style.background = '';
},
scrollBaseListClick(e) {
console.log('scrollBaseListClick', e);
let param = {
baseId: e.row[3]
};
financeBaseDetail(param).then((res) => {
this.changeBaseDetail(res.data);
});
},
baseListClick() {
this.changeBaseDetail({ name: false });
},
scrollEventClick(e) {
let param = {
id: e.row[4]
};
eventDetail(param).then((res) => {
this.changeEvenData(res.data);
});
},
scrollEventOut() {
this.changeEvenData({ name: false });
},
toggleShowScrollBoard() {
this.showScrollBoard = !this.showScrollBoard;
},
tabLink(e) {
this.cur = e;
if (this.cur == '1') {
this.removeAllClass('active');
}
},
classFunc(index) {
if (this.cur == index) {
return `active active${index}`;
}
}
}
};
</script>
<style lang='scss' scoped>
@import url(./index.scss);
.tab-box {
// background-color: rgba(1, 33, 35, 0.7);
// background: linear-gradient(90deg, rgba(0,99,113,0.9) 0%, #00ADAF 54%, rgba(0,50,57,0.9) 100%);
background-color: rgba(0, 161, 173, 0.2);
box-shadow: inset 0px -2px 9px -3px rgba(0, 250, 253, 0.4);
width: 100%;
.tab-btn {
float: left;
width: 148px;
height: 46px;
line-height: 46px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
&:first-of-type {
text-indent: -10px;
}
cursor: pointer;
&.active0 {
background: url(../assets/img/tab-btn-first.png) no-repeat;
}
&.active1 {
background: url(../assets/img/tab-btn-center.png) no-repeat;
transform: translateX(-22px);
}
&.active {
background-size: 100%;
color: #00fafd;
}
.tab-span {
display: inline-block;
}
}
}
.tab-class-search {
// display: flex;
height: 40px;
width: 100%;
align-items: center;
margin: 0 15px;
}
/deep/ .row-item {
line-height: normal !important;
align-items: center;
}
/deep/ .dv-scroll-board .rows .ceil {
white-space: normal;
overflow: unset;
text-overflow: unset;
display: grid;
height: 100%;
align-items: center;
}
.right_xiaoban {
background-color: rgba(1, 33, 35, 0.7);
display: flex;
flex-direction: column;
/* justify-content: right; */
// width: 59%;
float: right;
}
.rowClass {
box-shadow: inset 0px 0px 31px 1px rgba(0, 250, 253, 0.4);
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid rgba(0, 250, 253, 1);
background: #04916e;
}
</style>