修复树滚动条样式,和图片URL

zhangzengfei

2022-08-04 8f5d6bac4776973c73626c9f34fa68ba1ac83d6e

修复树滚动条样式,和图片URL

 src/components/canvas/index.vue

@@ -1,32 +1,21 @@
<template>
  <div
    class="s-cavas"
    :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
  >
  <div class="s-cavas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }">
    <canvas
      ref="myCanvas"
      :width="canvasWidth"
      :height="canvasHeight"
      :style="`background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;`"
      :style="
        `background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;`
      "
    ></canvas>

    <el-tooltip
      content="刷新底图"
      placement="bottom"
      popper-class="atooltip"
      v-if="isShowRefresh"
    >
    <el-tooltip content="刷新底图" placement="bottom" popper-class="atooltip" v-if="isShowRefresh">
      <span class="iconfont icongengxin" @click="refresh">&#xe606;</span>
    </el-tooltip>
    <p class="tip" :style="disabled ? `display:block;` : `display:none;`">
      批量配置方式不允许绘制区域，请选择摄像机进行区域绘制
    </p>
    <el-dialog
      :visible.sync="visible"
      width="1150px"
      append-to-body
      :before-close="cancelFunc"
    >
    <el-dialog :visible.sync="visible" width="1150px" append-to-body :before-close="cancelFunc">
      <canvas-dialog
        ref="bigCanvas"
        :canvasDataToChild="canvasData"
@@ -41,94 +30,94 @@
  </div>
