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 | 920 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 685 insertions(+), 235 deletions(-)
diff --git a/src/views/hashrate/CameraManage/CameraRules/index.vue b/src/views/hashrate/CameraManage/CameraRules/index.vue
index 2b05257..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,43 +37,122 @@
:InValidCount="`${PollData.PollInvalid}`"
:RunningCount="`${PollData.PollRun}`"
:NoDeal="`${PollData.PollNoDeal}`"
+ image="polling.png"
></HashrateCard>
</div>
</div>
<!-- 缁樺埗鍖哄煙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"
+ :currentCamera="Camera"
+ :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.camera.cameraId"
+ :isShowDrawArrow="true"
+ :isLink="true"
+ :disabled="false"
+ :loading="data.loading"
+ :snapshot_url="data.baseImg"
+ :canvasDataShow="data.canvasData"
+ :currentCamera="data.camera"
+ @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"></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">
@@ -84,23 +164,106 @@
></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'"
+ :cameraId="Camera.cameraId"
+ @edit="editRules(item, index, 'separate')"
@addSdk="addSdk('separate', index)"
- @backToOrigin="backToOrigin($event, item)"
+ @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>
+ </div>
+ </div>
+
+ <div class="linkageRule" @click="selectMultiple(true)">
+ <div class="title">鑱斿姩鍦烘櫙</div>
+ <div class="control">
+ <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(item.cameraIds, item.camera_polygons)
+ "
+ ></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, item.cameraIds)"
+ @editSdk="editSdk($event, 'linkage', index)"
+ @deletRule="deletRule('linkage', index)"
+ :id="'linkage_' + index"
+ ></RuleItem>
+ </div>
+ </div>
+ </template>
+
+ <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>
@@ -110,7 +273,7 @@
:type="ruleType"
:editData="editData"
v-if="showAddBox"
- @close="showAddBox = false"
+ @close="closeAddBox"
@save="getNewRule"
></AddRuleBox>
@@ -118,147 +281,18 @@
<SdkSettingBox
v-if="showSdkSettingBox"
- @close="showSdkSettingBox = false"
+ @close="closeSettingBox"
@getNewSdk="getNewSdk"
- :Cameras="[Camera]"
+ @getEditSdk="getEditSdk"
+ :editSdk="editSdkObj.sdk"
+ :linkEditCamera="
+ ruleType === 'linkage' && editSdkObj ? editSdkObj.camera_polygons : null
+ "
+ :Cameras="ruleType === 'linkage' ? addData.cameras : [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 +302,7 @@
import { savePolygon } from "@/api/polygon";
import { pasteRules } from "@/api/task";
+import { getCameraSceneRule } from "@/api/scene";
import { saveCameraScene, getLinkSceneRule } from "@/api/scene";
@@ -275,13 +310,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 +323,8 @@
export default {
components: {
- TimeSlider,
polygonCanvas,
Sysinfo,
- SceneRule,
SlideScene,
HashrateCard,
CameraBox,
@@ -300,6 +332,7 @@
AddRuleBox,
SdkBox,
SdkSettingBox,
+ LinkageCameraBox,
},
directives: {
focus: {
@@ -317,9 +350,17 @@
selectedCameraIds() {
return this.TreeDataPool.selectedNodes;
},
+ CarmerasId() {
+ let arr = [];
+ this.Carmeras.forEach((item) => {
+ arr.push(item.cameraId);
+ });
+ return arr;
+ },
},
data() {
return {
+ show: true,
loading: false,
Camera: new VideoRuleData(),
Carmeras: [],
@@ -337,12 +378,31 @@
},
},
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",
+ },
+ },
+ showNewLinkage: false,
+ newLinkageIds: [],
+ newLinkPlg: null,
+
// swiperOption: {
// slidesPerView: 5,
// spaceBetween: 8,
@@ -357,14 +417,14 @@
// },
tableRuleList: [],
SeparateRules: [], //鐙珛鍦烘櫙
+ linkageRule: [], //鑱斿姩鍦烘櫙
cameraId: "",
- showSysInfo: false,
+ showSysInfo: true,
showCanvas: true,
canvasWidth: 568,
canvasHeight: 320,
stackId: "",
swiperIndex: 0,
- swipercanvasData: [],
stackFilesPage: 1,
stackFilesSize: 5,
};
@@ -375,7 +435,8 @@
this.plumbIns = jsPlumb.getInstance();
},
mounted() {
- this.PollData.statistics();
+ // this.PollData.statistics();
+ this.TaskMange.findAllSdk();
},
destroyed() {
document.querySelector("html").style["min-width"] = "1280px";
@@ -395,6 +456,12 @@
}
}
},
+ },
+ Carmeras: {
+ handler(newVal, oldVal) {
+ this.setSwiperData();
+ },
+ deep: true,
},
},
methods: {
@@ -468,9 +535,6 @@
this.getStackFileLoading = false;
});
},
- swiperSlideChange() {
- this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
- },
drawBaseImg() {
if (Array.isArray(this.$refs.canvas)) {
@@ -481,6 +545,7 @@
this.$refs.canvas.showModal();
}
},
+
getCanvasData(data) {
let polyon = { ...data };
polyon.camera_id = this.Camera.cameraId;
@@ -489,11 +554,46 @@
//this.Camera.getCameraTask();
});
},
+ setSwiperData() {
+ let swipers = [];
+ let carmeras = this.Carmeras;
+ for (let i = 0; i < carmeras.length; i++) {
+ swipers = swipers.concat({
+ 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,
+ });
+ }
+ this.swipercanvasData = swipers;
+ },
refresh(url) {
+ console.log(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;
+ }
+
+ this.plumbIns.deleteEveryConnection();
+ this.connectArr.forEach((item) => {
+ item.deleteEveryConnection();
+ });
//鑾峰彇鐙珛鍦烘櫙
let newCamera = new VideoRuleData();
if (id && id !== "") {
@@ -509,7 +609,6 @@
this.connectLine();
});
- this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
this.showSysInfo = true;
// 鍒ゆ柇姝ｅ湪鎵ц瀹炴椂鎴栬�呰疆璇换鍔�
this.PollData.CameraList.forEach((element) => {
@@ -517,45 +616,31 @@
this.runType = element.run_type;
}
});
-
- // 鑾峰彇娣峰悎鍦烘櫙
- this.showRules(id);
},
// 鑾峰彇娣峰悎鍦烘櫙
showRules(id) {
+ if (!id) {
+ return;
+ }
+ if (typeof id === "string") {
+ id = [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;
- }
- }
- })
- .catch(() => {});
+ getLinkSceneRule({ cameraIds: id })
+ .then((rsp) => {
+ if (rsp && rsp.success) {
+ rules = rsp.data.rules;
- //鍗曢�夋憚鍍忔満妯″紡
- } 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.$nextTick(() => {
+ this.connectLine2();
+ });
+ }
+ })
+ .catch(() => {});
},
saveSceneRule(groupRule) {
@@ -597,7 +682,6 @@
val = -1;
}
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
- debugger;
changeRunType({
camera_ids: [this.Camera.cameraId],
run_type: val,
@@ -621,7 +705,6 @@
//瀹炴椂銆佽疆璇㈠垏鎹�
changePoll(row) {
//鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
- debugger;
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
if (row.value) {
@@ -629,7 +712,6 @@
} else {
this.Camera.dealWay = false;
}
- debugger;
changeRunType({
camera_ids: [this.Camera.cameraId],
run_type: this.Camera.dealWay ? 1 : 0,
@@ -649,7 +731,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,70 +820,306 @@
}
},
+ 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(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;
+ },
+
//鍥炲～鏂扮殑鐙珛鍦烘櫙
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 {
+ //鑱斿姩鍦烘櫙
+ if (this.newLinkPlg) {
+ newRule.data.camera_polygons = this.newLinkPlg;
+ }
+ newRule.data.cameraIds = this.newLinkageIds;
+ 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.$forceUpdate();
}
+ 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,
};
+ 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;
},
//娣诲姞绠楁硶鍥炶皟
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, 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 {
+ this.SeparateRules.splice(index, 1);
+ }
+ }
+ this.$forceUpdate();
+ this.connectLine();
+ } else {
+ 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);
+ }
+ this.$forceUpdate();
+ this.connectLine2();
+ }
+ console.log("澶辫触");
+ });
+ }
+ },
+
+ // 缂栬緫绠楁硶
+ editSdk(sdkIndex, type, ruleIndex) {
+ 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,
+ 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) {
+ 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;
},
},
};
@@ -905,7 +1222,7 @@
.control {
position: absolute;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
top: 20px;
right: 20px;
@@ -956,6 +1273,96 @@
}
}
+ .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: flex-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;
+ }
+ }
+
+ .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;
+ width: 4px !important;
+ height: 4px !important;
+ border-radius: 50%;
+ border: 2px solid #0065ff;
+ }
+ }
+
.mask {
position: absolute;
top: 0;
@@ -966,5 +1373,48 @@
opacity: 0.2;
z-index: 1;
}
+
+ .swiper-box-container2 {
+ margin: 0;
+ margin-top: -13px;
+ 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: 58px;
+ 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>
--
Gitblit v1.8.0