<template>
  <div class="innerMargin">
    <el-card class="box-card">

      <div class="equipInfo">
        <div class="equipMsg">
          <span>设备ID：{{ id }}</span>
          <span>设备名称：{{ equipStatus.device_name || "无" }}</span>
          <span>位置：{{ equipStatus.address }}</span>
        </div>
        <div class="dateBox">
          <DateSearch @dateChange="dateChange"></DateSearch>
          <div class="viewSwitch">
            <el-button
              type="blueInfo"
              v-if="viewSwitch"
              @click="viewSwitchFun(false)"
              size="mini"
              >手动统计</el-button
            >
            <el-button
              type="blueInfo"
              v-if="!viewSwitch"
              @click="viewSwitchFun(true)"
              size="mini"
              >自动统计</el-button
            >
          </div>
        </div>
      </div>
      <!-- 自动统计图 -->
      <div v-if="viewSwitch" v-loading="loading">
        <div>
          <el-row :gutter="10">
            <el-col :md="24" :lg="15">
              <el-card class="box-card">
                <template>
                  <div class="chartsSelect">
                    <el-select
                      v-model="viewSwitch2"
                      @change="screenInsect()"
                      size="mini"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in worms"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
                <div class="charts">
                  <highcharts
                    :options="options"
                    v-if="Object.keys(options).length > 0"
                  ></highcharts>
                  <div class="noDataClass" v-else>暂无数据</div>
                </div>
              </el-card>
            </el-col>
            <el-col :md="24" :lg="9">
              <el-card class="box-card">
                <div class="pie">
                  <highcharts
                    :options="options2"
                    v-if="Object.keys(options2).length > 0"
                  ></highcharts>
                  <div class="noDataClass" v-else>暂无数据</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="dataTableSearch">
          <el-button type="blueInfo" size="mini" @click="deriveData()"
            >导出</el-button
          >
          <el-button
            type="blueInfo"
            size="mini"
            v-if="dataSwitchType == 0"
            @click="dataSwitch(1)"
            >详细信息</el-button
          >
          <el-button type="blueInfo" size="mini" v-else @click="dataSwitch(0)"
            >统计信息</el-button
          >
        </div>
        <!-- 统计信息 -->
        <el-card class="box-card" v-if="dataSwitchType == 0">
          <el-table :data="tableDataB" stripe style="width: 100%">
            <el-table-column
              v-for="(item, index) in tableHeadTxt"
              :key="index"
              :prop="item[1]"
              :label="item[0]"
            >
              <template slot-scope="scope">{{
                scope.row[scope.column.property]
              }}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="blueInfo"
                  size="mini"
                  id="viewerDom"
                  v-viewer
                  plain
                  @click="handleEditA(scope.$index, scope.row)"
                  >害虫来源</el-button
                >
                <el-button
                  type="orangeInfo"
                  size="mini"
                  id="viewerDom"
                  v-viewer
                  plain
                  @click="insectData(scope.$index, scope.row)"
                  >害虫资料</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="tableDataB.length > 0"
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="queryInfo.page"
            @current-change="changePage"
          ></el-pagination>
        </el-card>

        <!-- 详细信息 -->
        <el-card class="box-card" v-else>
          <!-- <el-table :data="tableDataAll" stripe style="width: 100%"> -->
          <el-table
            :data="tableDataAllB"
            stripe
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              v-for="(item, index) in tableHeadTxtAll"
              :key="index"
              :prop="item[1]"
              :label="item[0]"
            >
              <template slot-scope="scope">{{
                scope.row[scope.column.property]
              }}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="blueInfo"
                  size="mini"
                  id="viewerDom"
                  v-viewer
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                  >害虫来源</el-button
                >
                <el-button
                  type="orangeInfo"
                  size="mini"
                  id="viewerDom"
                  v-viewer
                  plain
                  @click="insectData(scope.$index, scope.row)"
                  >害虫资料</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="tableDataAllB.length > 0"
            background
            layout="prev, pager, next"
            :total="totalall"
            :current-page="queryInfo.pageall"
            @current-change="changePageall"
          ></el-pagination>
        </el-card>
      </div>

      <!-- 手动统计 -->
      <div v-if="!viewSwitch">
        <div>
          <el-row :gutter="10">
            <el-col :md="24" :lg="15">
              <el-card class="box-card">
                <template>
                  <div class="chartsSelect">
                    <el-select
                      v-model="viewSwitch23"
                      @change="screenInsectA()"
                      size="mini"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in dropDown"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
                <div class="charts">
                  <highcharts
                    :options="options3"
                    v-if="Object.keys(options3).length > 0"
                  ></highcharts>
                  <div class="noDataClass" v-else>暂无数据</div>
                </div>
              </el-card>
            </el-col>
            <el-col :md="24" :lg="9">
              <el-card class="box-card">
                <div class="pie">
                  <highcharts
                    :options="options4"
                    v-if="Object.keys(options4).length > 0"
                  ></highcharts>
                  <div class="noDataClass" v-else>暂无数据</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="dataTableSearch">
          <el-button type="blueInfo" size="mini" @click="deriveData()"
            >导出</el-button
          >
        </div>
        <el-card class="box-card">
          <!-- 统计信息 -->
          <template>
            <el-table :data="tableDataA" stripe style="width: 100%">
              <el-table-column
                v-for="(item, index) in tableHeadTxtA"
                :key="index"
                :prop="item[1]"
                :label="item[0]"
              >
                <template slot-scope="scope">{{
                  scope.row[scope.column.property]
                }}</template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!-- <el-button
                    type="success"
                    size="mini"
                    id="viewerDom"
                    v-viewer
                    @click="handleEdit(scope.$index, scope.row)"
                    >害虫来源</el-button
                  > -->
                  <el-button
                    type="blueInfo"
                    size="mini"
                    plain
                    @click="handleEdit(scope.$index, scope.row)"
                    >害虫来源</el-button
                  >
                  <el-button
                    type="orangeInfo"
                    size="mini"
                    plain
                    @click="insectData(scope.$index, scope.row)"
                    >害虫资料</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="queryInfo.manualpage"
            @current-change="manualchangePage"
          ></el-pagination>
        </el-card>

        <!-- 导出对话框 -->
        <el-dialog title="导出信息" :visible.sync="dialogVisible" width="30%">
          <!-- <span>这是一段信息</span> -->

          <!-- 下拉框和输入框 -->
          <ul class="iptUl">
            <li class="iptList">
              <div class="iptTxt">
                <span style="color: red">*</span>文件名称：
              </div>
              <div class="iptBox">
                <el-input
                  placeholder="请输入文件的名称"
                  v-model="value"
                  clearable
                >
                </el-input>
              </div>
            </li>
            <li class="iptList">
              <div class="iptTxt">
                <span style="color: red">*</span>下载类型：
              </div>
              <div class="iptBox">
                <el-select v-model="value1" placeholder="请选择">
                  <el-option
                    v-for="item in optionsA"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </li>
            <li class="iptList" v-show="timeShow">
              <div class="iptTxt"><span style="color: red">*</span>时间段：</div>
              <div class="iptBox">
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </li>
          </ul>
          <!-- 下拉框和输入框 -->

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="blueInfo" @click="addData()">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 导出对话框 -->
      </div>

      <!-- 导出对话框 -->
      <el-dialog title="导出信息" :visible.sync="dialogVisible" width="30%">
        <!-- <span>这是一段信息</span> -->

        <!-- 下拉框和输入框 -->
        <ul class="iptUl">
          <li class="iptList">
            <div class="iptTxt"><span style="color: red">*</span>文件名称：</div>
            <div class="iptBox">
              <el-input placeholder="请输入文件的名称" v-model="value" clearable>
              </el-input>
            </div>
          </li>
          <li class="iptList">
            <div class="iptTxt"><span style="color: red">*</span>下载类型：</div>
            <div class="iptBox">
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                  v-for="item in optionsA"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </li>
          <li class="iptList" v-show="timeShow">
            <div class="iptTxt"><span style="color: red">*</span>时间段：</div>
            <div class="iptBox">
              <el-date-picker
                v-model="value2"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </li>
        </ul>
        <!-- 下拉框和输入框 -->

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="blueInfo" @click="addData()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 导出对话框 -->

      <!-- 查看大图 -->
      <viewer
        v-show="imageListtData"
        :images="recognitionImage"
        @inited="inited"
        ref="viewer"
        :index="3"
      >
        <img v-for="(src, index) in recognitionImage" :src="src" :key="index" />
      </viewer>

      <!-- 病虫害档案弹框 -->
      <el-dialog
        title="病虫害档案"
        :close-on-click-modal="false"
        :visible.sync="dialogFormVisible"
      >
        <ul class="expertDiagnosis_library_main_popUp">
          <li class="expertDiagnosis_library_main_popUp_li">
            <div class="expertDiagnosis_library_main_popUp_li_name">
              害虫名称：
            </div>
            <div class="expertDiagnosis_library_main_popUp_li_nameVal">
              {{ popUpData.name }}
            </div>
          </li>

          <li class="expertDiagnosis_library_main_popUp_li">
            <div class="expertDiagnosis_library_main_popUp_li_img">
              害虫图片：
            </div>
            <div class id="viewerDom" v-viewer>
              <img
                style="cursor: pointer"
                :src="popUpData.img_urls"
                @error="$imghost + errImg"
                alt
                class="expertDiagnosis_library_main_popUp_li_imgVal"
              />
            </div>
          </li>

          <li class="expertDiagnosis_library_main_popUp_li">
            <div class="expertDiagnosis_library_main_popUp_li_details">
              详细信息：
            </div>
            <div class="expertDiagnosis_library_main_popUp_li_detailsVal">
              {{ popUpData.prevention }}
            </div>
          </li>
        </ul>
      </el-dialog>

      <!-- 自动统计-详情信息-测试 -->
      <el-dialog
        title="识别结果"
        :visible.sync="discernVisibleA"
        width="50%"
        :fullscreen="enlargement"
      >
        <div v-loading="loading">
          <div v-if="imagepopShow">
            <img
              v-if="enlargementImg"
              :src="recognitionImage[0]"
              @click="amplification()"
              style="width: 100%; height: 100%"
              alt
            />
            <img
              v-else
              @click="amplification()"
              :src="recognitionImage[0]"
              alt
              class="enlargementImg"
            />
          </div>

          <ui-marker
            v-else
            ref="aiPanel-editor"
            class="ai-observer"
            v-bind:uniqueKey="uuid"
            width="100%"
            :ratio="16 / 9"
            @vmarker:onAnnoSelected="onAnnoSelected"
            @vmarker:onAnnoAdded="onAnnoAdded"
            @vmarker:onUpdated="onUpdated"
            @vmarker:onReady="onReady"
            @vmarker:onImageLoad="onImageLoad"
            v-bind:readOnly="readOnly"
            v-bind:imgUrl="currentImage"
          >
          </ui-marker>
        </div>

        <div>
          <div
            :class="enlargementImg == false ? 'enlargementDiv' : 'discernResult'"
          >
            <div class="name">
              <i class="icon-zhuti_tiaosepan_o iconfont"></i>
              害虫名称
              <span
                >{{ recognitionData.name }}（序号：{{
                  recognitionData.serial
                }}）</span
              >
            </div>
            <div class="number">
              害虫个数：
              <span>{{ recognitionData.sum }}</span>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 自动统计-详情信息-测试 -->

      <!-- 自动统计-统计信息 -->
      <el-dialog
        title="识别结果"
        :visible.sync="discernVisible"
        :close-on-click-modal="false"
        width="30%"
        :fullscreen="enlargement"
      >
        <!-- <div v-loading="loading"> -->
        <div>
          <div class="swiper-container" ref="swiperRef">
            <div class="swiper-wrapper">
              <!-- <div
                class="swiper-slide"
                id="viewerDom"
                v-viewer
                v-for="(item, index) in recognitionImage"
                :key="index"
              > -->
              <div
                class="swiper-slide"
                v-for="(item, index) in AxiosImageList"
                :key="index"
              >
                <img
                  @click="amplification()"
                  :src="item.img"
                  alt
                  class="swiper-slide-img"
                />
                <div>
                  <div
                    :class="
                      enlargementImg == false ? 'enlargementDiv' : 'discernResult'
                    "
                  >
                    <div class="name">
                      <i class="icon-zhuti_tiaosepan_o iconfont"></i>
                      害虫名称
                      <span>{{ item.name }}（序号：{{ item.serial }}）</span>
                    </div>
                    <div class="number">
                      害虫个数：
                      <span>{{ item.sum }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
      </el-dialog>

      <!-- icon测试 -->
      <div class="griddingBox" v-show="iconShow" id="iconBox">
        <img
          v-if="iconIf"
          @click="openGridding()"
          src="../../../../static/images/icon1.png"
          alt=""
          class="icon1"
          id="iconDom"
        />
        <img
          v-else
          @click="offGridding()"
          src="../../../../static/images/icon2.png"
          alt=""
          class="icon2"
          id="iconDom"
        />
      </div>
      <!-- icon测试 -->

      <!-- 网格 -->
      <div id="reseau"></div>
      <!-- 网格 -->
    </el-card>
  </div>
</template>

<script>
import Vue from "vue";
import DateSearch from "@/components/DateSearch";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import HighCharts, { time } from "highcharts";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
import { AIMarker } from "Vue-Picture-BD-Marker";

Viewer.setDefaults({
  inline: false,
  button: true, //右上角按钮
  navbar: true, //底部缩略图
  title: true, //当前图片标题
  toolbar: false, //底部工具栏
  tooltip: true, //显示缩放百分比
  movable: true, //是否可以移动
  zoomable: true, //是否可以缩放
  rotatable: true, //是否可旋转
  scalable: true, //是否可翻转
  transition: false, //使用 CSS3 过度
  fullscreen: false, //播放时是否全屏
  keyboard: true, //是否支持键盘
  ready: function (e) {
    // console.log(e.type, '组件以初始化')
  },
  show: function (e) {
    // console.log(e.type, '图片显示开始')
    var iconBox = document.getElementById("iconBox");
    iconBox.style.display = "block";
  },
  shown: function (e) {
    // console.log(e.type, '图片显示结束')
  },
  hide: function (e) {
    // console.log(e.type, '图片隐藏完成')
    var domData = document.getElementById("reseau");
    var html = "";
    domData.innerHTML = html;
    var iconBox = document.getElementById("iconBox");
    iconBox.style.display = "none";
  },
  hidden: function (e) {
    // console.log(e.type, '图片隐藏结束')
  },
  view: function (e) {
    console.log(e.type, "视图开始");
  },
  viewed: function (e) {
    var iconDom = document.getElementById("iconDom");
    var j = JSON.stringify(iconDom);
    var g = j.indexOf("icon2");
    if (g !== -1) {
      var b;
      var c;
      var a;
      // var a = e.path[0].ownerDocument.images[20].outerHTML
      var arr = [];
      arr = e.path[0].ownerDocument.images;
      for (var i = 0; i < arr.length; i++) {
        var k = arr[i].outerHTML.indexOf('style="');
        var j = arr[i].outerHTML.indexOf("margin-top:");
        if (k !== -1 && k !== -1) {
          a = arr[i].outerHTML;
        }
      }
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      var x = y + "z-index:10000;";
      var domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="' +
        x +
        '"' +
        " />" +
        "</div>";
      domData.innerHTML = html;
    }
  },
  zoom: function (e) {
    // console.log(e.type, '图片缩放开始')
    var iconDom = document.getElementById("iconDom");
    var j = JSON.stringify(iconDom);
    var g = j.indexOf("icon2");
    console.log(g);
    if (g !== -1) {
      var b;
      var c;
      var a = e.detail.originalEvent.path[0].outerHTML;
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      var x = y + "z-index:10000;";
      var domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="' +
        x +
        '"' +
        " />" +
        "</div>";
      domData.innerHTML = html;
    }
  },
  zoomed: function (e) {
    var iconDom = document.getElementById("iconDom");
    var j = JSON.stringify(iconDom);
    var g = j.indexOf("icon2");
    // console.log(g)
    if (g !== -1) {
      var b;
      var c;
      var a = e.detail.originalEvent.path[0].outerHTML;
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      var x = y + "z-index:10000;";
      var domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="' +
        x +
        '"' +
        " />" +
        "</div>";
      domData.innerHTML = html;
    }
  },
});

export default {
  data() {
    return {
      id:this.$store.state.cbd_pest_id,
      d_id:this.$store.state.cbd_pest_did,
      btnSelected: "2",
      allPest: [],
      options: {},
      options2: {},
      options3: {},
      options4: {},
      equip_name: "",
      worms: [],
      // 状态信息
      equipStatus: {},

      // 自动统计动态表头
      tableHeadTxt: [
        ["害虫名称", "name"],
        ["害虫数量", "sum"],
        // ["统计时间", "upl_time"]
      ],
      tableHeadTxtAll: [
        ["害虫名称", "name"],
        ["害虫数量", "sum"],
        ["统计时间", "upl_time"],
        // ['操作', 'operationData'],
      ],
      // 表格数据
      tableData: [],
      tableDataB: [],
      tableDataAll: [],
      tableDataAllB: [],
      index: 0,
      tableDataA: [],
      timeRange: "",
      total: null,
      totalall: null,
      queryInfo: {
        begin: "",
        end: "",
        page: 1,
        pageall: 1,
        pest_name: "",
        manualpage: 1,
      },
      viewSwitch: 1,
      viewSwitch2: "",
      viewSwitch23: "",
      // 手动统计表头
      tableHeadTxtA: [
        ["害虫名称", "pest_name"],
        ["害虫数量", "pest_num"],
        ["作物种类", "crop_name"],
        ["虫害阶段", "pest_case"],
        ["统计时间", "add_time"],
        // ["统计时间", "upl_time"]
      ],
      dropDown: [], //手动统计害虫名称下拉数据
      chartsLineShow: true, //判断折线图是否为空
      chartsPieShow: true, //判断统计图是否为空
      pestTit: "详细信息",
      flag: 1,
      dataSwitchType: 1, //0代表统计信息，1代表详细信息
      //导出弹框
      dialogVisible: false,
      optionsA: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "时间段",
        },
      ],
      value: "", //文件名称
      value1: "", //下载类型
      value2: "", //时间段
      timeShow: false, //选择时间
      imgListData: "", //表格图片
      recognitionImage: [], //图片数组
      AxiosImageList: [],
      imageListtData: false,
      //害虫资料
      dialogFormVisible: false,
      popUpData: {}, //虫害数据
      isClick: true, //点赞开关
      //图片框
      discernVisible: false,
      discernVisibleA: false, //自动统计-统计信息
      enlargement: false, //识别弹框放大
      enlargementImg: true, //图片样式控制
      loading: false, //加载
      recognitionData: {}, //害虫数据对象
      htmlData: "",
      iconShow: false, //icon
      iconIf: true,
      iconShowA: false,

      // 测试测试
      readOnly: true, //是否只读
      currentImage: "", //图片标注的图片
      imagepopShow: true, //是否为手动标注
      uuid: "0da9130",
    };
  },
  watch: {
    viewSwitch(val) {
      // console.log(val)
      this.btnSelected = "2";
    },
    value1(val) {
      if (val == "选项2") {
        this.timeShow = true;
      }
      if (val == "选项1") {
        this.timeShow = false;
      }
    },
    dialogVisible(val) {
      if (val == false) {
        this.value = "";
        this.value1 = "";
        this.value2 = "";
        this.timeShow = false;
      }
    },
    discernVisible(val) {
      if (val == false) {
        var swiper = new Swiper(".swiper-container", {
          initialSlide: 0,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",
        });
        swiper.destroy(true, true);
      }
    },
    discernVisibleA(val) {
      if (val == false) {
        // this.tagName = "";
        this.setdataNum = {};
        this.$refs["aiPanel-editor"].getMarker().clearData();
      }
    },
  },
  created() {
    this.getPests();
  },
  mounted() {
    // this.switchChu() //switch轮播
    this.refreshData(); //设置hightcharts配置
    // console.log(this.$route.name)
  },
  methods: {
    // 设置hightcharts配置
    refreshData() {
      HighCharts.setOptions({
        // 所有语言文字相关配置都设置在 lang 里
        lang: {
          resetZoom: "刷新",
          resetZoomTitle: "重置缩放比例",
        },
      });
    },

    //子向父传值
    dateChange(data) {
      this.queryInfo.begin = data.begin;
      this.queryInfo.end = data.end;
      this.queryInfo.pest_name = "";
      // 判断是自动统计还是手动统计
      if (this.viewSwitch == true) {
        //自动统计
        this.getPestAllData();
      } else if (this.viewSwitch == false) {
        //手动统计
        this.manualStatistics(); //手动统计折线图请求
      }
    },
    //获取害虫种类
    getPests() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.worm_list",
      }).then((res) => {
        if (res.data.message == "") {
          this.allPest = res.data.data;
        }
      });
    },
    // 获取折线和饼状图和数据列表
    getPestAllData(list) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.pest_statistics",
        data: this.qs.stringify({
          d_id: this.d_id,
          start_time: this.queryInfo.begin,
          end_time: this.queryInfo.end,
          pest_name: this.queryInfo.pest_name,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.equipStatus = {
            address: res.data.data.address,
            device_name: res.data.data.device_name,
          };
          // 折线
          var ChartData = [
            {
              name: "温度（°C）",
              dat: [],
            },
            {
              name: "湿度（%）",
              dat: [],
            },
            {
              name: "害虫总数",
              dat: [],
            },
          ];
          var data = res.data.data.date;
          if (data.length > 0) {
            this.viewSwitch2 = data[0]._sname;
            for (let item of data) {
              ChartData[0].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                Number(item.temperature),
              ]);
              ChartData[1].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                Number(item.humidity),
              ]);
              ChartData[2].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                Number(item._sums),
              ]);
            }
            // console.log(ChartData)
            this.options = {
              chart: {
                zoomType: "x",
              },
              title: {
                text: "害虫变化趋势",
                align: "left",
              },
              subtitle: {
                text: "",
              },
              xAxis: {
                crosshair: true, //十字基准线
                type: "datetime",
                dateTimeLabelFormats: {
                  //根据时间间距X轴自动显示哪种格式
                  millisecond: "%H:%M:%S.%L",
                  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: [
                {
                  type: 'column',
                  name: ChartData[0].name,
                  data: ChartData[0].dat,
                },
                {
                  type: 'column',
                  name: ChartData[1].name,
                  data: ChartData[1].dat,
                },
                {
                  type: 'spline',
                  name: ChartData[2].name,
                  data: ChartData[2].dat,
                },
              ],
              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",
                      },
                    },
                  },
                ],
              },
            };
          } else {
            this.options = {};
            this.viewSwitch2 = "";
            this.gainInsect([]); //获取下拉框害虫种类
          }
          // 饼状和列表
          if (list != 1) {
            var percentage = res.data.data.percentage;
            if (percentage.length > 0) {
              var arr = [];
              var arrA = [];
              for (let i in percentage) {
                let o = {
                  value: percentage[i].name_num,
                  label: percentage[i].name_num,
                };
                arr.push(o);
                arrA.push([percentage[i].name_num, percentage[i].sum]);
                console.log(arrA)
              }
              this.chartPieInit(arrA);
              this.gainInsect(arr); //获取下拉框害虫种类

              this.total = percentage.length;
              var data = percentage;
              this.tableData = [];
              for (let i in data) {
                this.tableData.push({
                  name: data[i].name_num,
                  sum: data[i].sum,
                  img: data[i].indentify_photos,
                  serial: data[i].num,
                });
              }
              this.tableDataB = this.tableData.slice(0, 10);
            } else {
              this.tableData = [];
              this.tableDataB = [];
              this.options2 = {};
            }
            // 所有全部害虫列表
            var time_d_sums = res.data.data.time_d_sums;
            if (time_d_sums.length > 0) {
              this.tableDataAll = [];
              for (let i in time_d_sums) {
                var peatArr = time_d_sums[i].pest.split("#");
                for (let j in peatArr) {
                  var dat = peatArr[j].split(",");
                  if (time_d_sums[i].mark !== null) {
                    this.tableDataAll.push({
                      name: this.allPest[dat[0]],
                      sum: dat[1],
                      upl_time: this.formatTime(time_d_sums[i].addtime * 1000),
                      img: time_d_sums[i].result_photo,
                      serial: dat[0],
                      mark: time_d_sums[i].mark,
                    });
                  } else {
                    this.tableDataAll.push({
                      name: this.allPest[dat[0]],
                      sum: dat[1],
                      upl_time: this.formatTime(time_d_sums[i].addtime * 1000),
                      img: time_d_sums[i].result_photo,
                      serial: dat[0],
                      mark: null,
                    });
                  }
                }

                // 手动标记害虫数据处理 将自动以及手动标注数据融合到一起
                if (time_d_sums[i].mark !== null) {
                  for (
                    var k = 0;
                    k < JSON.parse(time_d_sums[i].mark).length;
                    k++
                  ) {
                    var ju = JSON.parse(time_d_sums[i].mark);
                    this.tableDataAll.push({
                      name: ju[k].tagName,
                      sum: 1,
                      img: time_d_sums[i].result_photo,
                      serila: null,
                      upl_time: this.formatTime(time_d_sums[i].addtime * 1000),
                      mark: time_d_sums[i].mark,
                    });
                  }
                }
              }
              // console.log(this.tableDataAll);
              this.totalall = this.tableDataAll.length;
              this.tableDataAllB = this.tableDataAll.slice(0, 10);
            } else {
              this.totalall = 0;
              this.tableDataAllB = [];
              this.tableDataAll = [];
            }
          }
        }
      });
    },
    //饼状图初始化
    chartPieInit(arr) {
      var _this = this;
      (this.options2 = {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0,
          },
        },
        credits: {
          enabled: false,
        },
        title: {
          text: "害虫比例",
          align: "left",
        },
        tooltip: {
          headerFormat: "{series.name}<br>",
          pointFormat: "{point.name}: <b>{point.y}头</b>",
        },
        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
            },
            point: {
              events: {
                mouseOver: function (e) {
                  // 鼠标滑过时动态更新标题
                  // console.log(e)
                  // console.log(this.setTitle())
                  // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                  // VueHighcharts.setTitle({
                  //    text: e.target.name+ '\t'+ e.target.y + ' %'
                  // });
                },
                click(e) {
                  // 同样的可以在点击事件里处理
                  _this.viewSwitch2 = e.point.name;
                  _this.screenInsect();
                },
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            innerSize: "80%",
            name: "害虫比例",
            data: arr,
          },
        ],
      }),
        function (c) {
          // 图表初始化完毕后的会掉函数
          // 环形图圆心
          var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
          // 动态设置标题位置
          c.setTitle({
            y: centerY + titleHeight / 2,
          });
        };
    },
    //获取表格历史数据（统计）
    getTableList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.pest_statistics_list",
        data: this.qs.stringify({
          device_id: this.d_id,
          page: this.queryInfo.page,
          start_time: this.queryInfo.begin,
          end_time: this.queryInfo.end,
        }),
      }).then((res) => {
        // 饼状图数据
        if (res.data.data.counts !== 0) {
          var data = res.data.data.data;

          var arr = [];
          var arrA = [];
          for (let i in data) {
            let o = { value: data[i].name_num, label: data[i].name_num };
            arr.push(o);
            arrA.push([data[i].name_num, data[i].sum]);
          }
          this.chartPieInit(arrA);
          this.gainInsect(arr); //获取下拉框害虫种类
          this.viewSwitch2 = arr[0].label;
          this.viewSwitch23 = arrA[0].label;
        } else {
          this.chartPieInit([]);
          this.gainInsect([]); //获取下拉框害虫种类
          this.viewSwitch2 = "";
          this.viewSwitch23 = "";
        }

        if (res.data.message == "") {
          this.total = res.data.data.counts;
          var data = res.data.data.data;
          this.tableData = [];
          for (let i in data) {
            this.tableData.push({ name: data[i].name_num, sum: data[i].sum });
          }
        }
      });
      this.$axios({
        method: "POST",
        url:
          "/api/api_gateway?method=forecast.worm_lamp.pest_statistics_list_old",
        data: this.qs.stringify({
          device_id: this.d_id,
          page: this.queryInfo.page,
          start_time: this.queryInfo.begin,
          end_time: this.queryInfo.end,
        }),
      }).then((res) => {
        if (res.data.data.counts > 0) {
          var data = res.data.data.data;
          this.tableDataAll = [];
          for (let i in data) {
            var peatArr = data[i].pest.split("#");
            for (let j in peatArr) {
              var dat = peatArr[j].split(",");
              this.tableDataAll.push({
                name: this.allPest[dat[0]],
                sum: dat[1],
                upl_time: this.formatTime(data[i].addtime * 1000),
              });
            }
          }
          this.totalall = this.tableDataAll.length;
          var arrlist = [];
          var num = 0;
          for (var i = this.index; i < this.tableDataAll.length; i++) {
            num++;
            if (num <= 10) {
              arrlist.push(this.tableDataAll[i]);
            }
          }
          this.index += 10;
          this.tableDataAllB = arrlist;
        } else {
          this.tableDataAll = [];
        }
      });
    },
    // 手动自动切换
    viewSwitchFun(params) {
      this.viewSwitch = params;
      this.queryInfo.page = 1;
      this.queryInfo.pest_name = "";
      this.queryInfo.manualpage = 1;
      if (params == true) {
        //自动统计
        this.getPestAllData();
      } else if (params == false) {
        // console.log('手动统计')
        this.manualStatistics(); //手动统计折线图请求
      }
    },

    //改变page
    changePage(val) {
      this.queryInfo.page = val;
      this.tableDataB = this.tableData.slice((val - 1) * 10, val * 10);
    },
    changePageall(val) {
      this.queryInfo.pageall = val;
      this.tableDataAllB = this.tableDataAll.slice((val - 1) * 10, val * 10);
    },
    manualchangePage(val) {
      this.queryInfo.manualpage = val;
      this.manualStatisticspage();
    },

    // 获取下拉框害虫种类-自动统计
    gainInsect(data) {
      this.worms = data;
    },

    // 下拉框筛选害虫名称
    screenInsect() {
      this.queryInfo.pest_name = this.viewSwitch2;
      this.getPestAllData(1);
    },
    // 数据信息切换（详细信息 1）（统计信息 0）
    dataSwitch(flag) {
      this.dataSwitchType = flag;
      this.flag = flag;
    },

    // 手动统计-折线图数据请求
    manualStatistics(flag) {
      let that = this;
      let postData = that.qs.stringify({
        device_id: this.d_id, //设备id
        start_time: this.queryInfo.begin, //开始时间
        end_time: this.queryInfo.end, //结束时间
        pest_name: this.queryInfo.pest_name, //害虫名
        page: this.queryInfo.manualpage,
      });
      that
        .$axios({
          method: "post",
          url:
            "/api/api_gateway?method=forecast.worm_lamp.pest_manual_statistics",
          data: postData,
        })
        .then((res) => {
          if (res.data.message == "") {
            this.total = res.data.data.nums;
            var ChartData = [
              {
                name: "害虫总数(头)",
                dat: [],
              },
            ];
            if (flag != 1) {
              var data = res.data.data.dat;
              this.viewSwitch23 = res.data.data.pests.pest_name;
              if (data.length > 0) {
                var newArr = [];
                for (let item of data) {
                  var newObj = {};
                  newObj["value"] = item.pest_name;
                  newObj["label"] = item.pest_name;
                  newArr.push(newObj);
                }
                this.dropDown = newArr; //害虫名称下拉框数据
              } else {
                this.dropDown = []; //害虫名称下拉框数据
              }
              that.manualStatisticsPie(res.data); //请求手动统计饼状图数据
              that.manualStatisticsTab(res.data); //请求手动统计表格数据
            }

            var pest_list = res.data.data.pests.pest_list || [];
            if (pest_list.length > 0) {
              this.chartsLineShow = true;
              for (let ite of pest_list) {
                ChartData[0].dat.unshift([
                  ite.add_time * 1000 + 8 * 3600000,
                  Number(ite.pest_num),
                ]);
              }
              this.options3 = {
                chart: {
                  zoomType: "x",
                  // zoomType: 'y'
                },
                title: {
                  text: "害虫变化趋势",
                  align: "left",
                },
                subtitle: {
                  text: "",
                },
                xAxis: {
                  crosshair: true, //十字基准线
                  type: "datetime",
                  dateTimeLabelFormats: {
                    //根据时间间距X轴自动显示哪种格式
                    millisecond: "%H:%M:%S.%L",
                    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: [
                  {
                    name: ChartData[0].name,
                    data: ChartData[0].dat,
                  },
                ],
                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",
                        },
                      },
                    },
                  ],
                },
              };
            } else if (res.data.data.nums == 0) {
              this.chartsLineShow = false;
              this.options3 = {};
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 手动统计分页
    manualStatisticspage() {
      let that = this;
      let postData = that.qs.stringify({
        device_id: this.d_id, //设备id
        start_time: this.queryInfo.begin, //开始时间
        end_time: this.queryInfo.end, //结束时间
        pest_name: this.queryInfo.pest_name, //害虫名
        page: this.queryInfo.manualpage,
      });
      that
        .$axios({
          method: "post",
          url:
            "/api/api_gateway?method=forecast.worm_lamp.pest_manual_statistics",
          data: postData,
        })
        .then((res) => {
          if (res.data.message == "") {
            this.total = res.data.data.nums;
            this.manualStatisticsTab(res.data); //请求手动统计表格数据
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 手动统计-点击下拉框就切换折线图数据
    screenInsectA() {
      this.queryInfo.pest_name = this.viewSwitch23;
      this.manualStatistics(1);
    },

    //手动统计-饼状图数据
    manualStatisticsPie(data) {
      var dat = data.data.dat;
      var arr = [];
      for (var i = 0; i < dat.length; i++) {
        var a = [];
        a.push(dat[i].pest_name);
        a.push(parseInt(dat[i].pest_num));
        arr.push(a);
      }
      //判断当前是否有数据
      if (data.data.nums !== 0) {
        this.chartsPieShow = true;
        // console.log('有数据')
        var _this = this;
        this.options4 = {
          chart: {
            type: "pie",
            options3d: {
              enabled: true,
              alpha: 60,
              beta: 0,
            },
          },
          credits: {
            enabled: false,
          },
          title: {
            text: "害虫比例",
            align: "left",
          },
          tooltip: {
            headerFormat: "{series.name}<br>",
            pointFormat: "{point.name}: <b>{point.y}头</b>",
          },
          colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: "pointer",
              dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              },
              point: {
                events: {
                  mouseOver: function (e) {
                    // 鼠标滑过时动态更新标题
                    // console.log(e)
                    // console.log(this.setTitle())
                    // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                    // VueHighcharts.setTitle({
                    //    text: e.target.name+ '\t'+ e.target.y + ' %'
                    // });
                  },
                  click(e) {
                    // 同样的可以在点击事件里处理
                    _this.viewSwitch23 = e.point.name;
                    _this.screenInsectA();
                  },
                },
              },
            },
          },
          series: [
            {
              type: "pie",
              innerSize: "80%",
              name: "害虫比例",
              data: arr,
            },
          ],
        };
      } else if (data.data.nums == 0) {
        this.chartsPieShow = false;
        this.options4 = {};
      }
    },

    //手动统计-表格数据
    manualStatisticsTab(data) {
      let that = this;
      var dat = data.data.date;
      var arr = (that.tableDataA = []);
      for (var i = 0; i < dat.length; i++) {
        var time = dat[i].add_time;
        var date = new Date(parseInt(time) * 1000)
          .toLocaleString()
          .replace(/:\d{1,2}$/, " ");
        var obj = {};
        obj["add_time"] = date;
        obj["crop_name"] = dat[i].crop_name || "--";
        obj["pest_case"] = dat[i].pest_case || "--";
        obj["pest_name"] = dat[i].pest_name;
        obj["pest_num"] = dat[i].pest_num;
        obj["img"] = dat[i].image;
        arr.push(obj);
        // console.log(obj)
      }
      that.tableDataA = arr;
    },
    //返回上一页
    goBackPage() {
      this.$router.go(-1);
    },

    // 导出数据
    deriveData() {
      this.dialogVisible = true;
    },
    //导出数据确定
    addData() {
      var that = this;
      if (that.value == "" && that.value1 == "" && that.value2 == "") {
        this.$message({
          message: "请将必填项填写完整",
          type: "warning",
          duration: 1500,
        });
      } else if (
        that.value !== "" &&
        that.value1 == "选项2" &&
        that.value2 == ""
      ) {
        this.$message({
          message: "请填写导出时间段",
          type: "warning",
          duration: 1500,
        });
      } else if (
        that.value !== "" &&
        (that.value1 == "选项1" ||
          (that.value1 == "选项2" && that.value2 !== ""))
      ) {
        //判断当前是自动统计还是手动统计
        if (that.viewSwitch == true) {
          console.log("自动统计");
          var type = "autom";
        } else if (that.viewSwitch == false) {
          console.log("手动统计");
          var type = "manual";
        }

        var begin = "";
        var end = "";
        if (that.value2) {
          begin = parseInt(new Date(that.value2[0]).getTime() / 1000);
          end = parseInt(new Date(that.value2[1]).getTime() / 1000);
        } else {
          begin = "";
          end = "";
        }
        // console.log($measurement)
        window.location.href =
          // '/api/cbd_pest_export?device_id=' +
          this.$deriveData +
          "/api/cbd_pest_export?device_id=" +
          that.d_id +
          "&filename=" +
          that.value +
          "&start_time=" +
          begin +
          "&end_time=" +
          end +
          "&types=" +
          type;
      }
    },

    // 自动统计表格点击事件-详细信息
    handleEdit(index, row) {
      var that = this;
      that.recognitionData = {};
      that.recognitionImage = [];
      that.recognitionImage.push(row.img);
      if (row.serial !== undefined || row.serial !== null) {
        // //自动统计
        that.recognitionData = row;
        that.imagepopShow = true;
        if (row.serial !== null && row.mark !== null) {
          console.log(row.serial);
          this.imagepopShow = false;
          this.currentImage = row.img;
          this.$nextTick(() => {
            this.renderData(JSON.parse(row.mark));
          });
        } else {
          //自动统计
          that.recognitionData = row;
          that.imagepopShow = true;
        }
      } else if (row.serial == undefined) {
        console.log(222);
        var obj = {}; //新建对象-列表
        that.recognitionData = obj;
        if (
          row.pest_name == undefined &&
          row.pest_num == undefined &&
          row.image == undefined
        ) {
          obj["name"] = row.name;
          obj["sum"] = row.sum;
          obj["img"] = row.img;
          obj["serial"] = "暂无";
          obj["mark"] = row.mark;
        } else {
          obj["name"] = row.pest_name;
          obj["sum"] = row.pest_num;
          obj["img"] = row.image;
          obj["serial"] = "暂无";
        }

        if (
          row.pest_name == undefined &&
          row.pest_num == undefined &&
          row.image == undefined
        ) {
          this.imagepopShow = false;
          this.currentImage = obj.img;
          this.$nextTick(() => {
            this.renderData(JSON.parse(obj.mark));
          });
        } else {
          that.imagepopShow = true;
        }
      }
      that.discernVisibleA = true;
      that.loading = false;
    },

    // 自动统计表格点击事件-统计信息
    handleEditA(index, row) {
      var that = this;
      that.loading = true;
      // console.log(row)
      that.imageAxiosData(row.img, row.name, row.serial);
    },
    //自动统计表格点击事件-统计信息获取图片数据
    imageAxiosData(idArr, name, serial) {
      var that = this;
      var postData = that.qs.stringify({
        photo_ids: JSON.stringify(idArr),
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.worm_lamp.photo_result",
          data: postData,
        })
        .then((res) => {
          if (res.data.data.length > 0) {
            var data = res.data.data;
            var arr = [];
            var imgArr = [];
            for (let i in data) {
              var peatArr = data[i].indentify_result.split("#");
              for (let j in peatArr) {
                var dat = peatArr[j].split(",");
                if (serial == dat[0]) {
                  arr.push({
                    name: name,
                    sum: dat[1],
                    img: data[i].indentify_photo,
                    serial: dat[0],
                  });
                  imgArr.push(data[i].indentify_photo);
                }
              }
            }
            that.discernVisible = true;
            that.AxiosImageList = [];
            that.AxiosImageList = arr; //害虫图片和害虫信息
            that.recognitionImage = [];
            that.recognitionImage = imgArr; //害虫图片
            // console.log(arr)
            // console.log(imgArr)
            this.$nextTick(() => {
              this.switchChu();
            });
            that.loading = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 配置查看大图插件
    inited(viewer) {
      this.$viewer = viewer;
      this.$viewer.index = this.activeIndex;
      // this.$viewer.options.button = true
      // this.$viewer.options.navbar = true
      // this.$viewer.options.title = true
      // this.$viewer.options.toolbar = true
    },

    //点击图片查看大图
    amplification() {
      // console.log(this.recognitionImage)
      console.log("v-viewer组件事件");
      // this.iconIf = true
      this.$viewer.show();
    },

    // 害虫资料-详细信息
    insectData(index, row) {
      var that = this;
      var isClick = that.isClick;
      if (isClick === true) {
        that.isClick = false;
        var name = row.name == undefined ? row.pest_name : row.name;
        let postData = that.qs.stringify({
          code: "2", //1病害 2虫害
          name: name, //害虫名称
          page: 1,
        });

        that
          .$axios({
            method: "post",
            url: "/api/api_gateway?method=pest.pests.pests_search",
            data: postData,
          })
          .then((res) => {
            if (res.data.data.nums == 0) {
              //没有数据
              this.$message({
                message: "暂无此虫害的信息",
                type: "warning",
                duration: 1500,
              });
            } else if (res.data.data.data.length !== 0) {
              //有数据
              that.insectAxios(res.data.data.data[0].id);
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    insectAxios(id) {
      let that = this;
      let postData = that.qs.stringify({
        code: "2",
        page: 1,
        pest_id: id,
      });
      that
        .$axios({
          method: "post",
          url: "api/api_gateway?method=pest.pests.pests_info",
          data: postData,
        })
        .then((res) => {
          that.popUpData = res.data.data;
          that.dialogFormVisible = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 列表图片加载失败
    errImg(e) {
      e.target.src = "/images/expertDiagnosis/ku/noData.jpg";
    },

    //switch轮播初始化
    switchChu() {
      var swiper = new Swiper(".swiper-container", {
        initialSlide: 0,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
      });
    },

    add() {
      let that = this;
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.worm_lamp.html_test",
        })
        .then((res) => {
          that.htmlData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 打开图片网格
    openGridding() {
      var arr = [];
      arr = this.$viewer.element.ownerDocument.images;
      var a;
      for (var i = 0; i < arr.length; i++) {
        var k = arr[i].outerHTML.indexOf('style="');
        var j = arr[i].outerHTML.indexOf("margin-top:");
        if (k !== -1 && j !== -1) {
          a = arr[i].outerHTML;
        }
      }
      var b;
      var c;
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      // var x = y + 'z-index:10000;'
      var domData = document.getElementById("reseau");
      // console.log(domData)
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="z-index: 10000;' +
        y +
        '"' +
        " />" +
        '<div style="color: red; font-weight: 550; float: left; position: absolute; left: 3.5rem;bottom: .8rem; z-index: 10001; font-size: 15px;">' +
        "*注：每个网格大小为20*20mm" +
        "</div>" +
        "</div>";
      domData.innerHTML = html;
      console.log(domData);
      this.iconIf = false;
    },
    // 关闭图片网格
    offGridding() {
      var domData = document.getElementById("reseau");
      var html = "";
      domData.innerHTML = html;
      this.iconIf = true;
    },

    //打开页面加载标签
    renderData(data) {
      this.$nextTick(() => {
        this.$refs["aiPanel-editor"].getMarker().renderData(data);
      });
    },
    onAnnoAdded() {},
    onAnnoSelected(data, uniqueKey) {},
    onUpdated(data) {},
    onReady() {},
    onImageLoad(e) {},

    // 手动标注表格样式
    tableRowClassName({ row, rowIndex }) {
      if (row.mark !== null && row.serila === null) {
        // console.log(11 + "--------" + row.mark);
        return "success-row";
      }
      return "";
    },
  },
  components: {
    DateSearch,
    "ui-marker": AIMarker,
  },
};
</script>

<style lang='less' scoped>
.box-card {
  position: relative;
}
.equipInfo {
  .equipMsg {
    font-size: 14px;
    color: #3d3d3d;
    span {
      margin-left: 5px;
    }
  }
  .dateBox {
    display: flex;
    .viewSwitch {
      margin-left: 10px;
    }
  }
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
}

.time-check {
  display: flex;
  justify-content: space-between;
  .el-input__inner {
    margin-left: 10px;
    width: 222px;
  }
  .viewSwitch {
    margin-left: 10px;
  }
}

.chartsSelect {
  text-align: right;
  position: absolute;
  z-index: 999;
  left: 0;
  right: 21px;
}
.charts,
.pie {
  height: 423px;
}
.equipStatus {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  .equipIcon {
    margin-right: 14%;
  }
  .equipParams {
    min-width: 80px;
    line-height: 27px;
    p {
      color: #a6a6a6;
    }
  }
}

.dataTableSearch {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  .el-input__inner {
    width: 222px;
  }
}

// .check-btns{display:flex;justify-content: space-between;margin-bottom:20px}
.echarts {
  width: 100%;
  height: 300px;
}

// 暂无数据
.noDataClass {
  text-align: center;
  font-size: 25px;
  line-height: 450px;
  color: rgb(122, 115, 115);
}

.iptList {
  display: flex;
  margin: 15px 0 15px 0;
}
.iptTxt {
  text-align: right;
  width: 20%;
  margin: 0 5% 0 0;
  display: inline-block;
}
.iptBox {
  width: 40%;
}

// 识别成功后的样式
.enlargementImg {
  width: 80%;
  margin: 0 0 0 2.2rem;
}

.enlargementDiv {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  padding: 3px 37px;
  width: 80%;
  margin: 0 0 0 1.7rem;
  .name {
    font-size: 14px;
    i {
      font-size: 20px;
      font-weight: bold;
    }
    i,
    span {
      color: #14a478;
    }
  }
  .number {
    span {
      color: #14a478;
    }
  }
}

.discernResult {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  padding: 3px 37px;
  .name {
    font-size: 14px;
    i {
      font-size: 20px;
      font-weight: bold;
    }
    i,
    span {
      color: #14a478;
    }
  }
  .number {
    span {
      color: #14a478;
    }
  }
}

// 弹框
.expertDiagnosis_library_main_popUp {
  .expertDiagnosis_library_main_popUp_li {
    display: flex;
    margin: 0 0 30px 0;
    // 害虫名称
    .expertDiagnosis_library_main_popUp_li_name {
      color: #000;
      font-size: 16px;
      font-weight: 550;
    }
    .expertDiagnosis_library_main_popUp_li_nameVal {
      font-weight: 550;
    }
    // 害虫图片
    .expertDiagnosis_library_main_popUp_li_img {
      font-size: 16px;
      font-weight: 550;
      color: #000;
    }
    .expertDiagnosis_library_main_popUp_li_imgVal {
      width: 160px;
      height: 160px;
      border-radius: 10px;
    }
    // 详细信息
    .expertDiagnosis_library_main_popUp_li_details {
      // width: 188px;
      width: 80px;
      font-size: 16px;
      font-weight: 550;
      color: #000;
    }
    .expertDiagnosis_library_main_popUp_li_detailsVal {
      line-height: 30px;
      font-weight: 550;
      width: 800px;
      text-align: left;
    }
  }
}

// 设备图片
.swiper-container {
  width: 100%;
  // height: 100%;
  // height: 1.8vh;
}
.swiper-slide {
  width: 100%;
  // height: 100%;
  // margin: 0 10px;
  .swiper-slide-img {
    width: 100%;
    height: 100%;
  }
}

// 查看大图的图片样式
.griddingBox {
  position: absolute;
  right: 9.9rem;
  // bottom: 5.9%;
  bottom: 6.2%;
  z-index: 10001 !important;
}
.griddingLine {
  // width: 100%;
  // height: 100%;
  width: 73%;
  height: 81.4%;
  z-index: 10000 !important;
  position: absolute;
  left: 3.25rem;
  top: 0.55rem;
}
.griddingLine img {
  width: 100%;
  height: 100%;
}

.viewer-move {
  background-image: url("../../../../static/images/gridding.png");
}

.btn-box {
  padding: 15px 0;
  text-align: right;
}
/deep/.g-image-op {
  bottom: -24px;
}
/deep/.g-image-op-content {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}
</style>


<style lang="less">
.el-table .warning-row {
  background: oldlace !important;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: 0 !important;
}

// 修改手动标注弹框的鼠标样式
.vmr-ai-raw-image-mask {
  cursor: default !important;
}
.annotation {
  cursor: default !important;
}
</style>