</template>
<script>
import canvasDialog from "./Dialog";
import { updateSnapshot, updategb28181 } from "@/api/camera";
import canvasDialog from "./Dialog"
import { updateSnapshot, updategb28181 } from "@/api/camera"
export default {
  name: "myCanvas",
  components: {
    canvasDialog,
    canvasDialog
  },
  props: {
    divId: {
      default: "my-canvas",
      type: String,
      type: String
    },
    isGB28181: {
      default: false,
      type: Boolean,
      type: Boolean
    },
    isShowRefresh: {
      default: true,
      type: Boolean,
      type: Boolean
    },
    sourceType: {
      default: 1,
      type: Number,
      type: Number
    },
    isShowDrawArrow: {
      default: false,
      type: Boolean,
      type: Boolean
    },
    disabled: {
      default: false,
      type: Boolean,
      type: Boolean
    },
    canvasDataShow: {
      default: () => {
        return { line: [], rect: [], arrow: [], polygon: [] };
        return { line: [], rect: [], arrow: [], polygon: [] }
      },
      type: Object,
      type: Object
    },
    currentCamera: {
      type: Object,
      type: Object
    },
    snapshot_url: {
      type: String,
      default: "",
      default: ""
    },
    isLink: {
      type: Boolean,
      default: false,
      default: false
    },
    loading: {
      type: Boolean,
      default: false,
      default: false
    },
    canvasWidth: {
      type: Number,
      default: 576,
      default: 576
    },
    canvasHeight: {
      type: Number,
      default: 324,
      default: 324
    },
    showProportion: {
      type: Number,
      default: 1.666,
    },
      default: 1.666
    }
  },
  computed: {
    canvasBg() {
      if (this.snapshot_url) {
        // 数据栈自动上传处理
        if (this.snapshot_url.indexOf("/opt/vasystem") == 0) {
          return this.snapshot_url.replace("/opt/vasystem", "");
          return this.snapshot_url.replace("/opt/vasystem", "")
        }

        if (this.snapshot_url.indexOf("data:image/png;base64,") != -1) {
          return `${this.snapshot_url}`;
          return `${this.snapshot_url}`
        }

        if (this.sourceType == 2) {
          return `${this.snapshot_url}`;
          return `${this.snapshot_url}`
        } else {
          console.log(this.snapshot_url);
          return `http://${this.snapshot_url}`;
          console.log(this.snapshot_url)
          return `/httpImage/${this.snapshot_url}`
        }
      } else {
        return this.blackImg;
        return this.blackImg
      }
    },
    }
  },
  data() {
    return {
@@ -137,7 +126,7 @@
        line: [],
        rect: [],
        arrow: [],
        polygon: [],
        polygon: []
      }, // 最终输出的画布坐标数据
      canvasPic: new Image(), // 撤销用的图片
      canvasHistory: [], // 历史数据，以供撤销使用
@@ -145,254 +134,188 @@
      c: null,
      ctx: null,
      visible: false,
      baseImg: undefined,
      baseImg: undefined
      //showProportion: 1.666
    };
    }
  },
  watch: {
    loading: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.baseImg = "";
          this.refresh();
          this.baseImg = ""
          this.refresh()
        }
      },
      deep: true,
      deep: true
    },
    canvasDataShow: {
      handler(newVal, oldVal) {
        // console.log(newVal, "canvasDataShow newVal");
        this.canvasData.line = newVal.line;
        this.canvasData.rect = newVal.rect;
        this.canvasData.arrow = newVal.arrow;
        this.canvasData.polygon = newVal.polygon;
        this.clickSelect(this.canvasData);
        this.canvasData.line = newVal.line
        this.canvasData.rect = newVal.rect
        this.canvasData.arrow = newVal.arrow
        this.canvasData.polygon = newVal.polygon
        this.clickSelect(this.canvasData)
      },
      deep: true,
    },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.c = document.querySelector("#" + this.divId);
      this.c = this.$refs.myCanvas;
      this.ctx = this.c.getContext("2d");
      this.canvasData = JSON.parse(JSON.stringify(this.canvasDataShow));
      this.clickSelect(this.canvasData);
    });
      this.c = this.$refs.myCanvas
      this.ctx = this.c.getContext("2d")
      this.canvasData = JSON.parse(JSON.stringify(this.canvasDataShow))
      this.clickSelect(this.canvasData)
    })
  },
  methods: {
    // 获取canvas底图
    async getCanvasPic() {
      // this.$emit('changeBaseImg',this.currentCameraId)
      this.$emit("changeLoading", true);
      this.$emit("changeLoading", true)
      if (this.currentCamera.cameraId) {
        let _this = this;
        let _this = this

        if (_this.currentCamera.type === 1) {
          await updategb28181({
            id: _this.currentCamera.cameraId,
            id: _this.currentCamera.cameraId
          }).then((res) => {
            if (res.data.cameraId === _this.currentCamera.cameraId) {
              _this.baseImg = "data:image/png;base64," + res.data.base64;
              _this.$emit(
                "refresh",
                _this.baseImg,
                _this.currentCamera.cameraName
              );
              _this.$forceUpdate();
              _this.baseImg = "data:image/png;base64," + res.data.base64
              _this.$emit("refresh", _this.baseImg, _this.currentCamera.cameraName)
              _this.$forceUpdate()
              _this.$notify({
                type: "success",
                message: "底图已刷新",
              });
                message: "底图已刷新"
              })
            }
          });
          })

          this.$emit("changeLoading", false);
          this.$emit("changeLoading", false)

          return;
          return
        }

        await updateSnapshot({
          id: _this.currentCamera.cameraId,
          name: _this.currentCamera.cameraName,
          type: _this.currentCamera.type,
          rtsp: _this.currentCamera.rtsp,
          rtsp: _this.currentCamera.rtsp
        }).then((res) => {
          if (res.data.cameraId === _this.currentCamera.cameraId) {
            _this.baseImg = "data:image/png;base64," + res.data.base64;
            _this.$emit(
              "refresh",
              _this.baseImg,
              _this.currentCamera.cameraName
            );
            _this.$forceUpdate();
            _this.baseImg = "data:image/png;base64," + res.data.base64
            _this.$emit("refresh", _this.baseImg, _this.currentCamera.cameraName)
            _this.$forceUpdate()
            _this.$notify({
              type: "success",
              message: "底图已刷新",
            });
              message: "底图已刷新"
            })
          }
        });
        })

        this.$emit("changeLoading", false);
        this.$emit("changeLoading", false)
      }
    },
    showModal() {
      // console.log(this.canvasData, "点击绘制的时候传递过去的数据");
      this.visible = true;
      this.visible = true
      this.$nextTick(() => {
        // this.$refs.bigCanvas.delCursor = {}
      });
      })
    },
    cancelFunc() {
      this.visible = false;
      this.$refs.bigCanvas.cancel();
      this.visible = false
      this.$refs.bigCanvas.cancel()
      // console.log("关闭了");
    },
    handleOk() {
      // 判断图形的名字是否重复
      // console.log("ok");
      this.$refs.bigCanvas.changeType("0");
      let repeatName = this.isRepeat();
      this.$refs.bigCanvas.changeType("0")
      let repeatName = this.isRepeat()
      if (repeatName !== "") {
        this.$notify({
          type: "error",
          message: repeatName + "图形名称重复，请更正！",
        });
        return;
          message: repeatName + "图形名称重复，请更正！"
        })
        return
      }
      this.$notify({
        type: "success",
        message: "已保存绘制！",
      });
        message: "已保存绘制！"
      })
      // 每次保存关闭模态窗时都要把模态窗的数据写到父组件里来
      this.canvasData = this.$refs.bigCanvas.canvasData;
      this.canvasData = this.$refs.bigCanvas.canvasData
      // 顺便甩到更外层去
      this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData);
      this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData)
      // console.log("你好", this.canvasData);

      this.clickSelect(this.canvasData);
      this.visible = false;
      this.clickSelect(this.canvasData)
      this.visible = false
    },
    // 回显cavas数据
    // 点击选中变色 将当前页面所有路径重绘判断当前鼠标的坐标在哪个图形内 如果不传坐标参数就是回显的方法
    clickSelect(e) {
      this.ctx.clearRect(0, 0, this.c.width, this.c.height);
      let _this = this; // 集合中遍历需要将this转存一下使用
      _this.canvasData.line.forEach(function (v, i) {
        _this.ctx.strokeStyle = "yellow";
        _this.ctx.beginPath();
        _this.ctx.moveTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[1].x / _this.showProportion,
          v.location[1].y / _this.showProportion
        );
        _this.ctx.stroke();
        _this.showRemarks(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion,
          v.name
        );
        _this.c.style.cursor = "default";
      this.ctx.clearRect(0, 0, this.c.width, this.c.height)
      let _this = this // 集合中遍历需要将this转存一下使用
      _this.canvasData.line.forEach(function(v, i) {
        _this.ctx.strokeStyle = "yellow"
        _this.ctx.beginPath()
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
        _this.ctx.stroke()
        _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
        _this.c.style.cursor = "default"
        if (e && _this.ctx.isPointInStroke(e.offsetX, e.offsetY)) {
          // 如果传入了事件坐标，就用isPointInStroke判断一下
          // 如果当前环境覆盖了该坐标，就将图形的index放到数组里
          // 当鼠标移入之后将当前的模式切换为选中模式
          _this.type = "0";
          _this.delCursor.type = "1";
          _this.delCursor.index = i;
          _this.type = "0"
          _this.delCursor.type = "1"
          _this.delCursor.index = i
          // 将当前元素标红
          _this.ctx.strokeStyle = "red";
          _this.ctx.beginPath();
          _this.ctx.moveTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[1].x / _this.showProportion,
            v.location[1].y / _this.showProportion
          );
          _this.ctx.stroke();
          _this.showRemarks(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion,
            v.name
          );
          _this.c.style.cursor = "pointer";
          _this.ctx.strokeStyle = "red"
          _this.ctx.beginPath()
          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
          _this.ctx.stroke()
          _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
          _this.c.style.cursor = "pointer"
        }
      });
      _this.canvasData.rect.forEach(function (v, i) {
        _this.ctx.strokeStyle = "yellow";
        _this.ctx.beginPath();
        _this.ctx.moveTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[1].x / _this.showProportion,
          v.location[1].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[2].x / _this.showProportion,
          v.location[2].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[3].x / _this.showProportion,
          v.location[3].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        _this.ctx.stroke();
        _this.showRemarks(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion,
          v.name
        );
        _this.c.style.cursor = "default";
      })
      _this.canvasData.rect.forEach(function(v, i) {
        _this.ctx.strokeStyle = "yellow"
        _this.ctx.beginPath()
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
        _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion)
        _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion)
        _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
        _this.ctx.stroke()
        _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
        _this.c.style.cursor = "default"
        if (e && _this.ctx.isPointInPath(e.offsetX, e.offsetY)) {
          // 如果传入了事件坐标，就用isPointInStroke判断一下
          // 当鼠标移入之后将当前的模式切换为选中模式
          _this.type = "0";
          _this.delCursor.type = "2";
          _this.delCursor.index = i;
          _this.type = "0"
          _this.delCursor.type = "2"
          _this.delCursor.index = i
          // 将当前元素标红
          _this.ctx.strokeStyle = "red";
          _this.ctx.beginPath();
          _this.ctx.moveTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[1].x / _this.showProportion,
            v.location[1].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[2].x / _this.showProportion,
            v.location[2].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[3].x / _this.showProportion,
            v.location[3].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          _this.ctx.stroke();
          _this.showRemarks(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion,
            v.name
          );
          _this.c.style.cursor = "pointer";
          _this.ctx.strokeStyle = "red"
          _this.ctx.beginPath()
          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
          _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion)
          _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion)
          _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
          _this.ctx.stroke()
          _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
          _this.c.style.cursor = "pointer"
        }
      });
      _this.canvasData.arrow.forEach(function (v, i) {
        _this.ctx.strokeStyle = "yellow";
      })
      _this.canvasData.arrow.forEach(function(v, i) {
        _this.ctx.strokeStyle = "yellow"
        // _this.ctx.beginPath()
        // _this.ctx.moveTo(v.location[0].x / 2, v.location[0].y / 2)
        // _this.ctx.lineTo(v.location[1].x / 2, v.location[1].y / 2)
@@ -406,22 +329,18 @@
          20,
          30,
          "yellow"
        ); // 绘制方法
        _this.showRemarks(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion,
          v.name
        );
        _this.c.style.cursor = "default";
        ) // 绘制方法
        _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
        _this.c.style.cursor = "default"
        if (e && _this.ctx.isPointInStroke(e.offsetX, e.offsetY)) {
          // 如果传入了事件坐标，就用isPointInStroke判断一下
          // 如果当前环境覆盖了该坐标，就将图形的index放到数组里
          // 当鼠标移入之后将当前的模式切换为选中模式
          _this.type = "0";
          _this.delCursor.type = "4";
          _this.delCursor.index = i;
          _this.type = "0"
          _this.delCursor.type = "4"
          _this.delCursor.index = i
          // 将当前元素标红
          _this.ctx.strokeStyle = "red";
          _this.ctx.strokeStyle = "red"
          //   _this.ctx.beginPath()
          //   _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
          //   _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
@@ -435,78 +354,62 @@
            20,
            30,
            "red"
          ); // 绘制方法
          _this.showRemarks(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion,
            v.name
          );
          _this.c.style.cursor = "pointer";
          ) // 绘制方法
          _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
          _this.c.style.cursor = "pointer"
        }
      });
      _this.canvasData.polygon.forEach(function (v, i) {
      })
      _this.canvasData.polygon.forEach(function(v, i) {
        if (v.location.length === 0) {
          return;
          return
        }
        _this.ctx.strokeStyle = "yellow";
        _this.ctx.beginPath();
        _this.ctx.moveTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        _this.ctx.strokeStyle = "yellow"
        _this.ctx.beginPath()
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
        for (let i = 1; i < v.location.length; i++) {
          _this.ctx.lineTo(
            v.location[i].x / _this.showProportion,
            v.location[i].y / _this.showProportion
          );
          _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion)
        }
        _this.ctx.closePath();
        _this.ctx.stroke();
        _this.ctx.closePath()
        _this.ctx.stroke()
        _this.showRemarks(
          v.location[v.location.length - 1].x / _this.showProportion,
          v.location[v.location.length - 1].y / _this.showProportion,
          v.name
        );
        _this.c.style.cursor = "default";
        )
        _this.c.style.cursor = "default"
        if (e && _this.ctx.isPointInPath(e.offsetX, e.offsetY)) {
          // 如果传入了事件坐标，就用isPointInStroke判断一下
          // 如果当前环境覆盖了该坐标，就将图形的index放到数组里
          // 当鼠标移入之后将当前的模式切换为选中模式
          _this.type = "0";
          _this.delCursor.type = "5";
          _this.delCursor.index = i;
          _this.type = "0"
          _this.delCursor.type = "5"
          _this.delCursor.index = i
          // 将当前元素标红
          _this.ctx.strokeStyle = "red";
          _this.ctx.beginPath();
          _this.ctx.moveTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          _this.ctx.strokeStyle = "red"
          _this.ctx.beginPath()
          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
          for (let i = 1; i < v.location.length; i++) {
            _this.ctx.lineTo(
              v.location[i].x / _this.showProportion,
              v.location[i].y / _this.showProportion
            );
            _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion)
          }
          _this.ctx.closePath();
          _this.ctx.stroke();
          _this.ctx.closePath()
          _this.ctx.stroke()
          _this.showRemarks(
            v.location[v.location.length - 1].x / _this.showProportion,
            v.location[v.location.length - 1].y / _this.showProportion,
            v.name
          );
          _this.c.style.cursor = "pointer";
          )
          _this.c.style.cursor = "pointer"
        }
      });
      })
    },
    // 回显图形备注
    showRemarks(x, y, remarks) {
      this.ctx.moveTo(x, y - 10); // 因为放大之后是y-20，所以缩小版的为y-10
      this.ctx.fillStyle = "green"; // 设置填充颜色为绿色
      this.ctx.font = '10px "微软雅黑"'; // 设置字体
      this.ctx.textBaseline = "bottom"; // 设置字体底线对齐绘制基线
      this.ctx.textAlign = "left"; // 设置字体对齐的方式
      this.ctx.fillText(remarks, x, y - 10); // 填充文字
      this.ctx.moveTo(x, y - 10) // 因为放大之后是y-20，所以缩小版的为y-10
      this.ctx.fillStyle = "green" // 设置填充颜色为绿色
      this.ctx.font = '10px "微软雅黑"' // 设置字体
      this.ctx.textBaseline = "bottom" // 设置字体底线对齐绘制基线
      this.ctx.textAlign = "left" // 设置字体对齐的方式
      this.ctx.fillText(remarks, x, y - 10) // 填充文字
    },
    // 箭头绘制函数
    drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
