castgroup_bigscreen/src/views/index.vue

<!--
 * @Description: 
 * @Author: wangcc
 * @Date: 2022-07-06 15:56:45
 * @LastEditors: wangcc
 * @LastEditTime: 2023-03-10 17:53:02
 * @FilePath: \castgroup_bigscreen\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" style="width:100%;justify-content: right;">
        <div class="selectBox">
          <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>
      <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"
          />
          <div class="scroll-board-table-box" v-show="showxiaoban && cur == 1">
            <el-table
              height="580"
              ref="tableFrom"
              highlight-current-row
              size="small"
              :data="tableData"
              @mouseenter.native="stopScroll"
              @mouseleave.native="startScroll"
              @cell-click="scrollBoardClick"
              stripe
            >
              <el-table-column prop="smallNumber" label="小班号" align="center"></el-table-column>
              <el-table-column prop="treeComp" label="树种组成" align="center"></el-table-column>
              <el-table-column prop="perAcreStock" label="每亩蓄积" align="center">
                <template slot-scope="{row}">
                  <span>{{row.perAcreStock}}m³</span>
                </template>
              </el-table-column>
              <el-table-column prop="landArea" label="小班面积" align="center">
                <template slot-scope="{row}">
                  <span>{{row.landArea}}亩</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-box" v-if="total > 0">
              <pagination
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                :layout="'prev, pager, next'"
                @pagination="getRightScrollData"
              />
            </div>
          </div>
          <!-- <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"
            v-if="showxiaoban && cur == 0"
            @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: '小班查询'
        }
      ],
      timer: null,
      tableData: [],
      rowList: [],
      cur: 0,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 300
      },
      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) {
        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);
      this.page = 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, 300, false);
    },
    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,
        courseId: this.$store.state.addr.selectProject.ProjectID,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      };
      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.tableData = res.rows;
          this.total = res.total;
          // 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) => {
          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);
          });

          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(row) {
      console.log(row);
      let param = {
        id: row.id
      };
      smallClassDetail(param).then((res) => {
        this.changeSearchSmallClass(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) {
      // 点击添加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];
      console.log(rowId);
      this.changeSelectProject({ ProjectID: rowId, ProjectName: e.row[0] });
      document.getElementById(rowId).classList.add('active');
      let param = {
        courseId: rowId
        // pageNum: 1,
        // pageSize: 50
      };
      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,
              prop: '2'
            });
            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) {
      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');
        this.tableScroll(false);
      } else {
        clearInterval(this.timer);
      }
    },
    classFunc(index) {
      if (this.cur == index) {
        return `active active${index}`;
      }
    },
    startScroll() {
      this.tableScroll(false);
    },

    stopScroll() {
      this.tableScroll(true);
    },
    //滚动方法
    tableScroll(stop) {
      if (stop) {
        clearInterval(this.timer);
        return;
      }
      const table = this.$refs.tableFrom;
      const divData = table.bodyWrapper;
      this.timer = setInterval(() => {
        divData.scrollTop += 1;
        if (
          divData.clientHeight + divData.scrollTop + 1 >
          divData.scrollHeight
        ) {
          if (table.tableData.length > 5) {
            divData.scrollTop = 0;
          }
        }
      }, 80);
    }
  }
};
</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;
}
.selectBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .el-table thead {
  color: #fff;
}
/deep/ .el-table tr {
  background-color: transparent;
}
/deep/ .el-table th.el-table__cell {
  background-color: rgba(8, 238, 255, 0.3);
}
/deep/ .el-table {
  background-color: transparent;
  color: #08eeff;
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: unset;
}
/deep/ .el-table th.el-table__cell.is-leaf {
  border-bottom: unset;
}
/deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: rgba(0, 175, 169, 0.15);
}
/deep/ .el-table::before {
  background-color: transparent;
}

/deep/ .el-table__body .el-table__row.hover-row td {
  background-color: rgba(255, 170, 0, 0.20) !important;
  cursor: pointer;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: rgba(255, 170, 0, 0.20) !important;
  cursor: pointer;
}
.el-table {
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; /*滚动条宽度*/
    height: 10px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px rgba(255, 255, 255, 0.1) inset; /*滚动条的背景区域的内阴影*/
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    background-color: rgba(255, 255, 255, 0.1); /*滚动条的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px rgba(8, 238, 255, 0.3) inset; /*滚动条的内阴影*/
    border-radius: 10px; /*滚动条的圆角*/
    background-color: rgba(8, 238, 255, 0.3); /*滚动条的背景颜色*/
  }
}
/deep/ .el-table__body tr.current-row > td.el-table__cell {
  background-color: transparent;
}
.scroll-board-table-box {
  height: calc(100vh - var(--header-height) - 200px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15px;
}
</style>