From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/hashrate/CameraManage/CameraRules/index.vue | 219 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 173 insertions(+), 46 deletions(-)
diff --git a/src/views/hashrate/CameraManage/CameraRules/index.vue b/src/views/hashrate/CameraManage/CameraRules/index.vue
index 595de68..b069cc3 100644
--- a/src/views/hashrate/CameraManage/CameraRules/index.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/index.vue
@@ -6,7 +6,7 @@
<!-- 鍦烘櫙鍙婅鍒� -->
<div class="left-top-left">
<div class="title">鍦烘櫙</div>
- <slide-scene :sceneData="Camera.rules"></slide-scene>
+ <slide-scene :sceneData="Camera.allSceneRule"></slide-scene>
</div>
<!-- 绠楀姏淇℃伅杩涘害鏉� -->
@@ -25,6 +25,7 @@
:InValidCount="`${PollData.RealTimeInvalid}`"
:RunningCount="`${PollData.RealTimeRun}`"
:NoDeal="`${PollData.RealTimeNoDeal}`"
+ image="realTime (2).png"
></HashrateCard>
<!-- 杞绠楀姏淇℃伅 -->
@@ -36,6 +37,7 @@
:InValidCount="`${PollData.PollInvalid}`"
:RunningCount="`${PollData.PollRun}`"
:NoDeal="`${PollData.PollNoDeal}`"
+ image="polling.png"
></HashrateCard>
</div>
</div>
@@ -56,7 +58,7 @@
:disabled="false"
:snapshot_url="Camera.baseImg"
:canvasDataShow="Camera.canvasData"
- :currentCameraId="Camera.cameraId"
+ :currentCamera="Camera"
:loading="Camera.loading"
:canvasWidth="canvasWidth"
:canvasHeight="canvasHeight"
@@ -92,14 +94,14 @@
v-loading="loading"
element-loading-text="鍒锋柊涓紝璇风◢绛�..."
element-loading-background="rgba(0, 0, 0, 0.8)"
- :divId="data.cameraId"
+ :divId="data.camera.cameraId"
:isShowDrawArrow="true"
:isLink="true"
:disabled="false"
:loading="data.loading"
:snapshot_url="data.baseImg"
:canvasDataShow="data.canvasData"
- :currentCameraId="data.cameraId"
+ :currentCamera="data.camera"
@changeLoading="changeLoading"
@refresh="refresh2"
></polygon-canvas>
@@ -127,9 +129,30 @@
<div class="SeparateRules" @click="selectMultiple(false)">
<div class="title">鐙珛鍦烘櫙</div>
<div class="control">
- <i class="iconfont" @click="openSdkBox($event)"></i>
- <i class="iconfont"></i>
- <i class="iconfont"></i>
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="绠楁硶浜嬩欢"
+ placement="top"
+ >
+ <i class="iconfont" @click="openSdkBox($event)"></i>
+ </el-tooltip>
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="鏁版嵁娴佷紶"
+ placement="top"
+ >
+ <i class="iconfont"></i>
+ </el-tooltip>
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="妯℃澘鍔╂墜"
+ placement="top"
+ >
+ <i class="iconfont"></i>
+ </el-tooltip>
</div>
<div class="content">
@@ -159,7 +182,7 @@
</template>
<div class="empty" v-else>
- <img src="/images/hashrate/鐙珛鍦烘櫙绌洪〉闈�.png" alt="" />
+ <img src="/images/hashrate/s_empty.png" alt="" />
<div class="des">鏆傛棤鐙珛鍦烘櫙</div>
</div>
</div>
@@ -169,16 +192,39 @@
<div class="linkageRule" @click="selectMultiple(true)">
<div class="title">鑱斿姩鍦烘櫙</div>
<div class="control">
- <i class="iconfont" @click="showSdkBox = true"></i>
- <i class="iconfont"></i>
- <i class="iconfont"></i>
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="绠楁硶浜嬩欢"
+ placement="top"
+ >
+ <i class="iconfont" @click="showSdkBox = true"></i>
+ </el-tooltip>
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="鏁版嵁娴佷紶"
+ placement="top"
+ >
+ <i class="iconfont"></i>
+ </el-tooltip>
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="妯℃澘鍔╂墜"
+ placement="top"
+ >
+ <i class="iconfont"></i>
+ </el-tooltip>
</div>
<template v-if="linkageRule.length > 0">
<div class="content" v-for="(item, index) in linkageRule" :key="index">
<!-- 鎽勫儚鏈� -->
<LinkageCameraBox
:cameras="item.cameraIds"
- @addLinkageRule="addLinkageRule"
+ @addLinkageRule="
+ addLinkageRule(item.cameraIds, item.camera_polygons)
+ "
></LinkageCameraBox>
<div class="Anchor" :id="'linkage_camera' + index"></div>
@@ -189,7 +235,7 @@
:rule="item"
@edit="editRules(item, index, 'linkage')"
@addSdk="addSdk('linkage', index)"
- @backToOrigin="backToOrigin('linkage', index)"
+ @backToOrigin="backToOrigin('linkage', index, item.cameraIds)"
@editSdk="editSdk($event, 'linkage', index)"
@deletRule="deletRule('linkage', index)"
:id="'linkage_' + index"
@@ -198,9 +244,27 @@
</div>
</template>
- <div class="empty" @click="addLinkageRule" v-else>
- <img src="/images/hashrate/鑱斿姩鍦烘櫙绌洪〉闈�.png" alt="" />
+ <div
+ class="empty"
+ v-if="linkageRule.length <= 0 && !TreeDataPool.multiple"
+ >
+ <img src="/images/hashrate/l_empty.png" alt="" />
<div class="des">鏆傛棤鑱斿姩鍦烘櫙</div>
+ </div>
+
+ <div
+ class="newCameraArea"
+ v-if="linkageRule.length <= 0 && TreeDataPool.multiple"
+ >
+ <LinkageCameraBox
+ :cameras="CarmerasId"
+ @addLinkageRule="addLinkageRule(CarmerasId)"
+ ></LinkageCameraBox>
+
+ <div class="empty">
+ <img src="/images/hashrate/l_empty.png" alt="" />
+ <div class="des">鏆傛棤鑱斿姩鍦烘櫙</div>
+ </div>
</div>
</div>
@@ -224,7 +288,7 @@
:linkEditCamera="
ruleType === 'linkage' && editSdkObj ? editSdkObj.camera_polygons : null
"
- :Cameras="ruleType === 'linkage' ? Carmeras : [Camera]"
+ :Cameras="ruleType === 'linkage' ? addData.cameras : [Camera]"
></SdkSettingBox>
<!-- 閬僵灞� -->
@@ -286,6 +350,13 @@
selectedCameraIds() {
return this.TreeDataPool.selectedNodes;
},
+ CarmerasId() {
+ let arr = [];
+ this.Carmeras.forEach((item) => {
+ arr.push(item.cameraId);
+ });
+ return arr;
+ },
},
data() {
return {
@@ -328,6 +399,9 @@
prevEl: ".swiper-next-border",
},
},
+ showNewLinkage: false,
+ newLinkageIds: [],
+ newLinkPlg: null,
// swiperOption: {
// slidesPerView: 5,
@@ -471,6 +545,7 @@
this.$refs.canvas.showModal();
}
},
+
getCanvasData(data) {
let polyon = { ...data };
polyon.camera_id = this.Camera.cameraId;
@@ -484,8 +559,12 @@
let carmeras = this.Carmeras;
for (let i = 0; i < carmeras.length; i++) {
swipers = swipers.concat({
- cameraId: carmeras[i].cameraId,
- name: carmeras[i].camearInfo.name,
+ camera: {
+ cameraId: carmeras[i].cameraId,
+ cameraName: carmeras[i].cameraName,
+ type: carmeras[i].type,
+ rtsp: carmeras[i].rtsp,
+ },
baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined,
canvasData: carmeras[i].canvasData,
loading: carmeras[i].loading,
@@ -494,6 +573,7 @@
this.swipercanvasData = swipers;
},
refresh(url) {
+ console.log(url);
this.Camera.baseImg = url;
},
refresh2(url, id) {
@@ -509,8 +589,6 @@
if (!id) {
return;
}
-
- console.log("init");
this.plumbIns.deleteEveryConnection();
this.connectArr.forEach((item) => {
@@ -538,29 +616,24 @@
this.runType = element.run_type;
}
});
-
- // 鑾峰彇娣峰悎鍦烘櫙
- this.showRules(id);
},
// 鑾峰彇娣峰悎鍦烘櫙
showRules(id) {
+ if (!id) {
+ return;
+ }
+ if (typeof id === "string") {
+ id = [id];
+ }
let rules = [];
- getLinkSceneRule({ cameraIds: [id] })
+ getLinkSceneRule({ cameraIds: id })
.then((rsp) => {
if (rsp && rsp.success) {
rules = rsp.data.rules;
- // 缁熶竴瑙勫垯缂栬緫鐨勬暟鎹粨鏋�
- for (let i = 0; i < rules.length; i++) {
- rules[i].group_rules = rules[i].rules;
- }
this.linkageRule = rules;
-
- console.log(this.linkageRule);
-
- this.$set(this.Camera, "rules", this.Camera.rules.concat(rules));
this.$nextTick(() => {
this.connectLine2();
@@ -781,16 +854,20 @@
this.showAddBox = true;
},
- addLinkageRule() {
- if (this.Carmeras.length < 2) {
+ addLinkageRule(ids, camera_polygons) {
+ console.log(7979);
+ console.log(camera_polygons);
+ if (ids.length < 2) {
this.$message({
message: "璇疯嚦灏戦�夋嫨涓ゅ彴鎽勫儚鏈�",
type: "warning",
});
return;
}
+ this.newLinkageIds = ids;
this.ruleType = "linkage";
this.showAddBox = true;
+ this.newLinkPlg = camera_polygons;
},
//鍥炲～鏂扮殑鐙珛鍦烘櫙
@@ -808,13 +885,10 @@
});
} else {
//鑱斿姩鍦烘櫙
- let arr = [this.Camera.cameraId];
- this.Carmeras.forEach((item) => {
- if (item.cameraId != this.Camera.cameraId) {
- arr.push(item.cameraId);
- }
- });
- newRule.data.cameraIds = arr;
+ if (this.newLinkPlg) {
+ newRule.data.camera_polygons = this.newLinkPlg;
+ }
+ newRule.data.cameraIds = this.newLinkageIds;
this.linkageRule.push(newRule.data);
this.$nextTick(() => {
this.connectLine2();
@@ -854,6 +928,7 @@
}
this.showAddBox = false;
+ this.$forceUpdate();
}
this.editData = {};
},
@@ -877,6 +952,35 @@
type,
index,
};
+ if (this.addData.type === "linkage") {
+ this.addData.cameras = [];
+ if (
+ this.linkageRule[index].camera_polygons &&
+ this.linkageRule[index].camera_polygons.length > 0
+ ) {
+ this.linkageRule[index].camera_polygons.forEach((camera) => {
+ this.addData.cameras.push({
+ polygonData: camera.polygon,
+ cameraName: camera.camera_name,
+ cameraId: camera.camera_id,
+ });
+ });
+ } else {
+ this.linkageRule[index].camera_polygons = [];
+ this.Carmeras.forEach((camera) => {
+ this.addData.cameras.push({
+ polygonData: camera.polygonData,
+ cameraName: camera.cameraName,
+ cameraId: camera.cameraId,
+ });
+ this.linkageRule[index].camera_polygons.push({
+ polygon: camera.polygonData,
+ camera_name: camera.cameraName,
+ camera_id: camera.cameraId,
+ });
+ });
+ }
+ }
this.showSdkBox = false;
this.showSdkSettingBox = true;
},
@@ -889,6 +993,7 @@
newRule.rule_with_pre = "&&";
newRule.is_save_anyhow = true;
}
+
this.SeparateRules[this.addData.index].rules.push(newRule);
}
@@ -912,7 +1017,7 @@
},
//鍙栨秷淇敼
- async backToOrigin(type, index) {
+ async backToOrigin(type, index, ids) {
if (type === "separate") {
const rsp = await getCameraSceneRule({
cameraId: this.Camera.cameraId,
@@ -931,12 +1036,11 @@
this.$forceUpdate();
this.connectLine();
} else {
- getLinkSceneRule({ cameraIds: [this.Camera.cameraId] }).then((rsp) => {
+ getLinkSceneRule({ cameraIds: ids }).then((rsp) => {
if (rsp && rsp.success) {
let rules = rsp.data.rules ? rsp.data.rules : [];
if (rules[index]) {
this.linkageRule[index] = rules[index];
- this.linkageRule.group_rules = this.linkageRule.rules;
} else {
this.linkageRule.splice(index, 1);
}
@@ -1118,7 +1222,7 @@
.control {
position: absolute;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
top: 20px;
right: 20px;
@@ -1179,7 +1283,7 @@
.control {
position: absolute;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
top: 20px;
right: 20px;
@@ -1226,6 +1330,29 @@
}
}
+ .newCameraArea {
+ display: flex;
+ .empty {
+ margin-left: 60px;
+ width: 1220px;
+ height: 198px;
+ border: 1px solid #c0c5cc;
+ border-radius: 5px;
+ text-align: center;
+ background: #f0f5fa;
+ img {
+ margin-top: 14px;
+ width: 250px;
+ height: 150px;
+ }
+
+ .des {
+ margin-top: 2px;
+ color: #666;
+ }
+ }
+ }
+
::v-deep .sourcePoint {
margin-top: -4px;
margin-left: -6px;
--
Gitblit v1.8.0