@@ -517,87 +420,87 @@
      // headlen：三角斜边长度
      // width：箭头线宽度
      // color：箭头颜色
      theta = typeof theta !== "undefined" ? theta : 30;
      headlen = typeof theta !== "undefined" ? headlen : 10;
      width = typeof width !== "undefined" ? width : 1;
      color = typeof color !== "undefined" ? color : "yellow";
      theta = typeof theta !== "undefined" ? theta : 30
      headlen = typeof theta !== "undefined" ? headlen : 10
      width = typeof width !== "undefined" ? width : 1
      color = typeof color !== "undefined" ? color : "yellow"
      // 计算各角度和对应的P2,P3坐标
      let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
      let angle1 = ((angle + theta) * Math.PI) / 180;
      let angle2 = ((angle - theta) * Math.PI) / 180;
      let topX = headlen * Math.cos(angle1);
      let topY = headlen * Math.sin(angle1);
      let botX = headlen * Math.cos(angle2);
      let botY = headlen * Math.sin(angle2);
      let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI
      let angle1 = ((angle + theta) * Math.PI) / 180
      let angle2 = ((angle - theta) * Math.PI) / 180
      let topX = headlen * Math.cos(angle1)
      let topY = headlen * Math.sin(angle1)
      let botX = headlen * Math.cos(angle2)
      let botY = headlen * Math.sin(angle2)

      ctx.save();
      ctx.beginPath();
      let arrowX = fromX - topX;
      let arrowY = fromY - topY;
      ctx.moveTo(arrowX, arrowY);
      ctx.moveTo(fromX, fromY);
      ctx.lineTo(toX, toY);
      arrowX = toX + topX;
      arrowY = toY + topY;
      ctx.moveTo(arrowX, arrowY);
      ctx.lineTo(toX, toY);
      arrowX = toX + botX;
      arrowY = toY + botY;
      ctx.lineTo(arrowX, arrowY);
      ctx.strokeStyle = color;
      ctx.lineWidth = width;
      ctx.stroke();
      ctx.restore();
      ctx.save()
      ctx.beginPath()
      let arrowX = fromX - topX
      let arrowY = fromY - topY
      ctx.moveTo(arrowX, arrowY)
      ctx.moveTo(fromX, fromY)
      ctx.lineTo(toX, toY)
      arrowX = toX + topX
      arrowY = toY + topY
      ctx.moveTo(arrowX, arrowY)
      ctx.lineTo(toX, toY)
      arrowX = toX + botX
      arrowY = toY + botY
      ctx.lineTo(arrowX, arrowY)
      ctx.strokeStyle = color
      ctx.lineWidth = width
      ctx.stroke()
      ctx.restore()
    },
    async refresh() {
      console.log("刷新底图");
      console.log("刷新底图")
      if (!this.currentCamera.cameraId) {
        console.log("没刷新");
        return false;
        console.log("没刷新")
        return false
      }
      // await this.$emit('changeLoading', true)
      this.getCanvasPic();
      this.getCanvasPic()
    },
    // 判断图形名称是否重复
    isRepeat() {
      let _this = this; // 集合中遍历需要将this转存一下使用
      let nameArray = [];
      let _this = this // 集合中遍历需要将this转存一下使用
      let nameArray = []
      for (const v of _this.$refs.bigCanvas.canvasData.line) {
        for (const item of nameArray) {
          if (v.name === item) {
            return v.name;
            return v.name
          }
        }
        nameArray.push(v.name);
        nameArray.push(v.name)
      }
      for (const v of _this.$refs.bigCanvas.canvasData.arrow) {
        for (const item of nameArray) {
          if (v.name === item) {
            return v.name;
            return v.name
          }
        }
        nameArray.push(v.name);
        nameArray.push(v.name)
      }
      for (const v of _this.$refs.bigCanvas.canvasData.rect) {
        for (const item of nameArray) {
          if (v.name === item) {
            return v.name;
            return v.name
          }
        }
        nameArray.push(v.name);
        nameArray.push(v.name)
      }
      for (const v of _this.$refs.bigCanvas.canvasData.polygon) {
        for (const item of nameArray) {
          if (v.name === item) {
            return v.name;
            return v.name
          }
        }
        nameArray.push(v.name);
        nameArray.push(v.name)
      }
      return "";
    },
  },
};
      return ""
    }
  }
}
</script>
<style lang="scss" scoped>
canvas {

 src/components/subComponents/CardItem.vue

@@ -20,15 +20,8 @@
            indicator-position="none"
            :arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
          >
            <el-carousel-item
              v-for="(item, index) in data.baseInfo"
              :key="index"
            >
              <img
                :src="item.targetPicUrl | httpImage"
                class="cursor-pointer"
                @click="detailsClick($event)"
              />
            <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
              <img :src="item.targetPicUrl | httpImage" class="cursor-pointer" @click="detailsClick($event)" />
            </el-carousel-item>
          </el-carousel>
        </div>
@@ -36,7 +29,7 @@
          class="s-card-left-isCompare-div compareScore111"
          :style="{
            bottom: '0',
            background: getUrl(data.baseInfo[initialIndex].bwType),
            background: getUrl(data.baseInfo[initialIndex].bwType)
          }"
        >
          <b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
