<template>
|
<div class="s-linkage-rules">
|
<div class="top">
|
<p style="text-align:left;margin-bottom: 14px;">
|
<b style="font-size: 14px;line-height: 18px;">已选算法</b>
|
<!-- 新增任务 -->
|
<el-dropdown trigger="click" size="small" placement="bottom" @command="taskAdd">
|
<el-tooltip effect="dark" content="选择算法" placement="bottom" popper-class="atooltip">
|
<span :class="currentCarmeras.cameraId?'add-btn':'nocamera-css'" style="margin-right: 28px;">
|
<i class="iconfont iconxuanzeziyuan" style="font-size:16px"></i>
|
</span>
|
</el-tooltip>
|
<el-dropdown-menu v-if="currentCarmeras.cameraId" slot="dropdown" style="left:315px !important;">
|
<el-dropdown-item
|
v-for="(item, index) in sepTasks"
|
:key="index"
|
:command="item"
|
:divided="index > 0"
|
>
|
<span
|
style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 170px;display: block;"
|
:title="item.task.taskname"
|
>
|
<el-icon
|
class="iconfont iconxingzhuangcopy"
|
style="color: #3D68E1;margin-right: 12px;"
|
></el-icon>
|
{{item.task.taskname}}
|
</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</p>
|
|
<swiper :options="swiperTaskOption" class="swiper-box-container">
|
<span class="task-tip" v-show="currentCarmeras.selectTask.length == 0 ">暂无算法,请选择算法</span>
|
|
<swiper-slide v-for="(item, index) in currentCarmeras.selectTask" :key="index">
|
<div
|
class="item-card"
|
:style="`${isActiveTask(index) ? 'border-color:#ff7733' : ''}`"
|
@click="item.isEdit ? '': showRuleList(item.task.taskid, index)"
|
>
|
<p style="text-align: right; width:100%; height:25px;">
|
<el-tooltip content="未配置规则" placement="top" popper-class="atooltip">
|
<i
|
class="el-icon-warning-outline"
|
style="font-size:16px; color:orange; position:relative; top:-9px; left: 8px;"
|
v-show="!item.hasRule"
|
></i>
|
</el-tooltip>
|
<el-dropdown size="small" placement="bottom" @command="updateTaskStatus($event,item)">
|
<span class="el-dropdown-link">
|
<i
|
class="iconfont iconbianji1"
|
style="font-size: 28px;float:right; margin:0px 5px "
|
></i>
|
</span>
|
<el-dropdown-menu slot="dropdown" style="margin-top:-3px;width:60px">
|
<el-dropdown-item divided :command="0">编辑</el-dropdown-item>
|
<el-dropdown-item style="color:red;" :command="2">删除</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</p>
|
<el-icon
|
class="iconfont iconxingzhuangcopy"
|
:style="item.task.enable ? 'color: #0066EB;font-size: 35.5px;' : 'font-size: 35.5px;'"
|
></el-icon>
|
<p
|
v-if="!item.isEdit"
|
:style="item.task.enable ? 'color: #0066EB;padding-top: 20px;' : 'padding-top: 20px;'"
|
>
|
<b>{{ item.task.taskname }}</b>
|
</p>
|
<el-input
|
size="small"
|
style="padding-top: 25px;z-index: 9999;"
|
v-if="item.isEdit"
|
v-model="item.task.taskname"
|
:maxlength="15"
|
v-focus
|
@blur="updateTaskName(item)"
|
></el-input>
|
</div>
|
</swiper-slide>
|
</swiper>
|
|
<div class="pre-border" v-show="currentCarmeras.selectTask.length > 4 ">
|
<div class="icon-btn" slot="button-prev">
|
<i class="iconfont iconzuo"></i>
|
</div>
|
</div>
|
<div class="next-border" v-show="currentCarmeras.selectTask.length > 4 ">
|
<div class="icon-btn" slot="button-next">
|
<i class="iconfont iconyou1"></i>
|
</div>
|
</div>
|
|
<!-- 系统信息 -->
|
<div class="top-right">
|
<sysinfo v-if="showSysInfo" :showRealPoll="false" :ShowLocalVedio="true"
|
style="margin-left: 25px;margin-top: -10px;" />
|
</div>
|
</div>
|
|
<div class="bottom">
|
<div style="width: calc(100% + 100px);height: 10px;background-color: #E9EBF2;position:relative;left:-40px"></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>
|
<el-button class="btn-css" type="primary"
|
:disabled="currentCarmeras.rules.length===0"
|
@click="ToAll"
|
size="mini">应用到全部</el-button>
|
</div>
|
<div class="img-box">
|
|
<!-- swiper 展示 -->
|
<swiper
|
ref="localVideoSwiper"
|
:options="swiperOption"
|
@slideChange="swiperSlideChange"
|
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-spinner="el-loading-spinner-div"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
:isShowDrawArrow="false"
|
:isLink="false"
|
:disabled="false"
|
:snapshot_url="data.baseImg"
|
:canvasDataShow="data.canvasData"
|
:currentCameraId="data.cameraId"
|
:loading="data.loading"
|
@changeLoading="changeLoading"
|
@fromCanvas="getCanvasData"
|
></polygon-canvas>
|
</swiper-slide>
|
</swiper>
|
<div class="swiper-local-prev" v-show="swipercanvasData.length>1">
|
<div class="icon-btn" slot="button-prev">
|
<i class="iconfont iconzuo"></i>
|
</div>
|
</div>
|
<div class="swiper-local-next" v-show="swipercanvasData.length>1">
|
<div class="icon-btn" slot="button-next">
|
<i class="iconfont iconyou1"></i>
|
</div>
|
</div>
|
</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="'link'" />
|
</div>
|
</div>
|
<!-- 任务规则 -->
|
<rule-editor
|
ref="ruleEditor"
|
:Carmeras="Carmeras"
|
:isLinkRule="false"
|
:tableRuleList="currentCarmeras.rules"
|
:activeTaskIndex="activeTaskIndex"
|
:onSubmitRule="submitRule"
|
@changeTask="changeTask"
|
@delete-rule="showRuleList(activeTaskId, activeTaskIndex)"
|
></rule-editor>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getLinkRules,
|
saveLinkRule,
|
deleteCameraRules,
|
|
fetchCameraRulesByTask,
|
deleteCameraTask,
|
saveCameraRules,
|
updateCameraTask,
|
updateRuleDefence,
|
updateAlarmLevel,
|
addCameraTask
|
} from "@/api/camera";
|
import VideoRuleData from "@/Pool/VideoRuleData";
|
import { savePolygon } from "@/api/polygon";
|
import { ruleApply2All } from "@/api/localVedio";
|
|
import polygonCanvas from "@/components/canvas";
|
import RuleEditor from "./RuleEditor";
|
import TimeSlider from "./TimeSlider";
|
import Sysinfo from "./SystemInfo"
|
|
export default {
|
components: {
|
TimeSlider,
|
polygonCanvas,
|
RuleEditor,
|
Sysinfo
|
},
|
data() {
|
return {
|
loading: false,
|
Carmeras: [],
|
currentCarmeras: {
|
selectTask: [],
|
rules: [],
|
polygonData: [],
|
cameraId: "",
|
canvasData: {},
|
baseImg: "",
|
cameraName: "",
|
camearInfo: {},
|
loading: false,
|
analytics: false,
|
dealWay: false,
|
runServerName: "",
|
},
|
tasksTable: [],
|
swipercanvasData: [],
|
seqNumber: 0,
|
tableRuleList: [],
|
swiperIndex: 0,
|
swiperOption: {
|
grabCursor: true,
|
pagination: {
|
el: ".swiper-pagination",
|
clickable: true
|
},
|
navigation: {
|
nextEl: ".swiper-local-next",
|
prevEl: ".swiper-local-prev"
|
}
|
},
|
swiperTaskOption: {
|
slidesPerView: 4,
|
spaceBetween: 10,
|
pagination: {
|
el: ".swiper-pagination",
|
clickable: true
|
},
|
navigation: {
|
nextEl: ".next-border",
|
prevEl: ".pre-border"
|
}
|
},
|
activeTaskIndex: 0,
|
activeTaskId: "",
|
showSysInfo: false
|
};
|
},
|
watch: {
|
Carmeras: {
|
handler(newVal, oldVal) {
|
this.showTasks();
|
this.setSwiperData();
|
},
|
deep: true
|
}
|
},
|
computed: {
|
sepTasks() {
|
let list =this.VideoManageData.SepTasks.map(i=>{
|
i.isEdit = false
|
return i
|
})
|
return list;
|
}
|
},
|
methods: {
|
drawBaseImg() {
|
console.log(this.$refs,this.$refs.localVideoSwiper.canvas,'drawBaseImg')
|
this.$refs.canvas[this.swiperIndex].showModal();
|
},
|
swiperSlideChange() {
|
this.swiperIndex = this.$refs.localVideoSwiper.swiper.activeIndex;
|
// console.log(this.swiperIndex,'切换本地视频')
|
this.currentCarmeras = this.Carmeras[this.swiperIndex];
|
this.showTasks();
|
},
|
initCameraData() {
|
this.Carmeras = [];
|
this.loading = false;
|
this.showSysInfo = true
|
// console.log(this.TreeDataPool.checkedLocalVedio,'this.TreeDataPool.checkedLocalVedio')
|
this.TreeDataPool.checkedLocalVedio.forEach(camera => {
|
this.Carmeras.push(new VideoRuleData(camera.id));
|
});
|
if(this.Carmeras.length !== 0){
|
this.currentCarmeras = this.Carmeras[this.swiperIndex];
|
if(this.currentCarmeras.selectTask.length !== 0){
|
this.activeTaskId = this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid
|
}
|
// console.log(this.Carmeras,'this.Carmeras',this.currentCarmeras)
|
this.showRules();
|
}
|
},
|
isSelectTask(item) {
|
for (let i = 0; i < this.tasksTable.length; i++) {
|
if (this.tasksTable.taskid === item.taskid) {
|
return true;
|
}
|
}
|
},
|
showTasks() {
|
let tasks = [];
|
if (this.Carmeras[this.swiperIndex]) {
|
this.tasksTable = this.Carmeras[this.swiperIndex].selectTask.forEach(
|
t => {
|
tasks.push(t.task);
|
}
|
);
|
this.tasksTable = tasks;
|
} else {
|
this.tasksTable = [];
|
}
|
console.log(this.tasksTable,'this.tasksTable')
|
this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
|
},
|
setSwiperData() {
|
let swipers = [];
|
let carmeras = this.Carmeras;
|
console.log(carmeras,'carmeras')
|
for (let i = 0; i < carmeras.length; i++) {
|
swipers = swipers.concat({
|
cameraId: carmeras[i].cameraId,
|
// name: carmeras[i].camearInfo.name,
|
name: "215摄像机__4823148102934521.mp4",
|
// baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined ,
|
baseImg: "httpImage/192.168.5.23:6086/681,2c7b272064d78f",
|
canvasData: carmeras[i].canvasData,
|
loading: carmeras[i].loading,
|
});
|
}
|
this.swipercanvasData = swipers;
|
console.log(this.swipercanvasData,'setSwiperData')
|
},
|
getCanvasData(data) {
|
let polyon = { ...data };
|
polyon.camera_id = this.currentCarmeras.cameraId;
|
savePolygon(polyon).then(rsp => {
|
this.currentCarmeras.getPolygon();
|
});
|
},
|
showRules() {
|
this.tableRuleList = [];
|
this.$refs.ruleEditor.cleanRule();
|
if (this.currentCarmeras.selectTask[0] && this.currentCarmeras.selectTask[0].task) {
|
this.showRuleList(this.currentCarmeras.selectTask[0].task.taskid, 0);
|
} else {
|
this.tableRuleList = [];
|
}
|
},
|
submitRule(groupRule) {
|
let ids = this.TreeDataPool.checkedLocalVedio.map(i=>{
|
return i.id
|
})
|
console.log(ids,'已选的视频')
|
const payload = {
|
// camera_ids: [this.currentCarmeras.cameraId],
|
camera_ids: ids,
|
group_id: groupRule.group_id,
|
group_rule: groupRule.rules,
|
group_text: groupRule.group_text,
|
set_type: "batchTask",
|
task_id: this.activeTaskId ? this.activeTaskId : this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid
|
};
|
console.log(this.activeTaskId,'submitRule',this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid)
|
saveCameraRules(payload).then(rsp => {
|
if (rsp && rsp.success) {
|
this.$refs.ruleEditor.cleanRule();
|
this.showRuleList(this.activeTaskId, this.activeTaskIndex);
|
this.$notify({
|
type: "success",
|
message: "任务保存成功！"
|
});
|
}
|
});
|
},
|
changeLoading(params){
|
this.loading = params
|
},
|
taskAdd(item) {
|
console.log(this.tasksTable,'taskAdd')
|
for (let i = 0; i < this.tasksTable.length; i++) {
|
if (this.currentCarmeras.selectTask[i].task.taskid === item.task.taskid) {
|
this.$notify({
|
showClose: true,
|
message: "请勿重复添加任务！",
|
type: "warning"
|
});
|
return;
|
}
|
}
|
addCameraTask({
|
cameraId: this.currentCarmeras.cameraId,
|
taskId: item.task.taskid
|
}).then(() => {
|
// 更新树状态
|
this.TreeDataPool.fetchTreeData();
|
});
|
|
// 新添加任务默认关闭
|
this.currentCarmeras.selectTask.push(item);
|
// 添加并初始化规则显示
|
this.activeTaskIndex = this.currentCarmeras.selectTask.length - 1;
|
this.activeTaskId = item.task.taskid;
|
this.tableRuleList = [];
|
// 清空编辑规则
|
this.$refs.ruleEditor.cleanRule();
|
},
|
isActiveTask(index) {
|
return this.activeTaskIndex === index;
|
},
|
updateTaskStatus(action, item) {
|
console.log(action, item, 'updateTaskStatus')
|
//修改名称
|
if (action == "0") {
|
this.$set(item, 'isEdit', true)
|
this.$forceUpdate()
|
console.log(item, 'updateTaskStatus')
|
}
|
// 删除
|
if (action == "2") {
|
this.taskDelete(this.activeTaskIndex);
|
}
|
},
|
// 更新任务名称
|
async updateTaskName(data) {
|
console.log(data, 'updateTaskName')
|
let json = {
|
taskId: data.task.taskid,
|
taskName: data.task.taskname
|
};
|
let res = await updateTaskName(json);
|
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error"
|
});
|
if (res && res.success) {
|
this.$set(data, "isEdit", false);
|
this.currentCarmeras.getCameraTask()
|
this.$forceUpdate()
|
}
|
},
|
taskDelete(index) {
|
this.$confirm("提示：删除后，此摄像机中此算法涉及的所有规则将一起删除，是否删除？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
})
|
.then(() => {
|
deleteCameraTask(
|
this.currentCarmeras.cameraId,
|
this.currentCarmeras.selectTask[index].task.taskid
|
).then(res => {
|
if (res && res.success) {
|
this.currentCarmeras.selectTask.splice(index, 1);
|
|
if (this.currentCarmeras.selectTask.length > 0) {
|
this.showRuleList(this.currentCarmeras.selectTask[0].task.taskid, 0);
|
} else {
|
this.TreeDataPool.fetchTreeData();
|
}
|
this.$notify({
|
type: "success",
|
message: "删除摄像机任务成功"
|
});
|
} else {
|
this.$notify({
|
type: "error",
|
message: "删除失败！"
|
});
|
}
|
});
|
})
|
.catch(() => {
|
// console.log("取消删除");
|
});
|
},
|
showRuleList(task, index) {
|
this.activeTaskId = task;
|
this.activeTaskIndex = index;
|
// 清空编辑
|
this.currentCarmeras.getCameraTask();
|
|
},
|
changeTask(taskid){
|
console.log("任务id",taskid)
|
this.activeTaskId = taskid
|
this.currentCarmeras.selectTask.forEach((el,index) => {
|
console.log("panklei",el,index)
|
if (el.task.taskid === taskid) {
|
console.log("激活id",index)
|
this.activeTaskIndex = index
|
this.$refs.ruleEditor.sdksOption = this.currentCarmeras.selectTask[
|
this.activeTaskIndex
|
].sdks;
|
}
|
})
|
},
|
async ToAll(){
|
// console.log(this.currentCarmeras.cameraId, '当前选中文件id')
|
let res = await ruleApply2All({
|
camera_id: this.currentCarmeras.cameraId
|
})
|
// console.log(res,'应用到全部')
|
if(res && res.success){
|
this.$notify({
|
type:"success",
|
message:"应用到全部成功!"
|
})
|
this.TreeDataPool.findAllFile({});
|
}
|
}
|
},
|
destroyed() {
|
this.Carmeras = [];
|
this.currentCarmeras = {
|
selectTask: [],
|
rules: [],
|
polygonData: [],
|
cameraId: "",
|
canvasData: {},
|
baseImg: "",
|
cameraName: "",
|
camearInfo: {},
|
loading: false,
|
analytics: false,
|
dealWay: false,
|
runServerName: "",
|
};
|
this.tasksTable = [];
|
this.tableRuleList = [];
|
},
|
};
|
</script>
|
<style lang="scss">
|
.s-linkage-rules {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.top {
|
width: 100%;
|
height: 174px;
|
border-bottom: 1px solid #ccc;
|
position: relative;
|
|
.top-right {
|
float: right;
|
width: 58%;
|
height: 124px;
|
}
|
|
.pre-border {
|
left: 0px;
|
top: 40%;
|
}
|
.next-border {
|
left: 40%;
|
top: 40%;
|
}
|
}
|
.bottom {
|
width: 100%;
|
height: calc(100% - 174px);
|
position: absolute;
|
top: 174px;
|
//left: -38px;
|
.bottom-side {
|
height: 100%;
|
width: 250px;
|
float: left;
|
overflow: auto;
|
border-right: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
padding: 10px;
|
box-sizing: border-box;
|
.selectTask {
|
margin: 10px auto;
|
width: 140px;
|
padding: 10px;
|
box-sizing: border-box;
|
border: 1px solid #ccc;
|
position: relative;
|
.selectTaskDelete {
|
position: absolute;
|
right: 10px;
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
}
|
.bottom-right {
|
width: calc(100% + 30px);
|
height: 100%;
|
float: left;
|
overflow: auto;
|
padding: 10px 38px;
|
box-sizing: border-box;
|
.draw-and-time-box {
|
height: 430px;
|
width: 100%;
|
padding-bottom: 5px;
|
.draw-box,
|
.time-box {
|
float: left;
|
width: 50%;
|
height: 100%;
|
.img-box {
|
height: calc(100% - 32px);
|
width: 100%;
|
box-sizing: border-box;
|
display: flex;
|
position: relative;
|
overflow: hidden;
|
.refresh-btn {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
}
|
img {
|
width: 90%;
|
padding: 5px;
|
box-sizing: border-box;
|
}
|
.swiper-box-container2 {
|
max-width: 690px;
|
}
|
}
|
}
|
.draw-box {
|
width: 576px;
|
}
|
.draw-box-title {
|
text-align: left;
|
margin-top: -3px;
|
.btn-css {
|
position: relative;
|
left: 556px;
|
margin-bottom: 1px;
|
}
|
}
|
}
|
}
|
}
|
|
.add-btn {
|
color: #3d68e1;
|
margin-left: 10px;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
.add-btn:hover {
|
color: #2249b4;
|
}
|
.nocamera-css {
|
cursor: not-allowed;
|
color: #3d68e1;
|
margin-left: 10px;
|
font-size: 14px;
|
}
|
.task-tip {
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #cccccc;
|
margin-top: 10%;
|
margin-left: 38%;
|
}
|
}
|
|
.swiper-local-prev,
|
.swiper-local-next {
|
width: 40px;
|
height: 40px;
|
position: absolute;
|
background: #8888;
|
top: 48%;
|
z-index: 99;
|
border-radius: 4em;
|
outline: none;
|
.icon-btn {
|
color: rgb(255, 255, 255);
|
text-align: center;
|
line-height: 38px;
|
cursor: pointer;
|
}
|
}
|
.swiper-local-prev {
|
left: 2px;
|
}
|
.swiper-local-prev:hover {
|
background: #666;
|
}
|
.swiper-local-next {
|
right: 3px;
|
}
|
.swiper-local-next:hover {
|
background: #666;
|
}
|
.task-tip {
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #cccccc;
|
margin-top: 10%;
|
margin-left: 38%;
|
}
|
</style>
|
