<!--  -->
<template>
  <div class="photosbox">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p @click="backtrack" 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="capzuo_left">
          <span>设备ID：{{ id }}</span>
          <span>设备名称：{{ equipStatusObj.name || "无" }}</span>
          <span>位置：{{ equipStatusObj.addr || "暂无地址" }}</span>
        </div>
        <div class="capzuo_right">
          <div class="capzuo_right_left">
            <div>
              <el-button
                v-if="delBtnState"
                size="mini"
                @click="equipStatusCheck('2')"
                >批量删除</el-button
              >
              <el-button size="mini" @click="equipStatusCheck('7')"
                >图片下载</el-button
              >
              <el-button size="mini" @click="equipStatusCheck('6')"
                >短信预警</el-button
              >
              <el-button size="mini" @click="equipStatusCheck('0')"
                >拍照</el-button
              >
              <el-button size="mini" @click="equipStatusCheck('1')"
                >刷新</el-button
              >
            </div>
            <div class="modulebox">
              <template v-if="downTab">
                <!-- 下载图片 -->
                <el-checkbox-button
                  size="mini"
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox-button
                >
                <el-button size="mini" @click="equipStatusCheck('8')"
                  >下载</el-button
                >
                <el-button size="mini" @click="equipStatusCheck('9')"
                  >取消</el-button
                >
              </template>
              <template v-if="deleTab">
                <!-- 批量删除-->
                <el-checkbox-button
                  size="mini"
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox-button
                >
                <el-button size="mini" @click="equipStatusCheck('3')"
                  >删除</el-button
                >
                <el-button size="mini" @click="equipStatusCheck('4')"
                  >取消</el-button
                >
              </template>
            </div>
          </div>
          <div class="capzuo_right_right">
            <el-date-picker
              v-model="timearr"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              @change="dateChange"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <div class="baselistbox_img">
      <div class="baselistbox_imgbox">
        <div class="listimgbox">
          <div style="margin: 0 0 0 -12px" v-if="imgListShow">
            <div class="">
              <el-row>
                <el-col
                  :span="6"
                  v-for="(item, index) in imgDataList"
                  :key="index"
                >
                  <div
                    class="imgListData"
                    style="
                      height: 245px;
                      margin: 0 0 0 10px;
                      text-align: center;
                      background: #fff;
                      border-radius: 5px;
                      position: relative;
                      padding: 25px;
                      border: 1px solid #eee;
                    "
                  >
                    <div class="photoInfo">
                      <template>
                        <div v-if="userType == 1">
                          <i
                            class="iconfont icon-shanchu"
                            v-show="delBtnState && downBtnState"
                            @click="delectImg(item.ids)"
                          ></i>
                        </div>
                        <el-checkbox
                          style="width: 100%; height: 183px"
                          v-show="
                            (!downTab && deleTab) || (!deleTab && downTab)
                          "
                          :value="idList.indexOf(item.ids) != -1"
                          @change="stopDefault($event, item)"
                        ></el-checkbox>
                      </template>
                    </div>
                    <div style="height: 200px; line-height: 200px">
                      <img
                        style="width: 96%; height: 96%; margin: 4px 0 0 0"
                        v-lazy="item.addr + '?' + imgTime"
                        @click="amplificationA(item, index)"
                        alt="原图"
                      />
                    </div>
                    <ul class="result_ul" style="height: 45px">
                      <li class="result_list">
                        <div class="result_listBox">
                          <div class="result_listBox_circle">
                            时间：{{ (item.addtime * 1000) | formatTime }}
                          </div>
                          <div
                            style="
                              display: flex;
                              justify-content: space-between;
                            "
                          >
                            <div
                              class="result_listBox_sum"
                              v-if="
                                ((userType == 1 || disableVal == 1) &&
                                  equipStatusObj.disable == '0') ||
                                (userType !== 1 &&
                                  equipStatusObj.disable !== '0')
                              "
                            >
                              害虫总数：
                              <span>{{ item.num }}</span>
                              头
                            </div>
                            <div class="result_listBox_btn">
                              <el-button
                                @click="pictureDetailsFun(item, index)"
                                size="mini"
                                type="warning"
                                >查看详情
                                <!-- <div style="
                              line-height: 12px;
                              margin: 0 0 0 5px;
                              display: inline-block;
                            "
                          >
                            <i style="" class="iconfont icon-jiantou"></i>
                          </div> -->
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 暂无数据 -->
          <div class="expertDiagnosis_referral_units_not" v-else>
            <img
              src="../../../static/images/quexingye.png"
              alt
              class="expertDiagnosis_referral_units_notImg"
            />
          </div>
        </div>
        <div class="listtree">
          <el-tree
            style="max-height: 700px; overflow: auto"
            :data="dataA"
            accordion
            :props="defaultProps"
            :load="loadNode"
            lazy
            :highlight-current="true"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <i :class="[renderIconContent(node, data), 'treeicon']"></i
                >{{ data.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,jumper"
          :total="totalNum"
          :page-size="12"
          @current-change="changePage"
          v-if="imgListShow"
        >
        </el-pagination>
      </div>
    </div>
    <viewer
      v-show="imageListtData"
      :images="recognitionImage"
      ref="viewer"
      @inited="inited"
      :index="3"
    >
      <img
        v-for="(src, index) in recognitionImage"
        :src="src"
        class="image"
        id="ceshiID"
        :key="index"
        style="width: 100px; height: auto"
      />
    </viewer>
    <!-- 查看大图 -->

    <!-- 测试 -->
    <!-- <ul
      class="newImgOperation"
      style="display: flex"
      id="iconBox"
      v-show="imageListtData"
    >
      <li @click="handAddFun()">
        <img src="../../../static/images/cbdPicture/6.png" alt="" />
        <span>手动添加</span>
      </li>
      <li @click="handAddDataFun()">
        <img src="../../../static/images/cbdPicture/8.png" alt="" />
        <span>手动统计</span>
      </li>
      <li v-if="iconIf" @click="openGridding()">
        <img
          id="iconDom"
          class="icon1"
          src="../../../static/images/cbdPicture/10.png"
          alt=""
        />
        <span>网格显示</span>
      </li>
      <li v-else @click="offGridding()">
        <img
          id="iconDom"
          class="icon2"
          src="../../../static/images/cbdPicture/10.png"
          alt=""
        />
        <span>网格显示</span>
      </li>
    </ul> -->
    <div id="reseau"></div>
    <!-- 自动识别对话框 -->
    <el-dialog
      title="识别结果"
      :visible.sync="discernVisible"
      width="30%"
      :fullscreen="enlargement"
    >
      <div v-loading="loading" v-if="notAvailableShow">
        <div class="" style="position: relative; left: 0; top: 0">
          <img
            v-if="enlargementImg"
            :src="this.recognitionImage"
            @click="amplification()"
            style="width: 100%; height: 100%"
            alt
          />
          <img
            v-else
            :src="this.recognitionImage"
            @click="amplification()"
            alt
            class="enlargementImg"
          />

          <img
            v-show="griddingShow"
            :src="griddingImgs[2].img"
            alt=""
            class="enlargementImgA"
          />
          <!-- 测试网格图 -->
        </div>
      </div>

      <!-- 识别失败 -->
      <div v-loading="loading" v-else>
        <img
          src="../../assets/images/forecasting/cbd/discern.png"
          alt=""
          style="width: 25%; margin: 0 0 0 180px"
        />
      </div>
      <div class="" style="display: flex">
        <div
          v-show="griddingShow"
          style="
            color: red;
            font-weight: 330;
            float: left;
            position: absolute;
            left: 2.5rem;
            bottom: 0.65rem;
          "
        >
          *注：每个网格大小为20*20mm
        </div>
        <el-button
          size="small"
          @click="again()"
          type="warning"
          style="margin: 0 0 0 85%"
          v-if="notAvailableShow"
          >重新识别</el-button
        >
        <!-- 识别失败 -->
        <div v-else style="font-size: 20px; margin: 25px auto; color: #838383">
          <span
            >昆虫识别失败，请<span
              style="color: #17bb89; cursor: pointer"
              @click="again()"
              >重新识别</span
            ></span
          >
        </div>
        <el-button
          v-show="btnShow"
          size="small"
          @click="assist()"
          type="success"
          style="margin: 0 0 0 -11%"
          id="btnAssist"
          >{{ griddingTxt }}</el-button
        >
      </div>

      <div>
        <div
          :class="enlargementImg == false ? 'enlargementDiv' : 'discernResult'"
          v-for="(item, index) in this.recognitionData"
          :key="index"
        >
          <div class="name">
            <i class="icon-zhuti_tiaosepan_o iconfont"></i>
            害虫名称
            <span>{{ item.result_list }}（序号：{{ item.number }}）</span>
          </div>
          <div class="number">
            害虫个数：
            <span>{{ item.nums }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 手动添加对话框 -->
    <el-dialog
      :title="this.tltName"
      :visible.sync="handAddVisible"
      width="580px"
    >
      <div class="handAddBtn" v-show="handAddState == 1">
        <i
          class="iconfont el-icon-circle-plus-outline"
          @click="handAddState = 2"
        ></i>
        <i
          class="iconfont el-icon-remove-outline"
          @click="handAddState = 3"
        ></i>
      </div>
      <div class="handAddForm" v-show="handAddState == 1">
        <el-form ref="ruleForm" :model="form" label-width="80px">
          <el-form-item label="害虫名称" required>
            <!-- <el-select v-model="form.region" placeholder="请选择害虫名称"> -->
            <el-select v-model="form.pest_name" placeholder="请选择害虫名称">
              <el-option
                v-for="(item, index) in this.reInsectList"
                :key="index"
                :label="item.pest_name"
                :value="item.pest_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="害虫数量" required>
            <!-- <el-input type="number" v-model="form.name"></el-input> -->
            <!-- <el-input type="number" v-model="form.nums"></el-input> -->
            <el-input type="number" min="0" v-model="form.pest_num"></el-input>
          </el-form-item>
          <el-form-item label="作物种类">
            <!-- <el-input v-model="form.name"></el-input> -->
            <!-- <el-input v-model="form.type"></el-input> -->
            <el-input v-model="form.crop_name"></el-input>
          </el-form-item>
          <el-form-item label="虫害阶段">
            <!-- <el-input v-model="form.name"></el-input> -->
            <el-input v-model="form.pest_case"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="handAddState == 2">
        <el-page-header
          @back="(handAddState = 1), getBack()"
          content
        ></el-page-header>
        <div class="handAddWormName">
          <label>害虫名称：</label>
          <el-input
            placeholder="请输入新增的害虫名称"
            v-model="selectItem"
            clearable
          ></el-input>
        </div>
      </div>
      <div v-show="handAddState == 3">
        <el-page-header @back="handAddState = 1" content></el-page-header>
        <div class="handDelWormName">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="(item, index) in this.reInsectList"
              :key="index"
              :label="item.pest_name"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div v-show="handAddState == 1">
          <el-button
            @click="(handAddVisible = false), resetField('ruleForm')"
            size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="onSubmit" size="mini"
            >确 定</el-button
          >
        </div>
        <div v-show="handAddState == 2">
          <el-button @click="handAddVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="addInsectName()" size="mini"
            >确 定</el-button
          >
        </div>
        <div v-show="handAddState == 3">
          <el-button @click="handAddVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="delInsect()" size="mini"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 手动统计对话框 -->
    <el-dialog
      title="手动统计"
      :visible.sync="handAddDataVisible"
      width="770px"
    >
      <el-table
        :data="threshold"
        stripe
        style="width: 100%"
        ref="multipleTable"
        @row-click="handleEdit"
      >
        <el-table-column prop="pest_name" label="害虫名称"></el-table-column>
        <el-table-column prop="pest_num" label="数量"></el-table-column>
        <el-table-column prop="crop_name" label="作物种类"></el-table-column>
        <el-table-column prop="pest_case" label="虫害阶段"></el-table-column>
        <el-table-column label="操作" width="150">
          T
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showThresholdEditDialog()"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              size="mini"
              @click="showThresholdEditDel(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// import CbdTime from "@/components/cbdTime";
var imgIndex = null;
// 测试v-viewer注册
import Vue from "vue";
import { AIMarker } from "Vue-Picture-BD-Marker";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
// import { isArray, time } from "highcharts";
// import { Texture } from "../../../../static/js/three";
Vue.use(Viewer);
// Viewer.setDefaults({
//   inline: false,
//   button: true, //右上角按钮
//   navbar: false, //底部缩略图
//   title: false, //当前图片标题
//   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 = "flex";
//   },
//   shown: function (e) {},
//   hide: function (e) {
//     // this.offGridding()
//     console.log(e.type, "图片隐藏完成");
//     // console.log(document.getElementById("ceshiID"));
//     // var domData = document.getElementById("reseau");
//     // var html = "";
//     // domData.innerHTML = html;
//     // var iconBox = document.getElementById("iconBox");
//     // iconBox.style.display = "none";
//   },
//   hidden: function (e) {
//     var domData = document.getElementById("reseau");
//     var html = "";
//     // domData.innerHTML = html;
//     console.log(e.type, "图片隐藏结束");
//   },
//   view: function (e) {},
//   viewed: function (e) {
//     console.log("8001");
//     var iconDom = document.getElementById("iconDom");
//     var j = JSON.stringify(iconDom);
//     var g = j.indexOf("icon2");
//     if (g !== -1) {
//       var b;
//       var c;
//       var a = e.path[0].ownerDocument.images[20].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 q = x.replace("width: ", "");
//       var o = q.replace("max-width: ", "");
//       o = o.replace("relative", "absolute");
//       var domData = document.getElementById("reseau");
//       var imgs = "./../../../static/images/gridding/2.png";

//       var html =
//         '<div class="griddingLine" v-show="iconShow">' +
//         '<img src="' +
//         imgs +
//         '" alt="" class="" ' +
//         'style="' +
//         o +
//         '"' +
//         " />" +
//         "</div>";
//       domData.innerHTML = html;
//     }
//   },
//   zoom: function (e) {
//     console.log("8002");
//     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 imgs = "./../../../static/images/gridding/2.png";

//       console.log("----------------------------------");
//       console.log(e.detail.originalEvent);
//       console.log("----------------------------------");
//       // if (e.detail.originalEvent.path !== undefined) {
//       if (e.detail.originalEvent !== null) {
//         console.log("我运行了这里");
//         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 q = x.replace("width: ", "");
//         var o = x.replace("max-width: ", "");
//         o = o.replace("relative", "absolute");
//         console.log(o);
//       } else {
//       }

//       var domData = document.getElementById("reseau");
//       var html =
//         '<div class="griddingLine" v-show="iconShow" style="overflow: hidden;' +
//         o +
//         '" >' +
//         '<img src="' +
//         imgs +
//         '" alt="" class="" ' +
//         'style="' +
//         o +
//         '"' +
//         " />" +
//         "</div>";
//       domData.innerHTML = html;
//     }
//   },
//   zoomed: function (e) {
//     console.log("这里被运行了");
//     var iconDom = document.getElementById("iconDom");
//     var j = JSON.stringify(iconDom);
//     var g = j.indexOf("icon2");
//     var imgs = "./../../../static/images/gridding/2.png";
//     if (g !== -1) {
//       // if (e.detail.originalEvent.path !== undefined) {
//       if (e.detail.originalEvent !== null) {
//         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 q = x.replace("width: ", "");
//         var o = x.replace("max-width: ", "");
//         o = o.replace("relative", "absolute");
//         var imgo = o.replace("absolute", "none");
//         var imgo = imgo.replace("width: ", "");
//         var domData = document.getElementById("reseau");
//         var html =
//           '<div class="griddingLine" v-show="iconShow" style="overflow: hidden;' +
//           o +
//           '" >' +
//           '<img src="' +
//           imgs +
//           '" alt="" class="" ' +
//           'style="' +
//           imgo +
//           '"' +
//           " />" +
//           '<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;
//       } else {
//       }
//     }
//   },
// });
export default {
  data() {
    return {
      isShuaxin: false,
      imgTime: "",
      isShow: false, //控制遮罩层marks和大图片是否显示"
      left: 0, //marks左移位置
      top: 0, //marks下移位置
      leftLgImg: 0, //大图lgImg移动的位置
      topLgImg: 0, //大图lgImg移动的位置
      downTab: false,
      deleTab: false,
      // 状态信息
      equipStatusObj: {
        name: this.$route.query.name,
        addr: this.$route.query.addr,
        disable: this.$route.query.disable,
        identify_model: this.$route.query.identify_model,
      },
      zanwu: "/images/expertDiagnosis/zanwu.png",
      enlargement: false, //识别弹框放大
      enlargementImg: true, //图片样式控制
      loading: false, //识别结果加载
      tltName: "", //弹出层标题名
      id: this.$route.params.id,
      //在线状态按钮切换
      equipStatus: "0",
      //设备列表
      equipList: [],
      delBtnState: true,
      downBtnState: true,
      handAddState: 1,
      checkList: [],
      //参数
      f_id: "",
      ename: "",
      page: 1,
      timeRange: "",
      dver: "",
      // 设备点击高亮
      highlight: "",
      currImei: "",

      itemId: "",
      selectItem: "", //1设备号，2用户名
      searchVal: "",
      form: {
        pest_num: "", //害虫数量
        crop_name: "", //作物种类
        pest_case: "", //虫害阶段
        pest_name: "", //害虫名称
      },

      //设备列表
      queryInfo: {
        begin: "",
        end: "",
        page: 1,
        is_online: "",
        dver: "",
      },
      totalNum: 0,
      //自动识别对话框
      discernVisible: false,
      //手动添加对话框
      handAddVisible: false,
      //手动统计添加对话框
      handAddDataVisible: false,
      //手动控制开关
      value: false,
      //手动控制数据
      handControlSwitch: [],
      // 手动控制-获取到当前点击行的数据
      handleEditData: "",
      // 实时状态数据
      reaTimeStatusList: [],
      //手动统计数据
      threshold: [],
      //定时控制
      timeControl: [
        {
          id: 1,
          name: "开关一",
          num: "e1",
          time: "2020",
          duration: 2,
          state: true,
        },
      ],
      imgDataList: [], //图片列表数据
      imgListShow: true, //图片列表数据是否显示
      reInsectList: [], //手动添加害虫名称列表数据
      addFunData: {}, //点击获取到的当前图片数据
      recognitionData: [], //识别出的数据
      idList: [],
      // idList: [11231, 11230, 11229],
      timeRange: [], //筛选时间数据
      againData: {}, //需要重新识别功能获取的单个列表数据
      btnShow: false, //网格线按钮
      griddingShow: false, //网格线
      griddingTxt: "", //按钮文本
      imageListtData: false, //查看大图插件
      recognitionImage: [], //图片数组
      temporaryImage: [], //临时图片数组
      iconShow: false, //icon
      iconIf: true,
      iconShowA: false,
      imgInfo: {}, //存图片的宽高信息
      cy_id: "",
      times: 50, //下载图片定时器次数,超过50停止下载
      imgTagDataVisible: false,
      uuid: "0da9130",
      readOnly: false, //是否只读
      currentImage: "", //图片标注的图片
      tagImgId: "",
      imgMark: [], //单张图片标注数据
      setdata: [], //标注的数据
      setdataNum: {}, //每种虫子个数
      tagName2: "",
      lookWormName: "",
      // 识别是否禁止
      btnOperation: "", //按钮显示文字
      typeOperation: "", //按钮类型

      // 雨控状态提醒
      rainControl: false,

      // 网格图片
      griddingImgs: [
        {
          img: "../../../../static/images/gridding/1.png",
        },
        {
          img: "../../../../static/images/gridding/2.png",
        },
        {
          img: "../../../../static/images/gridding/2.png",
        },
      ],

      // 新图片列表
      checkListA: [],
      activeNames: ["1"],
      operation: false,
      selectedList: [],
      dataList: [], // 选中的图片全部数据
      recognitionImageA: [],
      // 框选测试
      selectList: [],
      preventParent: false,
      listShow: true,
      dialogVisible: false, //图片下载对话框
      value2: "", //时间段
      checkListData: [],
      // checkedShow: true
      listIndex: null, //点击列表下标
      listidentification: "", //标识

      listIndexA: null, //测试用
      imagesListData: [], //测试用
      showLen: 10, //测试用
      loadingMore: false, //加载更多
      notAvailableShow: true, // 识别失败
      disable: null, // 识别功能 0 禁用识别的状态    1 开启识别的状态

      // 树形控件
      dataA: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      deviceAddTimeNum: null, // 当前设备添加时间
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 周、月、年
      screenTimeList: [
        {
          name: "一周",
        },
        {
          name: "一月",
        },
        {
          name: "一年",
        },
      ],

      // 图片详情
      pictureDetails: false, // 图片详情
      pictureDetailsFunDataObj: {}, // 图片详情数据
      // cbdPest: dict,
      cbdPest: {},

      disableVal: null, // 该设备是否有识别功能  0没有  1有

      //保存一个标识，用来区分是点击还是自动获取
      sign: null,
      timeScreenData: null,

      // 树形插件数据列表
      timeData: [],

      // 查看详情是否标注手动标签
      imgShow: false,

      imgDiscern: "", // 查看详情中的加手动标注的图片url地址
      labelArr: [], // 处理后的手动标注数据列表
      labelShow: false,

      // 图片全选
      isIndeterminate: true,
      checkAll: false,
      wormy: false,

      // page是否等于1
      isPageOne: true,
      timearr: [],
    };
  },
  mounted() {
    this.imgListData(); //图片列表数据请求
    // this.rainCharge(); //监测该设备是否在雨控状态
    // 测试获取当前设备的设备添加时间
    // this.deviceAddTime()
    this.standardization();
    var time = localStorage.getItem("time_begin");
    this.currentPage = localStorage.getItem("cbdpage")
      ? Number(localStorage.getItem("cbdpage"))
      : 1;
    if (localStorage.getItem("cbdpage")) {
      this.isPageOne = false;
    }
    localStorage.removeItem("cbdpage");
    if (time) {
      this.queryInfo.begin = localStorage.getItem("time_begin");
      this.queryInfo.end = localStorage.getItem("time_end");
      localStorage.removeItem("time_begin");
      localStorage.removeItem("time_end");
    }
  },
  computed: {
    userType: function () {
      //获取用户类型
      return window.sessionStorage.getItem("myuser_type");
    },
    tagName: {
      get: function () {
        return this.tagName2;
      },
      set: function (value) {
        this.tagName2 = value.replace(/[\w]/g, "");
      },
    },

    // 判断加载条数是否大于列表数据长度
    // noMore() {
    noMore: {
      get() {
        if (this.imagesListData.length !== 0 && this.listIndex !== null) {
          if (this.listIndex == null) {
            return this.showLen > this.imagesListData[0].img.length;
          } else {
            return (
              this.showLen > this.imagesListData[this.listIndex].img.length
            );
          }
        }
      },

      set() {},
    },
    // 加载完成
    disabledA() {
      return this.loadingMore || this.noMore;
    },
    countData() {
      // 计算属性使用切片生成新数组
      let data = [];
      console.log(this.imagesListData);
      if (this.imagesListData.length !== 0 && this.listIndex !== null) {
        // 大于三条，使用切片，返回新数组
        if (this.imagesListData[this.listIndex].img.length > 10) {
          data = this.imagesListData[this.listIndex].img.slice(0, this.showLen);
          return data;
        } else {
          // 否则使用原来数组，不进行切片处理
          data = this.imagesListData[this.listIndex].img;
          return data;
        }
      }
    },

    // 页码
    pageChange() {
      return this.currentPage;
    },
  },
  watch: {
    // 手动添加弹出层监测
    handAddVisible(val) {
      if (val == false) {
        this.handAddState = 1; //显示手动添加首页
        this.selectItem = ""; //清空害虫名称添加input中的数据
        this.checkList = []; //清空害虫名称删除多选中的数据
        this.form.pest_num = "";
        this.form.crop_name = "";
        this.form.pest_case = "";
        this.form.pest_name = "";
      }
    },

    // 识别结果弹出层监测
    discernVisible(val) {
      if (val == false) {
        this.recognitionData = [];
        this.recognitionImage = [];
        // this.recognitionImage = this.temporaryImage
        console.log(this.recognitionImage);
        this.enlargement = false;
        this.enlargementImg = true;
        this.griddingShow = false;
        this.btnShow = false;
        this.notAvailableShow = true;
      } else {
        this.griddingTxt = "使用辅助线";
      }
    },

    // 批量刷新监测
    delBtnState(val) {
      if (val == true) {
        this.idList = [];
      }
    },

    // 识别结果弹框放大缩小
    enlargementImg(val) {
      console.log(val);
      if (val == true) {
        this.btnShow = false;
      }
    },

    btnShow(val) {
      if (val === false) {
        this.griddingTxt = "使用辅助线";
      }
    },

    griddingShow(val) {
      if (val === true) {
        this.griddingTxt = "关闭辅助线";
      } else {
        this.griddingTxt = "使用辅助线";
      }
    },
    selectedList(val) {
      console.log(val);
    },
    imgDataList(val) {
      if (this.listIndex !== null) {
        if (
          val[this.listIndex].checked == false &&
          this.listidentification == "1"
        ) {
          val[this.listIndex].checked = true;
          val[this.listIndex]["tltTxt"] = "收起";
          for (var i = 0; i < val.length; i++) {
            if (i !== this.listIndex) {
              val[i].checked = false;
              val[i]["tltTxt"] = "展开";
            }
          }
          this.listidentification = "";
        }
      }

      // if (
      //   val[this.listIndex].checked == false &&
      //   this.listidentification == "1"
      // ) {
      //   val[this.listIndex].checked = true;
      //   val[this.listIndex]["tltTxt"] = "收起";
      //   for (var i = 0; i < val.length; i++) {
      //     if (i !== this.listIndex) {
      //       val[i].checked = false;
      //       val[i]["tltTxt"] = "展开";
      //     }
      //   }
      //   this.listidentification = "";
      // }
    },

    loadingMore(val) {
      // console.log(val + '加载更多')
    },
    noMore(val) {
      console.log(val + "没有更多了");
    },

    // 页码变化
    pageChange(val) {
      console.log("pageChange", val);
      this.equipStatusCheck("4");
    },

    downBtnState(val) {
      if (val == true) {
        this.dataList = [];
        this.idList = [];
      }
    },

    pictureDetails(val) {
      // if (val == false) {
      //   this.addFunData = {}
      // }
    },
    iconShow(val) {
      console.log(val);
    },
  },

  methods: {
    backtrack() {
      this.$router.go(-1);
    },
    //鼠标进入和离开
    enter() {
      this.isShow = true;
    },
    leave() {
      this.isShow = false;
    },
    //遮罩层放大镜
    //遮罩层放大镜
    marks(e) {
      var marksWidth = 100; //marks的宽
      var marksHeight = 100; //marks的高
      this.left = e.offsetX - marksWidth / 2;
      this.top = e.offsetY - marksHeight / 2;
      if (this.left < 0) {
        this.left = 0;
      } else if (this.left > 225) {
        // 小盒子的宽
        this.left = 225;
      }
      if (this.top < 0) {
        this.top = 0;
      } else if (this.top > 225) {
        // 小盒子的高
        this.top = 225;
      } //大d图片除以小的图片的宽高 //                            大宽   小宽

      this.leftLgImg = (-this.left * 400) / 325 - 90; //                           大高    小高
      this.topLgImg = (-this.top * 400) / 325;
    },
    // 列表图片加载失败
    errImg(e) {
      e.target.src = $http + "/images/expertDiagnosis/ku/noData.jpg";
    },
    // 图片全选
    handleCheckAllChange(val) {
      console.log("全选val", val);
      if (val == true) {
        var list = [];
        var data = [];
        for (var i = 0; i < this.imgDataList.length; i++) {
          list.push(this.imgDataList[i].ids);
          data.push(this.imgDataList[i]);
        }
        this.idList = list;
        this.dataList = data;
        console.log("idList:", this.idList);
        console.log("dataList:", this.dataList);
      } else if (val == false) {
        this.idList = [];
        this.dataList = [];
        console.log("空idList:", this.idList);
        console.log("空dataList:", this.dataList);
      }
      this.isIndeterminate = false;
    },

    //在线状态选择
    equipStatusCheck(flag) {
      this.active = flag;
      if (flag == 0) {
        //拍照
        this.equipBtnControl("takephoto");
      }
      if (flag == 1) {
        if (!this.isShuaxin) {
          this.isShuaxin = true;

          //   this.$refs.timeCirculation.num = 1; // 改变子组件data中的num值，以免造成一直重复请leftImg求消耗内存
          this.imgListData(); //图片列表数据请求
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.success("图片刷新成功");
          }
        }
      }
      if (flag == 2) {
        console.log("222222222批量删除downTab");
        //批量删除
        this.imgDataList.map((item) => {
          item.disabled = true;
        });
        // console.log(this.imgDataList)
        this.delBtnState = true;
        this.deleTab = true;
        this.downBtnState = !this.downBtnState;
        this.downTab = false;
      }

      if (flag == 3) {
        //删除
        if (this.idList.length == 0) {
          this.$message.warning("请选择要删除的图片！");
        } else {
          this.delImgFun(this.idList);
        }
      }

      if (flag == 4) {
        console.log("44444444444批量删除取消");
        //取消
        this.imgDataList.map((item) => {
          item.disabled = false;
        });
        this.delBtnState = true;
        this.idList = [];
        this.dataList = [];
        this.deleTab = false;
        this.checkAll = false;
        console.log(
          "delBtnState",
          this.delBtnState,
          "downBtnState",
          this.downBtnState
        );
      }

      if (flag == 5) {
        this.delImgFun("");
      }
      if (flag == 6) {
        this.$router.push(`/index/messageWarn/${this.id}`);
      }
      if (flag == 7) {
        console.log("删除deleTab", this.deleTab);
        this.downBtnState = !this.downBtnState;
        this.downTab = true;
        this.deleTab = false;
      }
      if (flag == 8) {
        // var a = {};
        var arr = [];
        for (let i = 0; i < this.dataList.length; i++) {
          //   setTimeout(() => {
          //     a["link" + i] = document.createElement("a"); // 创建a标签
          //     a["link" + i].href = this.dataList[i].addr;
          //     a["link" + i].download = "下载图片"; // 重命名文件
          //     a["link" + i].click();
          //   }, i * 1000);
          arr.push(this.dataList[i].ids);
        }
        if (arr.length) {
          this.$axios({
            method: "POST",
            url: "api/img_download",
            data: this.qs.stringify({
              img_id: arr.join(","),
              device_type: 5,
            }),
            headers: {
              // 这里需要使用form-data格式数据发送请求
              "Content-Type": "application/x-www-form-urlencoded",
            },
            responseType: "blob",
          })
            .then((res) => {
              console.log(res);
              const elink = document.createElement("a");
              elink.download = "img.zip";
              elink.style.display = "none";
              const blob = new Blob([res.data], { type: "application/zip" });
              const href = URL.createObjectURL(blob);
              elink.href = href;
              document.body.appendChild(elink);
              elink.click();
              document.body.removeChild(elink);
              window.URL.revokeObjectURL(href);
            })
            .catch(() => {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error("请求图片资源超时，请稍后重试");
              }
            });
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.warning("请选择下载图片");
          }
        }
      }
      // 下载图片取消
      if (flag == 9) {
        this.imgDataList.map((item) => {
          item.checked = false;
        });
        this.checkListData = [];
        this.downBtnState = !this.downBtnState;
        this.isIndeterminate = false;
        this.checkAll = false;
        this.deleTab = false;
        this.downTab = false;
        this.idList = [];
        this.dataList = [];
        console.log(
          "delBtnState",
          this.delBtnState,
          "downBtnState",
          this.downBtnState
        );
      }

      // 开启禁止识别操作
      if (flag == 10) {
        if (this.btnOperation == "开启识别") {
          // 当前处于识别关闭状态
          this.$confirm("确认开启识别状态？")
            .then((_) => {
              this.operationDiscern("enable");
            })
            .catch((_) => {});
        } else if (this.btnOperation == "禁止识别") {
          // 当前处于识别开启状态
          this.$confirm("确认关闭识别状态？")
            .then((_) => {
              this.operationDiscern("disable");
            })
            .catch((_) => {});
        }
      }
      if (flag == 11) {
        // this.$refs.timeCirculation.num = 1;
        this.wormy = !this.wormy;
        this.imgListData();
      }
    },

    // 测试多选框
    stopDefault(e, item) {
      console.log("单选框", e, item);
      if (this.idList.indexOf(item.ids) == -1) {
        this.idList.push(item.ids);
        this.dataList.push(item);
      } else {
        this.idList.splice(this.idList.indexOf(item.ids), 1);
        this.dataList.splice(this.dataList.indexOf(item.ids), 1);
      }

      console.log("", this.idList);
      console.log(this.dataList);
      // e.stopPropagation();
    },

    equipBtnControl(type) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.admin_device_control",
        data: this.qs.stringify({
          cmd: type,
          device_type_id: 3,
          d_id: this.$route.query.d_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("指令下发成功!");
        }
      });
    },
    DateChange() {
      this.currentPage = 1;
      if (this.timeRange) {
        this.queryInfo.begin = parseInt(
          new Date(this.timeRange[0]).getTime() / 1000
        );
        this.queryInfo.end = parseInt(
          new Date(this.timeRange[1]).getTime() / 1000
        );
      } else {
        this.queryInfo.begin = "";
        this.queryInfo.end = "";
      }
      this.imgListData();
    },

    //改变page
    changePage(val) {
      this.listIndex = null;
      this.currentPage = val;
      // this.imgListData(val)
      this.imgListData();
    },
    // 搜索组合数据
    searchEquipList() {
      if (this.selectItem == 1) {
        this.f_id = this.searchVal;
      } else if (this.selectItem == 2) {
        this.ename = this.searchVal;
      }
      // this.getEquipList();
    },
    // 数据详情
    dataDetails(id) {
      this.highlight = 0;
      this.currImei = id;
      this.$router.push(`/cbdDataDetails/${id}`);
    },
    //手动添加
    handAddFun() {
      this.imageListtData = false;
      this.handAddVisible = true;
      this.$viewer.hide();
      // this.addFunData = data;
      this.tltName = "手动添加";
      this.InsectListData(); //手动添加弹框中害虫名称列表数据
    },
    // 手动统计
    handAddDataFun() {
      this.$viewer.hide();
      this.handAddDataVisible = true;
      this.statisticsData(this.addFunData.ids); //请求图片描述
    },
    //识别
    discernFun() {
      this.loading = true;
      this.discernFunData();
    },
    // 识别数据请求
    discernFunData() {
      let that = this;
      that.againData = this.addFunData;
      let postData = that.qs.stringify({
        img_id: this.addFunData.ids,
        ret: "see",
        device_type: "cbd",
        identify_model: this.equipStatusObj.identify_model,
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_discern",
          data: postData,
        })
        .then((res) => {
          that.loading = false;
          // if (res.data.message == "") {
          //   //识别成功
          //   that.recognitionData = res.data.data.result; //数组数据
          //   this.emporaryImage = this.recognitionImage;
          //   this.recognitionImage = [];
          //   that.recognitionImage.push(res.data.data.image);
          // } else {
          //   //识别失败
          //   this.$message({
          //     showClose: true,
          //     message: res.data.message,
          //     type: "warning",
          //   });
          //   this.notAvailableShow = false;
          // }

          if (res.data.message == "") {
            // 识别成功
            var obj = {};
            var list = [];
            obj["indentify_photo"] = res.data.data.image; // 图片
            obj["addr"] = this.pictureDetailsFunDataObj.addr;
            obj["addtime"] = this.pictureDetailsFunDataObj.addtime;
            obj["describe"] = this.pictureDetailsFunDataObj.describe;
            obj["device_id"] = this.pictureDetailsFunDataObj.device_id;
            obj["ids"] = this.pictureDetailsFunDataObj.ids;
            obj["mark"] = this.pictureDetailsFunDataObj.mark;
            obj["time"] = this.pictureDetailsFunDataObj.time;
            var dar = res.data.data.result;
            var arr = [];
            for (var i = 0; i < dar.length; i++) {
              arr.push({
                data: [dar[i].number, dar[i].nums],
                index: i,
              });
            }
            obj["insectSumArr"] = arr;
            var num = 0;
            obj["insectSum"] = arr.map((item) => {
              num += Number(item.data[1]);
              return num;
            });
            this.pictureDetailsFunDataObj = obj;
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                showClose: true,
                message: "识别成功！",
                type: "success",
              });
            }
            this.imgTime = new Date().getTime();
          } else {
            // 识别失败
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: "warning",
              });
            }
          }
        })
        .catch((err) => {
          that.loading = false;
          console.log(err);
          // 识别失败
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              showClose: true,
              message: "识别失败！",
              type: "warning",
            });
          }
        });
    },

    //重新识别数据请求
    again() {
      var that = this;
      // var data = that.againData;
      that.loading = true;
      let postData = that.qs.stringify({
        img_id: this.addFunData.ids,
        ret: "again",
        device_type: "cbd",
        identify_model: this.equipStatusObj.identify_model,
      });
      console.log(postData);
      console.log(this.addFunData.ids);
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_discern",
          data: postData,
        })
        .then((res) => {
          // that.loading = false;
          // console.log(res.data);
          // if (res.data.message == "") {
          //   //识别成功
          //   that.recognitionData = res.data.data.result; //数组数据
          //   console.log(res.data.data.image);
          //   this.$message({
          //     message: "重新识别成功",
          //     type: "success",
          //     duration: 1500,
          //   });
          // } else {
          //   //识别失败
          //   this.$message({
          //     showClose: true,
          //     message: res.data.message,
          //     type: "warning",
          //   });
          //   this.discernVisible = false;
          // }

          that.loading = false;
          if (res.data.message == "") {
            // 识别成功
            var obj = {};
            var list = [];
            obj["indentify_photo"] = res.data.data.image; // 图片
            // obj["indentify_photo"] = res.data.data.image + '?' + new Date().getTime(); // 图片
            obj["addr"] = this.pictureDetailsFunDataObj.addr;
            obj["addtime"] = this.pictureDetailsFunDataObj.addtime;
            obj["describe"] = this.pictureDetailsFunDataObj.describe;
            obj["device_id"] = this.pictureDetailsFunDataObj.device_id;
            obj["ids"] = this.pictureDetailsFunDataObj.ids;
            obj["mark"] = this.pictureDetailsFunDataObj.mark;
            obj["time"] = this.pictureDetailsFunDataObj.time;
            var dar = res.data.data.result;
            var arr = [];
            for (var i = 0; i < dar.length; i++) {
              arr.push({
                data: [dar[i].number, dar[i].nums],
                name: dar[i].result_list,
                index: i,
              });
            }
            obj["insectSumArr"] = arr;
            var num = 0;
            obj["insectSum"] = arr.map((item) => {
              num += Number(item.data[1]);
              return num;
            });
            this.pictureDetailsFunDataObj = {};
            this.pictureDetailsFunDataObj = obj;
            // console.log(this.pictureDetailsFunDataObj.indentify_photo);
            console.log("识别结果", this.pictureDetailsFunDataObj);
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                showClose: true,
                message: "识别成功！",
                type: "success",
              });
            }
            this.imgTime = new Date().getTime();
          } else {
            // 识别失败
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: "warning",
              });
            }
          }
        })
        .catch((err) => {
          that.loading = false;
          console.log(err);
        });
    },
    //获取手动控制开关数据
    handControlSwitchList(id) {
      this.$axios({
        method: "POST",
        url: "/qxz_status",
        data: this.qs.stringify({ e_id: id }),
      })
        .then((res) => {
          if (
            res.data.qxz_switch &&
            eval("(" + res.data.qxz_switch + ")").length > 0
          ) {
            let qxz_switch = eval("(" + res.data.qxz_switch + ")");
            let arr = new Array();
            for (let item1 of qxz_switch) {
              let obj = {};
              if (
                res.data.switch_name &&
                eval("(" + res.data.switch_name + ")").length > 0
              ) {
                let switch_name = eval("(" + res.data.switch_name + ")");
                for (let item2 of switch_name) {
                  if (item1.JK == item2.JK) {
                    if (item2.name) {
                      obj.name = item2.name;
                    } else {
                      obj.name = `开关${Number(item1.JK) + 1}`;
                    }
                    obj.status = item1.status;
                  }
                }
              } else {
                obj.name = `开关${Number(item1.JK) + 1}`;
                obj.status = item1.status;
              }
              arr.push({
                name: obj.name,
                status: obj.status,
              });
            }
            this.handControlSwitch = arr;
          } else {
            this.handControlSwitch = [];
          }
        })
        .catch(() => {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error("获取数据失败!");
          }
        });
    },
    // 手动控制弹框
    lookPhoto(id) {
      this.highlight = 1;
      this.currImei = id;
      this.$router.push(`/cbdDataDetails/${id}`);
    },
    //获取到当前点击行的数据
    handleEdit(row) {
      this.handleEditData = row;
    },
    //编辑手动统计害虫信息
    showThresholdEditDialog() {
      let that = this;
      that.tltName = "编辑";
      that.handAddVisible = true;
      var timer = setTimeout(() => {
        that.form.pest_name = that.handleEditData.pest_name; //害虫名称
        that.form.pest_num = that.handleEditData.pest_num; //害虫数量
        that.form.crop_name = that.handleEditData.crop_name; //作物种类
        that.form.pest_case = that.handleEditData.pest_case; //虫害阶段
        that.InsectListData(); //获取害虫列表数据
      }, 1000);
    },
    // 删除手动统计害虫信息
    showThresholdEditDel() {
      let that = this;
      that
        .$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let postData = that.qs.stringify({
            ret: "del_desc",
            // img_name: that.addFunData.addr, //图片链接
            img_id: that.addFunData.ids, //图片链接
            photo_time: that.addFunData.addtime, //图片时间
            describe: JSON.stringify(that.handleEditData), //图片描述
            device_id: that.addFunData.device_id, //设备号
            id: that.handleEditData.id,
          });
          that
            .$axios({
              method: "post",
              url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_describe",
              data: postData,
            })
            .then((res) => {
              var data = res.data.data;
              if (data == true && res.data.message == "") {
                //成功
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "删除成功",
                    type: "success",
                    duration: 1500,
                  });
                }
                // that.resetField('ruleForm')
                that.statisticsData(that.addFunData.ids);
              } else if (data == null && res.data.message !== "") {
                //失败
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message.error({
                    message: res.data.message,
                    duration: 1500,
                  });
                }
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //图片列表数据请求
    imgListData() {
      //   console.log(this.equipStatusObj);
      //   console.log("图片列表数据请求", this.equipStatusObj.identify_model);
      let that = this;
      let id = that.$route.params.id;
      //   console.log("这是结束时间：" + this.queryInfo.end);
      let postData = that.qs.stringify({
        device_id: id,
        page: that.currentPage,
        time_begin: this.queryInfo.begin, //开始时间（时间戳）
        time_end: this.queryInfo.end, //结束时间（时间戳）
        identify_model: this.equipStatusObj.identify_model,
        status: this.wormy ? "yes" : "no",
      });

      //   postData = this.$store.getters.postData
      //     ? this.$store.getters.postData
      //     : postData;
      //   if (this.$store.getters.postData) {
      //     this.$store.commit("set_cacheData_postData", "");
      //   }
      //   this.cachePostData = postData;

      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.device_photo_list", //forecast.forecast_system.equip_photo
          data: postData,
        })
        .then((res) => {
          setTimeout(() => {
            this.isShuaxin = false;
          }, 1000);
          this.disableVal = res.data.data.disable; // 该设备是否有识别功能 0 没有  1有
          if (res.data.data.data.length !== 0 && res.data.data.num !== 0) {
            // 有数据
            var data = res.data.data.data;
            this.totalNum = res.data.data.num;
            var arr = [];
            for (var i = 0; i < data.length; i++) {
              var obj = {};
              obj["device_id"] = data[i].device_id;
              obj["ids"] = data[i].ids;
              obj["indentify_photo"] = data[i].indentify_photo; // 标定过的图片
              obj["describe"] = data[i].describe;
              obj["addtime"] = data[i].addtime;
              obj["addr"] = data[i].addr; // 原图
              obj["mark"] = data[i].mark;
              obj["time"] = data[i].time;
              obj["num"] = data[i].pest_counts; //害虫总数
              if (data[i].indentify_result) {
                var sum = [];
                var str = data[i].indentify_result;
                var items = str.split("#");
                for (let j in items) {
                  var dat = items[j].split(",");
                  sum.push({
                    data: dat,
                    index: i,
                  });
                }
                var num = 0;
                obj["insectSumArr"] = sum;
                obj["insectSum"] = sum.map((item) => {
                  num += Number(item.data[1]);
                  return num;
                });

                // 判断是否有手动标注害虫数据
                if (data[i].mark) {
                  var list = JSON.parse(data[i].mark);
                  var nums = 0; // 手动标注害虫总数
                  var arr1 = [];
                  console.log(list);
                  if (Array.isArray(list)) {
                    list.forEach((item) => {
                      var obj1 = {};
                      obj1["tagName"] = item.tagName;
                      obj1["number"] = 1;
                      arr1.push(obj1);
                    });
                    var num1 = [];
                    var num2 = [];
                    for (let i = 0; i < arr1.length; i++) {
                      if (num1.indexOf(arr1[i].tagName) === -1) {
                        num2.push({
                          number: arr1[i].number,
                          tagName: arr1[i].tagName,
                        });
                        num1.push(arr1[i].tagName);
                      } else {
                        for (var j = 0; j < num2.length; j++) {
                          if (num2[j].tagName == arr1[i].tagName) {
                            num2[j].number += arr1[i].number;
                          }
                        }
                      }
                    }
                    for (var k = 0; k < num2.length; k++) {
                      nums += num2[k].number;
                    }
                    obj["markNum"] = nums;
                  } else {
                    obj["markNum"] = [];
                  }
                }
              }
              arr.push(obj);
            }
            console.log("---------", arr);
            // 求害虫总数
            this.imgDataList = arr;
            console.log(this.imgDataList);
            this.imgListShow = true;
          } else {
            // 没数据
            this.imgListShow = false;
            if (res.data.data.num == 0 && this.timeScreenData == null) {
              if (this.sign == this.queryInfo.begin || this.sign == null) {
                // this.$refs.timeCirculation.say();
                console.log("这是自动的");
              } else {
                console.log("这是点击的");
              }
              this.sign = this.queryInfo.begin; //保存一个标识，用来区分是点击还是自动获取
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //手动添加弹框确定事件
    onSubmit() {
      var time = parseInt(new Date().getTime() / 1000);
      let that = this;
      console.log(that.addFunData);
      if (!this.form.pest_name || !this.form.pest_num) {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "请将数据填写完整",
            type: "error",
            duration: 1500,
          });
        }
        return false;
      }
      if (that.tltName == "编辑") {
        let postData = that.qs.stringify({
          ret: "change_dsec",
          // img_name: that.addFunData.addr, //图片链接
          img_id: that.addFunData.ids, //图片链接
          photo_time: that.addFunData.addtime, //图片时间
          describe: JSON.stringify(that.form), //图片描述
          device_id: that.addFunData.device_id, //设备号
          id: that.handleEditData.id,
          time: time,
        });
        that
          .$axios({
            method: "post",
            url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_describe",
            data: postData,
          })
          .then((res) => {
            var data = res.data.data;
            if (data == true && res.data.message == "") {
              //成功
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1500,
                });
              }
              that.handAddVisible = false;
              // that.resetField('ruleForm')
              that.statisticsData(that.addFunData.ids);
            } else if (data == null && res.data.message !== "") {
              //失败
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error({
                  message: res.data.message,
                  duration: 1500,
                });
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (that.tltName == "手动添加") {
        let postData = that.qs.stringify({
          ret: "add_desc",
          // img_name: that.addFunData.addr, //图片链接
          img_id: that.addFunData.ids, //图片链接
          photo_time: that.addFunData.addtime, //图片时间
          describe: JSON.stringify(that.form), //图片描述
          device_id: that.addFunData.device_id, //设备号
          time: time,
        });
        that
          .$axios({
            method: "post",
            url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_describe",
            data: postData,
          })
          .then((res) => {
            var data = res.data.data;
            if (data == true && res.data.message == "") {
              //成功
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                  duration: 1500,
                });
              }
              that.handAddVisible = false;
              that.resetField("ruleForm");
            } else if (data == null && res.data.message !== "") {
              //失败
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error({
                  message: res.data.message,
                  duration: 1500,
                });
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 手动添加重置、
    resetField(formName) {
      this.$refs[formName].resetFields();
    },

    // 手动添加弹框害虫名称添加事件
    addInsectName() {
      let that = this;
      //判断值是否为空
      if (that.selectItem == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message.error({
            message: "害虫名称不能为空！！",
            duration: 1500,
          });
        }
      } else if (that.selectItem !== "") {
        let postData = that.qs.stringify({
          ret: "add_pest",
          pest: this.selectItem, //害虫名称
          addr: "", //图片链接
        });
        that
          .$axios({
            method: "post",
            url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
            data: postData,
          })
          .then((res) => {
            var data = res.data.data;
            if (data !== null && res.data.message == "") {
              that.selectItem = "";
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                  duration: 1500,
                });
              }
            } else if (data == null && res.data.message !== "") {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error({
                  message: res.data.message,
                  duration: 1500,
                });
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 获取害虫名称列表数据接口
    InsectListData() {
      let that = this;
      let postData = that.qs.stringify({
        ret: "pest_list",
        pest: "",
        addr: "",
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
          data: postData,
        })
        .then((res) => {
          that.reInsectList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 手动添加害虫名称删除接口
    delInsect() {
      let that = this;
      let postData = that.qs.stringify({
        ret: "del_pest",
        pest: JSON.stringify(that.checkList),
        addr: "",
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
          data: postData,
        })
        .then((res) => {
          var data = res.data.data;
          if (data && res.data.message == "") {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
            }
            that.handAddState = 1;
            that.getBack(); //重新请求害虫名称数据
          } else if (data == null && res.data.message == "删除失败") {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message.error({
                message: "删除失败",
                duration: 1500,
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 手动添加害虫名称点击返回事件
    getBack() {
      this.InsectListData();
    },

    // 手动统计
    statisticsData(img) {
      let that = this;
      let postData = that.qs.stringify({
        ret: "photo_desc",
        pest: "",
        img_id: img,
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_species",
          data: postData,
        })
        .then((res) => {
          if (res.data.data.length !== "") {
            that.threshold = res.data.data;
          } else {
            console.log("暂无数据");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 单个删除列表数据
    delectImg(id) {
      this.delImgFun([id]);
    },

    // 批量删除
    delImgFun(idList) {
      this.$confirm("此操作将永久删除该设备图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=forecast.forecast_system.equip_photo_del",
            data: this.qs.stringify({
              device_id: this.id,
              addrlist: JSON.stringify(idList),
            }),
          }).then((res) => {
            if (res.data.message == "") {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
              this.equipStatusCheck("4");
              this.imgListData(); //图片列表数据请求
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //返回上一页
    goBackPage() {
      this.$router.go(-1);
    },

    //识别点击放大
    amplification() {
      // 点击图片放大缩小弹框
      if (this.enlargement == true) {
        this.enlargement = false;
        this.enlargementImg = true;
      } else {
        this.enlargement = true;
        this.enlargementImg = false;
      }

      // 获取到原图的宽高信息
      let img = new Image();
      img.src = this.recognitionImage[0];
      const vm = this;
      vm.$set(vm.imgInfo, "width", img.width);
      vm.$set(vm.imgInfo, "height", img.height);
      if (vm.imgInfo.width !== 4000 && vm.imgInfo.height !== 3000) {
        this.btnShow = true;
      }
    },

    //点击出现辅助线
    assist() {
      // 测试界面辅助线
      this.griddingShow = !this.griddingShow;
    },
    // 测试界面辅助线

    // 配置查看大图插件
    inited(viewer) {
      // console.log(this.recognitionImage)
      this.$viewer = viewer;
      this.$viewer.view(this.imgIndexNumber);
    },
    //点击图片查看大图
    amplificationA(data, index) {
      // console.log(this.imgDataList)
      console.log(data);
      console.log(index);
      let that = this;
      that.listidentification = "1";
      this.addFunData = data;
      let id = that.$route.params.id;
      let postData = that.qs.stringify({
        device_id: id,
        page_number: 8,
        page: that.currentPage,
        ret: "list",
        time_begin: this.queryInfo.begin, //开始时间（时间戳）
        time_end: this.queryInfo.end, //结束时间（时间戳）
        identify_model: this.equipStatusObj.identify_model,
        status: this.wormy ? "yes" : "no",
      });
      that
        .$axios({
          method: "post",
          // url: "/api/api_gateway?method=forecast.forecast_system.equip_cbd_photo", //forecast.forecast_system.equip_photo
          url: "/api/api_gateway?method=forecast.forecast_system.device_photo_list", //forecast.forecast_system.equip_photo
          data: postData,
        })
        .then((res) => {
          var nums = res.data.data.num;
          that.totalNum = nums;
          that.recognitionImage = [];
          var imgData = res.data.data.data;
          for (var i in imgData) {
            this.recognitionImage.push(imgData[i].addr);
          }
          if (nums == 0) {
            that.imgListShow = false;
          } else if (nums !== 0) {
            that.imgListShow = true;
            that.iconIf = true;
            // that.$viewer.view();
            // this.inited(viewer,index);
            console.log(that.$viewer);
            that.iconShow = true;
            imgIndex = index; //给全局变量赋值，其作用是在viewer初始化中可以获取到点击的图像下标
            that.imgIndexNumber = index;
            // that.$viewer.view();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 打开图片网格
    openGridding() {
      var arr = [];
      arr = this.$viewer.element.ownerDocument.images;
      var imgs = "../../../static/images/gridding/2.png";
      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="');
      console.log(b);
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var o = t.replace("margin-left", "left");
      var oo = o.split("; ");
      var s = oo.filter((item, index) => {
        return item.indexOf("width") == -1;
      });
      var sw = oo.filter((item, index) => {
        return item.indexOf("width") !== -1;
      });

      // var s = oo
      console.log(sw);
      var o = s.join("; ");
      o = o.replace("relative", "absolute");
      var imgo = o.replace("absolute", "none");
      console.log(imgo);
      var arrA = o.split(";").map(function (val) {
        return val.split("=");
      });
      console.log(arrA);
      var h = arrA[0][0];
      var w = arrA[4][0];
      // 高
      var imgHeight = h.replace("height: ", "");
      imgHeight = imgHeight.replace("px", "");
      // 宽
      var imgWidth = w.replace("width: ", "");
      imgWidth = imgWidth.replace("px", "");
      console.log(imgHeight, w);
      var domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" style="z-index: 10000;overflow: hidden;' +
        sw[0] +
        ";" +
        o +
        '" v-show="iconShow">' +
        '<img id="imgID" src="' +
        imgs +
        '" alt="" class="" ' +
        'style="z-index: 10000;' +
        imgo +
        '"' +
        " />" +
        '<div style="color: red; font-weight: 330; float: left; position: absolute; left: 3.5rem;bottom: .8rem; z-index: 10001; font-size: 15px;">' +
        "*注：每个网格大小为20*20mm" +
        "</div>" +
        "</div>";
      domData.innerHTML = html;
      this.iconIf = false;
    },
    // 关闭图片网格
    offGridding() {
      var domData = document.getElementById("reseau");
      var html = "";
      domData.innerHTML = html;
      this.iconIf = true;
    },
    downloadFile(data) {
      // console.log(data);
      let blob = new Blob([data], { type: "application/zip" });
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement("a"); // 创建a标签
      link.href = url;
      link.download = "下载图片"; // 重命名文件
      link.click();
      URL.revokeObjectURL(url); // 释放内存
    },
    downPhoto(id_list, time_list) {
      console.log(time_list);
      console.log(this.imgDataList[0].name);
      let that = this;
      let id = that.$route.params.id;
      this.$message.success("图片下载中！");
      var idList = JSON.stringify(id_list.length == 0 ? "" : id_list);
      var timeList = JSON.stringify(time_list.length == 0 ? "" : time_list);
      var file_path = "";
      var time_list = ["2021-03-31"];
      time_list = JSON.stringify(time_list);
      let postData = that.qs.stringify({
        device_id: id, //设备号
        // time_list: timeList, //时间段
        // time_list: '1622995200', //时间段
        // time_list, //时间段
        id_list: idList, //图片id
        // file_path, //图片下载存放路径
      });
      that
        .$axios({
          method: "POST",
          url: "/api/download",
          data: postData,
          responseType: "blob",
        })
        .then((res) => {
          that.downloadFile(res.data);
        })
        .catch((error) => this.$message.error(error));
    },

    onAnnoSelected(data, uniqueKey) {
      // console.log(999);
      // console.log(data);
      // console.log(uniqueKey);
    },
    onAnnoAdded() {},
    onUpdated(data) {
      this.saveTag();
    },
    onReady() {},
    onImageLoad(e) {},
    //手动图片标注
    imgTag() {
      console.log(this.addFunData.mark);
      console.log(
        "11111111111手动图片标注",
        this.equipStatusObj.identify_model
      );
      // this.currentImage = this.pictureDetailsFunDataObj.indentify_photo;
      // this.imgTagDataVisible = true;
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.forecast_system.device_photo_details",
        data: this.qs.stringify({
          img_id: this.addFunData.ids,
          cmd: "cbd",
          identify_model: this.equipStatusObj.identify_model,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.currentImage =
            res.data.data.indentify_photo || res.data.data.addr;
          this.tagImgId = this.addFunData.ids;
          // this.mgMark = data.mark;
          // console.log(data);
          // console.log(data.mark);
          this.$viewer.hide();
          this.imgTagDataVisible = true;
          this.$nextTick(() => {
            console.log(this.addFunData.mark);
            this.renderData(JSON.parse(this.addFunData.mark));
          });
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.warning(res.data.message);
          }
          this.currentImage =
            this.pictureDetailsFunDataObj.indentify_photo ||
            this.pictureDetailsFunDataObj.addr;
          this.imgTagDataVisible = true;
        }
      });
    },
    // 查看百度百科害虫详情
    lookWormNameFun() {
      window.open(`https://baike.baidu.com/item/${this.lookWormName}`);
    },
    //设置标签
    setTag() {
      this.$refs["aiPanel-editor"].getMarker().setTag({
        tagName: this.tagName,
        tag: "0x0001",
      });
      this.saveTag();
    },
    //打开页面加载标签
    renderData(data) {
      console.log(123);
      console.log(data);
      this.$nextTick(() => {
        this.$refs["aiPanel-editor"].getMarker().clearData(data);
        this.$refs["aiPanel-editor"].getMarker().renderData(data);
      });
    },
    saveTag() {
      let data = this.$refs["aiPanel-editor"].getMarker().getData();
      this.setdata = data;
      // console.log(data);
      let obj = {};
      for (let i = 0; i < data.length; i++) {
        var item = data[i].tagName; // a为计算的属性,可换成b,c
        obj[item] = obj[item] + 1 || 1;
      }
      this.setdataNum = obj;
    },
    imgTagClosed() {
      this.tagName = "";
      this.setdataNum = {};
      this.$refs["aiPanel-editor"].getMarker().clearData();
    },
    imgTagSubm() {
      console.log("模型：", this.equipStatusObj.identify_model);
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.forecast_system.cbdphoto_receive",
        data: this.qs.stringify({
          img_id: this.addFunData.ids,
          mark: JSON.stringify(this.setdata),
          device_type: "cbd",
          identify_model: this.equipStatusObj.identify_model,
        }),
      }).then((res) => {
        if (res.data.data) {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.success("提交成功！");
          }
          this.$nextTick(() => {
            this.renderData(JSON.parse(res.data.data));
          });
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.warning(res.data.message);
          }
        }
        this.pictureDetailsFunDataObj.indentify_photo = "";
        this.pictureDetails = false;
        this.imgTagDataVisible = false;
        // this.reload(); //局部刷新
        this.imgListData();
        var obj = {
          ids: this.addFunData.ids,
        };
        this.pictureDetailsFunAxios(obj);
      });
    },

    // 开启或禁止识别功能
    operationDiscern(ret) {
      var that = this;
      let id = that.$route.params.id;
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.disable_cbd_discern",
          data: that.qs.stringify({
            device_id: id, // 设备号
            ret, // ret=disable时禁用识别功能, ret=enable,时启用识别统计功能
          }),
        })
        .then((res) => {
          if (res.data.data == true) {
            that.imgListData(); //图片列表数据请求
          }
        })
        .catch((err) => {
          console.log(err);
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error("操作失败，请重试！");
          }
        });
    },

    // 雨控状态提醒框关闭
    rainControlAffair() {
      this.rainControl = false;
    },
    // 监测该设备是否在雨控状态
    rainCharge() {
      var that = this;
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=device.device_manage.cbd_rain_control",
          data: that.qs.stringify({
            device_id: that.$route.params.d_id,
          }),
        })
        .then((res) => {
          // 1 == 雨控   0 == 不雨控
          if (res.data.data.rain == 0) {
            // 该设备不在雨控状态
            that.rainControl = false;
          } else if (res.data.data.rain == 1) {
            // 该设备在雨控状态下
            that.rainControl = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //
    ceshi(i) {
      console.log(this.loadingMore);
      this.loadingMore = false;
      this.noMore = false;
      this.showLen = 10;
      // if (this.listIndexA !== null && this.listIndexA !== i && this.listIndexA == i) {
      if (
        this.listIndexA !== null &&
        this.listIndexA !== i &&
        this.imgDataList[this.listIndexA].checked
      ) {
        this.imgDataList[this.listIndexA].tltTxt =
          this.imgDataList[this.listIndexA].tltTxt == "展开" ? "收起" : "展开";
        this.imgDataList[this.listIndexA].checked =
          this.imgDataList[this.listIndexA].checked == false ? true : false;
      }
      // ------------------------------------------------------------
      setTimeout(() => {
        this.listIndex = i;
        this.listIndexA = i;
        this.imgDataList[i].tltTxt =
          this.imgDataList[i].tltTxt == "展开" ? "收起" : "展开";
        this.imgDataList[i].checked =
          this.imgDataList[i].checked == false ? true : false;

        if (this.countData < this.imagesListData[this.listIndex].img) {
          // 加载更多
          this.loadingMore = true;
          this.noMore = false;
        } else if (this.countData == this.imagesListData[this.listIndex].img) {
          // 没有更多了
          this.loadingMore = false;
          this.noMore = true;
        }
      }, 500);
    },

    multiple(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      console.log(this.isIndeterminate);
    },
    // 测试测试下
    load() {
      console.log(this.loadingMore);
      this.loadingMore = true;
    },
    more() {
      // 每次点击加三条
      this.showLen += 5;
      console.log(this.loadingMore);
      this.loadingMore = false;
      console.log(this.loadingMore);
    },

    // 树形控件
    renderIconContent(node, data) {
      if (node.data.leaf) {
        return "el-icon-document document";
      } else {
        if (node.expanded) {
          return "el-icon-folder-opened";
        } else {
          return "el-icon-folder";
        }
      }
    },
    loadNode(node, resolve) {
      var that = this;
      // that.deviceAddTime(node, resolve);
      this.dynamicDataTime(node, resolve);
    },
    // 树形控件
    handleNodeClick(data) {
      console.log(data);
      if (
        data.year !== undefined &&
        data.month == undefined &&
        data.day == undefined
      ) {
        // 这是单击了年
        var year = data.year !== undefined ? data.year.toString() : "";
        var yearEnd =
          data.year !== undefined ? (parseInt(data.year) + 1).toString() : "";
        var timeStr1 = year; // 开始时间
        var time1 = new Date(timeStr1).getTime(); // 开始时间
        var timeStr2 = yearEnd; // 结束时间
        var time2 = new Date(timeStr2).getTime(); // 结束时间
        console.log(time1, time2);
      } else if (
        data.year !== undefined &&
        data.month !== undefined &&
        data.day == undefined
      ) {
        // 这是单击了月
        var year = data.year !== undefined ? data.year.toString() + "-" : "";
        var month = data.month !== undefined ? data.month.toString() : "";
        var timeStr1 = year + month; // 开始时间
        var time1 = new Date(timeStr1).getTime(); // 开始时间

        // 到这要判断如果是12月份就要把年份推后一年，月份默认为1月
        if (data.month !== 12) {
          var monthEnd =
            data.month !== undefined
              ? (parseInt(data.month) + 1).toString()
              : "";
        } else if (data.month == 12) {
          var monthEnd = data.month !== undefined ? 1 : "";
          var year =
            data.year !== undefined
              ? (parseInt(data.year) + 1).toString() + "-"
              : "";
        }
        var timeStr2 = year + monthEnd; // 结束时间
        var time2 = new Date(timeStr2).getTime(); // 结束时间
        console.log(time1, time2);
      } else if (
        data.year !== undefined &&
        data.month !== undefined &&
        data.day !== undefined
      ) {
        // 这是单击了天
        var year = data.year !== undefined ? data.year.toString() + "-" : "";
        var month = data.month !== undefined ? data.month.toString() + "-" : "";
        var day = data.day !== undefined ? data.day.toString() : "";
        var timeStr1 = year + month + day; // 开始时间
        var time1 = new Date(timeStr1).getTime(); // 开始时间
        // 判断当前是闰年还是平年
        //  算法：能被4整除且不能整除100的为闰年（如2020年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
        // 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
        // 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
        // 一定要注意里面的且 &&  还有或者 || 的写法，同时注意判断整除的方法是取余为 0
        var yearA = data.year;
        if ((yearA % 4 == 0 && yearA % 100 != 0) || yearA % 400 == 0) {
          // 润年2月是29天
          var FebruaryNum = 29;
        } else {
          // 平年2月是28天
          var FebruaryNum = 28;
        }
        // 判断当前的月份
        if (
          data.month == 4 ||
          data.month == 6 ||
          data.month == 9 ||
          data.month == 11
        ) {
          // 为30天
          if (data.day < 30) {
            var dayEnd =
              data.day !== undefined ? (parseInt(data.day) + 1).toString() : "";
          } else {
            var dayEnd = data.day !== undefined ? 1 : "";
            var month =
              data.month !== undefined
                ? (parseInt(data.month) + 1).toString() + "-"
                : "";
          }
        } else if (
          data.month == 1 ||
          data.month == 3 ||
          data.month == 5 ||
          data.month == 7 ||
          data.month == 8 ||
          data.month == 10 ||
          data.month == 12
        ) {
          // 为31天
          if (data.day < 31) {
            var dayEnd =
              data.day !== undefined ? (parseInt(data.day) + 1).toString() : "";
          } else if (data.day == 31 && data.month !== 12) {
            var dayEnd = data.day !== undefined ? 1 : "";
            var month =
              data.month !== undefined
                ? (parseInt(data.month) + 1).toString() + "-"
                : "";
          } else if (data.day == 31 && data.month == 12) {
            var dayEnd = data.day !== undefined ? 1 : "";
            var month = data.month !== undefined ? 1 + "-" : "";
            var year =
              data.year !== undefined
                ? (parseInt(data.year) + 1).toString() + "-"
                : "";
          }
        } else if (data.month == 2) {
          if (data.day < FebruaryNum) {
            var dayEnd =
              data.day !== undefined ? (parseInt(data.day) + 1).toString() : "";
          } else {
            var dayEnd = data.day !== undefined ? 1 : "";
            var month =
              data.month !== undefined
                ? (parseInt(data.month) + 1).toString() + "-"
                : "";
          }
        }
        // var dayEnd = data.day !== undefined ? (data.day + 1).toString() : "";
        var timeStr2 = year + month + dayEnd; // 结束时间
        var time2 = new Date(timeStr2).getTime(); // 结束时间
        console.log(time1, time2);
      }
      this.currentPage = 1; // 页码默认为1
      this.queryInfo.begin = time1 / 1000; // 开始时间
      this.queryInfo.end = time2 / 1000; // 结束时间
      this.sign = time2 / 1000; // 当用户点击右侧树形时间筛选时不让其自动去请求下个时间段数据
      this.imgListData(); // 图片列表数据请求
    },
    // 树形控件动态获取时间接口测试
    dynamicDataTime(node, resolve) {
      let id = this.$route.params.id;
      var postData = this.qs.stringify({
        device_id: id,
        identify_model: this.equipStatusObj.identify_model,
      });
      // 测试
      if (this.timeData.length !== 0) {
        var data = this.timeData;
        // 月
        if (node.level === 1) {
          var nianDat = node.label;
          nianDat = parseInt(nianDat.split("年")[0]);
          var monthArr = [];
          data.forEach((item) => {
            for (var i in item) {
              if (nianDat == i) {
                var list = Object.keys(item[nianDat]);
                list = list.sort();
                for (var j = 0; j < list.length; j++) {
                  monthArr.push({
                    label: parseInt(list[j]) + "月",
                    year: node.data.year,
                    month: parseInt(list[j]),
                  });
                }
              }
            }
          });
          // return resolve(monthArr.reverse());
          return resolve(monthArr.sort());
        }

        // 日
        if (node.level === 2) {
          var dayArr = [];
          for (var i = 0; i < data.length; i++) {
            if (Object.keys(data[i]) == node.data.year) {
              var ind = Object.keys(data[i])[0];
              var item = data[i][ind];
              for (var j in item) {
                if (node.data.month == j) {
                  for (var k = 0; k < item[j].length; k++) {
                    var dayList = item[j];
                    dayArr.push({
                      label: dayList[k] + "日",
                      year: node.data.year,
                      month: node.data.month,
                      day: dayList[k],
                      leaf: true,
                    });
                  }
                }
              }
            }
          }
          return resolve(dayArr.reverse());
        }

        if (node.level > 2) return resolve([]);
      } else {
        this.$axios({
          method: "POST",
          // url: "/api/api_gateway?method=forecast.forecast_system.cbd_photo_time",
          url: "/api/api_gateway?method=forecast.forecast_system.time_folder",
          data: postData,
        })
          .then((res) => {
            if (res.data.data) {
              this.timeData = res.data.data;
              var dataArr = [];
              var data = res.data.data;
              // 年
              for (var i = 0; i < data.length; i++) {
                var obj = {};
                obj["label"] = Object.keys(data[i])[0] + "年";
                obj["year"] = parseInt(Object.keys(data[i])[0]);
                obj["icon"] = "el-icon-document";
                dataArr.push(obj);
              }
              if (node.level === 0) {
                return resolve(dataArr);
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 图片详情
    pictureDetailsFun(data, index) {
      //   this.$store.commit("set_cacheData_postData", this.cachePostData);
      localStorage.setItem("time_begin", this.queryInfo.begin);
      localStorage.setItem("time_end", this.queryInfo.end);
      localStorage.setItem("cbdpage", this.currentPage);
      var idslist = [];
      for (var i = 0; i < this.imgDataList.length; i++) {
        idslist.push(this.imgDataList[i].ids);
      }
      console.log(idslist, index);
      // 跳转到新页面
      this.$router.push({
        path: "/index/cbdCanvas",
        query: {
          data: data,
          identify_model: this.equipStatusObj.identify_model,
          ids_list: idslist,
          index: index,
        },
      });
      sessionStorage.setItem("img_id", data.ids); // 存储点击的图片id，以免在标识页面刷新后找不到图片id
      return;
      // console.log(data.mark);
      this.$viewer.hide();
      this.pictureDetailsFunDataObj.indentify_photo = "";
      this.loading = true;
      this.pictureDetails = true;
      this.addFunData = JSON.parse(JSON.stringify(data));
      // console.log(this.addFunData.indentify_photo)
      if (this.addFunData.indentify_photo == "") {
        // 标识后的图片没值
        this.addFunData.indentify_photo = this.addFunData.addr;
        this.pictureDetailsFunData(data);
        // 没值
      } else {
        // 有值
        // 请求测报灯图片详情接口
        this.pictureDetailsFunAxios(data);
      }
      console.log(this.addFunData);
    },
    // 请求测报灯图片详情接口
    pictureDetailsFunAxios(data) {
      var postData = this.qs.stringify({
        img_id: data.ids,
        cmd: "cbd",
        identify_model: this.equipStatusObj.identify_model,
      });
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.forecast_system.device_photo_details",
        data: postData,
      })
        .then((res) => {
          console.log(res);
          if (res.data.data) {
            var arr = [];
            var data = res.data.data;
            var obj = {};
            obj["device_id"] = data.device_id;
            obj["ids"] = data.ids;
            obj["indentify_photo"] = data.indentify_photo; // 标定过的图片
            obj["addtime"] = data.addtime;
            obj["addr"] = data.addr; // 原图
            obj["mark"] = data.mark;
            obj["time"] = data.time;
            if (data.indentify_result) {
              var sum = [];
              var str = data.indentify_result;
              var items = str.split("#");
              for (let j in items) {
                var dat = items[j].split(",");
                sum.push({
                  data: dat,
                  index: j,
                });
              }
              var num = 0;
              obj["insectSumArr"] = sum;
              obj["insectSum"] = sum.map((item) => {
                num += Number(item.data[1]);
                return num;
              });
            }
            arr.push(obj);
            this.pictureDetailsFunData(arr[0]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    pictureDetailsFunData(data) {
      // 处理mark中的列表数据
      if (data && data.mark) {
        var list = JSON.parse(data.mark);
        var arr = [];
        if (isArray(list)) {
          list.forEach((item) => {
            var obj = {};
            obj["tagName"] = item.tagName;
            obj["number"] = 1;
            arr.push(obj);
          });
          let tempArr = [],
            newArr = [];
          for (let i = 0; i < arr.length; i++) {
            if (tempArr.indexOf(arr[i].tagName) === -1) {
              newArr.push({
                number: arr[i].number,
                tagName: arr[i].tagName,
              });
              tempArr.push(arr[i].tagName);
            } else {
              for (let j = 0; j < newArr.length; j++) {
                if (newArr[j].tagName == arr[i].tagName) {
                  newArr[j].number += arr[i].number;
                }
              }
            }
          }
          this.labelShow = true;
          this.labelArr = newArr;
        } else {
          this.labelShow = false;
          this.labelArr = [];
        }
      } else {
        this.labelShow = false;
        this.labelArr = [];
      }
      // 判断当前是否有手动标注数据
      if (
        data &&
        data.mark !== null &&
        data.mark !== undefined &&
        data.mark !== ""
      ) {
        console.log("false false", this.imgShow);
        this.imgShow = false;
        this.imgDiscern = data.indentify_photo || data.addr;
        this.$nextTick(() => {
          this.renderData(JSON.parse(data.mark));
        });
      } else {
        console.log("true true", this.imgShow);
        this.imgShow = true;
        // this.imgDiscern = data.indentify_photo || data.addr;
        // this.imgDiscern = data.addr;
      }
      this.pictureDetailsFunDataObj = data;
      if (this.pictureDetailsFunDataObj.indentify_photo == "") {
        this.pictureDetailsFunDataObj.indentify_photo =
          this.pictureDetailsFunDataObj.addr;
      }
      console.log(this.pictureDetailsFunDataObj);
      // console.log(this.pictureDetailsFunDataObj.indentify_photo);
      this.loading = false;
    },

    // 点击图片选中
    // itemFun(item) {
    //   console.log(item)
    //   item.checked = !item.checked;
    //   console.log(item.checked)
    //   console.log(item.ids)
    // },
    dateChange(data) {
      console.log(data);
      if (this.isPageOne) {
        this.currentPage = 1;
      }
      this.queryInfo.begin = Math.floor(+new Date(data[0]) / 1000);
      this.queryInfo.end = Math.floor(+new Date(data[1]) / 1000);
      //   this.isPageOne = true;
      //   this.queryInfo.begin = data.begin;
      //   this.queryInfo.end = data.end;
      this.imgListData(); //图片列表数据请求
      this.rainCharge(); //监测该设备是否在雨控状态
    },
    // // 当使用日期筛选
    timeScreen(data) {
      this.timeScreenData = data;
    },

    // 获取当前设备的设备添加时间动态渲染插件
    deviceAddTime(node, resolve) {
      var id = this.$route.params.id;
      var postData = this.qs.stringify({
        device_id: id,
        page: 1,
        page_size: 8,
        device_type_id: 3,
        start_time: "",
        end_time: "",
        equipment_status: "",
        salesman_task_number: "",
      });
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.device_info",
        data: postData,
      })
        .then((res) => {
          // 先将获取到的设备添加时间赋值
          this.deviceAddTimeNum = res.data.data.data[0].creat_time;
          var dateStart = new Date(this.deviceAddTimeNum * 1000); // 开始时间
          // 获取开始时间(开始时间是以设备添加时间为标准)及结束时间(结束时间是以系统的当前时间为标准)
          var dateA = new Date(new Date().getTime()); // 结束时间
          var year = dateA.getFullYear();
          var month = dateA.getMonth() + 1;
          var time1 = dateA.getTime();
          var dateEnd = new Date();
          var ceshi1 = dateStart.getTime();
          var ceshi2 = dateEnd.getTime();
          var aaa = this.formatTime(ceshi1);
          var bbb = this.formatTime(ceshi2);
          aaa = aaa.split(" ");
          bbb = bbb.split(" ");
          var aaa1 = aaa[0].split("-");
          var bbb1 = bbb[0].split("-");
          var aaa2 = parseInt(aaa1[0]);
          var bbb2 = parseInt(bbb1[0]);
          if (aaa2 !== bbb2) {
            var i = bbb2 - aaa2 + 1;
          } else if (aaa2 === bbb2) {
            var i = 1;
          }
          var dataArr = [];
          for (var j = 0; j < i; j++) {
            var obj = {};
            obj["label"] = parseInt(year) - j + "年";
            obj["year"] = parseInt(year) - j;
            obj["icon"] = "el-icon-document";
            dataArr.push(obj);
          }
          console.log("+++++++++++++++++++++++++++++++++++++++++++++++++");
          console.log(dataArr);
          if (node.level === 0) {
            return resolve(dataArr);
          }
          if (node.level > 2) return resolve([]);
          if (node.level === 1) {
            var monthArr = [];
            if (node.data.year != year) {
              var months = 12;
            } else {
              var months = month;
            }
            for (var i = 1; i <= months; i++) {
              monthArr.push({
                label: i + "月",
                year: node.data.year,
                month: i,
              });
            }
            return resolve(monthArr);
          }
          if (node.level === 2) {
            var dayArr = [];
            var days = new Date(node.data.year, node.data.month, 0).getDate();
            for (var i = 1; i <= days; i++) {
              dayArr.push({
                label: i + "日",
                year: node.data.year,
                month: node.data.month,
                day: i,
                leaf: true,
              });
            }
            return resolve(dayArr);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取已标定的害虫
    standardization() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.worm_list",
      })
        .then((res) => {
          this.cbdPest = res.data.data;
          console.log(this.cbdPest);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  //   components: { "ui-marker": AIMarker, CbdTime },
};
</script>
<style lang="less" scoped>
.data24box {
  width: 100%;
  height: 100%;
}
.baselistbox_top {
  width: 100%;
  //   height: 130px;
  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;
    .capzuo_left {
      font-size: 14px;
      margin-bottom: 20px;
    }
    .capzuo_right {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .el-button {
        color: #fff;
      }
      .capzuo_right_left {
        width: calc(100% - 230px);
        display: flex;
        justify-content: space-between;
        .modulebox {
          display: flex;
          /deep/.el-checkbox-button {
            width: 56px;
            height: 28px;
            // padding: 7px 15px;
            border: 1px solid #4f71ff;
            display: inline-block;
            text-align: center;
            line-height: 26px;
            border-radius: 3px;
            margin-right: 10px;
            color: #4f71ff;
            .el-checkbox-button__inner {
              width: 100%;
              padding: 0;
              border: 0;
              font-size: 12px;
            }
          }
          /deep/.is-checked {
            background-color: #4f71ff;
            color: #fff !important;
            .el-checkbox-button__inner {
              width: 100%;
              padding: 0;
              border: 0;
              font-size: 12px;
              //   background-color: #4f71ff;
              background-color: transparent !important;
              //   color: #4f71ff !important;
              color: #fff !important;
            }
          }
          /deep/.el-checkbox-button__inner:hover {
            color: #4f71ff;
          }
        }
      }
      .capzuo_right_right {
        width: 220px;
        /deep/.el-date-editor {
          width: 100%;
        }
      }
    }
  }
}
.baselistbox_img {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
  .baselistbox_imgbox {
    display: flex;
  }
  .imgListData {
    &:hover {
      .photoInfo {
        i {
          display: block;
        }
      }
    }
    .photoInfo {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      // top: -83px;
      // left: 10px;
      // right: 15px;
      text-align: right;
      span {
        color: #fff;
        margin: 2.6rem 0 0 0;
      }
      i {
        cursor: pointer;
        color: red;
        display: none;
      }
      /deep/.is-checked {
        .el-checkbox__inner {
          background-color: #4f71ff;
          border-color: #4f71ff;
        }
      }
      /deep/.el-checkbox__inner:hover {
        border-color: #4f71ff !important;
      }
    }
  }
  .listimgbox {
    width: calc(100% - 220px);
    .result_ul {
      padding: 0;
      li {
        list-style-type: none;
      }
      .result_list {
        margin: 5px 0 0 0;
        color: #636363;
        .result_listBox {
          font-size: 11.5px;
          text-align: left;
          margin: 1px 0 0 3px;
          .result_listBox_sum {
            line-height: 22px;
          }
        }
        .result_listBox_btn {
          color: rgb(24, 131, 231);
        }
      }
    }
  }
  .listtree {
    width: 200px;
    margin-left: 20px;
    .el-tree {
      font-size: 14px;
      .treeicon {
        margin-right: 5px;
        color: #f0bb25;
      }
      .document.treeicon {
        color: #d5eeff;
      }
      .is-current {
        .treeicon:nth-child(1) {
          color: #ffa02a;
        }
      }
    }
  }
  .pagination {
    // position: absolute;
    // bottom: 10px;
    // right: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    /deep/.el-pager {
      .active {
        background-color: #4f71ff !important;
      }
    }
    /deep/.el-input__inner:hover {
      border-color: #4f71ff;
    }
  }
}
// 新图片操作
.newImgOperation {
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  z-index: 10001 !important;
  position: absolute;
  bottom: 2.2%;
  // right: 6.9rem;
  right: 28%;
  width: 42%;
  color: #fff;
  li {
    border-right: 1px solid #fff;
    width: 15%;
    list-style-type: none;
    img {
      width: 20px;
      height: 20px;
      vertical-align: bottom;
    }
    span {
      font-size: 15px;
    }
  }
}
.handAddBtn {
  position: absolute;
  right: 6%;
  top: 21%;
  i {
    font-size: 28px;
    cursor: pointer;
  }
}
.handAddForm {
  .el-form {
    width: 83%;
  }
  .el-select {
    width: 100%;
  }
  .handAddFormBtn {
    text-align: right;
  }
}
</style>