| src/components/canvas/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/subComponents/CardItem.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/hashrate/CameraManage/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/search/components/imgDown.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/search/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/components/canvas/index.vue
@@ -1,32 +1,21 @@ <template> <div class="s-cavas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" > <div class="s-cavas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"> <canvas ref="myCanvas" :width="canvasWidth" :height="canvasHeight" :style="`background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;`" :style=" `background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;` " ></canvas> <el-tooltip content="刷新底图" placement="bottom" popper-class="atooltip" v-if="isShowRefresh" > <el-tooltip content="刷新底图" placement="bottom" popper-class="atooltip" v-if="isShowRefresh"> <span class="iconfont icongengxin" @click="refresh"></span> </el-tooltip> <p class="tip" :style="disabled ? `display:block;` : `display:none;`"> 批量配置方式不允许绘制区域，请选择摄像机进行区域绘制 </p> <el-dialog :visible.sync="visible" width="1150px" append-to-body :before-close="cancelFunc" > <el-dialog :visible.sync="visible" width="1150px" append-to-body :before-close="cancelFunc"> <canvas-dialog ref="bigCanvas" :canvasDataToChild="canvasData" @@ -41,94 +30,94 @@ </div> </template> <script> import canvasDialog from "./Dialog"; import { updateSnapshot, updategb28181 } from "@/api/camera"; import canvasDialog from "./Dialog" import { updateSnapshot, updategb28181 } from "@/api/camera" export default { name: "myCanvas", components: { canvasDialog, canvasDialog }, props: { divId: { default: "my-canvas", type: String, type: String }, isGB28181: { default: false, type: Boolean, type: Boolean }, isShowRefresh: { default: true, type: Boolean, type: Boolean }, sourceType: { default: 1, type: Number, type: Number }, isShowDrawArrow: { default: false, type: Boolean, type: Boolean }, disabled: { default: false, type: Boolean, type: Boolean }, canvasDataShow: { default: () => { return { line: [], rect: [], arrow: [], polygon: [] }; return { line: [], rect: [], arrow: [], polygon: [] } }, type: Object, type: Object }, currentCamera: { type: Object, type: Object }, snapshot_url: { type: String, default: "", default: "" }, isLink: { type: Boolean, default: false, default: false }, loading: { type: Boolean, default: false, default: false }, canvasWidth: { type: Number, default: 576, default: 576 }, canvasHeight: { type: Number, default: 324, default: 324 }, showProportion: { type: Number, default: 1.666, }, default: 1.666 } }, computed: { canvasBg() { if (this.snapshot_url) { // 数据栈自动上传处理 if (this.snapshot_url.indexOf("/opt/vasystem") == 0) { return this.snapshot_url.replace("/opt/vasystem", ""); return this.snapshot_url.replace("/opt/vasystem", "") } if (this.snapshot_url.indexOf("data:image/png;base64,") != -1) { return `${this.snapshot_url}`; return `${this.snapshot_url}` } if (this.sourceType == 2) { return `${this.snapshot_url}`; return `${this.snapshot_url}` } else { console.log(this.snapshot_url); return `http://${this.snapshot_url}`; console.log(this.snapshot_url) return `/httpImage/${this.snapshot_url}` } } else { return this.blackImg; return this.blackImg } }, } }, data() { return { @@ -137,7 +126,7 @@ line: [], rect: [], arrow: [], polygon: [], polygon: [] }, // 最终输出的画布坐标数据 canvasPic: new Image(), // 撤销用的图片 canvasHistory: [], // 历史数据，以供撤销使用 @@ -145,254 +134,188 @@ c: null, ctx: null, visible: false, baseImg: undefined, baseImg: undefined //showProportion: 1.666 }; } }, watch: { loading: { handler(newVal, oldVal) { if (newVal) { this.baseImg = ""; this.refresh(); this.baseImg = "" this.refresh() } }, deep: true, deep: true }, canvasDataShow: { handler(newVal, oldVal) { // console.log(newVal, "canvasDataShow newVal"); this.canvasData.line = newVal.line; this.canvasData.rect = newVal.rect; this.canvasData.arrow = newVal.arrow; this.canvasData.polygon = newVal.polygon; this.clickSelect(this.canvasData); this.canvasData.line = newVal.line this.canvasData.rect = newVal.rect this.canvasData.arrow = newVal.arrow this.canvasData.polygon = newVal.polygon this.clickSelect(this.canvasData) }, deep: true, }, deep: true } }, mounted() { this.$nextTick(() => { // this.c = document.querySelector("#" + this.divId); this.c = this.$refs.myCanvas; this.ctx = this.c.getContext("2d"); this.canvasData = JSON.parse(JSON.stringify(this.canvasDataShow)); this.clickSelect(this.canvasData); }); this.c = this.$refs.myCanvas this.ctx = this.c.getContext("2d") this.canvasData = JSON.parse(JSON.stringify(this.canvasDataShow)) this.clickSelect(this.canvasData) }) }, methods: { // 获取canvas底图 async getCanvasPic() { // this.$emit('changeBaseImg',this.currentCameraId) this.$emit("changeLoading", true); this.$emit("changeLoading", true) if (this.currentCamera.cameraId) { let _this = this; let _this = this if (_this.currentCamera.type === 1) { await updategb28181({ id: _this.currentCamera.cameraId, id: _this.currentCamera.cameraId }).then((res) => { if (res.data.cameraId === _this.currentCamera.cameraId) { _this.baseImg = "data:image/png;base64," + res.data.base64; _this.$emit( "refresh", _this.baseImg, _this.currentCamera.cameraName ); _this.$forceUpdate(); _this.baseImg = "data:image/png;base64," + res.data.base64 _this.$emit("refresh", _this.baseImg, _this.currentCamera.cameraName) _this.$forceUpdate() _this.$notify({ type: "success", message: "底图已刷新", }); message: "底图已刷新" }) } }); }) this.$emit("changeLoading", false); this.$emit("changeLoading", false) return; return } await updateSnapshot({ id: _this.currentCamera.cameraId, name: _this.currentCamera.cameraName, type: _this.currentCamera.type, rtsp: _this.currentCamera.rtsp, rtsp: _this.currentCamera.rtsp }).then((res) => { if (res.data.cameraId === _this.currentCamera.cameraId) { _this.baseImg = "data:image/png;base64," + res.data.base64; _this.$emit( "refresh", _this.baseImg, _this.currentCamera.cameraName ); _this.$forceUpdate(); _this.baseImg = "data:image/png;base64," + res.data.base64 _this.$emit("refresh", _this.baseImg, _this.currentCamera.cameraName) _this.$forceUpdate() _this.$notify({ type: "success", message: "底图已刷新", }); message: "底图已刷新" }) } }); }) this.$emit("changeLoading", false); this.$emit("changeLoading", false) } }, showModal() { // console.log(this.canvasData, "点击绘制的时候传递过去的数据"); this.visible = true; this.visible = true this.$nextTick(() => { // this.$refs.bigCanvas.delCursor = {} }); }) }, cancelFunc() { this.visible = false; this.$refs.bigCanvas.cancel(); this.visible = false this.$refs.bigCanvas.cancel() // console.log("关闭了"); }, handleOk() { // 判断图形的名字是否重复 // console.log("ok"); this.$refs.bigCanvas.changeType("0"); let repeatName = this.isRepeat(); this.$refs.bigCanvas.changeType("0") let repeatName = this.isRepeat() if (repeatName !== "") { this.$notify({ type: "error", message: repeatName + "图形名称重复，请更正！", }); return; message: repeatName + "图形名称重复，请更正！" }) return } this.$notify({ type: "success", message: "已保存绘制！", }); message: "已保存绘制！" }) // 每次保存关闭模态窗时都要把模态窗的数据写到父组件里来 this.canvasData = this.$refs.bigCanvas.canvasData; this.canvasData = this.$refs.bigCanvas.canvasData // 顺便甩到更外层去 this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData); this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData) // console.log("你好", this.canvasData); this.clickSelect(this.canvasData); this.visible = false; this.clickSelect(this.canvasData) this.visible = false }, // 回显cavas数据 // 点击选中变色 将当前页面所有路径重绘判断当前鼠标的坐标在哪个图形内 如果不传坐标参数就是回显的方法 clickSelect(e) { this.ctx.clearRect(0, 0, this.c.width, this.c.height); let _this = this; // 集合中遍历需要将this转存一下使用 this.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.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.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.ctx.strokeStyle = "yellow" // _this.ctx.beginPath() // _this.ctx.moveTo(v.location[0].x / 2, v.location[0].y / 2) // _this.ctx.lineTo(v.location[1].x / 2, v.location[1].y / 2) @@ -406,22 +329,18 @@ 20, 30, "yellow" ); // 绘制方法 _this.showRemarks( v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name ); _this.c.style.cursor = "default"; ) // 绘制方法 _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name) _this.c.style.cursor = "default" if (e && _this.ctx.isPointInStroke(e.offsetX, e.offsetY)) { // 如果传入了事件坐标，就用isPointInStroke判断一下 // 如果当前环境覆盖了该坐标，就将图形的index放到数组里 // 当鼠标移入之后将当前的模式切换为选中模式 _this.type = "0"; _this.delCursor.type = "4"; _this.delCursor.index = i; _this.type = "0" _this.delCursor.type = "4" _this.delCursor.index = i // 将当前元素标红 _this.ctx.strokeStyle = "red"; _this.ctx.strokeStyle = "red" // _this.ctx.beginPath() // _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion) // _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion) @@ -435,78 +354,62 @@ 20, 30, "red" ); // 绘制方法 _this.showRemarks( v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name ); _this.c.style.cursor = "pointer"; ) // 绘制方法 _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name) _this.c.style.cursor = "pointer" } }); }) _this.canvasData.polygon.forEach(function (v, i) { if (v.location.length === 0) { return; return } _this.ctx.strokeStyle = "yellow"; _this.ctx.beginPath(); _this.ctx.moveTo( v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion ); _this.ctx.strokeStyle = "yellow" _this.ctx.beginPath() _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion) for (let i = 1; i < v.location.length; i++) { _this.ctx.lineTo( v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion ); _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion) } _this.ctx.closePath(); _this.ctx.stroke(); _this.ctx.closePath() _this.ctx.stroke() _this.showRemarks( v.location[v.location.length - 1].x / _this.showProportion, v.location[v.location.length - 1].y / _this.showProportion, v.name ); _this.c.style.cursor = "default"; ) _this.c.style.cursor = "default" if (e && _this.ctx.isPointInPath(e.offsetX, e.offsetY)) { // 如果传入了事件坐标，就用isPointInStroke判断一下 // 如果当前环境覆盖了该坐标，就将图形的index放到数组里 // 当鼠标移入之后将当前的模式切换为选中模式 _this.type = "0"; _this.delCursor.type = "5"; _this.delCursor.index = i; _this.type = "0" _this.delCursor.type = "5" _this.delCursor.index = i // 将当前元素标红 _this.ctx.strokeStyle = "red"; _this.ctx.beginPath(); _this.ctx.moveTo( v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion ); _this.ctx.strokeStyle = "red" _this.ctx.beginPath() _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion) for (let i = 1; i < v.location.length; i++) { _this.ctx.lineTo( v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion ); _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion) } _this.ctx.closePath(); _this.ctx.stroke(); _this.ctx.closePath() _this.ctx.stroke() _this.showRemarks( v.location[v.location.length - 1].x / _this.showProportion, v.location[v.location.length - 1].y / _this.showProportion, v.name ); _this.c.style.cursor = "pointer"; ) _this.c.style.cursor = "pointer" } }); }) }, // 回显图形备注 showRemarks(x, y, remarks) { this.ctx.moveTo(x, y - 10); // 因为放大之后是y-20，所以缩小版的为y-10 this.ctx.fillStyle = "green"; // 设置填充颜色为绿色 this.ctx.font = '10px "微软雅黑"'; // 设置字体 this.ctx.textBaseline = "bottom"; // 设置字体底线对齐绘制基线 this.ctx.textAlign = "left"; // 设置字体对齐的方式 this.ctx.fillText(remarks, x, y - 10); // 填充文字 this.ctx.moveTo(x, y - 10) // 因为放大之后是y-20，所以缩小版的为y-10 this.ctx.fillStyle = "green" // 设置填充颜色为绿色 this.ctx.font = '10px "微软雅黑"' // 设置字体 this.ctx.textBaseline = "bottom" // 设置字体底线对齐绘制基线 this.ctx.textAlign = "left" // 设置字体对齐的方式 this.ctx.fillText(remarks, x, y - 10) // 填充文字 }, // 箭头绘制函数 drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) { @@ -517,87 +420,87 @@ // headlen：三角斜边长度 // width：箭头线宽度 // color：箭头颜色 theta = typeof theta !== "undefined" ? theta : 30; headlen = typeof theta !== "undefined" ? headlen : 10; width = typeof width !== "undefined" ? width : 1; color = typeof color !== "undefined" ? color : "yellow"; theta = typeof theta !== "undefined" ? theta : 30 headlen = typeof theta !== "undefined" ? headlen : 10 width = typeof width !== "undefined" ? width : 1 color = typeof color !== "undefined" ? color : "yellow" // 计算各角度和对应的P2,P3坐标 let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI; let angle1 = ((angle + theta) * Math.PI) / 180; let angle2 = ((angle - theta) * Math.PI) / 180; let topX = headlen * Math.cos(angle1); let topY = headlen * Math.sin(angle1); let botX = headlen * Math.cos(angle2); let botY = headlen * Math.sin(angle2); let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI let angle1 = ((angle + theta) * Math.PI) / 180 let angle2 = ((angle - theta) * Math.PI) / 180 let topX = headlen * Math.cos(angle1) let topY = headlen * Math.sin(angle1) let botX = headlen * Math.cos(angle2) let botY = headlen * Math.sin(angle2) ctx.save(); ctx.beginPath(); let arrowX = fromX - topX; let arrowY = fromY - topY; ctx.moveTo(arrowX, arrowY); ctx.moveTo(fromX, fromY); ctx.lineTo(toX, toY); arrowX = toX + topX; arrowY = toY + topY; ctx.moveTo(arrowX, arrowY); ctx.lineTo(toX, toY); arrowX = toX + botX; arrowY = toY + botY; ctx.lineTo(arrowX, arrowY); ctx.strokeStyle = color; ctx.lineWidth = width; ctx.stroke(); ctx.restore(); ctx.save() ctx.beginPath() let arrowX = fromX - topX let arrowY = fromY - topY ctx.moveTo(arrowX, arrowY) ctx.moveTo(fromX, fromY) ctx.lineTo(toX, toY) arrowX = toX + topX arrowY = toY + topY ctx.moveTo(arrowX, arrowY) ctx.lineTo(toX, toY) arrowX = toX + botX arrowY = toY + botY ctx.lineTo(arrowX, arrowY) ctx.strokeStyle = color ctx.lineWidth = width ctx.stroke() ctx.restore() }, async refresh() { console.log("刷新底图"); console.log("刷新底图") if (!this.currentCamera.cameraId) { console.log("没刷新"); return false; console.log("没刷新") return false } // await this.$emit('changeLoading', true) this.getCanvasPic(); this.getCanvasPic() }, // 判断图形名称是否重复 isRepeat() { let _this = this; // 集合中遍历需要将this转存一下使用 let nameArray = []; let _this = this // 集合中遍历需要将this转存一下使用 let nameArray = [] for (const v of _this.$refs.bigCanvas.canvasData.line) { for (const item of nameArray) { if (v.name === item) { return v.name; return v.name } } nameArray.push(v.name); nameArray.push(v.name) } for (const v of _this.$refs.bigCanvas.canvasData.arrow) { for (const item of nameArray) { if (v.name === item) { return v.name; return v.name } } nameArray.push(v.name); nameArray.push(v.name) } for (const v of _this.$refs.bigCanvas.canvasData.rect) { for (const item of nameArray) { if (v.name === item) { return v.name; return v.name } } nameArray.push(v.name); nameArray.push(v.name) } for (const v of _this.$refs.bigCanvas.canvasData.polygon) { for (const item of nameArray) { if (v.name === item) { return v.name; return v.name } } nameArray.push(v.name); nameArray.push(v.name) } return ""; }, }, }; return "" } } } </script> <style lang="scss" scoped> canvas { src/components/subComponents/CardItem.vue
@@ -20,15 +20,8 @@ indicator-position="none" :arrow="data.baseInfo.length > 1 ? 'always' : 'never'" > <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index" > <img :src="item.targetPicUrl | httpImage" class="cursor-pointer" @click="detailsClick($event)" /> <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index"> <img :src="item.targetPicUrl | httpImage" class="cursor-pointer" @click="detailsClick($event)" /> </el-carousel-item> </el-carousel> </div> @@ -36,7 +29,7 @@ class="s-card-left-isCompare-div compareScore111" :style="{ bottom: '0', background: getUrl(data.baseInfo[initialIndex].bwType), background: getUrl(data.baseInfo[initialIndex].bwType) }" > <b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b> @@ -55,22 +48,14 @@ :autoplay="false" @change="changeCarousel" > <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'" > <img :src="item | httpImage" class="cursor-pointer" @click="detailsClick($event)" /> <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'"> <img :src="item | httpImage" class="cursor-pointer" @click="detailsClick($event)" /> </el-carousel-item> </el-carousel> <!-- 暂时认为只有人脸抓拍的报警, 首页显示小图, 其他时间均显示大图 --> <img v-else-if=" (data.targetInfo && data.targetInfo.length === 0) || data.targetInfo[0].targetType !== 'FaceDetect' (data.targetInfo && data.targetInfo.length === 0) || data.targetInfo[0].targetType !== 'FaceDetect' " :src="data.picMaxUrl[0] | httpImage" class="cursor-pointer" @@ -84,10 +69,7 @@ /> </div> <div class="s-card-left-box" v-else> <img :src="data.baseInfo[0].targetPicUrl | httpImage" class="cursor-pointer" /> <img :src="data.baseInfo[0].targetPicUrl | httpImage" class="cursor-pointer" /> </div> </div> @@ -101,9 +83,7 @@ @mouseleave="cardMouseleave($event)" > <p> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> </p> <p style="margin-bottom: 8px"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> @@ -112,9 +92,7 @@ <div slot="content"> <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'"> <span>{{ data.taskName }}</span > <span v-if="item.alarmLevel !== '撤防'" > {{ item.alarmLevel }}</span > <span v-if="item.alarmLevel !== '撤防'"> {{ item.alarmLevel }}</span > <span v-if="item.linkInfo == '联动任务'"> 联动任务</span> </p> @@ -138,14 +116,9 @@ > <span class="fontStyle color666">{{ data.taskName }}</span > <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'" > {{ item.alarmLevel }}</span <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'"> {{ item.alarmLevel }}</span > <span class="fontStyle color666" v-if="item.linkInfo == '联动任务'" > 联动任务</span > <span class="fontStyle color666" v-if="item.linkInfo == '联动任务'"> 联动任务</span> <span v-if="index < data.alarmRules.length - 1">/ </span> </span> </el-button> @@ -153,22 +126,17 @@ <el-tooltip placement="right" popper-class="atooltip"> <div slot="content"> <p> <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName" >{{ data.baseInfo[initialIndex].tableName }}</span <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName">{{ data.baseInfo[initialIndex].tableName }}</span > <span class="fontStyle" v-if="data.baseInfo[initialIndex].targetName" <span class="fontStyle" v-if="data.baseInfo[initialIndex].targetName" >/ {{ data.baseInfo[initialIndex].targetName }}</span > <span class="fontStyle" v-if="data.baseInfo[initialIndex].labels" >/ {{ data.baseInfo[initialIndex].labels | idCard }}</span > <span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel" <span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel" >/ {{ data.baseInfo[initialIndex].monitorLevel }}</span > </p> @@ -193,22 +161,17 @@ : 'font-size:12px;line-height:20px' " > <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName" >{{ data.baseInfo[initialIndex].tableName }}</span <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName">{{ data.baseInfo[initialIndex].tableName }}</span > <span class="fontStyle" v-if="data.baseInfo[initialIndex].targetName" <span class="fontStyle" v-if="data.baseInfo[initialIndex].targetName" >/ {{ data.baseInfo[initialIndex].targetName }}</span > <span class="fontStyle" v-if="data.baseInfo[initialIndex].labels" >/ {{ data.baseInfo[initialIndex].labels | idCard }}</span > <span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel" <span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel" >/ {{ data.baseInfo[initialIndex].monitorLevel }}</span > </span> @@ -262,31 +225,17 @@ <p :style="data.baseInfo[0].bwType == '0' ? '' : 'color:red'"> <span>{{ data.baseInfo[0].targetName }}</span > <span v-if="data.baseInfo[0].labels" >/ {{ data.baseInfo[0].labels | idCard }}</span > <span v-if="data.baseInfo[0].labels">/ {{ data.baseInfo[0].labels | idCard }}</span> </p> </div> <div class="card-icon-box"> <el-tooltip content="查找此人" placement="top" popper-class="atooltip" style="margin-left: 10px" > <i class="iconfont iconsousuoren" @click="tosearch(data)" title="查找此人" ></i> <el-tooltip content="查找此人" placement="top" popper-class="atooltip" style="margin-left: 10px"> <i class="iconfont iconsousuoren" @click="tosearch(data)" title="查找此人"></i> </el-tooltip> </div> </div> <!-- 没有底库 16：9图片 最正常的yolo抓拍 无人值守 正常yolo抓拍没有小图--> <div v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" class="s-card-right-signal" > <div v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" class="s-card-right-signal"> <div class="signal-img-dev" :style="overflowState ? 'overflow: hidden' : 'overflow: auto'" @@ -294,9 +243,7 @@ @mouseleave="cardMouseleave($event)" > <p :title="data.picDate"> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> </p> <p :title="data.cameraAddr" style="margin-bottom: 8px"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> @@ -305,10 +252,7 @@ <div slot="content"> <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'"> <span>{{ data.taskName }}</span > <span v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span > <span v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span > <span v-if="item.linkInfo == '联动任务'"> 联动任务</span> </p> @@ -331,16 +275,9 @@ > <span class="fontStyle color666">{{ data.taskName }}</span > <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'" >{{ item.alarmLevel }}</span <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span > <span class="fontStyle color666" v-if="item.linkInfo == '联动任务'" > 联动任务</span > <span class="fontStyle color666" v-if="item.linkInfo == '联动任务'"> 联动任务</span> <span v-if="index < data.alarmRules.length - 1">/ </span> </span> </el-button> @@ -349,18 +286,11 @@ <div class="right-bottom"> <div v-if="!data.id" class="card-icon-box"> <!-- <i class="iconfont systemxing ml50" title="收藏" ></i> --> <el-tooltip content="查找此人" placement="top" popper-class="atooltip" > <el-tooltip content="查找此人" placement="top" popper-class="atooltip"> <i class="iconfont iconsousuoren ml50" @click="tosearch(data)"></i> </el-tooltip> </div> <div v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" class="card-icon-box" > <div v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" class="card-icon-box"> <el-tooltip content="详情" placement="top" popper-class="atooltip"> <i class="iconfont iconcaidan" @click="detailsClick($event)"></i> </el-tooltip> @@ -375,18 +305,10 @@ <el-tooltip content="详情" placement="top" popper-class="atooltip"> <i class="iconfont iconcaidan" @click="detailsClick($event)"></i> </el-tooltip> <el-tooltip content="查找此人" placement="top" popper-class="atooltip" > <el-tooltip content="查找此人" placement="top" popper-class="atooltip"> <i class="iconfont iconsousuoren" @click="tosearch(data)"></i> </el-tooltip> <el-tooltip content="加入底库" placement="top" popper-class="atooltip" > <el-tooltip content="加入底库" placement="top" popper-class="atooltip"> <i class="iconfont icontianjiaren" @click="toAdd(data)"></i> </el-tooltip> <!-- <el-tooltip content="收藏" placement="top" popper-class="atooltip"> @@ -397,10 +319,7 @@ </div> <!-- 没有底库，非比对，普通模式 一定有targetInfo，并且targetInfo个数为1--> <div v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''" class="s-card-right-signal" > <div v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''" class="s-card-right-signal"> <div class="signal-img-dev" :style="overflowState ? 'overflow: hidden' : 'overflow: auto'" @@ -421,29 +340,18 @@ <span v-else>{{ data.baseInfo[0].compareScore | percentage }}</span> </p> <p :title="data.picDate"> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> </p> <p :title="data.cameraAddr" style="margin-bottom: 8px"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> </p> <el-tooltip placement="right" popper-class="atooltip" v-if="!VideoPhotoData.uploadType" > <el-tooltip placement="right" popper-class="atooltip" v-if="!VideoPhotoData.uploadType"> <div slot="content"> <p v-for="(item, index) in data.alarmRules" :key="index + 'rule2'"> <span class="fontStyle">{{ data.taskName }}</span > <span class="fontStyle" v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span > <span class="fontStyle" v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span > <span v-if="item.linkInfo == '联动任务'" class="fontStyle" > 联动任务</span > <span v-if="item.linkInfo == '联动任务'" class="fontStyle"> 联动任务</span> <span v-if="index < data.alarmRules.length - 1">/ </span> </p> </div> @@ -459,22 +367,12 @@ text-align: left; " > <span v-for="(item, index) in data.alarmRules" :key="index + 'rule3'" > <span v-for="(item, index) in data.alarmRules" :key="index + 'rule3'"> <span class="fontStyle color666">{{ data.taskName }}</span > <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'" >{{ item.alarmLevel }}</span <span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'">{{ item.alarmLevel }}</span > <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666" > 联动任务</span > <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666"> 联动任务</span> <span v-if="index < data.alarmRules.length - 1">/ </span> </span> </el-button> @@ -482,24 +380,14 @@ <!-- <p> <span class="fontStyle color666">{{ data.sex }}</span> / <span class="fontStyle color666">{{ data.ageDescription }}</span> / <span class="fontStyle color666">{{ data.race }}</span> </p>--> <el-tooltip placement="right" popper-class="atooltip" v-if="data.baseInfo && data.baseInfo[0].targetName != ''" > <el-tooltip placement="right" popper-class="atooltip" v-if="data.baseInfo && data.baseInfo[0].targetName != ''"> <div slot="content"> <p v-for="(item, index) in data.baseInfo" :key="index + 'base1'"> <span class="fontStyle">{{ item.tableName }}</span > <span class="fontStyle" v-if="item.targetName.length">/ {{ item.targetName }}</span > <span class="fontStyle" v-if="item.labels.length">/ {{ item.labels | idCard }}</span > <span class="fontStyle" v-if="item.targetName.length" >/ {{ item.targetName }}</span > <span class="fontStyle" v-if="item.labels.length" >/ {{ item.labels | idCard }}</span > <span class="fontStyle" v-if="item.labels.length" >/ {{ item.labels | sex }}</span > <span class="fontStyle" v-if="item.labels.length">/ {{ item.labels | sex }}</span> </p> </div> <el-button @@ -518,36 +406,21 @@ v-for="(item, index) in data.baseInfo" :key="index + 'base'" :style=" item.bwType == '1' ? 'color:red;font-size:12px;line-height:20px' : 'font-size:12px;line-height:20px' item.bwType == '1' ? 'color:red;font-size:12px;line-height:20px' : 'font-size:12px;line-height:20px' " > <span class="fontStyle">{{ item.tableName }}</span > <span class="fontStyle" v-if="item.targetName.length">/ {{ item.targetName }}</span > <span class="fontStyle" v-if="item.labels.length">/ {{ item.labels | idCard }}</span > <span class="fontStyle" v-if="item.targetName.length" >/ {{ item.targetName }}</span > <span class="fontStyle" v-if="item.labels.length" >/ {{ item.labels | idCard }}</span > <span class="fontStyle" v-if="item.labels.length" >/ {{ item.labels | sex }}</span > <span class="fontStyle" v-if="item.labels.length">/ {{ item.labels | sex }}</span> </span> </el-button> </el-tooltip> <el-tooltip placement="right" popper-class="atooltip" v-if="data.baseInfo == null" style="margin-top: 5px" > <el-tooltip placement="right" popper-class="atooltip" v-if="data.baseInfo == null" style="margin-top: 5px"> <div slot="content"> <span :style="'color:red;font-size:14px;line-height:20px'">{{ data.showLabels }}</span> <span :style="'color:red;font-size:14px;line-height:20px'">{{ data.showLabels }}</span> </div> <el-button style=" @@ -561,9 +434,7 @@ text-align: left; " > <span :style="'color:red;font-size:14px;line-height:20px'">{{ data.showLabels }}</span> <span :style="'color:red;font-size:14px;line-height:20px'">{{ data.showLabels }}</span> </el-button> </el-tooltip> </div> @@ -571,11 +442,7 @@ <div v-if="!data.id" class="card-icon-box"> <!-- 底库人员 --> <!-- <i class="iconfont systemxing ml50" title="收藏" ></i> --> <el-tooltip content="查找此人" placement="top" popper-class="atooltip" > <el-tooltip content="查找此人" placement="top" popper-class="atooltip"> <i class="iconfont iconsousuoren ml50" @click="tosearch(data)"></i> </el-tooltip> </div> @@ -629,23 +496,16 @@ > <div> <p :title="data.picDate"> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> </p> <p :title="data.cameraAddr" style="margin-bottom: 8px"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> </p> <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'"> <span class="fontStyle color666">{{ data.taskName }}</span > / <span class="fontStyle color666">{{ item.alarmLevel }}</span > / <span class="fontStyle color666">{{ item.alarmLevel }}</span > / <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666" >联动任务</span > <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666">联动任务</span> <span v-if="index < data.alarmRules.length - 1">/ </span> </p> </div> @@ -664,78 +524,69 @@ "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 S: this.getMilliseconds(), //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace( RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length) ); S: this.getMilliseconds() //毫秒 } if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)) for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace( RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length) ); return fmt; }; fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)) return fmt } export default { mounted() { //window.addEventListener("resize", this.watchWindow); window.addEventListener("resize", this.getBottom); window.addEventListener("resize", this.getBottom) }, props: { data: { type: Object, default: null, default: null }, showType: { type: String, default: "search", default: "search" }, fromCluster: { type: Boolean, default: false, default: false }, searchT: {}, searchT: {} }, computed: { isId() { return this.data.id; }, return this.data.id } }, filters: { formatTime(t) { return new Date(t).Format("yyyy-MM-dd HH:mm:ss"); return new Date(t).Format("yyyy-MM-dd HH:mm:ss") }, percentage(score) { return score.toFixed(2) + "%"; return score.toFixed(2) + "%" }, idCard(v) { try { let obj = JSON.parse(v); return obj.idCard; let obj = JSON.parse(v) return obj.idCard } catch (error) { return v.split("/")[1]; return v.split("/")[1] } }, sex(v) { try { let obj = JSON.parse(v); return obj.sex; let obj = JSON.parse(v) return obj.sex } catch (error) { return v.split("/")[0]; return v.split("/")[0] } }, httpImage(url) { if (!url.length) { return ""; return "" } return ( "/httpImage/" + url + (url.indexOf("?") >= 0 ? "&" : "?") + "width=160" ); }, return "/httpImage/" + url + (url.indexOf("?") >= 0 ? "&" : "?") + "width=160" } }, data() { return { @@ -743,64 +594,62 @@ initialIndex: 0, carouselIndex: 0, dialogVisible: false, overflowState: true, }; overflowState: true } }, watch: { data: { handler(val, oldVal) { this.$forceUpdate(); this.$forceUpdate() }, deep: true, }, deep: true } }, methods: { getBottom() { this.$nextTick(() => { let imgDom = this.$refs.firstImg; let imgDom = this.$refs.firstImg if (imgDom) { let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2; return `${num}px`; let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2 return `${num}px` } return `4px`; }); return `4px` }) }, getUrl(bwtype) { if (bwtype == 1) { return `url(${require("@/assets/img/red.png")})`; return `url(${require("@/assets/img/red.png")})` } else { return `url(${require("@/assets/img/green.png")})`; return `url(${require("@/assets/img/green.png")})` } }, changeInitialIndex(index) { this.initialIndex = index; this.initialIndex = index }, cardMouseenter(ev) { this.overflowState = false; this.overflowState = false }, cardMouseleave(ev) { this.overflowState = true; this.overflowState = true }, changeCarousel(index) { this.carouselIndex = index; this.carouselIndex = index }, detailsClick(ev) { this.$emit("detailsClick", ev); this.$emit("detailsClick", ev) }, toAdd(item) { this.$emit("addToBase", item); this.$emit("addToBase", item) }, tosearch(item) { this.searchT; let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id; let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl; let compType = 1; // 数据来自于es this.searchT let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl let compType = 1 // 数据来自于es if (!item.id || item.id == "") { compType = 0; // 数据来自于底库 compType = 0 // 数据来自于底库 } let message; let message if (this.fromCluster) { message = "toCluster?showType=findByPic&targetId=" + @@ -814,7 +663,7 @@ "&start=" + this.searchT[0] + "&end=" + this.searchT[1]; this.searchT[1] } else { message = "toSearch?showType=findByPic&targetId=" + @@ -828,19 +677,23 @@ "&start=" + this.searchT[0] + "&end=" + this.searchT[1]; this.searchT[1] } window.parent.postMessage( { msg: message, msg: message }, "*" ); }, }, }; ) } } } </script> <style lang="scss"> .cursor-pointer { cursor: pointer; } .fontStyle { font-family: PingFangSC-Medium; } src/views/hashrate/CameraManage/index.vue
@@ -3,13 +3,7 @@ <div class="cluster"> <div class="title">集群选择</div> <el-select v-model="cluster" placeholder="请选择" @change="selectCluster"> <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value" > </el-option> <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="content"> @@ -19,49 +13,35 @@ </div> <div class="right"> <div class="tabs"> <div class="tab" :class="{ active: activeTab === '信息维护' }" @click="handleClick('信息维护')" > <div class="tab" :class="{ active: activeTab === '信息维护' }" @click="handleClick('信息维护')"> 信息维护 </div> <div class="tab" :class="{ active: activeTab === '场景配置' }" @click="handleClick('场景配置')" > <div class="tab" :class="{ active: activeTab === '场景配置' }" @click="handleClick('场景配置')"> 场景配置 </div> </div> <CameraInfo ref="cameraInfo" v-show="activeTab === '信息维护'" ></CameraInfo> <CameraRules v-show="activeTab === '场景配置'" ref="sepRule" ></CameraRules> <CameraInfo ref="cameraInfo" v-show="activeTab === '信息维护'"></CameraInfo> <CameraRules v-show="activeTab === '场景配置'" ref="sepRule"></CameraRules> </div> </div> </div> </template> <script> import CameraLeft from "@/components/CameraLeft"; import CameraInfo from "./CameraInfo"; import CameraRules from "./CameraRules"; import VideoRuleData from "@/Pool/VideoRuleData"; import CameraLeft from "@/components/CameraLeft" import CameraInfo from "./CameraInfo" import CameraRules from "./CameraRules" import VideoRuleData from "@/Pool/VideoRuleData" import { getClusterDevList } from "@/api/clusterManage"; import { getClusterDevList } from "@/api/clusterManage" import bus from "@/plugin/bus"; import bus from "@/plugin/bus" export default { components: { CameraLeft, CameraInfo, CameraRules, CameraRules }, data() { @@ -72,25 +52,25 @@ clusterData: [], intervalTimer: null, leftWith: 0, screenHeight: 0, }; screenHeight: 0 } }, destroyed() { this.TreeDataPool.readonly = true; this.TreeDataPool.readonly = true }, watch: { "TreeDataPool.activeNode": function (node) { sessionStorage.setItem("cameraDevId", node.devId); sessionStorage.setItem("cameraDevId", node.devId) if (this.activeTab == "信息维护") { if (this.TreeDataPool.treeActiveName == "camera") { this.$refs.cameraInfo.selectCamera(node); this.$refs.cameraInfo.selectCamera(node) } } else if (this.activeTab === "场景配置") { this.$refs.sepRule.initCameraData(node.id); this.$refs.sepRule.initCameraData(node.id) if (!this.TreeDataPool.multiple) { this.$refs.sepRule.showRules(node.id); this.$refs.sepRule.showRules(node.id) } } }, @@ -98,196 +78,188 @@ handler(nodes, oldVal) { if (this.activeTab == "场景配置") { // this.$refs.sepRule.initCameraData(nodes[nodes.length - 1]); let CameraArr = []; let CameraIds = []; let CameraArr = [] let CameraIds = [] nodes.forEach((id) => { let newCamera = new VideoRuleData(id); CameraArr.push(newCamera); CameraIds.push(id); }); let newCamera = new VideoRuleData(id) CameraArr.push(newCamera) CameraIds.push(id) }) this.$refs.sepRule.Carmeras = CameraArr; if ( nodes.length == 1 && oldVal.length == 1 && nodes[0] == oldVal[0] ) { return; this.$refs.sepRule.Carmeras = CameraArr if (nodes.length == 1 && oldVal.length == 1 && nodes[0] == oldVal[0]) { return } if (this.TreeDataPool.multiple && oldVal[0]) { this.$refs.sepRule.showRules(CameraIds); this.$refs.sepRule.showRules(CameraIds) } console.log(CameraArr); console.log(CameraArr) } }, deep: true, deep: true }, "DataStackPool.selectedDir": { handler(node, oldNode) { if (this.TreeDataPool.treeActiveName !== "dataStack") { return; return } this.$nextTick(() => { if (this.activeTab == "信息维护") { // this.$refs.dataStackInfo.selectDir(node); } else if (this.activeTab == "场景配置" && node.length !== 0) { this.$refs.sepRule.initCameraData(node.id); this.$refs.sepRule.initCameraData(node.id) } }); }) }, deep: true, }, deep: true } }, created() { this.getCluster(); this.TreeDataPool.readonly = false; this.getCluster() this.TreeDataPool.readonly = false // this.TreeDataPool.readonly = true; //this.TreeDataPool.gbReadonly = true; this.TreeDataPool.multiple = false; this.TreeDataPool.selectedNode = ""; this.selectedNodes = []; this.TreeDataPool.multiple = false this.TreeDataPool.selectedNode = "" this.selectedNodes = [] }, beforeDestroy() { sessionStorage.removeItem("devId"); sessionStorage.removeItem("clusterId"); clearInterval(this.intervalTimer); sessionStorage.removeItem("devId") sessionStorage.removeItem("clusterId") clearInterval(this.intervalTimer) //this.TreeDataPool.treeActiveName = "camera"; }, mounted() { this.$nextTick(() => { bus.$on("addCameraOnTree", (node) => { this.handAddDevice(node); }); this.handAddDevice(node) }) bus.$on("addDirOnTree", (node) => { this.handAddDIr(node); }); this.TreeDataPool.clean(); }); this.handAddDIr(node) }) this.TreeDataPool.clean() }) }, methods: { TextWidthChange(e) { console.log(1212); let odivParent = e.currentTarget.parentNode; //获取目标父元素 let dx = e.clientX; //当你第一次单击的时候，存储x轴的坐标。 let dw = odivParent.offsetWidth; //存储默认的div的宽度。 console.log(1212) let odivParent = e.currentTarget.parentNode //获取目标父元素 let dx = e.clientX //当你第一次单击的时候，存储x轴的坐标。 let dw = odivParent.offsetWidth //存储默认的div的宽度。 document.onmousemove = (e) => { odivParent.style.width = dw + (e.clientX - dx) + "px"; odivParent.style.width = dw + (e.clientX - dx) + "px" if (odivParent.offsetWidth <= 100) { //当盒子缩小到一定范围内的时候，让他保持一个固定值，不再继续改变 odivParent.style.width = "100px"; odivParent.style.width = "100px" } if (odivParent.offsetWidth + odivParent.offsetLeft >= this.pdfWidth) { odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px"; odivParent.style.width = this.pdfWidth - odivParent.offsetLeft + "px" } }; } document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; e.stopPropagation(); e.preventDefault(); return false; document.onmousemove = null document.onmouseup = null } e.stopPropagation() e.preventDefault() return false }, handAddDevice(node) { let _this = this; let _this = this setTimeout(() => { _this.$refs.cameraInfo.addDevice(node); _this.activeTab = "信息维护"; }, 100); _this.$refs.cameraInfo.addDevice(node) _this.activeTab = "信息维护" }, 100) }, handAddDIr(node) { let _this = this; let _this = this setTimeout(() => { _this.$refs.dataStackInfo.addDir(node); _this.activeTab = "信息维护"; }, 100); _this.$refs.dataStackInfo.addDir(node) _this.activeTab = "信息维护" }, 100) }, handleClick(tab) { //这个控制是否多选 // this.TreeDataPool.multiple = tab.name === "场景配置"; this.activeTab = tab; this.activeTab = tab if (tab === "信息维护") { if (this.TreeDataPool.treeActiveName == "camera") { this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode); this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode) } else if (this.TreeDataPool.treeActiveName == "dataStack") { this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir); this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir) } } else if (tab === "场景配置") { if (this.TreeDataPool.treeActiveName == "camera") { this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id); this.$refs.sepRule.showRules(this.TreeDataPool.selectedNode.id); this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id) this.$refs.sepRule.showRules(this.TreeDataPool.selectedNode.id) } else if (this.TreeDataPool.treeActiveName == "dataStack") { this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id); this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id) } } }, async getCluster() { const res = await getClusterDevList(); const res = await getClusterDevList() if (res && res.success) { this.clusterData = res.data.clusterList; this.clusterData = res.data.clusterList if (res.data.clusterList <= 0 && res.data.devList <= 0) { this.$confirm( "系统检测到您还未添加设备, 请在设备管理页面维护", "提示", { this.$confirm("系统检测到您还未添加设备, 请在设备管理页面维护", "提示", { confirmButtonText: "跳转", cancelButtonText: "取消", type: "warning", } ) .then(() => { this.$router.push("/manageCenter"); type: "warning" }) .catch(() => {}); .then(() => { this.$router.push("/manageCenter") }) .catch(() => {}) } res.data.clusterList.forEach((item) => { this.clusterArr.push({ label: item.cluster_name, value: "0$$" + item.cluster_id, }); }); value: "0$$" + item.cluster_id }) }) res.data.devList.forEach((item) => { this.clusterArr.push({ label: item.devName, value: "1$$" + item.devId, }); }); value: "1$$" + item.devId }) }) this.cluster = this.clusterArr[0].value; this.selectCluster(this.clusterArr[0].value); this.cluster = this.clusterArr[0].value this.selectCluster(this.clusterArr[0].value) } }, selectCluster(val) { const arr = val.split("$$"); const arr = val.split("$$") if (arr[0] == "0") { sessionStorage.setItem("clusterId", arr[1]); sessionStorage.setItem("devId", ""); console.log(this.clusterData); sessionStorage.setItem("clusterId", arr[1]) sessionStorage.setItem("devId", "") console.log(this.clusterData) this.clusterData.forEach((item) => { if (arr[1] == item.cluster_id) { sessionStorage.setItem("nodeId", item.nodeList[0].devId); sessionStorage.setItem("nodeId", item.nodeList[0].devId) } }); }) } if (arr[0] == "1") { sessionStorage.setItem("clusterId", ""); sessionStorage.setItem("devId", arr[1]); sessionStorage.setItem("nodeId", arr[1]); sessionStorage.setItem("clusterId", "") sessionStorage.setItem("devId", arr[1]) sessionStorage.setItem("nodeId", arr[1]) } this.TreeDataPool.fetchTreeData(); this.PollData.statisticTaskInfo(); this.VideoManageData.init(); this.PollData.statistics(); }, }, }; this.TreeDataPool.fetchTreeData() this.PollData.statisticTaskInfo() this.VideoManageData.init() this.PollData.statistics() } } } </script> <style lang="scss" scoped> @@ -343,7 +315,8 @@ .column-left { position: relative; margin-right: 24px; width: 292px; height: 233vh; overflow: auto; background-color: #fff; }
@@ -1,60 +1,55 @@ <template> <div class="imgBox"> <img :src="'http://' + url" class="cursor-pointer" v-if="isPreview" preview /> <img :src="'http://' + url" v-if="!isPreview" /> <img :src="'/httpImage/' + url" class="cursor-pointer" v-if="isPreview" preview /> <img :src="'/httpImage/' + url" v-if="!isPreview" /> <el-button class="btn" @click="downloadIamge('/httpImage/' + url)"> <i class="iconfont iconxiazai"></i> </el-button> </div> </template> <script> import axios from "axios"; import axios from "axios" export default { props: { url: { default: "", type: String, type: String }, isPreview: { default: true, type: Boolean, }, type: Boolean } }, methods: { downloadIamge(url) { this.$notify.info({ title: "消息", message: "资源下载中,请稍后...", }); message: "资源下载中,请稍后..." }) axios({ method: "get", url: url, responseType: "blob", responseType: "blob" }) .then((res) => { if (res.status == 200) { var a = document.createElement("a"); var strs = url.split("/"); var href = new Blob([res.data], { type: "image/jpeg" }); a.href = URL.createObjectURL(href); a.download = strs[strs.length - 1] + ".jpg"; a.click(); var a = document.createElement("a") var strs = url.split("/") var href = new Blob([res.data], { type: "image/jpeg" }) a.href = URL.createObjectURL(href) a.download = strs[strs.length - 1] + ".jpg" a.click() } }) .catch((err) => { this.$notify({ type: "error", message: "下载失败，" + err + "请重试！", }); }); }, }, }; message: "下载失败，" + err + "请重试！" }) }) } } } </script> <style lang="scss" scoped> .imgBox { src/views/search/index.vue
@@ -1,18 +1,8 @@ <template> <div class="column"> <div class="search_cluster"> <el-select v-model="cluster" placeholder="请选择集群" @change="selectCluster" > <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value" > </el-option> <el-select v-model="cluster" placeholder="请选择集群" @change="selectCluster"> <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="column-left"> @@ -30,108 +20,104 @@ </template> <script> import LeftNav from "@/components/CameraLeft"; import RightSide from "./Searching"; import CardWindow from "./components/CardWindow"; import { getClusterDevList } from "@/api/clusterManage"; import LeftNav from "@/components/CameraLeft" import RightSide from "./Searching" import CardWindow from "./components/CardWindow" import { getClusterDevList } from "@/api/clusterManage" export default { name: "SearchPage", components: { LeftNav, RightSide, CardWindow, CardWindow }, data() { return { screenHeight: 0, clusterArr: [], cluster: "", }; cluster: "" } }, created() { // this.parseUrl(); this.getCluster(); this.getCluster() }, mounted() { this.screenHeight = document.documentElement.clientHeight - 20; this.screenHeight = document.documentElement.clientHeight - 20 window.onresize = () => { return (() => { this.screenHeight = document.documentElement.clientHeight - 20; })(); }; this.screenHeight = document.documentElement.clientHeight - 20 })() } }, beforeDestroy() { sessionStorage.removeItem("clusterId"); sessionStorage.removeItem("devId"); sessionStorage.removeItem("clusterId") sessionStorage.removeItem("devId") }, methods: { parseUrl() {}, selectCluster(val) { const arr = val.split("$$"); const arr = val.split("$$") if (arr[0] == "0") { sessionStorage.setItem("clusterId", arr[1]); sessionStorage.setItem("devId", ""); console.log(this.clusterData); sessionStorage.setItem("clusterId", arr[1]) sessionStorage.setItem("devId", "") console.log(this.clusterData) this.clusterData.forEach((item) => { if (arr[1] == item.cluster_id) { sessionStorage.setItem("nodeId", item.nodeList[0].devId); sessionStorage.setItem("nodeId", item.nodeList[0].devId) } }); }) } if (arr[0] == "1") { sessionStorage.setItem("clusterId", ""); sessionStorage.setItem("devId", arr[1]); sessionStorage.setItem("nodeId", arr[1]); sessionStorage.setItem("clusterId", "") sessionStorage.setItem("devId", arr[1]) sessionStorage.setItem("nodeId", arr[1]) } this.TreeDataPool.fetchTreeData(); this.PollData.statisticTaskInfo(); this.VideoManageData.init(); this.PollData.statistics(); this.TreeDataPool.fetchTreeData() this.PollData.statisticTaskInfo() this.VideoManageData.init() this.PollData.statistics() }, async getCluster() { const res = await getClusterDevList(); const res = await getClusterDevList() if (res && res.success) { this.clusterData = res.data.clusterList; this.clusterData = res.data.clusterList if (res.data.clusterList <= 0 && res.data.devList <= 0) { this.$confirm( "系统检测到您还未添加设备, 请在设备管理页面维护", "提示", { this.$confirm("系统检测到您还未添加设备, 请在设备管理页面维护", "提示", { confirmButtonText: "跳转", cancelButtonText: "取消", type: "warning", } ) .then(() => { this.$router.push("/manageCenter"); type: "warning" }) .catch(() => {}); .then(() => { this.$router.push("/manageCenter") }) .catch(() => {}) } res.data.clusterList.forEach((item) => { this.clusterArr.push({ label: item.cluster_name, value: "0$$" + item.cluster_id, }); }); value: "0$$" + item.cluster_id }) }) res.data.devList.forEach((item) => { this.clusterArr.push({ label: item.devName, value: "1$$" + item.devId, }); }); value: "1$$" + item.devId }) }) this.cluster = this.clusterArr[0].value; this.selectCluster(this.clusterArr[0].value); this.cluster = this.clusterArr[0].value this.selectCluster(this.clusterArr[0].value) } }, }, }; } } } </script> <style lang="scss" > <style lang="scss" scoped> .left-tree-box .local-vedio-area .dev-vedio-list { height: calc(100vh - 130px); } @@ -205,7 +191,7 @@ left: 172px; position: fixed; width: 135px; z-index: 4; z-index: -1; } /* Firefox只有下面一小块区域可以拉伸 */
