<template>
  <div style="cursor: default">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>测报系统</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/cbd' }"
        >虫情测报</el-breadcrumb-item
      >
      <el-breadcrumb-item>查看图片</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="success" size="small" @click="goBackPage()"
      ><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
    >
    <div class="check-btns">
      <div class="type-check">
        <el-button type="primary" size="mini" @click="equipStatusCheck('0')"
          >拍照</el-button
        >
        <el-button type="primary" size="mini" @click="equipStatusCheck('1')"
          >刷新</el-button
        >
        <template v-if="userType == 1">
          <el-button
            v-if="delBtnState"
            type="primary"
            size="mini"
            @click="equipStatusCheck('2')"
            >批量删除</el-button
          >
          <el-button
            v-if="!delBtnState"
            type="primary"
            size="mini"
            @click="equipStatusCheck('3')"
            >删除</el-button
          >
          <el-button
            v-if="!delBtnState"
            size="mini"
            @click="equipStatusCheck('4')"
            >取消</el-button
          >
          <el-button type="primary" size="mini" @click="equipStatusCheck('5')"
            >一键删除</el-button
          >
        </template>
        <el-button type="primary" size="mini" @click="equipStatusCheck('6')"
          >短信预警</el-button
        >
        <el-button
          type="primary"
          v-if="downBtnState"
          size="mini"
          @click="equipStatusCheck('7')"
          >图片下载</el-button
        >
        <el-button
          v-if="!downBtnState"
          type="primary"
          size="mini"
          @click="equipStatusCheck('8')"
          >下载</el-button
        >
        <el-button
          v-if="!downBtnState"
          size="mini"
          @click="equipStatusCheck('9')"
          >取消</el-button
        >
      </div>
      <div class="search-box">
        <el-date-picker
          style="cursor: pointer"
          size="mini"
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="DateChange"
        ></el-date-picker>
      </div>
    </div>
    <!-- <el-row :gutter="30" id="viewerDom" v-viewer v-if="imgListShow"> -->
    <el-row :gutter="30" v-if="imgListShow">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="6"
        v-for="(item, index) in imgDataList"
        :key="index"
      >
        <div class="photoItem">
          <div class="photoInfo">
            <!-- <span>{{ (item.addtime * 1000) | formatTime }}</span> -->
            <template v-if="userType == 1">
              <i
                class="iconfont icon-shanchu"
                v-show="delBtnState && downBtnState"
                @click="delectImg(item.id)"
              ></i>
              <el-checkbox
                v-show="!delBtnState || !downBtnState"
                v-model="item.checked"
              ></el-checkbox>
            </template>
          </div>
          <!-- <div class="photoImg" @click="amplification()"> -->
          <div class="photoImg">
            <!-- 有的图片放到阿里云，有的放到了服务器 -->
            <template v-if="item.addr.indexOf('http') != -1">
              <!-- <img
                @click="amplificationA(index)"
                :src="item.addr"
                @error="errImg"
                alt
              /> -->
               <img
                @click="amplificationA(index)"
                v-lazy="item.addr"
                @error="errImg"
                alt
              />
            </template>
            <template v-else>
              <!-- <img :src="$host + item.addr" @error="errImg" alt /> -->
              <img v-lazy="$host + item.addr" @error="errImg" alt />
            </template>
          </div>
          <div class="date" style="background: #fff">
            {{ (item.addtime * 1000) | formatTime }}
          </div>
          <div class="photoCtrl">
            <div @click="handAddFun(item)">
              <i class="iconfont icon-tianjia"></i>
              手动添加
            </div>
            <div @click="handAddDataFun(item)">
              <i class="icon-tongji iconfont"></i>
              手动统计
            </div>
            <div @click="discernFun(item)">
              <i class="icon-saomiaoshibie380 iconfont"></i>
              识别统计
            </div>
            <div @click="imgTag(item)">
              <i class="icon-saomiaoshibie380 iconfont"></i>
              手动标注
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 暂无数据 -->
    <div class="expertDiagnosis_referral_units_not" v-else>
      <img
        :src="$imghost + zanwu"
        alt
        class="expertDiagnosis_referral_units_notImg"
      />
    </div>
    <el-pagination
      v-if="imgListShow"
      background
      layout="prev, pager, next"
      :total="totalNum"
      @current-change="changePage"
      :current-page="queryInfo.page"
      :page-size="8"
    ></el-pagination>

    <!-- 自动识别对话框 -->
    <el-dialog
      title="识别结果"
      :visible.sync="discernVisible"
      width="30%"
      :fullscreen="enlargement"
    >
      <div v-loading="loading">
        <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="../../../../static/images/gridding.png"
            alt=""
            class="enlargementImgA"
          />
          <!-- 测试网格图 -->
        </div>
      </div>
      <div class="" style="display: flex">
        <div
          v-show="griddingShow"
          style="
            color: red;
            font-weight: 550;
            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%"
          >重新识别</el-button
        >
        <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="30%">
      <div class="handAddBtn" v-show="handAddState == 1">
        <!-- <i class="iconfont icon-zhuti_tiaosepan_o" @click="handAddState=2"></i>
				<i class="iconfont icon-zhuti_tiaosepan_o" @click="handAddState=3"></i>-->
        <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-item class="handAddFormBtn">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="(handAddVisible = false), resetField('ruleForm')"
              >取消</el-button
            >
          </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 class="handAddWormNameBtn">
          <el-button size="small" type="primary" @click="addInsectName()"
            >确定</el-button
          >
          <el-button size="small" @click="handAddVisible = false"
            >取消</el-button
          >
        </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 class="handDelWormNameBtn">
          <el-button size="small" type="primary" @click="delInsect()"
            >确定</el-button
          >
          <el-button size="small" @click="handAddVisible = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 手动统计对话框 -->
    <el-dialog title="手动统计" :visible.sync="handAddDataVisible" width="40%">
      <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>
    <!-- 图片手动标注 -->
    <el-dialog
      title="手动标注"
      :visible.sync="imgTagDataVisible"
      width="1000px"
      @close="imgTagClosed"
    >
      <ui-marker
        ref="aiPanel-editor"
        class="ai-observer"
        v-bind:uniqueKey="uuid"
        width="100%"
        :ratio="16 / 9"
        @vmarker:onAnnoSelected="onAnnoSelected"
        @vmarker:onAnnoAdded="onAnnoAdded"
        @vmarker:onUpdated="onUpdated"
        @vmarker:onReady="onReady"
        @vmarker:onImageLoad="onImageLoad"
        v-bind:readOnly="readOnly"
        v-bind:imgUrl="currentImage"
      >
      </ui-marker>
      <div class="imgTagCon" style="margin-top: 20px">
        <div>
          <el-input
            style="width: 217px"
            v-model="tagName"
            type="text"
            size="mini"
            placeholder="请输入虫子名称"
          ></el-input>
          <el-button type="success" size="mini" @click="setTag"
            >打标签</el-button
          >
        </div>
      </div>
      <table v-if="Object.keys(setdataNum).length > 0">
        <tr>
          <th>害虫名字</th>
          <th>害虫数量</th>
        </tr>
        <tr v-for="(item, index) in setdataNum" :key="index">
          <td>{{ index }}</td>
          <td>{{ item }}</td>
        </tr>
      </table>
      <div class="btn-box">
        <el-button size="mini" @click="imgTagDataVisible = false"
          >取消</el-button
        >
        <el-button type="primary" size="mini" @click="imgTagSubm"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 查看大图 -->
    <viewer
      v-show="imageListtData"
      :images="recognitionImage"
      ref="viewer"
      @inited="inited"
      :index="3"
    >
      <img v-for="(src, index) in recognitionImage" :src="src" :key="index" />
    </viewer>
    <!-- 查看大图 -->

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

    <!-- 网格 -->
    <div class="griddingLine" v-show="iconShowA">
      <img src="../../../../static/images/gridding.png" alt="" class="" />
    </div>
    <!-- 网格 -->

    <div id="reseau"></div>
  </div>
