From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/cameraAccess/components/LinkageRule.vue | 316 +++++++++++++++++++++++++++++-----------------------
1 files changed, 175 insertions(+), 141 deletions(-)
diff --git a/src/pages/cameraAccess/components/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue
index 2d5e609..d57a3d7 100644
--- a/src/pages/cameraAccess/components/LinkageRule.vue
+++ b/src/pages/cameraAccess/components/LinkageRule.vue
@@ -1,61 +1,63 @@
<template>
<div class="s-linkage-rules">
- <div class="top">
+ <!-- <div class="top">
<p style="text-align:left;margin-bottom: 14px;">
- <b style="font-size: 14px;line-height: 18px;">宸查�夌畻娉�</b>
+ <b style="font-size: 14px;line-height: 18px;">鍦烘櫙</b>
</p>
- <!-- <swiper :options="swiperTaskOption" class="swiper-box-container swiper-no-swiping">
- <span class="task-tip" v-show="tableRuleList.length == 0 ">鏆傛棤绠楁硶锛岃鍦ㄧ嫭绔嬭鍒欎腑閫夋嫨绠楁硶</span>
- <swiper-slide v-for="(item, index) in tableRuleList" :key="index">
- <div class="item-card">
- <p style="text-align: right; width:100%; height:25px"></p>
- <p style="color: #0066EB;padding-top: 20px;'">
- <b>{{ item.scene_name }}</b>
- </p>
- </div>
- </swiper-slide>
- </swiper>
-
- <div class="pre-border" v-show="tableRuleList.length > 4 ">
- <div class="icon-btn" slot="button-prev">
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="next-border" v-show="tableRuleList.length > 4 ">
- <div class="icon-btn" slot="button-next">
- <i class="iconfont iconyou1"></i>
- </div>
- </div>-->
- <div>
+ <div class="clearfix" style="min-width:1570px;">
<div class="slide-scene">
- <span class="task-tip" v-if="tableRuleList.length == 0 ">鏆傛棤绠楁硶锛岃鍦ㄧ嫭绔嬭鍒欎腑閫夋嫨绠楁硶</span>
<slide-scene :sceneData="tableRuleList"></slide-scene>
</div>
- <!-- <slide-scene :sceneData="Camera.rules"></slide-scene> -->
- <!-- 绯荤粺淇℃伅 -->
<div class="top-right">
<sysinfo
v-if="showSysInfo"
- style="margin-left: 25px;margin-top: -10px;"
+ style="margin-top: -10px;"
:ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
:showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
/>
</div>
</div>
+ </div>-->
+ <div class="top">
+ <p class="task-css">
+ <b style="font-size: 14px; line-height: 18px">鍦烘櫙</b>
+ </p>
+ <div class="clearfix">
+ <slide-scene :sceneData="tableRuleList"></slide-scene>
+ <div class="top-right">
+ <sysinfo
+ v-if="showSysInfo"
+ style="margin-top: -10px"
+ :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
+ :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
+ />
+ <!-- <sysinfo
+ :showRealPoll="cameraType === 'camera'"
+ :ShowLocalVedio="cameraType === 'dataStack'"
+ v-if="showSysInfo"
+ style="margin-top:-10px"
+ />-->
+ </div>
+ </div>
</div>
-
<div class="bottom">
- <div
- style="width: calc(100% + 80px);height: 10px;background-color: #E9EBF2;p;position:relative;left:-50px"
- ></div>
+ <div class="devide"></div>
<div class="bottom-right">
<div class="draw-and-time-box">
<div class="draw-box">
- <p style="text-align:left;padding: 10px 0px 0px 0px;box-sizing: border-box;">
+ <p
+ style="
+ text-align: left;
+ padding: 10px 0px 0px 0px;
+ box-sizing: border-box;
+ "
+ >
<b style="font-size: 14px">鏌ョ湅鍖哄煙</b>
</p>
<div class="img-box">
- <span class="camera-tip" v-show="swipercanvasData.length == 0 ">鏆傛棤鍖哄煙锛岃鑷冲皯閫夋嫨2涓憚鍍忔満</span>
+ <span class="camera-tip" v-show="swipercanvasData.length == 0"
+ >鏆傛棤鍖哄煙锛岃鑷冲皯閫夋嫨2涓憚鍍忔満</span
+ >
<!-- swiper 灞曠ず -->
<swiper
ref="swiper"
@@ -63,8 +65,15 @@
@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>
+ <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"
@@ -80,27 +89,38 @@
:currentCameraId="data.cameraId"
@changeLoading="changeLoading"
@fromCanvas="getCanvasData"
+ @refresh="refresh"
></polygon-canvas>
</swiper-slide>
</swiper>
- <div class="swiper-local-prev" v-show="swipercanvasData.length>1">
+ <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="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 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"
+ style="
+ width: calc(90% + 90px - 576px);
+ overflow-x: auto;
+ overflow-y: hidden;
+ "
>
- <p style="text-align:left;padding: 10px;box-sizing: border-box">
+ <p style="text-align: left; padding: 10px; box-sizing: border-box">
<b style="font-size: 14px">鏃堕棿瑙勫垯</b>
</p>
<time-slider ref="timeSlider" :type="'link'" />
@@ -114,6 +134,7 @@
:tableRuleList="tableRuleList"
:onSaveScene="saveSceneRule"
@delete-rule="showRules"
+ v-loading="loadingRuleList"
></scene-rule>
</div>
</div>
@@ -121,15 +142,13 @@
</template>
<script>
-import {
- saveLinkScene,
- getLinkSceneRule,
-} from '@/api/scene'
+import { saveLinkScene, getLinkSceneRule } from "@/api/scene";
import VideoRuleData from "@/Pool/VideoRuleData";
import polygonCanvas from "@/components/canvas";
import TimeSlider from "./TimeSlider";
-import Sysinfo from "./SystemInfo"
+//import Sysinfo from "./SystemInfo"
+import Sysinfo from "@/components/subComponents/SystemInfo";
import SceneRule from "./SceneRule";
import SlideScene from "./scene/SlideScene";
@@ -139,32 +158,18 @@
polygonCanvas,
SceneRule,
Sysinfo,
- SlideScene
+ SlideScene,
},
computed: {
selectedCameraIds() {
- let ids = [];
- if (this.TreeDataPool.treeActiveName == 'dataStack') {
- if (this.TreeDataPool.checkedLocalVedio.length > 0) {
- ids = this.TreeDataPool.checkedLocalVedio.map(i => {
- return i.id;
- })
-
- }
- } else {
- if (this.TreeDataPool.selectedNodes.length > 0) {
- ids = this.TreeDataPool.selectedNodes;
- }
- }
-
- return ids;
- }
+ return this.TreeDataPool.selectedNodes;
+ },
},
data() {
return {
loading: false,
+ loadingRuleList: false,
Carmeras: [],
- Camera: new VideoRuleData(),
tasksTable: {},
swipercanvasData: [],
seqNumber: 0,
@@ -174,26 +179,27 @@
grabCursor: true,
pagination: {
el: ".swiper-pagination",
- type: "fraction"
+ type: "fraction",
},
navigation: {
nextEl: ".swiper-local-next",
- prevEl: ".swiper-local-prev"
- }
+ prevEl: ".swiper-local-prev",
+ },
},
swiperTaskOption: {
slidesPerView: 4,
// spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
- clickable: true
+ clickable: true,
},
navigation: {
nextEl: ".next-border",
- prevEl: ".pre-border"
- }
+ prevEl: ".pre-border",
+ },
},
- showSysInfo: false
+ showSysInfo: false,
+ requestSeq: "",
};
},
watch: {
@@ -201,31 +207,32 @@
handler(newVal, oldVal) {
this.setSwiperData();
},
- deep: true
- }
+ deep: true,
+ },
},
methods: {
swiperSlideChange() {
this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
},
- initCameraData() {
+ initCameraData(type) {
this.$nextTick(() => {
this.Carmeras = [];
- this.loading = false;
- this.showSysInfo = true
- if (this.TreeDataPool.treeActiveName == 'dataStack') {
- this.TreeDataPool.checkedLocalVedio.forEach(camera => {
- this.Carmeras.push(new VideoRuleData(camera.id));
+ this.showSysInfo = true;
+
+ if (type === 1) {
+ this.selectedCameraIds.forEach((cid) => {
+ this.Carmeras.push(new VideoRuleData(cid, true));
});
} else {
- this.TreeDataPool.selectedNodes.forEach(camera => {
- this.Carmeras.push(new VideoRuleData(camera));
+ this.selectedCameraIds.forEach((cid) => {
+ this.Carmeras.push(new VideoRuleData(cid));
});
}
+
this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
this.showRules();
- })
+ });
},
setSwiperData() {
let swipers = [];
@@ -241,15 +248,35 @@
}
this.swipercanvasData = swipers;
},
- getCanvasData() { },
+ refresh(url, id) {
+ this.swipercanvasData.forEach((data) => {
+ if (data.cameraId == id) {
+ data.baseImg = url;
+ }
+ });
+ //this.Camera.baseImg = url
+ },
+ getCanvasData() {},
+ newUid() {
+ let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
+ let originChar = "0123456789abcdef";
+ let len = originChar.length;
+ return originStr.replace(/x/g, function (match) {
+ return originChar.charAt(Math.floor(Math.random() * len));
+ });
+ },
showRules() {
this.tableRuleList = [];
if (this.selectedCameraIds.length > 0) {
- getLinkSceneRule({ cameraIds: this.selectedCameraIds }).then(
- rsp => {
- if (rsp && rsp.success) {
+ this.loadingRuleList = true;
+ let seq = this.newUid();
+ this.requestSeq = seq;
+ getLinkSceneRule({ cameraIds: this.selectedCameraIds })
+ .then((rsp) => {
+ this.loadingRuleList = false;
+ if (rsp && rsp.success && seq === this.requestSeq) {
this.tableRuleList = rsp.data;
// 缁熶竴瑙勫垯缂栬緫鐨勬暟鎹粨鏋�
@@ -258,66 +285,81 @@
}
}
// this.TreeDataPool.fetchTreeData();
- }
- );
+ })
+ .catch(() => {
+ this.loadingRuleList = false;
+ });
}
-
},
saveSceneRule(groupRule) {
- const payload = { ...groupRule }
+ const payload = { ...groupRule };
+ if (!payload.rules) {
+ this.$message({
+ type: "warning",
+ message: "瑙勫垯鍙傛暟鏈夎",
+ });
+
+ return;
+ }
+
payload.cameraIds = this.selectedCameraIds;
- saveLinkScene(payload).then(rsp => {
- if (rsp && rsp.success) {
- //this.Camera.update();
- this.initCameraData();
- this.$notify({
- type: "success",
- message: "浠诲姟淇濆瓨鎴愬姛锛�"
- });
- } else {
- this.$notify({
+ saveLinkScene(payload)
+ .then((rsp) => {
+ if (rsp && rsp.success) {
+ //this.Camera.update();
+ this.initCameraData();
+ // this.showRules();
+ this.$notify({
+ type: "success",
+ message: "浠诲姟淇濆瓨鎴愬姛锛�",
+ });
+ } else {
+ this.$notify({
+ type: "error",
+ message: rsp.data,
+ });
+ }
+ })
+ .catch((err) => {
+ this.$message({
type: "error",
- message: rsp.data
+ message: "淇濆瓨澶辫触锛�",
});
- }
- }).catch(err => {
- this.$message({
- type: "error",
- message: "淇濆瓨澶辫触锛�" + err.data
});
- });
},
changeLoading(params) {
- this.loading = params
- }
- }
+ this.loading = params;
+ },
+ },
};
</script>
<style lang="scss">
.s-linkage-rules {
width: 100%;
- height: 100%;
+ //height: 100%;
+ //padding: 13px 0 20px;
position: relative;
+ .devide {
+ height: 10px;
+ background: #e9ebf2;
+ }
.top {
width: 100%;
- height: 174px;
- position: relative;
- top: 0;
+ padding: 10px 20px;
+ box-sizing: border-box;
.swiper-box {
height: 100%;
float: left;
- width: 48%;
+ width: 46%;
margin-top: -10px;
position: relative;
}
.swiper-container {
position: initial;
min-width: 472px;
- width: 80%;
-
- // height: 124px;
+ width: 86%;
}
.swiper-slide {
position: relative;
@@ -356,10 +398,6 @@
backdrop-filter: blur(1px) brightness(100%);
display: none;
}
-
- // @media screen and(max-width: 1280px) {
- // max-width: 110px;
- // }
@media screen and(max-width: 1440px) {
max-width: 110px;
}
@@ -401,8 +439,17 @@
}
.top-right {
float: right;
- width: 52%;
+ width: 54%;
height: 144px;
+ .card-box {
+ width: 54% !important;
+ }
+ .eCharts-box {
+ width: 45%;
+ canvas {
+ width: 98% !important;
+ }
+ }
}
.task-css {
text-align: left;
@@ -412,9 +459,7 @@
.bottom {
width: 100%;
- height: calc(100% - 190px);
- position: absolute;
- top: 190px;
+ margin-bottom: 20px;
.bottom-side {
height: 100%;
width: 250px;
@@ -440,14 +485,10 @@
}
}
.bottom-right {
- width: calc(100% + 30px);
- height: 100%;
- float: left;
- overflow: auto;
- padding: 10px 0px;
+ padding: 10px 20px 20px;
box-sizing: border-box;
.draw-and-time-box {
- height: 430px;
+ height: 410px;
width: 100%;
.draw-box,
.time-box {
@@ -572,18 +613,11 @@
.add-btn:hover {
color: #2249b4;
}
- .task-tip {
- font-family: PingFangSC-Regular;
- font-size: 12px;
- color: #cccccc;
- margin-top: 10%;
- margin-left: 38%;
- }
}
</style>
<style lang="scss" scoped>
.el-loading-spinner {
- background: url("../../../assets/gif/loading.gif") no-repeat;
+ background: url("/images/cameraAccess/loading.gif") no-repeat;
top: 50%;
margin-top: -21px;
width: calc(100% - 260px) !important;
--
Gitblit v1.8.0