<template>
|
<div class="s-separate-rules">
|
<div class="top">
|
<div class="left">
|
<div class="left-top">
|
<!-- 场景及规则 -->
|
<div class="left-top-left">
|
<div class="title">场景</div>
|
<slide-scene :sceneData="Camera.allSceneRule"></slide-scene>
|
</div>
|
|
<!-- 算力信息进度条 -->
|
<div class="left-top-middle">
|
<div class="title">算力信息</div>
|
<sysinfo :stroke="20" v-if="showSysInfo" />
|
</div>
|
</div>
|
<div class="left-bottom">
|
<!-- 实时算力信息 -->
|
<HashrateCard
|
class="left-bottom-left"
|
title="实时算力"
|
:total="`${PollData.RealTimeValidCount}`"
|
:ValidCount="`${PollData.RealTimeSum}`"
|
:InValidCount="`${PollData.RealTimeInvalid}`"
|
:RunningCount="`${PollData.RealTimeRun}`"
|
:NoDeal="`${PollData.RealTimeNoDeal}`"
|
></HashrateCard>
|
|
<!-- 轮询算力信息 -->
|
<HashrateCard
|
class="left-bottom-middle"
|
title="轮询算力"
|
:total="`${PollData.PollValidCount}`"
|
:ValidCount="`${PollData.PollSum}`"
|
:InValidCount="`${PollData.PollInvalid}`"
|
:RunningCount="`${PollData.PollRun}`"
|
:NoDeal="`${PollData.PollNoDeal}`"
|
></HashrateCard>
|
</div>
|
</div>
|
|
<!-- 绘制区域canvas -->
|
<div class="right">
|
<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" @click="selectMultiple(false)">
|
<div class="title">独立场景</div>
|
<div class="control">
|
<i class="iconfont" @click="openSdkBox($event)"></i>
|
<i class="iconfont"></i>
|
<i class="iconfont"></i>
|
</div>
|
|
<div class="content">
|
<!-- 摄像机 -->
|
<CameraBox
|
:camera="Camera"
|
id="separate_camera"
|
@addSeparateRule="addSeparateRule"
|
></CameraBox>
|
|
<!-- 场景区域 -->
|
<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"
|
:ruleType="'separate'"
|
:cameraId="Camera.cameraId"
|
@edit="editRules(item, index, 'separate')"
|
@addSdk="addSdk('separate', index)"
|
@backToOrigin="backToOrigin('separate', index)"
|
@editSdk="editSdk($event, 'separate', index)"
|
@deletRule="deletRule('separate', index)"
|
></RuleItem>
|
</template>
|
|
<div class="empty" v-else>
|
<img src="/images/hashrate/独立场景空页面.png" alt="" />
|
<div class="des">暂无独立场景</div>
|
</div>
|
</div>
|
</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(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/联动场景空页面.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/联动场景空页面.png" alt="" />
|
<div class="des">暂无联动场景</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 添加场景弹窗 -->
|
<AddRuleBox
|
:type="ruleType"
|
:editData="editData"
|
v-if="showAddBox"
|
@close="closeAddBox"
|
@save="getNewRule"
|
></AddRuleBox>
|
|
<SdkBox v-if="showSdkBox" @close="showSdkBox = false"> </SdkBox>
|
|
<SdkSettingBox
|
v-if="showSdkSettingBox"
|
@close="closeSettingBox"
|
@getNewSdk="getNewSdk"
|
@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>
|
</template>
|
|
<script>
|
import { jsPlumb } from "jsplumb";
|
|
import { savePolygon } from "@/api/polygon";
|
|
import { pasteRules } from "@/api/task";
|
import { getCameraSceneRule } 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 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: {
|
polygonCanvas,
|
Sysinfo,
|
SlideScene,
|
HashrateCard,
|
CameraBox,
|
RuleItem,
|
AddRuleBox,
|
SdkBox,
|
SdkSettingBox,
|
LinkageCameraBox,
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector("input").focus();
|
},
|
},
|
},
|
computed: {
|
cameraType() {
|
return this.TreeDataPool.treeActiveName === "camera"
|
? "camera"
|
: "dataStack";
|
},
|
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: [],
|
runType: -1,
|
getStackFileLoading: false,
|
canvasSwiperOption: {
|
grabCursor: true,
|
pagination: {
|
el: ".swiper-pagination",
|
type: "fraction",
|
},
|
navigation: {
|
nextEl: ".swiper-local-next",
|
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,
|
// pagination: {
|
// el: ".swiper-pagination",
|
// clickable: true
|
// },
|
// navigation: {
|
// nextEl: ".swiper-next-border",
|
// prevEl: ".swiper-pre-border"
|
// }
|
// },
|
tableRuleList: [],
|
SeparateRules: [], //独立场景
|
linkageRule: [], //联动场景
|
cameraId: "",
|
showSysInfo: true,
|
showCanvas: true,
|
canvasWidth: 568,
|
canvasHeight: 320,
|
stackId: "",
|
swiperIndex: 0,
|
stackFilesPage: 1,
|
stackFilesSize: 5,
|
};
|
},
|
created() {
|
document.querySelector("html").style["min-width"] = "1920px";
|
// 初始化连线变量
|
this.plumbIns = jsPlumb.getInstance();
|
},
|
mounted() {
|
// this.PollData.statistics();
|
this.TaskMange.findAllSdk();
|
},
|
destroyed() {
|
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;
|
if (this.stackId) {
|
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);
|
} else {
|
this.$message({
|
type: "info",
|
message: "当前已是第一页",
|
});
|
}
|
}
|
},
|
nextClick() {
|
if (this.swiperIndex == this.swipercanvasData.length - 1) {
|
this.stackFilesPage++;
|
this.getStackFiles(true);
|
}
|
},
|
getStackFiles(onClick = false) {
|
this.getStackFileLoading = true;
|
let _this = this;
|
findAllFileByStackId({
|
name: "",
|
stackId: this.stackId,
|
page: this.stackFilesPage,
|
size: this.stackFilesSize,
|
type: 0,
|
})
|
.then((res) => {
|
if (res && res.success) {
|
if (res.data.dataList.length > 0) {
|
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,
|
type: item.type,
|
id: item.id,
|
loading: false,
|
};
|
});
|
this.swiperIndex = 0;
|
this.$refs.swiper.swiper.activeIndex = 0;
|
} else {
|
if (onClick) {
|
this.$message({
|
type: "warning",
|
message: "已无更多数据!",
|
});
|
}
|
}
|
} else {
|
this.$message({
|
type: "error",
|
message: "数据请求失败,请稍后重试!",
|
});
|
}
|
this.getStackFileLoading = false;
|
})
|
.catch((e) => {
|
this.getStackFileLoading = false;
|
});
|
},
|
|
drawBaseImg() {
|
if (Array.isArray(this.$refs.canvas)) {
|
if (this.$refs.canvas.length > 0) {
|
this.$refs.canvas[0].showModal();
|
}
|
} else {
|
this.$refs.canvas.showModal();
|
}
|
},
|
|
getCanvasData(data) {
|
let polyon = { ...data };
|
polyon.camera_id = this.Camera.cameraId;
|
savePolygon(polyon).then((rsp) => {
|
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) {
|
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 !== "") {
|
this.loading = false;
|
newCamera.cameraId = id;
|
await newCamera.update();
|
}
|
|
this.Camera = newCamera;
|
this.SeparateRules = this.Camera.rules;
|
|
this.$nextTick(() => {
|
this.connectLine();
|
});
|
|
this.showSysInfo = true;
|
// 判断正在执行实时或者轮询任务
|
this.PollData.CameraList.forEach((element) => {
|
if (element.id === newCamera.cameraId) {
|
this.runType = element.run_type;
|
}
|
});
|
},
|
|
// 获取混合场景
|
showRules(id) {
|
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;
|
saveCameraScene(payload).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.Camera.update();
|
this.$notify({
|
type: "success",
|
message: "策略保存成功！",
|
});
|
//刷新左侧树
|
|
_this.$root.$children[0].$children[0].querySearchAsync("camera");
|
}
|
});
|
},
|
delScenRule() {
|
this.Camera.update();
|
},
|
changeLoading(params) {
|
this.loading = params;
|
},
|
//是否进行视频分析处理
|
pollEnable(row) {
|
let val = 0;
|
if (row) {
|
if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
|
this.Camera.dealWay = true;
|
val = 1;
|
} else {
|
this.Camera.dealWay = false;
|
val = 0;
|
}
|
} else {
|
this.Camera.dealWay = false;
|
val = -1;
|
}
|
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
|
changeRunType({
|
camera_ids: [this.Camera.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) {
|
//判断是新增还是更新
|
if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
|
if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
|
if (row.value) {
|
this.Camera.dealWay = true;
|
} else {
|
this.Camera.dealWay = false;
|
}
|
changeRunType({
|
camera_ids: [this.Camera.cameraId],
|
run_type: this.Camera.dealWay ? 1 : 0,
|
}).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "配置成功",
|
});
|
} else {
|
this.$notify({
|
type: "error",
|
message: "配置失败",
|
});
|
}
|
});
|
} else {
|
if (this.Camera.dealWay) {
|
this.Camera.dealWay = false;
|
changeRunType({
|
camera_ids: [this.Camera.cameraId],
|
run_type: this.Camera.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();
|
}
|
},
|
//复制
|
ctrlC() {
|
this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
|
this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
|
this.$notify({
|
type: "success",
|
message: "复制算法成功！",
|
});
|
},
|
ctrlV() {
|
if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
|
this.$notify({
|
type: "warning",
|
message: "不能粘贴本摄像机的算法到本摄像机！",
|
});
|
return false;
|
}
|
pasteRules({
|
sourceId: this.TreeDataPool.ctrlCameraId,
|
targetIds: [this.Camera.cameraId],
|
})
|
.then((res) => {
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "粘贴算法成功！",
|
});
|
this.initCameraData(this.Camera.cameraId);
|
} else {
|
this.$notify({
|
type: "error",
|
message: "粘贴算法失败！",
|
});
|
}
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: "粘贴算法失败！",
|
});
|
});
|
},
|
|
//连接独立场景连线
|
connectLine() {
|
//清除之前的连线
|
this.plumbIns.deleteEveryConnection();
|
|
for (let index = 0; index < this.SeparateRules.length; index++) {
|
this.plumbIns.connect({
|
// 对应上述基本概念
|
source: "separate_camera",
|
target: `rule_${index}`,
|
anchor: ["Left", "Right"],
|
connector: index === 0 ? ["Straight"] : ["Bezier", { curviness: 60 }],
|
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
|
});
|
}
|
},
|
|
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") {
|
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") {
|
//独立场景
|
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 = {};
|
},
|
|
//修改独立场景
|
editRules(item, index, type) {
|
this.ruleType == type;
|
this.editData = {
|
type,
|
rule: item,
|
index,
|
};
|
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;
|
});
|
},
|
|
//取消修改
|
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;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.s-separate-rules {
|
overflow-x: auto;
|
box-sizing: border-box;
|
padding: 13px 0 20px;
|
|
.title {
|
box-sizing: border-box;
|
margin-bottom: 20px;
|
padding-left: 10px;
|
border-left: 4px solid #0065ff;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.top {
|
display: flex;
|
|
.left-top {
|
display: flex;
|
margin-bottom: 24px;
|
|
.left-top-left {
|
box-sizing: border-box;
|
padding: 20px;
|
width: 608px;
|
height: 232px;
|
margin-right: 24px;
|
background-color: #fff;
|
}
|
|
.left-top-middle {
|
box-sizing: border-box;
|
padding: 20px;
|
flex: 1;
|
width: 292px;
|
height: 232px;
|
background-color: #fff;
|
|
.chart ::v-deep {
|
.row {
|
margin-bottom: 20px;
|
}
|
}
|
}
|
}
|
|
.left-bottom {
|
display: flex;
|
|
.left-bottom-left {
|
width: 450px;
|
height: 146px;
|
box-sizing: border-box;
|
margin-right: 24px;
|
background-color: #fff;
|
}
|
|
.left-bottom-middle {
|
flex: 1;
|
background-color: #fff;
|
}
|
}
|
|
.right {
|
position: relative;
|
box-sizing: border-box;
|
margin-left: 24px;
|
padding: 20px;
|
background: #fff;
|
flex: 1;
|
|
.draw {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
width: 64px;
|
height: 24px;
|
color: #fff;
|
text-align: center;
|
line-height: 24px;
|
font-size: 12px;
|
background-color: #0065ff;
|
}
|
}
|
}
|
|
.SeparateRules {
|
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 {
|
display: flex;
|
margin-top: 10px;
|
|
.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;
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.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;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #000000;
|
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>
|
