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 | 293 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 212 insertions(+), 81 deletions(-)
diff --git a/src/views/hashrate/CameraManage/CameraRules/index.vue b/src/views/hashrate/CameraManage/CameraRules/index.vue
index 5b774ad..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"
@@ -82,24 +84,24 @@
v-for="(data, index) in swipercanvasData"
:key="index"
>
- <b
+ <!-- <b
class="video-title"
style="font-size: 14px; margin-top: -10px"
>{{ data.name }}</b
- >
+ > -->
<polygon-canvas
ref="canvas"
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">
@@ -149,15 +172,17 @@
:rule="item"
:id="'rule_' + index"
:ruleType="'separate'"
+ :cameraId="Camera.cameraId"
@edit="editRules(item, index, 'separate')"
@addSdk="addSdk('separate', index)"
@backToOrigin="backToOrigin('separate', index)"
@editSdk="editSdk($event, 'separate', index)"
+ @deletRule="deletRule('separate', index)"
></RuleItem>
</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>
@@ -167,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>
@@ -187,17 +235,36 @@
:rule="item"
@edit="editRules(item, index, 'linkage')"
@addSdk="addSdk('linkage', index)"
- @backToOrigin="backToOrigin('linkage', index)"
- @editSdk="editSdk($event, 'linkage', index, item.Cameras)"
+ @backToOrigin="backToOrigin('linkage', index, item.cameraIds)"
+ @editSdk="editSdk($event, 'linkage', index)"
+ @deletRule="deletRule('linkage', index)"
:id="'linkage_' + index"
></RuleItem>
</div>
</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>
@@ -219,9 +286,9 @@
@getEditSdk="getEditSdk"
:editSdk="editSdkObj.sdk"
:linkEditCamera="
- ruleType === 'linkage' && editSdkObj ? editSdkObj.cameras : null
+ ruleType === 'linkage' && editSdkObj ? editSdkObj.camera_polygons : null
"
- :Cameras="ruleType === 'linkage' ? Carmeras : [Camera]"
+ :Cameras="ruleType === 'linkage' ? addData.cameras : [Camera]"
></SdkSettingBox>
<!-- 閬僵灞� -->
@@ -283,6 +350,13 @@
selectedCameraIds() {
return this.TreeDataPool.selectedNodes;
},
+ CarmerasId() {
+ let arr = [];
+ this.Carmeras.forEach((item) => {
+ arr.push(item.cameraId);
+ });
+ return arr;
+ },
},
data() {
return {
@@ -325,6 +399,9 @@
prevEl: ".swiper-next-border",
},
},
+ showNewLinkage: false,
+ newLinkageIds: [],
+ newLinkPlg: null,
// swiperOption: {
// slidesPerView: 5,
@@ -342,7 +419,7 @@
SeparateRules: [], //鐙珛鍦烘櫙
linkageRule: [], //鑱斿姩鍦烘櫙
cameraId: "",
- showSysInfo: false,
+ showSysInfo: true,
showCanvas: true,
canvasWidth: 568,
canvasHeight: 320,
@@ -358,8 +435,8 @@
this.plumbIns = jsPlumb.getInstance();
},
mounted() {
- this.PollData.statistics();
- this.TaskMange.findAllSdk({ installed: true });
+ // this.PollData.statistics();
+ this.TaskMange.findAllSdk();
},
destroyed() {
document.querySelector("html").style["min-width"] = "1280px";
@@ -468,6 +545,7 @@
this.$refs.canvas.showModal();
}
},
+
getCanvasData(data) {
let polyon = { ...data };
polyon.camera_id = this.Camera.cameraId;
@@ -481,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,
@@ -491,6 +573,7 @@
this.swipercanvasData = swipers;
},
refresh(url) {
+ console.log(url);
this.Camera.baseImg = url;
},
refresh2(url, id) {
@@ -507,8 +590,6 @@
return;
}
- console.log("init");
-
this.plumbIns.deleteEveryConnection();
this.connectArr.forEach((item) => {
item.deleteEveryConnection();
@@ -523,6 +604,7 @@
this.Camera = newCamera;
this.SeparateRules = this.Camera.rules;
+
this.$nextTick(() => {
this.connectLine();
});
@@ -534,38 +616,27 @@
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;
- // 缁熶竴瑙勫垯缂栬緫鐨勬暟鎹粨鏋�
- for (let i = 0; i < rules.length; i++) {
- rules[i].group_rules = rules[i].rules;
- }
+ rules = rsp.data.rules;
this.linkageRule = rules;
- this.$set(this.Camera, "rules", this.Camera.rules.concat(rules));
-
this.$nextTick(() => {
this.connectLine2();
- });
-
- this.linkageRule.forEach((rule) => {
- rule.Cameras = [];
- rule.cameraIds.forEach((id) => {
- let newCamera = new VideoRuleData(id);
- rule.Cameras.push(newCamera);
- });
});
}
})
@@ -783,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;
},
//鍥炲～鏂扮殑鐙珛鍦烘櫙
@@ -810,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();
@@ -856,6 +928,7 @@
}
this.showAddBox = false;
+ this.$forceUpdate();
}
this.editData = {};
},
@@ -879,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;
},
@@ -891,6 +993,7 @@
newRule.rule_with_pre = "&&";
newRule.is_save_anyhow = true;
}
+
this.SeparateRules[this.addData.index].rules.push(newRule);
}
@@ -914,13 +1017,16 @@
},
//鍙栨秷淇敼
- async backToOrigin(type, index) {
+ async backToOrigin(type, index, ids) {
if (type === "separate") {
const rsp = await getCameraSceneRule({
cameraId: this.Camera.cameraId,
});
if (rsp && rsp.success) {
let rules = rsp.data.rules ? rsp.data.rules : [];
+ rules.forEach((item) => {
+ item.cameraIds = rsp.data.cameraInfo.id;
+ });
if (rules[index]) {
this.SeparateRules[index] = rules[index];
} else {
@@ -930,32 +1036,24 @@
this.$forceUpdate();
this.connectLine();
} else {
- getLinkSceneRule({ cameraIds: [this.Camera.cameraId] })
- .then((rsp) => {
- if (rsp && rsp.success) {
- let rules = rsp.data;
- console.log(rules);
- if (rules[index]) {
- console.log(1111);
- this.linkageRule[index] = rules[index];
- this.linkageRule.group_rules = this.linkageRule.rules;
- } else {
- console.log(2222);
- this.linkageRule.splice(index, 1);
- }
- this.$forceUpdate();
- this.connectLine2();
+ 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];
+ } else {
+ this.linkageRule.splice(index, 1);
}
- console.log("澶辫触");
- })
- .catch((err) => {
- console.log(err);
- });
+ this.$forceUpdate();
+ this.connectLine2();
+ }
+ console.log("澶辫触");
+ });
}
},
// 缂栬緫绠楁硶
- editSdk(sdkIndex, type, ruleIndex, Cameras) {
+ editSdk(sdkIndex, type, ruleIndex) {
this.addData = {};
this.ruleType = type;
if (type === "separate") {
@@ -970,13 +1068,21 @@
ruleIndex,
sdkIndex,
type,
- cameras: Cameras,
+ camera_polygons: this.linkageRule[ruleIndex].camera_polygons,
sdk: this.linkageRule[ruleIndex].rules[sdkIndex],
};
}
this.showSdkBox = false;
this.showSdkSettingBox = true;
+ },
+
+ deletRule(type, index) {
+ if (type === "separate") {
+ this.SeparateRules.splice(index, 1);
+ } else {
+ this.linkageRule.splice(index, 1);
+ }
},
getEditSdk(newRule) {
@@ -1116,7 +1222,7 @@
.control {
position: absolute;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
top: 20px;
right: 20px;
@@ -1177,7 +1283,7 @@
.control {
position: absolute;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
top: 20px;
right: 20px;
@@ -1224,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;
@@ -1246,6 +1375,8 @@
}
.swiper-box-container2 {
+ margin: 0;
+ margin-top: -13px;
width: 568px;
}
@@ -1268,7 +1399,7 @@
.swiper-next-border ::v-deep {
position: absolute;
bottom: 146px;
- right: 10px;
+ right: 58px;
cursor: pointer;
z-index: 1;
--
Gitblit v1.8.0