<template>
|
<div class="s-separate-rules">
|
<div class="top">
|
<div class="left">
|
<div class="left-top">
|
<!-- 场景及规则 -->
|
<div class="left-top-left">
|
<div class="title">
|
场景 <span v-show="Camera.runServerName != ''">( {{ Camera.runServerName }} )</span>
|
</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}`"
|
image="realTime (2).png"
|
></HashrateCard>
|
|
<!-- 轮询算力信息 -->
|
<HashrateCard
|
class="left-bottom-middle"
|
title="轮询算力"
|
:total="`${PollData.PollValidCount}`"
|
:ValidCount="`${PollData.PollSum}`"
|
:InValidCount="`${PollData.PollInvalid}`"
|
:RunningCount="`${PollData.PollRun}`"
|
:NoDeal="`${PollData.PollNoDeal}`"
|
image="polling.png"
|
></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"
|
:showProportion="960 / canvasWidth"
|
@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">
|
<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>
|
|
<!-- 场景区域 -->
|
<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/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>
|
|
<!-- 添加场景弹窗 -->
|
<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 { getAllTimeRule } from "@/api/timeRule"
|
|
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: 576,
|
canvasHeight: 324,
|
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) => {
|
if (rsp && rsp.success) {
|
if (rsp.data.msg.indexOf("失败") >= 0) {
|
this.$message({ type: "error", duration: 5000, message: rsp.data + " 区域已关联场景, 无法删除" })
|
} else {
|
this.$message.success(rsp.data.msg)
|
}
|
}
|
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
|
},
|
refresh2(url, id) {
|
this.swipercanvasData.forEach((data) => {
|
if (data.cameraId == id) {
|
data.baseImg = url
|
}
|
})
|
},
|
|
// 初始化摄像机信息，父组件调用
|
async initCameraData(id, devId) {
|
this.$store.commit("setDevId", devId)
|
devId ? false : (devId = "")
|
getAllTimeRule(devId).then((rsp) => {
|
this.VideoManageData.TimeRules = rsp.data.timeRules
|
})
|
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) {
|
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].time_name = newRule.data.time_name
|
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 = {}
|
},
|
|
//修改独立场景
|
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) {
|
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: flex-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: 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;
|
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>
|
