MingGao_vue/minggao/src/page/home/newHome/newHome.vue

<!--
 * @Description:
 * @Autor: lin
 * @Date: 2024-04-09 14:26:07
 * @LastEditors: lin
 * @LastEditTime: 2024-04-29 09:22:14
-->
<template>
  <div class="box">
    <div class="mapBox" id="newHome"></div>
    <!-- 左侧统计图 -->
    <transition
      leave-active-class="animate__animated animate__fast animate__fadeOutLeft"
      enter-active-class="animate__animated animate__fast animate__fadeInLeft"
    >
      <div v-show="!showBanner">
        <div class="smallChar deviceInfo">
          <div class="charBox">
            <div class="charTitle">
              <Title text="设备信息"></Title>
            </div>
            <div class="charContent">
              <div class="charList" v-for="item in deviceInfo" :key="item.device_type_id">
                <div class="leftInfo">
                  <img :src="`${item.icon}`" alt />
                  <div>{{ item.type_name }}</div>
                </div>
                <div class="leftInfo">
                  <span>{{ item.device_count }}台</span>
                  <img
                    class="markerIcon"
                    :src="`${markerObj[item.device_type_id].length == 0 ? eyeClose : eyeOpen}`"
                    alt
                    @click="setMarker(item.devices_info, item.device_type_id)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="smallChar deviceInfo bottomBox">
          <div class="charBox">
            <div class="charTitle">
              <Title text="有害生物监测"></Title>
              <el-date-picker
                :pickerOptions="pickerOptions"
                :clearable="false"
                size="mini"
                v-model="watchYear"
                type="month"
                placeholder="选择年月"
                format="yyyy-MM"
                value-format="yyyy-MM"
                @change="getWatchInfo(watchYear)"
              ></el-date-picker>
            </div>
            <div class="charContent">
              <el-carousel>
                <el-carousel-item
                  v-for="item in watchInfo"
                  :key="item.category"
                  indicator-position="outside"
                >
                  <div class="infoTitle">{{ item.category }}</div>
                  <div class="small">{{ item.warning }}</div>
                  <div class="charInfo">
                    <div class="detailInfo">
                      <div>有害生物种类</div>
                      <div>{{ item.count }}</div>
                    </div>
                    <div class="detailInfo" v-if="item.category != '杂草'">
                      <div>有害生物总数</div>
                      <div>{{ item.sum }}</div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <div class="tipsBox">
          <div>
            <span>{{ warningTaskInfo.month_warning_count }}</span>
            <span>本月预警数量</span>
          </div>
          <div>
            <span>{{ warningTaskInfo.year_warning_count }}</span>
            <span>全年预警数量</span>
          </div>
        </div>
      </div>
    </transition>
    <!-- 右侧统计图 -->
    <transition
      leave-active-class="animate__animated animate__fast animate__fadeOutRight"
      enter-active-class="animate__animated animate__fast animate__fadeInRight"
    >
      <div v-show="!showBanner">
        <div class="smallChar lineBox">
          <div class="charBox">
            <div class="charTitle">
              <Title class="smallTitle" :text="`有害生物发生趋势${new Date().getFullYear() + ''}`"></Title>
              <el-select
                class="selectThem"
                v-model="rightLineCategory"
                size="mini"
                placeholder="请选择分类"
                @change="changeCate"
              >
                <el-option
                  v-for="typeItem in typeList"
                  :label="typeItem.label"
                  :value="typeItem.value"
                  :key="typeItem.value"
                ></el-option>
              </el-select>
              <div class="detailBanner" @click="getBannerInfo(bannerYear, bannerBarCategory)"></div>
            </div>
            <div class="charContent">
              <div class="chartDetail" id="chartDetailId"></div>
            </div>
          </div>
        </div>
        <div class="smallChar lineBox bottomBox">
          <div class="charBox">
            <div class="charTitle">
              <Title class="smallTitle" text="任务统计"></Title>
              <el-date-picker
                :pickerOptions="pickerOptions"
                :clearable="false"
                size="mini"
                v-model="taskYear"
                type="year"
                placeholder="选择年"
                format="yyyy"
                value-format="yyyy"
                @change="getTaskInfo(taskYear)"
              ></el-date-picker>
            </div>
            <div class="charContent">
              <div class="chartDetail" id="chartTaskId"></div>
            </div>
          </div>
        </div>
        <div class="tipsBox rightTips">
          <div>
            <span>{{ warningTaskInfo.task }}</span>
            <span>今日监督任务</span>
          </div>
          <div>
            <span>{{ warningTaskInfo.kong }}</span>
            <span>今日监测任务</span>
          </div>
        </div>
      </div>
    </transition>
    <!-- 点击地图圆圈的详情 -->
    <transition
      leave-active-class="animate__animated animate__fast animate__fadeOutUp"
      enter-active-class="animate__fast animate__animated animate__fadeInDown"
    >
      <div v-if="groupDialog" class="dialog">
        <div class="dialog_content">
          <!-- 关闭按钮 -->
          <div class="dialog_close" @click="groupDialog = false"></div>
          <!-- 内容 -->
          <!-- 组织详情 -->
          <div class="contentInfo" v-if="checkType == 'circle'">
            <div class="title">{{ groupInfo.org_name }}</div>
            <div class="address">{{ groupInfo.org_address }}</div>
            <div class="infoDesc">
              <div>
                <span class="num">{{ groupInfo.devices_count }}</span>
                <span class="name">设备总数</span>
              </div>
              <div>
                <span class="num">{{ groupInfo.pest_count }}</span>
                <span class="name">有害生物总数</span>
              </div>
              <div>
                <span class="num">{{ groupInfo.pest_category_count }}</span>
                <span class="name">有害生物种类</span>
              </div>
              <div>
                <span
                  class="warningText"
                  :style="`color:${warningObject[groupInfo.alarm_level].color}`"
                >
                  <span
                    v-if="groupInfo.alarm_level == 0"
                  >{{ warningObject[groupInfo.alarm_level].text }}</span>
                  <el-tooltip v-else :content="groupInfo.alarm_latest" placement="top">
                    <span>{{ warningObject[groupInfo.alarm_level].text }}</span>
                  </el-tooltip>
                </span>
                <span class="name">报警状态</span>
              </div>
            </div>
          </div>
          <div class="contentInfo" v-else-if="checkType == 'device'">
            <div
              class="viewDetailBtn newHomeBtn"
              v-if="deviceDialogInfo.device_type_id == 3"
              @click="goDeviceLink(deviceDialogInfo.device_id)"
            >查看详情</div>
            <div class="deviceInfo">
              <div class="leftInfo">
                <img src="../../../assets/images/newHome/id.png" />
                <div>设备ID</div>
              </div>
              <div class="rightInfo">{{ deviceDialogInfo.device_id }}</div>
            </div>
            <div class="deviceInfo">
              <div class="leftInfo">
                <img src="../../../assets/images/newHome/name.png" />
                <div>设备名称</div>
              </div>
              <div class="rightInfo">{{ deviceDialogInfo.device_name }}</div>
            </div>
            <div class="deviceInfo">
              <div class="leftInfo">
                <img src="../../../assets/images/newHome/point.png" />
                <div>设备定位</div>
              </div>
              <div class="rightInfo">{{ deviceDialogInfo.degrees }}</div>
            </div>
            <div class="deviceInfo">
              <div class="leftInfo">
                <img src="../../../assets/images/newHome/time.png" />
                <div>最新上报时间</div>
              </div>
              <div class="rightInfo">{{ deviceDialogInfo.uptime_format }}</div>
            </div>
          </div>
          <div class="contentInfo" v-else-if="checkType == 'warning'">
            <div class="title">告警详情</div>
            <div class="warningInfo">
              <div class="infoContent">
                {{ warningList.latest_content }}
                <div class="marginBtn">
                  <router-link to="/index/alermRecord" target="_blank">
                    <div class="newHomeBtn newHomeBigBtn">查看历史记录</div>
                  </router-link>
                </div>
              </div>
              <div class="infoDesc">
                <div>
                  <span class="num">{{ warningList.month_count }}</span>
                  <span class="name">本月预警</span>
                </div>
                <div>
                  <span class="num">{{ warningList.year_count }}</span>
                  <span class="name">本年预警</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 点击林木虫害信息右侧放大图标 -->
    <transition
      leave-active-class="animate__animated animate__fast animate__fadeOutDown"
      enter-active-class="animate__animated animate__fast animate__fadeInUp"
    >
      <div v-if="showBanner" class="dialog bigBanner">
        <div class="dialog_content">
          <!-- 关闭按钮 -->
          <div class="dialog_close" @click="initBanner"></div>
          <div class="contentInfo">
            <Title text="有害生物发生趋势"></Title>
            <div class="barContent">
              <div class="searchBox">
                <el-date-picker
                  :pickerOptions="pickerOptions"
                  :clearable="false"
                  size="mini"
                  v-model="bannerYear"
                  type="year"
                  placeholder="选择年"
                  format="yyyy"
                  value-format="yyyy"
                  @change="getBannerInfo(bannerYear, bannerBarCategory)"
                ></el-date-picker>
                <el-select
                  class="selectThem"
                  v-model="bannerBarCategory"
                  size="mini"
                  placeholder="请选择分类"
                  @change="getBannerInfo(bannerYear, bannerBarCategory)"
                >
                  <el-option
                    v-for="typeItem in typeList"
                    :label="typeItem.label"
                    :value="typeItem.value"
                    :key="typeItem.value"
                  ></el-option>
                </el-select>
              </div>
              <div class="leftContent" v-loading="bannerLoading">
                <div class="bannerBarBox" id="bannerBarBoxId"></div>
                <!-- <div class="bannerBarBox bottomBar" id="bannerBarBottomId"></div> -->
              </div>
              <div class="rightContent" v-loading="bannerLoading">
                <div class="table">
                  <div class="item header">
                    <div>有害生物名称</div>
                    <div v-if="bannerBarCategory != '杂草'">当前总数量</div>
                    <div>发现月份</div>
                    <div>是否新增</div>
                  </div>
                  <div class="item" v-for="(item, index) in bannerData.data" :key="`pest${index}`">
                    <div :class="item.is_new ? 'orangeText' : ''">{{ item.name }}</div>
                    <div
                      v-if="bannerBarCategory != '杂草'"
                      :class="item.is_new ? 'orangeText' : ''"
                    >{{ item.num }}头</div>
                    <div :class="item.is_new ? 'orangeText' : ''">{{ item.month }}月</div>
                    <div :class="item.is_new ? 'orangeText' : ''">{{ item.is_new ? '是' : '否' }}</div>
                  </div>
                </div>
                <div class="info">
                  <div>
                    种类：
                    <span>{{ bannerData.cg_count }}</span>
                  </div>
                  <div>
                    总数：
                    <span>{{ bannerData.count }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 头部告警 -->
    <div
      class="warningBox"
      v-if="warningList.latest_content"
      @click="groupDialog = true; checkType = 'warning'"
    >
      <div class="content">
        <div class="item">{{ warningList.latest_content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Title from './components/Title.vue';
export default {
  name: 'newHome',
  props: {},
  data() {
    return {
      timmerList: [], // 水波纹的定时器
      getFunTimmer: [], // 函数的定时器
      overlayList: [],
      loading: true,
      icon1: require('../../../assets/images/newHome/icon1.png'), // 设备信息图标
      icon2: require('../../../assets/images/newHome/icon2.png'),
      icon3: require('../../../assets/images/newHome/icon3.png'),
      eyeClose: require('../../../assets/images/newHome/eyeclose.png'),
      eyeOpen: require('../../../assets/images/newHome/eyeopen.png'),
      marker3: require('../../../assets/images/newHome/2.png'),
      marker2: require('../../../assets/images/newHome/3.png'),
      marker4: require('../../../assets/images/newHome/4.png'),
      marker8: require('../../../assets/images/newHome/8.png'),
      marker9: require('../../../assets/images/newHome/9.png'),
      marker10: require('../../../assets/images/newHome/10.png'),
      colorObject: {
        0: '#3ACD9C',
        1: '#FF5951',
        2: '#F4A72F',
        3: '#1890FF',
        4: '#FAFF0A',
      },
      warningObject: [
        {
          level: 0,
          color: '#3ACD9C',
          text: '无',
          class: 'green',
        },
        {
          level: 1,
          color: '#FF5951',
          text: 'Ⅰ',
          class: 'red',
        },
        {
          level: 2,
          color: '#F4A72F',
          text: 'Ⅱ',
          class: 'origin',
        },
        {
          level: 3,
          color: '#1890FF',
          text: 'Ⅲ',
          class: 'blue',
        },
        {
          level: 4,
          color: '#FAFF0A',
          text: 'Ⅳ',
          class: 'yellow',
        },
      ],
      map: null,
      deviceInfo: [], // 设备信息
      markerObj: {
        2: [],
        3: [],
        4: [],
        8: [],
        9: [],
        10: [],
      }, //设备点位记录
      groupDialog: false, // 圈圈 设备点位 告警 共用弹框
      checkType: 'circle',
      deviceDialogInfo: {}, //设备弹框内容
      groupInfo: {}, // 圈圈弹框内容
      typeList: [],
      watchYear: '', //有害生物监测统计年份
      watchInfo: [], // 有害生物监测信息详情
      rightLineCategory: '', // 有害生物发生趋势 下拉框
      pestLineObj: {}, // 有害生物发生趋势 类型-》数据
      pestChart: null, // 有害生物发生趋势 折线图
      showBanner: false, // 有害生物发生趋势 是否放大
      bannerBarCategory: '', // 有害生物发生趋势 放大有害生物种类
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      bannerYear: new Date().getFullYear() + '',
      bannerCountChar: null, // 新增有害生物个数柱状图
      bannerTypeChar: null, // 新增有害生物种类柱状图
      bannerLoading: true,
      bannerData: [],
      taskYear: new Date().getFullYear() + '', // 任务统计年份
      warningList: {
        latest_content: '',
        month_count: 0,
        year_count: 0,
      }, // 告警详情
      warningTaskInfo: {},
    };
  },
  computed: {},
  created() {},
  beforeDestroy() {
    this.clerrTimmerFun('fun');
    this.clerrTimmerFun('circle');
  },
  mounted() {
    this.typeList = this.$store.state.pestTypeList; // 有害生物分类
    this.bannerBarCategory = this.typeList[0].value;
    this.rightLineCategory = this.typeList[0].value;
    this.initMap();
    this.getDeviceInfo();
    this.getPestLineInfo();
    this.getTaskInfo(this.taskYear);
    this.getWatchInfo();
    this.getWarningList();
    this.getTaskWarningInfo();
  },
  watch: {},
  methods: {
    // 测报灯设备详情跳转到对应测报灯轮播页面
    goDeviceLink(id) {
      this.$router.push({
        path: '/newHome/device',
        query: {
          id,
        },
      });
    },
    // 清除指定覆盖物
    clearOverlayByType(type) {
      var overlays = this.map.getAllOverlays(type);
      for (var i = 0, l = overlays.length; i < l; i++) {
        this.map.remove(overlays[i]);
      }
    },
    // 清除所有定时器
    clerrTimmerFun(type) {
      if (type == 'circle') {
        this.timmerList.forEach((timmer) => {
          clearInterval(timmer);
        });
      } else {
        this.getFunTimmer.forEach((timmer) => {
          clearInterval(timmer);
        });
      }
    },
    // 获取告警个数任务监督个数表
    getTaskWarningInfo() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.Warning_statistics',
        data: this.qs.stringify({}),
      }).then((res) => {
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        this.warningTaskInfo = res.data.data;
      });
    },
    // 获取告警列表
    getWarningList() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.alarm_detail',
        data: this.qs.stringify({}),
      }).then((res) => {
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        this.warningList = res.data.data;
        console.log(this.warningList);
      });
    },
    // 获取设备信息
    getDeviceInfo() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.device_deatil',
        data: this.qs.stringify({}),
      }).then((res) => {
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        this.deviceInfo = res.data.data;
        this.deviceInfo.forEach((item) => {
          if (item.device_type_id == '2') {
            item.icon = this.icon2;
          } else if (item.device_type_id == '3') {
            item.icon = this.icon1;
          } else {
            item.icon = this.icon3;
          }
        });
        console.log(this.markerObj);
      });
    },
    // 获取有害生物监测数据
    getWatchInfo(date) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.pest_check',
        data: this.qs.stringify({
          date,
        }),
      }).then((res) => {
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        console.log(res.data.data);
        this.watchInfo = res.data.data.pests;
        this.watchYear = res.data.data.time;
      });
    },
    // 获取任务统计图
    getTaskInfo(year) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.task_count',
        data: this.qs.stringify({
          year,
        }),
      }).then((res) => {
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        // console.log(res.data.data);
        let charData = res.data.data;
        // let pestLineObj = {};
        // 有害生物个数
        let taskCountChar = echarts.init(
          document.getElementById('chartTaskId')
        );
        this.setAddBanner(
          taskCountChar,
          charData.month,
          [charData.month_kong, charData.month_task],
          ['#60B0FA', '#BFE0FE'],
          ['监测任务', '监督任务']
        );
      });
    },
    // 初始化筛选框数据
    initBanner() {
      this.bannerYear = new Date().getFullYear() + '';
      this.bannerBarCategory = this.typeList[0].value;
      this.showBanner = false;
    },
    // 获取林木有害生物的详情
    getBannerInfo(year, category) {
      this.showBanner = true;
      this.bannerLoading = true;
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.pest_going_up',
        data: this.qs.stringify({
          year,
          category,
        }),
      }).then((res) => {
        this.bannerLoading = false;
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        // console.log(res.data.data);
        this.bannerData = res.data.data.table;
        let charData = res.data.data.lines[0];
        // let pestLineObj = {};
        // 有害生物个数
        this.bannerCountChar = echarts.init(
          document.getElementById('bannerBarBoxId')
        );
        if (category != '杂草') {
          this.setAddBanner(
            this.bannerCountChar,
            charData.month,
            [
              charData.count,
              charData.new_count,
              charData.cg_name,
              charData.new_cg_name,
            ],
            ['#60B0FA', '#BFE0FE', '#F4A72F', '#FEE0AE'],
            ['有害生物总数', '新记录种数量', '总有害生物种类', '新记录种类型'],
            ['count', 'count', 'type', 'type']
          );
        } else {
          this.setAddBanner(
            this.bannerCountChar,
            charData.month,
            [charData.cg_name, charData.new_cg_name],
            ['#F4A72F', '#FEE0AE'],
            ['总有害生物种类', '新记录种类型']
          );
        }

        // 有害生物种类
        // this.bannerTypeChar = echarts.init(document.getElementById('bannerBarBottomId'));
        // this.setAddBanner(this.bannerTypeChar, charData.month, [charData.cg_name, charData.new_cg_name], ['#F4A72F', '#FEE0AE'], ['总有害生物种类', '新增种类数']);
      });
    },
    setAddBanner(char, xData, yData, colorList, nameList, type) {
      char.clear();
      let xDataNew = [];
      xData.forEach((item) => {
        xDataNew.push(item + '月');
      });
      let legendData = [];
      let series = [];
      let yAxis = [];
      yData.forEach((data, index) => {
        legendData.push({
          name: nameList[index],
          textStyle: {
            color: '#ffffff',
          },
        });
        if(type != undefined) {
          if ((index == 0 || index == 2)) {
            yAxis.push({
              type: 'value',
              name: index == 0 ? '数量' : '种类',
              color: colorList[index],
              position: index == 0 ? 'left' : 'right',
              alignTicks: true,
              offset: 0,
              nameTextStyle: {
                color: '#fff',
              },
              axisLine: {
                show: false, // 不显示 y 轴轴线
              },
              axisLabel: {
                color: '#ffffff', // 设置 y 轴标签字体颜色为白色
              },
              splitLine: {
                lineStyle: {
                  type: 'dotted', // 设置分隔线为点线
                  color: '#ffffff88',
                },
              },
            });
          }
        } else {
          yAxis = [{
            type: 'value',
            name: '个数',
            nameTextStyle: {
              color: '#fff',
            },
            axisLine: {
              show: false, // 不显示 y 轴轴线
            },
            axisLabel: {
              color: '#ffffff', // 设置 y 轴标签字体颜色为白色
            },
            splitLine: {
              lineStyle: {
                type: 'dotted', // 设置分隔线为点线
                color: '#ffffff88',
              },
            },
          }];
        }
        series.push({
          data: data,
          type: 'bar',
          // stack: type ? type[index] : 'ab',
          name: nameList[index],
          yAxisIndex: index < 2 ? 0 : 1,
        });
        if (!type) return;
        // if (index == 0 || index == 2) {
        //   series.push({
        //     data: data,
        //     type: 'line',
        //     smooth: true,
        //     name: nameList[index],
        //     color: colorList[index],
        //     yAxisIndex: index == 0 ? 0 : 1,
        //   });
        // }
      });
      console.log(yAxis, series);
      let optionsPestLine = {
        // 设置全局文本样式
        textStyle: {
          fontSize: 14, // 设置字体大小为14px
        },
        grid: {
          top: '50',
          left: '5%',
          bottom: '2%',
          right: '10%',
          containLabel: true,
        },
        legend: {
          data: legendData,
        },
        tooltip: {
          trigger: 'axis',
        },
        color: colorList,
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 设置 x 轴轴线颜色为白色
            },
          },
          axisLabel: {
            color: '#ffffff', // 设置 x 轴标签字体颜色为白色
          },
          splitLine: {
            show: false, // 不显示 x 轴分隔线
          },
          data: xDataNew,
        },
        yAxis: yAxis,
        series: series,
      }; // 有害生物发生趋势 折线图

      char.setOption(optionsPestLine);
    },
    // 林木有害生物折线图配置
    setLineOption(char, xData, yData, type) {
      char.clear();
      let xDataNew = [];
      xData.forEach((item) => {
        xDataNew.push(item + '月');
      });
      let optionsPestLine = {
        // 设置全局文本样式
        textStyle: {
          fontSize: 14, // 设置字体大小为14px
        },
        grid: {
          left: '0%',
          bottom: '0%',
          right: '0%',
          containLabel: true,
        },
        legend: {
          textStyle: {
            color: '#ffffff',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        color: ['#1890FF', '#F4A72F'],
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 设置 x 轴轴线颜色为白色
            },
          },
          axisLabel: {
            color: '#ffffff', // 设置 x 轴标签字体颜色为白色
          },
          splitLine: {
            show: false, // 不显示 x 轴分隔线
          },
          data: xDataNew,
        },
        yAxis: {
          type: 'value',
          name: '个数',
          nameTextStyle: {
            color: '#fff',
          },
          axisLine: {
            show: false, // 不显示 y 轴轴线
          },
          axisLabel: {
            color: '#ffffff', // 设置 y 轴标签字体颜色为白色
          },
          splitLine: {
            lineStyle: {
              type: 'dotted', // 设置分隔线为点线
              color: '#ffffff88',
            },
          },
        },
        series: [
          {
            data: yData[0],
            type: 'line',
            smooth: true,
            name: '有害生物数量',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#1890FF',
                },
                {
                  offset: 1,
                  color: '#1890FF33',
                },
              ]),
            },
          },
          {
            data: yData[1],
            type: 'line',
            smooth: true,
            name: '有害生物类型',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#F4A72F',
                },
                {
                  offset: 1,
                  color: '#FEE0AE33',
                },
              ]),
            },
          },
        ],
      }; // 有害生物发生趋势 折线图
      if (type == '杂草') {
        optionsPestLine.series.shift();
      }
      char.setOption(optionsPestLine);
    },
    // 切换有害生物下拉框
    changeCate(type) {
      this.setLineOption(
        this.pestChart,
        this.pestLineObj[type].month,
        [this.pestLineObj[type].count, this.pestLineObj[type].category_count],
        type
      );
    },
    // 获取有害生物列表折线图
    getPestLineInfo() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.pest_going',
        data: this.qs.stringify({}),
      }).then((res) => {
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        let pestLineObj = {};
        res.data.data.forEach((pest) => {
          pestLineObj[pest.category] = pest.data;
        });
        this.$set(this, 'pestLineObj', pestLineObj);
        // console.log(this.pestLineObj);
        this.pestChart = echarts.init(document.getElementById('chartDetailId'));
        this.setLineOption(
          this.pestChart,
          pestLineObj[this.rightLineCategory].month,
          [
            pestLineObj[this.rightLineCategory].count,
            pestLineObj[this.rightLineCategory].category_count,
          ]
        );
      });
    },
    // 点击某类设备，打点/取消打点
    setMarker(list, type) {
      let icon = this[`marker${type}`];
      // 当前是打点
      if (this.markerObj[type].length == 0) {
        // 创建一个自定义图标对象
        list.forEach((item) => {
          var customIcon = new AMap.Icon({
            size: new AMap.Size(40, 53), // 设置图标的大小，单位：像素
            image: icon, // 设置图标的URL
          });
          var marker = new AMap.Marker({
            position: item.lng_lat, // 设置标记点的位置
            icon: customIcon, // 设置自定义图标的URL
            offset: new AMap.Pixel(-20, -53), // 设置偏移量，向左上方偏移10个像素
          });
          // 将标记点添加到地图上
          marker.setMap(this.map);
          marker.on('click', (e) => {
            this.groupDialog = true;
            this.checkType = 'device';
            this.deviceDialogInfo = item;
          });
          this.markerObj[type].push(marker);
        });
      } else {
        // 当前是取消
        this.markerObj[type].forEach((marker) => {
          marker.setMap(null);
        });
        this.markerObj[type] = [];
      }
      console.log(this.markerObj);
    },
    // 获取组织水波纹信息
    getGroupDeviceFun() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.device_info',
        data: this.qs.stringify({}),
      }).then((res) => {
        this.loading = false;
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        // console.log(res.data.data);
        // this.deviceInfo = res.data.data.devices_info;
        this.clearOverlayByType('circle');
        this.clearOverlayByType('circleMarker');
        // 先把所有定时器清空
        this.clerrTimmerFun('circle');
        this.overlayList = [];
        res.data.data.forEach((group) => {
          if (group.lng_lat.length == 0) return;
          this.waterAmiFun(group);
        });
        // this.map.setFitView(this.overlayList)
      });
    },
    // 根据组织ID 获取组织设备告警信息
    getInfoByGroupId(group) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=data_report.screen.group_pest_detail',
        data: this.qs.stringify({ group_id: group.org_id }),
      }).then((res) => {
        if (!res.data.data) {
          this.$message.error('网络连接出错或服务报错，请刷新页面重试');
          return;
        }
        this.groupInfo = Object.assign(group, res.data.data);
        this.groupDialog = true;
        this.checkType = 'circle';
        console.log(this.groupInfo);
      });
    },
    // 画水波纹
    waterAmiFun(group) {
      let { colorObject } = this;
      let _this = this;
      // 绘制圆
      var circle = new AMap.Circle({
        center: group.lng_lat, // 圆心位置
        radius: 2500, // 半径，单位：米
        strokeColor: '#FFFFFF', // 线颜色
        strokeOpacity: 0.8, // 线透明度
        strokeWeight: 1, // 线宽
        fillColor: '#fff', // 填充颜色
        fillOpacity: 0.2, // 填充透明度
        zIndex: 100, // 层级
        extData: group,
        cursor: 'pointer',
      });
      this.map.add(circle);
      // 水波纹点击查看组织详情
      circle.on('click', (e) => {
        let data = e.target._opts.extData;
        this.getInfoByGroupId(data);
        // console.log(data, '当前点击的圆圈是');
      });
      this.overlayList.push(circle);
      // 添加水波纹效果的圆点
      var rippleCircleMaker = new AMap.CircleMarker({
        center: group.lng_lat, // 圆心位置
        radius: 5, // 初始半径，单位：米
        strokeColor: '#FFf', // 线颜色
        strokeOpacity: 1, // 线透明度
        strokeWeight: 1, // 线宽
        fillColor: colorObject[group.alarm_level], // 填充颜色
        fillOpacity: 0.9, // 填充透明度
        zIndex: 102, // 层级
      });
      this.map.add(rippleCircleMaker);
      if (group.alarm_level == 0) return; //等级为0时 不需要水波纹
      // 添加水波纹效果的圆点
      var rippleCircle = new AMap.Circle({
        center: group.lng_lat, // 圆心位置
        radius: 500, // 初始半径，单位：米
        strokeColor: colorObject[group.alarm_level], // 线颜色
        strokeOpacity: 0, // 线透明度
        strokeWeight: 2, // 线宽
        fillColor: colorObject[group.alarm_level], // 填充颜色
        fillOpacity: 0.8, // 填充透明度
        zIndex: 101, // 层级
        extData: group,
        cursor: 'pointer',
      });
      // 水波纹点击查看组织详情
      rippleCircle.on('click', (e) => {
        let data = e.target._opts.extData;
        // console.log(data, '当前点击的水波纹是');
        this.getInfoByGroupId(data);
      });
      this.map.add(rippleCircle);

      // 定义水波纹动画
      var animation;

      // 添加水波纹动画效果
      function addRippleAnimation() {
        var startRadius = 500;
        var startOpacity = 0.8;
        var endRadius = 2700;
        var step = 200;
        var opacityStep = -0.06;
        var currentRadius = startRadius;
        var currentOpacity = startOpacity;
        var increasing = true;

        animation = setInterval(function () {
          if (increasing) {
            if (currentRadius < endRadius) {
              rippleCircle.setRadius(currentRadius); // 设置水波纹半径
              rippleCircle.setOptions({
                fillOpacity: currentOpacity > 0 ? currentOpacity : 0,
              });
              currentRadius += step; // 每次半径增加 step
              currentOpacity += opacityStep; // 每次透明度增加opacityStep
            } else {
              clearInterval(animation); // 清除动画
              currentRadius = startRadius; // 重置水波纹半径为初始值
              currentOpacity = startOpacity;
              addRippleAnimation(); // 重新启动动画
            }
          }
        }, 100); // 设置动画间隔时间，单位：毫秒
        _this.timmerList.push(animation); // 记录定时器
        // console.log(_this.timmerList, '_this.timmerList');
      }

      // 启动水波纹动画
      addRippleAnimation();
    },
    initMap() {
      let _this = this;
      let map = new AMap.Map(document.getElementById('newHome'), {
        center: [114.2, 22.76],
        resizeEnable: true,
        // lang: 'en',
        zoom: 10.5,
        mapStyle: 'amap://styles/fff0c1ac5471818a21cf82c0931f60c0',
        // mapStyle: "amap://styles/dark",
        // features: ['bg', 'road'],
      });
      this.map = map;
      this.map.on('complete', function () {
        _this.getGroupDeviceFun();
        let getGroupTimmer = setInterval(_this.getGroupDeviceFun, 60000);
        _this.getFunTimmer.push(getGroupTimmer);
        import(`./geo.json`).then((res) => {
          addGeo(res, map);
        });
      });
      function addGeo(Json, map) {
        let cityList = [];
        var geojson = new AMap.GeoJSON({
          geoJSON: Json,
          // 还可以自定义getMarker和getPolyline
          getPolygon: function (geojson, lnglats) {
            // 计算面积
            // var area = AMap.GeometryUtil.ringArea(lnglats[0])
            let PolygonObj = new AMap.Polygon({
              path: lnglats,
              fillOpacity: 0.5, // 面积越大透明度越高
              strokeWeight: 2,
              strokeColor: '#fff',
              fillColor: '#64AECE',
              extData: geojson,
              zIndex: 90,
            });
            cityList.push(PolygonObj);
            return PolygonObj;
          },
        });
        map.add(geojson);
        // map.setFitView();
      }
    },
  },
  components: {
    Title,
  },
};
</script>
<style lang="less">
.green {
  width: 250px;
  background: #3acd9c !important;
}

