web/apsDashboard-1.git

parent: fedb0790 | 补丁 | 提交 | ignore whitespace

zhangzengfei

2022-07-18 61167e460b5273b05a23854742e3e450e656cd08

修复国标摄像机配置相关的bug

5个文件已修改

	src/api/pollConfig.ts	34 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/canvas/index.vue	514 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/wasmPlayer/index.vue	472 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/cameraAccess/components/CameraInfo.vue	432 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/cameraAccess/components/SeparateRules.vue	379 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/api/pollConfig.ts

@@ -1,36 +1,40 @@
import request from "@/scripts/httpRequest";
import qs from "qs";
import request from "@/scripts/httpRequest"
import qs from "qs"

export const getPollConfig = () => {
  return request({
    url: "/data/api-v/pollConfig/getPollConfig",
    method: "get"
  });
};
  })
}

export const changeRunType = (params: any) => {
  let apiUrl = "/data/api-v/camera/changeRunType"
  if (params.isGb) {
    apiUrl = "/data/api-v/gb28181/camera/changeRunType"
  }
  return request({
    url: "/data/api-v/camera/changeRunType",
    url: apiUrl,
    method: "post",
    data: params
  });
};
  })
}

export const updatePollEnable = (params: any) => {
  return request({
    url: "/data/api-v/pollConfig/updateEnable",
    method: "post",
    data: params
  });
};
  })
}

export const updatePollPeriod = (params: any) => {
  return request({
    url: "/data/api-v/pollConfig/savePollPeriod",
    method: "post",
    data: qs.stringify(params)
  });
};
  })
}

export const getCamerasByServer = (query: any) => {
  return request({
@@ -38,7 +42,7 @@
    method: "get",
    params: query
  })
};
}

export const statisticRunInfo = (query: any) => {
  return request({
@@ -46,12 +50,12 @@
    method: "get",
    params: query
  })
};
}

export const updateChannelCount = (params: any) => {
  return request({
    url: "/data/api-v/pollConfig/updateChannelCount",
    method: "post",
    data: params
  });
};
  })
}

 src/components/canvas/index.vue

@@ -1,33 +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"></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"
    >
    <el-dialog title :visible.sync="visible" width="1150px" append-to-body :before-close="cancelFunc">
      <canvas-dialog
        ref="bigCanvas"
        :canvasDataToChild="canvasData"
@@ -36,98 +24,96 @@
      ></canvas-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFunc" size="small">取 消</el-button>
        <el-button type="primary" @click="handleOk" size="small"
          >确 定</el-button
        >
        <el-button type="primary" @click="handleOk" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </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: {
    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
    },
    currentCameraId: {
      type: String,
      default: "",
      default: ""
    },
    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.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
      }
    },
    }
  },
  data() {
    return {
@@ -136,7 +122,7 @@
        line: [],
        rect: [],
        arrow: [],
        polygon: [],
        polygon: []
      }, // 最终输出的画布坐标数据
      canvasPic: new Image(), // 撤销用的图片
      canvasHistory: [], // 历史数据，以供撤销使用
@@ -144,234 +130,172 @@
      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,
      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() {
      if (TreeDataPool.selectedNode.type == "MENU") {
        return;
      if (this.TreeDataPool.selectedNode.type == "MENU") {
        return
      }
      // this.$emit('changeBaseImg',this.currentCameraId)
      this.$emit("changeLoading", true);
      this.$emit("changeLoading", true)
      if (this.currentCameraId) {
        let _this = this;
        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.$forceUpdate();
              this.baseImg = res.data.snapshotUrl
              this.$emit("refresh", res.data.snapshotUrl, _this.currentCameraId)
              this.$forceUpdate()
              this.$notify({
                type: "success",
                message: "底图已刷新",
              });
                message: "底图已刷新"
              })
            }
          })
          .catch((err) => {
            this.$notify({
              type: "error",
              message: "底图刷新失败",
            });
          });
        this.$emit("changeLoading", false);
              message: "底图刷新失败"
            })
          })
        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)