@@ -55,22 +48,14 @@
          :autoplay="false"
          @change="changeCarousel"
        >
          <el-carousel-item
            v-for="(item, index) in data.picMaxUrl"
            :key="index + 'img'"
          >
            <img
              :src="item | httpImage"
              class="cursor-pointer"
              @click="detailsClick($event)"
            />
          <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'">
            <img :src="item | httpImage" class="cursor-pointer" @click="detailsClick($event)" />
          </el-carousel-item>
        </el-carousel>
        <!-- 暂时认为只有人脸抓拍的报警, 首页显示小图, 其他时间均显示大图 -->
        <img
          v-else-if="
            (data.targetInfo && data.targetInfo.length === 0) ||
            data.targetInfo[0].targetType !== 'FaceDetect'
            (data.targetInfo && data.targetInfo.length === 0) || data.targetInfo[0].targetType !== 'FaceDetect'
          "
          :src="data.picMaxUrl[0] | httpImage"
          class="cursor-pointer"
@@ -84,10 +69,7 @@
        />
      </div>
      <div class="s-card-left-box" v-else>
        <img
          :src="data.baseInfo[0].targetPicUrl | httpImage"
          class="cursor-pointer"
        />
        <img :src="data.baseInfo[0].targetPicUrl | httpImage" class="cursor-pointer" />
      </div>
    </div>

@@ -101,9 +83,7 @@
        @mouseleave="cardMouseleave($event)"
      >
        <p>
          <span class="fontStyle color222">{{
            data.picDate | formatTime
          }}</span>
          <span class="fontStyle color222">{{ data.picDate | formatTime }}</span>
        </p>
        <p style="margin-bottom: 8px">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
@@ -112,9 +92,7 @@
          <div slot="content">
            <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'">
              <span>{{ data.taskName }}</span
              >&nbsp;
              <span v-if="item.alarmLevel !== '撤防'"
                >&nbsp;{{ item.alarmLevel }}</span
              >&nbsp; <span v-if="item.alarmLevel !== '撤防'">&nbsp;{{ item.alarmLevel }}</span
              >&nbsp;
              <span v-if="item.linkInfo == '联动任务'">&nbsp;联动任务</span>
            </p>
@@ -138,14 +116,9 @@
            >
              <span class="fontStyle color666">{{ data.taskName }}</span
              >&nbsp;
              <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'"
                >&nbsp;{{ item.alarmLevel }}</span
              <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'">&nbsp;{{ item.alarmLevel }}</span
              >&nbsp;
              <span
                class="fontStyle color666"
                v-if="item.linkInfo == '联动任务'"
                >&nbsp;联动任务</span
              >
              <span class="fontStyle color666" v-if="item.linkInfo == '联动任务'">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length - 1">/&nbsp;</span>
            </span>
          </el-button>
@@ -153,22 +126,17 @@
        <el-tooltip placement="right" popper-class="atooltip">
          <div slot="content">
            <p>
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].tableName"
                >{{ data.baseInfo[initialIndex].tableName }}</span
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName">{{
                data.baseInfo[initialIndex].tableName
              }}</span
              >&nbsp;
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].targetName"
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].targetName"
                >/&nbsp;{{ data.baseInfo[initialIndex].targetName }}</span
              >&nbsp;
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].labels"
                >/&nbsp;{{ data.baseInfo[initialIndex].labels | idCard }}</span
              >&nbsp;
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].monitorLevel"
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel"
                >/&nbsp;{{ data.baseInfo[initialIndex].monitorLevel }}</span
              >
            </p>
@@ -193,22 +161,17 @@
                  : 'font-size:12px;line-height:20px'
              "
            >
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].tableName"
                >{{ data.baseInfo[initialIndex].tableName }}</span
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName">{{
                data.baseInfo[initialIndex].tableName
              }}</span
              >&nbsp;
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].targetName"
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].targetName"
                >/&nbsp;{{ data.baseInfo[initialIndex].targetName }}</span
              >&nbsp;
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].labels"
                >/&nbsp;{{ data.baseInfo[initialIndex].labels | idCard }}</span
              >&nbsp;
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].monitorLevel"
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel"
                >/&nbsp;{{ data.baseInfo[initialIndex].monitorLevel }}</span
              >
            </span>
@@ -262,31 +225,17 @@
        <p :style="data.baseInfo[0].bwType == '0' ? '' : 'color:red'">
          <span>{{ data.baseInfo[0].targetName }}</span
          >&nbsp;&nbsp;
          <span v-if="data.baseInfo[0].labels"
            >/&nbsp;{{ data.baseInfo[0].labels | idCard }}</span
          >
          <span v-if="data.baseInfo[0].labels">/&nbsp;{{ data.baseInfo[0].labels | idCard }}</span>
        </p>
      </div>
      <div class="card-icon-box">
        <el-tooltip
          content="查找此人"
          placement="top"
          popper-class="atooltip"
          style="margin-left: 10px"
        >
          <i
            class="iconfont iconsousuoren"
            @click="tosearch(data)"
            title="查找此人"
          ></i>
        <el-tooltip content="查找此人" placement="top" popper-class="atooltip" style="margin-left: 10px">
          <i class="iconfont iconsousuoren" @click="tosearch(data)" title="查找此人"></i>
        </el-tooltip>
      </div>
    </div>
    <!-- 没有底库 16：9图片 最正常的yolo抓拍 无人值守  正常yolo抓拍没有小图-->
    <div
      v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
      class="s-card-right-signal"
    >
    <div v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" class="s-card-right-signal">
      <div
        class="signal-img-dev"
        :style="overflowState ? 'overflow: hidden' : 'overflow: auto'"
@@ -294,9 +243,7 @@
        @mouseleave="cardMouseleave($event)"
      >
        <p :title="data.picDate">
          <span class="fontStyle color222">{{
            data.picDate | formatTime
          }}</span>
          <span class="fontStyle color222">{{ data.picDate | formatTime }}</span>
        </p>
        <p :title="data.cameraAddr" style="margin-bottom: 8px">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
@@ -305,10 +252,7 @@
          <div slot="content">
            <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'">
              <span>{{ data.taskName }}</span
              >&nbsp;&nbsp;
              <span v-if="item.alarmLevel !== '撤防'">{{
                item.alarmLevel
              }}</span
              >&nbsp;&nbsp; <span v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span
              >&nbsp;
              <span v-if="item.linkInfo == '联动任务'">&nbsp;联动任务</span>
            </p>
@@ -331,16 +275,9 @@
            >
              <span class="fontStyle color666">{{ data.taskName }}</span
              >&nbsp;&nbsp;
              <span
                class="fontStyle color666"
                v-if="item.alarmLevel !== '撤防'"
                >{{ item.alarmLevel }}</span
              <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span
              >&nbsp;
              <span
                class="fontStyle color666"
                v-if="item.linkInfo == '联动任务'"
                >&nbsp;联动任务</span
              >
              <span class="fontStyle color666" v-if="item.linkInfo == '联动任务'">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length - 1">/&nbsp;</span>
            </span>
          </el-button>
@@ -349,18 +286,11 @@
      <div class="right-bottom">
        <div v-if="!data.id" class="card-icon-box">
          <!-- <i class="iconfont systemxing ml50" title="收藏" ></i> -->
          <el-tooltip
            content="查找此人"
            placement="top"
            popper-class="atooltip"
          >
          <el-tooltip content="查找此人" placement="top" popper-class="atooltip">
            <i class="iconfont iconsousuoren ml50" @click="tosearch(data)"></i>
          </el-tooltip>
        </div>
        <div
          v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
          class="card-icon-box"
        >
        <div v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" class="card-icon-box">
          <el-tooltip content="详情" placement="top" popper-class="atooltip">
            <i class="iconfont iconcaidan" @click="detailsClick($event)"></i>
          </el-tooltip>
