系统维护+系统监控器+调试工具的app 增加

haoxuan

2023-09-01 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b

 src/components/canvas/Dialog.vue

@@ -86,7 +86,7 @@
            @click="undo"
            :disabled="disableSelect"
            style="position:absolute;left:25px;top:400px;font-size:2rem;cursor:pointer"
          ></span> -->
          ></span>-->
        </el-tooltip>
        <!-- <el-button type="default" @click="undo()">撤销</el-button> -->
      </el-col>
@@ -97,11 +97,7 @@
          width="960"
          height="540"
          :style="
            `position:static;background:url(${
              snapshot_url
                ? `/httpImage/${snapshot_url}`
                : backImg
            }) 0% 0%/960px 540px no-repeat;`
            `position:static;background:url(${snapshot_url}) 0% 0%/960px 540px no-repeat;`
          "
        ></canvas>
        <p
@@ -112,7 +108,7 @@
          class="iconfont icongengxin"
          @click="refresh"
          style="position:absolute;left:930px;font-size:2.5rem;cursor:pointer;color:white"
        ></span> -->
        ></span>-->
      </el-col>
    </el-row>
  </div>
@@ -122,7 +118,7 @@
  name: "canvasDialog",
  data() {
    return {
      backImg: require("../../assets/baseimg.png"),
      backImg: require("../../assets/img/baseimg.png"),
      url: "", // canvas图片的二进制格式转为dataURL格式
      type: "0", // 绘图状态 '0'为选中删除，'1'为画线，‘2’为画矩形，‘4’为画箭头，‘5’为画多边形
      points: [], // 记录绘制多边形时的各点坐标，绘制多边形时由于不是一笔完成，以数组数据做始终闭合的图形，双击后录成快照，把数组内容转移到最终数据中，然后清空数组
@@ -202,7 +198,8 @@
  methods: {
    // 初始化函数
    init() {
      this.c = document.querySelector("#canvasDialog");
      //this.c = document.querySelector("#canvasDialog");
      this.c = this.$refs['canvasDialog'];
      this.ctx = this.c.getContext("2d");
      this.drawCanvasInit();
      this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild));
@@ -215,14 +212,15 @@
        src: this.c.toDataURL("image/png")
      });
      this.delCursor = { type: -1, index: -1, remarksName: "", id: "" }
      

      console.log("画布初始化");
    },
    // 取消画布清除状态函数
    cancel() {
      this.changeType('0')
      this.undisabled()
      this.delCursor = {}
      //this.delCursor = {}
      this.delCursor = { type: -1, index: -1, remarksName: "", id: "" };
      this.canvasHistory.length = 0;
      this.step = -1;
      this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild));