@@ -385,22 +309,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)
@@ -414,78 +334,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) {
@@ -496,86 +400,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 {

 src/components/wasmPlayer/index.vue

@@ -1,12 +1,6 @@
<template>
  <div class="video-player">
    <canvas
      v-show="showArea"
      id="area-canvas"
      ref="areaCanvas"
      width="960"
      height="540"
    ></canvas>
    <canvas v-show="showArea" id="area-canvas" ref="areaCanvas" width="960" height="540"></canvas>
    <div class="container" id="videoPlayer">
      <div class="canvasDiv">
        <div
@@ -14,12 +8,7 @@
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="position: unset !important"
        ></div>
        <canvas
          ref="playCanvas"
          id="paly-canvas"
          width="960"
          height="540"
        ></canvas>
        <canvas ref="playCanvas" id="paly-canvas" width="960" height="540"></canvas>
      </div>

      <transition name="fade">
@@ -29,31 +18,16 @@
      </transition>

      <!-- 控制条 -->
      <section
        class="jsmodern-video-panel"
        :style="{ display: isStream ? 'none' : 'block' }"
      >
      <section class="jsmodern-video-panel" :style="{ display: isStream ? 'none' : 'block' }">
        <!-- 播放/暂停 -->
        <b
          :class="
            playerStatus == 0 ? 'jsmodern-video-play' : 'jsmodern-video-pause'
          "
          @click="playVideo"
        ></b>
        <b :class="playerStatus == 0 ? 'jsmodern-video-play' : 'jsmodern-video-pause'" @click="playVideo"></b>

        <!-- 时间 -->
        <span class="jsmodern-video-start" ref="timeLabel"
          >00:00:00/00:00:00</span
        >
        <span class="jsmodern-video-start" ref="timeLabel">00:00:00/00:00:00</span>

        <!-- 进度条 -->
        <div>
          <input
            class="jsmodern-video-linebox"
            ref="timeTrack"
            type="range"
            value="0"
          />
          <input class="jsmodern-video-linebox" ref="timeTrack" type="range" value="0" />
        </div>

        <!-- 声音 -->
@@ -64,25 +38,15 @@
        </div> -->

        <!-- 全屏 -->
        <b
          class="jsmodern-video-fullin"
          @click="fullScreen"
          :disable="false"
        ></b>
        <b class="jsmodern-video-fullin" @click="fullScreen" :disable="false"></b>

        <!-- 下载 -->
        <i
          class="el-icon-download jsmodern-video-download"
          @click="downLoad"
          v-show="!isStream"
        ></i>
        <i class="el-icon-download jsmodern-video-download" @click="downLoad" v-show="!isStream"></i>
      </section>

      <!-- 大播放按钮 -->
      <div v-show="!isStream">
        <span class="video-btn" v-show="playerStatus == 0" @click="playVideo"
          ><img src="./wasm/img/bo1.png"
        /></span>
        <span class="video-btn" v-show="playerStatus == 0" @click="playVideo"><img src="./wasm/img/bo1.png"/></span>

        <!-- 上一个 -->
        <span class="video-prve" v-show="showPrev">
@@ -109,80 +73,77 @@
/*
  2021.09.22 添加多个录像地址的处理, 与录像模块约定, 用 || 分割多个视频地址, 前端处理播放.
*/
import { Player } from "./wasm/player";
import VideoRuleData from "@/Pool/VideoRuleData";
import { getAllPolygon } from "@/api/polygon";
import { Player } from "./wasm/player"
import VideoRuleData from "@/Pool/VideoRuleData"
import { getAllPolygon } from "@/api/polygon"
export default {
  name: "CameraPlayer",
  props: {
    videoUrl: {
      type: String,
      // default: "ws://192.168.1.182:10101/ws"
      default: `${location.protocol === "https" ? "wss" : "ws"}://${
        location.host
      }/ws`,
      default: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/ws`
    },
    cameraName: {
      type: String,
      default: "",
      default: ""
    },
    cameraID: {
      type: String,
      default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4",
      default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4"
    },
    rtspUrl: {
      type: String,
      default:
        "rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream",
      default: "rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream"
    },
    isRunning: {
      type: Boolean,
      default: false,
      default: false
    },
    isGb: {
      type: Boolean,
      default: false,
      default: false
    },
    showArea: {
      type: Boolean,
      default: false,
      default: false
    },
    isStream: {
      type: Boolean,
      default: true,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: false,
      default: false
    },
    preload: {
      type: Boolean,
      default: true,
    },
      default: true
    }
  },

  computed: {
    poster() {
      return "/images/player/player_poster.gif?t=" + Math.random();
      return "/images/player/player_poster.gif?t=" + Math.random()
    },
    showPrev() {
      return this.playerIndex - 1 >= 0;
      return this.playerIndex - 1 >= 0
    },
    showNext() {
      return this.playerIndex + 1 < this.videoUrls.length;
    },
      return this.playerIndex + 1 < this.videoUrls.length
    }
  },
  data() {
    return {
      player: null,
      playerId: 0,
      Camera: new VideoRuleData(this.isGb),
      Camera: new VideoRuleData(this.cameraID, this.isGb),
      showCanvas: true,
      canvasData: {
        line: [],
        rect: [], // {id:'uuid', name: '矩形1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] }
        arrow: [],
        polygon: [],
        polygon: []
      },
      //showProportion: 3.2,
      //showProportionY: 3.58,
@@ -202,111 +163,90 @@
      videoLoading: false,
      loadUrl: "",
      isFullScreen: false,
      fullScreenNotice: false,
    };
      fullScreenNotice: false
    }
  },
  watch: {
    rtspUrl: function (newVal, oldVal) {
    rtspUrl: function(newVal, oldVal) {
      if (newVal !== oldVal) {
        if (this.player) {
          this.player.stop();
          !!this.algoDataSocket && this.algoDataSocket.close();
          this.player.stop()
          !!this.algoDataSocket && this.algoDataSocket.close()
        }
        this.$nextTick(() => {
          this.playVideo();
        });
          this.playVideo()
        })
      }
    },
    videoUrl: function (newVal, oldVal) {
    videoUrl: function(newVal, oldVal) {
      if (newVal !== oldVal) {
        if (this.player) {
          this.player.stop();
          this.player.stop()
        }
        this.$nextTick(() => {
          this.player.preloadFlag = 0;
          this.playVideo();
        });
          this.player.preloadFlag = 0
          this.playVideo()
        })
      }
    },
    }
  },
  mounted() {
    this.player = new Player();
    this.player.preload = this.preload;
    this.player.statusCallback = this.setPlayerStatus;
    this.player = new Player()
    this.player.preload = this.preload
    this.player.statusCallback = this.setPlayerStatus

    if (this.isStream) {
      this.playVideo();
      this.playVideo()
      this.$nextTick(() => {
        this.canvas = this.$refs.areaCanvas;
        this.ctx = this.canvas.getContext("2d");
        this.ctx.lineWidth = 1;
        this.initArea();
      });
        this.canvas = this.$refs.areaCanvas
        this.ctx = this.canvas.getContext("2d")
        this.ctx.lineWidth = 1
        this.initArea()
      })
    } else {
      // 录像URL处理, 可能存在多个录像地址
      if (this.videoUrl === "") {
        this.playerStatus = -1;
        return;
        this.playerStatus = -1
        return
      }

      this.videoUrls = this.videoUrl.split("||");
      this.videoUrls = this.videoUrl.split("||")

      if (this.autoPlay || this.preload) {
        this.playVideo();
        this.playVideo()
      }
    }
  },
  beforeDestroy() {
    this.player.stop();
    this.player.stop()
  },
  methods: {
    // 回显cavas数据
    // 点击选中变色 将当前页面所有路径重绘判断当前鼠标的坐标在哪个图形内 如果不传坐标参数就是回显的方法
    clickSelect(e) {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.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.canvas.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.canvas.style.cursor = "default";
      });
      _this.canvasData.arrow.forEach(function (v, i) {
        _this.ctx.strokeStyle = "yellow";
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.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.canvas.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.canvas.style.cursor = "default"
      })
      _this.canvasData.arrow.forEach(function(v, i) {
        _this.ctx.strokeStyle = "yellow"
        _this.drawArrow(
          _this.ctx,
          v.location[0].x / _this.showProportion,
@@ -316,44 +256,28 @@
          20,
          30,
          "yellow"
        );
        _this.canvas.style.cursor = "default";
      });
      _this.canvasData.polygon.forEach(function (v, i) {
        )
        _this.canvas.style.cursor = "default"
      })
      _this.canvasData.polygon.forEach(function(v, i) {
        if (v.location && 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.showProportionY
        );
        _this.ctx.strokeStyle = "yellow"
        _this.ctx.beginPath()
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY)
        for (let i = 1; i < v.location.length; i++) {
          _this.ctx.lineTo(
            v.location[i].x / _this.showProportion,
            v.location[i].y / _this.showProportionY
          );
          _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY)
        }
        _this.ctx.closePath();
        _this.ctx.stroke();
        _this.canvas.style.cursor = "default";
      });
        _this.ctx.closePath()
        _this.ctx.stroke()
        _this.canvas.style.cursor = "default"
      })
    },

    // 箭头绘制函数
    drawArrow(
      ctx,
      fromX,
      fromY,
      toX,
      toY,
      theta = 30,
      headlen = 10,
      width = 1,
      color = "yellow"
    ) {
    drawArrow(ctx, fromX, fromY, toX, toY, theta = 30, headlen = 10, width = 1, color = "yellow") {
      // ctx：Canvas绘图环境
      // fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
      // toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
@@ -366,110 +290,110 @@
      // 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()
    },

    // 回显图形备注
    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) // 填充文字
    },
    getCanvasData(data) {
      let polyon = { ...data };
      polyon.camera_id = this.Camera.cameraId;
      let polyon = { ...data }
      polyon.camera_id = this.Camera.cameraId
      savePolygon(polyon).then((rsp) => {
        this.Camera.getPolygon();
        this.Camera.getCameraTask();
      });
        this.Camera.getPolygon()
        this.Camera.getCameraTask()
      })
    },
    setWidthHeight() {
      this.canvasWidth = this.$refs.videoPlayer.offsetWidth;
      this.canvasHeight = this.$refs.videoPlayer.offsetHeight;
      this.canvasWidth = this.$refs.videoPlayer.offsetWidth
      this.canvasHeight = this.$refs.videoPlayer.offsetHeight
    },
    async initArea() {
      if (!this.showCanvas) {
        return;
        return
      }

      const res = await getAllPolygon({
        cameraId: this.TreeDataPool.selectedNode.id,
      });
      this.canvasData.line = res.data.line;
      this.canvasData.rect = res.data.rect;
      this.canvasData.arrow = res.data.arrow;
      this.canvasData.polygon = res.data.polygon;
      this.clickSelect(this.canvasData);
        cameraId: this.TreeDataPool.selectedNode.id
      })
      this.canvasData.line = res.data.line
      this.canvasData.rect = res.data.rect
      this.canvasData.arrow = res.data.arrow
      this.canvasData.polygon = res.data.polygon
      this.clickSelect(this.canvasData)
    },
    initAlgoDataWebScoket() {
      if (typeof WebSocket === "undefined") {
        console.log("error,您的浏览器不支持socket");
        console.log("error,您的浏览器不支持socket")
      } else {
        this.algoDataSocket = new WebSocket();
        this.algoDataSocket = new WebSocket()
        this.algoDataSocket.onopen = () => {
          console.log("socket连接成功");
        };
          console.log("socket连接成功")
        }
        this.algoDataSocket.onerror = () => {
          console.log("连接错误");
        };
          console.log("连接错误")
        }
        this.algoDataSocket.onmessage = (msg) => {
          console.log(msg);
        };
          console.log(msg)
        }
      }
    },
    playVideo() {
      if (this.isStream && this.rtspUrl == "") {
        return;
        return
      }

      let payload = "";
      let url = "";
      let payload = ""
      let url = ""
      if (this.isStream) {
        if (this.cameraID == "") {
          this.cameraID = this.getUuid();
          this.cameraID = this.getUuid()
        }

        payload = JSON.stringify({
          cameraID: this.cameraID,
          rtspUrl: this.rtspUrl,
          isRunning: this.isRunning,
          isGb28181: this.isGb,
        });
          isGb28181: this.isGb
        })

        url = this.videoUrl;
        url = this.videoUrl
      } else {
        url = "/httpImage/" + this.videoUrls[this.playerIndex];
        url = "/httpImage/" + this.videoUrls[this.playerIndex]
      }

      this.videoLoading = true;
      this.videoLoading = true
      if (this.player.hPlayer == 0) {
        this.player.play(
          url,
@@ -479,48 +403,48 @@
          this.$refs.timeLabel,
          payload,
          () => {
            this.videoLoading = false;
            this.videoLoading = false
          }
        );
        )
      } else if (this.player.PlayOrPause == 0) {
        this.player.resume();
        this.videoLoading = false;
        this.player.resume()
        this.videoLoading = false
      } else {
        this.player.pause();
        this.videoLoading = false;
        this.player.pause()
        this.videoLoading = false
      }

      this.playerStatus = this.player.PlayOrPause;
      this.playerStatus = this.player.PlayOrPause

      this.loadUrl = url;
      this.loadUrl = url
    },
    setPlayerStatus(stat) {
      this.videoLoading = false;
      this.videoLoading = false
      // 控制加载后的播放按钮状态，实时流为自动播放，视频为preload
      this.playerStatus = this.isStream ? 1 : 0;
      this.playerStatus = this.isStream ? 1 : 0
    },
    stopVideo() {
      if (this.player.hPlayer == 0) return;
      if (this.player.hPlayer == 0) return

      this.player.stop();
      this.player.stop()
    },

    fullScreen() {
      if (!this.isFullScreen) {
        this.player.fullscreen();
        this.player.fullscreen()
      } else {
        this.player.exitfullscreen();
        this.player.exitfullscreen()
      }
      this.isFullScreen = !this.isFullScreen;
      this.isFullScreen = !this.isFullScreen
    },

    async downLoad() {
      if (!this.loadUrl) {
        this.$notify.info({
          title: "消息",
          message: "下载失败，无效的视频地址",
        });
        return;
          message: "下载失败，无效的视频地址"
        })
        return
      }

      if (this.isFullScreen) {
@@ -530,29 +454,29 @@
         p.appendChild(txt);
       p.classList.add("downloadNotice");
         screen.appendChild(p); */
        this.fullScreenNotice = true;
        this.fullScreenNotice = true
        setTimeout(() => {
          this.fullScreenNotice = false;
        }, 2000);
          this.fullScreenNotice = false
        }, 2000)
      } else {
        this.$notify.info({
          title: "消息",
          message: `资源下载中,请稍后...`,
        });
          message: `资源下载中,请稍后...`
        })
      }

      let url = "http://" + window.location.host + this.loadUrl;
      let url = "http://" + window.location.host + this.loadUrl

      // let url = "http://localhost:8080/httpImage/192.168.20.189:6700/283,2f49bf283ad7?collection=2021-09-28-DSVAD010120190703-video"
      let name = url.substring(url.lastIndexOf("/") + 1);
      let responsePromise = await fetch(url);
      let blob = await responsePromise.blob();
      let objectURL = window.URL.createObjectURL(blob);
      let a = document.createElement("a");
      a.href = objectURL;
      a.download = name;
      a.click();
      a.remove();
      let name = url.substring(url.lastIndexOf("/") + 1)
      let responsePromise = await fetch(url)
      let blob = await responsePromise.blob()
      let objectURL = window.URL.createObjectURL(blob)
      let a = document.createElement("a")
      a.href = objectURL
      a.download = name
      a.click()
      a.remove()
      /*  let url = 'http:/'+this.loadUrl.substring(10)
    let link = document.createElement("a"); //创建a标签
    let name = url.substring(url.lastIndexOf("/") + 1) 
@@ -564,18 +488,18 @@
    },

    playPrev() {
      this.playerIndex--;
      this.player.stop();
      this.playVideo();
      this.playerIndex--
      this.player.stop()
      this.playVideo()
    },

    playNext() {
      this.playerIndex++;
      this.player.stop();
      this.playVideo();
    },
  },
};
      this.playerIndex++
      this.player.stop()
      this.playVideo()
    }
  }
}
</script>

<style lang="scss">

 src/pages/cameraAccess/components/CameraInfo.vue

@@ -4,32 +4,17 @@
      <el-row>
        <el-col :span="9">
          <el-form-item label="RTSP地址" :span="11" prop="rtsp">
            <el-input
              v-model="form.rtsp"
              placeholder="rtsp://"
              :disabled="isDisabled"
              size="small"
            ></el-input>
            <el-input v-model="form.rtsp" placeholder="rtsp://" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="坐标" style="width: 100%">
            <label slot="label">坐标</label>
            <el-col :span="11">
              <el-input
                v-model="form.latitude"
                placeholder="经度"
                :disabled="isDisabled"
                size="small"
              ></el-input>
              <el-input v-model="form.latitude" placeholder="经度" :disabled="isDisabled" size="small"></el-input>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input
                v-model="form.longitude"
                placeholder="纬度"
                :disabled="isDisabled"
                size="small"
              ></el-input>
              <el-input v-model="form.longitude" placeholder="纬度" :disabled="isDisabled" size="small"></el-input>
            </el-col>
          </el-form-item>
        </el-col>
@@ -37,22 +22,12 @@
      <el-row>
        <el-col :span="9">
          <el-form-item label="设备名称" style="width: 100%" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入设备名称"
              :disabled="isDisabled"
              size="small"
            ></el-input>
            <el-input v-model="form.name" placeholder="请输入设备名称" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="设备地址" style="width: 100%" prop="addr">
            <el-input
              v-model="form.addr"
              placeholder="请输入地址描述"
              :disabled="isDisabled"
              size="small"
            ></el-input>
            <el-input v-model="form.addr" placeholder="请输入地址描述" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
@@ -112,39 +87,20 @@
      <el-row v-show="isGb28182">
        <el-col :span="9">
          <el-form-item label="设备别名" style="width: 100%" prop="alias">
            <el-input
              v-model="form.alias"
              placeholder="请输入设备别名"
              size="small"
            ></el-input>
            <el-input v-model="form.alias" placeholder="请输入设备别名" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <!-- 添加传感器 -->
        <CameraInfoEditor
          ref="cameraEditor"
          :Carmeras="form"
          :sensors="sensors"
        ></CameraInfoEditor>
        <CameraInfoEditor ref="cameraEditor" :Carmeras="form" :sensors="sensors"></CameraInfoEditor>
      </el-row>

      <el-row style="padding-top: 15px">
        <el-col :span="19" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            @click="onSubmit('addForm')"
            :disabled="conDisabled"
            >保存</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteCamera"
            v-if="!isAdd"
            :disabled="isDisabled"
          <el-button size="small" type="primary" @click="onSubmit('addForm')" :disabled="conDisabled">保存</el-button>
          <el-button type="danger" size="small" @click="deleteCamera" v-if="!isAdd" :disabled="isDisabled"
            >删除摄像机</el-button
          >
        </el-col>
@@ -154,13 +110,7 @@
      <input v-model="form.areaid" type="hidden" />
      <el-row>
        <el-col :span="12" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            @click="cameraConnet"
            :disabled="conDisabled"
            >连接测试</el-button
          >
          <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">连接测试</el-button>
        </el-col>
      </el-row>
      <el-row style="padding: 15px 0">
@@ -181,18 +131,9 @@
            :rtspUrl="videoItem.rtsp"
            :isRunning="false"
            :showArea="false"
            v-if="
              videoItem !== '' &&
              videoItem !== undefined &&
              videoItem !== null &&
              visibilityState
            "
            v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
          ></wasm-player>
          <video
            v-else
            poster="/images/cameraAccess/video-poster.png"
            preload="none"
          ></video>
          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video>
        </el-col>

        <!-- 系统运行信息 -->
@@ -214,10 +155,7 @@
              :style="`width:80%;height:174px;position: relative;left: -12px;`"
              v-if="PollData.barCharts && PollData.barCharts.length !== 0"
            >
              <eChartsBar
                ref="cpuMeneryCharts"
                :xAxisData="PollData.barCharts"
              ></eChartsBar>
              <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
            </div>
          </div>
        </el-col>
@@ -226,21 +164,15 @@
  </div>
</template>
<script>
import {
  createCamera,
  updateCameraInfo,
  getCameraInfo,
  getGB28181CameraInfo,
  delCamera,
} from "@/api/camera";
import { getSoundList } from "@/api/event";
import { createCamera, updateCameraInfo, getCameraInfo, getGB28181CameraInfo, delCamera } from "@/api/camera"
import { getSoundList } from "@/api/event"

import WasmPlayer from "@/components/wasmPlayer";
import CameraPlayer from "@/components/player";
import eChartsBar from "@/components/subComponents/eChartsBar";
import WasmPlayer from "@/components/wasmPlayer"
import CameraPlayer from "@/components/player"
import eChartsBar from "@/components/subComponents/eChartsBar"

import InfoCard from "./infoCard";
import CameraInfoEditor from "./CameraInfoEditor";
import InfoCard from "./infoCard"
import CameraInfoEditor from "./CameraInfoEditor"

export default {
  name: "CameraInfo",
@@ -249,15 +181,15 @@
    WasmPlayer,
    InfoCard,
    eChartsBar,
    CameraInfoEditor,
    CameraInfoEditor
  },
  props: {
    cameraList: {
      default: () => {
        return [];
        return []
      },
      type: Array,
    },
      type: Array
    }
  },
  data() {
    return {
@@ -272,103 +204,95 @@
      isAdd: false,
      addParentId: "",
      rules: {
        name: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
        rtsp: [
          { required: true, message: "RTSP地址不能为空", trigger: "blur" },
        ],
        addr: [
          { required: true, message: "设备地址不能为空", trigger: "blur" },
        ],
        name: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
        rtsp: [{ required: true, message: "RTSP地址不能为空", trigger: "blur" }],
        addr: [{ required: true, message: "设备地址不能为空", trigger: "blur" }]
      },
      resolutionList: [],
      //传感器列表
      sensors: [],
      voice: null,
    };
      voice: null
    }
  },
  computed: {
    isSelected() {
      return this.TreeDataPool.selectedNode.type !== "4";
      return this.TreeDataPool.selectedNode.type !== "4"
    },
    isGb28182() {
      return this.TreeDataPool.selectedNode.cameraType === 1;
      return this.TreeDataPool.selectedNode.cameraType === 1
    },
    isDisabled() {
      if (this.isGb28182) {
        return true;
        return true
      }

      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4"
    },
    conDisabled() {
      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
    },
      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4"
    }
  },
  mounted() {
    this.initFormData();
    this.initFormData()
    document.addEventListener("visibilitychange", () => {
      this.visibilitychange();
    });
    this.getSounds();
      this.visibilitychange()
    })
    this.getSounds()

    this.eventAudio.addEventListener("ended", () => {
      this.togglePlay = true;
    });
      this.togglePlay = true
    })
  },
  methods: {
    getSounds() {
      getSoundList()
        .then((res) => {
          if (res.success) {
            this.soundList = res.data;
            this.soundList = res.data
          }
        })
        .catch((e) => console.log(e));
        .catch((e) => console.log(e))
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.form.voiceId = sound.id;
      this.togglePlay = true;
      this.eventAudio.pause();
      this.soundPath = sound.path
      this.form.voiceId = sound.id
      this.togglePlay = true
      this.eventAudio.pause()
      // this.eventAudio.
    },
    togglePlayer() {
      if (!this.soundPath) {
        this.$notify({
          type: "info",
          message: "请先选择一个声音!",
        });
        return false;
          message: "请先选择一个声音!"
        })
        return false
      }
      this.eventAudio.src = this.soundPath;
      this.eventAudio.src = this.soundPath
      if (this.togglePlay) {
        this.eventAudio.play();
        this.togglePlay = false;
        this.eventAudio.play()
        this.togglePlay = false
      } else {
        this.eventAudio.pause();
        this.togglePlay = true;
        this.eventAudio.pause()
        this.togglePlay = true
      }
      // this.togglePlay = !this.togglePlay
    },
    visibilitychange() {
      switch (document.visibilityState) {
        case "hidden":
          this.visibilityState = false;
          break;
          this.visibilityState = false
          break
        case "visible":
          this.visibilityState = true;
          break;
          this.visibilityState = true
          break
      }
    },
    selectCamera(node) {
      this.isAdd = false;
      this.videoItem = null;
      this.$refs.addForm.resetFields();
      this.voice = null;

      console.log(node);
      this.isAdd = false
      this.videoItem = null
      this.$refs.addForm.resetFields()
      this.voice = null

      // this.initFormData();
      // this.$refs.addForm.clearValidate();
@@ -380,197 +304,176 @@
              // console.log(res, '获取摄像机信息')
              if (res.data.resolutions) {
                let list = res.data.resolutions.map((i) => {
                  let obj = {};
                  let obj = {}
                  if (i.width == 0 && i.height == 0) {
                    obj.label = "本机分辨率";
                    obj.value = "0*0";
                    obj.label = "本机分辨率"
                    obj.value = "0*0"
                  } else {
                    obj.label = i.width + "*" + i.height;
                    obj.value = i.width + "*" + i.height;
                    obj.label = i.width + "*" + i.height
                    obj.value = i.width + "*" + i.height
                  }
                  return obj;
                });
                this.resolutionList = list;
                this.sensors = res.data.sensors;
                console.log(list);
                  return obj
                })
                this.resolutionList = list
                this.sensors = res.data.sensors
              }

              this.$nextTick(() => {
                this.initFormData();
                Object.assign(this.form, res.data);
                this.initFormData()
                Object.assign(this.form, res.data)

                this.soundList.forEach((element) => {
                  if (this.form.voiceId == element.id) {
                    this.voice = element;
                    this.voice = element
                  }
                });
                })

                if (this.form.run_type !== -1) {
                  this.form.isAI = true;
                  this.form.isAI = true
                } else {
                  this.form.isAI = false;
                  this.form.isAI = false
                }
                this.form.resolution =
                  this.form.resolution_width +
                  "*" +
                  this.form.resolution_height;
              });
                this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
              })
            }
          });
          })
        } else {
          getCameraInfo(node.id).then((res) => {
            if (res.success) {
              // console.log(res, '获取摄像机信息')
              if (res.data.resolutions) {
                let list = res.data.resolutions.map((i) => {
                  let obj = {};
                  let obj = {}
                  if (i.width == 0 && i.height == 0) {
                    obj.label = "本机分辨率";
                    obj.value = "0*0";
                    obj.label = "本机分辨率"
                    obj.value = "0*0"
                  } else {
                    obj.label = i.width + "*" + i.height;
                    obj.value = i.width + "*" + i.height;
                    obj.label = i.width + "*" + i.height
                    obj.value = i.width + "*" + i.height
                  }
                  return obj;
                });
                this.resolutionList = list;
                this.sensors = res.data.sensors;
                console.log(list);
                  return obj
                })
                this.resolutionList = list
                this.sensors = res.data.sensors
              }

              this.$nextTick(() => {
                this.initFormData();
                Object.assign(this.form, res.data);
                this.initFormData()
                Object.assign(this.form, res.data)

                this.soundList.forEach((element) => {
                  if (this.form.voiceId == element.id) {
                    this.voice = element;
                    this.voice = element
                  }
                });
                })

                if (this.form.run_type !== -1) {
                  this.form.isAI = true;
                  this.form.isAI = true
                } else {
                  this.form.isAI = false;
                  this.form.isAI = false
                }
                this.form.resolution =
                  this.form.resolution_width +
                  "*" +
                  this.form.resolution_height;
              });
                this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
              })
            }
          });
          })
        }
      }
    },
    // 保存
    onSubmit(formName) {
      let list = this.$refs.cameraEditor.getResult();
      let list = this.$refs.cameraEditor.getResult()
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const isRequire = this.verifyRequrie();
          if (!isRequire) return false;
          const isRequire = this.verifyRequrie()
          if (!isRequire) return false

          this.form.latitude = Number.isNaN(parseFloat(this.form.latitude))
            ? 0
            : parseFloat(this.form.latitude);
          this.form.longitude = Number.isNaN(parseFloat(this.form.longitude))
            ? 0
            : parseFloat(this.form.longitude);
          this.form.sensors = list;
          this.form.resolution_width = Number(
            this.form.resolution.split("*")[0]
          );
          this.form.resolution_height = Number(
            this.form.resolution.split("*")[1]
          );
          let _this = this;
          this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude)
          this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude)
          this.form.sensors = list
          this.form.resolution_width = Number(this.form.resolution.split("*")[0])
          this.form.resolution_height = Number(this.form.resolution.split("*")[1])
          let _this = this
          // 更新
          if (this.form.id !== "") {
            this.form.areaid = this.TreeDataPool.getParent(
              this.form.id,
              this.isGb28182
            );
            console.log(this.TreeDataPool.selectedNode);
            this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182)
            updateCameraInfo(this.form)
              .then((rsp) => {
                if (rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "摄像机信息修改成功！",
                  });
                  this.TreeDataPool.fetchTreeData();
                  console.log(this.TreeDataPool.selectedNode);
                    message: "摄像机信息修改成功！"
                  })
                  this.TreeDataPool.fetchTreeData()
                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.ztreeObj.checkNode(_this.TreeDataPool.selectedNode, true, false, false);
                  //选中修改后的节点
                  let { evt, treeId } =
                    _this.$root.$children[0].$refs["leftTree"].$refs.tree;
                  console.log(evt, treeId);
                  // let { evt, treeId } =
                  //   _this.$root.$children[0].$refs["leftTree"].$refs.tree;
                  // console.log(evt, treeId);
                  // this.$nextTick(()=>{
                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.handleCreated()
                  // })
                } else {
                  this.selectCamera(this.TreeDataPool.selectedNode);
                  this.selectCamera(this.TreeDataPool.selectedNode)
                  this.$notify({
                    type: "error",
                    message: "摄像机信息修改失败！",
                  });
                    message: "摄像机信息修改失败！"
                  })
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: err.msg,
                });
              });
                  message: err.msg
                })
              })
          } else {
            this.form.areaid = this.addParentId;
            this.form.areaid = this.addParentId
            createCamera(this.form)
              .then((rsp) => {
                if (rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "摄像机添加成功！",
                  });
                  this.TreeDataPool.selectedNode = rsp.data;
                  this.TreeDataPool.fetchTreeData();
                    message: "摄像机添加成功！"
                  })
                  this.TreeDataPool.selectedNode = rsp.data
                  this.TreeDataPool.fetchTreeData()
                  // 后端返回结果为0，查询后为4
                  this.TreeDataPool.selectedNode.type = "4";
                  this.selectCamera(this.TreeDataPool.selectedNode);
                  this.TreeDataPool.selectedNode.type = "4"
                  this.selectCamera(this.TreeDataPool.selectedNode)
                } else {
                  this.$notify({
                    type: "error",
                    message: "摄像机添加失败！",
                  });
                    message: "摄像机添加失败！"
                  })
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: err.msg,
                });
              });
                  message: err.msg
                })
              })
          }
        }
      });
      })
    },
    // 连接测试
    cameraConnet() {
      this.videoItem = null;
      this.videoItem = null
      this.$nextTick(() => {
        this.videoItem = {
          name: this.form.name,
          rtsp: this.form.rtsp,
          id: this.form.id,
          isRunning: this.form.run_enable,
          cameraType: this.form.type,
        };
      });
          cameraType: this.form.type
        }
      })
    },
    // * 验证必选项
    verifyRequrie() {
      if (this.isGb28182) {
        return true;
        return true
      }
      // const rtspReg = /^(rtsp:\/\/)([a-zA-Z0-9_]+):([a-zA-Z0-9_]+)@(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?):([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])(\/)([a-zA-Z0-9_/]+)$/;
      // !rtspReg.test(this.form.rtsp
@@ -578,36 +481,36 @@
      if (this.form.rtsp === "") {
        this.$notify({
          type: "warning",
          message: "请输入正确的rtsp地址",
        });
        return false;
          message: "请输入正确的rtsp地址"
        })
        return false
      }
      return true;
      return true
    },
    // 删除摄像机
    deleteCamera() {
      this.$confirm("是否删除此摄像机？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
        confirmButtonClass: "comfirm-class-sure"
      }).then(() => {
        delCamera(this.form.id).then((res) => {
          if (res.success) {
            this.initFormData();
            this.initFormData()
            this.$notify({
              type: "success",
              message: "删除成功！",
            });
            this.TreeDataPool.fetchTreeData();
            this.TreeDataPool.selectedNode = {};
              message: "删除成功！"
            })
            this.TreeDataPool.fetchTreeData()
            this.TreeDataPool.selectedNode = {}
          } else {
            this.$notify({
              type: "error",
              message: "删除失败！",
            });
              message: "删除失败！"
            })
          }
        });
      });
        })
      })
    },
    // 清空输入框
    initFormData() {
@@ -629,32 +532,31 @@
        password: "",
        resolution: "",
        voiceId: "",
        voiceEnable: false,
      };
        voiceEnable: false
      }
    },
    // 添加设备
    addDevice(node) {
      console.log("1111");
      this.isAdd = true;
      this.addParentId = node;
      this.isAdd = true
      this.addParentId = node
      this.resolutionList = [
        {
          label: "本机分辨率",
          value: "0*0",
          value: "0*0"
        },
        {
          label: "1920*1080",
          value: "1920*1080",
          value: "1920*1080"
        },
        {
          label: "2688*1520",
          value: "2688*1520",
        },
      ];
      this.initFormData();
    },
  },
};
          value: "2688*1520"
        }
      ]
      this.initFormData()
    }
  }
}
</script>

<style lang="scss">
@@ -706,4 +608,4 @@
    height: 450px;
  }
}
</style>
</style>

 src/pages/cameraAccess/components/SeparateRules.vue

@@ -15,11 +15,7 @@
            </span>
          </div>

          <div
            v-if="Camera.analytics && isShowPolling === 'show'"
            class="flex-box"
            v-show="cameraType === 'camera'"
          >
          <div v-if="Camera.analytics && isShowPolling === 'show'" class="flex-box" v-show="cameraType === 'camera'">
            <span class="label">处理方式</span>
            <toggle-button
              :value="Camera.dealWay"
@@ -28,29 +24,20 @@
              :color="{
                checked: '#3D68E1',
                unchecked: '#FF7733',
                disabled: '#CCCCCC',
                disabled: '#CCCCCC'
              }"
              :sync="true"
              @change="changePoll"
            />
          </div>
          <div
            v-if="Camera.analytics"
            class="flex-box"
            v-show="cameraType === 'camera'"
          >
          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
            <span class="label">处理状态: {{ camStatus }}</span>
          </div>
          <div
            v-if="Camera.analytics"
            class="flex-box"
            v-show="cameraType === 'camera'"
          >
          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
            <span class="label"
              >分辨率:
              {{
                Camera.camearInfo.resolution_width == 0 ||
                Camera.camearInfo.resolution_height == 0
                Camera.camearInfo.resolution_width == 0 || Camera.camearInfo.resolution_height == 0
                  ? "本机分辨率"
                  : `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}`
              }}</span
@@ -64,12 +51,7 @@
          <div v-if="Camera.analytics" class="flex-box">
            <span class="label">算法快速通道</span>
            <div class="channel flex-box">
              <el-tooltip
                effect="dark"
                content="复制此摄像机算法规则"
                placement="bottom"
                popper-class="atooltip"
              >
              <el-tooltip effect="dark" content="复制此摄像机算法规则" placement="bottom" popper-class="atooltip">
                <span
                  style="color: #3d68e1; cursor: pointer; font-size: 23px"
                  @click="ctrlC"
@@ -79,9 +61,7 @@
              <el-tooltip
                effect="dark"
                :content="
                  !TreeDataPool.ctrlCameraId
                    ? '粘贴算法规则'
                    : `粘贴算法规则，来源：${TreeDataPool.ctrlCameraName}`
                  !TreeDataPool.ctrlCameraId ? '粘贴算法规则' : `粘贴算法规则，来源：${TreeDataPool.ctrlCameraName}`
                "
                placement="bottom"
                popper-class="atooltip"
@@ -128,19 +108,13 @@
          <div class="draw-box">
            <div class="draw-box-title">
              <b style="font-size: 14px">绘制区域</b>
              <span
                class="el-dropdown-link"
                @click="drawBaseImg"
                style="position: relative; top: 5px; cursor: pointer"
              >
              <span class="el-dropdown-link" @click="drawBaseImg" style="position: relative; top: 5px; cursor: pointer">
                <i class="iconfont iconbianji1" style="font-size: 28px"></i>
              </span>
            </div>
            <div style="width: 590px; height: 16px">
              <b style="font-size: 14px">{{
                Camera.camearInfo.alias
                  ? Camera.camearInfo.alias
                  : Camera.camearInfo.name
                Camera.camearInfo.alias ? Camera.camearInfo.alias : Camera.camearInfo.name
              }}</b>
            </div>
            <div class="img-box">
@@ -176,16 +150,9 @@
                    class="swiper-box-container2"
                    style="width: 100%"
                  >
                    <swiper-slide
                      v-for="(data, index) in swipercanvasData"
                      :key="index"
                    >
                    <swiper-slide v-for="(data, index) in swipercanvasData" :key="index">
                      <div>
                        <b
                          class="video-title"
                          style="font-size: 14px; margin-top: -10px"
                          >{{ data.name }}</b
                        >
                        <b class="video-title" style="font-size: 14px; margin-top: -10px">{{ data.name }}</b>
                        <polygon-canvas
                          class="cavas"
                          ref="canvas"
@@ -209,20 +176,12 @@
                      </div>
                    </swiper-slide>
                  </swiper>
                  <div
                    class="swiper-local-prev"
                    v-show="swipercanvasData.length > 1"
                    @click="prevClick"
                  >
                  <div class="swiper-local-prev" v-show="swipercanvasData.length > 1" @click="prevClick">
                    <div class="icon-btn" slot="button-prev">
                      <i class="iconfont iconzuo"></i>
                    </div>
                  </div>
                  <div
                    class="swiper-local-next"
                    v-show="swipercanvasData.length > 1"
                    @click="nextClick"
                  >
                  <div class="swiper-local-next" v-show="swipercanvasData.length > 1" @click="nextClick">
                    <div class="icon-btn" slot="button-next">
                      <i class="iconfont iconyou1"></i>
                    </div>
@@ -260,21 +219,22 @@
</template>

<script>
import { savePolygon } from "@/api/polygon";
import { savePolygon } from "@/api/polygon"

import { pasteRules } from "@/api/task";
import { getCameraInfo } from "@/api/camera";
import { saveCameraScene } from "@/api/scene";
import { pasteRules } from "@/api/task"
import { getCameraInfo } from "@/api/camera"
import { getGB28181CameraInfo } from "@/api/camera"
import { saveCameraScene } from "@/api/scene"

import { changeRunType } from "@/api/pollConfig";
import { findAllFileByStackId } from "@/api/localVedio";
import VideoRuleData from "@/Pool/VideoRuleData";
import { changeRunType } from "@/api/pollConfig"
import { findAllFileByStackId } from "@/api/localVedio"
import VideoRuleData from "@/Pool/VideoRuleData"

import TimeSlider from "./TimeSlider";
import polygonCanvas from "@/components/canvas";
import Sysinfo from "@/components/subComponents/SystemInfo";
import SceneRule from "./SceneRule";
import SlideScene from "./scene/SlideScene";
import TimeSlider from "./TimeSlider"
import polygonCanvas from "@/components/canvas"
import Sysinfo from "@/components/subComponents/SystemInfo"
import SceneRule from "./SceneRule"
import SlideScene from "./scene/SlideScene"

export default {
  components: {
@@ -282,21 +242,19 @@
    polygonCanvas,
    Sysinfo,
    SceneRule,
    SlideScene,
    SlideScene
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
      inserted: function(el) {
        el.querySelector("input").focus()
      }
    }
  },
  computed: {
    cameraType() {
      return this.TreeDataPool.treeActiveName === "camera"
        ? "camera"
        : "dataStack";
    },
      return this.TreeDataPool.treeActiveName === "camera" ? "camera" : "dataStack"
    }
  },
  data() {
    return {
@@ -310,12 +268,12 @@
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
          type: "fraction"
        },
        navigation: {
          nextEl: ".swiper-local-next",
          prevEl: ".swiper-local-prev",
        },
          prevEl: ".swiper-local-prev"
        }
      },
      tableRuleList: [],
      camStatus: "",
@@ -328,336 +286,335 @@
      swiperIndex: 0,
      swipercanvasData: [],
      stackFilesPage: 1,
      stackFilesSize: 5,
    };
      stackFilesSize: 5
    }
  },
  mounted() {
    this.PollData.statistics();
    this.PollData.statistics()
  },
  watch: {
    "Camera.cameraId": {
      handler(n, o) {
        if (n) {
          if (this.TreeDataPool.treeActiveName == "dataStack") {
            this.stackFilesPage = 1;
            this.stackFilesSize = 5;
            this.stackId = n;
            this.stackFilesPage = 1
            this.stackFilesSize = 5
            this.stackId = n
            if (this.stackId) {
              this.swipercanvasData = [];
              this.getStackFiles();
              this.swipercanvasData = []
              this.getStackFiles()
            }
          }
        }
      },
    },
      }
    }
  },
  methods: {
    getStatus() {
      getCameraInfo(this.Camera.cameraId).then((res) => {
      let refreshCameraInfo = getCameraInfo
      if (this.Camera.gb28181) {
        refreshCameraInfo = getGB28181CameraInfo
      }
      refreshCameraInfo(this.Camera.cameraId).then((res) => {
        if (res.success) {
          switch (res.data.status) {
            case 0:
              this.camStatus = "未配规则";
              return;
              this.camStatus = "未配规则"
              return
            case 1:
              this.camStatus = "等待轮询处理";
              return;
              this.camStatus = "等待轮询处理"
              return
            case 2:
              this.camStatus = "正在执行分析处理";
              return;
              this.camStatus = "正在执行分析处理"
              return
            case -1:
              this.camStatus = "其他情况导致未处理";
              return;
              this.camStatus = "其他情况导致未处理"
              return
            case -2:
              this.camStatus = "故障导致未处理";
              return;
              this.camStatus = "故障导致未处理"
              return
          }
        }
      });
      })
    },
    prevClick() {
      if (this.swiperIndex == 0) {
        if (this.stackFilesPage > 1) {
          this.stackFilesPage--;
          this.getStackFiles(true);
          this.stackFilesPage--
          this.getStackFiles(true)
        } else {
          this.$message({
            type: "info",
            message: "当前已是第一页",
          });
            message: "当前已是第一页"
          })
        }
      }
    },
    nextClick() {
      if (this.swiperIndex == this.swipercanvasData.length - 1) {
        this.stackFilesPage++;
        this.getStackFiles(true);
        this.stackFilesPage++
        this.getStackFiles(true)
      }
    },
    getStackFiles(onClick = false) {
      this.getStackFileLoading = true;
      let _this = this;
      this.getStackFileLoading = true
      let _this = this
      findAllFileByStackId({
        name: "",
        stackId: this.stackId,
        page: this.stackFilesPage,
        size: this.stackFilesSize,
        type: 0,
        type: 0
      })
        .then((res) => {
          if (res && res.success) {
            if (res.data.dataList.length > 0) {
              this.swipercanvasData = [];
              this.swipercanvasData = []
              this.swipercanvasData = res.data.dataList.map((item) => {
                return {
                  name: item.name,
                  stackId: item.stack_id,
                  baseImg:
                    item.type == 2
                      ? `/files/${item.path.substr(
                          item.path.lastIndexOf("/") + 1
                        )}`
                      : item.snapshot_url,
                    item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf("/") + 1)}` : item.snapshot_url,
                  type: item.type,
                  id: item.id,
                  loading: false,
                };
              });
              this.swiperIndex = 0;
              this.$refs.swiper.swiper.activeIndex = 0;
                  loading: false
                }
              })
              this.swiperIndex = 0
              this.$refs.swiper.swiper.activeIndex = 0
            } else {
              if (onClick) {
                this.$message({
                  type: "warning",
                  message: "已无更多数据!",
                });
                  message: "已无更多数据!"
                })
              }
            }
          } else {
            this.$message({
              type: "error",
              message: "数据请求失败,请稍后重试!",
            });
              message: "数据请求失败,请稍后重试!"
            })
          }
          this.getStackFileLoading = false;
          this.getStackFileLoading = false
        })
        .catch((e) => {
          this.getStackFileLoading = false;
        });
          this.getStackFileLoading = false
        })
    },
    swiperSlideChange() {
      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
      this.swiperIndex = this.$refs.swiper.swiper.activeIndex
    },
    drawBaseImg() {
      if (!this.Camera.cameraId) {
        this.$notify({
          type: "warning",
          message: "请先选择摄像机",
        });
        return;
          message: "请先选择摄像机"
        })
        return
      }
      if (Array.isArray(this.$refs.canvas)) {
        if (this.$refs.canvas.length > 0) {
          this.$refs.canvas[0].showModal();
          this.$refs.canvas[0].showModal()
        }
      } else {
        this.$refs.canvas.showModal();
        this.$refs.canvas.showModal()
      }
    },
    getCanvasData(data) {
      let polyon = { ...data };
      polyon.camera_id = this.Camera.cameraId;
      let polyon = { ...data }
      polyon.camera_id = this.Camera.cameraId
      savePolygon(polyon).then((rsp) => {
        this.Camera.getPolygon();
        this.Camera.getPolygon()
        //this.Camera.getCameraTask();
      });
      })
    },
    refresh(url) {
      this.Camera.baseImg = url;
      this.Camera.baseImg = url
    },
    // 初始化摄像机信息，父组件调用
    async initCameraData(id, type) {
      this.Camera = new VideoRuleData();
      this.Camera = new VideoRuleData()

      if (id && id !== "") {
        this.loading = false;
        this.Camera.cameraId = id;
        this.Camera.gb28181 = type === 1;
        this.loading = false
        this.Camera.cameraId = id
        this.Camera.gb28181 = type === 1
        if (type === 1) {
          await this.Camera.update(true);
          await this.Camera.update(true)
        } else {
          await this.Camera.update();
          await this.Camera.update()
        }
      }

      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
      this.showSysInfo = true;
      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id
      this.showSysInfo = true
      // 判断正在执行实时或者轮询任务
      this.PollData.CameraList.forEach((element) => {
        if (element.id === this.Camera.cameraId) {
          this.runType = element.run_type;
          this.runType = element.run_type
        }
      });
      })
    },

    saveSceneRule(groupRule) {
      const payload = { ...groupRule };
      payload.cameraIds = [this.Camera.cameraId];
      let _this = this;
      const payload = { ...groupRule }
      payload.cameraIds = [this.Camera.cameraId]
      let _this = this
      saveCameraScene(payload).then((rsp) => {
        if (rsp && rsp.success) {
          this.Camera.update();
          this.Camera.update()
          this.$notify({
            type: "success",
            message: "策略保存成功！",
          });
            message: "策略保存成功！"
          })
          //刷新左侧树

          _this.$root.$children[0].$children[0].querySearchAsync("camera");
          _this.$root.$children[0].$children[0].querySearchAsync("camera")
        }
      });
      })
    },
    delScenRule() {
      this.Camera.update();
      this.Camera.update()
    },
    changeLoading(params) {
      this.loading = params;
      this.loading = params
    },
    //是否进行视频分析处理
    pollEnable(row) {
      let val = 0;
      let val = 0
      if (row) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
          this.Camera.dealWay = true;
          val = 1;
          this.Camera.dealWay = true
          val = 1
        } else {
          this.Camera.dealWay = false;
          val = 0;
          this.Camera.dealWay = false
          val = 0
        }
      } else {
        this.Camera.dealWay = false;
        val = -1;
        this.Camera.dealWay = false
        val = -1
      }
      if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
        changeRunType({
          camera_ids: [this.Camera.cameraId],
          run_type: val,
          isGb: this.Camera.gb28181
        }).then((rsp) => {
          this.getStatus();
          this.getStatus()
          if (rsp && rsp.success) {
            this.$notify({
              type: "success",
              message: "配置成功",
            });
              message: "配置成功"
            })
          } else {
            this.$notify({
              type: "error",
              message: "配置失败",
            });
              message: "配置失败"
            })
          }
          this.TreeDataPool.fetchTreeData();
        });
          this.TreeDataPool.fetchTreeData()
        })
      }
      this.PollData.statisticTaskInfo();
      this.PollData.statisticTaskInfo()
    },
    //实时、轮询切换
    changePoll(row) {
      //判断是新增还是更新
      debugger;
      if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
          if (row.value) {
            this.Camera.dealWay = true;
            this.Camera.dealWay = true
          } else {
            this.Camera.dealWay = false;
            this.Camera.dealWay = false
          }
          debugger;
          changeRunType({
            camera_ids: [this.Camera.cameraId],
            run_type: this.Camera.dealWay ? 1 : 0,
            isGb: this.Camera.gb28181
          }).then((rsp) => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "配置成功",
              });
                message: "配置成功"
              })
            } else {
              this.$notify({
                type: "error",
                message: "配置失败",
              });
                message: "配置失败"
              })
            }
          });
          })
        } else {
          if (this.Camera.dealWay) {
            this.Camera.dealWay = false;
            debugger;
            this.Camera.dealWay = false
            changeRunType({
              camera_ids: [this.Camera.cameraId],
              run_type: this.Camera.dealWay ? 1 : 0,
              run_type: this.Camera.dealWay ? 1 : 0
            }).then((rsp) => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "配置成功",
                });
                  message: "配置成功"
                })
              } else {
                this.$notify({
                  type: "error",
                  message: "配置失败",
                });
                  message: "配置失败"
                })
              }
            });
            })
          }
        }
        this.TreeDataPool.fetchTreeData();
        this.PollData.statisticTaskInfo();
        this.TreeDataPool.fetchTreeData()
        this.PollData.statisticTaskInfo()
      }
    },
    //复制
    ctrlC() {
      this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
      this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
      this.TreeDataPool.ctrlCameraId = this.Camera.cameraId
      this.TreeDataPool.ctrlCameraName = this.Camera.cameraName
      this.$notify({
        type: "success",
        message: "复制算法成功！",
      });
        message: "复制算法成功！"
      })
    },
    ctrlV() {
      if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
        this.$notify({
          type: "warning",
          message: "不能粘贴本摄像机的算法到本摄像机！",
        });
        return false;
          message: "不能粘贴本摄像机的算法到本摄像机！"
        })
        return false
      }
      pasteRules({
        sourceId: this.TreeDataPool.ctrlCameraId,
        targetIds: [this.Camera.cameraId],
        targetIds: [this.Camera.cameraId]
      })
        .then((res) => {
          if (res && res.success) {
            this.$notify({
              type: "success",
              message: "粘贴算法成功！",
            });
            this.initCameraData(this.Camera.cameraId);
              message: "粘贴算法成功！"
            })
            this.initCameraData(this.Camera.cameraId)
          } else {
            this.$notify({
              type: "error",
              message: "粘贴算法失败！",
            });
              message: "粘贴算法失败！"
            })
          }
        })
        .catch((err) => {
          this.$notify({
            type: "error",
            message: "粘贴算法失败！",
          });
        });
    },
  },
};
            message: "粘贴算法失败！"
          })
        })
    }
  }
}
</script>
<style lang="scss">
.el-message--info .el-message__content {

			@@ -1,36 +1,40 @@
			import request from "@/scripts/httpRequest";
			import qs from "qs";
			import request from "@/scripts/httpRequest"
			import qs from "qs"

			export const getPollConfig = () => {
			return request({
			url: "/data/api-v/pollConfig/getPollConfig",
			method: "get"
			});
			};
			})
			}

			export const changeRunType = (params: any) => {
			let apiUrl = "/data/api-v/camera/changeRunType"
			if (params.isGb) {
			apiUrl = "/data/api-v/gb28181/camera/changeRunType"
			}
			return request({
			url: "/data/api-v/camera/changeRunType",
			url: apiUrl,
			method: "post",
			data: params
			});
			};
			})
			}

			export const updatePollEnable = (params: any) => {
			return request({
			url: "/data/api-v/pollConfig/updateEnable",
			method: "post",
			data: params
			});
			};
			})
			}

			export const updatePollPeriod = (params: any) => {
			return request({
			url: "/data/api-v/pollConfig/savePollPeriod",
			method: "post",
			data: qs.stringify(params)
			});
			};
			})
			}

			export const getCamerasByServer = (query: any) => {
			return request({
			@@ -38,7 +42,7 @@
			method: "get",
			params: query
			})
			};
			}

			export const statisticRunInfo = (query: any) => {
			return request({
			@@ -46,12 +50,12 @@
			method: "get",
			params: query
			})
			};
			}

			export const updateChannelCount = (params: any) => {
			return request({
			url: "/data/api-v/pollConfig/updateChannelCount",
			method: "post",
			data: params
			});
			};
			})
			}

			@@ -1,12 +1,6 @@
			<template>
			<div class="video-player">
			<canvas
			v-show="showArea"
			id="area-canvas"
			ref="areaCanvas"
			width="960"
			height="540"
			></canvas>
			<canvas v-show="showArea" id="area-canvas" ref="areaCanvas" width="960" height="540"></canvas>
			<div class="container" id="videoPlayer">
			<div class="canvasDiv">
			<div
			@@ -14,12 +8,7 @@
			element-loading-background="rgba(0, 0, 0, 0.8)"
			style="position: unset !important"
			></div>
			<canvas
			ref="playCanvas"
			id="paly-canvas"
			width="960"
			height="540"
			></canvas>
			<canvas ref="playCanvas" id="paly-canvas" width="960" height="540"></canvas>
			</div>

			<transition name="fade">
			@@ -29,31 +18,16 @@
			</transition>

			<!-- 控制条 -->
			<section
			class="jsmodern-video-panel"
			:style="{ display: isStream ? 'none' : 'block' }"
			>
			<section class="jsmodern-video-panel" :style="{ display: isStream ? 'none' : 'block' }">
			<!-- 播放/暂停 -->
			<b
			:class="
			playerStatus == 0 ? 'jsmodern-video-play' : 'jsmodern-video-pause'
			"
			@click="playVideo"
			></b>
			<b :class="playerStatus == 0 ? 'jsmodern-video-play' : 'jsmodern-video-pause'" @click="playVideo"></b>

			<!-- 时间 -->
			<span class="jsmodern-video-start" ref="timeLabel"
			>00:00:00/00:00:00</span
			>
			<span class="jsmodern-video-start" ref="timeLabel">00:00:00/00:00:00</span>

			<!-- 进度条 -->
			<div>
			<input
			class="jsmodern-video-linebox"
			ref="timeTrack"
			type="range"
			value="0"
			/>
			<input class="jsmodern-video-linebox" ref="timeTrack" type="range" value="0" />
			</div>

			<!-- 声音 -->
			@@ -64,25 +38,15 @@
			</div> -->

			<!-- 全屏 -->
			<b
			class="jsmodern-video-fullin"
			@click="fullScreen"
			:disable="false"
			></b>
			<b class="jsmodern-video-fullin" @click="fullScreen" :disable="false"></b>

			<!-- 下载 -->
			<i
			class="el-icon-download jsmodern-video-download"
			@click="downLoad"
			v-show="!isStream"
			></i>
			<i class="el-icon-download jsmodern-video-download" @click="downLoad" v-show="!isStream"></i>
			</section>

			<!-- 大播放按钮 -->
			<div v-show="!isStream">
			<span class="video-btn" v-show="playerStatus == 0" @click="playVideo"
			><img src="./wasm/img/bo1.png"
			/></span>
			<span class="video-btn" v-show="playerStatus == 0" @click="playVideo"><img src="./wasm/img/bo1.png"/></span>

			<!-- 上一个 -->
			<span class="video-prve" v-show="showPrev">
			@@ -109,80 +73,77 @@
			/*
			2021.09.22 添加多个录像地址的处理, 与录像模块约定, 用 \|\| 分割多个视频地址, 前端处理播放.
			*/
			import { Player } from "./wasm/player";
			import VideoRuleData from "@/Pool/VideoRuleData";
			import { getAllPolygon } from "@/api/polygon";
			import { Player } from "./wasm/player"
			import VideoRuleData from "@/Pool/VideoRuleData"
			import { getAllPolygon } from "@/api/polygon"
			export default {
			name: "CameraPlayer",
			props: {
			videoUrl: {
			type: String,
			// default: "ws://192.168.1.182:10101/ws"
			default: `${location.protocol === "https" ? "wss" : "ws"}://${
			location.host
			}/ws`,
			default: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/ws`
			},
			cameraName: {
			type: String,
			default: "",
			default: ""
			},
			cameraID: {
			type: String,
			default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4",
			default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4"
			},
			rtspUrl: {
			type: String,
			default:
			"rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream",
			default: "rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream"
			},
			isRunning: {
			type: Boolean,
			default: false,
			default: false
			},
			isGb: {
			type: Boolean,
			default: false,
			default: false
			},
			showArea: {
			type: Boolean,
			default: false,
			default: false
			},
			isStream: {
			type: Boolean,
			default: true,
			default: true
			},
			autoPlay: {
			type: Boolean,
			default: false,
			default: false
			},
			preload: {
			type: Boolean,
			default: true,
			},
			default: true
			}
			},

			computed: {
			poster() {
			return "/images/player/player_poster.gif?t=" + Math.random();
			return "/images/player/player_poster.gif?t=" + Math.random()
			},
			showPrev() {
			return this.playerIndex - 1 >= 0;
			return this.playerIndex - 1 >= 0
			},
			showNext() {
			return this.playerIndex + 1 < this.videoUrls.length;
			},
			return this.playerIndex + 1 < this.videoUrls.length
			}
			},
			data() {
			return {
			player: null,
			playerId: 0,
			Camera: new VideoRuleData(this.isGb),
			Camera: new VideoRuleData(this.cameraID, this.isGb),
			showCanvas: true,
			canvasData: {
			line: [],
			rect: [], // {id:'uuid', name: '矩形1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] }
			arrow: [],
			polygon: [],
			polygon: []
			},
			//showProportion: 3.2,
			//showProportionY: 3.58,
			@@ -202,111 +163,90 @@
			videoLoading: false,
			loadUrl: "",
			isFullScreen: false,
			fullScreenNotice: false,
			};
			fullScreenNotice: false
			}
			},
			watch: {
			rtspUrl: function (newVal, oldVal) {
			rtspUrl: function(newVal, oldVal) {
			if (newVal !== oldVal) {
			if (this.player) {
			this.player.stop();
			!!this.algoDataSocket && this.algoDataSocket.close();
			this.player.stop()
			!!this.algoDataSocket && this.algoDataSocket.close()
			}
			this.$nextTick(() => {
			this.playVideo();
			});
			this.playVideo()
			})
			}
			},
			videoUrl: function (newVal, oldVal) {
			videoUrl: function(newVal, oldVal) {
			if (newVal !== oldVal) {
			if (this.player) {
			this.player.stop();
			this.player.stop()
			}
			this.$nextTick(() => {
			this.player.preloadFlag = 0;
			this.playVideo();
			});
			this.player.preloadFlag = 0
			this.playVideo()
			})
			}
			},
			}
			},
			mounted() {
			this.player = new Player();
			this.player.preload = this.preload;
			this.player.statusCallback = this.setPlayerStatus;
			this.player = new Player()
			this.player.preload = this.preload
			this.player.statusCallback = this.setPlayerStatus

			if (this.isStream) {
			this.playVideo();
			this.playVideo()
			this.$nextTick(() => {
			this.canvas = this.$refs.areaCanvas;
			this.ctx = this.canvas.getContext("2d");
			this.ctx.lineWidth = 1;
			this.initArea();
			});
			this.canvas = this.$refs.areaCanvas
			this.ctx = this.canvas.getContext("2d")
			this.ctx.lineWidth = 1
			this.initArea()
			})
			} else {
			// 录像URL处理, 可能存在多个录像地址
			if (this.videoUrl === "") {
			this.playerStatus = -1;
			return;
			this.playerStatus = -1
			return
			}

			this.videoUrls = this.videoUrl.split("\|\|");
			this.videoUrls = this.videoUrl.split("\|\|")

			if (this.autoPlay \|\| this.preload) {
			this.playVideo();
			this.playVideo()
			}
			}
			},
			beforeDestroy() {
			this.player.stop();
			this.player.stop()
			},
			methods: {
			// 回显cavas数据
			// 点击选中变色将当前页面所有路径重绘判断当前鼠标的坐标在哪个图形内如果不传坐标参数就是回显的方法
			clickSelect(e) {
			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.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.canvas.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.canvas.style.cursor = "default";
			});
			_this.canvasData.arrow.forEach(function (v, i) {
			_this.ctx.strokeStyle = "yellow";
			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.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.canvas.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.canvas.style.cursor = "default"
			})
			_this.canvasData.arrow.forEach(function(v, i) {
			_this.ctx.strokeStyle = "yellow"
			_this.drawArrow(
			_this.ctx,
			v.location[0].x / _this.showProportion,
			@@ -316,44 +256,28 @@
			20,
			30,
			"yellow"
			);
			_this.canvas.style.cursor = "default";
			});
			_this.canvasData.polygon.forEach(function (v, i) {
			)
			_this.canvas.style.cursor = "default"
			})
			_this.canvasData.polygon.forEach(function(v, i) {
			if (v.location && 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.showProportionY
			);
			_this.ctx.strokeStyle = "yellow"
			_this.ctx.beginPath()
			_this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY)
			for (let i = 1; i < v.location.length; i++) {
			_this.ctx.lineTo(
			v.location[i].x / _this.showProportion,
			v.location[i].y / _this.showProportionY
			);
			_this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY)
			}
			_this.ctx.closePath();
			_this.ctx.stroke();
			_this.canvas.style.cursor = "default";
			});
			_this.ctx.closePath()
			_this.ctx.stroke()
			_this.canvas.style.cursor = "default"
			})
			},

			// 箭头绘制函数
			drawArrow(
			ctx,
			fromX,
			fromY,
			toX,
			toY,
			theta = 30,
			headlen = 10,
			width = 1,
			color = "yellow"
			) {
			drawArrow(ctx, fromX, fromY, toX, toY, theta = 30, headlen = 10, width = 1, color = "yellow") {
			// ctx：Canvas绘图环境
			// fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
			// toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
			@@ -366,110 +290,110 @@
			// 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()
			},

			// 回显图形备注
			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) // 填充文字
			},
			getCanvasData(data) {
			let polyon = { ...data };
			polyon.camera_id = this.Camera.cameraId;
			let polyon = { ...data }
			polyon.camera_id = this.Camera.cameraId
			savePolygon(polyon).then((rsp) => {
			this.Camera.getPolygon();
			this.Camera.getCameraTask();
			});
			this.Camera.getPolygon()
			this.Camera.getCameraTask()
			})
			},
			setWidthHeight() {
			this.canvasWidth = this.$refs.videoPlayer.offsetWidth;
			this.canvasHeight = this.$refs.videoPlayer.offsetHeight;
			this.canvasWidth = this.$refs.videoPlayer.offsetWidth
			this.canvasHeight = this.$refs.videoPlayer.offsetHeight
			},
			async initArea() {
			if (!this.showCanvas) {
			return;
			return
			}

			const res = await getAllPolygon({
			cameraId: this.TreeDataPool.selectedNode.id,
			});
			this.canvasData.line = res.data.line;
			this.canvasData.rect = res.data.rect;
			this.canvasData.arrow = res.data.arrow;
			this.canvasData.polygon = res.data.polygon;
			this.clickSelect(this.canvasData);
			cameraId: this.TreeDataPool.selectedNode.id
			})
			this.canvasData.line = res.data.line
			this.canvasData.rect = res.data.rect
			this.canvasData.arrow = res.data.arrow
			this.canvasData.polygon = res.data.polygon
			this.clickSelect(this.canvasData)
			},
			initAlgoDataWebScoket() {
			if (typeof WebSocket === "undefined") {
			console.log("error,您的浏览器不支持socket");
			console.log("error,您的浏览器不支持socket")
			} else {
			this.algoDataSocket = new WebSocket();
			this.algoDataSocket = new WebSocket()
			this.algoDataSocket.onopen = () => {
			console.log("socket连接成功");
			};
			console.log("socket连接成功")
			}
			this.algoDataSocket.onerror = () => {
			console.log("连接错误");
			};
			console.log("连接错误")
			}
			this.algoDataSocket.onmessage = (msg) => {
			console.log(msg);
			};
			console.log(msg)
			}
			}
			},
			playVideo() {
			if (this.isStream && this.rtspUrl == "") {
			return;
			return
			}

			let payload = "";
			let url = "";
			let payload = ""
			let url = ""
			if (this.isStream) {
			if (this.cameraID == "") {
			this.cameraID = this.getUuid();
			this.cameraID = this.getUuid()
			}

			payload = JSON.stringify({
			cameraID: this.cameraID,
			rtspUrl: this.rtspUrl,
			isRunning: this.isRunning,
			isGb28181: this.isGb,
			});
			isGb28181: this.isGb
			})

			url = this.videoUrl;
			url = this.videoUrl
			} else {
			url = "/httpImage/" + this.videoUrls[this.playerIndex];
			url = "/httpImage/" + this.videoUrls[this.playerIndex]
			}

			this.videoLoading = true;
			this.videoLoading = true
			if (this.player.hPlayer == 0) {
			this.player.play(
			url,
			@@ -479,48 +403,48 @@
			this.$refs.timeLabel,
			payload,
			() => {
			this.videoLoading = false;
			this.videoLoading = false
			}
			);
			)
			} else if (this.player.PlayOrPause == 0) {
			this.player.resume();
			this.videoLoading = false;
			this.player.resume()
			this.videoLoading = false
			} else {
			this.player.pause();
			this.videoLoading = false;
			this.player.pause()
			this.videoLoading = false
			}

			this.playerStatus = this.player.PlayOrPause;
			this.playerStatus = this.player.PlayOrPause

			this.loadUrl = url;
			this.loadUrl = url
			},
			setPlayerStatus(stat) {
			this.videoLoading = false;
			this.videoLoading = false
			// 控制加载后的播放按钮状态，实时流为自动播放，视频为preload
			this.playerStatus = this.isStream ? 1 : 0;
			this.playerStatus = this.isStream ? 1 : 0
			},
			stopVideo() {
			if (this.player.hPlayer == 0) return;
			if (this.player.hPlayer == 0) return

			this.player.stop();
			this.player.stop()
			},

			fullScreen() {
			if (!this.isFullScreen) {
			this.player.fullscreen();
			this.player.fullscreen()
			} else {
			this.player.exitfullscreen();
			this.player.exitfullscreen()
			}
			this.isFullScreen = !this.isFullScreen;
			this.isFullScreen = !this.isFullScreen
			},

			async downLoad() {
			if (!this.loadUrl) {
			this.$notify.info({
			title: "消息",
			message: "下载失败，无效的视频地址",
			});
			return;
			message: "下载失败，无效的视频地址"
			})
			return
			}

			if (this.isFullScreen) {
			@@ -530,29 +454,29 @@
			p.appendChild(txt);
			p.classList.add("downloadNotice");
			screen.appendChild(p); */
			this.fullScreenNotice = true;
			this.fullScreenNotice = true
			setTimeout(() => {
			this.fullScreenNotice = false;
			}, 2000);
			this.fullScreenNotice = false
			}, 2000)
			} else {
			this.$notify.info({
			title: "消息",
			message: `资源下载中,请稍后...`,
			});
			message: `资源下载中,请稍后...`
			})
			}

			let url = "http://" + window.location.host + this.loadUrl;
			let url = "http://" + window.location.host + this.loadUrl

			// let url = "http://localhost:8080/httpImage/192.168.20.189:6700/283,2f49bf283ad7?collection=2021-09-28-DSVAD010120190703-video"
			let name = url.substring(url.lastIndexOf("/") + 1);
			let responsePromise = await fetch(url);
			let blob = await responsePromise.blob();
			let objectURL = window.URL.createObjectURL(blob);
			let a = document.createElement("a");
			a.href = objectURL;
			a.download = name;
			a.click();
			a.remove();
			let name = url.substring(url.lastIndexOf("/") + 1)
			let responsePromise = await fetch(url)
			let blob = await responsePromise.blob()
			let objectURL = window.URL.createObjectURL(blob)
			let a = document.createElement("a")
			a.href = objectURL
			a.download = name
			a.click()
			a.remove()
			/* let url = 'http:/'+this.loadUrl.substring(10)
			let link = document.createElement("a"); //创建a标签
			let name = url.substring(url.lastIndexOf("/") + 1)
			@@ -564,18 +488,18 @@
			},

			playPrev() {
			this.playerIndex--;
			this.player.stop();
			this.playVideo();
			this.playerIndex--
			this.player.stop()
			this.playVideo()
			},

			playNext() {
			this.playerIndex++;
			this.player.stop();
			this.playVideo();
			},
			},
			};
			this.playerIndex++
			this.player.stop()
			this.playVideo()
			}
			}
			}
			</script>

			<style lang="scss">

			@@ -4,32 +4,17 @@
			<el-row>
			<el-col :span="9">
			<el-form-item label="RTSP地址" :span="11" prop="rtsp">
			<el-input
			v-model="form.rtsp"
			placeholder="rtsp://"
			:disabled="isDisabled"
			size="small"
			></el-input>
			<el-input v-model="form.rtsp" placeholder="rtsp://" :disabled="isDisabled" size="small"></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="9" :offset="1">
			<el-form-item label="坐标" style="width: 100%">
			<label slot="label">坐标</label>
			<el-col :span="11">
			<el-input
			v-model="form.latitude"
			placeholder="经度"
			:disabled="isDisabled"
			size="small"
			></el-input>
			<el-input v-model="form.latitude" placeholder="经度" :disabled="isDisabled" size="small"></el-input>
			</el-col>
			<el-col :span="11" :offset="2">
			<el-input
			v-model="form.longitude"
			placeholder="纬度"
			:disabled="isDisabled"
			size="small"
			></el-input>
			<el-input v-model="form.longitude" placeholder="纬度" :disabled="isDisabled" size="small"></el-input>
			</el-col>
			</el-form-item>
			</el-col>
			@@ -37,22 +22,12 @@
			<el-row>
			<el-col :span="9">
			<el-form-item label="设备名称" style="width: 100%" prop="name">
			<el-input
			v-model="form.name"
			placeholder="请输入设备名称"
			:disabled="isDisabled"
			size="small"
			></el-input>
			<el-input v-model="form.name" placeholder="请输入设备名称" :disabled="isDisabled" size="small"></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="9" :offset="1">
			<el-form-item label="设备地址" style="width: 100%" prop="addr">
			<el-input
			v-model="form.addr"
			placeholder="请输入地址描述"
			:disabled="isDisabled"
			size="small"
			></el-input>
			<el-input v-model="form.addr" placeholder="请输入地址描述" :disabled="isDisabled" size="small"></el-input>
			</el-form-item>
			</el-col>
			</el-row>
			@@ -112,39 +87,20 @@
			<el-row v-show="isGb28182">
			<el-col :span="9">
			<el-form-item label="设备别名" style="width: 100%" prop="alias">
			<el-input
			v-model="form.alias"
			placeholder="请输入设备别名"
			size="small"
			></el-input>
			<el-input v-model="form.alias" placeholder="请输入设备别名" size="small"></el-input>
			</el-form-item>
			</el-col>
			</el-row>

			<el-row>
			<!-- 添加传感器 -->
			<CameraInfoEditor
			ref="cameraEditor"
			:Carmeras="form"
			:sensors="sensors"
			></CameraInfoEditor>
			<CameraInfoEditor ref="cameraEditor" :Carmeras="form" :sensors="sensors"></CameraInfoEditor>
			</el-row>

			<el-row style="padding-top: 15px">
			<el-col :span="19" style="text-align: right">
			<el-button
			size="small"
			type="primary"
			@click="onSubmit('addForm')"
			:disabled="conDisabled"
			>保存</el-button
			>
			<el-button
			type="danger"
			size="small"
			@click="deleteCamera"
			v-if="!isAdd"
			:disabled="isDisabled"
			<el-button size="small" type="primary" @click="onSubmit('addForm')" :disabled="conDisabled">保存</el-button>
			<el-button type="danger" size="small" @click="deleteCamera" v-if="!isAdd" :disabled="isDisabled"
			>删除摄像机</el-button
			>
			</el-col>
			@@ -154,13 +110,7 @@
			<input v-model="form.areaid" type="hidden" />
			<el-row>
			<el-col :span="12" style="text-align: right">
			<el-button
			size="small"
			type="primary"
			@click="cameraConnet"
			:disabled="conDisabled"
			>连接测试</el-button
			>
			<el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">连接测试</el-button>
			</el-col>
			</el-row>
			<el-row style="padding: 15px 0">
			@@ -181,18 +131,9 @@
			:rtspUrl="videoItem.rtsp"
			:isRunning="false"
			:showArea="false"
			v-if="
			videoItem !== '' &&
			videoItem !== undefined &&
			videoItem !== null &&
			visibilityState
			"
			v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
			></wasm-player>
			<video
			v-else
			poster="/images/cameraAccess/video-poster.png"
			preload="none"
			></video>
			<video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video>
			</el-col>

			<!-- 系统运行信息 -->
			@@ -214,10 +155,7 @@
			:style="`width:80%;height:174px;position: relative;left: -12px;`"
			v-if="PollData.barCharts && PollData.barCharts.length !== 0"
			>
			<eChartsBar
			ref="cpuMeneryCharts"
			:xAxisData="PollData.barCharts"
			></eChartsBar>
			<eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
			</div>
			</div>
			</el-col>
			@@ -226,21 +164,15 @@
			</div>
			</template>
			<script>
			import {
			createCamera,
			updateCameraInfo,
			getCameraInfo,
			getGB28181CameraInfo,
			delCamera,
			} from "@/api/camera";
			import { getSoundList } from "@/api/event";
			import { createCamera, updateCameraInfo, getCameraInfo, getGB28181CameraInfo, delCamera } from "@/api/camera"
			import { getSoundList } from "@/api/event"

			import WasmPlayer from "@/components/wasmPlayer";
			import CameraPlayer from "@/components/player";
			import eChartsBar from "@/components/subComponents/eChartsBar";
			import WasmPlayer from "@/components/wasmPlayer"
			import CameraPlayer from "@/components/player"
			import eChartsBar from "@/components/subComponents/eChartsBar"

			import InfoCard from "./infoCard";
			import CameraInfoEditor from "./CameraInfoEditor";
			import InfoCard from "./infoCard"
			import CameraInfoEditor from "./CameraInfoEditor"

			export default {
			name: "CameraInfo",
			@@ -249,15 +181,15 @@
			WasmPlayer,
			InfoCard,
			eChartsBar,
			CameraInfoEditor,
			CameraInfoEditor
			},
			props: {
			cameraList: {
			default: () => {
			return [];
			return []
			},
			type: Array,
			},
			type: Array
			}
			},
			data() {
			return {
			@@ -272,103 +204,95 @@
			isAdd: false,
			addParentId: "",
			rules: {
			name: [
			{ required: true, message: "设备名称不能为空", trigger: "blur" },
			],
			rtsp: [
			{ required: true, message: "RTSP地址不能为空", trigger: "blur" },
			],
			addr: [
			{ required: true, message: "设备地址不能为空", trigger: "blur" },
			],
			name: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
			rtsp: [{ required: true, message: "RTSP地址不能为空", trigger: "blur" }],
			addr: [{ required: true, message: "设备地址不能为空", trigger: "blur" }]
			},
			resolutionList: [],
			//传感器列表
			sensors: [],
			voice: null,
			};
			voice: null
			}
			},
			computed: {
			isSelected() {
			return this.TreeDataPool.selectedNode.type !== "4";
			return this.TreeDataPool.selectedNode.type !== "4"
			},
			isGb28182() {
			return this.TreeDataPool.selectedNode.cameraType === 1;
			return this.TreeDataPool.selectedNode.cameraType === 1
			},
			isDisabled() {
			if (this.isGb28182) {
			return true;
			return true
			}

			return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
			return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4"
			},
			conDisabled() {
			return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
			},
			return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4"
			}
			},
			mounted() {
			this.initFormData();
			this.initFormData()
			document.addEventListener("visibilitychange", () => {
			this.visibilitychange();
			});
			this.getSounds();
			this.visibilitychange()
			})
			this.getSounds()

			this.eventAudio.addEventListener("ended", () => {
			this.togglePlay = true;
			});
			this.togglePlay = true
			})
			},
			methods: {
			getSounds() {
			getSoundList()
			.then((res) => {
			if (res.success) {
			this.soundList = res.data;
			this.soundList = res.data
			}
			})
			.catch((e) => console.log(e));
			.catch((e) => console.log(e))
			},
			selSound(sound) {
			this.soundPath = sound.path;
			this.form.voiceId = sound.id;
			this.togglePlay = true;
			this.eventAudio.pause();
			this.soundPath = sound.path
			this.form.voiceId = sound.id
			this.togglePlay = true
			this.eventAudio.pause()
			// this.eventAudio.
			},
			togglePlayer() {
			if (!this.soundPath) {
			this.$notify({
			type: "info",
			message: "请先选择一个声音!",
			});
			return false;
			message: "请先选择一个声音!"
			})
			return false
			}
			this.eventAudio.src = this.soundPath;
			this.eventAudio.src = this.soundPath
			if (this.togglePlay) {
			this.eventAudio.play();
			this.togglePlay = false;
			this.eventAudio.play()
			this.togglePlay = false
			} else {
			this.eventAudio.pause();
			this.togglePlay = true;
			this.eventAudio.pause()
			this.togglePlay = true
			}
			// this.togglePlay = !this.togglePlay
			},
			visibilitychange() {
			switch (document.visibilityState) {
			case "hidden":
			this.visibilityState = false;
			break;
			this.visibilityState = false
			break
			case "visible":
			this.visibilityState = true;
			break;
			this.visibilityState = true
			break
			}
			},
			selectCamera(node) {
			this.isAdd = false;
			this.videoItem = null;
			this.$refs.addForm.resetFields();
			this.voice = null;

			console.log(node);
			this.isAdd = false
			this.videoItem = null
			this.$refs.addForm.resetFields()
			this.voice = null

			// this.initFormData();
			// this.$refs.addForm.clearValidate();
			@@ -380,197 +304,176 @@
			// console.log(res, '获取摄像机信息')
			if (res.data.resolutions) {
			let list = res.data.resolutions.map((i) => {
			let obj = {};
			let obj = {}
			if (i.width == 0 && i.height == 0) {
			obj.label = "本机分辨率";
			obj.value = "0*0";
			obj.label = "本机分辨率"
			obj.value = "0*0"
			} else {
			obj.label = i.width + "*" + i.height;
			obj.value = i.width + "*" + i.height;
			obj.label = i.width + "*" + i.height
			obj.value = i.width + "*" + i.height
			}
			return obj;
			});
			this.resolutionList = list;
			this.sensors = res.data.sensors;
			console.log(list);
			return obj
			})
			this.resolutionList = list
			this.sensors = res.data.sensors
			}

			this.$nextTick(() => {
			this.initFormData();
			Object.assign(this.form, res.data);
			this.initFormData()
			Object.assign(this.form, res.data)

			this.soundList.forEach((element) => {
			if (this.form.voiceId == element.id) {
			this.voice = element;
			this.voice = element
			}
			});
			})

			if (this.form.run_type !== -1) {
			this.form.isAI = true;
			this.form.isAI = true
			} else {
			this.form.isAI = false;
			this.form.isAI = false
			}
			this.form.resolution =
			this.form.resolution_width +
			"*" +
			this.form.resolution_height;
			});
			this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
			})
			}
			});
			})
			} else {
			getCameraInfo(node.id).then((res) => {
			if (res.success) {
			// console.log(res, '获取摄像机信息')
			if (res.data.resolutions) {
			let list = res.data.resolutions.map((i) => {
			let obj = {};
			let obj = {}
			if (i.width == 0 && i.height == 0) {
			obj.label = "本机分辨率";
			obj.value = "0*0";
			obj.label = "本机分辨率"
			obj.value = "0*0"
			} else {
			obj.label = i.width + "*" + i.height;
			obj.value = i.width + "*" + i.height;
			obj.label = i.width + "*" + i.height
			obj.value = i.width + "*" + i.height
			}
			return obj;
			});
			this.resolutionList = list;
			this.sensors = res.data.sensors;
			console.log(list);
			return obj
			})
			this.resolutionList = list
			this.sensors = res.data.sensors
			}

			this.$nextTick(() => {
			this.initFormData();
			Object.assign(this.form, res.data);
			this.initFormData()
			Object.assign(this.form, res.data)

			this.soundList.forEach((element) => {
			if (this.form.voiceId == element.id) {
			this.voice = element;
			this.voice = element
			}
			});
			})

			if (this.form.run_type !== -1) {
			this.form.isAI = true;
			this.form.isAI = true
			} else {
			this.form.isAI = false;
			this.form.isAI = false
			}
			this.form.resolution =
			this.form.resolution_width +
			"*" +
			this.form.resolution_height;
			});
			this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
			})
			}
			});
			})
			}
			}
			},
			// 保存
			onSubmit(formName) {
			let list = this.$refs.cameraEditor.getResult();
			let list = this.$refs.cameraEditor.getResult()
			this.$refs[formName].validate(async (valid) => {
			if (valid) {
			const isRequire = this.verifyRequrie();
			if (!isRequire) return false;
			const isRequire = this.verifyRequrie()
			if (!isRequire) return false

			this.form.latitude = Number.isNaN(parseFloat(this.form.latitude))
			? 0
			: parseFloat(this.form.latitude);
			this.form.longitude = Number.isNaN(parseFloat(this.form.longitude))
			? 0
			: parseFloat(this.form.longitude);
			this.form.sensors = list;
			this.form.resolution_width = Number(
			this.form.resolution.split("*")[0]
			);
			this.form.resolution_height = Number(
			this.form.resolution.split("*")[1]
			);
			let _this = this;
			this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude)
			this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude)
			this.form.sensors = list
			this.form.resolution_width = Number(this.form.resolution.split("*")[0])
			this.form.resolution_height = Number(this.form.resolution.split("*")[1])
			let _this = this
			// 更新
			if (this.form.id !== "") {
			this.form.areaid = this.TreeDataPool.getParent(
			this.form.id,
			this.isGb28182
			);
			console.log(this.TreeDataPool.selectedNode);
			this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182)
			updateCameraInfo(this.form)
			.then((rsp) => {
			if (rsp.success) {
			this.$notify({
			type: "success",
			message: "摄像机信息修改成功！",
			});
			this.TreeDataPool.fetchTreeData();
			console.log(this.TreeDataPool.selectedNode);
			message: "摄像机信息修改成功！"
			})
			this.TreeDataPool.fetchTreeData()
			//_this.$root.$children[0].$refs['leftTree'].$refs.tree.ztreeObj.checkNode(_this.TreeDataPool.selectedNode, true, false, false);
			//选中修改后的节点
			let { evt, treeId } =
			_this.$root.$children[0].$refs["leftTree"].$refs.tree;
			console.log(evt, treeId);
			// let { evt, treeId } =
			// _this.$root.$children[0].$refs["leftTree"].$refs.tree;
			// console.log(evt, treeId);
			// this.$nextTick(()=>{
			//_this.$root.$children[0].$refs['leftTree'].$refs.tree.handleCreated()
			// })
			} else {
			this.selectCamera(this.TreeDataPool.selectedNode);
			this.selectCamera(this.TreeDataPool.selectedNode)
			this.$notify({
			type: "error",
			message: "摄像机信息修改失败！",
			});
			message: "摄像机信息修改失败！"
			})
			}
			})
			.catch((err) => {
			this.$notify({
			type: "error",
			message: err.msg,
			});
			});
			message: err.msg
			})
			})
			} else {
			this.form.areaid = this.addParentId;
			this.form.areaid = this.addParentId
			createCamera(this.form)
			.then((rsp) => {
			if (rsp.success) {
			this.$notify({
			type: "success",
			message: "摄像机添加成功！",
			});
			this.TreeDataPool.selectedNode = rsp.data;
			this.TreeDataPool.fetchTreeData();
			message: "摄像机添加成功！"
			})
			this.TreeDataPool.selectedNode = rsp.data
			this.TreeDataPool.fetchTreeData()
			// 后端返回结果为0，查询后为4
			this.TreeDataPool.selectedNode.type = "4";
			this.selectCamera(this.TreeDataPool.selectedNode);
			this.TreeDataPool.selectedNode.type = "4"
			this.selectCamera(this.TreeDataPool.selectedNode)
			} else {
			this.$notify({
			type: "error",
			message: "摄像机添加失败！",
			});
			message: "摄像机添加失败！"
			})
			}
			})
			.catch((err) => {
			this.$notify({
			type: "error",
			message: err.msg,
			});
			});
			message: err.msg
			})
			})
			}
			}
			});
			})
			},
			// 连接测试
			cameraConnet() {
			this.videoItem = null;
			this.videoItem = null
			this.$nextTick(() => {
			this.videoItem = {
			name: this.form.name,
			rtsp: this.form.rtsp,
			id: this.form.id,
			isRunning: this.form.run_enable,
			cameraType: this.form.type,
			};
			});
			cameraType: this.form.type
			}
			})
			},
			// * 验证必选项
			verifyRequrie() {
			if (this.isGb28182) {
			return true;
			return true
			}
			// const rtspReg = /^(rtsp:\/\/)([a-zA-Z0-9_]+):([a-zA-Z0-9_]+)@(?:(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?):([0-9]\|[1-9]\d{1,3}\|[1-5]\d{4}\|6[0-4]\d{4}\|65[0-4]\d{2}\|655[0-2]\d\|6553[0-5])(\/)([a-zA-Z0-9_/]+)$/;
			// !rtspReg.test(this.form.rtsp
			@@ -578,36 +481,36 @@
			if (this.form.rtsp === "") {
			this.$notify({
			type: "warning",
			message: "请输入正确的rtsp地址",
			});
			return false;
			message: "请输入正确的rtsp地址"
			})
			return false
			}
			return true;
			return true
			},
			// 删除摄像机
			deleteCamera() {
			this.$confirm("是否删除此摄像机？", {
			center: true,
			cancelButtonClass: "comfirm-class-cancle",
			confirmButtonClass: "comfirm-class-sure",
			confirmButtonClass: "comfirm-class-sure"
			}).then(() => {
			delCamera(this.form.id).then((res) => {
			if (res.success) {
			this.initFormData();
			this.initFormData()
			this.$notify({
			type: "success",
			message: "删除成功！",
			});
			this.TreeDataPool.fetchTreeData();
			this.TreeDataPool.selectedNode = {};
			message: "删除成功！"
			})
			this.TreeDataPool.fetchTreeData()
			this.TreeDataPool.selectedNode = {}
			} else {
			this.$notify({
			type: "error",
			message: "删除失败！",
			});
			message: "删除失败！"
			})
			}
			});
			});
			})
			})
			},
			// 清空输入框
			initFormData() {
			@@ -629,32 +532,31 @@
			password: "",
			resolution: "",
			voiceId: "",
			voiceEnable: false,
			};
			voiceEnable: false
			}
			},
			// 添加设备
			addDevice(node) {
			console.log("1111");
			this.isAdd = true;
			this.addParentId = node;
			this.isAdd = true
			this.addParentId = node
			this.resolutionList = [
			{
			label: "本机分辨率",
			value: "0*0",
			value: "0*0"
			},
			{
			label: "1920*1080",
			value: "1920*1080",
			value: "1920*1080"
			},
			{
			label: "2688*1520",
			value: "2688*1520",
			},
			];
			this.initFormData();
			},
			},
			};
			value: "2688*1520"
			}
			]
			this.initFormData()
			}
			}
			}
			</script>

			<style lang="scss">
			@@ -706,4 +608,4 @@
			height: 450px;
			}
			}
			</style>
			</style>

			@@ -15,11 +15,7 @@
			</span>
			</div>

			<div
			v-if="Camera.analytics && isShowPolling === 'show'"
			class="flex-box"
			v-show="cameraType === 'camera'"
			>
			<div v-if="Camera.analytics && isShowPolling === 'show'" class="flex-box" v-show="cameraType === 'camera'">
			<span class="label">处理方式</span>
			<toggle-button
			:value="Camera.dealWay"
			@@ -28,29 +24,20 @@
			:color="{
			checked: '#3D68E1',
			unchecked: '#FF7733',
			disabled: '#CCCCCC',
			disabled: '#CCCCCC'
			}"
			:sync="true"
			@change="changePoll"
			/>
			</div>
			<div
			v-if="Camera.analytics"
			class="flex-box"
			v-show="cameraType === 'camera'"
			>
			<div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
			<span class="label">处理状态: {{ camStatus }}</span>
			</div>
			<div
			v-if="Camera.analytics"
			class="flex-box"
			v-show="cameraType === 'camera'"
			>
			<div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
			<span class="label"
			>分辨率:
			{{
			Camera.camearInfo.resolution_width == 0 \|\|
			Camera.camearInfo.resolution_height == 0
			Camera.camearInfo.resolution_width == 0 \|\| Camera.camearInfo.resolution_height == 0
			? "本机分辨率"
			: `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}`
			}}</span
			@@ -64,12 +51,7 @@
			<div v-if="Camera.analytics" class="flex-box">
			<span class="label">算法快速通道</span>
			<div class="channel flex-box">
			<el-tooltip
			effect="dark"
			content="复制此摄像机算法规则"
			placement="bottom"
			popper-class="atooltip"
			>
			<el-tooltip effect="dark" content="复制此摄像机算法规则" placement="bottom" popper-class="atooltip">
			<span
			style="color: #3d68e1; cursor: pointer; font-size: 23px"
			@click="ctrlC"
			@@ -79,9 +61,7 @@
			<el-tooltip
			effect="dark"
			:content="
			!TreeDataPool.ctrlCameraId
			? '粘贴算法规则'
			: `粘贴算法规则，来源：${TreeDataPool.ctrlCameraName}`
			!TreeDataPool.ctrlCameraId ? '粘贴算法规则' : `粘贴算法规则，来源：${TreeDataPool.ctrlCameraName}`
			"
			placement="bottom"
			popper-class="atooltip"
			@@ -128,19 +108,13 @@
			<div class="draw-box">
			<div class="draw-box-title">
			<b style="font-size: 14px">绘制区域</b>
			<span
			class="el-dropdown-link"
			@click="drawBaseImg"
			style="position: relative; top: 5px; cursor: pointer"
			>
			<span class="el-dropdown-link" @click="drawBaseImg" style="position: relative; top: 5px; cursor: pointer">
			<i class="iconfont iconbianji1" style="font-size: 28px"></i>
			</span>
			</div>
			<div style="width: 590px; height: 16px">
			<b style="font-size: 14px">{{
			Camera.camearInfo.alias
			? Camera.camearInfo.alias
			: Camera.camearInfo.name
			Camera.camearInfo.alias ? Camera.camearInfo.alias : Camera.camearInfo.name
			}}</b>
			</div>
			<div class="img-box">
			@@ -176,16 +150,9 @@
			class="swiper-box-container2"
			style="width: 100%"
			>
			<swiper-slide
			v-for="(data, index) in swipercanvasData"
			:key="index"
			>
			<swiper-slide v-for="(data, index) in swipercanvasData" :key="index">
			<div>
			<b
			class="video-title"
			style="font-size: 14px; margin-top: -10px"
			>{{ data.name }}</b
			>
			<b class="video-title" style="font-size: 14px; margin-top: -10px">{{ data.name }}</b>
			<polygon-canvas
			class="cavas"
			ref="canvas"
			@@ -209,20 +176,12 @@
			</div>
			</swiper-slide>
			</swiper>
			<div
			class="swiper-local-prev"
			v-show="swipercanvasData.length > 1"
			@click="prevClick"
			>
			<div class="swiper-local-prev" v-show="swipercanvasData.length > 1" @click="prevClick">
			<div class="icon-btn" slot="button-prev">
			<i class="iconfont iconzuo"></i>
			</div>
			</div>
			<div
			class="swiper-local-next"
			v-show="swipercanvasData.length > 1"
			@click="nextClick"
			>
			<div class="swiper-local-next" v-show="swipercanvasData.length > 1" @click="nextClick">
			<div class="icon-btn" slot="button-next">
			<i class="iconfont iconyou1"></i>
			</div>
			@@ -260,21 +219,22 @@
			</template>

			<script>
			import { savePolygon } from "@/api/polygon";
			import { savePolygon } from "@/api/polygon"

			import { pasteRules } from "@/api/task";
			import { getCameraInfo } from "@/api/camera";
			import { saveCameraScene } from "@/api/scene";
			import { pasteRules } from "@/api/task"
			import { getCameraInfo } from "@/api/camera"
			import { getGB28181CameraInfo } from "@/api/camera"
			import { saveCameraScene } from "@/api/scene"

			import { changeRunType } from "@/api/pollConfig";
			import { findAllFileByStackId } from "@/api/localVedio";
			import VideoRuleData from "@/Pool/VideoRuleData";
			import { changeRunType } from "@/api/pollConfig"
			import { findAllFileByStackId } from "@/api/localVedio"
			import VideoRuleData from "@/Pool/VideoRuleData"

			import TimeSlider from "./TimeSlider";
			import polygonCanvas from "@/components/canvas";
			import Sysinfo from "@/components/subComponents/SystemInfo";
			import SceneRule from "./SceneRule";
			import SlideScene from "./scene/SlideScene";
			import TimeSlider from "./TimeSlider"
			import polygonCanvas from "@/components/canvas"
			import Sysinfo from "@/components/subComponents/SystemInfo"
			import SceneRule from "./SceneRule"
			import SlideScene from "./scene/SlideScene"

			export default {
			components: {
			@@ -282,21 +242,19 @@
			polygonCanvas,
			Sysinfo,
			SceneRule,
			SlideScene,
			SlideScene
			},
			directives: {
			focus: {
			inserted: function (el) {
			el.querySelector("input").focus();
			},
			},
			inserted: function(el) {
			el.querySelector("input").focus()
			}
			}
			},
			computed: {
			cameraType() {
			return this.TreeDataPool.treeActiveName === "camera"
			? "camera"
			: "dataStack";
			},
			return this.TreeDataPool.treeActiveName === "camera" ? "camera" : "dataStack"
			}
			},
			data() {
			return {
			@@ -310,12 +268,12 @@
			grabCursor: true,
			pagination: {
			el: ".swiper-pagination",
			type: "fraction",
			type: "fraction"
			},
			navigation: {
			nextEl: ".swiper-local-next",
			prevEl: ".swiper-local-prev",
			},
			prevEl: ".swiper-local-prev"
			}
			},
			tableRuleList: [],
			camStatus: "",
			@@ -328,336 +286,335 @@
			swiperIndex: 0,
			swipercanvasData: [],
			stackFilesPage: 1,
			stackFilesSize: 5,
			};
			stackFilesSize: 5
			}
			},
			mounted() {
			this.PollData.statistics();
			this.PollData.statistics()
			},
			watch: {
			"Camera.cameraId": {
			handler(n, o) {
			if (n) {
			if (this.TreeDataPool.treeActiveName == "dataStack") {
			this.stackFilesPage = 1;
			this.stackFilesSize = 5;
			this.stackId = n;
			this.stackFilesPage = 1
			this.stackFilesSize = 5
			this.stackId = n
			if (this.stackId) {
			this.swipercanvasData = [];
			this.getStackFiles();
			this.swipercanvasData = []
			this.getStackFiles()
			}
			}
			}
			},
			},
			}
			}
			},
			methods: {
			getStatus() {
			getCameraInfo(this.Camera.cameraId).then((res) => {
			let refreshCameraInfo = getCameraInfo
			if (this.Camera.gb28181) {
			refreshCameraInfo = getGB28181CameraInfo
			}
			refreshCameraInfo(this.Camera.cameraId).then((res) => {
			if (res.success) {
			switch (res.data.status) {
			case 0:
			this.camStatus = "未配规则";
			return;
			this.camStatus = "未配规则"
			return
			case 1:
			this.camStatus = "等待轮询处理";
			return;
			this.camStatus = "等待轮询处理"
			return
			case 2:
			this.camStatus = "正在执行分析处理";
			return;
			this.camStatus = "正在执行分析处理"
			return
			case -1:
			this.camStatus = "其他情况导致未处理";
			return;
			this.camStatus = "其他情况导致未处理"
			return
			case -2:
			this.camStatus = "故障导致未处理";
			return;
			this.camStatus = "故障导致未处理"
			return
			}
			}
			});
			})
			},
			prevClick() {
			if (this.swiperIndex == 0) {
			if (this.stackFilesPage > 1) {
			this.stackFilesPage--;
			this.getStackFiles(true);
			this.stackFilesPage--
			this.getStackFiles(true)
			} else {
			this.$message({
			type: "info",
			message: "当前已是第一页",
			});
			message: "当前已是第一页"
			})
			}
			}
			},
			nextClick() {
			if (this.swiperIndex == this.swipercanvasData.length - 1) {
			this.stackFilesPage++;
			this.getStackFiles(true);
			this.stackFilesPage++
			this.getStackFiles(true)
			}
			},
			getStackFiles(onClick = false) {
			this.getStackFileLoading = true;
			let _this = this;
			this.getStackFileLoading = true
			let _this = this
			findAllFileByStackId({
			name: "",
			stackId: this.stackId,
			page: this.stackFilesPage,
			size: this.stackFilesSize,
			type: 0,
			type: 0
			})
			.then((res) => {
			if (res && res.success) {
			if (res.data.dataList.length > 0) {
			this.swipercanvasData = [];
			this.swipercanvasData = []
			this.swipercanvasData = res.data.dataList.map((item) => {
			return {
			name: item.name,
			stackId: item.stack_id,
			baseImg:
			item.type == 2
			? `/files/${item.path.substr(
			item.path.lastIndexOf("/") + 1
			)}`
			: item.snapshot_url,
			item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf("/") + 1)}` : item.snapshot_url,
			type: item.type,
			id: item.id,
			loading: false,
			};
			});
			this.swiperIndex = 0;
			this.$refs.swiper.swiper.activeIndex = 0;
			loading: false
			}
			})
			this.swiperIndex = 0
			this.$refs.swiper.swiper.activeIndex = 0
			} else {
			if (onClick) {
			this.$message({
			type: "warning",
			message: "已无更多数据!",
			});
			message: "已无更多数据!"
			})
			}
			}
			} else {
			this.$message({
			type: "error",
			message: "数据请求失败,请稍后重试!",
			});
			message: "数据请求失败,请稍后重试!"
			})
			}
			this.getStackFileLoading = false;
			this.getStackFileLoading = false
			})
			.catch((e) => {
			this.getStackFileLoading = false;
			});
			this.getStackFileLoading = false
			})
			},
			swiperSlideChange() {
			this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
			this.swiperIndex = this.$refs.swiper.swiper.activeIndex
			},
			drawBaseImg() {
			if (!this.Camera.cameraId) {
			this.$notify({
			type: "warning",
			message: "请先选择摄像机",
			});
			return;
			message: "请先选择摄像机"
			})
			return
			}
			if (Array.isArray(this.$refs.canvas)) {
			if (this.$refs.canvas.length > 0) {
			this.$refs.canvas[0].showModal();
			this.$refs.canvas[0].showModal()
			}
			} else {
			this.$refs.canvas.showModal();
			this.$refs.canvas.showModal()
			}
			},
			getCanvasData(data) {
			let polyon = { ...data };
			polyon.camera_id = this.Camera.cameraId;
			let polyon = { ...data }
			polyon.camera_id = this.Camera.cameraId
			savePolygon(polyon).then((rsp) => {
			this.Camera.getPolygon();
			this.Camera.getPolygon()
			//this.Camera.getCameraTask();
			});
			})
			},
			refresh(url) {
			this.Camera.baseImg = url;
			this.Camera.baseImg = url
			},
			// 初始化摄像机信息，父组件调用
			async initCameraData(id, type) {
			this.Camera = new VideoRuleData();
			this.Camera = new VideoRuleData()

			if (id && id !== "") {
			this.loading = false;
			this.Camera.cameraId = id;
			this.Camera.gb28181 = type === 1;
			this.loading = false
			this.Camera.cameraId = id
			this.Camera.gb28181 = type === 1
			if (type === 1) {
			await this.Camera.update(true);
			await this.Camera.update(true)
			} else {
			await this.Camera.update();
			await this.Camera.update()
			}
			}

			this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
			this.showSysInfo = true;
			this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id
			this.showSysInfo = true
			// 判断正在执行实时或者轮询任务
			this.PollData.CameraList.forEach((element) => {
			if (element.id === this.Camera.cameraId) {
			this.runType = element.run_type;
			this.runType = element.run_type
			}
			});
			})
			},

			saveSceneRule(groupRule) {
			const payload = { ...groupRule };
			payload.cameraIds = [this.Camera.cameraId];
			let _this = this;
			const payload = { ...groupRule }
			payload.cameraIds = [this.Camera.cameraId]
			let _this = this
			saveCameraScene(payload).then((rsp) => {
			if (rsp && rsp.success) {
			this.Camera.update();
			this.Camera.update()
			this.$notify({
			type: "success",
			message: "策略保存成功！",
			});
			message: "策略保存成功！"
			})
			//刷新左侧树

			_this.$root.$children[0].$children[0].querySearchAsync("camera");
			_this.$root.$children[0].$children[0].querySearchAsync("camera")
			}
			});
			})
			},
			delScenRule() {
			this.Camera.update();
			this.Camera.update()
			},
			changeLoading(params) {
			this.loading = params;
			this.loading = params
			},
			//是否进行视频分析处理
			pollEnable(row) {
			let val = 0;
			let val = 0
			if (row) {
			if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
			this.Camera.dealWay = true;
			val = 1;
			this.Camera.dealWay = true
			val = 1
			} else {
			this.Camera.dealWay = false;
			val = 0;
			this.Camera.dealWay = false
			val = 0
			}
			} else {
			this.Camera.dealWay = false;
			val = -1;
			this.Camera.dealWay = false
			val = -1
			}
			if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
			changeRunType({
			camera_ids: [this.Camera.cameraId],
			run_type: val,
			isGb: this.Camera.gb28181
			}).then((rsp) => {
			this.getStatus();
			this.getStatus()
			if (rsp && rsp.success) {
			this.$notify({
			type: "success",
			message: "配置成功",
			});
			message: "配置成功"
			})
			} else {
			this.$notify({
			type: "error",
			message: "配置失败",
			});
			message: "配置失败"
			})
			}
			this.TreeDataPool.fetchTreeData();
			});
			this.TreeDataPool.fetchTreeData()
			})
			}
			this.PollData.statisticTaskInfo();
			this.PollData.statisticTaskInfo()
			},
			//实时、轮询切换
			changePoll(row) {
			//判断是新增还是更新
			debugger;
			if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
			if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
			if (row.value) {
			this.Camera.dealWay = true;
			this.Camera.dealWay = true
			} else {
			this.Camera.dealWay = false;
			this.Camera.dealWay = false
			}
			debugger;
			changeRunType({
			camera_ids: [this.Camera.cameraId],
			run_type: this.Camera.dealWay ? 1 : 0,
			isGb: this.Camera.gb28181
			}).then((rsp) => {
			if (rsp && rsp.success) {
			this.$notify({
			type: "success",
			message: "配置成功",
			});
			message: "配置成功"
			})
			} else {
			this.$notify({
			type: "error",
			message: "配置失败",
			});
			message: "配置失败"
			})
			}
			});
			})
			} else {
			if (this.Camera.dealWay) {
			this.Camera.dealWay = false;
			debugger;
			this.Camera.dealWay = false
			changeRunType({
			camera_ids: [this.Camera.cameraId],
			run_type: this.Camera.dealWay ? 1 : 0,
			run_type: this.Camera.dealWay ? 1 : 0
			}).then((rsp) => {
			if (rsp && rsp.success) {
			this.$notify({
			type: "success",
			message: "配置成功",
			});
			message: "配置成功"
			})
			} else {
			this.$notify({
			type: "error",
			message: "配置失败",
			});
			message: "配置失败"
			})
			}
			});
			})
			}
			}
			this.TreeDataPool.fetchTreeData();
			this.PollData.statisticTaskInfo();
			this.TreeDataPool.fetchTreeData()
			this.PollData.statisticTaskInfo()
			}
			},
			//复制
			ctrlC() {
			this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
			this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
			this.TreeDataPool.ctrlCameraId = this.Camera.cameraId
			this.TreeDataPool.ctrlCameraName = this.Camera.cameraName
			this.$notify({
			type: "success",
			message: "复制算法成功！",
			});
			message: "复制算法成功！"
			})
			},
			ctrlV() {
			if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
			this.$notify({
			type: "warning",
			message: "不能粘贴本摄像机的算法到本摄像机！",
			});
			return false;
			message: "不能粘贴本摄像机的算法到本摄像机！"
			})
			return false
			}
			pasteRules({
			sourceId: this.TreeDataPool.ctrlCameraId,
			targetIds: [this.Camera.cameraId],
			targetIds: [this.Camera.cameraId]
			})
			.then((res) => {
			if (res && res.success) {
			this.$notify({
			type: "success",
			message: "粘贴算法成功！",
			});
			this.initCameraData(this.Camera.cameraId);
			message: "粘贴算法成功！"
			})
			this.initCameraData(this.Camera.cameraId)
			} else {
			this.$notify({
			type: "error",
			message: "粘贴算法失败！",
			});
			message: "粘贴算法失败！"
			})
			}
			})
			.catch((err) => {
			this.$notify({
			type: "error",
			message: "粘贴算法失败！",
			});
			});
			},
			},
			};
			message: "粘贴算法失败！"
			})
			})
			}
			}
			}
			</script>
			<style lang="scss">
			.el-message--info .el-message__content {