</template>
<script>
// 测试v-viewer注册
import Vue from "vue";
import { AIMarker } from "Vue-Picture-BD-Marker";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
import AddBase from "../../symanger/farm/AddBase.vue";
Vue.use(Viewer);
Viewer.setDefaults({
  inline: false,
  button: true, //右上角按钮
  navbar: true, //底部缩略图
  title: true, //当前图片标题
  toolbar: false, //底部工具栏
  tooltip: true, //显示缩放百分比
  movable: true, //是否可以移动
  zoomable: true, //是否可以缩放
  rotatable: true, //是否可旋转
  scalable: true, //是否可翻转
  transition: false, //使用 CSS3 过度
  fullscreen: false, //播放时是否全屏
  keyboard: true, //是否支持键盘
  ready: function (e) {
    // console.log(e.type, '组件以初始化')
  },
  show: function (e) {
    // console.log(e.type, '图片显示开始')
    var iconBox = document.getElementById("iconBox");
    iconBox.style.display = "block";
  },
  shown: function (e) {
    // console.log(e.type, '图片显示结束')
  },
  hide: function (e) {
    // console.log(e.type, '图片隐藏完成')
    var domData = document.getElementById("reseau");
    var html = "";
    domData.innerHTML = html;
    var iconBox = document.getElementById("iconBox");
    iconBox.style.display = "none";
  },
  hidden: function (e) {
    // console.log(e.type, '图片隐藏结束')
  },
  view: function (e) {
    // console.log(e.type, '视图开始')
  },
  viewed: function (e) {
    var iconDom = document.getElementById("iconDom");
    var j = JSON.stringify(iconDom);
    var g = j.indexOf("icon2");
    if (g !== -1) {
      var b;
      var c;
      var a = 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 domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="' +
        x +
        '"' +
        " />" +
        "</div>";
      domData.innerHTML = html;
    }
  },
  zoom: function (e) {
    // console.log(e.type, '图片缩放开始')
    var iconDom = document.getElementById("iconDom");
    var j = JSON.stringify(iconDom);
    var g = j.indexOf("icon2");
    console.log(g);
    if (g !== -1) {
      var b;
      var c;
      var a = e.detail.originalEvent.path[0].outerHTML;
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      var x = y + "z-index:10000;";
      var domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="' +
        x +
        '"' +
        " />" +
        "</div>";
      domData.innerHTML = html;
    }
  },
  zoomed: function (e) {
    var iconDom = document.getElementById("iconDom");
    var j = JSON.stringify(iconDom);
    var g = j.indexOf("icon2");
    console.log(g);
    if (g !== -1) {
      var b;
      var c;
      var a = e.detail.originalEvent.path[0].outerHTML;
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      var x = y + "z-index:10000;";
      var domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="' +
        x +
        '"' +
        " />" +
        "</div>";
      domData.innerHTML = html;
    }
  },
});
export default {
  data() {
    return {
      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: {
        // name: '',
        pest_num: "", //害虫数量
        crop_name: "", //作物种类
        pest_case: "", //虫害阶段
        pest_name: "", //害虫名称
        // date1: '',
        // date2: '',
        // delivery: false,
        // type: [],
        // resource: '',
        // desc: ''
      },

      //设备列表

      queryInfo: {
        begin: "",
        end: "",
        page: 1,
        is_online: "",
        dver: "",
      },
      // queryInfo:{
      //     page:1,
      //     searchId:'',
      // },
      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: [], //识别出的数据
      // recognitionImage: [], //识别出的图片
      idList: [],
      timeRange: [], //筛选时间数据
      againData: {}, //需要重新识别功能获取的单个列表数据
      btnShow: false, //网格线按钮
      griddingShow: false, //网格线
      griddingTxt: "", //按钮文本
      imageListtData: false, //查看大图插件
      recognitionImage: [], //图片数组
      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: "",
    };
  },
  mounted() {
    this.imgListData(); //图片列表数据请求
  },
  computed: {
    userType: function () {
      //获取用户类型
      return window.sessionStorage.getItem("myuser_type");
    },
    tagName: {
      get: function () {
        return this.tagName2
      },
      set: function (value) {
         this.tagName2=value.replace(/[\w]/g,'')
      },
    },
  },
  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.enlargement = false;
        this.enlargementImg = true;
        this.griddingShow = false;
        this.btnShow = false;
      } 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 = "使用辅助线";
      }
    },
    // tagName(newValue, oldValue) {
    //   console.log(newValue.replace(/\d/g,''));
    //   return newValue.replace(/\d/g,'')
    // },
  },

  methods: {
    // 列表图片加载失败
    errImg(e) {
      e.target.src = $imghost + "/images/expertDiagnosis/ku/noData.jpg";
    },
    //在线状态选择
    equipStatusCheck(flag) {
      this.active = flag;
      // this.getEquipList();
      if (flag == 0) {
        //拍照
        this.equipBtnControl("takephoto");
      }
      if (flag == 1) {
        this.imgListData(); //图片列表数据请求
      }
      if (flag == 2) {
        //批量删除
        this.delBtnState = false;
      }

      if (flag == 3) {
        //删除
        this.idList = this.imgDataList
          .filter((item) => {
            return item.checked == true;
          })
          .map((item) => {
            return item.id;
          });
        if (this.idList.length == 0) {
          this.$message.warning("请选择要删除的图片！");
        } else {
          this.delImgFun(this.idList);
        }
      }

      if (flag == 4) {
        //取消
        this.imgDataList.map((item) => {
          item.checked = false;
        });
        this.delBtnState = true;
      }

      if (flag == 5) {
        this.delImgFun("");
      }
      if (flag == 6) {
        this.$router.push(`/index/messageWarn/${this.id}`);
      }
      if (flag == 7) {
        this.downBtnState = !this.downBtnState;
      }
      if (flag == 8) {
        //批量下载图片
        this.idList = this.imgDataList
          .filter((item) => {
            return item.checked == true;
          })
          .map((item) => {
            return item.id;
          });
        if (this.idList.length == 0) {
          this.$message.warning("请选择要下载的图片！");
        } else {
          this.downPhoto(this.idList);
        }
      }
      if (flag == 9) {
        this.imgDataList.map((item) => {
          item.checked = false;
        });
        this.downBtnState = !this.downBtnState;
      }
    },
    equipBtnControl(cmd) {
      this.$axios({
        method: "POST",
        url:
          "/api/api_gateway?method=forecast.send_control.admin_device_control",
        data: this.qs.stringify({
          cmd,
          device_type_id: 3,
          d_id: this.$route.query.d_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("指令下发成功!");
        }
      });
    },
    DateChange() {
      this.queryInfo.page = 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.queryInfo.page = 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(data) {
      this.handAddVisible = true;
      this.addFunData = data;
      this.tltName = "手动添加";
      this.InsectListData(); //手动添加弹框中害虫名称列表数据
    },
    // 手动统计
    handAddDataFun(data) {
      this.handAddDataVisible = true;
      this.addFunData = data;
      this.statisticsData(data.id); //请求图片描述
    },
    //识别
    discernFun(data) {
      // this.addFunData = data
      this.discernVisible = true;
      this.loading = true;
      // this.isShow = true
      this.discernFunData(data);
    },
    // 识别数据请求
    discernFunData(data) {
      let that = this;
      that.againData = data;
      let postData = that.qs.stringify({
        img_id: data.id,
        ret: "see",
      });
      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.recognitionImage = [];
            // console.log(res.data.data.image)
            that.recognitionImage.push(res.data.data.image);
            // that.recognitionImage = res.data.data.image //图片
          } else {
            //识别失败
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "warning",
            });
            this.discernVisible = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //重新识别数据请求
    again() {
      var that = this;
      var data = that.againData;
      that.loading = true;
      let postData = that.qs.stringify({
        img_id: data.id,
        ret: "again",
      });
      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; //数组数据
            that.recognitionImage = 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;
          }
        })
        .catch((err) => {
          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(() => {
          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.id, //图片链接
            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 == "") {
                //成功
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                });
                // that.resetField('ruleForm')
                that.statisticsData(that.addFunData.id);
              } else if (data == null && res.data.message !== "") {
                //失败
                this.$message.error({
                  message: res.data.message,
                  duration: 1500,
                });
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //图片列表数据请求
    imgListData() {
      let that = this;
      let id = that.$route.params.id;
      let postData = that.qs.stringify({
        device_id: id,
        page_number: 8,
        page: that.queryInfo.page,
        ret: "list",
        time_begin: this.queryInfo.begin, //开始时间（时间戳）
        time_end: this.queryInfo.end, //结束时间（时间戳）
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo", //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 = 0; i < imgData.length; i++) {
            that.recognitionImage.push(imgData[i].addr);
          }
          // console.log(that.recognitionImage)
          if (nums == 0) {
            that.imgListShow = false;
          } else if (nums !== 0) {
            that.imgListShow = true;
            let data = res.data.data.data;
            that.imgDataList = data.map((item) => {
              item.checked = false;
              return item;
            });
            this.$message.success("请求最新图片成功！");
          }
        })
        .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) {
        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.id, //图片链接
          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 == "") {
              //成功
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
              });
              that.handAddVisible = false;
              // that.resetField('ruleForm')
              that.statisticsData(that.addFunData.id);
            } else if (data == null && res.data.message !== "") {
              //失败
              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.id, //图片链接
          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 == "") {
              //成功
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
              });
              that.handAddVisible = false;
              that.resetField("ruleForm");
            } else if (data == null && res.data.message !== "") {
              //失败
              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 == "") {
        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 = "";
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
              });
            } else if (data == null && res.data.message !== "") {
              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 == "") {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
            });
            that.handAddState = 1;
            that.getBack(); //重新请求害虫名称数据
          } else if (data == null && res.data.message == "删除失败") {
            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 == "") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              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);
      // console.log(vm.imgInfo);
      if (vm.imgInfo.width !== 4000 && vm.imgInfo.height !== 3000) {
        this.btnShow = true;
      }
    },

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

    // 配置查看大图插件
    inited(viewer) {
      this.$viewer = viewer;
      // this.$viewer.index = this.activeIndex
      // this.$viewer.options.button = true
      // this.$viewer.options.navbar = true
      // this.$viewer.options.title = true
      // this.$viewer.options.toolbar = true
      // this.$viewer.options.zoomable = true
      // this.$viewer.options.movable = false
    },
    //点击图片查看大图
    amplificationA(index) {
      let that = this;
      let id = that.$route.params.id;
      let postData = that.qs.stringify({
        device_id: id,
        // device_id: '300142',
        page_number: 8,
        page: that.queryInfo.page,
        ret: "list",
        time_begin: this.queryInfo.begin, //开始时间（时间戳）
        time_end: this.queryInfo.end, //结束时间（时间戳）
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo", //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 = 0; i < imgData.length; i++) {
            that.recognitionImage.push(imgData[i].addr);
          }
          if (nums == 0) {
            that.imgListShow = false;
          } else if (nums !== 0) {
            that.imgListShow = true;
            let data = res.data.data.data;
            // that.imgDataList = data.map((item) => {
            //   item.checked = false;
            //   return item;
            // });
            this.iconIf = true;
            // this.$viewer.show();
            console.log(index);
            this.$viewer.view(index);
            this.iconShow = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      // this.$viewer.show()
      // this.iconShow = true
    },
    // 打开图片网格
    openGridding() {
      // console.log(this.$viewer.element.ownerDocument.images[21].outerHTML)+
      var arr = [];
      arr = this.$viewer.element.ownerDocument.images;
      var a;
      for (var i = 0; i < arr.length; i++) {
        var k = arr[i].outerHTML.indexOf('style="');
        var j = arr[i].outerHTML.indexOf("margin-top:");
        if (k !== -1 && j !== -1) {
          a = arr[i].outerHTML;
        }
      }
      var b;
      var c;
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      // var x = y + "z-index:10000;";
      // console.log(x)
      var domData = document.getElementById("reseau");
      var html =
        '<div class="griddingLine" v-show="iconShow">' +
        '<img src="../../../../static/images/gridding.png" alt="" class="" ' +
        'style="z-index: 10000;' +
        y +
        '"' +
        " />" +
        '<div style="color: red; font-weight: 550; float: left; position: absolute; left: 3.5rem;bottom: .8rem; z-index: 10001; font-size: 15px;">' +
        "*注：每个网格大小为20*20mm" +
        "</div>" +
        "</div>";
      domData.innerHTML = html;
      console.log(domData);
      this.iconIf = false;
    },
    // 关闭图片网格
    offGridding() {
      // alert('关闭')
      var domData = document.getElementById("reseau");
      var html = "";
      domData.innerHTML = html;
      this.iconIf = true;
    },
    downloadFile(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(arr) {
      let uid = sessionStorage.getItem("myuid");
      let image_id = arr.join(",");
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=forecast.worm_lamp.get_task_id",
        data: this.qs.stringify({
          image_id,
          myuid: uid,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("图片下载中！");
          let that = this;
          this.cy_id = res.data.data;
          function downPhotoState() {
            if (that.times >= 0) {
              that.times--;
              that
                .$axios({
                  method: "POST",
                  url: "/api/api_gateway?method=forecast.worm_lamp.check_down",
                  data: that.qs.stringify({
                    get_id: that.cy_id,
                  }),
                })
                .then((res) => {
                  if (res.data.data) {
                    // 判断后台从阿里云下载图片是否完成
                    clearInterval(interval);
                    that
                      .$axios({
                        method: "POST",
                        url: "/api/image_down",
                        withCredentials: true,
                        responseType: "blob",
                        data: that.qs.stringify({
                          get_id: that.cy_id,
                        }),
                      })
                      .then((res) => {
                        that.downloadFile(res.data);
                      });
                  }
                })
                .catch((error) => this.$message.error(error));
            } else {
              clearInterval(interval);
              that.$message.warning("图片下载失败！");
            }
          }
          var interval = setInterval(downPhotoState, 1000);
        }
      });
    },
    onAnnoSelected(data, uniqueKey) {
      // console.log(999);
      // console.log(data);
      // console.log(uniqueKey);
    },
    onAnnoAdded() {},
    onUpdated(data) {
      this.saveTag();
    },
    onReady() {},
    onImageLoad(e) {},
    //手动图片标注
    imgTag(data) {
      this.$axios({
        method: "post",
        url:
          "/api/api_gateway?method=forecast.forecast_system.equip_photo_discern",
        data: this.qs.stringify({
          img_id: data.id,
          ret: "see",
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.currentImage = res.data.data.image;
          this.tagImgId = data.id;
          // this.mgMark = data.mark;
          console.log(data);
          console.log(data.mark);
          this.imgTagDataVisible = true;
          this.$nextTick(() => {
            this.renderData(JSON.parse(data.mark));
          });
        }else{
          this.$message.warning(res.data.message)
        }
      });
    },
    //设置标签
    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().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() {
      this.$axios({
        method: "post",
        url:
          "/api/api_gateway?method=forecast.forecast_system.cbdphoto_receive",
        data: this.qs.stringify({
          img_id: this.tagImgId,
          mark: JSON.stringify(this.setdata),
        }),
      }).then((res) => {
        if (res.data.data) {
          this.$message.success("提交成功！");
        } else {
          this.$message.warning(res.data.message);
        }
        this.imgTagDataVisible = false;
        this.imgListData();
      });
    },
  },
  components: { "ui-marker": AIMarker },
};
</script>
<style lang="less" scoped>
.check-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 20px;
  align-items: center;
  .el-select {
    width: 90px;
  }
}
.photoItem {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  &:hover {
    .photoInfo {
      i {
        display: block;
      }
    }
  }
  .photoInfo {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    text-align: right;
    span {
      color: #fff;
      margin: 2.6rem 0 0 0;
    }
    i {
      cursor: pointer;
      color: red;
      display: none;
    }
  }
  .photoImg {
    height: 250px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .date {
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
  }
  .photoCtrl {
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
      border-right: 1px solid #d8d8d8;
      margin-bottom: 0;
      cursor: pointer;
      &:hover {
        color: #14a478;
      }
    }
    .el-col:last-child {
      border-right: none;
    }
  }
}
.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;
  }
}
.discernResult {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  padding: 3px 37px;
  .name {
    font-size: 14px;
    i {
      font-size: 20px;
      font-weight: bold;
    }
    i,
    span {
      color: #14a478;
    }
  }
  .number {
    span {
      color: #14a478;
    }
  }
}
.handAddWormName {
  display: flex;
  align-items: center;
  margin: 20px 0 20px;
  label {
    width: 100px;
  }
}
.handAddWormNameBtn,
.handDelWormNameBtn {
  text-align: right;
}
.handDelWormName {
  margin: 20px 0 20px;
  .el-checkbox {
    width: 26%;
    margin-bottom: 10px;
  }
}
// 识别成功后的样式
.enlargementImg {
  width: 80%;
  margin: 0 0 0 2.2rem;
}

// 识别成功后的样式
.enlargementImgA {
  width: 80%;
  position: absolute;
  left: 2.2rem;
  top: 0;
}

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

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

.viewer-move {
  background-image: url("../../../../static/images/gridding.png");
}
.imgTagCon {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  margin-top: 10px;
  td,
  th {
    border: 1px solid #ddd;
  }
}
.btn-box {
  padding: 15px 0;
  text-align: right;
}
/deep/.g-image-op {
  bottom: -24px;
}
/deep/.g-image-op-content {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}
</style>


<style lang="less">
// 修改手动标注弹框的鼠标样式
// .vmr-ai-raw-image-mask, .annotate {
//   cursor: crosshair !important;
// }
// .annotation, .selected {
//   cursor: move !important;
// }
</style>

