From 1e4a3f702623a46bcd53dbc96e235d51e0edb155 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 05 八月 2022 04:13:02 +0800
Subject: [PATCH] 管理中心添加分析
---
src/views/hashrate/CameraManage/CameraRules/index.vue | 1174 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 769 insertions(+), 405 deletions(-)
diff --git a/src/views/hashrate/CameraManage/CameraRules/index.vue b/src/views/hashrate/CameraManage/CameraRules/index.vue
index 2b05257..e32fd39 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,71 +37,176 @@
: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">
<!-- 鎽勫儚鏈� -->
- <CameraBox
- :camera="Camera"
- id="separate_camera"
- @addSeparateRule="addSeparateRule"
- ></CameraBox>
+ <CameraBox :camera="Camera" id="separate_camera" @addSeparateRule="addSeparateRule"></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 +216,7 @@
:type="ruleType"
:editData="editData"
v-if="showAddBox"
- @close="showAddBox = false"
+ @close="closeAddBox"
@save="getNewRule"
></AddRuleBox>
@@ -118,181 +224,48 @@
<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>
<script>
-import { jsPlumb } from "jsplumb";
+import { jsPlumb } from "jsplumb"
-import { savePolygon } from "@/api/polygon";
+import { savePolygon } from "@/api/polygon"
-import { pasteRules } from "@/api/task";
+import { pasteRules } from "@/api/task"
+import { getCameraSceneRule } from "@/api/scene"
-import { saveCameraScene, getLinkSceneRule } from "@/api/scene";
+import { saveCameraScene, getLinkSceneRule } from "@/api/scene"
-import { changeRunType } from "@/api/pollConfig";
-import { findAllFileByStackId } from "@/api/localVedio";
-import VideoRuleData from "@/Pool/VideoRuleData";
+import { changeRunType } from "@/api/pollConfig"
+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 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";
-import SdkSettingBox from "@/views/hashrate/CameraManage/CameraRules/components/SdkSettingBox";
+import polygonCanvas from "@/components/canvas"
+import Sysinfo from "@/components/subComponents/SystemInfo"
+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"
+import SdkSettingBox from "@/views/hashrate/CameraManage/CameraRules/components/SdkSettingBox"
export default {
components: {
- TimeSlider,
polygonCanvas,
Sysinfo,
- SceneRule,
SlideScene,
HashrateCard,
CameraBox,
@@ -300,26 +273,33 @@
AddRuleBox,
SdkBox,
SdkSettingBox,
+ LinkageCameraBox
},
directives: {
focus: {
- inserted: function (el) {
- el.querySelector("input").focus();
- },
- },
+ inserted: function(el) {
+ el.querySelector("input").focus()
+ }
+ }
},
computed: {
cameraType() {
- return this.TreeDataPool.treeActiveName === "camera"
- ? "camera"
- : "dataStack";
+ return this.TreeDataPool.treeActiveName === "camera" ? "camera" : "dataStack"
},
selectedCameraIds() {
- return this.TreeDataPool.selectedNodes;
+ 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: [],
@@ -329,20 +309,39 @@
grabCursor: true,
pagination: {
el: ".swiper-pagination",
- type: "fraction",
+ type: "fraction"
},
navigation: {
nextEl: ".swiper-local-next",
- prevEl: ".swiper-local-prev",
- },
+ prevEl: ".swiper-local-prev"
+ }
},
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,368 +356,384 @@
// },
tableRuleList: [],
SeparateRules: [], //鐙珛鍦烘櫙
+ linkageRule: [], //鑱斿姩鍦烘櫙
cameraId: "",
- showSysInfo: false,
+ showSysInfo: true,
showCanvas: true,
canvasWidth: 568,
canvasHeight: 320,
stackId: "",
swiperIndex: 0,
- swipercanvasData: [],
stackFilesPage: 1,
- stackFilesSize: 5,
- };
+ stackFilesSize: 5
+ }
},
created() {
- document.querySelector("html").style["min-width"] = "1920px";
+ document.querySelector("html").style["min-width"] = "1920px"
// 鍒濆鍖栬繛绾垮彉閲�
- this.plumbIns = jsPlumb.getInstance();
+ this.plumbIns = jsPlumb.getInstance()
},
mounted() {
- this.PollData.statistics();
+ // this.PollData.statistics();
+ this.TaskMange.findAllSdk()
},
destroyed() {
- document.querySelector("html").style["min-width"] = "1280px";
+ document.querySelector("html").style["min-width"] = "1280px"
},
watch: {
"Camera.cameraId": {
handler(n, o) {
if (n) {
if (this.TreeDataPool.treeActiveName == "dataStack") {
- this.stackFilesPage = 1;
- this.stackFilesSize = 5;
- this.stackId = n;
+ this.stackFilesPage = 1
+ this.stackFilesSize = 5
+ this.stackId = n
if (this.stackId) {
- this.swipercanvasData = [];
- this.getStackFiles();
+ this.swipercanvasData = []
+ this.getStackFiles()
}
}
}
- },
+ }
},
+ Carmeras: {
+ handler(newVal, oldVal) {
+ this.setSwiperData()
+ },
+ deep: true
+ }
},
methods: {
prevClick() {
if (this.swiperIndex == 0) {
if (this.stackFilesPage > 1) {
- this.stackFilesPage--;
- this.getStackFiles(true);
+ this.stackFilesPage--
+ this.getStackFiles(true)
} else {
this.$message({
type: "info",
- message: "褰撳墠宸叉槸绗竴椤�",
- });
+ message: "褰撳墠宸叉槸绗竴椤�"
+ })
}
}
},
nextClick() {
if (this.swiperIndex == this.swipercanvasData.length - 1) {
- this.stackFilesPage++;
- this.getStackFiles(true);
+ this.stackFilesPage++
+ this.getStackFiles(true)
}
},
getStackFiles(onClick = false) {
- this.getStackFileLoading = true;
- let _this = this;
+ this.getStackFileLoading = true
+ let _this = this
findAllFileByStackId({
name: "",
stackId: this.stackId,
page: this.stackFilesPage,
size: this.stackFilesSize,
- type: 0,
+ type: 0
})
.then((res) => {
if (res && res.success) {
if (res.data.dataList.length > 0) {
- this.swipercanvasData = [];
+ this.swipercanvasData = []
this.swipercanvasData = res.data.dataList.map((item) => {
return {
name: item.name,
stackId: item.stack_id,
baseImg:
- item.type == 2
- ? `/files/${item.path.substr(
- item.path.lastIndexOf("/") + 1
- )}`
- : item.snapshot_url,
+ item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf("/") + 1)}` : item.snapshot_url,
type: item.type,
id: item.id,
- loading: false,
- };
- });
- this.swiperIndex = 0;
- this.$refs.swiper.swiper.activeIndex = 0;
+ loading: false
+ }
+ })
+ this.swiperIndex = 0
+ this.$refs.swiper.swiper.activeIndex = 0
} else {
if (onClick) {
this.$message({
type: "warning",
- message: "宸叉棤鏇村鏁版嵁!",
- });
+ message: "宸叉棤鏇村鏁版嵁!"
+ })
}
}
} else {
this.$message({
type: "error",
- message: "鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!",
- });
+ message: "鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!"
+ })
}
- this.getStackFileLoading = false;
+ this.getStackFileLoading = false
})
.catch((e) => {
- this.getStackFileLoading = false;
- });
- },
- swiperSlideChange() {
- this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
+ this.getStackFileLoading = false
+ })
},
drawBaseImg() {
if (Array.isArray(this.$refs.canvas)) {
if (this.$refs.canvas.length > 0) {
- this.$refs.canvas[0].showModal();
+ this.$refs.canvas[0].showModal()
}
} else {
- this.$refs.canvas.showModal();
+ this.$refs.canvas.showModal()
}
},
+
getCanvasData(data) {
- let polyon = { ...data };
- polyon.camera_id = this.Camera.cameraId;
+ let polyon = { ...data }
+ polyon.camera_id = this.Camera.cameraId
savePolygon(polyon).then((rsp) => {
- this.Camera.getPolygon();
+ this.Camera.getPolygon()
//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) {
- this.Camera.baseImg = url;
+ this.Camera.baseImg = url
},
+ refresh2(url, id) {
+ this.swipercanvasData.forEach((data) => {
+ if (data.cameraId == id) {
+ data.baseImg = url
+ }
+ })
+ },
+
// 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤
async initCameraData(id) {
- //鑾峰彇鐙珛鍦烘櫙
- let newCamera = new VideoRuleData();
- if (id && id !== "") {
- this.loading = false;
- newCamera.cameraId = id;
- await newCamera.update();
+ if (!id) {
+ return
}
- this.Camera = newCamera;
- this.SeparateRules = this.Camera.rules;
+ this.plumbIns.deleteEveryConnection()
+ this.connectArr.forEach((item) => {
+ item.deleteEveryConnection()
+ })
+ //鑾峰彇鐙珛鍦烘櫙
+ let newCamera = new VideoRuleData()
+ if (id && id !== "") {
+ this.loading = false
+ newCamera.cameraId = id
+ await newCamera.update()
+ }
+
+ this.Camera = newCamera
+ this.SeparateRules = this.Camera.rules
this.$nextTick(() => {
- this.connectLine();
- });
+ this.connectLine()
+ })
- this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
- this.showSysInfo = true;
+ this.showSysInfo = true
// 鍒ゆ柇姝ｅ湪鎵ц瀹炴椂鎴栬�呰疆璇换鍔�
this.PollData.CameraList.forEach((element) => {
if (element.id === newCamera.cameraId) {
- this.runType = element.run_type;
+ this.runType = element.run_type
}
- });
-
- // 鑾峰彇娣峰悎鍦烘櫙
- this.showRules(id);
+ })
},
// 鑾峰彇娣峰悎鍦烘櫙
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;
- }
- }
- })
- .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.$set(this.Camera, "rules", this.Camera.rules.concat(rules));
- }
- })
- .catch(() => {});
+ if (!id) {
+ return
}
+ if (typeof id === "string") {
+ id = [id]
+ }
+ let rules = []
+
+ getLinkSceneRule({ cameraIds: id })
+ .then((rsp) => {
+ if (rsp && rsp.success) {
+ rules = rsp.data.rules
+
+ this.linkageRule = rules
+
+ this.$nextTick(() => {
+ this.connectLine2()
+ })
+ }
+ })
+ .catch(() => {})
},
saveSceneRule(groupRule) {
- const payload = { ...groupRule };
- payload.cameraIds = [this.Camera.cameraId];
- let _this = this;
+ const payload = { ...groupRule }
+ payload.cameraIds = [this.Camera.cameraId]
+ let _this = this
saveCameraScene(payload).then((rsp) => {
if (rsp && rsp.success) {
- this.Camera.update();
+ this.Camera.update()
this.$notify({
type: "success",
- message: "绛栫暐淇濆瓨鎴愬姛锛�",
- });
+ message: "绛栫暐淇濆瓨鎴愬姛锛�"
+ })
//鍒锋柊宸︿晶鏍�
- _this.$root.$children[0].$children[0].querySearchAsync("camera");
+ _this.$root.$children[0].$children[0].querySearchAsync("camera")
}
- });
+ })
},
delScenRule() {
- this.Camera.update();
+ this.Camera.update()
},
changeLoading(params) {
- this.loading = params;
+ this.loading = params
},
//鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊
pollEnable(row) {
- let val = 0;
+ let val = 0
if (row) {
if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
- this.Camera.dealWay = true;
- val = 1;
+ this.Camera.dealWay = true
+ val = 1
} else {
- this.Camera.dealWay = false;
- val = 0;
+ this.Camera.dealWay = false
+ val = 0
}
} else {
- this.Camera.dealWay = false;
- val = -1;
+ this.Camera.dealWay = false
+ val = -1
}
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
- debugger;
changeRunType({
camera_ids: [this.Camera.cameraId],
- run_type: val,
+ run_type: val
}).then((rsp) => {
if (rsp && rsp.success) {
this.$notify({
type: "success",
- message: "閰嶇疆鎴愬姛",
- });
+ message: "閰嶇疆鎴愬姛"
+ })
} else {
this.$notify({
type: "error",
- message: "閰嶇疆澶辫触",
- });
+ message: "閰嶇疆澶辫触"
+ })
}
- this.TreeDataPool.fetchTreeData();
- });
+ this.TreeDataPool.fetchTreeData()
+ })
}
- this.PollData.statisticTaskInfo();
+ this.PollData.statisticTaskInfo()
},
//瀹炴椂銆佽疆璇㈠垏鎹�
changePoll(row) {
//鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
- debugger;
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
if (row.value) {
- this.Camera.dealWay = true;
+ this.Camera.dealWay = true
} else {
- this.Camera.dealWay = false;
+ this.Camera.dealWay = false
}
- debugger;
changeRunType({
camera_ids: [this.Camera.cameraId],
- run_type: this.Camera.dealWay ? 1 : 0,
+ run_type: this.Camera.dealWay ? 1 : 0
}).then((rsp) => {
if (rsp && rsp.success) {
this.$notify({
type: "success",
- message: "閰嶇疆鎴愬姛",
- });
+ message: "閰嶇疆鎴愬姛"
+ })
} else {
this.$notify({
type: "error",
- message: "閰嶇疆澶辫触",
- });
+ message: "閰嶇疆澶辫触"
+ })
}
- });
+ })
} else {
if (this.Camera.dealWay) {
- this.Camera.dealWay = false;
- debugger;
+ this.Camera.dealWay = false
changeRunType({
camera_ids: [this.Camera.cameraId],
- run_type: this.Camera.dealWay ? 1 : 0,
+ run_type: this.Camera.dealWay ? 1 : 0
}).then((rsp) => {
if (rsp && rsp.success) {
this.$notify({
type: "success",
- message: "閰嶇疆鎴愬姛",
- });
+ message: "閰嶇疆鎴愬姛"
+ })
} else {
this.$notify({
type: "error",
- message: "閰嶇疆澶辫触",
- });
+ message: "閰嶇疆澶辫触"
+ })
}
- });
+ })
}
}
- this.TreeDataPool.fetchTreeData();
- this.PollData.statisticTaskInfo();
+ this.TreeDataPool.fetchTreeData()
+ this.PollData.statisticTaskInfo()
}
},
//澶嶅埗
ctrlC() {
- this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
- this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
+ this.TreeDataPool.ctrlCameraId = this.Camera.cameraId
+ this.TreeDataPool.ctrlCameraName = this.Camera.cameraName
this.$notify({
type: "success",
- message: "澶嶅埗绠楁硶鎴愬姛锛�",
- });
+ message: "澶嶅埗绠楁硶鎴愬姛锛�"
+ })
},
ctrlV() {
if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
this.$notify({
type: "warning",
- message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�",
- });
- return false;
+ message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�"
+ })
+ return false
}
pasteRules({
sourceId: this.TreeDataPool.ctrlCameraId,
- targetIds: [this.Camera.cameraId],
+ targetIds: [this.Camera.cameraId]
})
.then((res) => {
if (res && res.success) {
this.$notify({
type: "success",
- message: "绮樿创绠楁硶鎴愬姛锛�",
- });
- this.initCameraData(this.Camera.cameraId);
+ message: "绮樿创绠楁硶鎴愬姛锛�"
+ })
+ this.initCameraData(this.Camera.cameraId)
} else {
this.$notify({
type: "error",
- message: "绮樿创绠楁硶澶辫触锛�",
- });
+ message: "绮樿创绠楁硶澶辫触锛�"
+ })
}
})
.catch((err) => {
this.$notify({
type: "error",
- message: "绮樿创绠楁硶澶辫触锛�",
- });
- });
+ message: "绮樿创绠楁硶澶辫触锛�"
+ })
+ })
},
//杩炴帴鐙珛鍦烘櫙杩炵嚎
connectLine() {
//娓呴櫎涔嬪墠鐨勮繛绾�
- this.plumbIns.deleteEveryConnection();
+ this.plumbIns.deleteEveryConnection()
for (let index = 0; index < this.SeparateRules.length; index++) {
this.plumbIns.connect({
@@ -733,79 +748,295 @@
paintStyle: { stroke: "#0065FF", strokeWidth: 2 }, // connector
endpointStyle: {
fill: "#fff",
- outlineStroke: "#0065FF",
- }, // endpoint
- });
+ outlineStroke: "#0065FF"
+ } // endpoint
+ })
+ }
+ },
+
+ 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;
+ this.ruleType = "separate"
+ this.showAddBox = true
+ },
+
+ addLinkageRule(ids, 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);
- this.showAddBox = false;
- this.$nextTick(() => {
- this.connectLine();
- });
+ 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
+
+ //缂栬緫鍦烘櫙
} 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;
- this.showAddBox = false;
+ //鐙珛鍦烘櫙
+ 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 {
+ //鑱斿姩鍦烘櫙
+ 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();
+ index
+ }
+ this.showAddBox = true
},
//娣诲姞绠楁硶
addSdk(type, index) {
+ this.editSdkObj = {}
+ this.ruleType = type
this.addData = {
type,
- index,
- };
- this.showSdkBox = false;
- this.showSdkSettingBox = true;
+ 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.rule_with_pre = "&&"
+ newRule.is_save_anyhow = true
}
- this.SeparateRules[this.addData.index].rules.push(newRule);
+
+ this.SeparateRules[this.addData.index].rules.push(newRule)
}
- this.addData = {};
+
+ //鑱斿姩鍦烘櫙
+ 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) {
+ 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
+ }
+ }
+}
</script>
<style lang="scss" scoped>
@@ -905,7 +1136,7 @@
.control {
position: absolute;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
top: 20px;
right: 20px;
@@ -956,6 +1187,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 +1287,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