@@ -375,18 +305,10 @@
          <el-tooltip content="详情" placement="top" popper-class="atooltip">
            <i class="iconfont iconcaidan" @click="detailsClick($event)"></i>
          </el-tooltip>
          <el-tooltip
            content="查找此人"
            placement="top"
            popper-class="atooltip"
          >
          <el-tooltip content="查找此人" placement="top" popper-class="atooltip">
            <i class="iconfont iconsousuoren" @click="tosearch(data)"></i>
          </el-tooltip>
          <el-tooltip
            content="加入底库"
            placement="top"
            popper-class="atooltip"
          >
          <el-tooltip content="加入底库" placement="top" popper-class="atooltip">
            <i class="iconfont icontianjiaren" @click="toAdd(data)"></i>
          </el-tooltip>
          <!--  <el-tooltip content="收藏" placement="top" popper-class="atooltip">
@@ -397,10 +319,7 @@
    </div>

    <!-- 没有底库，非比对，普通模式 一定有targetInfo，并且targetInfo个数为1-->
    <div
      v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
      class="s-card-right-signal"
    >
    <div v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''" class="s-card-right-signal">
      <div
        class="signal-img-dev"
        :style="overflowState ? 'overflow: hidden' : 'overflow: auto'"
@@ -421,29 +340,18 @@
          <span v-else>{{ data.baseInfo[0].compareScore | percentage }}</span>
        </p>
        <p :title="data.picDate">
          <span class="fontStyle color222">{{
            data.picDate | formatTime
          }}</span>
          <span class="fontStyle color222">{{ data.picDate | formatTime }}</span>
        </p>
        <p :title="data.cameraAddr" style="margin-bottom: 8px">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
        </p>
        <el-tooltip
          placement="right"
          popper-class="atooltip"
          v-if="!VideoPhotoData.uploadType"
        >
        <el-tooltip placement="right" popper-class="atooltip" v-if="!VideoPhotoData.uploadType">
          <div slot="content">
            <p v-for="(item, index) in data.alarmRules" :key="index + 'rule2'">
              <span class="fontStyle">{{ data.taskName }}</span
              >&nbsp;&nbsp;
              <span class="fontStyle" v-if="item.alarmLevel !== '撤防'">{{
                item.alarmLevel
              }}</span
              >&nbsp;&nbsp; <span class="fontStyle" v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span
              >&nbsp;
              <span v-if="item.linkInfo == '联动任务'" class="fontStyle"
                >&nbsp;联动任务</span
              >
              <span v-if="item.linkInfo == '联动任务'" class="fontStyle">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length - 1">/&nbsp;</span>
            </p>
          </div>
@@ -459,22 +367,12 @@
              text-align: left;
            "
          >
            <span
              v-for="(item, index) in data.alarmRules"
              :key="index + 'rule3'"
            >
            <span v-for="(item, index) in data.alarmRules" :key="index + 'rule3'">
              <span class="fontStyle color666">{{ data.taskName }}</span
              >&nbsp;&nbsp;
              <span
                class="fontStyle color666"
                v-if="item.alarmLevel !== '撤防'"
                >{{ item.alarmLevel }}</span
              <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span
              >&nbsp;
              <span
                v-if="item.linkInfo == '联动任务'"
                class="fontStyle color666"
                >&nbsp;联动任务</span
              >
              <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length - 1">/&nbsp;</span>
            </span>
          </el-button>
@@ -482,24 +380,14 @@
        <!-- <p>
          <span class="fontStyle color666">{{ data.sex }}</span>&nbsp;/&nbsp;<span class="fontStyle color666">{{ data.ageDescription }}</span>&nbsp;/&nbsp;<span class="fontStyle color666">{{ data.race }}</span>
        </p>-->
        <el-tooltip
          placement="right"
          popper-class="atooltip"
          v-if="data.baseInfo && data.baseInfo[0].targetName != ''"
        >
        <el-tooltip placement="right" popper-class="atooltip" v-if="data.baseInfo && data.baseInfo[0].targetName != ''">
          <div slot="content">
            <p v-for="(item, index) in data.baseInfo" :key="index + 'base1'">
              <span class="fontStyle">{{ item.tableName }}</span
              >&nbsp; <span class="fontStyle" v-if="item.targetName.length">/&nbsp;{{ item.targetName }}</span
              >&nbsp; <span class="fontStyle" v-if="item.labels.length">/&nbsp;{{ item.labels | idCard }}</span
              >&nbsp;
              <span class="fontStyle" v-if="item.targetName.length"
                >/&nbsp;{{ item.targetName }}</span
              >&nbsp;
              <span class="fontStyle" v-if="item.labels.length"
                >/&nbsp;{{ item.labels | idCard }}</span
              >&nbsp;
              <span class="fontStyle" v-if="item.labels.length"
                >/&nbsp;{{ item.labels | sex }}</span
              >
              <span class="fontStyle" v-if="item.labels.length">/&nbsp;{{ item.labels | sex }}</span>
            </p>
          </div>
          <el-button
@@ -518,36 +406,21 @@
              v-for="(item, index) in data.baseInfo"
              :key="index + 'base'"
              :style="
                item.bwType == '1'
                  ? 'color:red;font-size:12px;line-height:20px'
                  : 'font-size:12px;line-height:20px'
                item.bwType == '1' ? 'color:red;font-size:12px;line-height:20px' : 'font-size:12px;line-height:20px'
              "
            >
              <span class="fontStyle">{{ item.tableName }}</span
              >&nbsp; <span class="fontStyle" v-if="item.targetName.length">/&nbsp;{{ item.targetName }}</span
              >&nbsp; <span class="fontStyle" v-if="item.labels.length">/&nbsp;{{ item.labels | idCard }}</span
              >&nbsp;
              <span class="fontStyle" v-if="item.targetName.length"
                >/&nbsp;{{ item.targetName }}</span
              >&nbsp;
              <span class="fontStyle" v-if="item.labels.length"
                >/&nbsp;{{ item.labels | idCard }}</span
              >&nbsp;
              <span class="fontStyle" v-if="item.labels.length"
                >/&nbsp;{{ item.labels | sex }}</span
              >
              <span class="fontStyle" v-if="item.labels.length">/&nbsp;{{ item.labels | sex }}</span>
            </span>
          </el-button>
        </el-tooltip>

        <el-tooltip
          placement="right"
          popper-class="atooltip"
          v-if="data.baseInfo == null"
          style="margin-top: 5px"
        >
        <el-tooltip placement="right" popper-class="atooltip" v-if="data.baseInfo == null" style="margin-top: 5px">
          <div slot="content">
            <span :style="'color:red;font-size:14px;line-height:20px'">{{
              data.showLabels
            }}</span>
            <span :style="'color:red;font-size:14px;line-height:20px'">{{ data.showLabels }}</span>
          </div>
          <el-button
            style="
@@ -561,9 +434,7 @@
              text-align: left;
            "
          >
            <span :style="'color:red;font-size:14px;line-height:20px'">{{
              data.showLabels
            }}</span>
            <span :style="'color:red;font-size:14px;line-height:20px'">{{ data.showLabels }}</span>
          </el-button>
        </el-tooltip>
      </div>
@@ -571,11 +442,7 @@
        <div v-if="!data.id" class="card-icon-box">
          <!-- 底库人员 -->
          <!-- <i class="iconfont systemxing ml50" title="收藏" ></i> -->
          <el-tooltip
            content="查找此人"
            placement="top"
            popper-class="atooltip"
          >
          <el-tooltip content="查找此人" placement="top" popper-class="atooltip">
            <i class="iconfont iconsousuoren ml50" @click="tosearch(data)"></i>
          </el-tooltip>
        </div>
@@ -629,23 +496,16 @@
        >
          <div>
            <p :title="data.picDate">
              <span class="fontStyle color222">{{
                data.picDate | formatTime
              }}</span>
              <span class="fontStyle color222">{{ data.picDate | formatTime }}</span>
            </p>
            <p :title="data.cameraAddr" style="margin-bottom: 8px">
              <span class="fontStyle color222">{{ data.cameraAddr }}</span>
            </p>
            <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'">
              <span class="fontStyle color666">{{ data.taskName }}</span
              >&nbsp;/&nbsp; <span class="fontStyle color666">{{ item.alarmLevel }}</span
              >&nbsp;/&nbsp;
              <span class="fontStyle color666">{{ item.alarmLevel }}</span
              >&nbsp;/&nbsp;
              <span
                v-if="item.linkInfo == '联动任务'"
                class="fontStyle color666"
                >联动任务</span
              >
              <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666">联动任务</span>
              <span v-if="index < data.alarmRules.length - 1">/&nbsp;</span>
            </p>
          </div>