@@ -524,6 +522,7 @@
        }
      });
      _this.canvasData.rect.forEach(function (v, i) {
        
        _this.ctx.strokeStyle = "yellow";
        _this.ctx.beginPath();
        _this.ctx.moveTo(v.location[0].x, v.location[0].y);
@@ -789,8 +788,9 @@
      }
      // console.log("撤销！",this.canvasData);
    },
    disabledOthers(type){
      console.log("当前type:",type)
    disabledOthers(type) {
      
      console.log("当前type:", type)
      switch (type) {
        case "1":
          this.disableLine = false
@@ -817,16 +817,17 @@
          this.disableLine = true
          this.disableRect = true
          this.disableArrow = true
          this.disablePolygon = false  
          this.disablePolygon = false
          this.disableSelect = true
          break
      }
      console.log("禁用直线：",this.disableLine)
      console.log("禁用矩形：",this.disableRect)
      console.log("禁用箭头：",this.disableArrow)
      console.log("禁用多边形：",this.disablePolygon)
      console.log("禁用直线：", this.disableLine)
      console.log("禁用矩形：", this.disableRect)
      console.log("禁用箭头：", this.disableArrow)
      console.log("禁用多边形：", this.disablePolygon)
    },
    undisabled() {
      
      this.disableLine = false
      this.disableRect = false
      this.disableArrow = false
@@ -856,6 +857,7 @@
      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;
@@ -885,6 +887,7 @@
    },
    // 获取相对坐标(暂不用)
    getLocation(x, y, c) {
      
      let bbox = c.getBoundingClientRect();
      return {
        x: (x - bbox.left) * (c.width / bbox.width),
@@ -899,6 +902,7 @@
    },
    // 生成图形备注
    remarks(x, y, type) {
      
      this.ctx.moveTo(x, y - 20);
      this.ctx.fillStyle = "green"; // 设置填充颜色为绿色
      this.ctx.font = '20px "微软雅黑"'; // 设置字体
@@ -928,6 +932,7 @@
    },
    // 回显图形备注
    showRemarks(x, y, remarks, isHightlight) {
      
      this.ctx.moveTo(x, y - 20);
      if (isHightlight) {
        this.ctx.fillStyle = "#8ae22e"; // 设置填充颜色为绿色
@@ -941,6 +946,7 @@
    },
    // 重现保存画面
    loadImage() {
      
      if (this.step > -1) {
        let img = new Image();
        img.src = this.canvasHistory[this.step].src;
@@ -949,6 +955,7 @@
    },
    // 切换画线类型
    changeType(num) {
      
      if (num === '0') {
        this.c.style.cursor = "pointer";
      } else {
@@ -958,6 +965,7 @@
    },
    // 绘制多边形方法
    drawPolygonUtil(points) {
      
      this.ctx.strokeStyle = "yellow";
      this.ctx.lineWidth = 2;
      this.ctx.beginPath();
@@ -984,6 +992,7 @@
    },
    // 画矩形移动函数
    drawRect(e) {
      
      if (this.flag) {
        this.ctx.clearRect(0, 0, this.c.width, this.c.height);
        this.loadImage();
@@ -1018,11 +1027,13 @@
      }
    },
    twoPointDistance(p1, p2) {
      
      let dep = Math.sqrt(Math.pow((p1.x - p2.x), 2) + Math.pow((p1.y - p2.y), 2));
      return dep;
    },
    // 画多边形移动函数
    drawPolygon(e) {
      
      if (this.flag) {
        this.ctx.clearRect(0, 0, this.c.width, this.c.height);
        this.loadImage();
@@ -1041,6 +1052,7 @@
    },
    // 画直线抬起
    lineMouseUp(e) {
      
      if (
        Math.abs(this.originX - e.offsetX) < 5 &&
        Math.abs(this.originY - e.offsetY) < 5
@@ -1097,6 +1109,7 @@
    },
    // 画矩形抬起
    rectMouseUp(e) {
      
      if (
        Math.abs(this.originX - e.offsetX) < 5 &&
        Math.abs(this.originY - e.offsetY) < 5
@@ -1219,6 +1232,7 @@
    },
    // 画多边形结束时双击
    polygonDblclick(e) {
      
      this.flag = false;
      this.points.pop(); // 双击之后多一个点的重复坐标，需要删除
      let Id
@@ -1266,6 +1280,7 @@
    },
    // 释放编辑状态
    freedEdit() {
      
      this.editObj = {}
    },
    // 回显历史数据时计算一下回显的每种元素的数量以便生成图形注解时获得正确的开头
@@ -1273,10 +1288,14 @@
      this.lineIndex = this.canvasData.line.length;
      this.rectIndex = this.canvasData.rect.length;
      this.arrowIndex = this.canvasData.arrow.length;
      this.polygonIndex = this.canvasData.polygon.length;
      //排除this.canvasData.polygon全部区域(全部区域的id就是摄像机的id)

      let filterPolygonArr = this.canvasData.polygon.filter(item=>item.id != this.TreeDataPool.selectedNode.id)
      this.polygonIndex = filterPolygonArr.length;
    },
    // 生成uuid
    getUuid() {
      
      let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
      let originChar = "0123456789abcdef";
      let len = originChar.length;
@@ -1286,6 +1305,7 @@
    },
    // 判断一个点是否离一个图形的最小距离为n像素以内
    minDistance(x, y, locations, n) {
      
      let flag = false
      for (let i = 0; i < locations.length; i++) {
        if (i == locations.length - 1) {