摄像机配置: 修复国标刷底图api

zhangzengfei

2022-06-18 c208b104011e0bbdc824960ed025b597d081c78f

 src/components/canvas/index.vue

@@ -1,23 +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">
      <span class="iconfont icongengxin" @click="refresh"></span>
    </el-tooltip>
    <p class="tip" :style="disabled ? `display:block;` : `display:none;`">批量配置方式不允许绘制区域，请选择摄像机进行区域绘制</p>
    <el-dialog
      title
      :visible.sync="visible"
      width="1150px"
      append-to-body
      :before-close="cancelFunc"
    >
    <p class="tip" :style="disabled ? `display:block;` : `display:none;`">
      批量配置方式不允许绘制区域，请选择摄像机进行区域绘制
    </p>
    <el-dialog title :visible.sync="visible" width="1150px" append-to-body :before-close="cancelFunc">
      <canvas-dialog
        ref="bigCanvas"
        :canvasDataToChild="canvasData"
@@ -32,8 +30,8 @@
  </div>
</template>
<script>
import canvasDialog from "./Dialog";
import { updateSnapshot } from "@/api/camera";
import canvasDialog from "./Dialog"
import { updateSnapshot } from "@/api/camera"
export default {
  name: "myCanvas",
  components: {
@@ -66,7 +64,7 @@
    },
    canvasDataShow: {
      default: () => {
        return { line: [], rect: [], arrow: [], polygon: [] };
        return { line: [], rect: [], arrow: [], polygon: [] }
      },
      type: Object
    },
@@ -104,17 +102,16 @@
      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.sourceType == 2) {
          return `${this.snapshot_url}`;
          return `${this.snapshot_url}`
        } else {
          return `/httpImage/${this.snapshot_url}`;
          return `/httpImage/${this.snapshot_url}`
        }

      } else {
        return this.blackImg;
        return this.blackImg
      }
    }
  },
@@ -133,17 +130,17 @@
      c: null,
      ctx: null,
      visible: false,
      baseImg: undefined,
      baseImg: undefined
      //showProportion: 1.666
    };
    }
  },
  watch: {
    loading: {
      handler(newVal, oldVal) {
        // console.log(newVal,'loading')
        if (newVal) {
          this.baseImg = "";
          this.refresh();
          this.baseImg = ""
          this.refresh()
        }
      },
      deep: true
@@ -151,11 +148,11 @@
    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
    }
@@ -163,156 +160,139 @@
  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.currentCameraId) {
        let _this = this;
        await updateSnapshot(this.currentCameraId)
          .then(res => {
        let _this = this
        await updateSnapshot(this.currentCameraId, this.isGB28181)
          .then((res) => {
            if (res.data.cameraId === _this.currentCameraId) {
              this.baseImg = res.data.snapshotUrl;
              this.$emit('refresh', res.data.snapshotUrl, _this.currentCameraId)
              this.baseImg = res.data.snapshotUrl
              this.$emit("refresh", res.data.snapshotUrl, _this.currentCameraId)
              this.$forceUpdate()
              this.$notify({
                type: "success",
                message: "底图已刷新"
              });
              })
            }
          })
          .catch(err => {
          .catch((err) => {
            this.$notify({
              type: "error",
              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;
        })
        return
      }
      this.$notify({
        type: "success",
        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)
@@ -326,22 +306,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)
@@ -355,66 +331,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) {
@@ -425,86 +397,86 @@
      // 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(this.loading,'刷新底图',this.snapshot_url)
      if (!this.currentCameraId) {
        return false;
        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 {