@@ -656,7 +516,7 @@
</template>

<script>
Date.prototype.Format = function (fmt) {
Date.prototype.Format = function(fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
@@ -664,78 +524,69 @@
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
    S: this.getMilliseconds() //毫秒
  }
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length))
  return fmt
}

export default {
  mounted() {
    //window.addEventListener("resize", this.watchWindow);
    window.addEventListener("resize", this.getBottom);
    window.addEventListener("resize", this.getBottom)
  },
  props: {
    data: {
      type: Object,
      default: null,
      default: null
    },
    showType: {
      type: String,
      default: "search",
      default: "search"
    },
    fromCluster: {
      type: Boolean,
      default: false,
      default: false
    },
    searchT: {},
    searchT: {}
  },
  computed: {
    isId() {
      return this.data.id;
    },
      return this.data.id
    }
  },
  filters: {
    formatTime(t) {
      return new Date(t).Format("yyyy-MM-dd HH:mm:ss");
      return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
    },
    percentage(score) {
      return score.toFixed(2) + "%";
      return score.toFixed(2) + "%"
    },
    idCard(v) {
      try {
        let obj = JSON.parse(v);
        return obj.idCard;
        let obj = JSON.parse(v)
        return obj.idCard
      } catch (error) {
        return v.split("/")[1];
        return v.split("/")[1]
      }
    },
    sex(v) {
      try {
        let obj = JSON.parse(v);
        return obj.sex;
        let obj = JSON.parse(v)
        return obj.sex
      } catch (error) {
        return v.split("/")[0];
        return v.split("/")[0]
      }
    },
    httpImage(url) {
      if (!url.length) {
        return "";
        return ""
      }
      return (
        "/httpImage/" + url + (url.indexOf("?") >= 0 ? "&" : "?") + "width=160"
      );
    },
      return "/httpImage/" + url + (url.indexOf("?") >= 0 ? "&" : "?") + "width=160"
    }
  },
  data() {
    return {
@@ -743,64 +594,62 @@
      initialIndex: 0,
      carouselIndex: 0,
      dialogVisible: false,
      overflowState: true,
    };
      overflowState: true
    }
  },
  watch: {
    data: {
      handler(val, oldVal) {
        this.$forceUpdate();
        this.$forceUpdate()
      },
      deep: true,
    },
      deep: true
    }
  },
  methods: {
    getBottom() {
      this.$nextTick(() => {
        let imgDom = this.$refs.firstImg;
        let imgDom = this.$refs.firstImg
        if (imgDom) {
          let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2;
          return `${num}px`;
          let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2
          return `${num}px`
        }
        return `4px`;
      });
        return `4px`
      })
    },
    getUrl(bwtype) {
      if (bwtype == 1) {
        return `url(${require("@/assets/img/red.png")})`;
        return `url(${require("@/assets/img/red.png")})`
      } else {
        return `url(${require("@/assets/img/green.png")})`;
        return `url(${require("@/assets/img/green.png")})`
      }
    },
    changeInitialIndex(index) {
      this.initialIndex = index;
      this.initialIndex = index
    },
    cardMouseenter(ev) {
      this.overflowState = false;
      this.overflowState = false
    },
    cardMouseleave(ev) {
      this.overflowState = true;
      this.overflowState = true
    },
    changeCarousel(index) {
      this.carouselIndex = index;
      this.carouselIndex = index
    },
    detailsClick(ev) {
      this.$emit("detailsClick", ev);
      this.$emit("detailsClick", ev)
    },
    toAdd(item) {
      this.$emit("addToBase", item);
      this.$emit("addToBase", item)
    },
    tosearch(item) {
      this.searchT;
      let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id;
      let imgUrl = item.targetInfo
        ? item.targetInfo[0].picSmUrl
        : item.baseInfo[0].targetPicUrl;
      let compType = 1; //  数据来自于es
      this.searchT
      let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
      let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
      let compType = 1 //  数据来自于es
      if (!item.id || item.id == "") {
        compType = 0; // 数据来自于底库
        compType = 0 // 数据来自于底库
      }
      let message;
      let message
      if (this.fromCluster) {
        message =
          "toCluster?showType=findByPic&targetId=" +
@@ -814,7 +663,7 @@
          "&start=" +
          this.searchT[0] +
          "&end=" +
          this.searchT[1];
          this.searchT[1]
      } else {
        message =
          "toSearch?showType=findByPic&targetId=" +
@@ -828,19 +677,23 @@
          "&start=" +
          this.searchT[0] +
          "&end=" +
          this.searchT[1];
          this.searchT[1]
      }
      window.parent.postMessage(
        {
          msg: message,
          msg: message
        },
        "*"
      );
    },
  },
};
      )
    }
  }
}
</script>
<style lang="scss">
.cursor-pointer {
  cursor: pointer;
}

.fontStyle {
  font-family: PingFangSC-Medium;
}

 src/views/hashrate/CameraManage/index.vue

@@ -3,13 +3,7 @@
    <div class="cluster">
      <div class="title">集群选择</div>
      <el-select v-model="cluster" placeholder="请选择" @change="selectCluster">
        <el-option
          v-for="item in clusterArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
        <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div class="content">
@@ -19,49 +13,35 @@
      </div>
      <div class="right">
        <div class="tabs">
          <div
            class="tab"
            :class="{ active: activeTab === '信息维护' }"
            @click="handleClick('信息维护')"
          >
          <div class="tab" :class="{ active: activeTab === '信息维护' }" @click="handleClick('信息维护')">
            信息维护
          </div>
          <div
            class="tab"
            :class="{ active: activeTab === '场景配置' }"
            @click="handleClick('场景配置')"
          >
          <div class="tab" :class="{ active: activeTab === '场景配置' }" @click="handleClick('场景配置')">
            场景配置
          </div>
        </div>

        <CameraInfo
          ref="cameraInfo"
          v-show="activeTab === '信息维护'"
        ></CameraInfo>
        <CameraRules
          v-show="activeTab === '场景配置'"
          ref="sepRule"
        ></CameraRules>
        <CameraInfo ref="cameraInfo" v-show="activeTab === '信息维护'"></CameraInfo>
        <CameraRules v-show="activeTab === '场景配置'" ref="sepRule"></CameraRules>
      </div>
    </div>
  </div>
</template>

<script>
import CameraLeft from "@/components/CameraLeft";
import CameraInfo from "./CameraInfo";
import CameraRules from "./CameraRules";
import VideoRuleData from "@/Pool/VideoRuleData";
import CameraLeft from "@/components/CameraLeft"
import CameraInfo from "./CameraInfo"
import CameraRules from "./CameraRules"
import VideoRuleData from "@/Pool/VideoRuleData"

import { getClusterDevList } from "@/api/clusterManage";
import { getClusterDevList } from "@/api/clusterManage"

import bus from "@/plugin/bus";
import bus from "@/plugin/bus"
export default {
  components: {
    CameraLeft,
    CameraInfo,
    CameraRules,
    CameraRules
  },

  data() {
@@ -72,25 +52,25 @@
      clusterData: [],
      intervalTimer: null,
      leftWith: 0,
      screenHeight: 0,
    };
      screenHeight: 0
    }
  },

  destroyed() {
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.readonly = true
  },

  watch: {
    "TreeDataPool.activeNode": function (node) {
      sessionStorage.setItem("cameraDevId", node.devId);
    "TreeDataPool.activeNode": function(node) {
      sessionStorage.setItem("cameraDevId", node.devId)
      if (this.activeTab == "信息维护") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.cameraInfo.selectCamera(node);
          this.$refs.cameraInfo.selectCamera(node)
        }
      } else if (this.activeTab === "场景配置") {
        this.$refs.sepRule.initCameraData(node.id);
        this.$refs.sepRule.initCameraData(node.id)
        if (!this.TreeDataPool.multiple) {
          this.$refs.sepRule.showRules(node.id);
          this.$refs.sepRule.showRules(node.id)
        }
      }
    },
