From d6bf6c38fe15510aac8e56569ca0450fb8656c89 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 30 七月 2020 18:55:09 +0800
Subject: [PATCH] 调整摄像机接入页面
---
src/pages/cameraAccess/components/localSeparate.vue | 1458 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 729 insertions(+), 729 deletions(-)
diff --git a/src/components/camera/localSeparate.vue b/src/pages/cameraAccess/components/localSeparate.vue
similarity index 99%
rename from src/components/camera/localSeparate.vue
rename to src/pages/cameraAccess/components/localSeparate.vue
index e1663f8..f17311d 100644
--- a/src/components/camera/localSeparate.vue
+++ b/src/pages/cameraAccess/components/localSeparate.vue
@@ -1,729 +1,729 @@
-<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("婵�娲籭d",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>
+<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("婵�娲籭d",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>
--
Gitblit v1.8.0