cropland/src/pages/plantGuard/plantProtection/cbdPhoto.vue

<!-- 测报灯图片 -->
<template>
  <div class="innerMargin">
      <el-card class="box-card">
        <div class="cbdPhoto">
            <div class="timeLIneLeft">
                <div class="title">设备：{{id}}</div>
                <el-tree 
                  :data="data" 
                  accordion
                  :props="defaultProps" 
                  :load="loadNode"
                  lazy
                  :highlight-current="true"
                  @node-click="handleNodeClick">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>
                        <!-- <i :class="[node.data.leaf?'el-icon-document':'',node.expanded?'el-icon-folder-opened':'el-icon-folder']"></i>{{ data.label }} -->
                        <i :class="[renderIconContent(node,data),'treeicon']"></i>{{ data.label }}
                      </span>
                    </span>
                </el-tree>
            </div>
            <div class="photosRight">
              <div class="typeBtns">
                <div>
                  <el-radio-group v-model="radio1" @change="radio1ChangeFun()">
                    <el-radio-button label="">时间顺序展示</el-radio-button>
                    <el-radio-button label="des_nums">害虫数量展示</el-radio-button>
                    <el-radio-button label="desc_kind">害虫种类展示</el-radio-button>
                  </el-radio-group>
                </div>
                <div>
                  <el-button type="blueInfo" size="small" @click="equipStatusCheck('0')"
                    >拍照</el-button
                  >
                  <el-button type="blueInfo" size="small" @click="equipStatusCheck('1')"
                    >刷新</el-button
                  >
                  <el-button
                    v-if="delBtnState"
                    type="blueInfo"
                    size="small"
                    @click="equipStatusCheck('2')"
                    >批量删除</el-button
                  >
                  <el-button
                    v-if="!delBtnState"
                    type="blueInfo"
                    size="small"
                    @click="equipStatusCheck('3')"
                    >删除</el-button
                  >
                  <el-button
                    v-if="!delBtnState"
                    type="grayInfo"
                    size="small"
                    @click="equipStatusCheck('4')"
                    >取消</el-button
                  >
                  <el-button type="blueInfo" size="small" @click="equipStatusCheck('5')"
                    >一键删除</el-button
                  >
                  <el-button
                    v-if="downBtnState"
                    type="blueInfo"
                    size="small"
                    @click="equipStatusCheck('7')"
                    >图片下载</el-button
                  >
                  <el-button
                    v-if="!downBtnState"
                    type="blueInfo"
                    size="small"
                    @click="equipStatusCheck('8')"
                    >下载</el-button
                  >
                  <el-button
                    v-if="!downBtnState"
                    type="grayInfo"
                    size="small"
                    @click="equipStatusCheck('9')"
                    >取消</el-button
                  >
                </div>
              </div>
              <div class="phohos">
                <el-row :gutter="20">
                  <el-col  :xs="12" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item,index) in imgDataList" :key="item.id">
                    <div class="grid-content bg-gray">
                      <div class="delBoxs">
                        <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>
                      </div>
                      <div class="imgBox">
                        <div class="uptime" v-if="radio1=='des_nums'||radio1=='desc_kind'">{{item.addtime*1000 | formatTime}}</div>
                        <img
                          @click="amplificationA(index)"
                          v-lazy="item.addr"
                          @error="errImg"
                          alt
                        />
                      </div>
                      <div class="photoTime" v-if="radio1==''">
                        <span>{{item.addtime*1000 | formatTime}}</span>
                        <span v-if="discernState" @click="discernFunData(item)">
                          <i class="el-icon-search"></i>害虫识别
                        </span>
                        <span v-else @click="imgTag(item)" >
                          <i class="el-icon-edit"></i>手动标注
                        </span>
                      </div>
                      <div class="photoTime" v-if="radio1=='des_nums'">
                        <span>害虫数量：{{item.des_nums }}头</span>
                        <span @click="discernFunData(item)">
                          <i class="el-icon-document"></i>查看详情
                        </span>
                      </div>
                      <div class="photoTime" v-if="radio1=='desc_kind'">
                        <span>害虫种类：{{item.desc_kind }}类</span>
                        <span @click="discernFunData(item)">
                          <i class="el-icon-document"></i>查看详情
                        </span>
                      </div>
                    </div>
                  </el-col>
                  <el-col  :xs="12"  v-if="!imgDataList.length">
                    <div class="empty">
                      暂无数据
                    </div>
                  </el-col>
                </el-row>

                <el-pagination
                  v-if="imgDataList.length"
                  background
                  layout="prev, pager, next"
                  :total="totalNum"
                  @current-change="changePage"
                  :current-page="page"
                  :page-size="8"
                ></el-pagination>
              </div>
                
            </div>
        </div>
      </el-card>
      <!-- 查看大图 -->
      <viewer
        v-show="false"
        :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 id="reseau"></div>
      <!-- 识别结果弹框 -->
      <el-dialog
        title="图片详情"
        :visible.sync="discernShow"
        width="1000px"
        top="180px"
        @close="imgTagClosed"
      >
        <div class="discernResult">
          <div class="discernResultImg">
            <div class="rectTitle">识别结果</div>
            <img 
              :src="recognitionImage" 
              @click="amplificationA(index)" 
              alt=""
            >
          </div>
          <div class="discernResultRight" v-if="describe">
            <div class="rectTitle discernResultBtn">
              <span>害虫识别</span>
              <el-button type="blueInfo" size="small" @click="imgTag('result')" >手动标注</el-button>
            </div>
            <div v-for="(item, index) in recognitionData" :key="index" class="discernResults">
              <div class="name">
                名称
                <span @click="getWromDiscern(item.result_list)">{{ item.result_list }}（序号：{{ item.number }}）</span>
              </div>
              <div class="number">
                个数：
                <span>{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <div class="discernResultRight" v-else>
            <div class="rectTitle discernResultBtn">
              <span>害虫识别</span>
              <el-button type="blueInfo" size="small" @click="describe=true" >返回</el-button>
            </div>
            <div>
              这是害虫描述
            </div>
          </div>
        </div>
      </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>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 测试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 {
  //import引入的组件需要注入到对象中才能使用
  components: {
    "ui-marker": AIMarker
  },
  data() {
    //这里存放数据
    return {
      id:this.$store.state.cbd_photo_id,
      d_id:this.$store.state.cbd_photo_did,
      data: [
        {
          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'
            }]
          }]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
      radio1:'',
      totalNum:30,
      page:1,
      begin:'',
      end:'',
      recognitionImage:[],
      imgList:[],
      imgDataList:[],
      delBtnState:true,
      downBtnState: true,
      discernState:0,//0禁用识别的状态
      iconIf: true,
      iconShow: false, //icon
      discernShow:false,//识别弹框状态
      againData: {}, //需要重新识别功能获取的单个列表数据
      recognitionData: [], //识别出的数据
      imgTagDataVisible:false,//手动标注
      uuid: "0da9130",
      readOnly: false, //是否只读
      currentImage: "", //图片标注的图片
      setdataNum: {}, //每种虫子个数
      tagName2: "",
      tagName: "",
      describe:true,
    };
  },
  //监听属性 类似于data概念
  computed: {
    tagName: {
      get: function () {
        return this.tagName2
      },
      set: function (value) {
         this.tagName2=value.replace(/[\w]/g,'')
      },
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 列表图片加载失败
    errImg(e) {
      e.target.src = $imghost + "/images/expertDiagnosis/ku/noData.jpg";
    },
    handleNodeClick(data) {
      console.log(data);
      console.log(data.year);
      console.log(data.month);
      console.log(data.day);
      if(data.year&&data.month&&data.day){
        this.begin = new Date(data.year+'-'+data.month+'-'+data.day).getTime()/1000;
        this.end = new Date(data.year+'-'+data.month+'-'+(data.day+1)).getTime()/1000;
      }else if(data.year&&data.month){
        this.begin = new Date(data.year+'-'+data.month+'-'+1).getTime()/1000;
        this.end = new Date(data.year+'-'+(data.month+1)+'-'+1).getTime()/1000;
      }else if(data.year){
        this.begin = new Date(data.year+'-'+1+'-'+1).getTime()/1000;
        this.end = new Date((data.year+1)+'-'+1+'-'+1).getTime()/1000;
      }
      this.imgListData()
    },
    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) {
      console.log(node);
      console.log(node.data);
      console.log(node.data.year);
      var date =new Date()
      var year=date.getFullYear();
      var month = date.getMonth()+1;
      var dataArr = [
        {
          label: parseInt(year)+'年',
          year:parseInt(year),
          icon:'el-icon-document'
        },
        {
          label: parseInt(year)-1+'年',
          year:parseInt(year)-1,
          icon:'el-icon-document'
        },
        {
          label: parseInt(year)-2+'年',
          year:parseInt(year)-2,
          icon:'el-icon-document'
        },
        {
          label: parseInt(year)-3+'年',
          year:parseInt(year)-3,
          icon:'el-icon-document'
        },
      ]
      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);
      }
      
    },
    //控制按钮
    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;
      }

      // 开启禁止识别操作
      if (flag == 10) {
        if (this.btnOperation == '开启识别') {
          // 当前处于识别关闭状态
           this.$confirm('确认开启识别状态？')
          .then(_ => {
            this.operationDiscern('enable')
          })
          .catch(_ => {});
        } else if (this.btnOperation == '禁止识别') {
          // 当前处于识别开启状态
           this.$confirm('确认关闭识别状态？')
          .then(_ => {
            this.operationDiscern('disable')
          })
          .catch(_ => {});
        }
      }
    },
    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.d_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("指令下发成功!");
        }
      });
    },
    radio1ChangeFun(){
      this.page = 1
      this.imgListData()
    },
     //图片列表数据请求
    imgListData() {
      let that = this;
      let postData = that.qs.stringify({
        device_id: that.id,
        page_number: 8,
        page: that.page,
        ret: 'list',
        rets: that.radio1,
        time_begin: that.begin, //开始时间（时间戳）
        time_end: that.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;
          this.discernState = res.data.data.disable;
          that.recognitionImage = [];
          that.imgList = [];
          var imgData = res.data.data.data;
          for (var i = 0; i < imgData.length; i++) {
            that.recognitionImage.push(imgData[i].addr);
            that.imgList.push(imgData[i].addr);
          }
          if (nums == 0) {
            that.imgDataList = []
          } else if (nums !== 0) {
            let data = res.data.data.data;
            that.imgDataList = data.map((item) => {
              item.checked = false;
              return item;
            });
            // this.$message.success("请求最新图片成功！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变page
    changePage(val) {
      this.page = val;
      this.imgListData();
    },
    // 批量删除
    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: "已取消删除",
          });
        });
    },
    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 = this.$store.state.user_id;
      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);
        }
      });
    },
     // 配置查看大图插件
    inited(viewer) {
      this.$viewer = viewer;
    },
     //点击图片查看大图
    amplificationA(index) {
      this.iconIf = true;
      this.$viewer.view(index);
    },
    // 打开图片网格
    openGridding() {
      var arr = [];
      arr = this.$viewer.element.ownerDocument.images;
      var a;
      for (var i = 0; i < arr.length; i++) {
        var k = arr[i].outerHTML.indexOf('style="');
        var j = arr[i].outerHTML.indexOf("margin-top:");
        if (k !== -1 && j !== -1) {
          a = arr[i].outerHTML;
        }
      }
      var b;
      var c;
      b = a.split('style="');
      c = b[1].split('">');
      var f = c[0];
      var t = f.replace("margin-top", "top");
      var y = t.replace("margin-left", "left");
      // var x = y + "z-index:10000;";
      // 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;
    },
    // 识别数据请求
    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 = [];
            that.recognitionImage.push(res.data.data.image);
            this.discernShow = true;
          } else {
            //识别失败
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "warning",
              offset:100
            });
            this.discernShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //关闭识别弹框
    closeDiscerRes(){
      this.recognitionImage = this.imgList
      this.discernShow=false;
      this.describe = true;
    },
    //手动标记
    imgTagClosed() {
      this.tagName = "";
      this.setdataNum = {};
      this.$refs["aiPanel-editor"].getMarker().clearData();
    },
    onAnnoSelected(data, uniqueKey) {
      // console.log(999);
      // console.log(data);
      // console.log(uniqueKey);
    },
    onAnnoAdded() {},
    onUpdated(data) {
      this.saveTag();
    },
    onReady() {},
    onImageLoad(e) {},
    //设置标签
    setTag() {
      this.$refs["aiPanel-editor"].getMarker().setTag({
        tagName: this.tagName,
        tag: "0x0001",
      });
      this.saveTag();
    },
    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.discernShow = false;
        this.imgListData();
      });
    },
    //手动图片标注
    imgTag(data) {
      if(data == 'result'){
        var data = this.againData
      }
      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)
        }
      });
    },
     //打开页面加载标签
    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;
    },
    getWromDiscern(name){
      this.describe = false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.imgListData()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.cbdPhoto,.typeBtns,.photoTime{
  display: flex;
  justify-content: space-between;
}
.photoTime{
  align-items: center;
}
.timeLIneLeft{
  width: 300px;
  max-height: 700px;
  overflow: auto;
  .title{
    font-size: 14px;
    color: #0195ff;
  }
}
.photosRight{
  flex: 1;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #FFFFFF;
    background-color: #0195ff;
    border-color: #0195ff;
    -webkit-box-shadow: -1px 0 0 0 #14a478;
    box-shadow: -1px 0 0 0 #14a478;
}
/deep/.el-radio-button__inner:hover{
  color: #0195ff;
}
.phohos{
  margin-top: 20px;
  .bg-gray{
    position: relative;
    background: #eee;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 11px;
    .imgBox{
      height: 315px;
      background: #000;
      text-align: center;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      img{
        height: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      .uptime{
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        font-size: 14px;
        line-height: 28px;
        padding-left: 5px;
      }
    }
    .delBoxs{
      position: absolute;
      right: 20px;
      color: red;
      z-index: 9;
      cursor: pointer;
      top: 25px;
      i{
        font-size: 18px;
        display: none;
      }
    }
    
    .photoTime{
      margin-top: 5px;
      font-size: 14px;
      line-height: 22px;
      span:nth-child(2){
        background: #f0c700;
        color: #fff;
        padding: 2px 7px;
        border-radius: 3px;
        cursor: pointer;
      }
    }
  }
  .bg-gray:hover .delBoxs i{
    display: block;
  }
}
.el-pagination .el-pager li.active{
  background-color: #0195ff!important;
}
.el-tree{
  font-size: 14px;
  .treeicon{
    margin-right: 5px;
    color: #f0bb25;
  }
  .document.treeicon{
    color: #d5eeff;
  }
  .is-current{
    .treeicon:nth-child(1){
      color: #ffa02a;
    }
  }
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d5eeff;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #0295ff;
    border-color: #006fbe;
}
// 查看大图的图片样式
.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;
}
// 识别结果弹框
.discernResult{
  display: flex;
  justify-content: space-between;
}
.discernResultImg{
  flex: 1;
  img{
    width: 100%;
  }
}
.discernResultRight{
  width: 300px;
  padding: 0 0 0 15px;
}
.discernResults {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  padding-left: 5px;
  .name {
    font-size: 14px;
    span {
      color: #ff380b;
      cursor: pointer;
    }
  }
  .name:hover{
    span{
      color: #0195ff;
    }
  }
  .number {
    span {
      color: #ff380b;
    }
  }
}
.rectTitle{
  position: relative;
  padding-left: 14px;
  margin-bottom: 10px;
  font-size: 16px;
}
.rectTitle::before{
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background: #0295ff;
  left: 0;
  top: 8px;
}
.discernResultBtn{
  display: flex;
  justify-content: space-between;
}
.empty{
  line-height: 100px;
  text-align: center;
  font-size: 18px;
}
// 分页为蓝色调
/deep/.el-pagination .el-pager li.active{
  background-color: #0295ff!important;  
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
	color: #0295ff;
}
/deep/.el-input__inner:focus{
  outline: none;
  border-color: #0295ff;
}
</style>