@@ -98,196 +78,188 @@
      handler(nodes, oldVal) {
        if (this.activeTab == "场景配置") {
          //  this.$refs.sepRule.initCameraData(nodes[nodes.length - 1]);
          let CameraArr = [];
          let CameraIds = [];
          let CameraArr = []
          let CameraIds = []

          nodes.forEach((id) => {
            let newCamera = new VideoRuleData(id);
            CameraArr.push(newCamera);
            CameraIds.push(id);
          });
            let newCamera = new VideoRuleData(id)
            CameraArr.push(newCamera)
            CameraIds.push(id)
          })

          this.$refs.sepRule.Carmeras = CameraArr;
          if (
            nodes.length == 1 &&
            oldVal.length == 1 &&
            nodes[0] == oldVal[0]
          ) {
            return;
          this.$refs.sepRule.Carmeras = CameraArr
          if (nodes.length == 1 && oldVal.length == 1 && nodes[0] == oldVal[0]) {
            return
          }
          if (this.TreeDataPool.multiple && oldVal[0]) {
            this.$refs.sepRule.showRules(CameraIds);
            this.$refs.sepRule.showRules(CameraIds)
          }

          console.log(CameraArr);
          console.log(CameraArr)
        }
      },
      deep: true,
      deep: true
    },
    "DataStackPool.selectedDir": {
      handler(node, oldNode) {
        if (this.TreeDataPool.treeActiveName !== "dataStack") {
          return;
          return
        }
        this.$nextTick(() => {
          if (this.activeTab == "信息维护") {
            //   this.$refs.dataStackInfo.selectDir(node);
          } else if (this.activeTab == "场景配置" && node.length !== 0) {
            this.$refs.sepRule.initCameraData(node.id);
            this.$refs.sepRule.initCameraData(node.id)
          }
        });
        })
      },
      deep: true,
    },
      deep: true
    }
  },
  created() {
    this.getCluster();
    this.TreeDataPool.readonly = false;
    this.getCluster()
    this.TreeDataPool.readonly = false

    //  this.TreeDataPool.readonly = true;
    //this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = false;
    this.TreeDataPool.selectedNode = "";
    this.selectedNodes = [];
    this.TreeDataPool.multiple = false
    this.TreeDataPool.selectedNode = ""
    this.selectedNodes = []
  },
  beforeDestroy() {
    sessionStorage.removeItem("devId");
    sessionStorage.removeItem("clusterId");
    clearInterval(this.intervalTimer);
    sessionStorage.removeItem("devId")
    sessionStorage.removeItem("clusterId")
    clearInterval(this.intervalTimer)
    //this.TreeDataPool.treeActiveName = "camera";
  },
  mounted() {
    this.$nextTick(() => {
      bus.$on("addCameraOnTree", (node) => {
        this.handAddDevice(node);
      });
        this.handAddDevice(node)
      })
      bus.$on("addDirOnTree", (node) => {
        this.handAddDIr(node);
      });
      this.TreeDataPool.clean();
    });
        this.handAddDIr(node)
      })
      this.TreeDataPool.clean()
    })
  },
  methods: {
    TextWidthChange(e) {
      console.log(1212);
      let odivParent = e.currentTarget.parentNode; //获取目标父元素
      let dx = e.clientX; //当你第一次单击的时候，存储x轴的坐标。
      let dw = odivParent.offsetWidth; //存储默认的div的宽度。
      console.log(1212)
      let odivParent = e.currentTarget.parentNode //获取目标父元素
      let dx = e.clientX //当你第一次单击的时候，存储x轴的坐标。
      let dw = odivParent.offsetWidth //存储默认的div的宽度。
      document.onmousemove = (e) => {
        odivParent.style.width = dw + (e.clientX - dx) + "px";
        odivParent.style.width = dw + (e.clientX - dx) + "px"

        if (odivParent.offsetWidth <= 100) {
          //当盒子缩小到一定范围内的时候，让他保持一个固定值，不再继续改变
          odivParent.style.width = "100px";
          odivParent.style.width = "100px"
        }

        if (odivParent.offsetWidth + odivParent.offsetLeft >= this.pdfWidth) {
          odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px";
          odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px"
        }
      };
      }
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      e.stopPropagation();
      e.preventDefault();
      return false;
        document.onmousemove = null
        document.onmouseup = null
      }
      e.stopPropagation()
      e.preventDefault()
      return false
    },
    handAddDevice(node) {
      let _this = this;
      let _this = this
      setTimeout(() => {
        _this.$refs.cameraInfo.addDevice(node);
        _this.activeTab = "信息维护";
      }, 100);
        _this.$refs.cameraInfo.addDevice(node)
        _this.activeTab = "信息维护"
      }, 100)
    },
    handAddDIr(node) {
      let _this = this;
      let _this = this
      setTimeout(() => {
        _this.$refs.dataStackInfo.addDir(node);
        _this.activeTab = "信息维护";
      }, 100);
        _this.$refs.dataStackInfo.addDir(node)
        _this.activeTab = "信息维护"
      }, 100)
    },
    handleClick(tab) {
      //这个控制是否多选
      //    this.TreeDataPool.multiple = tab.name === "场景配置";
      this.activeTab = tab;
      this.activeTab = tab
      if (tab === "信息维护") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
          this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode)
        } else if (this.TreeDataPool.treeActiveName == "dataStack") {
          this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
          this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir)
        }
      } else if (tab === "场景配置") {
        if (this.TreeDataPool.treeActiveName == "camera") {
          this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
          this.$refs.sepRule.showRules(this.TreeDataPool.selectedNode.id);
          this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id)
          this.$refs.sepRule.showRules(this.TreeDataPool.selectedNode.id)
        } else if (this.TreeDataPool.treeActiveName == "dataStack") {
          this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
          this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id)
        }
      }
    },
    async getCluster() {
      const res = await getClusterDevList();
      const res = await getClusterDevList()
      if (res && res.success) {
        this.clusterData = res.data.clusterList;
        this.clusterData = res.data.clusterList
        if (res.data.clusterList <= 0 && res.data.devList <= 0) {
          this.$confirm(
            "系统检测到您还未添加设备, 请在设备管理页面维护",
            "提示",
            {
              confirmButtonText: "跳转",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
          this.$confirm("系统检测到您还未添加设备, 请在设备管理页面维护", "提示", {
            confirmButtonText: "跳转",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$router.push("/manageCenter");
              this.$router.push("/manageCenter")
            })
            .catch(() => {});
            .catch(() => {})
        }

        res.data.clusterList.forEach((item) => {
          this.clusterArr.push({
            label: item.cluster_name,
            value: "0$$" + item.cluster_id,
          });
        });
            value: "0$$" + item.cluster_id
          })
        })

        res.data.devList.forEach((item) => {
          this.clusterArr.push({
            label: item.devName,
            value: "1$$" + item.devId,
          });
        });
            value: "1$$" + item.devId
          })
        })

        this.cluster = this.clusterArr[0].value;
        this.selectCluster(this.clusterArr[0].value);
        this.cluster = this.clusterArr[0].value
        this.selectCluster(this.clusterArr[0].value)
      }
    },
    selectCluster(val) {
      const arr = val.split("$$");
      const arr = val.split("$$")
      if (arr[0] == "0") {
        sessionStorage.setItem("clusterId", arr[1]);
        sessionStorage.setItem("devId", "");
        console.log(this.clusterData);
        sessionStorage.setItem("clusterId", arr[1])
        sessionStorage.setItem("devId", "")
        console.log(this.clusterData)
        this.clusterData.forEach((item) => {
          if (arr[1] == item.cluster_id) {
            sessionStorage.setItem("nodeId", item.nodeList[0].devId);
            sessionStorage.setItem("nodeId", item.nodeList[0].devId)
          }
        });
        })
      }
      if (arr[0] == "1") {
        sessionStorage.setItem("clusterId", "");
        sessionStorage.setItem("devId", arr[1]);
        sessionStorage.setItem("nodeId", arr[1]);
        sessionStorage.setItem("clusterId", "")
        sessionStorage.setItem("devId", arr[1])
        sessionStorage.setItem("nodeId", arr[1])
      }
      this.TreeDataPool.fetchTreeData();
      this.PollData.statisticTaskInfo();
      this.VideoManageData.init();
      this.PollData.statistics();
    },
  },
};
      this.TreeDataPool.fetchTreeData()
      this.PollData.statisticTaskInfo()
      this.VideoManageData.init()
      this.PollData.statistics()
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -343,7 +315,8 @@
    .column-left {
      position: relative;
      margin-right: 24px;
      width: 292px;
      height: 233vh;
      overflow: auto;
      background-color: #fff;
    }