.red {
  width: 250px;
  background: #ff5951 !important;
}

.origin {
  width: 250px;
  background: #f4a72f !important;
}

.blue {
  width: 250px;
  background: #1890ff !important;
}

.yellow {
  width: 250px;
  background: #faff0a !important;
}
</style>
<style scoped lang="less">
.box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;

  /deep/ .el-select,
  /deep/ .el-date-editor {
    width: 8.8vw;
    font-size: 14px;

    .el-input {
      width: 100%;
      font-size: 16px;
    }

    .el-input__inner {
      background: #ffffff1a;
      color: #fff;
      border: none;
    }
  }

  .mapBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }

  .smallChar {
    position: absolute;
    width: 21.8vw;
    height: 31.3vh;
    z-index: 20;
    left: 6.2vw;
    top: 13.2vh;
    padding: 1%;
    box-sizing: border-box;
    background: url('../../../assets/images/newHome/smallChar.png') center
      center no-repeat;
    background-size: 100% 100%;

    .charBox {
      position: relative;
      overflow: hidden;
      width: 100%;

      .charTitle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .smallTitle {
          width: 50%;
        }

        .detailBanner {
          width: 2.8rem;
          height: 2.8rem;
          background: url('./../.././../assets/images/newHome/detailBtn.png')
            center center no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

          &:hover {
            background: url('./../.././../assets/images/newHome/detailBtnHover.png')
              center center no-repeat;
            background-size: 100% 100%;
          }
        }
      }

      .charContent {
        margin-top: 1rem;

        .chartDetail {
          width: 100%;
          height: 19.8vh;
        }

        .charList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          font-size: 1.4rem;
          height: 3.8vh;
          border-bottom: 1px solid #ffffff4d;
          font-weight: 400;

          .leftInfo {
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
              width: 2rem;
              height: 2rem;
              margin-right: 0.8rem;
            }

            span {
              cursor: pointer;
              color: yellow;
              margin-right: 0.8rem;
            }

            .markerIcon {
              cursor: pointer;
            }
          }
        }

        .el-carousel {
          height: 22.8vh;
          color: #fff;
          font-size: 1.4rem;

          /deep/ .el-carousel__container {
            height: 100%;
            padding: 0 36px;
            box-sizing: border-box;
          }

          .small {
            line-height: 2rem;
            text-align: center;
          }

          .infoTitle {
            font-size: 2rem;
            // writing-mode: vertical-rl;
            color: yellow;
            margin-bottom: 1rem;
            text-align: center;
          }
          .charInfo {
            width: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: calc(100% - 5rem);


            .detailInfo {
              width: 40%;
              height: 12vh;
              box-sizing: border-box;
              text-align: center;
              background: url(../../../assets/images/newHome/all.png) bottom center
                no-repeat;
              background-size: cover;

              :first-child {
                margin-top: 1rem;
              }

              :last-child {
                color: #fff;
                font-size: 3rem;
                font-weight: 400;
                text-shadow: 0px 0px 0.4rem #fff;
              }
            }
          }
        }
      }
    }
  }

  .bottomBox {
    top: 46.5vh;
  }

  .dialog {
    position: absolute;
    top: 12.72vh;
    /* 初始位置在视图上方外面 */
    left: 31.1vw;
    z-index: 200;
    width: 37.8vw;
    height: 21.2vh;
    background: url('../../../assets/images/newHome/centerTopBg.png') center
      center no-repeat;
    background-size: 100% 100%;

    &_content {
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-top: 3.7vh;

      .contentInfo {
        position: relative;
        width: 90%;
        height: 100%;
        margin: 0 auto;

        .title {
          font-weight: 600;
          color: #ffffff;
          font-size: 1.8rem;
        }

        .address {
          color: #ffffff80;
          font-size: 1.2rem;
          margin-top: 0.8%;
        }
        .viewDetailBtn {
          position: absolute;
          right: 2rem;
          bottom: 2rem;
        }

        .infoDesc {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 1%;

          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            width: 24%;
            height: 9.5vh;
            background: linear-gradient(180deg, #163e8c1f 0%, #9daaccba 100%);

            .num {
              color: #ffffffe6;
              font-size: 2rem;
              font-weight: 600;
            }

            .warningText {
              display: inline-block;
              width: 100%;
              font-size: 2rem;
              font-weight: 600;
              text-align: center;
            }

            .name {
              color: #ffffff99;
              font-size: 1.4rem;
              font-weight: 400;
              margin-top: 1%;
            }
          }
        }

        .deviceInfo {
          display: flex;
          align-items: center;
          height: 3.7vh;
          width: 21vw;
          color: #fff;
          font-size: 1.4rem;
          border-bottom: 1px solid #ffffff4d;

          .leftInfo {
            display: flex;
            width: 50%;
            height: 100%;
            align-items: center;

            img {
              width: 2rem;
              height: 2rem;
              margin-right: 1rem;
            }
          }
        }

        .warningInfo {
          display: flex;
          justify-content: space-between;
          color: #ffffff;
          margin-top: 1.85vh;
          height: 11.39vh;
          font-size: 1.4rem;

          .infoContent {
            width: 18.38vw;
            color: yellow;

            .marginBtn {
              margin-top: 2.3vh;
            }
          }

          .infoDesc {
            width: 13.5vw;

            div {
              width: 49%;
            }
          }
        }
      }
    }

    &_close {
      position: absolute;
      right: 1.85vw;
      top: 3vh;
      z-index: 201;
      width: 4.8rem;
      height: 4.8rem;
      cursor: pointer;
      background: url('../../../assets/images/newHome/close.png') center center
        no-repeat;
      background-size: 100% 100%;

      &:hover {
        background: url('../../../assets/images/newHome/closeHover.png') center
          center no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .bigBanner {
    position: absolute;
    width: 87.3vw;
    height: 78vh;
    left: 6vw;
    background: url('../../../assets/images/newHome/bigBanner.png') center
      center no-repeat;
    background-size: 100% 100%;

    .contentInfo {
      width: 100%;
      box-sizing: border-box;
      padding: 0 3.125vw 9.4vh 3.125vw;
      overflow: hidden;

      .searchBox {
        display: flex;
        align-items: center;
        margin: 1rem 0;

        .el-select {
          margin-left: 1rem;
        }
      }

      .leftContent {
        width: 51vw;
        float: left;

        .bannerBarBox {
          width: 100%;
          border-radius: 2px;
          // height: 28.38vh;
          height: 59.16vh;
          background: #ffffff1a;
        }

        .bottomBar {
          // margin-top: 2.4vh;
        }
      }

      .rightContent {
        float: left;
        width: 27.76vw;
        height: 59.16vh;
        margin-left: 1.77vw;
        border-radius: 2px;
        background: #ffffff1a;
        box-sizing: border-box;
        padding-top: 1vh;

        .table {
          height: 52.5vh;
          overflow: auto;
          width: 95%;
          margin: 0 auto;

          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
            font-size: 1.4rem;

            &:nth-child(even) {
              background: #ffffff14;
              /* 设置奇数列的背景颜色 */
            }

            div {
              width: 25%;
              box-sizing: border-box;
              padding: 1vh;
              text-align: center;
            }

            .orangeText {
              color: #f4a72f;
            }
          }

          .header {
            color: #33cccc;
          }
        }

        .info {
          float: right;
          display: flex;
          font-size: 1.6rem;
          padding-right: 2.5%;

          div {
            color: #ffffff;
            margin-left: 1rem;

            span {
              color: #fff;
              font-size: 2.5rem;
            }
          }
        }
      }
    }
  }

  .tipsBox {
    position: absolute;
    left: 6.2vw;
    bottom: 8.9vh;
    z-index: 201;
    display: flex;

    div {
      width: 9vw;
      height: 12vh;
      background: url('../../../assets/images/newHome/warningTips.png') bottom
        center no-repeat;
      background-size: 100% 100%;
      text-align: center;
      box-sizing: border-box;
      padding-top: 3vh;

      span {
        display: inline-block;
        width: 100%;
        color: #ffffffbf;
        font-size: 1.4rem;
      }

      :first-child {
        color: #ffffffbf;
        font-size: 4rem;
        text-shadow: 0 0 0.4rem #fff;
      }
    }
  }

  .lineBox,
  .rightTips {
    right: 6.2vw;
    left: auto;
  }

  .warningBox {
    position: absolute;
    top: 7.4vh;
    left: 50%;
    z-index: 190;
    transform: translateX(-50%);
    width: 19.8vw;
    height: 3.7vh;
    cursor: pointer;
    color: yellow;
    font-size: 1.4rem;
    white-space: nowrap;
    /* 禁止文本换行 */
    overflow: hidden;
    /* 隐藏溢出部分 */
    background: url('../../../assets/images/newHome/warningDefault.png') bottom
      center no-repeat;
    background-size: 100% 100%;

    &:hover {
      background: url('../../../assets/images/newHome/warningHover.png') bottom
        center no-repeat;
      background-size: 100% 100%;
    }

    .content {
      position: relative;
      width: 80%;
      margin: 0 auto;
      overflow: hidden;
    }

    .item {
      display: inline-block;
      /* 内联显示项目 */
      white-space: nowrap;
      /* 禁止项目换行 */
      animation: scroll 20s linear infinite;
      /* 使用名为 "scroll" 的动画，持续 10 秒，线性运动，无限循环 */
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
        /* 从初始位置开始 */
      }

      100% {
        transform: translateX(-100%);
        /* 向左平移整个容器宽度 */
      }
    }
  }
}
</style>