From 658915facb9ec5a5ad83abceb4d64dccac15e631 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 29 三月 2022 14:52:46 +0800
Subject: [PATCH] 摄像机管理
---
src/views/hashrate/CameraManage/CameraRules/components/SceneRule.vue | 1
src/views/hashrate/CameraManage/CameraRules/components/SdkBox.vue | 3
src/components/subComponents/VueCron.vue | 112 ++-
src/views/hashrate/CameraManage/index.vue | 15
src/views/hashrate/CameraManage/CameraRules/components/SdkSettingBox.vue | 210 +++++++
src/views/hashrate/CameraManage/CameraRules/components/LinkageCameraBox.vue | 335 ++++++++++++
src/components/giantTree/index.vue | 1
src/views/search/components/giantTree/index.vue | 1
src/views/manageCenter/index.vue | 10
src/views/hashrate/CameraManage/CameraRules/components/RuleItem.vue | 86 ++
src/views/hashrate/CameraManage/CameraRules/index.vue | 769 ++++++++++++++++++++--------
src/views/search/components/treeMenu/jsTree/tree.vue | 49
src/views/hashrate/CameraManage/CameraRules/components/CameraBox.vue | 9
13 files changed, 1,262 insertions(+), 339 deletions(-)
diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue
index ab602d2..356d6d2 100644
--- a/src/components/giantTree/index.vue
+++ b/src/components/giantTree/index.vue
@@ -315,7 +315,6 @@
itemCheck(evt, treeId, treeNode) {
this.TreeDataPool.selectedNode = treeNode;
this.TreeDataPool.treeType = this.treeName;
- debugger;
// 澶氶��
// this.ztreeObj.checkNode(treeNode, true, false, false);
let checkedNodes = this.ztreeObj.getCheckedNodes(true);
diff --git a/src/components/subComponents/VueCron.vue b/src/components/subComponents/VueCron.vue
index 07dcc3c..180fc5f 100644
--- a/src/components/subComponents/VueCron.vue
+++ b/src/components/subComponents/VueCron.vue
@@ -1,7 +1,12 @@
<template>
<div>
- <b style="padding-right:30px;">瀹氭椂閲嶅惎:</b>
- <el-select v-model="every" placeholder="璇烽�夋嫨" size="small" @change="changeEvery">
+ <b style="padding-right: 30px">瀹氭椂閲嶅惎:</b>
+ <el-select
+ v-model="every"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ @change="changeEvery"
+ >
<el-option label="鍏抽棴" value="never"></el-option>
<el-option label="姣忓ぉ" value="day"></el-option>
<el-option label="姣忓懆" value="week"></el-option>
@@ -16,7 +21,12 @@
style="margin-left: 20px"
@change="updateExpression"
>
- <el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value"></el-option>
+ <el-option
+ v-for="item in days"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
<el-select
@@ -39,7 +49,7 @@
<el-time-picker
v-show="every !== 'never'"
v-model="time"
- :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
+ :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
value-format="HH:mm"
format="HH:mm"
placeholder="浠绘剰鏃堕棿鐐�"
@@ -54,7 +64,8 @@
size="small"
style="margin-left: 20px"
@click="save"
- >淇濆瓨</el-button>
+ >淇濆瓨</el-button
+ >
</div>
</template>
@@ -64,21 +75,21 @@
props: ["expression"],
computed: {
days: () => {
- let arr = []
+ let arr = [];
for (let i = 1; i < 32; i++) {
arr.push({
label: i + "鏃�",
- value: i + ""
- })
+ value: i + "",
+ });
}
- return arr
- }
+ return arr;
+ },
},
watch: {
expression: function () {
- this.resolveExp()
- }
+ this.resolveExp();
+ },
},
data() {
return {
@@ -90,13 +101,13 @@
hour: "*",
day: "*",
month: "*",
- week: "*"
+ week: "*",
},
- cronText: ""
- }
+ cronText: "",
+ };
},
mounted() {
- this.resolveExp()
+ this.resolveExp();
},
methods: {
resolveExp() {
@@ -106,22 +117,22 @@
let arr = this.expression.split(" ");
if (arr.length >= 5) {
//6 浣嶄互涓婃槸鍚堟硶琛ㄨ揪寮�
- this.cronValueObj.min = arr[0]
- this.cronValueObj.hour = arr[1]
- this.cronValueObj.day = arr[2]
+ this.cronValueObj.min = arr[0];
+ this.cronValueObj.hour = arr[1];
+ this.cronValueObj.day = arr[2];
// this.cronValueObj.month = arr[3],
- this.cronValueObj.month = "*"
- this.cronValueObj.week = arr[4]
+ this.cronValueObj.month = "*";
+ this.cronValueObj.week = arr[4];
}
if (this.cronValueObj.week != "*") {
- this.every = "week"
+ this.every = "week";
} else if (this.cronValueObj.day != "*") {
- this.every = "month"
+ this.every = "month";
} else {
- this.every = "day"
+ this.every = "day";
}
- this.time = this.cronValueObj.hour + ":" + this.cronValueObj.min
+ this.time = this.cronValueObj.hour + ":" + this.cronValueObj.min;
} else {
//娌℃湁浼犲叆鐨勮〃杈惧紡 鍒欒繕鍘�
this.clearCron();
@@ -130,45 +141,45 @@
changeEvery() {
this.saveBtn = true;
if (this.every === "never") {
- this.cronText = ""
- return
+ this.cronText = "";
+ return;
}
if (this.every === "month") {
- this.cronValueObj.week = "*"
- this.cronValueObj.day = "1"
+ this.cronValueObj.week = "*";
+ this.cronValueObj.day = "1";
if (!this.time.length) {
- this.time = "00:00"
+ this.time = "00:00";
}
}
if (this.every === "week") {
- this.cronValueObj.day = "*"
- this.cronValueObj.week = "1"
+ this.cronValueObj.day = "*";
+ this.cronValueObj.week = "1";
if (!this.time.length) {
- this.time = "00:00"
+ this.time = "00:00";
}
}
if (this.every === "day") {
- this.cronValueObj.day = "*"
- this.cronValueObj.week = "*"
+ this.cronValueObj.day = "*";
+ this.cronValueObj.week = "*";
}
- this.updateExpression()
+ this.updateExpression();
},
updateExpression() {
this.saveBtn = true;
if (this.time.length) {
let arr = this.time.split(":");
- this.cronValueObj.hour = arr[0]
- this.cronValueObj.min = arr[1]
+ this.cronValueObj.hour = arr[0];
+ this.cronValueObj.min = arr[1];
}
- this.crontabValueString()
+ this.crontabValueString();
},
clearCron() {
- this.cronValueObj.second = "*"
- this.cronValueObj.min = "*"
- this.cronValueObj.hour = "*"
- this.cronValueObj.day = "*"
- this.cronValueObj.month = "*"
- this.cronValueObj.week = "*"
+ this.cronValueObj.second = "*";
+ this.cronValueObj.min = "*";
+ this.cronValueObj.hour = "*";
+ this.cronValueObj.day = "*";
+ this.cronValueObj.month = "*";
+ this.cronValueObj.week = "*";
},
crontabValueString: function () {
let obj = this.cronValueObj;
@@ -181,14 +192,13 @@
" " +
obj.month +
" " +
- obj.week
+ obj.week;
},
save() {
- debugger
- this.$emit("update", this.cronText)
- }
- }
-}
+ this.$emit("update", this.cronText);
+ },
+ },
+};
</script>
<style lang="scss">
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/CameraBox.vue b/src/views/hashrate/CameraManage/CameraRules/components/CameraBox.vue
index 6420fe4..77bed71 100644
--- a/src/views/hashrate/CameraManage/CameraRules/components/CameraBox.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/components/CameraBox.vue
@@ -19,14 +19,14 @@
<div class="label">澶勭悊鏂瑰紡:</div>
<div
class="button pollingBtn"
- :class="{ active: camera.analytics && !camera.dealWay }"
+ :class="{ active: !camera.dealWay }"
@click="changePoll(false)"
>
杞
</div>
<div
class="button realtimeBtn"
- :class="{ active: camera.analytics && camera.dealWay }"
+ :class="{ active: camera.dealWay }"
@click="changePoll(true)"
>
瀹炴椂
@@ -108,6 +108,10 @@
//瀹炴椂銆佽疆璇㈠垏鎹�
changePoll(row) {
+ if (!this.camera.analytics) {
+ return;
+ }
+
//鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
if (this.camera.cameraId && this.camera.cameraId !== undefined) {
if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
@@ -116,7 +120,6 @@
} else {
this.camera.dealWay = false;
}
- debugger;
changeRunType({
camera_ids: [this.camera.cameraId],
run_type: this.camera.dealWay ? 1 : 0,
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/LinkageCameraBox.vue b/src/views/hashrate/CameraManage/CameraRules/components/LinkageCameraBox.vue
new file mode 100644
index 0000000..e666862
--- /dev/null
+++ b/src/views/hashrate/CameraManage/CameraRules/components/LinkageCameraBox.vue
@@ -0,0 +1,335 @@
+<template>
+ <div class="CameraBox">
+ <div v-if="cameras">
+ <div v-for="(camera, index) in cameraArr" :key="index" class="boxItem">
+ <div class="header">
+ <i class="iconfont"></i>
+ <div class="name">{{ camera.cameraName }}</div>
+ <el-switch
+ v-model="camera.analytics"
+ @change="pollEnable($event, index)"
+ active-color="#D4E3FA"
+ inactive-color="#E9EBEE"
+ :width="56"
+ >
+ </el-switch>
+ </div>
+
+ <div class="body">
+ <div class="row">
+ <div class="label">澶勭悊鏂瑰紡:</div>
+ <div
+ class="button pollingBtn"
+ :class="{ active: !camera.dealWay }"
+ @click="changePoll(false, index)"
+ >
+ 杞
+ </div>
+ <div
+ class="button realtimeBtn"
+ :class="{ active: camera.dealWay }"
+ @click="changePoll(true, index)"
+ >
+ 瀹炴椂
+ </div>
+ </div>
+ <div class="row">
+ <div class="label">鍒嗚鲸鐜�:</div>
+ <div
+ class="data"
+ v-if="camera.camearInfo.resolution_width != undefined"
+ >
+ {{
+ camera.camearInfo.resolution_width == 0 ||
+ camera.camearInfo.resolution_height == 0
+ ? "鏈満鍒嗚鲸鐜�"
+ : `${camera.camearInfo.resolution_width} * ${camera.camearInfo.resolution_height}`
+ }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="footer">
+ <div class="button addModel">娣诲姞鍒版ā鏉�</div>
+ <div class="button addRule" @click="addRule">娣诲姞鏂板満鏅�</div>
+ </div>
+ </div>
+
+ <div class="empty" v-else>鏆傛湭鑾峰緱鎽勫儚鏈轰俊鎭�</div>
+ </div>
+</template>
+
+<script>
+import { changeRunType } from "@/api/pollConfig";
+import VideoRuleData from "@/Pool/VideoRuleData";
+
+export default {
+ props: {
+ cameras: {
+ type: Array,
+ },
+ },
+ created() {
+ this.getCameraInfo();
+ },
+
+ data() {
+ return {
+ cameraArr: [],
+ };
+ },
+ methods: {
+ //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊
+ pollEnable(row, index) {
+ let val = 0;
+ if (row) {
+ if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
+ this.cameraArr[index].dealWay = true;
+ val = 1;
+ } else {
+ this.cameraArr[index].dealWay = false;
+ val = 0;
+ }
+ } else {
+ this.cameraArr[index].dealWay = false;
+ val = -1;
+ }
+ if (
+ this.cameraArr[index].cameraId &&
+ this.cameraArr[index].cameraId !== undefined
+ ) {
+ changeRunType({
+ camera_ids: [this.cameraArr[index].cameraId],
+ run_type: val,
+ }).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.$notify({
+ type: "success",
+ message: "閰嶇疆鎴愬姛",
+ });
+ } else {
+ this.$notify({
+ type: "error",
+ message: "閰嶇疆澶辫触",
+ });
+ }
+ this.TreeDataPool.fetchTreeData();
+ });
+ }
+ // this.PollData.statisticTaskInfo();
+ },
+
+ //瀹炴椂銆佽疆璇㈠垏鎹�
+ changePoll(row, index) {
+ if (!this.cameraArr[index].analytics) {
+ return;
+ }
+
+ //鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
+ if (
+ this.cameraArr[index].cameraId &&
+ this.cameraArr[index].cameraId !== undefined
+ ) {
+ if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
+ if (row) {
+ this.cameraArr[index].dealWay = true;
+ } else {
+ this.cameraArr[index].dealWay = false;
+ }
+ changeRunType({
+ camera_ids: [this.cameraArr[index].cameraId],
+ run_type: this.cameraArr[index].dealWay ? 1 : 0,
+ }).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.$notify({
+ type: "success",
+ message: "閰嶇疆鎴愬姛",
+ });
+ } else {
+ this.$notify({
+ type: "error",
+ message: "閰嶇疆澶辫触",
+ });
+ }
+ });
+ } else {
+ if (this.cameraArr[index].dealWay) {
+ this.cameraArr[index].dealWay = false;
+ changeRunType({
+ camera_ids: [this.cameraArr[index].cameraId],
+ run_type: this.cameraArr[index].dealWay ? 1 : 0,
+ }).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.$notify({
+ type: "success",
+ message: "閰嶇疆鎴愬姛",
+ });
+ } else {
+ this.$notify({
+ type: "error",
+ message: "閰嶇疆澶辫触",
+ });
+ }
+ });
+ }
+ }
+ this.TreeDataPool.fetchTreeData();
+ // this.PollData.statisticTaskInfo();
+ }
+ },
+
+ // 鏄剧ず鏂板寮圭獥
+ addRule() {
+ this.$emit("addLinkageRule");
+ },
+
+ getCameraInfo() {
+ this.cameras.forEach((id) => {
+ let newCamera = new VideoRuleData(id);
+ this.cameraArr.push(newCamera);
+ });
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.CameraBox {
+ margin-bottom: 20px;
+ width: 236px;
+ border-radius: 5px;
+ background-color: #fff;
+ filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
+
+ .boxItem {
+ height: 156px;
+ }
+
+ .header {
+ display: flex;
+ box-sizing: border-box;
+ padding: 0 10px;
+ height: 44px;
+ background: #f0f5fa;
+ align-items: center;
+
+ i {
+ font-size: 18px;
+ margin-right: 6px;
+ color: #0065ff;
+ }
+
+ .name {
+ width: 136px;
+ font-size: 14px;
+ color: #5f5f5f;
+ }
+
+ .el-switch ::v-deep {
+ height: 24px;
+ .el-switch__core {
+ height: 24px;
+ border-radius: 16px;
+ }
+ .el-switch__core::after {
+ margin-top: 2px;
+ margin-left: 3px;
+ width: 16px;
+ height: 16px;
+ background: #999999;
+ }
+ }
+ .el-switch.is-checked ::v-deep {
+ .el-switch__core::after {
+ margin-left: -20px;
+
+ background-color: #0065ff;
+ }
+ }
+ }
+
+ .body {
+ box-sizing: border-box;
+ padding: 0 10px 20px 10px;
+ .row {
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+
+ .label {
+ width: 70px;
+ font-size: 12px;
+ color: #666;
+ }
+
+ .button {
+ position: relative;
+ width: 73px;
+ height: 24px;
+ text-align: center;
+ border: 1px solid #c0c5cc;
+ font-size: 12px;
+ color: #999;
+ border-radius: 5px;
+ line-height: 24px;
+
+ &.pollingBtn {
+ &.active {
+ z-index: 1;
+ background: #ff6a00;
+ border: 1px solid #ff6a00;
+ color: #fff;
+ }
+ }
+
+ &.realtimeBtn {
+ margin-left: -5px;
+ background-color: #fff;
+
+ &.active {
+ z-index: 1;
+ background: #0065ff;
+ border: 1px solid #0065ff;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+
+ .footer {
+ box-sizing: border-box;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ border-top: 1px solid #e9ebee;
+
+ .addModel {
+ margin-right: 10px;
+ width: 102px;
+ height: 32px;
+ text-align: center;
+ line-height: 32px;
+ border: 1px solid #0065ff;
+ color: #0065ff;
+ }
+
+ .addRule {
+ width: 102px;
+ height: 32px;
+ text-align: center;
+ line-height: 32px;
+ border: 1px solid #0065ff;
+ background-color: #0065ff;
+ color: #fff;
+ }
+ }
+}
+
+.empty {
+ box-sizing: border-box;
+ padding-top: 80px;
+ text-align: center;
+ color: #ccc;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/RuleItem.vue b/src/views/hashrate/CameraManage/CameraRules/components/RuleItem.vue
index 8ef23dc..f385dce 100644
--- a/src/views/hashrate/CameraManage/CameraRules/components/RuleItem.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/components/RuleItem.vue
@@ -30,7 +30,11 @@
:key="index"
>
<div class="relation" v-if="item.rule_with_pre">
- <el-select v-model="item.rule_with_pre" placeholder="閫夊叧绯�">
+ <el-select
+ v-model="item.rule_with_pre"
+ placeholder="閫夊叧绯�"
+ @change="update"
+ >
<el-option
v-for="item in sdkConnects"
:value="item.value"
@@ -39,14 +43,24 @@
:key="item.id"
></el-option>
</el-select>
+ <div>
+ <el-checkbox
+ v-show="
+ item.rule_with_pre == '=>' || item.rule_with_pre == '!=>'
+ "
+ v-model="item.is_save_anyhow"
+ @change="update"
+ >淇濆瓨杩囩▼鏁版嵁</el-checkbox
+ >
+ </div>
</div>
<div class="imgBox">
<img :src="item.icon_blob" alt="" />
<div class="mask">
<div class="mask_del">
- <i class="iconfont"></i>
+ <i class="iconfont" @click="delSdk(index)"></i>
</div>
- <div class="mask_edit">
+ <div class="mask_edit" @click="editSdk(index)">
<i class="iconfont"></i>
</div>
</div>
@@ -76,7 +90,7 @@
<div class="content">
<div class="btns">
<div class="button cancel" @click="backToOrigin">鍙栨秷</div>
- <div class="button submit">淇濆瓨</div>
+ <div class="button submit" @click="save">淇濆瓨</div>
</div>
</div>
</div>
@@ -86,16 +100,17 @@
<script>
import bus from "@/plugin/bus";
-import { logout } from "@/api/login";
+import { saveLinkScene, saveCameraScene } from "@/api/scene";
+
export default {
props: {
rule: {},
+ ruleType: {},
},
created() {
- this.originRule = JSON.parse(JSON.stringify(this.rule));
this.getSdkConnection();
bus.$on("addSdk", () => {
- if (this.rule.rules.length < 4) {
+ if (this.rule.rules && this.rule.rules.length < 4) {
this.showAddBox = true;
}
});
@@ -132,7 +147,6 @@
},
],
showAddBox: false,
- originRule: {},
};
},
computed: {
@@ -173,8 +187,57 @@
edit() {
this.$emit("edit");
},
+ delSdk(index) {
+ this.rule.rules.splice(index, 1);
+
+ if (this.rule.rules[index]) {
+ this.rule.rules[index].rule_with_pre = "";
+ }
+
+ console.log(this.rule.rules);
+ },
backToOrigin() {
- this.$emit("backToOrigin", this.originRule);
+ this.$emit("backToOrigin");
+ },
+ editSdk(index) {
+ this.$emit("editSdk", index);
+ },
+ save() {
+ if (this.ruleType === "separate") {
+ this.rule.cameraIds = [this.rule.cameraId];
+ saveCameraScene(this.rule).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.$notify({
+ type: "success",
+ message: "绛栫暐淇濆瓨鎴愬姛锛�",
+ });
+ }
+ });
+ } else {
+ saveLinkScene(this.rule)
+ .then((rsp) => {
+ if (rsp && rsp.success) {
+ this.$notify({
+ type: "success",
+ message: "浠诲姟淇濆瓨鎴愬姛锛�",
+ });
+ } else {
+ this.$notify({
+ type: "error",
+ message: rsp.data,
+ });
+ }
+ })
+ .catch((err) => {
+ this.$message({
+ type: "error",
+ message: "淇濆瓨澶辫触锛�",
+ });
+ });
+ }
+ },
+ update() {
+ this.$forceUpdate();
},
},
};
@@ -376,5 +439,10 @@
margin: 10px 0 10px 20px;
border-right: 1px solid #e9ebee;
}
+
+ .el-checkbox {
+ margin-top: 5px;
+ margin-left: 10px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/SceneRule.vue b/src/views/hashrate/CameraManage/CameraRules/components/SceneRule.vue
index 20e04c1..02ba214 100644
--- a/src/views/hashrate/CameraManage/CameraRules/components/SceneRule.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/components/SceneRule.vue
@@ -323,7 +323,6 @@
});
return false;
}
- debugger;
this.eventAudio.src = this.soundPath;
if (this.togglePlay) {
this.eventAudio.play();
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/SdkBox.vue b/src/views/hashrate/CameraManage/CameraRules/components/SdkBox.vue
index 1269354..a9d5f93 100644
--- a/src/views/hashrate/CameraManage/CameraRules/components/SdkBox.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/components/SdkBox.vue
@@ -20,9 +20,6 @@
<script>
import bus from "@/plugin/bus";
export default {
- mounted() {
- this.TaskMange.findAllSdk({ installed: true });
- },
methods: {
close() {
this.$emit("close");
diff --git a/src/views/hashrate/CameraManage/CameraRules/components/SdkSettingBox.vue b/src/views/hashrate/CameraManage/CameraRules/components/SdkSettingBox.vue
index a5ec2ac..c1e1726 100644
--- a/src/views/hashrate/CameraManage/CameraRules/components/SdkSettingBox.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/components/SdkSettingBox.vue
@@ -61,14 +61,14 @@
<el-input
class="range-min"
v-model="arg.min"
- @input="forceUpdate"
+ @input="rangeInput(arg)"
@blur="validateArgVal(arg, $event)"
></el-input>
<span class="devide"></span>
<el-input
class="range-max"
v-model="arg.max"
- @input="forceUpdate"
+ @input="rangeInput(arg)"
@blur="validateArgVal(arg, $event)"
></el-input>
<span class="font">{{ arg.unit }}</span>
@@ -206,7 +206,9 @@
<div class="btns">
<div class="cancelBtn button" @click="close">鍙栨秷</div>
- <div class="confirmBtn button" @click="save">娣诲姞</div>
+ <div class="confirmBtn button" @click="save">
+ {{ editSdk ? "淇濆瓨" : "娣诲姞" }}
+ </div>
</div>
</div>
</template>
@@ -224,14 +226,18 @@
type: Boolean,
default: false,
},
- isLinkRule: {
- type: Boolean,
- default: false,
+
+ editSdk: {},
+
+ linkEditCamera: {},
+ },
+ computed: {
+ isLinkRule() {
+ return this.Cameras.length > 1;
},
},
created() {
this.initOption();
- this.initPolygon();
},
data() {
return {
@@ -251,6 +257,10 @@
};
},
methods: {
+ rangeInput(arg) {
+ arg.sdk_arg_value = arg.min + "|" + arg.max;
+ this.$forceUpdate();
+ },
selectPolygonOption(rule) {
rule.polygon_id = rule.polygonObj.polygonId
? rule.polygonObj.polygonId
@@ -258,14 +268,37 @@
rule.camera_id = rule.polygonObj.cameraId
? rule.polygonObj.cameraId
: rule.camera_id;
- rule.group_id = this.group_id;
},
close() {
this.$emit("close");
},
initOption() {
- let sdkItem = this.$store.state.newSdk;
- sdkItem.argDef = JSON.parse(sdkItem.argDef);
+ this.initPolygon();
+ let sdkItem = null;
+ if (this.editSdk) {
+ this.TaskMange.list1.forEach((item) => {
+ if (item.id === this.editSdk.sdk_id) {
+ sdkItem = item;
+ }
+ });
+
+ if (typeof sdkItem.argDef === "string") {
+ sdkItem.argDef = JSON.parse(sdkItem.argDef);
+ }
+
+ this.sdkItem = sdkItem;
+ this.sdkItem.sdk_set = JSON.parse(JSON.stringify(this.editSdk.sdk_set));
+ this.sdkItem.polygon_id = this.editSdk.polygon_id;
+
+ this.editRule();
+ return;
+ } else {
+ sdkItem = this.$store.state.newSdk;
+ }
+ console.log(typeof sdkItem.argDef);
+ if (typeof sdkItem.argDef === "string") {
+ sdkItem.argDef = JSON.parse(sdkItem.argDef);
+ }
//鍙栧嚭榛樿鍙傛暟
sdkItem.defaultArg = sdkItem.argDef.filter(
(arg) => !arg.config.isOptional
@@ -304,25 +337,157 @@
this.sdkItem = sdkItem;
},
initPolygon() {
- let polygon = [];
- let cameras = [...this.Cameras];
+ let cameras = [];
+ if (this.linkEditCamera) {
+ cameras = this.linkEditCamera;
+ } else {
+ cameras = [...this.Cameras];
+ }
for (let i = 0; i < cameras.length; i++) {
let polyOpt = cameras[i].polygonData.map((p) => {
return {
defence_state: p.defence_state,
polygonId: p.id,
- name: this.isLinkRule
- ? cameras[i].cameraName + ":" + p.name
- : p.name,
+ name:
+ this.isLinkRule || this.linkEditCamera
+ ? cameras[i].cameraName + ":" + p.name
+ : p.name,
cameraId: cameras[i].cameraId,
};
});
- polygon = polygon.concat(polyOpt);
-
- this.allPolygonData = polygon;
+ this.allPolygonData = this.allPolygonData.concat(polyOpt);
}
+
+ this.$forceUpdate();
+ },
+
+ editRule() {
+ let tempObj = {};
+
+ // 濉厖鍖哄煙閫夐」鍒楄〃
+ this.allPolygonData.forEach((p) => {
+ if (p.polygonId === this.sdkItem.polygon_id) {
+ this.sdkItem.polygonObj = p;
+ }
+ });
+
+ if (!this.sdkItem.polygonObj) {
+ this.sdkItem.polygonObj = {
+ cameraId: this.sdkItem.camera_id,
+ defence_state: 1,
+ name: "鏈煡鍖哄煙",
+ polygonId: this.sdkItem.polygon_id,
+ };
+ }
+
+ // 璁剧疆鍖哄煙
+ this.selectPolygonOption(this.sdkItem);
+
+ //绠楁硶瀵硅薄,绠楁硶鍙傛暟閰嶇疆鏁扮粍,(鐢ㄤ簬鏁版嵁澶勭悊鐨�)榛樿鍙傛暟鏁扮粍, 鍙�夊弬鏁版暟缁�, 宸查厤缃殑鍙�夊弬鏁版暟缁�, (鐢ㄤ簬鍘婚噸鍒ゆ柇)瀛樻斁鍙�夊弬鏁板悕鐨勬暟缁�
+ let argDef = [],
+ defaultArg = [],
+ optionalArg = [],
+ optArg = [],
+ optNames = [];
+
+ argDef = this.sdkItem.argDef;
+
+ defaultArg = argDef.filter((arg) => !arg.config.isOptional);
+ optionalArg = argDef.filter((arg) => arg.config.isOptional);
+
+ this.sdkItem.sdk_set.forEach((arg) => {
+ let optItem = optionalArg.find((oarg) => {
+ if (oarg.sort == arg.sort) {
+ return oarg;
+ }
+ });
+ if (optItem) {
+ //if (optItem.operators.length > 1) {
+ optItem.operator = arg.operator;
+ //this.selOperator(optItem)
+ //}
+
+ //璧嬪��
+ optItem.sdk_arg_value = arg.sdk_arg_value;
+ //if(arg.sdk_arg_value.indexOf(',')>0){
+ //鍒ゆ柇鏄惁鏄閫夊�肩被鍨嬬殑鍙傛暟
+ let isMultiOne = optionalArg.find(
+ (oarg) => oarg.sort == optItem.sort && optItem.config.isMulti
+ );
+ if (isMultiOne) {
+ optItem.sdk_arg_value = arg.sdk_arg_value.split(",");
+ }
+
+ if (optItem.type == "option") {
+ this.setOptArgValueOptions(optItem);
+ }
+ if (optItem.alias == "bForceSend") {
+ }
+ //鍦╬ush涔嬪墠,闇�瑕佸垽鏂槸鍚﹂厤缃簡杩欎釜鍙�夐」 鍦╯dk_set閰嶇疆鏁扮粍閲�,
+
+ optArg.push(optItem);
+ } else {
+ defaultArg.forEach((d) => {
+ if (d.sort == arg.sort) {
+ if (arg.sdk_arg_value.indexOf("|") > 0) {
+ //鍖洪棿鍊�
+ d.min = arg.sdk_arg_value.split("|")[0];
+ d.max = arg.sdk_arg_value.split("|")[1];
+ d.operator = "range";
+ //} else if(arg.sdk_arg_value.indexOf(',') > 0){
+ } else if (arg.operator_type == "option") {
+ //澶氶�夌被鍨嬬殑鍊�
+ d.sdk_arg_value = arg.sdk_arg_value.split(",");
+ this.setOptArgValueOptions(d);
+ } else {
+ d.sdk_arg_value = arg.sdk_arg_value;
+ }
+ d.operator = arg.operator;
+ }
+ });
+ }
+ });
+ optNames = optionalArg.map((arg) => ({
+ name: arg.name,
+ sort: arg.sort,
+ isSelected: false,
+ }));
+
+ tempObj = {
+ polygonObj: this.sdkItem.polygonObj,
+ rule_with_pre: this.sdkItem.rule_with_pre,
+ is_save_anyhow: this.sdkItem.is_save_anyhow,
+ isSpread: true,
+ argDef,
+ initAddOptional: false,
+ optionalArg,
+ optArg,
+ defaultArg,
+ optNames,
+ isAddable: true,
+ camera_id: this.sdkItem.camera_id,
+ polygon_id: this.sdkItem.polygon_id,
+ sdk_id: this.editSdk.sdk_id,
+ rule_with_pre: this.editSdk.rule_with_pre,
+ is_save_anyhow: this.editSdk.is_save_anyhow,
+ icon_blob: this.editSdk.icon_blob,
+ };
+ //鍥炴樉鏄惁鏄剧ず娣诲姞鍙�夊弬鏁�
+ tempObj.initAddOptional =
+ tempObj.optArg.length == 0 && tempObj.optionalArg.length > 0
+ ? true
+ : false;
+ //鍥炴樉鏄惁鏄剧ず鍙�夊弬鏁版坊鍔犳寜閽�
+ if (tempObj.optArg.length < tempObj.optionalArg.length) {
+ tempObj.isAddable = true;
+ } else {
+ tempObj.isAddable = false;
+ }
+
+ this.sdkItem = tempObj;
+ this.$forceUpdate();
},
validateArgVal(sdkArgItem, e) {
@@ -645,9 +810,8 @@
console.log(this.sdkItem);
let tempObj = {
- sdk_id: this.sdkItem.id,
+ sdk_id: this.editSdk ? this.sdkItem.sdk_id : this.sdkItem.id,
camera_id: this.sdkItem.camera_id,
- group_id: "",
is_save_anyhow: this.sdkItem.is_save_anyhow,
polygon_id: this.sdkItem.polygon_id,
rule_with_pre: this.sdkItem.rule_with_pre,
@@ -763,7 +927,11 @@
tempObj.sdk_set = defaultArgs.concat(optArgs);
tempObj.icon_blob = this.$store.state.newSdk.iconBlob;
- this.$emit("getNewSdk", tempObj);
+ if (this.editSdk) {
+ this.$emit("getEditSdk", tempObj);
+ } else {
+ this.$emit("getNewSdk", tempObj);
+ }
},
},
watch: {
diff --git a/src/views/hashrate/CameraManage/CameraRules/index.vue b/src/views/hashrate/CameraManage/CameraRules/index.vue
index 2b05257..5b774ad 100644
--- a/src/views/hashrate/CameraManage/CameraRules/index.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/index.vue
@@ -42,35 +42,92 @@
<!-- 缁樺埗鍖哄煙canvas -->
<div class="right">
- <div class="title">缁樺埗鍖哄煙</div>
- <div class="button draw" @click="drawBaseImg">缁樺埗鍖哄煙</div>
- <polygon-canvas
- class="cavas"
- ref="canvas"
- v-if="showCanvas"
- v-loading="loading"
- element-loading-text="鍒锋柊涓紝璇风◢绛�..."
- element-loading-background="rgba(0, 0, 0, 0.8)"
- :isShowDrawArrow="false"
- :disabled="false"
- :snapshot_url="Camera.baseImg"
- :canvasDataShow="Camera.canvasData"
- :currentCameraId="Camera.cameraId"
- :loading="Camera.loading"
- :canvasWidth="canvasWidth"
- :canvasHeight="canvasHeight"
- @fromCanvas="getCanvasData"
- @changeLoading="changeLoading"
- @refresh="refresh"
- ></polygon-canvas>
+ <div class="draw-box" v-if="!TreeDataPool.multiple">
+ <div class="title">缁樺埗鍖哄煙</div>
+ <div class="button draw" @click="drawBaseImg">缁樺埗鍖哄煙</div>
+ <polygon-canvas
+ class="cavas"
+ ref="canvas"
+ v-if="showCanvas"
+ v-loading="loading"
+ element-loading-text="鍒锋柊涓紝璇风◢绛�..."
+ element-loading-background="rgba(0, 0, 0, 0.8)"
+ :isShowDrawArrow="false"
+ :disabled="false"
+ :snapshot_url="Camera.baseImg"
+ :canvasDataShow="Camera.canvasData"
+ :currentCameraId="Camera.cameraId"
+ :loading="Camera.loading"
+ :canvasWidth="canvasWidth"
+ :canvasHeight="canvasHeight"
+ @fromCanvas="getCanvasData"
+ @changeLoading="changeLoading"
+ @refresh="refresh"
+ ></polygon-canvas>
+ </div>
+
+ <div class="draw-box" v-else>
+ <div class="title">鏌ョ湅鍖哄煙</div>
+ <div class="img-box">
+ <span class="camera-tip" v-show="swipercanvasData.length == 0"
+ >鏆傛棤鍖哄煙锛岃鑷冲皯閫夋嫨2涓憚鍍忔満</span
+ >
+ <!-- swiper 灞曠ず -->
+ <swiper
+ ref="swiper"
+ :options="swiperOption"
+ class="swiper-box-container2"
+ >
+ <swiper-slide
+ v-for="(data, index) in swipercanvasData"
+ :key="index"
+ >
+ <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"
+ :isShowDrawArrow="true"
+ :isLink="true"
+ :disabled="false"
+ :loading="data.loading"
+ :snapshot_url="data.baseImg"
+ :canvasDataShow="data.canvasData"
+ :currentCameraId="data.cameraId"
+ @changeLoading="changeLoading"
+ @refresh="refresh2"
+ ></polygon-canvas>
+ </swiper-slide>
+ </swiper>
+ <div class="swiper-pre-border" v-show="swipercanvasData.length > 1">
+ <div class="icon-btn" slot="button-prev">
+ <i class="iconfont"></i>
+ </div>
+ </div>
+ <div
+ class="swiper-next-border"
+ v-show="swipercanvasData.length > 1"
+ >
+ <div class="icon-btn" slot="button-next">
+ <i class="iconfont"></i>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
<!-- 鐙珛鍦烘櫙鍖哄煙 -->
- <div class="SeparateRules">
+ <div class="SeparateRules" @click="selectMultiple(false)">
<div class="title">鐙珛鍦烘櫙</div>
<div class="control">
- <i class="iconfont" @click="showSdkBox = true"></i>
+ <i class="iconfont" @click="openSdkBox($event)"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
</div>
@@ -84,16 +141,18 @@
></CameraBox>
<!-- 鍦烘櫙鍖哄煙 -->
- <div class="RuleArea">
+ <div class="RuleArea" v-if="show">
<template v-if="SeparateRules.length > 0">
<RuleItem
v-for="(item, index) in SeparateRules"
:key="index"
:rule="item"
:id="'rule_' + index"
- @edit="editSeparateRules(item, index)"
+ :ruleType="'separate'"
+ @edit="editRules(item, index, 'separate')"
@addSdk="addSdk('separate', index)"
- @backToOrigin="backToOrigin($event, item)"
+ @backToOrigin="backToOrigin('separate', index)"
+ @editSdk="editSdk($event, 'separate', index)"
></RuleItem>
</template>
@@ -105,12 +164,49 @@
</div>
</div>
+ <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>
+ </div>
+ <template v-if="linkageRule.length > 0">
+ <div class="content" v-for="(item, index) in linkageRule" :key="index">
+ <!-- 鎽勫儚鏈� -->
+ <LinkageCameraBox
+ :cameras="item.cameraIds"
+ @addLinkageRule="addLinkageRule"
+ ></LinkageCameraBox>
+ <div class="Anchor" :id="'linkage_camera' + index"></div>
+
+ <!-- 鍦烘櫙鍖哄煙 -->
+ <div class="RuleArea" v-if="show">
+ <RuleItem
+ :ruleType="'linkage'"
+ :rule="item"
+ @edit="editRules(item, index, 'linkage')"
+ @addSdk="addSdk('linkage', index)"
+ @backToOrigin="backToOrigin('linkage', index)"
+ @editSdk="editSdk($event, 'linkage', index, item.Cameras)"
+ :id="'linkage_' + index"
+ ></RuleItem>
+ </div>
+ </div>
+ </template>
+
+ <div class="empty" @click="addLinkageRule" v-else>
+ <img src="/images/hashrate/鑱斿姩鍦烘櫙绌洪〉闈�.png" alt="" />
+ <div class="des">鏆傛棤鑱斿姩鍦烘櫙</div>
+ </div>
+ </div>
+
<!-- 娣诲姞鍦烘櫙寮圭獥 -->
<AddRuleBox
:type="ruleType"
:editData="editData"
v-if="showAddBox"
- @close="showAddBox = false"
+ @close="closeAddBox"
@save="getNewRule"
></AddRuleBox>
@@ -118,147 +214,18 @@
<SdkSettingBox
v-if="showSdkSettingBox"
- @close="showSdkSettingBox = false"
+ @close="closeSettingBox"
@getNewSdk="getNewSdk"
- :Cameras="[Camera]"
+ @getEditSdk="getEditSdk"
+ :editSdk="editSdkObj.sdk"
+ :linkEditCamera="
+ ruleType === 'linkage' && editSdkObj ? editSdkObj.cameras : null
+ "
+ :Cameras="ruleType === 'linkage' ? Carmeras : [Camera]"
></SdkSettingBox>
<!-- 閬僵灞� -->
<div class="mask" v-if="showAddBox || showSdkSettingBox"></div>
-
- <div class="bottom" style="display: none">
- <div class="devide"></div>
- <div class="bottom-right">
- <div class="draw-and-time-box">
- <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"
- >
- <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
- }}</b> -->
- </div>
- <div class="img-box">
- <template v-if="TreeDataPool.treeActiveName == 'camera'">
- <polygon-canvas
- class="cavas"
- ref="canvas"
- v-if="showCanvas"
- v-loading="loading"
- element-loading-text="鍒锋柊涓紝璇风◢绛�..."
- element-loading-background="rgba(0, 0, 0, 0.8)"
- :isShowDrawArrow="false"
- :disabled="false"
- :snapshot_url="Camera.baseImg"
- :canvasDataShow="Camera.canvasData"
- :currentCameraId="Camera.cameraId"
- :loading="Camera.loading"
- :canvasWidth="canvasWidth"
- :canvasHeight="canvasHeight"
- @fromCanvas="getCanvasData"
- @changeLoading="changeLoading"
- @refresh="refresh"
- ></polygon-canvas>
- </template>
- <template v-else>
- <div style="width: 100%" v-loading="getStackFileLoading">
- <swiper
- ref="swiper"
- :auto-update="true"
- :options="canvasSwiperOption"
- @slideChange="swiperSlideChange"
- class="swiper-box-container2"
- style="width: 100%"
- >
- <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
- >
- <polygon-canvas
- class="cavas"
- ref="canvas"
- v-if="showCanvas"
- v-loading="loading"
- element-loading-text="鍒锋柊涓紝璇风◢绛�..."
- element-loading-background="rgba(0, 0, 0, 0.8)"
- :isShowDrawArrow="false"
- :isShowRefresh="false"
- :sourceType="data.type"
- :disabled="false"
- :snapshot_url="data.baseImg"
- :canvasDataShow="Camera.canvasData"
- :currentCameraId="data.stackId"
- :loading="data.loading"
- :canvasWidth="canvasWidth"
- :canvasHeight="canvasHeight"
- @fromCanvas="getCanvasData"
- @changeLoading="changeLoading"
- ></polygon-canvas>
- </div>
- </swiper-slide>
- </swiper>
- <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="icon-btn" slot="button-next">
- <i class="iconfont iconyou1"></i>
- </div>
- </div>
- </div>
- </template>
- </div>
- </div>
- <div style="float: left; width: calc(10% - 90px); height: 100%"></div>
- <div
- class="time-box"
- style="
- width: calc(90% + 90px - 576px);
- overflow-x: auto;
- overflow-y: hidden;
- "
- >
- <p style="text-align: left; padding: 10px; box-sizing: border-box">
- <b style="font-size: 14px">鏃堕棿娈�</b>
- </p>
- <time-slider ref="timeSlider" :type="'sep'" />
- </div>
- </div>
-
- <scene-rule
- :seletedCameras="[Camera]"
- :tableRuleList="Camera.rules"
- :onSaveScene="saveSceneRule"
- @delete-rule="delScenRule"
- ></scene-rule>
- </div>
- </div>
</div>
</template>
@@ -268,6 +235,7 @@
import { savePolygon } from "@/api/polygon";
import { pasteRules } from "@/api/task";
+import { getCameraSceneRule } from "@/api/scene";
import { saveCameraScene, getLinkSceneRule } from "@/api/scene";
@@ -275,13 +243,12 @@
import { findAllFileByStackId } from "@/api/localVedio";
import VideoRuleData from "@/Pool/VideoRuleData";
-import TimeSlider from "./components/TimeSlider";
import polygonCanvas from "@/components/canvas";
import Sysinfo from "@/components/subComponents/SystemInfo";
-import SceneRule from "./components/SceneRule";
import SlideScene from "./components/scene/SlideScene";
import HashrateCard from "@/views/hashrate/CameraManage/CameraRules/components/HashrateCard";
import CameraBox from "@/views/hashrate/CameraManage/CameraRules/components/CameraBox";
+import LinkageCameraBox from "@/views/hashrate/CameraManage/CameraRules/components/LinkageCameraBox";
import RuleItem from "@/views/hashrate/CameraManage/CameraRules/components/RuleItem";
import AddRuleBox from "@/views/hashrate/CameraManage/CameraRules/components/AddRuleBox";
import SdkBox from "@/views/hashrate/CameraManage/CameraRules/components/SdkBox";
@@ -289,10 +256,8 @@
export default {
components: {
- TimeSlider,
polygonCanvas,
Sysinfo,
- SceneRule,
SlideScene,
HashrateCard,
CameraBox,
@@ -300,6 +265,7 @@
AddRuleBox,
SdkBox,
SdkSettingBox,
+ LinkageCameraBox,
},
directives: {
focus: {
@@ -320,6 +286,7 @@
},
data() {
return {
+ show: true,
loading: false,
Camera: new VideoRuleData(),
Carmeras: [],
@@ -337,12 +304,28 @@
},
},
plumbIns: null,
+ plumbIns2: null,
showAddBox: false,
ruleType: "",
showSdkBox: false,
showSdkSettingBox: false,
editData: {},
addData: {},
+ editSdkObj: {},
+ connectArr: [],
+ swipercanvasData: [],
+ swiperOption: {
+ grabCursor: true,
+ pagination: {
+ el: ".swiper-pagination",
+ type: "fraction",
+ },
+ navigation: {
+ nextEl: ".swiper-pre-border",
+ prevEl: ".swiper-next-border",
+ },
+ },
+
// swiperOption: {
// slidesPerView: 5,
// spaceBetween: 8,
@@ -357,6 +340,7 @@
// },
tableRuleList: [],
SeparateRules: [], //鐙珛鍦烘櫙
+ linkageRule: [], //鑱斿姩鍦烘櫙
cameraId: "",
showSysInfo: false,
showCanvas: true,
@@ -364,7 +348,6 @@
canvasHeight: 320,
stackId: "",
swiperIndex: 0,
- swipercanvasData: [],
stackFilesPage: 1,
stackFilesSize: 5,
};
@@ -376,6 +359,7 @@
},
mounted() {
this.PollData.statistics();
+ this.TaskMange.findAllSdk({ installed: true });
},
destroyed() {
document.querySelector("html").style["min-width"] = "1280px";
@@ -395,6 +379,12 @@
}
}
},
+ },
+ Carmeras: {
+ handler(newVal, oldVal) {
+ this.setSwiperData();
+ },
+ deep: true,
},
},
methods: {
@@ -468,9 +458,6 @@
this.getStackFileLoading = false;
});
},
- swiperSlideChange() {
- this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
- },
drawBaseImg() {
if (Array.isArray(this.$refs.canvas)) {
@@ -489,11 +476,43 @@
//this.Camera.getCameraTask();
});
},
+ setSwiperData() {
+ let swipers = [];
+ let carmeras = this.Carmeras;
+ for (let i = 0; i < carmeras.length; i++) {
+ swipers = swipers.concat({
+ cameraId: carmeras[i].cameraId,
+ name: carmeras[i].camearInfo.name,
+ baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined,
+ canvasData: carmeras[i].canvasData,
+ loading: carmeras[i].loading,
+ });
+ }
+ this.swipercanvasData = swipers;
+ },
refresh(url) {
this.Camera.baseImg = url;
},
+ refresh2(url, id) {
+ this.swipercanvasData.forEach((data) => {
+ if (data.cameraId == id) {
+ data.baseImg = url;
+ }
+ });
+ },
+
// 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤
async initCameraData(id) {
+ if (!id) {
+ return;
+ }
+
+ console.log("init");
+
+ this.plumbIns.deleteEveryConnection();
+ this.connectArr.forEach((item) => {
+ item.deleteEveryConnection();
+ });
//鑾峰彇鐙珛鍦烘櫙
let newCamera = new VideoRuleData();
if (id && id !== "") {
@@ -504,12 +523,10 @@
this.Camera = newCamera;
this.SeparateRules = this.Camera.rules;
-
this.$nextTick(() => {
this.connectLine();
});
- this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
this.showSysInfo = true;
// 鍒ゆ柇姝ｅ湪鎵ц瀹炴椂鎴栬�呰疆璇换鍔�
this.PollData.CameraList.forEach((element) => {
@@ -526,36 +543,33 @@
showRules(id) {
let rules = [];
- //澶氶�夋憚鍍忔満妯″紡
- if (this.selectedCameraIds.length && this.TreeDataPool.multiple) {
- getLinkSceneRule({ cameraIds: this.selectedCameraIds })
- .then((rsp) => {
- if (rsp && rsp.success) {
- rules = rsp.data;
- // 缁熶竴瑙勫垯缂栬緫鐨勬暟鎹粨鏋�
- for (let i = 0; i < rules.length; i++) {
- rules[i].group_rules = rules[i].rules;
- }
+ 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;
}
- })
- .catch(() => {});
- //鍗曢�夋憚鍍忔満妯″紡
- } else if (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;
- }
+ this.linkageRule = rules;
- this.$set(this.Camera, "rules", this.Camera.rules.concat(rules));
- }
- })
- .catch(() => {});
- }
+ 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);
+ });
+ });
+ }
+ })
+ .catch(() => {});
},
saveSceneRule(groupRule) {
@@ -597,7 +611,6 @@
val = -1;
}
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
- debugger;
changeRunType({
camera_ids: [this.Camera.cameraId],
run_type: val,
@@ -621,7 +634,6 @@
//瀹炴椂銆佽疆璇㈠垏鎹�
changePoll(row) {
//鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
- debugger;
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
if (row.value) {
@@ -629,7 +641,6 @@
} else {
this.Camera.dealWay = false;
}
- debugger;
changeRunType({
camera_ids: [this.Camera.cameraId],
run_type: this.Camera.dealWay ? 1 : 0,
@@ -649,7 +660,6 @@
} else {
if (this.Camera.dealWay) {
this.Camera.dealWay = false;
- debugger;
changeRunType({
camera_ids: [this.Camera.cameraId],
run_type: this.Camera.dealWay ? 1 : 0,
@@ -739,47 +749,132 @@
}
},
+ connectLine2() {
+ this.connectArr.forEach((item) => {
+ item.deleteEveryConnection();
+ });
+
+ for (let index = 0; index < this.linkageRule.length; index++) {
+ const plumbIns = jsPlumb.getInstance();
+
+ plumbIns.connect({
+ // 瀵瑰簲涓婅堪鍩烘湰姒傚康
+ source: `linkage_camera${index}`,
+ target: `linkage_${index}`,
+ anchor: ["Left", "Right"],
+ connector: ["Straight"],
+ endpoints: [["Blank", { cssClass: "sourcePoint" }], "Blank"],
+ overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
+ // 娣诲姞鏍峰紡
+ paintStyle: { stroke: "#0065FF", strokeWidth: 2 }, // connector
+ endpointStyle: {
+ fill: "#fff",
+ outlineStroke: "#0065FF",
+ }, // endpoint
+ });
+
+ this.connectArr.push(plumbIns);
+ }
+ },
+
//娣诲姞鐙珛鍦烘櫙
addSeparateRule() {
this.ruleType = "separate";
this.showAddBox = true;
},
+ addLinkageRule() {
+ if (this.Carmeras.length < 2) {
+ this.$message({
+ message: "璇疯嚦灏戦�夋嫨涓ゅ彴鎽勫儚鏈�",
+ type: "warning",
+ });
+ return;
+ }
+ this.ruleType = "linkage";
+ this.showAddBox = true;
+ },
+
//鍥炲～鏂扮殑鐙珛鍦烘櫙
getNewRule(newRule) {
+ //鏂板鍦烘櫙
if (newRule.action === "add") {
- this.SeparateRules.push(newRule.data);
+ newRule.data.rules = [];
+ newRule.data.cameraIds = [this.Camera.cameraId];
+ newRule.data.enable = true;
+ //鐙珛鍦烘櫙
+ if (this.ruleType == "separate") {
+ this.SeparateRules.push(newRule.data);
+ this.$nextTick(() => {
+ this.connectLine();
+ });
+ } else {
+ //鑱斿姩鍦烘櫙
+ let arr = [this.Camera.cameraId];
+ this.Carmeras.forEach((item) => {
+ if (item.cameraId != this.Camera.cameraId) {
+ arr.push(item.cameraId);
+ }
+ });
+ newRule.data.cameraIds = arr;
+ this.linkageRule.push(newRule.data);
+ this.$nextTick(() => {
+ this.connectLine2();
+ });
+ }
+
this.showAddBox = false;
- this.$nextTick(() => {
- this.connectLine();
- });
+
+ //缂栬緫鍦烘櫙
} else if (newRule.action === "edit") {
- this.SeparateRules[newRule.data.index].alarm_level =
- newRule.data.alarm_level;
- this.SeparateRules[newRule.data.index].scene_name =
- newRule.data.scene_name;
- this.SeparateRules[newRule.data.index].desc = newRule.data.desc;
- this.SeparateRules[newRule.data.index].template_id =
- newRule.data.template_id;
- this.SeparateRules[newRule.data.index].time_rule_id =
- newRule.data.time_rule_id;
- this.SeparateRules[newRule.data.index].voiceId = newRule.data.voiceId;
+ //鐙珛鍦烘櫙
+ if (this.ruleType == "separate") {
+ this.SeparateRules[newRule.data.index].alarm_level =
+ newRule.data.alarm_level;
+ this.SeparateRules[newRule.data.index].scene_name =
+ newRule.data.scene_name;
+ this.SeparateRules[newRule.data.index].desc = newRule.data.desc;
+ this.SeparateRules[newRule.data.index].template_id =
+ newRule.data.template_id;
+ this.SeparateRules[newRule.data.index].time_rule_id =
+ newRule.data.time_rule_id;
+ this.SeparateRules[newRule.data.index].voiceId = newRule.data.voiceId;
+ } else {
+ //鑱斿姩鍦烘櫙
+ console.log(this.linkageRule[newRule.data.index]);
+
+ this.linkageRule[newRule.data.index].alarm_level =
+ newRule.data.alarm_level;
+ this.linkageRule[newRule.data.index].scene_name =
+ newRule.data.scene_name;
+ this.linkageRule[newRule.data.index].desc = newRule.data.desc;
+ this.linkageRule[newRule.data.index].template_id =
+ newRule.data.template_id;
+ this.linkageRule[newRule.data.index].time_rule_id =
+ newRule.data.time_rule_id;
+ this.linkageRule[newRule.data.index].voiceId = newRule.data.voiceId;
+ }
+
this.showAddBox = false;
}
+ this.editData = {};
},
//淇敼鐙珛鍦烘櫙
- editSeparateRules(item, index) {
+ editRules(item, index, type) {
+ this.ruleType == type;
this.editData = {
- type: "separate",
+ type,
rule: item,
index,
};
- this.addSeparateRule();
+ this.showAddBox = true;
},
//娣诲姞绠楁硶
addSdk(type, index) {
+ this.editSdkObj = {};
+ this.ruleType = type;
this.addData = {
type,
index,
@@ -790,19 +885,135 @@
//娣诲姞绠楁硶鍥炶皟
getNewSdk(newRule) {
+ //鐙珛鍦烘櫙
if (this.addData.type === "separate") {
if (this.SeparateRules[this.addData.index].rules.length > 0) {
newRule.rule_with_pre = "&&";
+ newRule.is_save_anyhow = true;
}
this.SeparateRules[this.addData.index].rules.push(newRule);
}
+
+ //鑱斿姩鍦烘櫙
+ else {
+ if (this.linkageRule[this.addData.index].rules.length > 0) {
+ newRule.rule_with_pre = "&&";
+ newRule.is_save_anyhow = true;
+ }
+ this.linkageRule[this.addData.index].rules.push(newRule);
+ }
+
this.addData = {};
+ this.showSdkSettingBox = false;
+ this.TaskMange.findAllSdk({ installed: true });
+
+ this.show = false;
+ this.$nextTick(() => {
+ this.show = true;
+ });
},
- backToOrigin(e, item) {
- e = item;
- console.log(e);
- this.$forceUpdate();
+ //鍙栨秷淇敼
+ async backToOrigin(type, index) {
+ if (type === "separate") {
+ const rsp = await getCameraSceneRule({
+ cameraId: this.Camera.cameraId,
+ });
+ if (rsp && rsp.success) {
+ let rules = rsp.data.rules ? rsp.data.rules : [];
+ if (rules[index]) {
+ this.SeparateRules[index] = rules[index];
+ } else {
+ this.SeparateRules.splice(index, 1);
+ }
+ }
+ 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();
+ }
+ console.log("澶辫触");
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ }
+ },
+
+ // 缂栬緫绠楁硶
+ editSdk(sdkIndex, type, ruleIndex, Cameras) {
+ this.addData = {};
+ this.ruleType = type;
+ if (type === "separate") {
+ this.editSdkObj = {
+ ruleIndex,
+ sdkIndex,
+ type,
+ sdk: this.SeparateRules[ruleIndex].rules[sdkIndex],
+ };
+ } else {
+ this.editSdkObj = {
+ ruleIndex,
+ sdkIndex,
+ type,
+ cameras: Cameras,
+ sdk: this.linkageRule[ruleIndex].rules[sdkIndex],
+ };
+ }
+
+ this.showSdkBox = false;
+ this.showSdkSettingBox = true;
+ },
+
+ getEditSdk(newRule) {
+ console.log(newRule);
+ if (this.editSdkObj.type === "separate") {
+ this.SeparateRules[this.editSdkObj.ruleIndex].rules[
+ this.editSdkObj.sdkIndex
+ ] = newRule;
+ } else {
+ this.linkageRule[this.editSdkObj.ruleIndex].rules[
+ this.editSdkObj.sdkIndex
+ ] = newRule;
+ }
+ this.editSdkObj = {};
+ this.showSdkSettingBox = false;
+ },
+
+ closeAddBox() {
+ this.showAddBox = false;
+ this.editData = {};
+ },
+
+ closeSettingBox() {
+ this.showSdkSettingBox = false;
+ this.editSdkObj = {};
+ },
+
+ openSdkBox(e) {
+ e.stopPropagation();
+ this.showSdkBox = true;
+ },
+
+ selectMultiple(val) {
+ if (!val) {
+ this.Carmeras = [];
+ }
+ this.TreeDataPool.multiple = val;
},
},
};
@@ -956,6 +1167,73 @@
}
}
+ .linkageRule {
+ position: relative;
+ box-sizing: border-box;
+ padding: 20px;
+ margin: 24px 0;
+ background: rgba($color: #fff, $alpha: 0.9);
+
+ .control {
+ position: absolute;
+ display: flex;
+ justify-content: end;
+ top: 20px;
+ right: 20px;
+
+ i {
+ margin-left: 10px;
+ font-size: 24px;
+ color: #0065ff;
+ cursor: pointer;
+
+ &:hover {
+ color: rgb(0, 51, 255);
+ }
+ }
+ }
+
+ .content {
+ position: relative;
+ display: flex;
+ margin-top: 10px;
+
+ .Anchor {
+ position: absolute;
+ left: 232px;
+ top: 100px;
+ }
+ }
+
+ .empty {
+ width: 1516px;
+ height: 198px;
+ border: 1px solid #c0c5cc;
+ border-radius: 5px;
+ text-align: center;
+ background: #eff4f9;
+ img {
+ margin-top: 14px;
+ width: 250px;
+ height: 150px;
+ }
+
+ .des {
+ margin-top: 2px;
+ color: #666;
+ }
+ }
+
+ ::v-deep .sourcePoint {
+ margin-top: -4px;
+ margin-left: -6px;
+ width: 4px !important;
+ height: 4px !important;
+ border-radius: 50%;
+ border: 2px solid #0065ff;
+ }
+ }
+
.mask {
position: absolute;
top: 0;
@@ -966,5 +1244,46 @@
opacity: 0.2;
z-index: 1;
}
+
+ .swiper-box-container2 {
+ width: 568px;
+ }
+
+ .img-box {
+ position: relative;
+
+ .swiper-pre-border ::v-deep {
+ position: absolute;
+ bottom: 146px;
+ left: 10px;
+ cursor: pointer;
+ z-index: 1;
+
+ i {
+ font-size: 32px;
+ color: rgb(229, 229, 229);
+ }
+ }
+
+ .swiper-next-border ::v-deep {
+ position: absolute;
+ bottom: 146px;
+ right: 10px;
+ cursor: pointer;
+ z-index: 1;
+
+ i {
+ font-size: 32px;
+ color: rgb(229, 229, 229);
+ }
+ }
+
+ .swiper-button-disabled ::v-deep {
+ cursor: not-allowed;
+ i {
+ color: rgb(245, 245, 245);
+ }
+ }
+ }
}
</style>
diff --git a/src/views/hashrate/CameraManage/index.vue b/src/views/hashrate/CameraManage/index.vue
index 8d6b11b..61cc152 100644
--- a/src/views/hashrate/CameraManage/index.vue
+++ b/src/views/hashrate/CameraManage/index.vue
@@ -49,6 +49,7 @@
import CameraLeft from "@/components/CameraLeft";
import CameraInfo from "./CameraInfo";
import CameraRules from "./CameraRules";
+import VideoRuleData from "@/Pool/VideoRuleData";
import bus from "@/plugin/bus";
export default {
@@ -84,6 +85,10 @@
watch: {
"TreeDataPool.selectedNode": function (node) {
+ if (this.TreeDataPool.multiple) {
+ return;
+ }
+
if (this.activeTab == "淇℃伅缁存姢") {
if (this.TreeDataPool.treeActiveName == "camera") {
this.$refs.cameraInfo.selectCamera(node);
@@ -95,7 +100,15 @@
"TreeDataPool.selectedNodes": {
handler(nodes) {
if (this.activeTab == "鍦烘櫙閰嶇疆") {
- // this.$refs.sepRule.initCameraData();
+ // this.$refs.sepRule.initCameraData(nodes[nodes.length - 1]);
+ let CameraArr = [];
+
+ nodes.forEach((id) => {
+ let newCamera = new VideoRuleData(id);
+ CameraArr.push(newCamera);
+ });
+
+ this.$refs.sepRule.Carmeras = CameraArr;
}
},
deep: true,
diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue
new file mode 100644
index 0000000..892093a
--- /dev/null
+++ b/src/views/manageCenter/index.vue
@@ -0,0 +1,10 @@
+<template>
+ <div class="manageCenter">绠＄悊涓績</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/search/components/giantTree/index.vue b/src/views/search/components/giantTree/index.vue
index ba948b7..f24e7a8 100644
--- a/src/views/search/components/giantTree/index.vue
+++ b/src/views/search/components/giantTree/index.vue
@@ -315,7 +315,6 @@
itemCheck(evt, treeId, treeNode) {
this.TreeDataPool.selectedNode = treeNode;
this.TreeDataPool.treeType = this.treeName;
- debugger;
// 澶氶��
// this.ztreeObj.checkNode(treeNode, true, false, false);
let checkedNodes = this.ztreeObj.getCheckedNodes(true);
diff --git a/src/views/search/components/treeMenu/jsTree/tree.vue b/src/views/search/components/treeMenu/jsTree/tree.vue
index 81f2d1a..af7ea6c 100644
--- a/src/views/search/components/treeMenu/jsTree/tree.vue
+++ b/src/views/search/components/treeMenu/jsTree/tree.vue
@@ -26,7 +26,11 @@
>
<template slot-scope="_">
<slot :vm="_.vm" :model="_.model">
- <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
+ <i
+ :class="_.vm.themeIconClasses"
+ role="presentation"
+ v-if="!_.model.loading"
+ ></i>
<span v-html="_.model[textFieldName]"></span>
</slot>
</template>
@@ -48,7 +52,7 @@
data: { type: Array },
size: {
type: String,
- validator: value => ["large", "small"].indexOf(value) > -1
+ validator: (value) => ["large", "small"].indexOf(value) > -1,
},
showCheckbox: { type: Boolean, default: false },
wholeRow: { type: Boolean, default: false },
@@ -64,18 +68,18 @@
type: Object,
default: function () {
return {};
- }
+ },
},
async: { type: Function },
loadingText: { type: String, default: "Loading..." },
draggable: { type: Boolean, default: false },
dragOverBackgroundColor: { type: String, default: "#C9FDC9" },
- klass: String
+ klass: String,
},
data() {
return {
draggedItem: undefined,
- draggedElm: undefined
+ draggedElm: undefined,
};
},
computed: {
@@ -85,7 +89,7 @@
{ "tree-default": !this.size },
{ [`tree-default-${this.size}`]: !!this.size },
{ "tree-checkbox-selection": !!this.showCheckbox },
- { [this.klass]: !!this.klass }
+ { [this.klass]: !!this.klass },
];
},
containerClasses() {
@@ -93,7 +97,7 @@
{ "tree-container-ul": true },
{ "tree-children": true },
{ "tree-wholerow-ul": !!this.wholeRow },
- { "tree-no-dots": !!this.noDots }
+ { "tree-no-dots": !!this.noDots },
];
},
sizeHeight() {
@@ -105,7 +109,7 @@
default:
return ITEM_HEIGHT_DEFAULT;
}
- }
+ },
},
methods: {
initializeData(items) {
@@ -154,13 +158,13 @@
let self = this;
node.addBefore = function (data, selectedNode) {
let newItem = self.initializeDataItem(data);
- let index = selectedNode.parentItem.findIndex(t => t.id === node.id);
+ let index = selectedNode.parentItem.findIndex((t) => t.id === node.id);
selectedNode.parentItem.splice(index, 0, newItem);
};
node.addAfter = function (data, selectedNode) {
let newItem = self.initializeDataItem(data);
let index =
- selectedNode.parentItem.findIndex(t => t.id === node.id) + 1;
+ selectedNode.parentItem.findIndex((t) => t.id === node.id) + 1;
selectedNode.parentItem.splice(index, 0, newItem);
};
node.addChild = function (data) {
@@ -170,13 +174,13 @@
};
node.openChildren = function () {
node.opened = true;
- self.handleRecursionNodeChildren(node, node => {
+ self.handleRecursionNodeChildren(node, (node) => {
node.opened = true;
});
};
node.closeChildren = function () {
node.opened = false;
- self.handleRecursionNodeChildren(node, node => {
+ self.handleRecursionNodeChildren(node, (node) => {
node.opened = false;
});
};
@@ -223,14 +227,14 @@
this.$emit("item-click", oriNode, oriItem, e);
},
handleSingleSelectItems(oriNode, oriItem) {
- this.handleRecursionNodeChilds(this, node => {
+ this.handleRecursionNodeChilds(this, (node) => {
if (node.model) node.model.selected = false;
});
oriNode.model.selected = true;
},
handleBatchSelectItems(oriNode, oriItem) {
- console.log('oriNode, oriItem', oriNode, oriItem)
- this.handleRecursionNodeChilds(oriNode, node => {
+ console.log("oriNode, oriItem", oriNode, oriItem);
+ this.handleRecursionNodeChilds(oriNode, (node) => {
if (!!node.model) {
if (!!node.model.disabled) return;
node.model.selected = oriNode.model.selected;
@@ -251,18 +255,17 @@
var self = this;
if (this.async) {
if (oriParent[0].loading) {
- this.async(oriNode, data => {
+ this.async(oriNode, (data) => {
if (data.length > 0) {
for (let i in data) {
if (!data[i].isLeaf) {
if (typeof data[i][self.childrenFieldName] !== "object") {
data[i][self.childrenFieldName] = [
- self.initializeLoading()
+ self.initializeLoading(),
];
}
}
var dataItem = self.initializeDataItem(data[i]);
- debugger
self.$set(oriParent, i, dataItem);
}
} else {
@@ -280,7 +283,7 @@
this.draggedItem = {
item: oriItem,
parentItem: oriNode.parentItem,
- index: oriNode.parentItem.findIndex(t => t.id === oriItem.id)
+ index: oriNode.parentItem.findIndex((t) => t.id === oriItem.id),
};
this.$emit("item-drag-start", oriNode, oriItem, e);
@@ -312,7 +315,7 @@
this.draggedItem.item === oriItem ||
(oriItem[this.childrenFieldName] &&
oriItem[this.childrenFieldName].findIndex(
- t => t.id === this.draggedItem.item.id
+ (t) => t.id === this.draggedItem.item.id
) !== -1)
) {
return;
@@ -329,7 +332,7 @@
});
this.$emit("item-drop", oriNode, oriItem, draggedItem.item, e);
}
- }
+ },
},
created() {
this.initializeData(this.data);
@@ -341,8 +344,8 @@
}
},
components: {
- TreeItem
- }
+ TreeItem,
+ },
};
</script>
<style lang="less">
--
Gitblit v1.8.0