@@ -388,4 +361,4 @@
    }
  }
}
</style>
</style>

 src/views/search/components/imgDown.vue

@@ -1,60 +1,55 @@
<template>
  <div class="imgBox">
    <img
      :src="'http://' + url"
      class="cursor-pointer"
      v-if="isPreview"
      preview
    />
    <img :src="'http://' + url" v-if="!isPreview" />
    <img :src="'/httpImage/' + url" class="cursor-pointer" v-if="isPreview" preview />
    <img :src="'/httpImage/' + url" v-if="!isPreview" />
    <el-button class="btn" @click="downloadIamge('/httpImage/' + url)">
      <i class="iconfont iconxiazai"></i>
    </el-button>
  </div>
</template>
<script>
import axios from "axios";
import axios from "axios"
export default {
  props: {
    url: {
      default: "",
      type: String,
      type: String
    },
    isPreview: {
      default: true,
      type: Boolean,
    },
      type: Boolean
    }
  },
  methods: {
    downloadIamge(url) {
      this.$notify.info({
        title: "消息",
        message: "资源下载中,请稍后...",
      });
        message: "资源下载中,请稍后..."
      })
      axios({
        method: "get",
        url: url,
        responseType: "blob",
        responseType: "blob"
      })
        .then((res) => {
          if (res.status == 200) {
            var a = document.createElement("a");
            var strs = url.split("/");
            var href = new Blob([res.data], { type: "image/jpeg" });
            a.href = URL.createObjectURL(href);
            a.download = strs[strs.length - 1] + ".jpg";
            a.click();
            var a = document.createElement("a")
            var strs = url.split("/")
            var href = new Blob([res.data], { type: "image/jpeg" })
            a.href = URL.createObjectURL(href)
            a.download = strs[strs.length - 1] + ".jpg"
            a.click()
          }
        })
        .catch((err) => {
          this.$notify({
            type: "error",
            message: "下载失败，" + err + "请重试！",
          });
        });
    },
  },
};
            message: "下载失败，" + err + "请重试！"
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.imgBox {
@@ -95,4 +90,4 @@
    opacity: 1;
  }
}
</style>
</style>

 src/views/search/index.vue

@@ -1,18 +1,8 @@
<template>
  <div class="column">
    <div class="search_cluster">
      <el-select
        v-model="cluster"
        placeholder="请选择集群"
        @change="selectCluster"
      >
        <el-option
          v-for="item in clusterArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      <el-select v-model="cluster" placeholder="请选择集群" @change="selectCluster">
        <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div class="column-left">
@@ -30,108 +20,104 @@
</template>

<script>
import LeftNav from "@/components/CameraLeft";
import RightSide from "./Searching";
import CardWindow from "./components/CardWindow";
import { getClusterDevList } from "@/api/clusterManage";
import LeftNav from "@/components/CameraLeft"
import RightSide from "./Searching"
import CardWindow from "./components/CardWindow"
import { getClusterDevList } from "@/api/clusterManage"

export default {
  name: "SearchPage",
  components: {
    LeftNav,
    RightSide,
    CardWindow,
    CardWindow
  },
  data() {
    return {
      screenHeight: 0,
      clusterArr: [],
      cluster: "",
    };
      cluster: ""
    }
  },
  created() {
    // this.parseUrl();
    this.getCluster();
    this.getCluster()
  },
  mounted() {
    this.screenHeight = document.documentElement.clientHeight - 20;
    this.screenHeight = document.documentElement.clientHeight - 20
    window.onresize = () => {
      return (() => {
        this.screenHeight = document.documentElement.clientHeight - 20;
      })();
    };
        this.screenHeight = document.documentElement.clientHeight - 20
      })()
    }
  },
  beforeDestroy() {
    sessionStorage.removeItem("clusterId");
    sessionStorage.removeItem("devId");
    sessionStorage.removeItem("clusterId")
    sessionStorage.removeItem("devId")
  },
  methods: {
    parseUrl() {},
    selectCluster(val) {
      const arr = val.split("$$");
      const arr = val.split("$$")
      if (arr[0] == "0") {
        sessionStorage.setItem("clusterId", arr[1]);
        sessionStorage.setItem("devId", "");
        console.log(this.clusterData);
        sessionStorage.setItem("clusterId", arr[1])
        sessionStorage.setItem("devId", "")
        console.log(this.clusterData)
        this.clusterData.forEach((item) => {
          if (arr[1] == item.cluster_id) {
            sessionStorage.setItem("nodeId", item.nodeList[0].devId);
            sessionStorage.setItem("nodeId", item.nodeList[0].devId)
          }
        });
        })
      }
      if (arr[0] == "1") {
        sessionStorage.setItem("clusterId", "");
        sessionStorage.setItem("devId", arr[1]);
        sessionStorage.setItem("nodeId", arr[1]);
        sessionStorage.setItem("clusterId", "")
        sessionStorage.setItem("devId", arr[1])
        sessionStorage.setItem("nodeId", arr[1])
      }
      this.TreeDataPool.fetchTreeData();
      this.PollData.statisticTaskInfo();
      this.VideoManageData.init();
      this.PollData.statistics();
      this.TreeDataPool.fetchTreeData()
      this.PollData.statisticTaskInfo()
      this.VideoManageData.init()
      this.PollData.statistics()
    },
    async getCluster() {
      const res = await getClusterDevList();
      const res = await getClusterDevList()
      if (res && res.success) {
        this.clusterData = res.data.clusterList;
        this.clusterData = res.data.clusterList
        if (res.data.clusterList <= 0 && res.data.devList <= 0) {
          this.$confirm(
            "系统检测到您还未添加设备, 请在设备管理页面维护",
            "提示",
            {
              confirmButtonText: "跳转",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
          this.$confirm("系统检测到您还未添加设备, 请在设备管理页面维护", "提示", {
            confirmButtonText: "跳转",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$router.push("/manageCenter");
              this.$router.push("/manageCenter")
            })
            .catch(() => {});
            .catch(() => {})
        }

        res.data.clusterList.forEach((item) => {
          this.clusterArr.push({
            label: item.cluster_name,
            value: "0$$" + item.cluster_id,
          });
        });
            value: "0$$" + item.cluster_id
          })
        })

        res.data.devList.forEach((item) => {
          this.clusterArr.push({
            label: item.devName,
            value: "1$$" + item.devId,
          });
        });
            value: "1$$" + item.devId
          })
        })

        this.cluster = this.clusterArr[0].value;
        this.selectCluster(this.clusterArr[0].value);
        this.cluster = this.clusterArr[0].value
        this.selectCluster(this.clusterArr[0].value)
      }
    },
  },
};
    }
  }
}
</script>

<style lang="scss" >
<style lang="scss" scoped>
.left-tree-box .local-vedio-area .dev-vedio-list {
  height: calc(100vh - 130px);
}
@@ -205,7 +191,7 @@
  left: 172px;
  position: fixed;
  width: 135px;
  z-index: 4;
  z-index: -1;
}

/* Firefox只有下面一小块区域可以拉伸 */