From a3f357e8a60443b74b64c7479113c68eb35ce1f5 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期五, 15 七月 2022 19:44:57 +0800
Subject: [PATCH] 控制轮询
---
src/components/canvas/index.vue | 234 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 172 insertions(+), 62 deletions(-)
diff --git a/src/components/canvas/index.vue b/src/components/canvas/index.vue
index ba2e0d7..a34a12d 100644
--- a/src/components/canvas/index.vue
+++ b/src/components/canvas/index.vue
@@ -1,16 +1,26 @@
<template>
- <div class="s-cavas">
+ <div
+ class="s-cavas"
+ :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+ >
<canvas
ref="myCanvas"
:width="canvasWidth"
:height="canvasHeight"
- :style="`background:url(${snapshot_url ? `/httpImage/${snapshot_url}` : blackImg}) 100% 100% / 576px 324px; 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">
+ <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>
+ <p class="tip" :style="disabled ? `display:block;` : `display:none;`">
+ 鎵归噺閰嶇疆鏂瑰紡涓嶅厑璁哥粯鍒跺尯鍩燂紝璇烽�夋嫨鎽勫儚鏈鸿繘琛屽尯鍩熺粯鍒�
+ </p>
<el-dialog
title
:visible.sync="visible"
@@ -21,12 +31,14 @@
<canvas-dialog
ref="bigCanvas"
:canvasDataToChild="canvasData"
- :snapshot_url="snapshot_url"
+ :snapshot_url="canvasBg"
@refresh="refresh"
></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>
@@ -37,64 +49,94 @@
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,
+ },
+ sourceType: {
+ default: 1,
+ type: Number,
},
isShowDrawArrow: {
default: false,
- type: Boolean
+ type: Boolean,
},
disabled: {
default: false,
- type: Boolean
+ type: Boolean,
},
canvasDataShow: {
default: () => {
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,
+ },
+ },
+ computed: {
+ canvasBg() {
+ if (this.snapshot_url) {
+ // 鏁版嵁鏍堣嚜鍔ㄤ笂浼犲鐞�
+ if (this.snapshot_url.indexOf("/opt/vasystem") == 0) {
+ return this.snapshot_url.replace("/opt/vasystem", "");
+ }
+
+ if (this.sourceType == 2) {
+ return `${this.snapshot_url}`;
+ } else {
+ return `/httpImage/${this.snapshot_url}`;
+ }
+ } else {
+ return this.blackImg;
+ }
+ },
},
data() {
return {
- blackImg: require("../../assets/baseimg.png"),
+ blackImg: require("../../assets/img/baseimg.png"),
canvasData: {
line: [],
rect: [],
arrow: [],
- polygon: []
+ polygon: [],
}, // 鏈�缁堣緭鍑虹殑鐢诲竷鍧愭爣鏁版嵁
canvasPic: new Image(), // 鎾ら攢鐢ㄧ殑鍥剧墖
canvasHistory: [], // 鍘嗗彶鏁版嵁锛屼互渚涙挙閿�浣跨敤
@@ -103,7 +145,7 @@
ctx: null,
visible: false,
baseImg: undefined,
- showProportion: 1.71
+ //showProportion: 1.666
};
},
watch: {
@@ -115,7 +157,7 @@
this.refresh();
}
},
- deep: true
+ deep: true,
},
canvasDataShow: {
handler(newVal, oldVal) {
@@ -126,8 +168,8 @@
this.canvasData.polygon = newVal.polygon;
this.clickSelect(this.canvasData);
},
- deep: true
- }
+ deep: true,
+ },
},
mounted() {
this.$nextTick(() => {
@@ -141,28 +183,36 @@
methods: {
// 鑾峰彇canvas搴曞浘
async getCanvasPic() {
+ if (TreeDataPool.selectedNode.type == "MENU") {
+ return;
+ }
// this.$emit('changeBaseImg',this.currentCameraId)
- this.$emit('changeLoading', true)
+ this.$emit("changeLoading", true);
if (this.currentCameraId) {
- await updateSnapshot(this.currentCameraId)
- .then(res => {
- if (res.data.cameraId === this.currentCameraId) {
+ 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.$forceUpdate()
+ this.$emit(
+ "refresh",
+ res.data.snapshotUrl,
+ _this.currentCameraId
+ );
+ this.$forceUpdate();
this.$notify({
type: "success",
- message: "搴曞浘宸插埛鏂�"
+ message: "搴曞浘宸插埛鏂�",
});
}
})
- .catch(err => {
+ .catch((err) => {
this.$notify({
type: "error",
- message: "搴曞浘鍒锋柊澶辫触"
+ message: "搴曞浘鍒锋柊澶辫触",
});
});
- this.$emit('changeLoading', false)
+ this.$emit("changeLoading", false);
}
},
showModal() {
@@ -170,34 +220,35 @@
this.visible = true;
this.$nextTick(() => {
// this.$refs.bigCanvas.delCursor = {}
- })
+ });
},
cancelFunc() {
this.visible = false;
- this.$refs.bigCanvas.cancel()
+ this.$refs.bigCanvas.cancel();
// console.log("鍏抽棴浜�");
},
handleOk() {
// 鍒ゆ柇鍥惧舰鐨勫悕瀛楁槸鍚﹂噸澶�
// console.log("ok");
- this.$refs.bigCanvas.changeType('0')
+ this.$refs.bigCanvas.changeType("0");
let repeatName = this.isRepeat();
if (repeatName !== "") {
this.$notify({
type: "error",
- message: repeatName + "鍥惧舰鍚嶇О閲嶅锛岃鏇存锛�"
+ message: repeatName + "鍥惧舰鍚嶇О閲嶅锛岃鏇存锛�",
});
return;
}
this.$notify({
type: "success",
- message: "宸蹭繚瀛樼粯鍒讹紒"
+ message: "宸蹭繚瀛樼粯鍒讹紒",
});
// 姣忔淇濆瓨鍏抽棴妯℃�佺獥鏃堕兘瑕佹妸妯℃�佺獥鐨勬暟鎹啓鍒扮埗缁勪欢閲屾潵
this.canvasData = this.$refs.bigCanvas.canvasData;
// 椤轰究鐢╁埌鏇村灞傚幓
this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData);
// console.log("浣犲ソ", this.canvasData);
+
this.clickSelect(this.canvasData);
this.visible = false;
},
@@ -209,8 +260,14 @@
_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.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,
@@ -228,8 +285,14 @@
// 灏嗗綋鍓嶅厓绱犳爣绾�
_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.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,
@@ -242,11 +305,26 @@
_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.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,
@@ -263,11 +341,26 @@
// 灏嗗綋鍓嶅厓绱犳爣绾�
_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.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,
@@ -336,9 +429,15 @@
}
_this.ctx.strokeStyle = "yellow";
_this.ctx.beginPath();
- _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
+ _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();
@@ -358,9 +457,15 @@
// 灏嗗綋鍓嶅厓绱犳爣绾�
_this.ctx.strokeStyle = "red";
_this.ctx.beginPath();
- _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
+ _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();
@@ -468,14 +573,19 @@
nameArray.push(v.name);
}
return "";
- }
- }
+ },
+ },
};
</script>
<style lang="scss" scoped>
+canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
.s-cavas {
- width: 576px;
- height: 324px;
+ // width: 576px;
+ // height: 324px;
margin-top: 10px;
position: relative;
overflow: auto;
--
Gitblit v1.8.0