<!-- 害虫分析 -->
<template>
  <div style="cursor: default">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title" style="cursor: pointer">
        <p @click="goBackPage" style="cursor: pointer">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </p>
        <p>虫情分析</p>
      </div>
      <p class="baselistbox_top_line"></p>
      <div class="baselistbox_top_caozuo">
        <div class="analytitlebox">
          <div>
            <el-button
              :class="amend == 0 ? '' : 'nobackgound'"
              type="success"
              size="small"
              @click="tabs(0)"
              >机器识别</el-button
            >
            <el-button
              :class="amend == 1 ? '' : 'nobackgound'"
              type="success"
              size="small"
              @click="tabs(1)"
              >人工识别</el-button
            >
          </div>
          <div class="analytitlebox_item">
            <el-select
              v-model="yservalue"
              placeholder="请选择"
              size="small"
              @change="yearchange"
            >
              <el-option
                v-for="item in yesroptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-slider
              v-model="slidervalue"
              range
              :max="slidermax"
              :marks="marks"
              :format-tooltip="formatTooltip"
              @change="sliderchange"
            ></el-slider>
          </div>
        </div>
      </div>
    </div>
    <div class="analyinfo1">
      <div class="analyinfo1_text">
        <el-card class="box-card" v-loading="timeloading">
          <p>虫情走势信息</p>
          <el-select
            v-model="wormvalue"
            placeholder="请选择"
            size="small"
            @change="wormchange"
          >
            <el-option
              v-for="item in wormlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="analyinfo1_text_item">
            <div class="text_item">
              <img src="../../../static/images/analyse/state.png" alt="" />
              <div>
                <p>始见期（See times）</p>
                <p>{{ worminfo.startTime }}</p>
              </div>
            </div>
            <div class="text_item">
              <img src="../../../static/images/analyse/high.png" alt="" />
              <div>
                <p>高峰期（Fastigium）</p>
                <p>{{ worminfo.highTime }}/{{ worminfo.highNum }}头</p>
              </div>
            </div>
            <div class="text_item">
              <img src="../../../static/images/analyse/end.png" alt="" />
              <div>
                <p>终见期（End in period）</p>
                <p>{{ worminfo.endTime }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="analyinfo1_pie">
        <el-card class="box-card" v-loading="dataloading">
          <p>害虫占比</p>
          <div id="wormpie"></div>
          <div class="tishi" v-show="pietf">暂无数据</div>
        </el-card>
      </div>
    </div>
    <div class="analyinfo2">
      <div class="analyinfo2_line">
        <el-card class="box-card" v-loading="dataloading">
          <p>虫情趋势</p>
          <highcharts :options="options" class="highcharts"></highcharts>
          <div class="tishi" v-show="hightf">暂无数据</div>
        </el-card>
      </div>
      <div class="analyinfo2_zhu">
        <el-card class="box-card" v-loading="dataloading">
          <p>害虫排名</p>
          <div class="wromhuanbox">
            <div id="wromhuan"></div>
          </div>
          <div class="tishi" v-show="zhutf">暂无数据</div>
        </el-card>
      </div>
    </div>
    <div class="acttable">
      <div :class="acttableindex == 1 ? 'act' : ''" @click="acttab(1)">
        图像溯源
      </div>
      <div :class="acttableindex == 2 ? 'act' : ''" @click="acttab(2)">
        虫害基础数据
      </div>
    </div>
    <div class="tablebox">
      <div class="tableoperationbox">
        <el-input
          v-model="tableinput"
          placeholder="请输入害虫名称"
          size="mini"
          @input="inputsearch"
        ></el-input>
        <el-button type="success" size="mini" @click="derive()">导出</el-button>
      </div>
      <el-table
        :data="Imagesourcelist"
        border
        style="width: 100%"
        v-show="acttableindex == 1"
      >
        <el-table-column prop="deviceId" label="设备ID"> </el-table-column>
        <el-table-column prop="deviceName" label="设备名称" width="150">
        </el-table-column>
        <el-table-column prop="pestName" label="害虫名称">
          <template slot-scope="scope">
            <p :title="scope.row.pestName" class="cell">
              {{ scope.row.pestName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="addtime" label="上报时间">
          <template slot-scope="scope">
            {{ (scope.row.addtime * 1000) | formatTime }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="设备位置">
          <template slot-scope="scope">
            <p :title="scope.row.location" class="cell">
              {{ scope.row.location }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="index" label="图像">
          <template slot-scope="scope">
            <p @click="opendia(scope.row)" style="color: #14a478;cursor: pointer;">查看</p>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="worminfotable"
        border
        style="width: 100%"
        v-show="acttableindex == 2"
      >
        <el-table-column prop="pest_name" label="害虫名称"> </el-table-column>
        <el-table-column prop="pest_num" label="害虫数量"> </el-table-column>
        <el-table-column prop="addtime" label="上报时间">
          <template slot-scope="scope">
            {{ (scope.row.addtime * 1000) | formatTime }}
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="total"
        @current-change="currentchange"
      >
      </el-pagination> -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page_size"
          @size-change="handleSizeChange"
          @current-change="currentchange"
          :current-size.sync="page"
          :key="pagekey"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="图像溯源" :visible.sync="dialogVisible" width="960px">
      <div class="diaimgbox">
        <img :src="img_url" alt="" v-viewer />
        <img :src="indentify_photo" alt="" v-viewer />
      </div>
      <div class="wormlistbox" v-if="!checkObj(tabworm)">
        <p v-for="(item, key) in tabworm" :key="key">
          {{ key }} -- {{ item }}头
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import echarts from "echarts";
import { Debounce } from "../../util/anitthro";
import HighCharts from "highcharts";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      amend: 0, //默认机器识别
      yesroptions: [],
      yservalue: "",
      slidervalue: [4, 8],
      slidermax: 365,
      marks: {},
      identify_model: "", //模型
      d_id: "", //设备d_id
      wormvalue: "",
      wormlist: [], //害虫列表
      worminfolist: [], //害虫信息列表
      worminfo: {
        //害虫信息
        endTime: "",
        highNum: "",
        highTime: "",
        startTime: "",
      },
      start_time: "", //开始时间
      end_time: "", //结束时间
      ChartData: [], //害虫折线图数据
      pietf: false,
      hightf: false,
      zhutf: false,
      acttableindex: 1, //表格切换
      tableinput: "", //搜索项
      Imagesourcelist: [],
      worminfotable: [],
      page: 1,
      total: 10,
      page_size: 10,
      pagekey:1,
      currentPage: 1,
      dialogVisible: false,
      img_url: "",
      indentify_photo: "",
      tabworm: {},
      //选择设备
      basedata: [],
      basedialogVisible: false,
      checkList: [],
      device_id: "",
      d_idlist: [],
      dataloading: false,
      timeloading: false,
      d_idtf: true,
      length: 6,
      pageloading:false
    };
  },
  //监听属性 类似于data概念
  computed: {
    options() {
      return {
        chart: {
          zoomType: "x",
          // zoomType: 'y'
        },
        title: {
          text: "",
          align: "left",
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          crosshair: true, //十字基准线
          type: "datetime",
          dateTimeLabelFormats: {
            //根据时间间距X轴自动显示哪种格式
            millisecond: "%H:%M:%S",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
        },
        yAxis: {
          title: {
            text: "",
          },
        },
        legend: {
          // layout: 'vertical',
          align: "center",
          verticalAlign: "top",
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false,
            },
            pointStart: 2010,
          },
        },
        series: this.ChartData,
        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
        credits: {
          //去掉默认的highcharts.com
          enabled: false,
        },
        tooltip: {
          // crosshairs: true,
          shared: true, //折线共享
          headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      };
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    tabs(type) {
      if (type == 0) {
        this.amend = 0;
        this.getwormtime();
        this.getallwormlist();
        this.getImagesource();
        this.getworminfotable();
      } else if (type == 1) {
        this.amend = 1;
        this.getwormtime();
        this.getallwormlist();
        this.getImagesource();
        this.getworminfotable();
      }
    },
    goBackPage() {
      this.$router.go(-1);
    },
    refreshData() {
      HighCharts.setOptions({
        lang: {
          resetZoom: "刷新",
          resetZoomTitle: "重置缩放比例",
        },
      });
    },
    //计算闰年和平年
    leapyear(year) {
      var Month = new Date().getMonth();
      var date = new Date().getDate();
      var time = new Date(new Date().setMonth(Month - 1));
      var oldMonth = time.getMonth();
      var olddate = time.getDate();
      this.slidermax = "";
      if ((year % 400 == 0 || year % 4 == 0) && year % 100 != 0) {
        this.slidermax = 366;
      } else {
        this.slidermax = 365;
      }
      if (this.slidermax == 366) {
        this.marks = {
          31: "1月31日",
          60: "2月29日",
          91: "3月31日",
          121: "4月30日",
          152: "5月31日",
          182: "6月30日",
          213: "7月31日",
          244: "8月31日",
          274: "9月30日",
          305: "10月31日",
          335: "11月30日",
          366: "12月31日",
        };
      } else if (this.slidermax == 365) {
        this.marks = {
          31: "1月31日",
          59: "2月28日",
          90: "3月31日",
          120: "4月30日",
          151: "5月31日",
          181: "6月30日",
          212: "7月31日",
          243: "8月31日",
          273: "9月30日",
          304: "10月31日",
          334: "11月30日",
          365: "12月31日",
        };
      }
      this.slidervalue = [
        this.getsliserindex(oldMonth, olddate),
        this.getsliserindex(Month, date),
      ];
      var state = this.formatTooltip(this.slidervalue[0]);
      var end = this.formatTooltip(this.slidervalue[1]);
      state = state.replace("月", "-");
      state = state.replace("日", "");
      state = this.yservalue + "-" + state + " 00:00:00";
      end = end.replace("月", "-");
      end = end.replace("日", "");
      end = this.yservalue + "-" + end + " 23:59:59";
      this.start_time = +new Date(state) / 1000;
      this.end_time = +new Date(end) / 1000;

      console.log(this.start_time, this.end_time);
      this.getallwormlist();
      this.search();
    },
    //格式化滑块标签
    formatTooltip(val) {
      for (var key in this.marks) {
        if (val < key) {
          // console.log(key);
          var index = key - val;
          var monindex = this.marks[key].indexOf("月");
          var dataindex = this.marks[key].indexOf("日");
          var data = this.marks[key].slice(monindex + 1, dataindex);
          var str = this.marks[key].slice(0, monindex + 1);
          return str + (data - index + 1) + "日";
        } else if (val == 365 || val == 366) {
          return "12月31日";
        }
      }
    },
    getsliserindex(month, date) {
      // console.log(month);
      var arr = [];
      for (var key in this.marks) {
        arr.push(key);
      }
      return Number(arr[month - 1]) + Number(date) - 1;
    },
    // 年份发生改变
    yearchange(e) {
      console.log(e);
      this.leapyear(e);
      this.getwormtime();
    },
    sliderchange(e) {
      this.dataloading = true;
      this.total = 10;
      this.currentPage = 1;
      this.sliderchange2(e);
    },
    //滑块更改后地值
    sliderchange2: Debounce(function (e) {
      var state = this.formatTooltip(e[0]);
      var end = this.formatTooltip(e[1]);
      state = state.replace("月", "-");
      state = state.replace("日", "");
      state = this.yservalue + "-" + state + " 00:00:00";
      end = end.replace("月", "-");
      end = end.replace("日", "");
      end = this.yservalue + "-" + end + " 23:59:59";
      this.start_time = +new Date(state) / 1000;
      this.end_time = +new Date(end) / 1000;
      console.log(this.start_time, this.end_time);
      this.getallwormlist();
      this.search();
    }, 2000),
    //设备环形图数据
    setpie(data) {
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          right: "0%",
          orient: "vertical",
          type: "scroll",
          formatter: function (params) {
            // console.log(params.length);
            if (!params) {
              return "";
            }
            if (params.length > 7) {
              params = params.slice(0, 5) + "...";
              return params;
            } else {
              return params;
            }
          },
        },
        series: [
          {
            name: "害虫占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            center: ["40%", "50%"], // 这个属性调整图像的位置！！！！！
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            tooltip: {
              trigger: "item",
              formatter: "{b}<br/>数量：{c}头<br/>占比：{d}%",
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      echarts.init(document.getElementById("wormpie")).setOption(option);
    },
    sethuan(pest_total) {
      var data = [];
      var titlename = [];
      var valdata = [];
      for (var key in pest_total) {
        valdata.push(pest_total[key]);
        titlename.push(key);
      }
      var sum = 0;
      for (let i = 0; i < valdata.length; i++) {
        sum += valdata[i];
      }
      for (let i = 0; i < valdata.length; i++) {
        data.push(Math.ceil((valdata[i] / sum) * 100));
      }

      var data = data.reverse();
      var titlename = titlename.reverse();
      var valdata = valdata.reverse();

      console.log(data);

      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      var option = {
        title: {
          show: false,
        },
        backgroundColor: "#fff",
        xAxis: {
          show: false,
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#000",
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#000",
                  padding: 5,
                  align: "center",
                  width: 15,
                  height: 15,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#000",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "害虫排名",
            type: "bar",
            yAxisIndex: 1,
            data: data,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: false,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
        ],
      };
      var boxid = document.getElementById("wromhuan");
      if (titlename.length < 16) {
        boxid.style.height = "100%";
      } else {
        boxid.style.height = titlename.length * 17 + "px";
      }
      echarts.init(document.getElementById("wromhuan")).setOption(option);
    },
    //获取害虫列表
    getwormtime() {
      this.timeloading = true;
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.worm_lamp.pest_raise_info",
        data: this.qs.stringify({
          d_ids: this.d_id,
          identify_model: this.identify_model,
          year: this.yservalue,
          amend: this.amend,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          if (res.data.data) {
            this.timeloading = false;
            console.log(res.data.data);
            this.worminfo = {
              endTime: "",
              highNum: "",
              highTime: "",
              startTime: "",
            };
            var pest_list = res.data.data.pest_list;
            this.worminfolist = res.data.data.pest_info;
            this.wormlist = [];
            for (var key in pest_list) {
              var obj = {
                value: pest_list[key],
                label: pest_list[key],
              };
              this.wormlist.push(obj);
            }
            if (this.wormlist[0]) {
              this.wormvalue = this.wormlist[0].label;
            } else {
              this.wormvalue = "";
            }
            for (var key in this.worminfolist) {
              if (this.wormvalue == key) {
                this.worminfo = this.worminfolist[key];
              }
            }
          }
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error(res.data.message);
          }
        }
      });
    },
    //害虫选择器
    wormchange(e) {
      for (var key in this.worminfolist) {
        if (this.wormvalue == key) {
          this.worminfo = this.worminfolist[key];
        }
      }
    },
    getallwormlist() {
      this.dataloading = true;
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.worm_lamp.pest_statistics_char_new",
        data: this.qs.stringify({
          d_ids: this.d_id,
          identify_model: this.identify_model,
          start_time: this.start_time,
          end_time: this.end_time,
          amend: this.amend,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          if (res.data.data) {
            this.dataloading = false;
            console.log(res.data.data);
            var char_data = res.data.data.char_data;
            var pest_total = res.data.data.pest_total;
            this.ChartData = [];
            if (res.data.data.at_ah_info) {
              var atah = res.data.data.at_ah_info;
              if (atah.length != 0) {
                var arr = [];
                var arr2 = [];
                for (var i = 0; i < atah.length; i++) {
                  arr.push([
                    atah[i].addtime * 1000 + 8 * 60 * 60 * 1000,
                    atah[i].at,
                  ]);
                  arr2.push([
                    atah[i].addtime * 1000 + 8 * 60 * 60 * 1000,
                    atah[i].ah,
                  ]);
                }
                this.ChartData = [
                  {
                    name: "温度",
                    data: arr,
                  },
                  {
                    name: "湿度",
                    data: arr2,
                  },
                ];
              }
            }

            for (var key in char_data) {
              var obj = {
                name: key,
                data: [],
              };
              var arr = [];
              for (var i = 0; i < char_data[key].length; i++) {
                arr.push([
                  char_data[key][i].addtime * 1000 + 8 * 60 * 60 * 1000,
                  char_data[key][i].sum,
                ]);
              }
              obj.data = arr;
              this.ChartData.push(obj);
            }
            for (var i = 0; i < this.ChartData.length; i++) {
              if (i == 2 || i == 3 || i == 4 || i == 5 || i == 6) {
                this.ChartData[i]["visible"] = true;
              } else {
                this.ChartData[i]["visible"] = false;
              }
            }
            var data = [];
            var length = 0;
            for (var key in pest_total) {
              length++;
              var obj = {
                name: key,
                value: pest_total[key],
              };
              data.push(obj);
            }
            this.length = length;
            console.log(length);
            if (this.ChartData.length == 0) {
              this.hightf = true;
            } else {
              this.hightf = false;
            }
            if (data.length == 0) {
              this.pietf = true;
            } else {
              this.pietf = false;
            }
            this.zhutf = this.checkObj(pest_total);

            this.setpie(data);
            this.sethuan(pest_total);
          }
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error(res.data.message);
          }
        }
      });
    },
    //表格切换
    acttab(e) {
      this.acttableindex = e;
      this.search();
    },
    inputsearch: Debounce(function (e) {
      this.search();
    }, 2000),
    search() {
      this.page = 1;
      this.total = 10;
      this.pagekey = Math.random()*10+1;
      this.currentPage = 1;
      if (this.acttableindex == 1) {
        this.getImagesource();
      } else if (this.acttableindex == 2) {
        this.getworminfotable();
      }
    },
    //图像溯源
    getImagesource() {
      this.pageloading = false
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.worm_lamp.pest_image_source",
        data: this.qs.stringify({
          d_ids: this.d_id,
          identify_model: this.identify_model,
          pest_name: this.tableinput,
          start_time: this.start_time,
          end_time: this.end_time,
          page: this.page,
          amend: this.amend,
          page_size: this.page_size,
        }),
      }).then((res) => {
        this.pageloading = true
        if (res.data.message == "") {
          if (res.data.data) {
            console.log(res.data.data.pest_image_data);
            this.Imagesourcelist = res.data.data.pest_image_data;
            this.total = res.data.data.total_count;
          }
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error(res.data.message);
          }
        }
      });
    },
    //打开弹框
    opendia(data) {
      this.dialogVisible = true;
      this.img_url = data.img_url;
      this.indentify_photo = data.indentify_photo;
      this.tabworm = data.pest_dict;
      console.log(this.tabworm);
    },
    //图像溯源
    getworminfotable() {
      this.pageloading = false
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.worm_lamp.pest_base_data",
        data: this.qs.stringify({
          d_ids: this.d_id,
          identify_model: this.identify_model,
          pest_name: this.tableinput,
          start_time: this.start_time,
          end_time: this.end_time,
          page: this.page,
          amend: this.amend,
          page_size: this.page_size,
        }),
      }).then((res) => {
        this.pageloading = true
        if (res.data.message == "") {
          if (res.data.data) {
            console.log(res.data.data.pest_image_data);
            this.worminfotable = res.data.data.pest_image_data;
            this.total = res.data.data.total_count;
          }
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error(res.data.message);
          }
        }
      });
    },
    currentchange(e) {
      this.page = e;
      if (this.acttableindex == 1) {
        this.getImagesource();
      } else if (this.acttableindex == 2) {
        this.getworminfotable();
      }
    },
    handleSizeChange(e) {
      this.page = 1;
      this.pagekey = Math.random()*10+1;
      this.page_size = e;
      if (this.acttableindex == 1) {
        this.getImagesource();
      } else if (this.acttableindex == 2) {
        this.getworminfotable();
      }
    },
    derive() {
      var myuid = sessionStorage.getItem("myuid");
      if (this.acttableindex == 1) {
        window.location.href =
          this.$http+
          // "http://192.168.1.23:8000" +
          "/api/pest_image_source_export?d_ids=" +
          this.d_id +
          "&filename=害虫图像溯源" +
          "&identify_model=" +
          this.identify_model +
          "&start_time=" +
          this.start_time +
          "&end_time=" +
          this.end_time +
          "&uid=" +
          myuid +
          "&amend=" +
          this.amend;
      } else if (this.acttableindex == 2) {
        window.location.href =
          this.$http+
          // "http://192.168.1.23:8000" +
          "/api/pest_base_data_export?d_ids=" +
          this.d_id +
          "&filename=害虫基础数据" +
          "&identify_model=" +
          this.identify_model +
          "&start_time=" +
          this.start_time +
          "&end_time=" +
          this.end_time +
          "&uid=" +
          myuid +
          "&amend=" +
          this.amend;
      }
    },
    //判断对象是否为空
    checkObj(obj) {
      for (let i in obj) {
        return false;
      }
      return true;
    },
    getbaselist() {
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.worm_lamp.lamp_list",
        data: this.qs.stringify({
          device_type_id: 3,
          page_size: 99999999,
          page: 1,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          if (res.data.data) {
            console.log(res.data.data.data);
            this.basedata = res.data.data.data;
            for (var i = 0; i < 5; i++) {
              if (this.basedata[i]) {
                this.checkList.push(this.basedata[i].imei);
                this.d_idlist.push(this.basedata[i].d_id);
              }
            }
            this.d_id = this.d_idlist.join(",");
            console.log(this.d_id);
            this.getwormtime();
            this.leapyear(this.yservalue);
          }
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error(res.data.message);
          }
        }
      });
    },
    basebtn() {
      console.log(this.checkList);
      this.d_idlist = [];
      for (var i = 0; i < this.basedata.length; i++) {
        for (var j = 0; j < this.checkList.length; j++) {
          if (this.basedata[i].imei == this.checkList[j]) {
            this.d_idlist.push(this.basedata[i].d_id);
          }
        }
      }
      console.log(this.d_idlist);
      this.d_id = this.d_idlist.join(",");
      this.getwormtime();
      this.leapyear(this.yservalue);
      this.basedialogVisible = false;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.identify_model = this.$route.query.identify_model;
    if (this.$route.query.d_id) {
      this.d_id = this.$route.query.d_id;
      this.d_idtf = false;
    } else {
      this.d_id = "";
    }
    console.log(this.$route);
    var Year = new Date().getFullYear();
    var num = Year - 2019;
    for (var i = 0; i < num + 1; i++) {
      var obj = {
        value: 2019 + i,
        label: 2019 + i,
      };
      this.yesroptions.push(obj);
    }
    this.yservalue = this.yesroptions[this.yesroptions.length - 1].label;
    if (this.d_id == "") {
      this.getbaselist();
    } else {
      this.getwormtime();
      this.leapyear(this.yservalue);
    }
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.refreshData();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.baselistbox_top {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  .baselistbox_top_title {
    width: 100%;
    height: 65px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    line-height: 25px;
    p:first-child {
      font-size: 14px;
    }
    p:last-child {
      font-size: 18px;
      font-weight: 700;
      margin-left: 20px;
    }
  }
  .baselistbox_top_line {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
  }
  .baselistbox_top_caozuo {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
}
.analytitlebox {
  display: flex;
  justify-content: space-between;
  .analytitlebox_item {
    width: 60%;
    display: flex;
    height: 32px;
    /deep/.el-slider {
      margin-left: 20px;
      width: 75%;
      .el-slider__marks-text:last-child {
        display: none;
      }
    }
  }
}
.analyinfo1 {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .analyinfo1_text {
    width: 70%;
    height: 300px;
    .box-card {
      height: 100%;
      width: 100%;
    }
    /deep/.el-card__body {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .el-select {
      margin: 15px 0;
    }
    .analyinfo1_text_item {
      display: flex;
      justify-content: space-around;
      margin: 30px 0;
      .text_item {
        display: flex;
        img {
          width: 100px;
          height: 75px;
          margin-right: 15px;
        }
        p:last-child {
          margin-top: 15px;
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
  }
  .analyinfo1_pie {
    width: 29%;
    height: 300px;
    .box-card {
      height: 100%;
      width: 100%;
      /deep/.el-card__body {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
      }
      #wormpie {
        height: 100%;
        width: 100%;
      }
      .tishi {
        position: absolute;
        top: 45%;
        left: 45%;
      }
    }
  }
}
.analyinfo2 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .box-card {
    height: 100%;
    width: 100%;
  }
  /deep/.el-card__body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  .analyinfo2_line {
    width: 70%;
    height: 350px;
    .highcharts {
      height: 100%;
      width: 100%;
    }
    .tishi {
      position: absolute;
      top: 45%;
      left: 45%;
    }
  }
  .analyinfo2_zhu {
    width: 29%;
    height: 350px;
    .wromhuanbox {
      width: 100%;
      height: 90%;
      overflow-y: auto;
      overflow-x: hidden;
      #wromhuan {
        width: 100%;
        // height: 2000px;
      }
    }
    .tishi {
      position: absolute;
      top: 45%;
      left: 45%;
    }
  }
}
.acttable {
  display: flex;
  margin-top: 15px;
  div {
    padding: 5px 8px;
    border: 1px solid #4f71ff;
    margin-right: 10px;
    font-size: 14px;
    border-radius: 5px;
    color: #4f71ff;
    cursor: pointer;
  }
  .act {
    border: 1px solid #4f71ff;
    color: #fff;
    background-color: #4f71ff;
  }
}
.tablebox {
  margin-top: 15px;
  .tableoperationbox {
    display: flex;
    justify-content: space-between;
    /deep/.el-button {
      height: 28px;
    }
    /deep/.el-input {
      width: 200px;
      margin-bottom: 15px;
    }
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    /deep/.el-pager {
      .active {
        background-color: #4f71ff !important;
      }
    }
    /deep/.el-input__inner:hover {
      border-color: #4f71ff;
    }
  }
  /deep/.cell {
    overflow: hidden; //溢出隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //...
    text-align: center;
  }
}
.diaimgbox {
  display: flex;
  width: 100%;
  height: 100%;
  img {
    width: 50%;
  }
}
.wormlistbox {
  margin-top: 15px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  p {
    width: 15%;
    margin-right: 15px;
    height: 20px;
    margin-bottom: 10px;
    overflow-y: auto;
  }
}
.baselistbox {
  /deep/.el-input {
    width: 200px;
    margin-bottom: 35px;
  }
  /deep/.el-checkbox-group {
    width: 100%;
    height: 500px;
    overflow-y: auto;
    .el-checkbox {
      width: 20%;
      margin-bottom: 15px;
      margin-right: 0;
    }
  }
}
.analytitlebox .nobackgound {
  background: rgb(209, 209, 209) !important;
  border: none !important;
}
</style>