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/SystemInfo.vue | 5
src/pages/cameraAccess/components/LinkageRule.vue | 82
src/pages/cameraAccess/components/scene/Editor.vue | 3185 ++++++++++++--------------
src/pages/settings/index/App.vue | 42
src/pages/cameraAccess/components/TimeSlider.vue | 6
src/pages/cameraAccess/components/CameraInfoEditor.vue | 0
src/pages/cameraAccess/components/DataStackInfo.vue | 23
src/pages/cameraAccess/index/main.ts | 23
src/pages/cameraAccess/components/SceneRule.vue | 135
src/pages/cameraAccess/components/scene/SlideScene.vue | 568 ++--
src/pages/cameraAccess/components/infoCard.vue | 148
/dev/null | 614 -----
src/pages/cameraAccess/index/App.vue | 377 --
src/pages/cameraAccess/index/mixins.ts | 25
package.json | 1
src/pages/cameraAccess/index/VideoManage.vue | 290 ++
src/pages/cameraAccess/components/localSeparate.vue | 1458 ++++++------
src/pages/cameraAccess/components/CameraInfo.vue | 7
src/api/event.ts | 11
src/pages/cameraAccess/components/SeparateRules.vue | 65
20 files changed, 3,173 insertions(+), 3,892 deletions(-)
diff --git a/package.json b/package.json
index e1b2d58..93e95c3 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
"vue-awesome-swiper": "^3.1.3",
"vue-js-toggle-button": "^1.3.3",
"vue-qrcode-component": "^2.1.1",
- "vue-slider-component": "^3.2.2",
"vuex": "^3.5.1"
},
"devDependencies": {
diff --git a/src/api/event.ts b/src/api/event.ts
index b4b5f77..48e30cf 100644
--- a/src/api/event.ts
+++ b/src/api/event.ts
@@ -67,4 +67,13 @@
method: "post",
data: qs.stringify(query)
});
-};
\ No newline at end of file
+};
+
+//鑾峰彇浜嬩欢澹伴煶鍒楄〃
+export const getSoundList = () => {
+ return request({
+ url: "/data/api-v/voice/findAll",
+ method: "get"
+
+ })
+}
\ No newline at end of file
diff --git a/src/components/camera/PollSetting.vue b/src/components/camera/PollSetting.vue
deleted file mode 100644
index 7b34e04..0000000
--- a/src/components/camera/PollSetting.vue
+++ /dev/null
@@ -1,614 +0,0 @@
-<template>
- <div class="s-poll-setting">
- <div class="top" v-show="!strethTable">
- <div class="percentBall">
- <sysinfo
- ref="sysInfo"
- v-if="showSysInfo"
- :ShowLocalVedio="true"
- showTask
- showClass="sysinfo-box flex-row-left"
- />
- <slider-vedio
- v-show="false"
- :channelTotal="PollData.channelTotal"
- :list="PollData.sliderList"
- @changeSlider="changeSlider"
- ></slider-vedio>
- </div>
-
- <div class="barGraph">
- <div id="barSimple"></div>
- </div>
- </div>
-
- <div class="bottom">
- <div style="width: 100%;height: 10px;background-color: #E9EBF2;"></div>
- <div class="content">
- <div class="toolBar">
- <el-input
- size="small"
- style="width: 180px;"
- placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�"
- prefix-icon="el-icon-search"
- clearable
- v-model="PollData.SearchName"
- ></el-input>
- <el-button
- size="small"
- type="primary"
- style="margin-left: 20px; margin-right: 50px;"
- @click="pollSeach"
- >鎼滅储</el-button>
- <div class="tip">
- <span>
- 杞鏃堕棿 :
- <b>{{PollData.Config.poll_period}}</b>鍒嗛挓
- </span>
- <span>
- 杞鍛ㄦ湡 :
- <b>{{pollCycle}}</b>鍒嗛挓
- </span>
- <span>
- 杞寮�鍏� :
- <b>{{PollData.Enabled | switchText}}</b>
- </span>
- </div>
- <span :class="stretchStyle" @click="strethTable = !strethTable"></span>
-
- <el-button size="small" type="primary" style="float:right" @click="openDrawer">璁剧疆</el-button>
- </div>
-
- <el-table
- :header-cell-style="{background:'#F8F8F8', color: '#222222'}"
- :data="PollData.CameraList"
- height="93%"
- border
- >
- <el-table-column label="搴忓彿" type="index" align="center" width="100px"></el-table-column>
- <el-table-column label="鎽勫儚鏈哄悕绉�" align="center" show-overflow-tooltip sortable>
- <template slot-scope="scope">
- <span
- :style="scope.row.is_running ? `color:#3d68e1` : '' "
- >{{scope.row.alias !== '' ? scope.row.alias: scope.row.name}}</span>
- </template>
- </el-table-column>
- <el-table-column label="鎽勫儚鏈哄湴鍧�" prop="addr" align="center" show-overflow-tooltip sortable></el-table-column>
- <el-table-column label="鎽勫儚鏈篒P" prop="ip" align="center" width="130px" sortable></el-table-column>
- <el-table-column label="鎽勫儚鏈虹被鍨�" align="center" width="110px" sortable>
- <template slot-scope="scope">
- <span>{{scope.row.run_type | cameraType}}</span>
- </template>
- </el-table-column>
- <el-table-column label="鎵ц绠楁硶" align="center" show-overflow-tooltip sortable>
- <template slot-scope="scope">
- <span v-if="scope.row.run_type === -1 ">-</span>
- <span v-else>{{scope.row.tasks | taskList}}</span>
- </template>
- </el-table-column>
- <el-table-column label="杩愯璁惧" align="center" width="160px">
- <template slot-scope="scope">
- <span v-if="scope.row.run_type === -1 ">-</span>
- <span v-else>{{scope.row.runServerName}}</span>
- </template>
- </el-table-column>
- <el-table-column label="鐘舵��" align="center" show-overflow-tooltip sortable width="100px">
- <template slot-scope="scope">
- <span v-if="scope.row.status === -1 ">-</span>
- <span v-else-if="scope.row.status === 2">{{"澶勭悊涓�"}}</span>
- <span v-else-if="scope.row.status === 1">{{"绛夊緟澶勭悊"}}</span>
- <span v-else-if="scope.row.status === 0">{{"瑙勫垯涓嶅叏"}}</span>
- </template>
- </el-table-column>
- <el-table-column label="瀹炴椂/杞" align="center" width="100px">
- <template slot-scope="scope">
- <span v-if="scope.row.run_type === -1 ">-</span>
- <toggle-button
- v-else
- :value="scope.row.run_type === 1"
- :width="60"
- :labels="{checked: '瀹炴椂', unchecked: '杞'}"
- :color="{checked: '#4D88FF', unchecked: '#FF7733', disabled: '#CCCCCC'}"
- :sync="true"
- @change="pollSwitch(scope.row)"
- />
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
-
- <!-- 璁剧疆寮圭獥 -->
- <el-drawer
- title="绠楀姏璁剧疆"
- :visible.sync="drawer"
- direction="rtl"
- size="350px"
- custom-class="e-drawer"
- :before-close="closeDrawer"
- >
- <div class="dawer_details">
- <span>鎬荤畻鍔� {{formData.totalChanle}} 閫氶亾</span>
- <span style="margin-left:20px">瀹炴椂绠楀姏 {{formData.realTime}} 閫氶亾</span>
- </div>
- <div class="e-drawer_rate">
- <div class="rate">
- <label>杞鏃堕棿</label>
- <el-input-number
- size="small"
- style="width: 60px;margin-left:25px"
- v-model.number="formData.pollPeriod"
- :controls="false"
- :min="0"
- :max="60 * 24 * 1"
- ></el-input-number>
- <span>鍒嗛挓</span>
-
- <label>杞寮�鍏�</label>
- <el-switch style="margin-left: 10px;" v-model="formData.pollEnable"></el-switch>
- </div>
- <div class="rate">
- <label>杞绠楀姏</label>
- <el-input-number
- style="margin-left:25px;width:90px"
- size="small"
- v-model="formData.polling"
- @change="changePoll"
- controls-position="right"
- :min="0"
- :max="maxPoll"
- ></el-input-number>
- </div>
- <div class="rate">
- <label>鏁版嵁鏍堢畻鍔�</label>
- <el-input-number
- style="margin-left:11px;width:90px"
- size="small"
- v-model="formData.dataStack"
- @change="changeStack"
- controls-position="right"
- :min="0"
- :max="maxDataStack"
- ></el-input-number>
- </div>
-
- <el-button
- size="small"
- type="primary"
- style="margin:10px 10px 0px 200px"
- @click="saveSetting"
- >淇濆瓨</el-button>
- <el-button size="small" type="info" style="color:black" @click="closeDrawer">鍙栨秷</el-button>
- </div>
- </el-drawer>
- </div>
-</template>
-
-<script>
-import echarts from "echarts";
-import { changeRunType, updatePollEnable, updatePollPeriod, updateChannelCount } from "@/api/pollConfig";
-
-import Sysinfo from "./SystemInfo"
-import SliderVedio from '@/components/camera/slider-vedio'
-// import eChartsBar from '@/components/subComponents/eChartsBar'
-
-export default {
- name: "PollSeting",
- components: {
- Sysinfo,
- SliderVedio,
- // eChartsBar
- },
- filters: {
- cameraType(type) {
- return type === -1 ? "鐩戞帶鎽勫儚鏈�" : "AI鎽勫儚鏈�";
- },
- taskList(tasks) {
- return tasks.filter(task => {
- return task.hasRule;
- }).map(task => {
- return task.taskname
- }).join(',')
- },
- switchText(type) {
- return type ? "宸插紑鍚�" : "鏈紑鍚�";
- }
- },
- computed: {
- maxPoll() {
- return this.formData.totalChanle - this.formData.realTime;
- },
- maxDataStack() {
- return this.formData.totalChanle - this.formData.realTime;
- },
- stretchStyle() {
- let arry = ["iconfont", "stretch-btn"];
- arry.push(this.strethTable ? "iconzhankai" : "iconshouqi")
- return arry;
- },
- pollCycle() {
- let sumPollingCamera = 0;
- this.PollData.CameraList.forEach(cam => {
- if (cam.run_type === 0) {
- sumPollingCamera++
- }
- })
-
- return sumPollingCamera * this.PollData.Config.poll_period
- }
- },
- data() {
- return {
- switchValue: true,
- search: "",
- timeout: null,
- taskName: [],
- dataList: [],
- barChart: {},
- localDataChannel: 2,
- showSysInfo: false,
- drawer: false,
- formData: {},
- strethTable: false
- };
- },
- mounted() {
- this.PollData.init();
- this.statistic()
- this.barChart = echarts.init(document.getElementById("barSimple"));
- },
- beforeDestroy() {
- clearTimeout(this.timeout);
- },
- methods: {
- openDrawer() {
- this.initFormData();
- this.drawer = true;
- },
- closeDrawer() {
- this.drawer = false;
- this.initFormData();
- },
- initFormData() {
- this.formData = {
- totalChanle: this.PollData.channelTotal,
- realTime: this.PollData.RealTimeSum,
- pollEnable: this.PollData.Enabled,
- pollPeriod: this.PollData.Config.poll_period,
- polling: this.PollData.PollChannelTotal,
- dataStack: this.PollData.localVideo,
- }
- },
- pollSeach() {
- this.PollData.fetchPollList();
- },
- pollEnable() {
- updatePollEnable({ enable: this.PollData.Enabled }).then(rsp => {
- this.$notify({
- type: "success",
- message: "淇敼鎴愬姛"
- });
- // this.PollData.fetchPollConfig()
- })
- },
- updateDelayTime() {
- updatePollPeriod({ period: this.PollData.Config.poll_period }).then(rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: 'success',
- message: '杞鏃堕棿淇敼鎴愬姛锛�'
- })
- } else {
- this.$notify({
- type: 'error',
- message: '杞鏃堕棿淇敼澶辫触锛�'
- })
- }
- })
- },
- statistic() {
- this.PollData.statistics();
- let _this = this;
- _this.timeout = setTimeout(() => {
- _this.statistic();
- }, 10 * 1000);
- },
- pollSwitch(row) {
- changeRunType({ camera_ids: [row.id], run_type: row.run_type ^ 1 }).then(
- rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "閰嶇疆鎴愬姛"
- });
-
- row.run_type = row.run_type ^ 1
-
- } else {
- this.$notify({
- type: "error",
- message: "閰嶇疆澶辫触"
- });
- }
-
- // this.PollData.fetchPollList();
- }
- );
- },
- initLineChart() {
- // console.log(this.barChart,'initLineChart')
- // this.$refs.sysInfo.initCpuCharts();
- let optionBar = {
- color: ["#3D68E1"],
- tooltip: {
- trigger: "axis",
- axisPointer: {
- // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- grid: {
- top: 40,
- // bottom: '45%',
- left: 0,
- containLabel: true
- },
-
- xAxis: [
- {
- type: "category",
- data: this.taskName,
- axisTick: {
- // alignWithLabel: true
- },
- axisLine: {
- show: false
- },
- nameLocation: 'start',
- axisTick: {
- show: false
- },
- axisLabel: {
- rotate: 45,
- formatter: function (value, index) {
- let name = ""
- if (value.length > 2) {
- name = value.substring(0, 2) + '...'
- } else {
- name = value
- }
- let text = [`{a|${name}}`]
- return text
- },
- rich: {
- a: {
- fontSize: 10,
- with: 30
- }
- }
- }
- }
- ],
- yAxis: [
- {
- type: "value",
- show: true,
- axisLine: {
- show: false
- },
- splitLine: {
- lineStyle: {
- type: "dotted",
- color: ['#f1f1f1']
- }
- },
- axisTick: {
- show: false
- }
- }
- ],
- series: [
- {
- name: "鏁伴噺",
- type: "bar",
- barWidth: "30%",
- data: this.dataList
- }
- ]
- };
- this.showSysInfo = true
- this.barChart.setOption(optionBar);
- this.barChart.resize()
- this.$nextTick(() => {
- this.barChart.resize()
- })
- },
-
- //婊戝潡鏁版嵁鏇存柊鍥炶皟
- changeSlider(val) {
- // console.log(val, '婊戝潡鍊煎彉鍔�')
- let fileChannelCount = val[val.length - 1] - val[val.length - 2]
- let pollChannelCount = val[val.length - 2] - val[val.length - 3]
- this.PollData.updateChannelCount(fileChannelCount, pollChannelCount)
- },
-
- async saveSetting() {
- let rsp = await updatePollEnable({ enable: this.formData.pollEnable })
- if (!rsp || !rsp.success) {
- this.formData.pollEnable = !this.formData.pollEnable
- this.$notify({
- type: "error",
- message: "杞寮�鍏冲垏鎹㈠け璐ワ紒"
- });
- return
- }
-
- rsp = await updatePollPeriod({ period: this.formData.pollPeriod })
- if (!rsp || !rsp.success) {
- this.$notify({
- type: "error",
- message: "杞鏃堕棿淇敼澶辫触锛�"
- });
- return
- }
- rsp = await updateChannelCount({ videoChannelCount: this.formData.dataStack, pollChannelCount: this.formData.polling })
- if (!rsp || !rsp.success) {
- this.$notify({
- type: "error",
- message: "绠楀姏閰嶇疆澶辫触锛�"
- });
- return
- } else {
- this.$notify({
- type: "success",
- message: "閰嶇疆淇濆瓨鎴愬姛"
- });
- }
- this.PollData.statisticTaskInfo()
- this.PollData.fetchPollConfig()
- },
-
- //鐩戝惉杞绠楀姏
- changePoll(newVal, oldVal) {
- if (newVal > oldVal) {
- this.formData.dataStack--
- }
- if (newVal < oldVal) {
- this.formData.dataStack++
- }
- // console.log("this.formData.dataStack:"+this.formData.dataStack)
- },
- //鐩戝惉鏁版嵁鏍堢畻鍔�
- changeStack(newVal, oldVal) {
- if (newVal > oldVal) {
- this.formData.polling--
- }
- if (newVal < oldVal) {
- this.formData.polling++
- }
- // console.log("this.formData.polling:"+this.formData.polling)
- }
- }
-};
-</script>
-<style lang="scss">
-.s-poll-setting {
- width: 100%;
- height: 100%;
- font-size: 14px;
- position: relative;
- .top {
- width: 100%;
- height: 190px;
- // border-bottom: 1px solid #ccc;
- .progressBar {
- width: 26%;
- }
- .percentBall {
- width: 80%;
- height: 82%;
- float: left;
- // @media screen and (min-width: 1280px) and (max-width: 1440px) {
- // width: 75%;
- // }
- // @media screen and (max-width: 1280px) {
- // width: 80%;
- // }
- }
- .barGraph {
- width: 20%;
- height: 100%;
- float: right;
- // @media screen and (min-width: 1280px) and (max-width: 1440px) {
- // width: 25%;
- // }
- // @media screen and (max-width: 1280px) {
- // width: 20%;
- // }
- #barSimple {
- width: 100%;
- height: 250px;
- margin-top: -30px;
- }
- }
- .point {
- text-align: right;
- margin-left: 64px;
- b {
- display: inline-block;
- width: 9px;
- height: 9px;
- border-radius: 50%;
- background-color: #f53d3d;
- }
- }
- }
- .bottom {
- width: calc(100% + 76px);
- height: 100%;
- // height: calc(100% - 220px);
- position: absolute;
- // top: 220px;
- left: -38px;
- .tip {
- display: inline-block;
- font-family: PingFangSC-Medium;
- font-size: 14px;
- span {
- margin: 0px 10px;
- }
- }
- .content {
- padding: 20px 38px 38px 38px;
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- .toolBar {
- width: 100%;
- height: 42px;
- text-align: left;
- margin-bottom: 15px;
- }
- .el-table {
- border: 1px solid #e0e0e0;
- }
- }
-
- .stretch-btn {
- float: right;
- margin-left: 10px;
- line-height: 35px;
- cursor: pointer;
- }
- }
-}
-
-.e-drawer {
- // margin-top: 150px;
-
- font-family: PingFangSC-Medium;
- font-size: 14px;
- .dawer_details {
- text-align: left;
- margin-left: 70px;
- margin-top: 30px;
- }
- .e-drawer_rate {
- width: 100%;
- margin-top: 15px;
- .rate {
- width: 100%;
- text-align: left;
- margin-top: 15px;
- margin-left: 50px;
- }
- label {
- margin-left: 20px;
- }
- }
-
- .el-drawer__header {
- margin-bottom: 0px;
- }
-}
-</style>
diff --git a/src/components/camera/CameraInfo.vue b/src/pages/cameraAccess/components/CameraInfo.vue
similarity index 98%
rename from src/components/camera/CameraInfo.vue
rename to src/pages/cameraAccess/components/CameraInfo.vue
index 38aa371..35546d2 100644
--- a/src/components/camera/CameraInfo.vue
+++ b/src/pages/cameraAccess/components/CameraInfo.vue
@@ -135,7 +135,7 @@
:isRunning="false"
v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
></camera-player>
- <video v-else poster="../../assets/baseimg_cameara.png" preload="none"></video>
+ <video v-else poster="../../../assets/baseimg_cameara.png" preload="none"></video>
</el-col>
<!-- 绯荤粺杩愯淇℃伅 -->
@@ -177,9 +177,10 @@
import { changeRunType } from "@/api/pollConfig";
import CameraPlayer from "@/components/player";
-import InfoCard from "@/components/camera/infoCard"
import eChartsBar from '@/components/subComponents/eChartsBar'
-import CameraInfoEditor from '@/components/camera/CameraInfoEditor'
+
+import InfoCard from "./infoCard"
+import CameraInfoEditor from './CameraInfoEditor'
export default {
name: "CameraInfo",
diff --git a/src/components/camera/CameraInfoEditor.vue b/src/pages/cameraAccess/components/CameraInfoEditor.vue
similarity index 100%
rename from src/components/camera/CameraInfoEditor.vue
rename to src/pages/cameraAccess/components/CameraInfoEditor.vue
diff --git a/src/components/camera/DataStackInfo.vue b/src/pages/cameraAccess/components/DataStackInfo.vue
similarity index 97%
rename from src/components/camera/DataStackInfo.vue
rename to src/pages/cameraAccess/components/DataStackInfo.vue
index 0ffd272..b0709c1 100644
--- a/src/components/camera/DataStackInfo.vue
+++ b/src/pages/cameraAccess/components/DataStackInfo.vue
@@ -48,13 +48,12 @@
<div style="width: 70%">
<ul>
<li>
- <info-card
- style="width: 100%;min-width: 440px"
- :realtime="PollData.RealTimeSum"
- :polling="PollData.PollValidCount"
- :dataStack="PollData.stackChannelCount"
- >
- </info-card>
+ <info-card
+ style="width: 100%;min-width: 440px"
+ :realtime="PollData.RealTimeSum"
+ :polling="PollData.PollValidCount"
+ :dataStack="PollData.stackChannelCount"
+ ></info-card>
</li>
</ul>
</div>
@@ -293,7 +292,7 @@
import { changeRunType } from "@/api/pollConfig";
-import InfoCard from "@/components/camera/infoCard"
+import InfoCard from "./infoCard"
import eChartsBar from '@/components/subComponents/eChartsBar'
import FileUploader from '@/components/subComponents/FileUpload'
@@ -800,19 +799,19 @@
vertical-align: middle;
}
.snapshot-video {
- background: url("../../assets/img/video.png");
+ background: url("../../../assets/img/video.png");
background-repeat: round;
}
.snapshot-image {
- background: url("../../assets/img/image.png");
+ background: url("../../../assets/img/image.png");
background-repeat: round;
}
.snapshot-audio {
- background: url("../../assets/img/audio.png");
+ background: url("../../../assets/img/audio.png");
background-repeat: round;
}
.snapshot-files {
- background: url("../../assets/img/files.png");
+ background: url("../../../assets/img/files.png");
background-repeat: round;
}
}
diff --git a/src/components/camera/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue
similarity index 89%
rename from src/components/camera/LinkageRule.vue
rename to src/pages/cameraAccess/components/LinkageRule.vue
index 50a4b50..2d5e609 100644
--- a/src/components/camera/LinkageRule.vue
+++ b/src/pages/cameraAccess/components/LinkageRule.vue
@@ -25,7 +25,7 @@
<div class="icon-btn" slot="button-next">
<i class="iconfont iconyou1"></i>
</div>
- </div> -->
+ </div>-->
<div>
<div class="slide-scene">
<span class="task-tip" v-if="tableRuleList.length == 0 ">鏆傛棤绠楁硶锛岃鍦ㄧ嫭绔嬭鍒欎腑閫夋嫨绠楁硶</span>
@@ -131,7 +131,7 @@
import TimeSlider from "./TimeSlider";
import Sysinfo from "./SystemInfo"
import SceneRule from "./SceneRule";
-import SlideScene from "../scene/SlideScene";
+import SlideScene from "./scene/SlideScene";
export default {
components: {
@@ -249,7 +249,7 @@
getLinkSceneRule({ cameraIds: this.selectedCameraIds }).then(
rsp => {
if (rsp && rsp.success) {
- debugger
+
this.tableRuleList = rsp.data;
// 缁熶竴瑙勫垯缂栬緫鐨勬暟鎹粨鏋�
@@ -316,7 +316,7 @@
position: initial;
min-width: 472px;
width: 80%;
-
+
// height: 124px;
}
.swiper-slide {
@@ -409,79 +409,7 @@
margin-bottom: 14px;
}
}
- // .top {
- // width: 100%;
- // height: 174px;
- // border-bottom: 1px solid #ccc;
- // position: relative;
- // .slide-scene {
- // position: initial;
- // min-width: 472px;
- // width: 47%;
- // float: left;
- // height: 124px;
- // }
- // .swiper-slide {
- // position: relative;
- // width: 100%;
- // .item-card {
- // height: 110px !important;
- // max-width: 126px;
- // width: 100%;
- // position: absolute;
- // left: 0px;
- // right: 0px;
- // bottom: 0px;
- // top: 0px;
- // margin: auto;
- // background: #ffffff;
- // border: 1px solid #e2e2e2;
- // box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- // border-radius: 4px;
- // cursor: pointer;
- // .icon-xingzhuangcopy {
- // position: relative;
- // left: 0px;
- // right: 0px;
- // bottom: 0px;
- // top: 5px;
- // margin: auto;
- // color: #959699;
- // }
- // .mask {
- // position: absolute;
- // width: 100%;
- // height: 100%;
- // background: rgba(0, 0, 0, 0.65);
- // /* filter: blur(20px); */
- // 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;
- // }
- // }
- // }
- // .top-right {
- // float: right;
- // width: 52%;
- // height: 144px;
- // }
-
- // .pre-border {
- // left: 0px;
- // top: 40%;
- // }
- // .next-border {
- // left: 40%;
- // top: 40%;
- // }
- // }
.bottom {
width: 100%;
height: calc(100% - 190px);
@@ -655,7 +583,7 @@
</style>
<style lang="scss" scoped>
.el-loading-spinner {
- background: url("../../assets/gif/loading.gif") no-repeat;
+ background: url("../../../assets/gif/loading.gif") no-repeat;
top: 50%;
margin-top: -21px;
width: calc(100% - 260px) !important;
diff --git a/src/components/camera/SceneRule.vue b/src/pages/cameraAccess/components/SceneRule.vue
similarity index 84%
rename from src/components/camera/SceneRule.vue
rename to src/pages/cameraAccess/components/SceneRule.vue
index 5628197..13fcb07 100644
--- a/src/components/camera/SceneRule.vue
+++ b/src/pages/cameraAccess/components/SceneRule.vue
@@ -2,16 +2,22 @@
<div class="scene-edit-container">
<div class="scene-title">
<b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b>
- <el-button type="primary" size="mini" @click="handleCreate" style="margin-left:87%" v-show='!editScene'>+ 娣诲姞鍦烘櫙</el-button>
+ <el-button
+ type="primary"
+ size="mini"
+ @click="handleCreate"
+ style="margin-left:87%"
+ v-show="!editScene"
+ >+ 娣诲姞鍦烘櫙</el-button>
</div>
- <el-form ref="form" label-width="80px" v-show="editScene">
+ <el-form ref="form" label-width="80px" v-show="editScene">
<div class="flex-form">
<div class="left">
<el-form-item label="鍦烘櫙鍚嶇О">
<el-input v-model="sceneForm.scene_name" size="mini" maxlength="15"></el-input>
</el-form-item>
- <el-form-item label="浜嬩欢绛夌骇" >
+ <el-form-item label="浜嬩欢绛夌骇">
<el-select
v-model="sceneForm.alarm_level"
placeholder="璇烽�夋嫨"
@@ -26,12 +32,7 @@
</el-select>
</el-form-item>
<el-form-item label="鏃堕棿娈�">
- <el-select
- v-model="sceneForm.time_rule_id"
- placeholder="璇烽�夋嫨"
- size="mini"
-
- >
+ <el-select v-model="sceneForm.time_rule_id" placeholder="璇烽�夋嫨" size="mini">
<el-option
v-for="item in VideoManageData.TimeRules"
:key="item.id"
@@ -48,8 +49,8 @@
</div>
</div>
<!-- <el-row>
- <el-col :span="8"> -->
- <!-- <el-form-item label="鍦烘櫙妯℃澘">
+ <el-col :span="8">-->
+ <!-- <el-form-item label="鍦烘櫙妯℃澘">
<el-select
v-model="sceneForm.template_id"
placeholder="璇烽�夋嫨"
@@ -64,8 +65,8 @@
:value="item.id"
></el-option>
</el-select>
- </el-form-item> -->
- <!-- </el-col>
+ </el-form-item>-->
+ <!-- </el-col>
<el-col :span="8">
<el-form-item label="鏃堕棿娈�">
<el-select
@@ -83,7 +84,7 @@
</el-select>
</el-form-item>
</el-col>
- </el-row> -->
+ </el-row>-->
<!-- <el-row>
<el-col :span="8">
<el-form-item label="鍦烘櫙鍚嶇О">
@@ -95,7 +96,7 @@
<el-input v-model="sceneForm.desc" type="textarea" size="mini" style="width:200px;height:180px;"></el-input>
</el-form-item>
</el-col>
- </el-row> -->
+ </el-row>-->
<!-- <el-row>
<el-col :span="8">
<el-form-item label="浜嬩欢绛夌骇">
@@ -113,7 +114,7 @@
</el-select>
</el-form-item>
</el-col>
- </el-row> -->
+ </el-row>-->
<scene-editor
ref="sceneEditor"
@@ -147,14 +148,12 @@
align="center"
show-overflow-tooltip
></el-table-column>
- <el-table-column label="绛栫暐" prop="group_text" align="center" min-width="350px" >
+ <el-table-column label="绛栫暐" prop="group_text" align="center" min-width="350px">
<template slot-scope="scope">
<span v-html="scope.row.group_text"></span>
</template>
</el-table-column>
- <el-table-column label="鏃堕棿娈�" prop="time_name" align="center" width="100">
-
- </el-table-column>
+ <el-table-column label="鏃堕棿娈�" prop="time_name" align="center" width="100"></el-table-column>
<el-table-column label="鎻忚堪" prop="desc" align="center" min-width="150"></el-table-column>
<!-- <el-table-column label="鐘舵��" align="center" width="90">
<template slot-scope="scope">
@@ -198,7 +197,7 @@
deleteCameraScene
} from '@/api/scene'
import RuleEditor from "@/components/subComponents/RuleEditor";
-import SceneEditor from "@/components/scene/Editor";
+import SceneEditor from "./scene/Editor";
export default {
name: "SceneRuleEditor",
@@ -271,22 +270,22 @@
}
},
methods: {
- bubbleSort(arr){
- for(var i = arr.length-1;i > 0 ; i--){
- for(var j = 0; j < i; j++){
- if(arr[j]>arr[j+1]){
- let temp = arr[j];
- arr[j]= arr[j+1];
- arr[j+1] = temp
- }
+ bubbleSort(arr) {
+ for (var i = arr.length - 1; i > 0; i--) {
+ for (var j = 0; j < i; j++) {
+ if (arr[j] > arr[j + 1]) {
+ let temp = arr[j];
+ arr[j] = arr[j + 1];
+ arr[j + 1] = temp
}
+ }
}
return arr;
},
- getSceneName(sdk_name){
+ getSceneName(sdk_name) {
this.sceneNameStore.push(sdk_name)
- if(!this.sceneForm.scene_name.trim()){
+ if (!this.sceneForm.scene_name.trim()) {
this.sceneForm.scene_name = sdk_name
}
// }else if(this.sceneForm.scene_name == store[store.length-2]){
@@ -306,21 +305,21 @@
this.$refs.sceneEditor.cleanRule();
},
handleCreate() {
- debugger
- console.log(this.DataStackPool.selectedDir.id,this.TreeDataPool.treeActiveName=='dataStack')
+
+ console.log(this.DataStackPool.selectedDir.id, this.TreeDataPool.treeActiveName == 'dataStack')
if (this.linkRule && this.TreeDataPool.selectedNodes.length < 2) {
this.$notify({
type: "warning",
message: "璇烽�夋嫨鑷冲皯2涓憚鍍忔満!"
});
return false;
- }else if(!this.linkRule && this.TreeDataPool.treeActiveName != 'dataStack' && this.TreeDataPool.selectedNodes.length < 1){
+ } else if (!this.linkRule && this.TreeDataPool.treeActiveName != 'dataStack' && this.TreeDataPool.selectedNodes.length < 1) {
this.$notify({
type: "warning",
message: `璇烽�夋嫨1涓憚鍍忔満!`
});
return false;
- }else if(this.TreeDataPool.treeActiveName=='dataStack' && !this.DataStackPool.selectedDir.id){
+ } else if (this.TreeDataPool.treeActiveName == 'dataStack' && !this.DataStackPool.selectedDir.id) {
this.$notify({
type: "warning",
message: `璇峰厛閫夋嫨鏁版嵁鏍堟枃浠跺す!`
@@ -330,25 +329,25 @@
this.editScene = true;
this.cleanForm();
console.log(this.tableRuleList)
-
+
//鍒濆鍖栧満鏅悕绉�
var pattern = /^鍦烘櫙\s*\d+\s*$/;
var tempArr = [];
- this.tableRuleList.forEach(scene=>{
- debugger
- if(pattern.test(scene.scene_name)){
+ this.tableRuleList.forEach(scene => {
+
+ if (pattern.test(scene.scene_name)) {
tempArr.push(Number(scene.scene_name.substring(2).trim()));
}
});
- let latest = tempArr.length>0? this.bubbleSort(tempArr)[tempArr.length-1]+1 : 1;
-
- this.sceneForm.scene_name = '鍦烘櫙'+latest;
+ let latest = tempArr.length > 0 ? this.bubbleSort(tempArr)[tempArr.length - 1] + 1 : 1;
+
+ this.sceneForm.scene_name = '鍦烘櫙' + latest;
//鍒濆鍖栨椂闂存
this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
-
+
},
handleEdit(scene) {
- debugger
+
this.sceneForm = scene;
this.editScene = true;
let selectedTpl = {};
@@ -358,10 +357,10 @@
}
})
this.templateSdks = selectedTpl.sdks;
- debugger
+
this.templateRules = JSON.stringify(scene.rules);
this.$refs.sceneEditor.editHandle(this.templateRules);
-
+
},
updateTemplates() {
getAllTemplate().then(rsp => {
@@ -386,21 +385,21 @@
this.templateSdks = selectedTpl.sdks;
this.templateRules = selectedTpl.rules;
},
- validateForm(){
- debugger
- if(!this.sceneForm.scene_name.trim()){
+ validateForm() {
+
+ if (!this.sceneForm.scene_name.trim()) {
this.$notify({
type: 'warning',
message: '鍦烘櫙鍚嶄笉鑳戒负绌�'
});
return false
- }else if(!this.sceneForm.alarm_level){
+ } else if (!this.sceneForm.alarm_level) {
this.$notify({
type: 'warning',
message: '浜嬩欢绛夌骇涓嶈兘涓虹┖'
});
return false
- }else if(!this.sceneForm.time_rule_id){
+ } else if (!this.sceneForm.time_rule_id) {
this.$notify({
type: 'warning',
message: '鏃堕棿娈典笉鑳戒负绌�'
@@ -410,8 +409,8 @@
return true
},
saveSceneRule() {
- debugger
- if(!this.validateForm()){
+
+ if (!this.validateForm()) {
return
}
let editorResp = this.$refs.sceneEditor.submitRule();
@@ -445,8 +444,8 @@
})
.catch(() => { });
},
- cellStyle(obj){
- if(obj.column.label=='绛栫暐'){
+ cellStyle(obj) {
+ if (obj.column.label == '绛栫暐') {
return 'text-align:left;padding-left:8px;'
}
}
@@ -460,32 +459,33 @@
height: 30px;
text-align: left;
margin: 10px 0px;
-
}
- .flex-form{
+ .flex-form {
display: flex;
width: 80%;
padding-left: 25px;
- .left,.right{
+ .left,
+ .right {
width: 43.3%;
min-width: 550px;
- .el-form-item{
+ .el-form-item {
margin-bottom: 16px;
}
- .el-form-item__label{
+ .el-form-item__label {
text-align: left;
}
- .el-form-item__content{
+ .el-form-item__content {
text-align: left;
- .el-input,.el-select{
+ .el-input,
+ .el-select {
width: 400px !important;
}
}
- textarea{
+ textarea {
height: 143px;
}
}
- .right{
+ .right {
padding-top: 6px;
}
}
@@ -495,9 +495,8 @@
padding: 0px;
box-sizing: border-box;
}
- .el-form-item{
+ .el-form-item {
width: calc(100% - 30px);
-
}
.el-input__inner {
border: 0px !important;
@@ -512,8 +511,8 @@
span {
cursor: pointer;
}
- .cell{
- padding-left: 0!important;
+ .cell {
+ padding-left: 0 !important;
}
}
}
diff --git a/src/components/camera/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue
similarity index 95%
rename from src/components/camera/SeparateRules.vue
rename to src/pages/cameraAccess/components/SeparateRules.vue
index 1099aaf..b4e507c 100644
--- a/src/components/camera/SeparateRules.vue
+++ b/src/pages/cameraAccess/components/SeparateRules.vue
@@ -120,7 +120,7 @@
/>
</div>
</div>
-
+
<!-- <swiper :options="swiperOption" class="swiper-box-container">
<swiper-slide v-for="(item, index) in 10" :key="index">
@@ -140,7 +140,7 @@
<div class="icon-btn" slot="button-next">
<i class="iconfont iconyou1"></i>
</div>
- </div> -->
+ </div>-->
<!-- <swiper :options="swiperOption" class="swiper-box-container">
<span class="task-tip" v-show="Camera.rules.length == 0 ">鏆傛棤鍦烘櫙,璇峰紑濮嬪垱寤�</span>
<swiper-slide v-for="(item, index) in Camera.rules" :key="index">
@@ -160,10 +160,9 @@
<div class="icon-btn" slot="button-next">
<i class="iconfont iconyou1"></i>
</div>
- </div> -->
+ </div>-->
<!-- 绯荤粺淇℃伅 -->
-
</div>
<div class="bottom" style="top:254px;">
@@ -217,7 +216,6 @@
>
<p style="text-align:left;padding: 10px;box-sizing: border-box">
<b style="font-size: 14px">鏃堕棿娈�</b>
-
</p>
<time-slider ref="timeSlider" :type="'sep'" />
</div>
@@ -257,7 +255,8 @@
import polygonCanvas from "@/components/canvas";
import Sysinfo from "./SystemInfo";
import SceneRule from "./SceneRule";
-import SlideScene from "../scene/SlideScene";
+import SlideScene from "./scene/SlideScene";
+
export default {
components: {
TimeSlider,
@@ -308,36 +307,36 @@
canvasHeight: 324
};
},
- mounted(){
+ mounted() {
this.mockAsync()
},
methods: {
- mockAsync(){
- setTimeout(()=>{
+ mockAsync() {
+ setTimeout(() => {
this.mockSceneData = [
- { scenename: "name1", id:1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
- { scenename: "name2", id:2, icon: ["iconchouyan-copy"] },
- {
- scenename: "name3",
- id:3,
- icon: [
- "iconrenshukouzhao",
- "iconchouyan-copy",
- "iconrenlianjiance",
- "icongetijingzhi"
- ]
- },
- {
- scenename: "name4",
- id:4,
- icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"]
- },
- { scenename: "name5", id:5, icon: ["icongetijingzhi"] },
- { scenename: "name6", id:6, icon: ["iconrenshukouzhao", "icongetijingzhi"] },
- { scenename: "name7", id:7, icon: ["iconrenlianjiance"] }
- ];
- },3000)
+ { scenename: "name1", id: 1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
+ { scenename: "name2", id: 2, icon: ["iconchouyan-copy"] },
+ {
+ scenename: "name3",
+ id: 3,
+ icon: [
+ "iconrenshukouzhao",
+ "iconchouyan-copy",
+ "iconrenlianjiance",
+ "icongetijingzhi"
+ ]
+ },
+ {
+ scenename: "name4",
+ id: 4,
+ icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"]
+ },
+ { scenename: "name5", id: 5, icon: ["icongetijingzhi"] },
+ { scenename: "name6", id: 6, icon: ["iconrenshukouzhao", "icongetijingzhi"] },
+ { scenename: "name7", id: 7, icon: ["iconrenlianjiance"] }
+ ];
+ }, 3000)
},
drawBaseImg() {
this.$refs.canvas.showModal();
@@ -559,7 +558,7 @@
position: initial;
min-width: 472px;
width: 80%;
-
+
// height: 124px;
}
.swiper-slide {
@@ -854,7 +853,7 @@
}
}
.el-loading-spinner {
- background: url("../../assets/gif/loading.gif") no-repeat;
+ background: url("../../../assets/gif/loading.gif") no-repeat;
top: 50%;
margin-top: -21px;
width: calc(100% - 260px) !important;
diff --git a/src/components/camera/SystemInfo.vue b/src/pages/cameraAccess/components/SystemInfo.vue
similarity index 97%
rename from src/components/camera/SystemInfo.vue
rename to src/pages/cameraAccess/components/SystemInfo.vue
index 0b79772..cdd0353 100644
--- a/src/components/camera/SystemInfo.vue
+++ b/src/pages/cameraAccess/components/SystemInfo.vue
@@ -86,17 +86,12 @@
import BoardCard from "@/components/subComponents/BoardCard"
import LocalVedioCard from "@/components/subComponents/LocalVedioCard"
import LiquidFillChart from "@/components/subComponents/chartLiquid"
-import SliderVedio from '@/components/camera/slider-vedio'
import eChartsBar from '@/components/subComponents/eChartsBar'
export default {
name: "SystemInfo",
components: {
DataStackCard,
- // BoardCard,
- // LocalVedioCard,
- // LiquidFillChart,
- // SliderVedio
eChartsBar,
},
props: {
diff --git a/src/components/camera/TimeSlider.vue b/src/pages/cameraAccess/components/TimeSlider.vue
similarity index 97%
rename from src/components/camera/TimeSlider.vue
rename to src/pages/cameraAccess/components/TimeSlider.vue
index 73cfa13..fca901d 100644
--- a/src/components/camera/TimeSlider.vue
+++ b/src/pages/cameraAccess/components/TimeSlider.vue
@@ -35,7 +35,7 @@
</template>
<script>
-import MultiRangeSlider from "../subComponents/MultiRangeSlider";
+import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider";
import { saveTimeRule, deleteTimeRule } from "@/api/timeRule";
export default {
@@ -157,13 +157,13 @@
/* border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc; */
- .btn-control{
+ .btn-control {
position: absolute;
margin-top: -27px;
top: 0;
right: 0;
display: flex;
- i{
+ i {
font-size: 16px;
}
}
diff --git a/src/components/camera/infoCard.vue b/src/pages/cameraAccess/components/infoCard.vue
similarity index 99%
rename from src/components/camera/infoCard.vue
rename to src/pages/cameraAccess/components/infoCard.vue
index c650a5d..700efe4 100644
--- a/src/components/camera/infoCard.vue
+++ b/src/pages/cameraAccess/components/infoCard.vue
@@ -1,75 +1,75 @@
-<template>
- <el-row class="infoCard">
- <el-col :span="8">
- <p>
- <i class="iconfont iconshishichuli"></i><span class="fontClass">瀹炴椂绠楀姏</span>
- </p>
- <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{realtime}}</span></p>
- </el-col>
- <el-col style="width: 1px;height: 80%;margin-top: 10px;background: #DCDFE6">
- </el-col>
- <el-col :span="8">
- <p>
- <i class="iconfont iconrolling"></i><span class="fontClass">杞绠楀姏</span>
- </p>
- <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{polling}}</span></p>
- </el-col>
- <el-col style="width: 1px;height: 80%;margin-top: 10px;background: #DCDFE6">
- </el-col>
- <el-col :span="7">
- <p>
- <i class="iconfont iconshuju"></i><span class="fontClass">鏁版嵁鏍堢畻鍔�</span>
- </p>
- <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{dataStack}}</span></p>
- </el-col>
- </el-row>
-</template>
-
-<script>
-export default {
- props: {
- realtime: {
- type: Number,
- default: 10
- },
- polling: {
- type: Number,
- default: 0
- },
- dataStack: {
- type: Number,
- default: 0
- },
- }
-}
-</script>
-<style lang="scss">
- .infoCard {
- width: 100%;
- height: 100px;
- border: 1px solid #e2e2e2;
- box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
- border-radius: 3px;
- i {
- float: left;
- margin-left:10px;
- font-size: 28px;
- font-weight: 600;
- color: #3d68e1;
- }
- p {
- height: 45px;
- line-height: 45px;
- vertical-align: middle
- }
- .fontClass {
- float: left;
- margin-left: 10px;
- font-family: "PingFangSC-Regular";
- text-align: left;
- font-size: 14px;
- color: #222222;
- font-weight: 600;
- }
- }
+<template>
+ <el-row class="infoCard">
+ <el-col :span="8">
+ <p>
+ <i class="iconfont iconshishichuli"></i><span class="fontClass">瀹炴椂绠楀姏</span>
+ </p>
+ <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{realtime}}</span></p>
+ </el-col>
+ <el-col style="width: 1px;height: 80%;margin-top: 10px;background: #DCDFE6">
+ </el-col>
+ <el-col :span="8">
+ <p>
+ <i class="iconfont iconrolling"></i><span class="fontClass">杞绠楀姏</span>
+ </p>
+ <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{polling}}</span></p>
+ </el-col>
+ <el-col style="width: 1px;height: 80%;margin-top: 10px;background: #DCDFE6">
+ </el-col>
+ <el-col :span="7">
+ <p>
+ <i class="iconfont iconshuju"></i><span class="fontClass">鏁版嵁鏍堢畻鍔�</span>
+ </p>
+ <p><span style="color: #f49d37;font-family: 'PingFangSC-Regular';font-size:28px;font-weight: 600;">{{dataStack}}</span></p>
+ </el-col>
+ </el-row>
+</template>
+
+<script>
+export default {
+ props: {
+ realtime: {
+ type: Number,
+ default: 10
+ },
+ polling: {
+ type: Number,
+ default: 0
+ },
+ dataStack: {
+ type: Number,
+ default: 0
+ },
+ }
+}
+</script>
+<style lang="scss">
+ .infoCard {
+ width: 100%;
+ height: 100px;
+ border: 1px solid #e2e2e2;
+ box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
+ border-radius: 3px;
+ i {
+ float: left;
+ margin-left:10px;
+ font-size: 28px;
+ font-weight: 600;
+ color: #3d68e1;
+ }
+ p {
+ height: 45px;
+ line-height: 45px;
+ vertical-align: middle
+ }
+ .fontClass {
+ float: left;
+ margin-left: 10px;
+ font-family: "PingFangSC-Regular";
+ text-align: left;
+ font-size: 14px;
+ color: #222222;
+ font-weight: 600;
+ }
+ }
</style>
\ No newline at end of file
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>
diff --git a/src/components/scene/Editor.vue b/src/pages/cameraAccess/components/scene/Editor.vue
similarity index 87%
rename from src/components/scene/Editor.vue
rename to src/pages/cameraAccess/components/scene/Editor.vue
index 4497130..162733f 100644
--- a/src/components/scene/Editor.vue
+++ b/src/pages/cameraAccess/components/scene/Editor.vue
@@ -1,1675 +1,1510 @@
-<template>
- <div class="edit-rules-box">
- <p style="padding: 0">
- <b style="font-size: 14px; line-height: 28px;">绛栫暐閰嶇疆</b>
- </p>
- <div class="sub-rules-box">
- <div style=" text-align: left;">
- <!-- <div style="margin-left:10px;margin-top: 4px;" v-show="index > 0">
- <el-select v-model="rule.rule_with_pre" placeholder="骞跺垪鍏崇郴" size="mini">
- <el-option
- v-for="subitem in VideoManageData.Dictionary.RULECOMPUTEBETWEEN"
- :key="subitem.id"
- :label="subitem.name"
- :value="subitem.value"
- :title="subitem.name"
- ></el-option>
- </el-select>
- </div>-->
- <div class="sdk-group">
- <transition-group name="fade" mode="out-in" appear>
- <div
- class="config-item"
- :class="{ init: index == 0 }"
- v-cloak
- v-for="(sdkItem, index) in sdkGroup"
- :key="index"
- >
- <div class="connection" v-if="index !== 0">
- <el-select
- v-model="sdkItem.rule_with_pre"
- size="mini"
- placeholder="閫夊叧绯�"
- @change="selConnection(sdkItem)"
- >
- <el-option value="&&" title="and/涓�" label="and/涓�"></el-option>
- <el-option value="||" title="or/鎴�" label="or/鎴�"></el-option>
- <el-option value="=>" title="鈥�>/瑙﹀彂" label="鈥�>/瑙﹀彂"></el-option>
- </el-select>
- <el-checkbox
- v-show="sdkItem.rule_with_pre == '=>'"
- v-model="sdkItem.is_save_anyhow"
- style="margin-left:30px"
- >淇濆瓨杩囩▼鏁版嵁</el-checkbox>
- </div>
- <div class="top-line">
- <div class="left">
- <div class="init-sdk">
- <el-select
- v-model="sdkItem.sdkObj"
- value-key="id"
- placeholder="閫夋嫨绠楁硶"
- size="mini"
- @change="selectSDKOption(sdkItem, true, index)"
- >
- <el-option
- v-for="item in TaskMange.list1"
- :key="item.id"
- :label="item.sdk_name"
- :value="item"
- :title="item.sdk_name"
- v-show="!item.del_flag"
- ></el-option>
- </el-select>
- </div>
- <div class="init-polygon">
- <el-select
- v-model="sdkItem.polygonObj"
- v-if="!isTemplate"
- value-key="polygonId"
- placeholder="閫夋嫨鍖哄煙"
- size="mini"
- @change="selectPolygonOption(sdkItem)"
- >
- <el-option
- v-for="subitem in allPolygonData"
- :key="subitem.id"
- :label="subitem.name"
- :value="subitem"
- :title="subitem.name"
- ></el-option>
- </el-select>
- </div>
- </div>
- <div class="right">
- <span class="del" v-show="!hideDel" @click="delConfigItem(index)">
- <i class="iconfont iconshanchu"></i>
- </span>
- <span class="collapse" @click="collapseLine(index)">
- <i
- :class="
- sdkItem.isSpread
- ? 'el-icon-arrow-up'
- : 'el-icon-arrow-down'
- "
- ></i>
- </span>
- </div>
- </div>
-
- <div class="argums derive-line" v-show="sdkItem.isSpread">
- <div v-for="(arg, index) in sdkItem.defaultArg" :key="arg.sort">
- <div class="argums-item" v-if="arg.config.isShow">
- <div class="arg-name">
- <!-- <el-input
- v-model="arg.name"
- size="mini"
- :disabled="true"
- ></el-input>-->
- <el-select v-model="arg.name" size="mini" :disabled="true">
- <el-option :label="arg.name" :title="arg.name" :value="arg"></el-option>
- </el-select>
- </div>
- <div class="operator-name">
- <!-- <el-input
- v-if="arg.operators.length == 1"
- v-model="arg.operators[0].operator"
- :disabled="true"
- size="mini"
- ></el-input>-->
- <el-select
- :disabled="arg.operators.length==1"
- v-model="arg.operator"
- size="mini"
- @change="selOperator(sdkItem)"
- >
- <el-option
- v-for="operator in arg.operators"
- :key="operator.operator"
- :value="operator.operator"
- :label="operator.name"
- :title="operator.name"
- ></el-option>
- </el-select>
- </div>
- <div class="arg-val">
- <div v-if="arg.operator == 'range'">
- <el-input
- class="range-min"
- v-model="arg.min"
- @blur="validateArgVal(arg, $event)"
- ></el-input>
- <span class="devide"></span>
- <el-input
- class="range-max"
- v-model="arg.max"
- @blur="validateArgVal(arg, $event)"
- ></el-input>
- <span>{{ arg.unit }}</span>
- </div>
- <div v-else>
- <el-select v-if="arg.type == 'option'" v-model="arg.sdk_arg_value">
- <el-option>璇烽�夋嫨</el-option>
- </el-select>
- <el-input
- v-if="arg.type == 'value'"
- v-model="arg.sdk_arg_value"
- :placeholder="
- arg.default_value ? arg.default_value : ''
- "
- size="mini"
- :style="{ borderColor: tipColor }"
- @blur="validateArgVal(arg, $event)"
- ></el-input>
- <span>{{ arg.unit }}</span>
- </div>
- </div>
- <div
- class="optional"
- v-if="
- sdkItem.initAddOptional &&
- index == sdkItem.defaultArg.length - 1
- "
- >
- <span class="btn" @click="addOptionalArg(sdkItem)">
- <i class="iconfont iconhebingxingzhuang" style="font-size:16px"></i>
- </span>
- </div>
- </div>
- </div>
- <div
- class="argums-item optional-line"
- v-for="optArgItem in sdkItem.optArg"
- :key="optArgItem.sort"
- >
- <div class="arg-name">
- <el-input
- v-if="sdkItem.optNames.length == 1"
- v-model="sdkItem.optNames[0].name"
- size="mini"
- :disabled="true"
- ></el-input>
- <el-select
- v-if="sdkItem.optNames.length > 1"
- v-model="optArgItem.name"
- size="mini"
- @change="selOptionalArg(sdkItem, optArgItem)"
- >
- <el-option
- v-for="optName in sdkItem.optNames"
- :disabled="optName.isSelected"
- :key="optName.sort"
- :label="optName.name"
- :title="optName.name"
- :value="optName.name"
- ></el-option>
- </el-select>
- </div>
- <div class="operator-name">
- <!-- <el-input
- v-model="optArgItem.operators[0].operator"
- :disabled="true"
- size="mini"
- ></el-input>-->
-
- <el-select
- v-model="optArgItem.operator"
- size="mini"
- @change="selOperator(optArgItem)"
- >
- <el-option
- v-for="operatorItem in optArgItem.operators"
- :key="operatorItem.operator"
- :value="operatorItem.operator"
- :label="operatorItem.name"
- :title="operatorItem.name"
- ></el-option>
- </el-select>
- </div>
- <div class="arg-val">
- <el-select
- v-if="optArgItem.type == 'option'"
- v-model="optArgItem.sdk_arg_value"
- :multiple="optArgItem.config.isMulti"
- collapse-tags
- size="mini"
- >
- <el-option
- v-for="one in optArgItem.valueOptions"
- :key="one.value"
- :value="one.value"
- :label="one.name"
- :title="one.name"
- ></el-option>
- </el-select>
- <el-input
- v-if="optArgItem.type == 'value'"
- v-model="optArgItem.sdk_arg_value"
- size="mini"
- @blur="$event => validateArgVal(optArgItem, $event)"
- ></el-input>
- <span>{{ optArgItem.unit }}</span>
- </div>
- <div class="optional">
- <span class="btn" @click="addOptionalArg(sdkItem)" v-show="sdkItem.isAddable">
- <i class="iconfont iconhebingxingzhuang" style="font-size:16px"></i>
- </span>
- <span class="btn" @click="delOptionalArg(sdkItem, optArgItem)">
- <i class="iconfont iconshanchu11" style="font-size:16px"></i>
- </span>
- </div>
- </div>
- </div>
- </div>
- </transition-group>
- </div>
- <div class="btn-add" v-show="isAdd && this.sdkGroup.length < 4">
- <el-button size="mini" @click="addSdkItem">+ 娣诲姞绠楁硶</el-button>
- </div>
- </div>
- </div>
- </div>
-</template>
-<script>
-import {
- deleteCameraRules,
- updateRuleDefence,
- updateAlarmLevel
-} from '@/api/camera'
-
-export default {
- name: 'SceneRuleEditor',
- props: {
- Cameras: {
- type: Array,
- default: () => {
- return []
- }
- },
- isTemplate: {
- type: Boolean,
- default: false
- },
- isLinkRule: {
- type: Boolean,
- default: false
- },
- includeSdks: {
- type: Array
- },
- ruleList: {
- type: String,
- default: ''
- },
- onSubmitRule: {
- type: Function,
- default: () => false
- }
- },
- // computed: {
- // allPolygonData() {
- // let polygon = []
- // let cameras = [...this.Cameras]
-
- // for (let i = 0; i < cameras.length; i++) {
- // let polyOpt = cameras[i].polygonData.map(p => {
- // return {
- // defence_state: p.defence_state,
- // polygonId: p.id,
- // name: this.isLinkRule
- // ? cameras[i].cameraName + ':' + p.name
- // : p.name,
-
- // cameraId: cameras[i].cameraId
- // }
- // })
-
- // polygon = polygon.concat(polyOpt)
- // }
- // //娣诲姞鍦烘櫙鍒濆鍖栧尯鍩熼�夐」涓�'鍏ㄩ儴鍖哄煙'
- // if (polygon.length > 0 && this.ruleList.length == 0) {
- // this.polygonObj = polygon[0];
- // this.sdkGroup[0].polygonObj = JSON.parse(JSON.stringify(this.polygonObj));
- // this.selectPolygonOption(this.sdkGroup[0])
- // }
- // return polygon
- // }
- // },
- watch: {
- Cameras: {
- handler(n, o) {
- debugger
- let polygon = []
- let cameras = [...n]
-
- for (let i = 0; i < cameras.length; i++) {
- let polyOpt = cameras[i].polygonData.map(p => {
- return {
- defence_state: p.defence_state,
- polygonId: p.id,
- name: this.isLinkRule
- ? cameras[i].cameraName + ':' + p.name
- : p.name,
-
- cameraId: cameras[i].cameraId
- }
- })
- polygon = polygon.concat(polyOpt)
-
- this.allPolygonData = polygon
- //娣诲姞鍦烘櫙鍒濆鍖栧尯鍩熼�夐」涓�'鍏ㄩ儴鍖哄煙'
- debugger
- // if (polygon.length > 0 && this.ruleList == '') {
- // this.polygonObj = polygon[0]
- // this.sdkGroup[0].polygonObj = JSON.parse(
- // JSON.stringify(this.polygonObj)
- // )
-
- // this.selectPolygonOption(this.sdkGroup[0])
- // }
- }
- },
- deep: true
- },
- sdkGroup: {
- handler(newV, oldV) {
- if (newV) {
- debugger
- newV.forEach(sdk => {
- let rangeOne = sdk.defaultArg.find(
- arg => arg.operators[0].operator == 'range'
- )
- if (rangeOne) {
- debugger
- if (rangeOne.min.trim() && rangeOne.max.trim()) {
- if (Number(rangeOne.min) >= Number(rangeOne.max)) {
- this.$notify({
- type: 'error',
- message: '鍖洪棿宸︿晶涓嶈兘澶т簬鎴栫瓑浜庡尯闂村彸渚х殑鍊�'
- })
- rangeOne.valid = false
- }
- rangeOne.sdk_arg_value = rangeOne.min + ',' + rangeOne.max
- } else {
- rangeOne.sdk_arg_value = false;
- }
-
-
- }
- })
- let res = newV.find(item => {
- return JSON.stringify(item.sdkObj) == '{}'
- })
- if (!res) {
- this.isAdd = true
- this.hideDel = false
- } else {
- this.isAdd = false
- if (this.sdkGroup.length == 1) {
- this.hideDel = true
- } else {
- this.hideDel = false
- }
- }
- }
- },
- deep: true
- }
- // ruleList: {
- // handler(newVal, oldVal) {
- // debugger
- // this.editHandle(newVal)
- // }
-
- // }
- },
- mounted() {
- this.TaskMange.findAllSdk()
- //this.TaskMange.list1 = sdkJson.data;
-
- //this.editHandle(this.ruleList)
- },
- data() {
- return {
- // rule: {
- // sdk_id:'',
- // sdkObj: {},
- // polygonObj: {},
- // argDef: []
- // },
- hideDel: true,
- //isAddable: true,
- allPolygonData: [],
- group_id: '',
- baseSdkItem: {
- sdkObj: {},
- polygonObj: {},
- is_save_anyhow: true,
- rule_with_pre: '',
- isSpread: true,
- argDef: [],
- initAddOptional: false,
- defaultArg: [],
- optionalArg: [],
- optArg: [],
- optNames: [],
- isAddable: true
- },
- sdkGroup: [
- {
- sdkObj: {},
- polygonObj: {},
- is_save_anyhow: true,
- isSpread: true,
- argDef: [],
- initAddOptional: false,
- defaultArg: [],
- optionalArg: [],
- optArg: [],
- optNames: [],
- isAddable: true
- }
- ],
- polygonObj: {},
- isSpread: true,
- isAdd: false,
- tipColor: 'yellow',
- tasksTable: {},
- groupRules: [],
- sdksOption: [],
- baseRule: {
- camera_id: '',
- id: '',
- operator: '',
- operator_type: '',
- polygon_id: '',
- rule_with_pre: '',
- sdk_id: '',
- sdk_arg_alias: '',
- sdk_arg_value: '',
- sdk_arg_defaultValue: '',
- select_time_rule: '',
- sdk_arg_type: '',
- // task_id: "",
-
- polygonObj: {},
- taskObj: '',
-
- sdkObj: {},
- argObj: {},
- operatorObj: {},
- valueObj: {},
-
- sdksOptions: [],
- argsOptions: [],
- argType: '',
- computeOptions: [],
- valueOptions: [],
-
- sdkDesc: '',
- argDesc: '',
- operatorDesc: '',
- typeDesc: '',
- valueDesc: '',
-
- unit: '',
- value: '',
- valid: true
- }
- }
- },
- methods: {
- selConnection(sdkItem) {
- debugger
-
- },
- addSdkItem() {
- let itemTemp = JSON.parse(JSON.stringify(this.baseSdkItem));
- //鍒濆鍖栧尯鍩�
- itemTemp.polygonObj = JSON.parse(JSON.stringify(this.allPolygonData[0]))
- this.selectPolygonOption(itemTemp)
- this.sdkGroup.push(itemTemp)
- },
- delConfigItem(index) {
- debugger
- // if(index != 0){
- // this.sdkGroup.splice(index,1);
- // }else{
- // //this.sdkGroup[0] = JSON.parse(JSON.stringify(this.baseSdkItem));
- // this.sdkGroup.splice(0,1,JSON.parse(JSON.stringify(this.baseSdkItem)));
- // }
-
- //鍒犻櫎閫昏緫锛氬綋鍙湁涓�涓畻娉曟椂锛屽垹闄や細鍥炲埌鍒濆鐘舵�侊紱鏈夊涓畻娉曟椂锛屽垹闄ゆ棦绉婚櫎鏁翠釜绠楁硶椤�
- if (this.sdkGroup.length == 1) {
- let itemTemp = JSON.parse(JSON.stringify(this.baseSdkItem))
- itemTemp.polygonObj = JSON.parse(JSON.stringify(this.allPolygonData[0]));
- this.selectPolygonOption(itemTemp)
- this.sdkGroup.splice(index, 1, itemTemp)
- } else {
- this.sdkGroup.splice(index, 1)
- }
- },
- collapseLine(index) {
- // let one = this.sdkGroup.find(sdk=>{
- // return sdk.sdk_id == sdkId;
- // });
-
- this.sdkGroup[index].isSpread = !this.sdkGroup[index].isSpread
- },
- addOptionalArg(sdkItem) {
- debugger
- sdkItem.initAddOptional = false
- sdkItem.optArg.forEach(arg => {
- sdkItem.optNames.forEach(name => {
- if (arg.sort == name.sort) {
- name.isSelected = true
- }
- })
- }) //鎵惧埌鍙�塻dkItem.optNames鐨勭涓�涓搴旂殑sdkItem.optionalArg聽push鍒皊dkItem.optArg
- let oneNotSelected = sdkItem.optNames.find(name => !name.isSelected)
- if (oneNotSelected) {
- oneNotSelected.isSelected = true;
- }
-
- let argTemp = sdkItem.optionalArg.find(arg => {
- return arg.sort == oneNotSelected.sort
- })
-
- let copyArgTemp = JSON.parse(JSON.stringify(argTemp))
- if (copyArgTemp.type == 'option') {
- // let alias = copyArgTemp.alias;
- // console.log( this.VideoManageData.Dictionary[alias])
- // copyArgTemp.valueOptions = this.VideoManageData.Dictionary[alias].map(r => {
- // return {
- // name: r.name,
- // value: r.value
- // }
- // })
-
- this.setOptArgValueOptions(copyArgTemp)
- }
-
- if (copyArgTemp.default_value) {
- this.$set(copyArgTemp, 'sdk_arg_value', copyArgTemp.default_value)
- }
- sdkItem.optArg.push(copyArgTemp);
- if (sdkItem.optArg.length < sdkItem.optionalArg.length) {
- sdkItem.isAddable = true;
- } else {
- sdkItem.isAddable = false;
- }
- },
- delOptionalArg(sdkItem, optArgItem) {
- let index = sdkItem.optArg.findIndex(arg => arg.sort == optArgItem.sort)
- sdkItem.optArg.splice(index, 1)
- sdkItem.optNames.forEach(name => {
- if (name.sort == optArgItem.sort) {
- name.isSelected = false
- }
- })
- sdkItem.initAddOptional = sdkItem.optArg.length == 0 ? true : false;
- if (sdkItem.optArg.length < sdkItem.optionalArg.length) {
- sdkItem.isAddable = true;
- } else {
- sdkItem.isAddable = false;
- }
- },
- selOptionalArg(sdkItem, optArgItem) {
- debugger
- let newSort = 0
- sdkItem.optNames.forEach(name => {
- if (name.name == optArgItem.name) {
- //鏂板垏鎹㈢殑鍙傛暟鍚�
- name.isSelected = true
- newSort = name.sort
- } else if (name.sort == optArgItem.sort) {
- //鍒囨崲鍓嶇殑鍙傛暟鍚�
- name.isSelected = false
- }
- })
- //鏍规嵁鏂扮殑鍙傛暟sort鎵惧埌鍏跺搴旈厤缃璞�
- let argObj = sdkItem.optionalArg.find(arg => arg.sort == newSort)
- if (argObj.type == 'option') {
- this.setOptArgValueOptions(argObj);
- }
- debugger
- //鏇挎崲鏂扮殑鍙傛暟閰嶇疆瀵硅薄
- sdkItem.optArg.forEach((arg, index) => {
- if (arg.sort == optArgItem.sort) {
- this.$set(sdkItem.optArg, index, JSON.parse(JSON.stringify(argObj)))
- }
- })
-
- console.log(argObj.valueOptions)
- },
- setOptArgValueOptions(optArg) {
- let alias = optArg.alias;
- console.log(this.VideoManageData.Dictionary[alias])
- optArg.valueOptions = this.VideoManageData.Dictionary[alias].map(r => {
- return {
- name: r.name,
- value: r.value
- }
- });
- },
- validateArgVal(sdkArgItem, e) {
- debugger
- if (typeof (sdkArgItem.sdk_arg_value) == 'string' && sdkArgItem.sdk_arg_value == '') {
- this.$notify({
- type: 'warning',
- message: '鍙傛暟璁惧畾鍊间笉鑳戒负绌�!'
- })
- sdkArgItem.valid = false
-
- return false
- }
- //杈撳叆闈炴暟瀛�
-
- //鑼冨洿鏄惁鍚堟硶
- if (sdkArgItem.range) {
- let leftHand = sdkArgItem.range.substr(0, 1)
- let rightHand = sdkArgItem.range.substr(sdkArgItem.range.length - 1, 1)
- let reg = /.*(\d+),(\d+).*/
- let res = sdkArgItem.range.match(reg)
- let min = Number(res[1]),
- max = Number(res[2])
- debugger
-
- //鍒ゆ柇闈炲尯闂寸被
- if (sdkArgItem.sdk_arg_value && sdkArgItem.operator != 'range') {
- if (leftHand == '(' && rightHand == ')') {
- if (
- Number(sdkArgItem.sdk_arg_value) <= min ||
- Number(sdkArgItem.sdk_arg_value) >= max
- ) {
- sdkArgItem.valid = false
-
- this.$notify({
- type: 'warning',
- message: `鍙傛暟璁惧畾鍊奸』澶т簬${min},灏忎簬${max}`
- })
- return false
- }
- } else if (leftHand == '[' && rightHand == ')') {
- if (
- Number(sdkArgItem.sdk_arg_value) < min ||
- Number(sdkArgItem.sdk_arg_value) >= max
- ) {
- sdkArgItem.valid = false
-
- this.$notify({
- type: 'warning',
- message: `鍙傛暟璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬${max}`
- })
- return false
- }
- } else if (leftHand == '(' && rightHand == ']') {
- if (
- Number(sdkArgItem.sdk_arg_value) <= min ||
- Number(sdkArgItem.sdk_arg_value) > max
- ) {
- sdkArgItem.valid = false
-
- this.$notify({
- type: 'warning',
- message: `鍙傛暟璁惧畾鍊奸』澶т簬${min},灏忎簬绛変簬${max}`
- })
- return false
- }
- } else if (leftHand == '[' && rightHand == ']') {
- if (
- Number(sdkArgItem.sdk_arg_value) < min ||
- Number(sdkArgItem.sdk_arg_value) > max
- ) {
- sdkArgItem.valid = false
- this.showErrorColor(e)
- this.$notify({
- type: 'warning',
- message: `鍙傛暟璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬绛変簬${max}`
- })
- return false
- }
- }
- } else if (sdkArgItem.min || sdkArgItem.max) {
- //鍒ゆ柇鍖洪棿绫�
- if (leftHand == '(' && rightHand == ')') {
- if (
- Number(sdkArgItem.min) <= min ||
- Number(sdkArgItem.min) >= max
- ) {
- sdkArgItem.valid = false
-
- this.$notify({
- type: 'warning',
- message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬${min},灏忎簬${max}`
- });
- return false
- }
- } else if (leftHand == '[' && rightHand == ')') {
- if (Number(sdkArgItem.min) < min || Number(sdkArgItem.max) >= max) {
- sdkArgItem.valid = false
-
- this.$notify({
- type: 'warning',
- message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬${max}`
- })
- return false
- }
- } else if (leftHand == '(' && rightHand == ']') {
- if (Number(sdkArgItem.min) <= min || Number(sdkArgItem.max) > max) {
- sdkArgItem.valid = false
-
- this.$notify({
- type: 'warning',
- message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬${min},灏忎簬绛変簬${max}`
- })
- return false
- }
- } else if (leftHand == '[' && rightHand == ']') {
- if (Number(sdkArgItem.min) < min || Number(sdkArgItem.max) > max || Number(sdkArgItem.min) > max || Number(sdkArgItem.max) < min) {
- sdkArgItem.valid = false
- this.showErrorColor(e)
- this.$notify({
- type: 'warning',
- message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬绛変簬${max}`
- })
- return false
- }
- }
- }
- }
- e.currentTarget.style.borderColor = ''
- return true
- },
- showErrorColor(e) {
- this.$nextTick(() => {
- e.currentTarget.style.borderColor = 'red'
- })
- },
- setSdksOptions(rule) {
- rule.sdksOptions = this.includeSdks
- },
- setOperator(rule) {
- rule.operator = rule.operatorObj.value
- rule.operatorDesc = rule.operatorObj.name
- },
- setValue(rule) {
- rule.valid = true
-
- if (rule.operator_type === 'option') {
- rule.sdk_arg_value = rule.valueObj.value ? rule.valueObj.value : ''
- rule.typeDesc = '琚�夐」'
- rule.valueDesc = rule.valueObj.name ? rule.valueObj.name : ''
- } else {
- rule.typeDesc = '鍊�'
- rule.valueDesc = rule.sdk_arg_value
- }
- this.valideArgValue(rule)
- },
- selectPolygonOption(rule) {
- debugger
- rule.polygon_id = rule.polygonObj.polygonId
- ? rule.polygonObj.polygonId
- : rule.polygon_id
- rule.camera_id = rule.polygonObj.cameraId
- ? rule.polygonObj.cameraId
- : rule.camera_id
- rule.group_id = this.group_id
- },
- //閫夋嫨绠楁硶 resetArgs涓簍rue鏄坊鍔犱负false鏄垵濮嬪寲缂栬緫
- selectSDKOption(sdkItem, resetArgs) {
- debugger
- //sdkItem.sdk_id = sdkItem.sdkObj.id;
- if (resetArgs) {
- sdkItem.argDef = JSON.parse(sdkItem.sdkObj.argDef)
- console.log(sdkItem.argDef)
- //鍙栧嚭榛樿鍙傛暟
- sdkItem.defaultArg = sdkItem.argDef.filter(
- arg => !arg.config.isOptional
- )
- //璧嬮粯璁perator/鍊�
- sdkItem.defaultArg.forEach(arg => {
- if (arg.operators.length == 1) {
- this.$set(arg, 'operator', arg.operators[0].operator)
-
- if (arg.operators[0].operator == 'range') {
- //鍖洪棿鍊肩殑澶勭悊
- debugger
- //this.$set(arg, 'sdk_arg_value', arg.min+','+arg.max)
- //this.$set(arg, 'sdk_arg_value', arg.range.substring(1,arg.range.length-1));
- }
- }
-
- if (arg.default_value) {
- //arg.sdk_arg_value = arg.default_value
- this.$set(arg, 'sdk_arg_value', arg.default_value)
- }
- })
- sdkItem.defaultArg
- //鍙栧嚭鍙�夊弬鏁�
- sdkItem.optionalArg = sdkItem.argDef.filter(
- arg => arg.config.isOptional
- )
- sdkItem.optNames = sdkItem.optionalArg.map(arg => ({
- name: arg.name,
- sort: arg.sort,
- isSelected: false
- }))
- debugger
- sdkItem.initAddOptional = sdkItem.optionalArg.length > 0 ? true : false
- sdkItem.optArg = []
- }
-
- //娣诲姞鍦烘櫙鏃�,濡傛灉鍦烘櫙鍚嶇О涓虹┖,灏卞皢閫夋嫨鐨勭涓�涓畻娉曞悕鍚屾鍒板満鏅悕绉�
- if (this.sdkGroup[0] && resetArgs) {
- debugger
- this.$emit('sdkNameChange', this.sdkGroup[0].sdkObj.sdk_name)
- }
-
- // 閫夐」鍒囨崲鏃堕渶瑕佸埛鏂癮rg鑿滃崟椤�
- this.selectArgTypeOption(sdkItem, resetArgs)
- },
-
- selectArgTypeOption(rule, resetAlias) {
- if (rule.sdk_arg_type == '') {
- return
- }
-
- if (resetAlias) {
- rule.sdk_arg_alias = ''
- }
-
- rule.argsOptions = rule.sdkObj.args
-
- // 鏍规嵁arg绫诲瀷鏄剧ず鍙傛暟, 褰撳墠鍏ㄩ儴褰掍负 target
- // if (rule.sdkObj.args) {
- // rule.argsOptions = rule.sdkObj.args.filter(ele => {
- // return ele.arg_type === rule.sdk_arg_type
- // });
- // } else {
- // rule.argsOptions = [];
- // }
-
- rule.argObj = {}
- },
- //閫夋嫨绠楁硶閰嶇疆
- selOperator(rule) {
- debugger
- },
- selectArgsOption(rule, resetArgValue) {
- // rule.operator_type = "";
- // console.log(rule, '閫夋嫨绠楁硶鍙傛暟')
- rule.sdk_arg_alias = rule.argObj.alias
- rule.argDesc = rule.argObj.name
- rule.sdk_arg_defaultValue = rule.argObj.default_value
- rule.unit = rule.argObj.unit ? rule.argObj.unit : ''
- //rule.default_value = rule.argObj.default_value ? Number(rule.argObj.default_value) : 0;
-
- //console.log("缃俊搴︾殑榛樿鍊间负",rule.sdk_arg_defaultValue)
- // 淇濆瓨鍊肩被鍨�
- rule.argType = rule.argObj.type
- if (rule.argType === 'option') {
- rule.operator_type = 'option'
- // 璁剧疆榛樿鏉′欢鍊�
- this.VideoManageData.Dictionary.RULECOMPUTE.forEach(opt => {
- if (opt.value == '==') {
- rule.operatorObj = opt
- }
- })
-
- this.setOperator(rule)
-
- this.selectValueOption(rule)
- } else {
- // 璁剧疆榛樿鏉′欢鍊�
- rule.operator_type = 'value'
- if (resetArgValue) {
- rule.sdk_arg_value = ''
-
- this.VideoManageData.Dictionary.RULECOMPUTE.forEach(opt => {
- if (opt.value == '>=') {
- rule.operatorObj = opt
- }
- })
- } else {
- // 缂栬緫瑙勫垯鍖归厤
- this.VideoManageData.Dictionary.RULECOMPUTE.forEach(opt => {
- if (opt.value == rule.operator) {
- rule.operatorObj = opt
- }
- })
- }
- this.setOperator(rule)
- }
- },
- selectValueOption(rule) {
- if (rule.sdk_arg_alias === 'time_rule') {
- rule.valueOptions = this.VideoManageData.TimeRules.map(r => {
- return {
- name: r.name,
- value: r.id
- }
- })
- } else if (rule.sdk_arg_alias === 'compareBase') {
- rule.valueOptions = this.VideoManageData.TagList.map(r => {
- return {
- name: r.tableName,
- value: r.id
- }
- })
- } else {
- let ops = this.VideoManageData.Dictionary[rule.sdk_arg_alias]
- if (ops && ops instanceof Array) {
- rule.valueOptions = ops.map(r => {
- return {
- name: r.name,
- value: r.value
- }
- })
- }
- }
- },
-
- valideArgValue(rule) {
- if (rule.sdk_arg_value == '') {
- this.$notify({
- type: 'warning',
- message: '鍙傛暟璁惧畾鍊间笉鑳戒负绌�!'
- })
- rule.valid = false
- return false
- }
-
- if (rule.argObj && rule.argObj.range) {
- // 濡傛灉璁剧疆浜嗙畻娉曢粯璁ゅ�硷紝鍒欏垽鏂笉鑳藉皬浜庤鍊�
- if (rule.argObj.default_value) {
- if (
- parseInt(rule.sdk_arg_value) < parseInt(rule.sdk_arg_defaultValue)
- ) {
- rule.valid = false
- this.$notify({
- type: 'warning',
- message:
- '鍙傛暟璁惧畾鍊间笉鑳藉皬浜庣畻娉曞弬鏁伴粯璁ゅ�� ' + rule.sdk_arg_defaultValue
- })
- rule.valueDesc = rule.sdk_arg_value = rule.argObj.default_value
- rule.valid = false
- return false
- }
- }
-
- // let re = /(?<=,).*?(?=]|\))/
- let re = /.*,(\d+)/
- let max = rule.argObj.range.match(re)[1]
- // console.log(max,'鑾峰彇鑼冨洿鏈�澶у��')
- if (Number(rule.sdk_arg_value) > Number(max)) {
- rule.valid = false
- this.$notify({
- type: 'warning',
- message: '鍙傛暟璁惧畾鍊间笉鑳藉ぇ浜�' + max
- })
- return false
- }
- }
-
- return true
- },
- parataxis(rule_with_pre) {
- let relation = ''
- this.VideoManageData.Dictionary.RULECOMPUTEBETWEEN.forEach(pre => {
- if (pre.value === rule_with_pre) {
- relation = pre.name
- }
- })
-
- return relation
- },
-
- generatDescription() {
- let desc = ''
- this.groupRules.forEach((r, index) => {
- // console.log(r,index,'鎷兼帴')
- if (index === 0) {
- desc += r.sdkDesc + r.argDesc + r.operatorDesc + r.valueDesc + r.unit
- } else {
- desc +=
- ' ' +
- this.parataxis(r.rule_with_pre) +
- ' ' +
- r.sdkDesc +
- r.argDesc +
- r.operatorDesc +
- r.valueDesc +
- r.unit
- }
- })
- // console.log(desc,'鎷兼帴')
- return desc
- },
- createRule() {
- if (!this.isTemplate && this.Cameras.length > 0) {
- // 鏈�変腑鎽勫儚鏈烘垨鑰呮湭閫変腑鎽勫儚鏈轰换鍔★紝涓嶆墽琛屽垱寤�
- if (!this.Cameras[0].cameraId) return false
- }
- this.group_id = ''
- //this.addRule(0);
- },
-
- //娓呯┖閰嶇疆骞跺垵濮嬪寲
- cleanRule() {
- this.group_id = ''
- this.sdkGroup.splice(0, this.sdkGroup.length)
- this.addSdkItem();
- },
- addRule(index) {
- let newRule = JSON.parse(JSON.stringify(this.baseRule))
- newRule.sdksOptions = this.includeSdks
- if (!this.isLinkRule) {
- // 璁剧疆榛樿鍏ㄩ儴鍖哄煙
- // if (!this.isTemplate) {
- // newRule.polygonObj = this.allPolygonData[0];
- // this.selectPolygonOption(newRule)
- // }
- // 璁剧疆绠楁硶
- // newRule.sdksOptions = this.includeSdks;
- // 璁剧疆榛樿绠楁硶
- // newRule.sdkObj = newRule.sdksOptions[0]
- // this.selectSDKOption(newRule, false)
- // newRule.sdk_arg_type = "target"
- // this.selectArgTypeOption(newRule, true)
- }
-
- // this.groupRules.push(newRule);
- // 鎻掑叆鍒版寚瀹氫綅缃�
- this.groupRules.splice(index + 1, 0, newRule)
- },
- editHandle(ruleTxt) {
- debugger
- // if (ruleTxt.length < 1) {
- // return
- // }
- let ruleInfo = JSON.parse(ruleTxt);
- debugger;
-
- //let ruleInfo = JSON.parse(ruleTxt)
- this.editRule(ruleInfo)
- // 濡傛灉鏄仈鍔ㄤ换鍔�, 鏌ヨ鑱斿姩鎽勫儚鏈哄垪琛�, 灏嗘爲閫変腑鐨勫垪琛ㄦ洿鏀逛负璇ユ潯瑙勫垯鎵�闇�瑕佺殑鎽勫儚鏈�, 骞跺浠藉綋鍓嶇殑閫変腑鐘舵��, 瑙勫垯淇濆瓨鍚庢仮澶�
- // if (this.isLinkRule) {
- // this.VideoRuleData.treeSelectedNodesBackupOnEditLinkRule = [...this.TreeDataPool.selectedNodes]
- // this.VideoRuleData.editLinkRuleRow = { ...ruleInfo }
-
- // this.TreeDataPool.selectedNodes = ruleInfo.group_rules.map(r => {
- // return r.camera_id
- // })
- // this.$nextTick(() => {
- // setTimeout(() => {
- // this.editRule(ruleInfo)
- // }, 1000)
- // })
- // } else {
- // this.editRule(ruleInfo)
- // }
- },
- editRule(ruleGroup) {
- debugger
- this.sdkGroup = []
- this.group_id = ''
-
- // this.sdkGroup = ruleGroup;
- // sdkGroup: [
- // {
- // sdkObj: {},
- // polygonObj: {},
- // is_save_anyhow: true,
- // isSpread: true,
- // argDef: [],
- // initAddOptional: false,
- // defaultArg: [],
- // optionalArg: [],
- // optArg: [],
- // optNames: []
- // }
- // ],
- ruleGroup.forEach(rule => {
- debugger
- let tempObj = {}
-
- if (rule.group_id && rule.group_id != '') {
- this.group_id = rule.group_id
- }
-
- // 濉厖鍖哄煙閫夐」鍒楄〃
- this.allPolygonData.forEach(p => {
- if (p.polygonId === rule.polygon_id) {
- rule.polygonObj = p
- }
- })
-
- if (!rule.polygonObj) {
- rule.polygonObj = {
- cameraId: rule.camera_id,
- defence_state: 1,
- name: '鏈煡鍖哄煙',
- polygonId: rule.polygon_id
- }
- }
- console.log(rule)
-
- // 璁剧疆鍖哄煙
- this.selectPolygonOption(rule)
-
- //绠楁硶瀵硅薄,绠楁硶鍙傛暟閰嶇疆鏁扮粍,(鐢ㄤ簬鏁版嵁澶勭悊鐨�)榛樿鍙傛暟鏁扮粍, 鍙�夊弬鏁版暟缁�, 宸查厤缃殑鍙�夊弬鏁版暟缁�, (鐢ㄤ簬鍘婚噸鍒ゆ柇)瀛樻斁鍙�夊弬鏁板悕鐨勬暟缁�
- let sdkObj = {},
- argDef = [],
- defaultArg = [],
- optionalArg = [],
- optArg = [],
- optNames = []
-
- sdkObj = this.TaskMange.list1.find(sdk => sdk.id == rule.sdk_id)
-
- argDef = JSON.parse(sdkObj.argDef)
- defaultArg = argDef.filter(arg => !arg.config.isOptional)
- optionalArg = argDef.filter(arg => arg.config.isOptional)
-
- rule.sdk_set.forEach(arg => {
- let optItem = optionalArg.find(oarg => {
- debugger
- if (oarg.sort == arg.sort) {
- return oarg
- }
- })
- if (optItem) {
- if (optItem.operators.length > 1) {
- optItem.operator = arg.operator
- //this.selOperator(optItem)
- }
-
- //璧嬪��
- optItem.sdk_arg_value = arg.sdk_arg_value
- //if(arg.sdk_arg_value.indexOf(',')>0){
- //鍒ゆ柇鏄惁鏄閫夊�肩被鍨嬬殑鍙傛暟
- let isMultiOne = optionalArg.find(oarg => oarg.sort == optItem.sort && optItem.config.isMulti)
- if (isMultiOne) {
- optItem.sdk_arg_value = arg.sdk_arg_value.split(',');
- }
-
- if (optItem.type == 'option') {
- this.setOptArgValueOptions(optItem)
- }
- optArg.push(optItem)
- } else {
- defaultArg.forEach(d => {
- if (d.sort == arg.sort) {
- if (arg.sdk_arg_value.indexOf(',') > 0) {
- //鍖洪棿鍊�
- d.min = arg.sdk_arg_value.split(',')[0];
- d.max = arg.sdk_arg_value.split(',')[1];
- d.operator = 'range'
- } else {
- d.sdk_arg_value = arg.sdk_arg_value
- }
- d.operator = arg.operator;
- }
- })
- }
- })
- optNames = optionalArg.map(arg => ({
- name: arg.name,
- sort: arg.sort,
- isSelected: false
- }))
-
- tempObj = {
- sdkObj,
- polygonObj: rule.polygonObj,
- rule_with_pre: rule.rule_with_pre,
- is_save_anyhow: rule.is_save_anyhow,
- isSpread: true,
- argDef,
- initAddOptional: false,
- optionalArg,
- optArg,
- defaultArg,
- optNames,
- isAddable: true,
- camera_id: rule.camera_id,
- polygon_id: rule.polygon_id
- }
- //鍥炴樉鏄惁鏄剧ず娣诲姞鍙�夊弬鏁�
- tempObj.initAddOptional =
- tempObj.optArg.length == 0 && tempObj.optionalArg.length > 0
- ? true
- : false;
- debugger
- //鍥炴樉鏄惁鏄剧ず鍙�夊弬鏁版坊鍔犳寜閽�
- if (tempObj.optArg.length < tempObj.optionalArg.length) {
- tempObj.isAddable = true;
- } else {
- tempObj.isAddable = false;
- }
- //this.selectSDKOption(tempObj, false)
- debugger
- this.sdkGroup.push(tempObj)
- //璁剧疆绠楁硶
- })
- //this.$nextTick(() => {})
- },
- delRule(rule) {
- this.$confirm('鎻愮ず锛氬垹闄ゅ悗锛岃鏉¤鍒欏皢澶辨晥锛屾槸鍚﹀垹闄わ紵', {
- center: true,
- cancelButtonClass: 'comfirm-class-cancle',
- confirmButtonClass: 'comfirm-class-sure'
- })
- .then(() => {
- deleteCameraRules({ groupId: rule.group_id }).then(res => {
- if (res && res.success) {
- this.$notify({
- type: 'success',
- message: '鍒犻櫎鎴愬姛'
- })
- this.$emit('delete-rule')
- } else {
- this.$notify({
- type: 'error',
- message: '鍒犻櫎澶辫触锛�'
- })
- }
- })
- })
- .catch(() => { })
- },
- submitRule() {
- debugger
- let groupRule = { rules: [] }
-
- let group_text = ''
- let validateFlag = false
-
- if (this.isTemplate) {
- groupRule.rules = this.groupRules.map(r => {
- return {
- sdk_id: r.sdk_id,
- sdk_arg_alias: r.sdk_arg_alias,
- operator: r.operator,
- operator_type: r.operator_type,
- sdk_arg_value: r.sdk_arg_value,
- sort: 1,
- rule_with_pre: r.rule_with_pre
- }
- })
- } else {
- //鏍￠獙蹇呭～椤�
- let undefinished = this.sdkGroup.some((sdk, index) => {
- debugger
- //娌℃湁閰嶇疆绠楁硶
- if (Object.keys(sdk.sdkObj).length == 0) {
- return sdk
- }
- //澶氫簬涓ら」绠楁硶鏃�,绠楁硶鍏崇郴涓嶈兘涓虹┖
- if (sdk.rule_with_pre === '' && index != 0) {
- return sdk
- }
- //琛ㄥ崟鎻愪氦鍓嶆牎楠�:鎵�鏈夌畻娉曠殑鍙傛暟鍊间笉鑳戒负绌�,(鏈塺ange鐨�,瑕佸湪range鑼冨洿鍐�)澶辩劍鏃舵牎楠�
- let defaultArgFlag = sdk.defaultArg.find(arg => !arg.sdk_arg_value)
- if (defaultArgFlag) {
- return sdk
- }
- //鏌ユ壘鍙�夊弬鏁板�兼槸鍚﹂兘璁剧疆(澶氶�夊�间负鏁扮粍绫诲瀷)
- let optionalArgFlag = sdk.optArg.find(arg => {
- if (arg.sdk_arg_value instanceof Array) {
- if (arg.sdk_arg_value.length == 0) {
- return arg
- }
- } else {
- //鍖洪棿绫诲弬鏁板�兼渶灏�,鏈�澶у�兼槸鍚﹂兘璁剧疆
- if (arg.operator == 'range') {
- debugger
- if (!arg.min.trim() && arg.max.trim()) {
- return arg
- }
- }
- if (!arg.sdk_arg_value) {
- return arg
- }
- }
- });
-
- if (optionalArgFlag) {
- return sdk
- }
- });
- if (undefinished) {
- this.$notify({
- type: 'error',
- message: '绠楁硶鍙傛暟鏈畬鍠�,璇峰畬鍠勫悗鍐嶄繚瀛�'
- });
- return
- }
-
- //鏍￠獙鑻ョ畻娉曞叧绯讳负瑙﹀彂,鍒欑畻娉曞悕涓嶈兘閲�
- let sameSdk = this.sdkGroup.some((sdk, index) => {
- debugger
- if (sdk.index != 0 && sdk.rule_with_pre == '=>') {
- debugger
- if (sdk.sdkObj.id == this.sdkGroup[index - 1].sdkObj.id) {
- return sdk
- }
- }
- });
-
- if (sameSdk) {
- this.$notify({
- type: 'error',
- message: '绠楁硶鍏崇郴涓鸿Е鍙戞椂,绠楁硶鍚嶄笉鑳介噸澶�'
- });
- return
- }
-
- if (!validateFlag && !sameSdk) {
- validateFlag = true
- }
-
- this.sdkGroup.forEach(sdk => {
- let tempObj = {
- sdk_id: sdk.sdkObj.id,
- camera_id: sdk.camera_id,
- group_id: '',
- is_save_anyhow: sdk.is_save_anyhow,
- polygon_id: sdk.polygon_id,
- rule_with_pre: sdk.rule_with_pre,
- sdk_set: []
- }
-
- let defaultArgs = sdk.defaultArg.map(arg => ({
- operator: arg.operator,
- operator_type: arg.type,
- sdk_arg_alias: arg.alias,
- sdk_arg_value: arg.sdk_arg_value,
- sort: arg.sort
- }))
-
- let defaultArgDesc = '( '
- sdk.defaultArg.forEach(arg => {
- if (arg.operator == 'range') {
- let valRange = '';
- debugger
- valRange = arg.sdk_arg_value.replace(',', '-');
- defaultArgDesc += `${arg.name}${arg.operators[0].name}${valRange}${arg.unit || ''}, `
- } else {
- defaultArgDesc += `${arg.name}${arg.operators[0].name}${
- arg.sdk_arg_value
- }${arg.unit || ''}, `
- }
-
- });
- debugger;
- defaultArgDesc = defaultArgDesc.substring(0, defaultArgDesc.length - 2)
- //defaultArgDesc = defaultArgDesc.substring(0,defaultArgDesc.length-3)+defaultArgDesc.substring(defaultArgDesc.length-1,defaultArgDesc.length);
- //defaultArgDesc = defaultArgDesc.substring(0,defaultArgDesc.length-1);
-
- //澶勭悊鍙�夐」鍙傛暟
-
- let optArgs = sdk.optArg.map(arg => ({
- operator: arg.operator,
- operator_type: arg.type,
- sdk_arg_alias: arg.alias,
- sdk_arg_value: arg.sdk_arg_value,
- sort: arg.sort
- }));
- //灏嗗閫夐」鐨勫�兼嫾鎴愬瓧绗︿覆
- optArgs.forEach(one => {
- if (one.sdk_arg_value instanceof Array) {
- one.sdk_arg_value = one.sdk_arg_value.join();
- }
- });
- let optArgDesc = ' '
- sdk.optArg.forEach(arg => {
- let val = '';
- let valRange = '';
-
-
- //澶勭悊涓嬫媺閫夊�肩被鍨�
- if (arg.type == 'option') {
- if (arg.sdk_arg_value instanceof Array) {
- //澶氶�夊��
- let multiNames = '';
- arg.sdk_arg_value.forEach(val => {
- let opV = arg.valueOptions.find(opt => opt.value == val);
- multiNames += opV.name + ' ';
- })
- val = multiNames;
-
- } else {
- let res = arg.valueOptions.find(
- opt => opt.value == arg.sdk_arg_value
- );
-
- val = res.name;
- }
- //optArgDesc += `,${arg.name}${arg.operators[0].operator}${val}${arg.unit || ''}, `
- } else {
- //optArgDesc += `,${arg.name}${arg.operators[0].operator}${ arg.sdk_arg_value }${arg.unit || ''}, `
- }
-
- let operatorSelected = arg.operators.find(opr => opr.operator == arg.operator)
- optArgDesc += `,${arg.name}${operatorSelected.name}${
- arg.type == 'option' ? val : arg.sdk_arg_value
- }${arg.unit || ''}, `
- })
- optArgDesc = optArgDesc.substring(0, optArgDesc.length - 2) + optArgDesc.substring(optArgDesc.length - 1, optArgDesc.length);
- optArgDesc += ')'
- tempObj.sdk_set = defaultArgs.concat(optArgs)
-
- groupRule.rules.push(tempObj)
-
- let rule_with_pre = ''
- if (sdk.rule_with_pre) {
- switch (sdk.rule_with_pre) {
- case '&&':
- rule_with_pre = ' and '
- break
- case '||':
- rule_with_pre = ' or '
- break
- case '=>':
- rule_with_pre = ' -> '
- break
- default:
- rule_with_pre = ''
- }
- }
- debugger;
- group_text += `${rule_with_pre ? "<br/>" + rule_with_pre + "<br/>" : ""} <span style="background-color:RGB(183,183,183);">${
- sdk.sdkObj.sdk_name
- }</span> ${
- sdk.polygonObj.name
- } ${defaultArgDesc}${optArgDesc}`;
-
- if (
- group_text.charAt(group_text.length - 3) == ',' &&
- group_text.charAt(group_text.length - 2) == ' ' &&
- group_text.charAt(group_text.length - 1) == ')'
- ) {
- group_text =
- group_text.substring(0, group_text.length - 3) +
- group_text.substring(group_text.length - 2, group_text.length)
- }
- debugger
- })
- console.log(group_text)
- }
-
- groupRule.text = group_text
- groupRule.id = this.group_id
- return groupRule
-
- if (this.isLinkRule) {
- // 鍒ゆ柇瑙勫垯涓嚦灏戝寘鍚袱鎽勫儚鏈�
- let cameraIds = Array.from(
- new Set(
- this.sdkGroup.map(r => {
- return r.camera_id
- })
- )
- )
- if (cameraIds.length < 2) {
- this.$notify({
- type: 'error',
- //message: '闇�瑕�2涓笉鍚屾憚鍍忔満鎵嶈兘缁勬垚鑱斿姩瑙勫垯'
- message: '闇�瑕佽嚦灏�2涓笉鍚屾憚鍍忔満鎵嶈兘缁勬垚鑱斿姩鍦烘櫙'
- })
- return
- }
-
- // 鑱斿姩瑙勫垯缂栬緫鍚庯紝鎭㈠涔嬪墠閫変腑鐨勬憚鍍忔満
- // if (this.VideoRuleData.treeSelectedNodesBackupOnEditLinkRule.length) {
- // this.TreeDataPool.selectedNodes = this.VideoRuleData.treeSelectedNodesBackupOnEditLinkRule
- // this.VideoRuleData.treeSelectedNodesBackupOnEditLinkRule = []
- // }
- }
- //if(validateFlag){
- this.onSubmitRule(payload)
- //}
- }
- }
-}
-</script>
-
-<style lang="scss">
-.edit-rules-box {
- width: 100%;
- padding: 0px;
- box-sizing: border-box;
- .sub-rules-box {
- width: 71%;
- min-width: 1127.4px;
- min-height: 50px;
- border-top: 1px solid #eee;
- padding-top: 7px;
-
- box-sizing: border-box;
- padding-bottom: 38px;
- .task-rules-button {
- text-align: right;
- margin: 15px;
- }
- .config-item {
- background: #f8f9f8;
- padding: 15px 25px;
- margin-bottom: 52px;
- position: relative;
- .el-select {
- width: 225px !important;
- }
- .init-sdk {
- margin-right: 30px;
- }
- .connection {
- background: #fff;
- position: absolute;
- width: 100%;
- top: -40px;
- }
- .top-line {
- height: 30px;
- .left {
- float: left;
- display: flex;
- }
- .right {
- float: right;
- cursor: pointer;
- .del {
- margin-right: 10px;
- color: rgb(231, 76, 60);
- }
- .collapse {
- font-size: 13px;
- display: inline-block;
- padding: 5px;
- cursor: pointer;
- }
- }
- }
- .argums {
- position: relative;
- // width: calc(100% - 25px);
- // top: 43px;
- // left: 0;
- // padding-left: 25px;
- // background: #f8f9f8;
- .argums-item {
- display: flex;
- align-items: center;
- margin: 7px 0;
- .arg-name,
- .operator-name {
- margin-right: 30px;
- }
- .arg-val {
- width: 245px;
- span {
- margin-left: 6px;
- }
- .range-min,
- .range-max {
- width: 88px;
- .el-input__inner {
- height: 28px;
- }
- }
- .devide {
- display: inline-block;
- width: 30px;
- height: 1px;
- background: #c5c5c5;
- vertical-align: top;
- margin: 14px 10px 0;
- }
- }
- }
- .el-input {
- width: 225px;
- }
- }
- }
- .btn-add {
- margin: 0 25px 15px;
- margin-top: -38px;
- .el-button {
- width: 370px;
- cursor: pointer;
- }
- }
- }
-
- .el-button--text {
- text-decoration: unset;
- }
- .el-input.is-disabled .el-input__inner {
- background: #fafafa;
- color: #606266;
- }
- p {
- text-align: left;
- // padding: 10px;
- box-sizing: border-box;
- }
-
- .task-blank {
- float: left;
- font-family: PingFangSC-Regular;
- font-size: 12px;
- color: #cccccc;
- margin-top: 5px;
- }
-
- .btn {
- cursor: pointer;
- color: #3d68e1;
- margin-left: 10px;
- font-size: 14px;
- }
-}
-</style>
+<template>
+ <div class="edit-rules-box">
+ <p style="padding: 0">
+ <b style="font-size: 14px; line-height: 28px;">绛栫暐閰嶇疆</b>
+ </p>
+ <div class="sub-rules-box">
+ <div style=" text-align: left;">
+ <div class="sdk-group">
+ <transition-group name="fade" mode="out-in" appear>
+ <div
+ class="config-item"
+ :class="{ init: index == 0 }"
+ v-cloak
+ v-for="(sdkItem, index) in sdkGroup"
+ :key="sdkItem.id"
+ >
+ <div class="connection" v-if="index !== 0">
+ <el-select
+ v-model="sdkItem.rule_with_pre"
+ size="mini"
+ placeholder="閫夊叧绯�"
+ @change="selConnection(sdkItem)"
+ >
+ <el-option value="&&" title="and/涓�" label="and/涓�"></el-option>
+ <el-option value="||" title="or/鎴�" label="or/鎴�"></el-option>
+ <el-option value="=>" title="鈥�>/瑙﹀彂" label="鈥�>/瑙﹀彂"></el-option>
+ </el-select>
+ <el-checkbox
+ v-show="sdkItem.rule_with_pre == '=>'"
+ v-model="sdkItem.is_save_anyhow"
+ style="margin-left:30px"
+ >淇濆瓨杩囩▼鏁版嵁</el-checkbox>
+ </div>
+ <div class="top-line">
+ <div class="left">
+ <div class="init-sdk">
+ <el-select
+ v-model="sdkItem.sdkObj"
+ value-key="id"
+ placeholder="閫夋嫨绠楁硶"
+ size="mini"
+ @change="selectSDKOption(sdkItem, true, index)"
+ >
+ <el-option
+ v-for="item in TaskMange.list1"
+ :key="item.id"
+ :label="item.sdk_name"
+ :value="item"
+ :title="item.sdk_name"
+ v-show="!item.del_flag"
+ ></el-option>
+ </el-select>
+ </div>
+ <div class="init-polygon">
+ <el-select
+ v-model="sdkItem.polygonObj"
+ v-if="!isTemplate"
+ value-key="polygonId"
+ placeholder="閫夋嫨鍖哄煙"
+ size="mini"
+ @change="selectPolygonOption(sdkItem)"
+ >
+ <el-option
+ v-for="subitem in allPolygonData"
+ :key="subitem.id"
+ :label="subitem.name"
+ :value="subitem"
+ :title="subitem.name"
+ ></el-option>
+ </el-select>
+ </div>
+ </div>
+ <div class="right">
+ <span class="del" v-show="!hideDel" @click="delConfigItem(index)">
+ <i class="iconfont iconshanchu"></i>
+ </span>
+ <span class="collapse" @click="collapseLine(index)">
+ <i
+ :class="
+ sdkItem.isSpread
+ ? 'el-icon-arrow-up'
+ : 'el-icon-arrow-down'
+ "
+ ></i>
+ </span>
+ </div>
+ </div>
+
+ <div class="argums derive-line" v-show="sdkItem.isSpread">
+ <div v-for="(arg, index) in sdkItem.defaultArg" :key="arg.sort">
+ <div class="argums-item" v-if="arg.config.isShow">
+ <div class="arg-name">
+ <el-select v-model="arg.name" size="mini" :disabled="true">
+ <el-option :label="arg.name" :title="arg.name" :value="arg"></el-option>
+ </el-select>
+ </div>
+ <div class="operator-name">
+ <el-select
+ :disabled="arg.operators.length==1"
+ v-model="arg.operator"
+ size="mini"
+ @change="selOperator(sdkItem)"
+ >
+ <el-option
+ v-for="operator in arg.operators"
+ :key="operator.operator"
+ :value="operator.operator"
+ :label="operator.name"
+ :title="operator.name"
+ ></el-option>
+ </el-select>
+ </div>
+ <div class="arg-val">
+ <div v-if="arg.operator == 'range'">
+ <el-input
+ class="range-min"
+ v-model="arg.min"
+ @blur="validateArgVal(arg, $event)"
+ ></el-input>
+ <span class="devide"></span>
+ <el-input
+ class="range-max"
+ v-model="arg.max"
+ @blur="validateArgVal(arg, $event)"
+ ></el-input>
+ <span>{{ arg.unit }}</span>
+ </div>
+ <div v-else>
+ <el-select v-if="arg.type == 'option'" v-model="arg.sdk_arg_value">
+ <el-option>璇烽�夋嫨</el-option>
+ </el-select>
+ <el-input
+ v-if="arg.type == 'value'"
+ v-model="arg.sdk_arg_value"
+ :placeholder="
+ arg.default_value ? arg.default_value : ''
+ "
+ size="mini"
+ :style="{ borderColor: tipColor }"
+ @blur="validateArgVal(arg, $event)"
+ ></el-input>
+ <span>{{ arg.unit }}</span>
+ </div>
+ </div>
+ <div
+ class="optional"
+ v-if="
+ sdkItem.initAddOptional &&
+ index == sdkItem.defaultArg.length - 1
+ "
+ >
+ <span class="btn" @click="addOptionalArg(sdkItem)">
+ <i class="iconfont iconhebingxingzhuang" style="font-size:16px"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div
+ class="argums-item optional-line"
+ v-for="optArgItem in sdkItem.optArg"
+ :key="optArgItem.sort"
+ >
+ <div class="arg-name">
+ <el-input
+ v-if="sdkItem.optNames.length == 1"
+ v-model="sdkItem.optNames[0].name"
+ size="mini"
+ :disabled="true"
+ ></el-input>
+ <el-select
+ v-if="sdkItem.optNames.length > 1"
+ v-model="optArgItem.name"
+ size="mini"
+ @change="selOptionalArg(sdkItem, optArgItem)"
+ >
+ <el-option
+ v-for="optName in sdkItem.optNames"
+ :disabled="optName.isSelected"
+ :key="optName.sort"
+ :label="optName.name"
+ :title="optName.name"
+ :value="optName.name"
+ ></el-option>
+ </el-select>
+ </div>
+ <div class="operator-name">
+ <el-select
+ v-model="optArgItem.operator"
+ size="mini"
+ @change="selOperator(optArgItem)"
+ >
+ <el-option
+ v-for="operatorItem in optArgItem.operators"
+ :key="operatorItem.operator"
+ :value="operatorItem.operator"
+ :label="operatorItem.name"
+ :title="operatorItem.name"
+ ></el-option>
+ </el-select>
+ </div>
+ <div class="arg-val">
+ <el-select
+ v-if="optArgItem.type == 'option'"
+ v-model="optArgItem.sdk_arg_value"
+ :multiple="optArgItem.config.isMulti"
+ collapse-tags
+ size="mini"
+ >
+ <el-option
+ v-for="one in optArgItem.valueOptions"
+ :key="one.value"
+ :value="one.value"
+ :label="one.name"
+ :title="one.name"
+ ></el-option>
+ </el-select>
+ <el-input
+ v-if="optArgItem.type == 'value'"
+ v-model="optArgItem.sdk_arg_value"
+ size="mini"
+ @blur="$event => validateArgVal(optArgItem, $event)"
+ ></el-input>
+ <span>{{ optArgItem.unit }}</span>
+ </div>
+ <div class="optional">
+ <span class="btn" @click="addOptionalArg(sdkItem)" v-show="sdkItem.isAddable">
+ <i class="iconfont iconhebingxingzhuang" style="font-size:16px"></i>
+ </span>
+ <span class="btn" @click="delOptionalArg(sdkItem, optArgItem)">
+ <i class="iconfont iconshanchu11" style="font-size:16px"></i>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </transition-group>
+ </div>
+ <div class="btn-add" v-show="isAdd && this.sdkGroup.length < 4">
+ <el-button size="mini" @click="addSdkItem">+ 娣诲姞绠楁硶</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import {
+ deleteCameraRules,
+ updateRuleDefence,
+ updateAlarmLevel
+} from '@/api/camera'
+
+export default {
+ name: 'SceneRuleEditor',
+ props: {
+ Cameras: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ isTemplate: {
+ type: Boolean,
+ default: false
+ },
+ isLinkRule: {
+ type: Boolean,
+ default: false
+ },
+ includeSdks: {
+ type: Array
+ },
+ ruleList: {
+ type: String,
+ default: ''
+ },
+ onSubmitRule: {
+ type: Function,
+ default: () => false
+ }
+ },
+
+ watch: {
+ Cameras: {
+ handler(n, o) {
+
+ let polygon = []
+ let cameras = [...n]
+
+ for (let i = 0; i < cameras.length; i++) {
+ let polyOpt = cameras[i].polygonData.map(p => {
+ return {
+ defence_state: p.defence_state,
+ polygonId: p.id,
+ name: this.isLinkRule
+ ? cameras[i].cameraName + ':' + p.name
+ : p.name,
+
+ cameraId: cameras[i].cameraId
+ }
+ })
+ polygon = polygon.concat(polyOpt)
+
+ this.allPolygonData = polygon
+ }
+ },
+ deep: true
+ },
+ sdkGroup: {
+ handler(newV, oldV) {
+ if (newV) {
+
+ newV.forEach(sdk => {
+ let rangeOne = sdk.defaultArg.find(
+ arg => arg.operators[0].operator == 'range'
+ )
+ if (rangeOne) {
+
+ if (rangeOne.min.trim() && rangeOne.max.trim()) {
+ if (Number(rangeOne.min) >= Number(rangeOne.max)) {
+ this.$notify({
+ type: 'error',
+ message: '鍖洪棿宸︿晶涓嶈兘澶т簬鎴栫瓑浜庡尯闂村彸渚х殑鍊�'
+ })
+ rangeOne.valid = false
+ }
+ rangeOne.sdk_arg_value = rangeOne.min + ',' + rangeOne.max
+ } else {
+ rangeOne.sdk_arg_value = false;
+ }
+
+
+ }
+ })
+ let res = newV.find(item => {
+ return JSON.stringify(item.sdkObj) == '{}'
+ })
+ if (!res) {
+ this.isAdd = true
+ this.hideDel = false
+ } else {
+ this.isAdd = false
+ if (this.sdkGroup.length == 1) {
+ this.hideDel = true
+ } else {
+ this.hideDel = false
+ }
+ }
+ }
+ },
+ deep: true
+ }
+ },
+ mounted() {
+ this.TaskMange.findAllSdk()
+ },
+ data() {
+ return {
+ hideDel: true,
+ //isAddable: true,
+ allPolygonData: [],
+ group_id: '',
+ baseSdkItem: {
+ sdkObj: {},
+ polygonObj: {},
+ is_save_anyhow: true,
+ rule_with_pre: '',
+ isSpread: true,
+ argDef: [],
+ initAddOptional: false,
+ defaultArg: [],
+ optionalArg: [],
+ optArg: [],
+ optNames: [],
+ isAddable: true
+ },
+ sdkGroup: [
+ {
+ sdkObj: {},
+ polygonObj: {},
+ is_save_anyhow: true,
+ isSpread: true,
+ argDef: [],
+ initAddOptional: false,
+ defaultArg: [],
+ optionalArg: [],
+ optArg: [],
+ optNames: [],
+ isAddable: true
+ }
+ ],
+ polygonObj: {},
+ isSpread: true,
+ isAdd: false,
+ tipColor: 'yellow',
+ tasksTable: {},
+ groupRules: [],
+ sdksOption: [],
+ baseRule: {
+ camera_id: '',
+ id: '',
+ operator: '',
+ operator_type: '',
+ polygon_id: '',
+ rule_with_pre: '',
+ sdk_id: '',
+ sdk_arg_alias: '',
+ sdk_arg_value: '',
+ sdk_arg_defaultValue: '',
+ select_time_rule: '',
+ sdk_arg_type: '',
+ // task_id: "",
+
+ polygonObj: {},
+ taskObj: '',
+
+ sdkObj: {},
+ argObj: {},
+ operatorObj: {},
+ valueObj: {},
+
+ sdksOptions: [],
+ argsOptions: [],
+ argType: '',
+ computeOptions: [],
+ valueOptions: [],
+
+ sdkDesc: '',
+ argDesc: '',
+ operatorDesc: '',
+ typeDesc: '',
+ valueDesc: '',
+
+ unit: '',
+ value: '',
+ valid: true
+ }
+ }
+ },
+ methods: {
+ selConnection(sdkItem) {
+
+
+ },
+ addSdkItem() {
+ let itemTemp = JSON.parse(JSON.stringify(this.baseSdkItem));
+ //鍒濆鍖栧尯鍩�
+ itemTemp.polygonObj = JSON.parse(JSON.stringify(this.allPolygonData[0]))
+ this.selectPolygonOption(itemTemp)
+ this.sdkGroup.push(itemTemp)
+ },
+ delConfigItem(index) {
+ //鍒犻櫎閫昏緫锛氬綋鍙湁涓�涓畻娉曟椂锛屽垹闄や細鍥炲埌鍒濆鐘舵�侊紱鏈夊涓畻娉曟椂锛屽垹闄ゆ棦绉婚櫎鏁翠釜绠楁硶椤�
+ if (this.sdkGroup.length == 1) {
+ let itemTemp = JSON.parse(JSON.stringify(this.baseSdkItem))
+ itemTemp.polygonObj = JSON.parse(JSON.stringify(this.allPolygonData[0]));
+ this.selectPolygonOption(itemTemp)
+ this.sdkGroup.splice(index, 1, itemTemp)
+ } else {
+ this.sdkGroup.splice(index, 1)
+ }
+ },
+ collapseLine(index) {
+ this.sdkGroup[index].isSpread = !this.sdkGroup[index].isSpread
+ },
+ addOptionalArg(sdkItem) {
+
+ sdkItem.initAddOptional = false
+ sdkItem.optArg.forEach(arg => {
+ sdkItem.optNames.forEach(name => {
+ if (arg.sort == name.sort) {
+ name.isSelected = true
+ }
+ })
+ }) //鎵惧埌鍙�塻dkItem.optNames鐨勭涓�涓搴旂殑sdkItem.optionalArg聽push鍒皊dkItem.optArg
+ let oneNotSelected = sdkItem.optNames.find(name => !name.isSelected)
+ if (oneNotSelected) {
+ oneNotSelected.isSelected = true;
+ }
+
+ let argTemp = sdkItem.optionalArg.find(arg => {
+ return arg.sort == oneNotSelected.sort
+ })
+
+ let copyArgTemp = JSON.parse(JSON.stringify(argTemp))
+ if (copyArgTemp.type == 'option') {
+ this.setOptArgValueOptions(copyArgTemp)
+ }
+
+ if (copyArgTemp.default_value) {
+ this.$set(copyArgTemp, 'sdk_arg_value', copyArgTemp.default_value)
+ }
+ sdkItem.optArg.push(copyArgTemp);
+ if (sdkItem.optArg.length < sdkItem.optionalArg.length) {
+ sdkItem.isAddable = true;
+ } else {
+ sdkItem.isAddable = false;
+ }
+ },
+ delOptionalArg(sdkItem, optArgItem) {
+ let index = sdkItem.optArg.findIndex(arg => arg.sort == optArgItem.sort)
+ sdkItem.optArg.splice(index, 1)
+ sdkItem.optNames.forEach(name => {
+ if (name.sort == optArgItem.sort) {
+ name.isSelected = false
+ }
+ })
+ sdkItem.initAddOptional = sdkItem.optArg.length == 0 ? true : false;
+ if (sdkItem.optArg.length < sdkItem.optionalArg.length) {
+ sdkItem.isAddable = true;
+ } else {
+ sdkItem.isAddable = false;
+ }
+ },
+ selOptionalArg(sdkItem, optArgItem) {
+
+ let newSort = 0
+ sdkItem.optNames.forEach(name => {
+ if (name.name == optArgItem.name) {
+ //鏂板垏鎹㈢殑鍙傛暟鍚�
+ name.isSelected = true
+ newSort = name.sort
+ } else if (name.sort == optArgItem.sort) {
+ //鍒囨崲鍓嶇殑鍙傛暟鍚�
+ name.isSelected = false
+ }
+ })
+ //鏍规嵁鏂扮殑鍙傛暟sort鎵惧埌鍏跺搴旈厤缃璞�
+ let argObj = sdkItem.optionalArg.find(arg => arg.sort == newSort)
+ if (argObj.type == 'option') {
+ this.setOptArgValueOptions(argObj);
+ }
+
+ //鏇挎崲鏂扮殑鍙傛暟閰嶇疆瀵硅薄
+ sdkItem.optArg.forEach((arg, index) => {
+ if (arg.sort == optArgItem.sort) {
+ this.$set(sdkItem.optArg, index, JSON.parse(JSON.stringify(argObj)))
+ }
+ })
+
+ console.log(argObj.valueOptions)
+ },
+ setOptArgValueOptions(optArg) {
+ let alias = optArg.alias;
+ console.log(this.VideoManageData.Dictionary[alias])
+ optArg.valueOptions = this.VideoManageData.Dictionary[alias].map(r => {
+ return {
+ name: r.name,
+ value: r.value
+ }
+ });
+ },
+ validateArgVal(sdkArgItem, e) {
+
+ if (typeof (sdkArgItem.sdk_arg_value) == 'string' && sdkArgItem.sdk_arg_value == '') {
+ this.$notify({
+ type: 'warning',
+ message: '鍙傛暟璁惧畾鍊间笉鑳戒负绌�!'
+ })
+ sdkArgItem.valid = false
+
+ return false
+ }
+ //杈撳叆闈炴暟瀛�
+
+ //鑼冨洿鏄惁鍚堟硶
+ if (sdkArgItem.range) {
+ let leftHand = sdkArgItem.range.substr(0, 1)
+ let rightHand = sdkArgItem.range.substr(sdkArgItem.range.length - 1, 1)
+ let reg = /.*(\d+),(\d+).*/
+ let res = sdkArgItem.range.match(reg)
+ let min = Number(res[1]),
+ max = Number(res[2])
+
+
+ //鍒ゆ柇闈炲尯闂寸被
+ if (sdkArgItem.sdk_arg_value && sdkArgItem.operator != 'range') {
+ if (leftHand == '(' && rightHand == ')') {
+ if (
+ Number(sdkArgItem.sdk_arg_value) <= min ||
+ Number(sdkArgItem.sdk_arg_value) >= max
+ ) {
+ sdkArgItem.valid = false
+
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟璁惧畾鍊奸』澶т簬${min},灏忎簬${max}`
+ })
+ return false
+ }
+ } else if (leftHand == '[' && rightHand == ')') {
+ if (
+ Number(sdkArgItem.sdk_arg_value) < min ||
+ Number(sdkArgItem.sdk_arg_value) >= max
+ ) {
+ sdkArgItem.valid = false
+
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬${max}`
+ })
+ return false
+ }
+ } else if (leftHand == '(' && rightHand == ']') {
+ if (
+ Number(sdkArgItem.sdk_arg_value) <= min ||
+ Number(sdkArgItem.sdk_arg_value) > max
+ ) {
+ sdkArgItem.valid = false
+
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟璁惧畾鍊奸』澶т簬${min},灏忎簬绛変簬${max}`
+ })
+ return false
+ }
+ } else if (leftHand == '[' && rightHand == ']') {
+ if (
+ Number(sdkArgItem.sdk_arg_value) < min ||
+ Number(sdkArgItem.sdk_arg_value) > max
+ ) {
+ sdkArgItem.valid = false
+ this.showErrorColor(e)
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬绛変簬${max}`
+ })
+ return false
+ }
+ }
+ } else if (sdkArgItem.min || sdkArgItem.max) {
+ //鍒ゆ柇鍖洪棿绫�
+ if (leftHand == '(' && rightHand == ')') {
+ if (
+ Number(sdkArgItem.min) <= min ||
+ Number(sdkArgItem.min) >= max
+ ) {
+ sdkArgItem.valid = false
+
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬${min},灏忎簬${max}`
+ });
+ return false
+ }
+ } else if (leftHand == '[' && rightHand == ')') {
+ if (Number(sdkArgItem.min) < min || Number(sdkArgItem.max) >= max) {
+ sdkArgItem.valid = false
+
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬${max}`
+ })
+ return false
+ }
+ } else if (leftHand == '(' && rightHand == ']') {
+ if (Number(sdkArgItem.min) <= min || Number(sdkArgItem.max) > max) {
+ sdkArgItem.valid = false
+
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬${min},灏忎簬绛変簬${max}`
+ })
+ return false
+ }
+ } else if (leftHand == '[' && rightHand == ']') {
+ if (Number(sdkArgItem.min) < min || Number(sdkArgItem.max) > max || Number(sdkArgItem.min) > max || Number(sdkArgItem.max) < min) {
+ sdkArgItem.valid = false
+ this.showErrorColor(e)
+ this.$notify({
+ type: 'warning',
+ message: `鍙傛暟鍖洪棿璁惧畾鍊奸』澶т簬绛変簬${min},灏忎簬绛変簬${max}`
+ })
+ return false
+ }
+ }
+ }
+ }
+ e.currentTarget.style.borderColor = ''
+ return true
+ },
+ showErrorColor(e) {
+ this.$nextTick(() => {
+ e.currentTarget.style.borderColor = 'red'
+ })
+ },
+ setSdksOptions(rule) {
+ rule.sdksOptions = this.includeSdks
+ },
+ setOperator(rule) {
+ rule.operator = rule.operatorObj.value
+ rule.operatorDesc = rule.operatorObj.name
+ },
+ setValue(rule) {
+ rule.valid = true
+
+ if (rule.operator_type === 'option') {
+ rule.sdk_arg_value = rule.valueObj.value ? rule.valueObj.value : ''
+ rule.typeDesc = '琚�夐」'
+ rule.valueDesc = rule.valueObj.name ? rule.valueObj.name : ''
+ } else {
+ rule.typeDesc = '鍊�'
+ rule.valueDesc = rule.sdk_arg_value
+ }
+ this.valideArgValue(rule)
+ },
+ selectPolygonOption(rule) {
+
+ rule.polygon_id = rule.polygonObj.polygonId
+ ? rule.polygonObj.polygonId
+ : rule.polygon_id
+ rule.camera_id = rule.polygonObj.cameraId
+ ? rule.polygonObj.cameraId
+ : rule.camera_id
+ rule.group_id = this.group_id
+ },
+ //閫夋嫨绠楁硶 resetArgs涓簍rue鏄坊鍔犱负false鏄垵濮嬪寲缂栬緫
+ selectSDKOption(sdkItem, resetArgs) {
+
+ //sdkItem.sdk_id = sdkItem.sdkObj.id;
+ if (resetArgs) {
+ sdkItem.argDef = JSON.parse(sdkItem.sdkObj.argDef)
+ console.log(sdkItem.argDef)
+ //鍙栧嚭榛樿鍙傛暟
+ sdkItem.defaultArg = sdkItem.argDef.filter(
+ arg => !arg.config.isOptional
+ )
+ //璧嬮粯璁perator/鍊�
+ sdkItem.defaultArg.forEach(arg => {
+ if (arg.operators.length == 1) {
+ this.$set(arg, 'operator', arg.operators[0].operator)
+
+ if (arg.operators[0].operator == 'range') {
+ //鍖洪棿鍊肩殑澶勭悊
+
+ //this.$set(arg, 'sdk_arg_value', arg.min+','+arg.max)
+ //this.$set(arg, 'sdk_arg_value', arg.range.substring(1,arg.range.length-1));
+ }
+ }
+
+ if (arg.default_value) {
+ //arg.sdk_arg_value = arg.default_value
+ this.$set(arg, 'sdk_arg_value', arg.default_value)
+ }
+ })
+ sdkItem.defaultArg
+ //鍙栧嚭鍙�夊弬鏁�
+ sdkItem.optionalArg = sdkItem.argDef.filter(
+ arg => arg.config.isOptional
+ )
+ sdkItem.optNames = sdkItem.optionalArg.map(arg => ({
+ name: arg.name,
+ sort: arg.sort,
+ isSelected: false
+ }))
+
+ sdkItem.initAddOptional = sdkItem.optionalArg.length > 0 ? true : false
+ sdkItem.optArg = []
+ }
+
+ //娣诲姞鍦烘櫙鏃�,濡傛灉鍦烘櫙鍚嶇О涓虹┖,灏卞皢閫夋嫨鐨勭涓�涓畻娉曞悕鍚屾鍒板満鏅悕绉�
+ if (this.sdkGroup[0] && resetArgs) {
+
+ this.$emit('sdkNameChange', this.sdkGroup[0].sdkObj.sdk_name)
+ }
+
+ // 閫夐」鍒囨崲鏃堕渶瑕佸埛鏂癮rg鑿滃崟椤�
+ this.selectArgTypeOption(sdkItem, resetArgs)
+ },
+
+ selectArgTypeOption(rule, resetAlias) {
+ if (rule.sdk_arg_type == '') {
+ return
+ }
+
+ if (resetAlias) {
+ rule.sdk_arg_alias = ''
+ }
+
+ rule.argsOptions = rule.sdkObj.args
+ rule.argObj = {}
+ },
+ //閫夋嫨绠楁硶閰嶇疆
+ selOperator(rule) {
+
+ },
+ selectArgsOption(rule, resetArgValue) {
+ // rule.operator_type = "";
+ // console.log(rule, '閫夋嫨绠楁硶鍙傛暟')
+ rule.sdk_arg_alias = rule.argObj.alias
+ rule.argDesc = rule.argObj.name
+ rule.sdk_arg_defaultValue = rule.argObj.default_value
+ rule.unit = rule.argObj.unit ? rule.argObj.unit : ''
+ //rule.default_value = rule.argObj.default_value ? Number(rule.argObj.default_value) : 0;
+
+ //console.log("缃俊搴︾殑榛樿鍊间负",rule.sdk_arg_defaultValue)
+ // 淇濆瓨鍊肩被鍨�
+ rule.argType = rule.argObj.type
+ if (rule.argType === 'option') {
+ rule.operator_type = 'option'
+ // 璁剧疆榛樿鏉′欢鍊�
+ this.VideoManageData.Dictionary.RULECOMPUTE.forEach(opt => {
+ if (opt.value == '==') {
+ rule.operatorObj = opt
+ }
+ })
+
+ this.setOperator(rule)
+
+ this.selectValueOption(rule)
+ } else {
+ // 璁剧疆榛樿鏉′欢鍊�
+ rule.operator_type = 'value'
+ if (resetArgValue) {
+ rule.sdk_arg_value = ''
+
+ this.VideoManageData.Dictionary.RULECOMPUTE.forEach(opt => {
+ if (opt.value == '>=') {
+ rule.operatorObj = opt
+ }
+ })
+ } else {
+ // 缂栬緫瑙勫垯鍖归厤
+ this.VideoManageData.Dictionary.RULECOMPUTE.forEach(opt => {
+ if (opt.value == rule.operator) {
+ rule.operatorObj = opt
+ }
+ })
+ }
+ this.setOperator(rule)
+ }
+ },
+ selectValueOption(rule) {
+ if (rule.sdk_arg_alias === 'time_rule') {
+ rule.valueOptions = this.VideoManageData.TimeRules.map(r => {
+ return {
+ name: r.name,
+ value: r.id
+ }
+ })
+ } else if (rule.sdk_arg_alias === 'compareBase') {
+ rule.valueOptions = this.VideoManageData.TagList.map(r => {
+ return {
+ name: r.tableName,
+ value: r.id
+ }
+ })
+ } else {
+ let ops = this.VideoManageData.Dictionary[rule.sdk_arg_alias]
+ if (ops && ops instanceof Array) {
+ rule.valueOptions = ops.map(r => {
+ return {
+ name: r.name,
+ value: r.value
+ }
+ })
+ }
+ }
+ },
+
+ valideArgValue(rule) {
+ if (rule.sdk_arg_value == '') {
+ this.$notify({
+ type: 'warning',
+ message: '鍙傛暟璁惧畾鍊间笉鑳戒负绌�!'
+ })
+ rule.valid = false
+ return false
+ }
+
+ if (rule.argObj && rule.argObj.range) {
+ // 濡傛灉璁剧疆浜嗙畻娉曢粯璁ゅ�硷紝鍒欏垽鏂笉鑳藉皬浜庤鍊�
+ if (rule.argObj.default_value) {
+ if (
+ parseInt(rule.sdk_arg_value) < parseInt(rule.sdk_arg_defaultValue)
+ ) {
+ rule.valid = false
+ this.$notify({
+ type: 'warning',
+ message:
+ '鍙傛暟璁惧畾鍊间笉鑳藉皬浜庣畻娉曞弬鏁伴粯璁ゅ�� ' + rule.sdk_arg_defaultValue
+ })
+ rule.valueDesc = rule.sdk_arg_value = rule.argObj.default_value
+ rule.valid = false
+ return false
+ }
+ }
+
+ // let re = /(?<=,).*?(?=]|\))/
+ let re = /.*,(\d+)/
+ let max = rule.argObj.range.match(re)[1]
+ // console.log(max,'鑾峰彇鑼冨洿鏈�澶у��')
+ if (Number(rule.sdk_arg_value) > Number(max)) {
+ rule.valid = false
+ this.$notify({
+ type: 'warning',
+ message: '鍙傛暟璁惧畾鍊间笉鑳藉ぇ浜�' + max
+ })
+ return false
+ }
+ }
+
+ return true
+ },
+ parataxis(rule_with_pre) {
+ let relation = ''
+ this.VideoManageData.Dictionary.RULECOMPUTEBETWEEN.forEach(pre => {
+ if (pre.value === rule_with_pre) {
+ relation = pre.name
+ }
+ })
+
+ return relation
+ },
+
+ generatDescription() {
+ let desc = ''
+ this.groupRules.forEach((r, index) => {
+ // console.log(r,index,'鎷兼帴')
+ if (index === 0) {
+ desc += r.sdkDesc + r.argDesc + r.operatorDesc + r.valueDesc + r.unit
+ } else {
+ desc +=
+ ' ' +
+ this.parataxis(r.rule_with_pre) +
+ ' ' +
+ r.sdkDesc +
+ r.argDesc +
+ r.operatorDesc +
+ r.valueDesc +
+ r.unit
+ }
+ })
+ // console.log(desc,'鎷兼帴')
+ return desc
+ },
+ createRule() {
+ if (!this.isTemplate && this.Cameras.length > 0) {
+ // 鏈�変腑鎽勫儚鏈烘垨鑰呮湭閫変腑鎽勫儚鏈轰换鍔★紝涓嶆墽琛屽垱寤�
+ if (!this.Cameras[0].cameraId) return false
+ }
+ this.group_id = ''
+ //this.addRule(0);
+ },
+
+ //娓呯┖閰嶇疆骞跺垵濮嬪寲
+ cleanRule() {
+ this.group_id = ''
+ this.sdkGroup.splice(0, this.sdkGroup.length)
+ this.addSdkItem();
+ },
+ addRule(index) {
+ let newRule = JSON.parse(JSON.stringify(this.baseRule))
+ newRule.sdksOptions = this.includeSdks
+
+ // this.groupRules.push(newRule);
+ // 鎻掑叆鍒版寚瀹氫綅缃�
+ this.groupRules.splice(index + 1, 0, newRule)
+ },
+ editHandle(ruleTxt) {
+
+ // if (ruleTxt.length < 1) {
+ // return
+ // }
+ let ruleInfo = JSON.parse(ruleTxt);
+ ;
+
+ //let ruleInfo = JSON.parse(ruleTxt)
+ this.editRule(ruleInfo)
+ },
+ editRule(ruleGroup) {
+
+ this.sdkGroup = []
+ this.group_id = ''
+ ruleGroup.forEach(rule => {
+
+ let tempObj = {}
+
+ if (rule.group_id && rule.group_id != '') {
+ this.group_id = rule.group_id
+ }
+
+ // 濉厖鍖哄煙閫夐」鍒楄〃
+ this.allPolygonData.forEach(p => {
+ if (p.polygonId === rule.polygon_id) {
+ rule.polygonObj = p
+ }
+ })
+
+ if (!rule.polygonObj) {
+ rule.polygonObj = {
+ cameraId: rule.camera_id,
+ defence_state: 1,
+ name: '鏈煡鍖哄煙',
+ polygonId: rule.polygon_id
+ }
+ }
+ console.log(rule)
+
+ // 璁剧疆鍖哄煙
+ this.selectPolygonOption(rule)
+
+ //绠楁硶瀵硅薄,绠楁硶鍙傛暟閰嶇疆鏁扮粍,(鐢ㄤ簬鏁版嵁澶勭悊鐨�)榛樿鍙傛暟鏁扮粍, 鍙�夊弬鏁版暟缁�, 宸查厤缃殑鍙�夊弬鏁版暟缁�, (鐢ㄤ簬鍘婚噸鍒ゆ柇)瀛樻斁鍙�夊弬鏁板悕鐨勬暟缁�
+ let sdkObj = {},
+ argDef = [],
+ defaultArg = [],
+ optionalArg = [],
+ optArg = [],
+ optNames = []
+
+ sdkObj = this.TaskMange.list1.find(sdk => sdk.id == rule.sdk_id)
+
+ argDef = JSON.parse(sdkObj.argDef)
+ defaultArg = argDef.filter(arg => !arg.config.isOptional)
+ optionalArg = argDef.filter(arg => arg.config.isOptional)
+
+ rule.sdk_set.forEach(arg => {
+ let optItem = optionalArg.find(oarg => {
+
+ if (oarg.sort == arg.sort) {
+ return oarg
+ }
+ })
+ if (optItem) {
+ if (optItem.operators.length > 1) {
+ optItem.operator = arg.operator
+ //this.selOperator(optItem)
+ }
+
+ //璧嬪��
+ optItem.sdk_arg_value = arg.sdk_arg_value
+ //if(arg.sdk_arg_value.indexOf(',')>0){
+ //鍒ゆ柇鏄惁鏄閫夊�肩被鍨嬬殑鍙傛暟
+ let isMultiOne = optionalArg.find(oarg => oarg.sort == optItem.sort && optItem.config.isMulti)
+ if (isMultiOne) {
+ optItem.sdk_arg_value = arg.sdk_arg_value.split(',');
+ }
+
+ if (optItem.type == 'option') {
+ this.setOptArgValueOptions(optItem)
+ }
+ optArg.push(optItem)
+ } else {
+ defaultArg.forEach(d => {
+ if (d.sort == arg.sort) {
+ if (arg.sdk_arg_value.indexOf(',') > 0) {
+ //鍖洪棿鍊�
+ d.min = arg.sdk_arg_value.split(',')[0];
+ d.max = arg.sdk_arg_value.split(',')[1];
+ d.operator = 'range'
+ } else {
+ d.sdk_arg_value = arg.sdk_arg_value
+ }
+ d.operator = arg.operator;
+ }
+ })
+ }
+ })
+ optNames = optionalArg.map(arg => ({
+ name: arg.name,
+ sort: arg.sort,
+ isSelected: false
+ }))
+
+ tempObj = {
+ sdkObj,
+ polygonObj: rule.polygonObj,
+ rule_with_pre: rule.rule_with_pre,
+ is_save_anyhow: rule.is_save_anyhow,
+ isSpread: true,
+ argDef,
+ initAddOptional: false,
+ optionalArg,
+ optArg,
+ defaultArg,
+ optNames,
+ isAddable: true,
+ camera_id: rule.camera_id,
+ polygon_id: rule.polygon_id
+ }
+ //鍥炴樉鏄惁鏄剧ず娣诲姞鍙�夊弬鏁�
+ tempObj.initAddOptional =
+ tempObj.optArg.length == 0 && tempObj.optionalArg.length > 0
+ ? true
+ : false;
+
+ //鍥炴樉鏄惁鏄剧ず鍙�夊弬鏁版坊鍔犳寜閽�
+ if (tempObj.optArg.length < tempObj.optionalArg.length) {
+ tempObj.isAddable = true;
+ } else {
+ tempObj.isAddable = false;
+ }
+ //this.selectSDKOption(tempObj, false)
+
+ this.sdkGroup.push(tempObj)
+ //璁剧疆绠楁硶
+ })
+ //this.$nextTick(() => {})
+ },
+ delRule(rule) {
+ this.$confirm('鎻愮ず锛氬垹闄ゅ悗锛岃鏉¤鍒欏皢澶辨晥锛屾槸鍚﹀垹闄わ紵', {
+ center: true,
+ cancelButtonClass: 'comfirm-class-cancle',
+ confirmButtonClass: 'comfirm-class-sure'
+ })
+ .then(() => {
+ deleteCameraRules({ groupId: rule.group_id }).then(res => {
+ if (res && res.success) {
+ this.$notify({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛'
+ })
+ this.$emit('delete-rule')
+ } else {
+ this.$notify({
+ type: 'error',
+ message: '鍒犻櫎澶辫触锛�'
+ })
+ }
+ })
+ })
+ .catch(() => { })
+ },
+ submitRule() {
+
+ let groupRule = { rules: [] }
+
+ let group_text = ''
+ let validateFlag = false
+
+ if (this.isTemplate) {
+ groupRule.rules = this.groupRules.map(r => {
+ return {
+ sdk_id: r.sdk_id,
+ sdk_arg_alias: r.sdk_arg_alias,
+ operator: r.operator,
+ operator_type: r.operator_type,
+ sdk_arg_value: r.sdk_arg_value,
+ sort: 1,
+ rule_with_pre: r.rule_with_pre
+ }
+ })
+ } else {
+ //鏍￠獙蹇呭～椤�
+ let undefinished = this.sdkGroup.some((sdk, index) => {
+
+ //娌℃湁閰嶇疆绠楁硶
+ if (Object.keys(sdk.sdkObj).length == 0) {
+ return sdk
+ }
+ //澶氫簬涓ら」绠楁硶鏃�,绠楁硶鍏崇郴涓嶈兘涓虹┖
+ if (sdk.rule_with_pre === '' && index != 0) {
+ return sdk
+ }
+ //琛ㄥ崟鎻愪氦鍓嶆牎楠�:鎵�鏈夌畻娉曠殑鍙傛暟鍊间笉鑳戒负绌�,(鏈塺ange鐨�,瑕佸湪range鑼冨洿鍐�)澶辩劍鏃舵牎楠�
+ let defaultArgFlag = sdk.defaultArg.find(arg => !arg.sdk_arg_value)
+ if (defaultArgFlag) {
+ return sdk
+ }
+ //鏌ユ壘鍙�夊弬鏁板�兼槸鍚﹂兘璁剧疆(澶氶�夊�间负鏁扮粍绫诲瀷)
+ let optionalArgFlag = sdk.optArg.find(arg => {
+ if (arg.sdk_arg_value instanceof Array) {
+ if (arg.sdk_arg_value.length == 0) {
+ return arg
+ }
+ } else {
+ //鍖洪棿绫诲弬鏁板�兼渶灏�,鏈�澶у�兼槸鍚﹂兘璁剧疆
+ if (arg.operator == 'range') {
+
+ if (!arg.min.trim() && arg.max.trim()) {
+ return arg
+ }
+ }
+ if (!arg.sdk_arg_value) {
+ return arg
+ }
+ }
+ });
+
+ if (optionalArgFlag) {
+ return sdk
+ }
+ });
+ if (undefinished) {
+ this.$notify({
+ type: 'error',
+ message: '绠楁硶鍙傛暟鏈畬鍠�,璇峰畬鍠勫悗鍐嶄繚瀛�'
+ });
+ return
+ }
+
+ //鏍￠獙鑻ョ畻娉曞叧绯讳负瑙﹀彂,鍒欑畻娉曞悕涓嶈兘閲�
+ let sameSdk = this.sdkGroup.some((sdk, index) => {
+
+ if (sdk.index != 0 && sdk.rule_with_pre == '=>') {
+
+ if (sdk.sdkObj.id == this.sdkGroup[index - 1].sdkObj.id) {
+ return sdk
+ }
+ }
+ });
+
+ if (sameSdk) {
+ this.$notify({
+ type: 'error',
+ message: '绠楁硶鍏崇郴涓鸿Е鍙戞椂,绠楁硶鍚嶄笉鑳介噸澶�'
+ });
+ return
+ }
+
+ if (!validateFlag && !sameSdk) {
+ validateFlag = true
+ }
+
+ this.sdkGroup.forEach(sdk => {
+ let tempObj = {
+ sdk_id: sdk.sdkObj.id,
+ camera_id: sdk.camera_id,
+ group_id: '',
+ is_save_anyhow: sdk.is_save_anyhow,
+ polygon_id: sdk.polygon_id,
+ rule_with_pre: sdk.rule_with_pre,
+ sdk_set: []
+ }
+
+ let defaultArgs = sdk.defaultArg.map(arg => ({
+ operator: arg.operator,
+ operator_type: arg.type,
+ sdk_arg_alias: arg.alias,
+ sdk_arg_value: arg.sdk_arg_value,
+ sort: arg.sort
+ }))
+
+ let defaultArgDesc = '( '
+ sdk.defaultArg.forEach(arg => {
+ if (arg.operator == 'range') {
+ let valRange = '';
+
+ valRange = arg.sdk_arg_value.replace(',', '-');
+ defaultArgDesc += `${arg.name}${arg.operators[0].name}${valRange}${arg.unit || ''}, `
+ } else {
+ defaultArgDesc += `${arg.name}${arg.operators[0].name}${
+ arg.sdk_arg_value
+ }${arg.unit || ''}, `
+ }
+
+ });
+ ;
+ defaultArgDesc = defaultArgDesc.substring(0, defaultArgDesc.length - 2)
+ //defaultArgDesc = defaultArgDesc.substring(0,defaultArgDesc.length-3)+defaultArgDesc.substring(defaultArgDesc.length-1,defaultArgDesc.length);
+ //defaultArgDesc = defaultArgDesc.substring(0,defaultArgDesc.length-1);
+
+ //澶勭悊鍙�夐」鍙傛暟
+
+ let optArgs = sdk.optArg.map(arg => ({
+ operator: arg.operator,
+ operator_type: arg.type,
+ sdk_arg_alias: arg.alias,
+ sdk_arg_value: arg.sdk_arg_value,
+ sort: arg.sort
+ }));
+ //灏嗗閫夐」鐨勫�兼嫾鎴愬瓧绗︿覆
+ optArgs.forEach(one => {
+ if (one.sdk_arg_value instanceof Array) {
+ one.sdk_arg_value = one.sdk_arg_value.join();
+ }
+ });
+ let optArgDesc = ' '
+ sdk.optArg.forEach(arg => {
+ let val = '';
+ let valRange = '';
+
+
+ //澶勭悊涓嬫媺閫夊�肩被鍨�
+ if (arg.type == 'option') {
+ if (arg.sdk_arg_value instanceof Array) {
+ //澶氶�夊��
+ let multiNames = '';
+ arg.sdk_arg_value.forEach(val => {
+ let opV = arg.valueOptions.find(opt => opt.value == val);
+ multiNames += opV.name + ' ';
+ })
+ val = multiNames;
+
+ } else {
+ let res = arg.valueOptions.find(
+ opt => opt.value == arg.sdk_arg_value
+ );
+
+ val = res.name;
+ }
+ //optArgDesc += `,${arg.name}${arg.operators[0].operator}${val}${arg.unit || ''}, `
+ } else {
+ //optArgDesc += `,${arg.name}${arg.operators[0].operator}${ arg.sdk_arg_value }${arg.unit || ''}, `
+ }
+
+ let operatorSelected = arg.operators.find(opr => opr.operator == arg.operator)
+ optArgDesc += `,${arg.name}${operatorSelected.name}${
+ arg.type == 'option' ? val : arg.sdk_arg_value
+ }${arg.unit || ''}, `
+ })
+ optArgDesc = optArgDesc.substring(0, optArgDesc.length - 2) + optArgDesc.substring(optArgDesc.length - 1, optArgDesc.length);
+ optArgDesc += ')'
+ tempObj.sdk_set = defaultArgs.concat(optArgs)
+
+ groupRule.rules.push(tempObj)
+
+ let rule_with_pre = ''
+ if (sdk.rule_with_pre) {
+ switch (sdk.rule_with_pre) {
+ case '&&':
+ rule_with_pre = ' and '
+ break
+ case '||':
+ rule_with_pre = ' or '
+ break
+ case '=>':
+ rule_with_pre = ' -> '
+ break
+ default:
+ rule_with_pre = ''
+ }
+ }
+ ;
+ group_text += `${rule_with_pre ? "<br/>" + rule_with_pre + "<br/>" : ""} <span style="background-color:RGB(183,183,183);">${
+ sdk.sdkObj.sdk_name
+ }</span> ${
+ sdk.polygonObj.name
+ } ${defaultArgDesc}${optArgDesc}`;
+
+ if (
+ group_text.charAt(group_text.length - 3) == ',' &&
+ group_text.charAt(group_text.length - 2) == ' ' &&
+ group_text.charAt(group_text.length - 1) == ')'
+ ) {
+ group_text =
+ group_text.substring(0, group_text.length - 3) +
+ group_text.substring(group_text.length - 2, group_text.length)
+ }
+
+ })
+ console.log(group_text)
+ }
+
+ groupRule.text = group_text
+ groupRule.id = this.group_id
+ return groupRule
+
+ if (this.isLinkRule) {
+ // 鍒ゆ柇瑙勫垯涓嚦灏戝寘鍚袱鎽勫儚鏈�
+ let cameraIds = Array.from(
+ new Set(
+ this.sdkGroup.map(r => {
+ return r.camera_id
+ })
+ )
+ )
+ if (cameraIds.length < 2) {
+ this.$notify({
+ type: 'error',
+ //message: '闇�瑕�2涓笉鍚屾憚鍍忔満鎵嶈兘缁勬垚鑱斿姩瑙勫垯'
+ message: '闇�瑕佽嚦灏�2涓笉鍚屾憚鍍忔満鎵嶈兘缁勬垚鑱斿姩鍦烘櫙'
+ })
+ return
+ }
+ }
+ //if(validateFlag){
+ this.onSubmitRule(payload)
+ //}
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.edit-rules-box {
+ width: 100%;
+ padding: 0px;
+ box-sizing: border-box;
+ .sub-rules-box {
+ width: 71%;
+ min-width: 1127.4px;
+ min-height: 50px;
+ border-top: 1px solid #eee;
+ padding-top: 7px;
+
+ box-sizing: border-box;
+ padding-bottom: 38px;
+ .task-rules-button {
+ text-align: right;
+ margin: 15px;
+ }
+ .config-item {
+ background: #f8f9f8;
+ padding: 15px 25px;
+ margin-bottom: 52px;
+ position: relative;
+ .el-select {
+ width: 225px !important;
+ }
+ .init-sdk {
+ margin-right: 30px;
+ }
+ .connection {
+ background: #fff;
+ position: absolute;
+ width: 100%;
+ top: -40px;
+ }
+ .top-line {
+ height: 30px;
+ .left {
+ float: left;
+ display: flex;
+ }
+ .right {
+ float: right;
+ cursor: pointer;
+ .del {
+ margin-right: 10px;
+ color: rgb(231, 76, 60);
+ }
+ .collapse {
+ font-size: 13px;
+ display: inline-block;
+ padding: 5px;
+ cursor: pointer;
+ }
+ }
+ }
+ .argums {
+ position: relative;
+ // width: calc(100% - 25px);
+ // top: 43px;
+ // left: 0;
+ // padding-left: 25px;
+ // background: #f8f9f8;
+ .argums-item {
+ display: flex;
+ align-items: center;
+ margin: 7px 0;
+ .arg-name,
+ .operator-name {
+ margin-right: 30px;
+ }
+ .arg-val {
+ width: 245px;
+ span {
+ margin-left: 6px;
+ }
+ .range-min,
+ .range-max {
+ width: 88px;
+ .el-input__inner {
+ height: 28px;
+ }
+ }
+ .devide {
+ display: inline-block;
+ width: 30px;
+ height: 1px;
+ background: #c5c5c5;
+ vertical-align: top;
+ margin: 14px 10px 0;
+ }
+ }
+ }
+ .el-input {
+ width: 225px;
+ }
+ }
+ }
+ .btn-add {
+ margin: 0 25px 15px;
+ margin-top: -38px;
+ .el-button {
+ width: 370px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .el-button--text {
+ text-decoration: unset;
+ }
+ .el-input.is-disabled .el-input__inner {
+ background: #fafafa;
+ color: #606266;
+ }
+ p {
+ text-align: left;
+ // padding: 10px;
+ box-sizing: border-box;
+ }
+
+ .task-blank {
+ float: left;
+ font-family: PingFangSC-Regular;
+ font-size: 12px;
+ color: #cccccc;
+ margin-top: 5px;
+ }
+
+ .btn {
+ cursor: pointer;
+ color: #3d68e1;
+ margin-left: 10px;
+ font-size: 14px;
+ }
+}
+</style>
diff --git a/src/components/scene/SlideScene.vue b/src/pages/cameraAccess/components/scene/SlideScene.vue
similarity index 99%
rename from src/components/scene/SlideScene.vue
rename to src/pages/cameraAccess/components/scene/SlideScene.vue
index 45bf329..8caaf09 100644
--- a/src/components/scene/SlideScene.vue
+++ b/src/pages/cameraAccess/components/scene/SlideScene.vue
@@ -1,285 +1,285 @@
-<template>
- <div class="swiper-box">
- <swiper ref="sceneSwiper" v-if="sceneData.length>=1" :options="swiperOption" class="swiper-box-container">
- <!-- <span class="task-tip" v-show="Camera.rules.length == 0 ">鏆傛棤鍦烘櫙,璇峰紑濮嬪垱寤�</span> -->
- <swiper-slide v-for="item in sceneData" :key="item.id+'s'">
- <div class="wrap-box" >
- <div class="inner">
- <div class="scenario-icon">
- <div class="single" v-if="item.rules.length==1">
- <div class="svg-wrap">
- <svg class="icon" aria-hidden="true" style="font-size:4rem;">
- <use :xlink:href="`#${item.rules[0].icon}`" />
- </svg>
- </div>
- </div>
- <div class="double" v-else-if="item.rules.length==2">
- <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="index">
- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
- <use :xlink:href="`#${rule.icon}`" />
- </svg>
- </div>
- </div>
- <div class="third" v-else-if="item.rules.length==3">
- <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'t'+index">
- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
- <use :xlink:href="`#${rule.icon}`" />
- </svg>
- </div>
- </div>
- <div class="four" v-else-if="item.rules.length==4">
- <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'f'+index">
- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
- <use :xlink:href="`#${rule.icon}`" />
- </svg>
- </div>
- </div>
- </div>
- <div class="scenario-name">{{item.scene_name}}</div>
- </div>
- </div>
- </swiper-slide>
- </swiper>
- <div class="swiper-pre-border" v-show="sceneData.length > 4 ">
- <div class="icon-btn" slot="button-prev">
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="swiper-next-border" v-show="sceneData.length > 4 ">
- <div class="icon-btn" slot="button-next">
- <i class="iconfont iconyou1"></i>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- props:[
- // 'swiperOption',
- 'sceneData'
- ],
-
- data() {
- return {
- // mockSceneData: [
- // { scenename: "name1", id:1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
- // { scenename: "name2", id:2, icon: ["iconchouyan-copy"] },
- // {
- // scenename: "name3",
- // id:3,
- // icon: [
- // "iconrenshukouzhao",
- // "iconchouyan-copy",
- // "iconrenlianjiance",
- // "icongetijingzhi"
- // ]
- // },
- // {
- // scenename: "name4",
- // id:4,
- // icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"]
- // },
- // { scenename: "name5", id:5, icon: ["icongetijingzhi"] },
- // { scenename: "name6", id:6, icon: ["iconrenshukouzhao", "icongetijingzhi"] },
- // { scenename: "name7", id:7, icon: ["iconrenlianjiance"] }
- // ],
- swiperOption: {
- slidesPerView: 4,
- spaceBetween: 0,
- pagination: {
- el: ".swiper-pagination",
- clickable: true
- },
- navigation: {
- nextEl: ".swiper-next-border",
- prevEl: ".swiper-pre-border"
- },
- observer:true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- observeParents:true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- },
- mySwiper: {}
- }
- },
- mounted(){
- // this.mySwiper = this.$refs.sceneSwiper.swiper;
-
- },
- methods:{
- //鎷嗗垎浜岀淮鏁扮粍
- chunk(arr,size = 1){
- if(arr.length == 0) return;
- const tempContainer = [];
- let innerArr = [];
- arr.forEach(item => {
- if(innerArr.length == 0){
- tempContainer.push(innerArr);
- }
- innerArr.push(item);
- if(innerArr.length == size){
- innerArr = [];
- }
- });
- return tempContainer;
- }
- },
- computed: {
- slides() {
- return this.chunk(this.mockSceneData,5);
- }
- }
-};
-</script>
-
-<style lang="scss">
-
-.wrap-box {
- width: 100%;
- display: inline-block;
- .inner {
- width: 90%;
- box-sizing: border-box;
- position: relative;
- font-size: 14px;
- padding: 7px 0 48px;
- transition: all 1s;
- background: #ffffff;
- border: 1px solid #e2e2e2;
- box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- border-radius: 4px;
- margin: auto;
- &:hover {
- .mask {
- display: block;
- }
- }
- .mask {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.65);
- backdrop-filter: blur(1px) brightness(100%);
- text-align: center;
- z-index: 1;
- border-radius: 3px;
- display: none;
- .tool {
- position: absolute;
- top: 49%;
- left: 50%;
- transform: translate(-50%, -50%);
- i {
- font-size: 50px;
- }
- i:nth-of-type(1) {
- margin-right: 30px;
- }
- i:nth-of-type(2) {
- color: red;
- }
- }
- }
- .scenario-icon {
- display: flex;
- width: 85%;
- height: 85%;
- margin: auto;
- justify-content: center;
- align-content: center;
- align-items: center;
- .single,
- .double,
- .third,
- .four {
- width: 80%;
- padding-top: 80%;
- position: relative;
- margin: auto;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- .svg-wrap {
- width: 47%;
- position: absolute;
- height: 0;
- padding-top: 47%;
- text-align: center;
- box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;
- svg {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- }
- }
- .single {
- margin: auto;
- .svg-wrap {
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- box-shadow: none;
- }
- }
- .double {
- .svg-wrap:nth-of-type(1) {
- top: 50%;
- transform: translateY(-50%);
- left: 0;
- }
- .svg-wrap:nth-of-type(2) {
- top: 50%;
- transform: translateY(-50%);
- right: 0;
- }
- }
- .third {
- .svg-wrap:nth-of-type(1) {
- top: 0;
- left: 0;
- }
- .svg-wrap:nth-of-type(2) {
- top: 0;
- right: 0;
- }
- .svg-wrap:nth-of-type(3) {
- top: 50%;
- left: 50%;
- transform: translateX(-50%);
- }
- }
- .four {
- .svg-wrap:nth-of-type(1) {
- top: 0;
- left: 0;
- }
- .svg-wrap:nth-of-type(2) {
- top: 0;
- right: 0;
- }
- .svg-wrap:nth-of-type(3) {
- top: 50%;
- left: 0;
- }
- .svg-wrap:nth-of-type(4) {
- top: 50%;
- right: 0;
- }
- }
- }
- .scenario-name {
- width: 100%;
- height: 30px;
- box-sizing: border-box;
- padding: 0 4px;
- text-align: center;
- position: absolute;
- bottom: 10px;
- left: 0;
- }
- }
-}
+<template>
+ <div class="swiper-box">
+ <swiper ref="sceneSwiper" v-if="sceneData.length>=1" :options="swiperOption" class="swiper-box-container">
+ <!-- <span class="task-tip" v-show="Camera.rules.length == 0 ">鏆傛棤鍦烘櫙,璇峰紑濮嬪垱寤�</span> -->
+ <swiper-slide v-for="item in sceneData" :key="item.id+'s'">
+ <div class="wrap-box" >
+ <div class="inner">
+ <div class="scenario-icon">
+ <div class="single" v-if="item.rules.length==1">
+ <div class="svg-wrap">
+ <svg class="icon" aria-hidden="true" style="font-size:4rem;">
+ <use :xlink:href="`#${item.rules[0].icon}`" />
+ </svg>
+ </div>
+ </div>
+ <div class="double" v-else-if="item.rules.length==2">
+ <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="index">
+ <svg class="icon" aria-hidden="true" style="font-size:2rem;">
+ <use :xlink:href="`#${rule.icon}`" />
+ </svg>
+ </div>
+ </div>
+ <div class="third" v-else-if="item.rules.length==3">
+ <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'t'+index">
+ <svg class="icon" aria-hidden="true" style="font-size:2rem;">
+ <use :xlink:href="`#${rule.icon}`" />
+ </svg>
+ </div>
+ </div>
+ <div class="four" v-else-if="item.rules.length==4">
+ <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'f'+index">
+ <svg class="icon" aria-hidden="true" style="font-size:2rem;">
+ <use :xlink:href="`#${rule.icon}`" />
+ </svg>
+ </div>
+ </div>
+ </div>
+ <div class="scenario-name">{{item.scene_name}}</div>
+ </div>
+ </div>
+ </swiper-slide>
+ </swiper>
+ <div class="swiper-pre-border" v-show="sceneData.length > 4 ">
+ <div class="icon-btn" slot="button-prev">
+ <i class="iconfont iconzuo"></i>
+ </div>
+ </div>
+ <div class="swiper-next-border" v-show="sceneData.length > 4 ">
+ <div class="icon-btn" slot="button-next">
+ <i class="iconfont iconyou1"></i>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props:[
+ // 'swiperOption',
+ 'sceneData'
+ ],
+
+ data() {
+ return {
+ // mockSceneData: [
+ // { scenename: "name1", id:1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
+ // { scenename: "name2", id:2, icon: ["iconchouyan-copy"] },
+ // {
+ // scenename: "name3",
+ // id:3,
+ // icon: [
+ // "iconrenshukouzhao",
+ // "iconchouyan-copy",
+ // "iconrenlianjiance",
+ // "icongetijingzhi"
+ // ]
+ // },
+ // {
+ // scenename: "name4",
+ // id:4,
+ // icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"]
+ // },
+ // { scenename: "name5", id:5, icon: ["icongetijingzhi"] },
+ // { scenename: "name6", id:6, icon: ["iconrenshukouzhao", "icongetijingzhi"] },
+ // { scenename: "name7", id:7, icon: ["iconrenlianjiance"] }
+ // ],
+ swiperOption: {
+ slidesPerView: 4,
+ spaceBetween: 0,
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true
+ },
+ navigation: {
+ nextEl: ".swiper-next-border",
+ prevEl: ".swiper-pre-border"
+ },
+ observer:true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ observeParents:true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ },
+ mySwiper: {}
+ }
+ },
+ mounted(){
+ // this.mySwiper = this.$refs.sceneSwiper.swiper;
+
+ },
+ methods:{
+ //鎷嗗垎浜岀淮鏁扮粍
+ chunk(arr,size = 1){
+ if(arr.length == 0) return;
+ const tempContainer = [];
+ let innerArr = [];
+ arr.forEach(item => {
+ if(innerArr.length == 0){
+ tempContainer.push(innerArr);
+ }
+ innerArr.push(item);
+ if(innerArr.length == size){
+ innerArr = [];
+ }
+ });
+ return tempContainer;
+ }
+ },
+ computed: {
+ slides() {
+ return this.chunk(this.mockSceneData,5);
+ }
+ }
+};
+</script>
+
+<style lang="scss">
+
+.wrap-box {
+ width: 100%;
+ display: inline-block;
+ .inner {
+ width: 90%;
+ box-sizing: border-box;
+ position: relative;
+ font-size: 14px;
+ padding: 7px 0 48px;
+ transition: all 1s;
+ background: #ffffff;
+ border: 1px solid #e2e2e2;
+ box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
+ border-radius: 4px;
+ margin: auto;
+ &:hover {
+ .mask {
+ display: block;
+ }
+ }
+ .mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.65);
+ backdrop-filter: blur(1px) brightness(100%);
+ text-align: center;
+ z-index: 1;
+ border-radius: 3px;
+ display: none;
+ .tool {
+ position: absolute;
+ top: 49%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ i {
+ font-size: 50px;
+ }
+ i:nth-of-type(1) {
+ margin-right: 30px;
+ }
+ i:nth-of-type(2) {
+ color: red;
+ }
+ }
+ }
+ .scenario-icon {
+ display: flex;
+ width: 85%;
+ height: 85%;
+ margin: auto;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+ .single,
+ .double,
+ .third,
+ .four {
+ width: 80%;
+ padding-top: 80%;
+ position: relative;
+ margin: auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ .svg-wrap {
+ width: 47%;
+ position: absolute;
+ height: 0;
+ padding-top: 47%;
+ text-align: center;
+ box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;
+ svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+ .single {
+ margin: auto;
+ .svg-wrap {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow: none;
+ }
+ }
+ .double {
+ .svg-wrap:nth-of-type(1) {
+ top: 50%;
+ transform: translateY(-50%);
+ left: 0;
+ }
+ .svg-wrap:nth-of-type(2) {
+ top: 50%;
+ transform: translateY(-50%);
+ right: 0;
+ }
+ }
+ .third {
+ .svg-wrap:nth-of-type(1) {
+ top: 0;
+ left: 0;
+ }
+ .svg-wrap:nth-of-type(2) {
+ top: 0;
+ right: 0;
+ }
+ .svg-wrap:nth-of-type(3) {
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ .four {
+ .svg-wrap:nth-of-type(1) {
+ top: 0;
+ left: 0;
+ }
+ .svg-wrap:nth-of-type(2) {
+ top: 0;
+ right: 0;
+ }
+ .svg-wrap:nth-of-type(3) {
+ top: 50%;
+ left: 0;
+ }
+ .svg-wrap:nth-of-type(4) {
+ top: 50%;
+ right: 0;
+ }
+ }
+ }
+ .scenario-name {
+ width: 100%;
+ height: 30px;
+ box-sizing: border-box;
+ padding: 0 4px;
+ text-align: center;
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/pages/cameraAccess/index/App.vue b/src/pages/cameraAccess/index/App.vue
index d06b1f3..c88ca57 100644
--- a/src/pages/cameraAccess/index/App.vue
+++ b/src/pages/cameraAccess/index/App.vue
@@ -1,307 +1,116 @@
<template>
- <div class="s-video-manage">
- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
- <el-tab-pane
- :label="firstLabeName"
- name="camera-info"
- v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:info')"
- >
- <camera-info ref="cameraInfo" />
- </el-tab-pane>
- <el-tab-pane
- :label="firstLabeName"
- name="camera-info"
- v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:stackInfo')"
- >
- <data-stack-info ref="dataStackInfo" />
- </el-tab-pane>
- <el-tab-pane
- label="鐙珛鍦烘櫙"
- name="separate-rule"
- v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:selfRule')"
- >
- <separate-rules ref="sepRule" />
- <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
- </el-tab-pane>
- <el-tab-pane
- label="鐙珛鍦烘櫙"
- name="separate-rule"
- v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:selfRule')"
- >
- <separate-rules ref="sepRule" />
- <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
- </el-tab-pane>
- <el-tab-pane
- label="鑱斿姩鍦烘櫙"
- name="linkage-rule"
- v-if="(isShow('VIDEOCAMERA:camera:linkRule') || isShow('VIDEOCAMERA:dataStack:linkRule')) && this.TreeDataPool.treeActiveName == 'camera'"
- >
- <linkage-rule ref="linkRule" />
- </el-tab-pane>
- <el-tab-pane
- label="绠楀姏閰嶇疆"
- name="poll-setting"
- v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:resourceCalc')"
- >
- <poll-setting ref="pullSetting" />
- </el-tab-pane>
- <el-tab-pane
- label="绠楀姏閰嶇疆"
- name="poll-setting"
- v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:resourceCalc')"
- >
- <poll-setting ref="pullSetting" />
- </el-tab-pane>
- </el-tabs>
+ <div class="column">
+ <div class="column-left" :style="`height:${screenHeight}px;`">
+ <div class="resize-bar"></div>
+ <div class="resize-line"></div>
+ <div class="resize-save">
+ <left-nav :appName="'Video'" :height="screenHeight - 40"></left-nav>
+ </div>
+ </div>
+ <div class="column-right" :style="`height:${screenHeight}px;`">
+ <right-side />
+ </div>
</div>
</template>
<script>
-import CameraInfo from "@/components/camera/CameraInfo";
-import DataStackInfo from "@/components/camera/DataStackInfo"
-import SeparateRules from "@/components/camera/SeparateRules";
-import LinkageRule from "@/components/camera/LinkageRule";
-import PollSetting from "@/components/camera/PollSetting";
-// import fTemplate from "@/components/common/fTemplate";
-// import localSeparate from "@/components/camera/localSeparate";
-
-//import bus from "@/main";
-import TreeDataPool from "@/Pool/TreeData";
+import LeftNav from "@/components/LeftNav";
+// import CameraVideo from "./components/Video.vue";
+import RightSide from "./VideoManage"
export default {
+ name: "SearchPage",
components: {
- CameraInfo,
- DataStackInfo,
- SeparateRules,
- LinkageRule,
- PollSetting
+ LeftNav,
+ RightSide
},
data() {
return {
- activeName: "camera-info",
- buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
- intervalTimer: null
- };
- },
- computed: {
- isAdmin() {
- if (
- sessionStorage.getItem("userInfo") &&
- sessionStorage.getItem("userInfo") !== ""
- ) {
- let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
- return loginName === "superadmin" || loginName === "basic";
- }
- return false;
- },
- firstLabeName() {
- return this.TreeDataPool.treeActiveName === "camera" ? "鎽勫儚鏈轰俊鎭�" : "鏁版嵁鏍堜俊鎭�"
+ screenHeight: 0,
}
- },
- watch: {
- // 鏁版嵁鏍堜笉鏄剧ず鑱斿姩瑙勫垯锛岄槻姝㈠湪閫変腑鑱斿姩瑙勫垯tab涓垏鎹㈠埌鏁版嵁鏍�
- "TreeDataPool.treeActiveName": function (val) {
- if (val === "dataStack" && this.activeName === "linkage-rule") {
- this.activeName = "camera-info";
- }
- },
- "TreeDataPool.selectedNode": function (node) {
- if (this.activeName == "camera-info") {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- this.$refs.cameraInfo.selectCamera(node);
- }
- } else if (this.activeName === "separate-rule") {
- this.$refs.sepRule.Camera = {}
- this.$refs.sepRule.initCameraData(node.id);
- }
- },
- "TreeDataPool.selectedNodes": {
- handler(nodes) {
- if (this.activeName == "linkage-rule") {
- this.$refs.linkRule.initCameraData();
- }
- },
- deep: true
- },
- "DataStackPool.selectedDir": {
- handler(node, oldNode) {
- console.log(this.activeName)
- console.log(node, '鍕鹃�夋湰鍦拌棰�')
- if (this.TreeDataPool.treeActiveName !== 'dataStack') {
- return
- }
- this.$nextTick(() => {
- if (this.activeName == "camera-info") {
- console.log("dataStackInfo.selectDir(node)")
- this.$refs.dataStackInfo.selectDir(node);
- } else if (this.activeName == "separate-rule" && node.length !== 0) {
- this.$refs.sepRule.initCameraData(node.id);
- }
- })
- },
- deep: true
- }
- },
- created() {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- if (this.isShow('VIDEOCAMERA:camera:info')) {
- this.activeName = "camera-info"
- } else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
- this.activeName = "separate-rule"
- } else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
- this.activeName = "linkage-rule"
- } else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
- this.activeName = "poll-setting"
- }
- } else {
- if (this.isShow('VIDEOCAMERA:camera:info')) {
- this.activeName = "camera-info"
- } else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
- this.activeName = "separate-rule"
- } else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
- this.activeName = "linkage-rule"
- } else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
- this.activeName = "poll-setting"
- }
- }
- this.TreeDataPool.readonly = true;
- this.TreeDataPool.gbReadonly = true;
- this.TreeDataPool.multiple = false;
- this.TreeDataPool.selectedNode = "";
- this.selectedNodes = [];
- this.VideoManageData.init();
- },
- beforeDestroy() {
- clearInterval(this.intervalTimer);
- //this.TreeDataPool.treeActiveName = "camera";
},
mounted() {
- this.$nextTick(() => {
- // bus.$on("addCameraOnTree", node => {
- // this.handAddDevice(node);
- // });
- // bus.$on("addDirOnTree", node => {
- // this.handAddDIr(node);
- // });
- // this.TreeDataPool.clean();
- });
-
- let _this = this
- this.intervalTimer = setInterval(() => {
- _this.PollData.statisticTaskInfo();
- }, 10000)
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ window.onresize = () => {
+ return (() => {
+ this.screenHeight = document.documentElement.clientHeight - 20;
+ })();
+ };
},
- methods: {
- isShow(authority) {
- if (this.isAdmin) {
- return true;
- } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
- return true;
- } else if ("videoCamera:pollSetting" === authority) {
- return true;
- } else {
- return false;
- }
- },
- handAddDevice(node) {
- let _this = this;
- setTimeout(() => {
- _this.$refs.cameraInfo.addDevice(node);
- _this.activeName = "camera-info";
- }, 100);
- },
- handAddDIr(node) {
- let _this = this;
- setTimeout(() => {
- _this.$refs.dataStackInfo.addDir(node);
- _this.activeName = "camera-info";
- }, 100);
- },
- handleClick(tab, event) {
- this.TreeDataPool.multiple = tab.name === "linkage-rule";
- if (tab.name === "camera-info") {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
- } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
- this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
- }
- } else if (tab.name === "separate-rule") {
- if (this.TreeDataPool.treeActiveName == 'camera') {
- this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
- } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
- this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
- }
- } else if (this.activeName == "linkage-rule") {
- this.$refs.linkRule.initCameraData();
- } else if (this.activeName == "poll-setting") {
- this.$nextTick(() => {
- this.$refs.pullSetting.initLineChart();
- })
- }
- }
- }
};
</script>
-<style lang="scss">
-.s-video-manage {
- width: 100%;
+
+<style lang="scss" scoped>
+.column {
+ overflow: hidden;
+}
+.column-left {
+ height: inherit;
+ background-color: #fff;
+ position: relative;
+ float: left;
+}
+.column-right {
height: 100%;
- float: right;
- box-sizing: border-box;
padding: 16px;
- background-color: #e9ebf2;
- .el-tabs--border-card {
- box-shadow: none;
- -webkit-box-shadow: none;
- border: none;
+ background-color: #eee;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+.resize-save {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ bottom: 0;
+ left: 0;
+ padding: 16px;
+ overflow-x: hidden;
+}
+.resize-bar {
+ width: 310px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 310px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #eee;
+ border-left: 1px solid #bbb;
+ pointer-events: none;
+}
+.resize-bar:hover ~ .resize-line,
+.resize-bar:active ~ .resize-line {
+ border-left: 1px dashed skyblue;
+}
+.resize-bar::-webkit-scrollbar {
+ width: 200px;
+ height: inherit;
+}
+
+/* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
+@supports (-moz-user-select: none) {
+ .resize-bar:hover ~ .resize-line,
+ .resize-bar:active ~ .resize-line {
+ border-left: 1px solid #bbb;
}
- // .s-video-manage-breadcrumb {
- // height: 5%;
- // -webkit-box-sizing: border-box;
- // border: 1px solid #e4e7ed;
- // -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
- // box-shadow: #e4e7ed 0px 0px 9px inset;
- // border-radius: 5px;
- // }
- .el-tabs--border-card {
- height: 100%;
- width: 100%;
- .el-tabs__header {
- .is-active {
- color: #3d68e1 !important;
- }
- .el-tabs__item:not(.is-disabled):hover {
- color: #3d68e1 !important;
- }
- height: 52px;
- border-bottom: none;
- background-color: #f8f9fb;
- .el-tabs__nav-wrap,
- .el-tabs__nav-scroll,
- .el-tabs__nav,
- .el-tabs__item {
- height: calc(100% + 1px);
- }
- .el-tabs__item {
- line-height: 52px;
- width: 144px;
- border-right-color: transparent;
- border-left-color: transparent;
- font-family: PingFangSC-Medium;
- font-size: 14px;
- color: #222222;
- }
- }
- }
- .el-tabs__content {
- width: 100%;
- height: calc(100% - 52px);
- box-sizing: border-box;
- padding: 13px 38px;
- }
- .el-tab-pane {
- width: 100%;
- height: 100%;
+ .resize-bar:hover ~ .resize-line::after,
+ .resize-bar:active ~ .resize-line::after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: 0;
+ right: -8px;
+ // background: url(./resize.svg);
+ background-size: 100% 100%;
}
}
</style>
diff --git a/src/pages/cameraAccess/index/VideoManage.vue b/src/pages/cameraAccess/index/VideoManage.vue
new file mode 100644
index 0000000..c9ce732
--- /dev/null
+++ b/src/pages/cameraAccess/index/VideoManage.vue
@@ -0,0 +1,290 @@
+<template>
+ <div class="s-video-manage">
+ <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+ <el-tab-pane
+ :label="firstLabeName"
+ name="camera-info"
+ v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:info')"
+ >
+ <camera-info ref="cameraInfo" />
+ </el-tab-pane>
+ <el-tab-pane
+ :label="firstLabeName"
+ name="camera-info"
+ v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:stackInfo')"
+ >
+ <data-stack-info ref="dataStackInfo" />
+ </el-tab-pane>
+ <el-tab-pane
+ label="鐙珛鍦烘櫙"
+ name="separate-rule"
+ v-if="this.TreeDataPool.treeActiveName == 'camera' && isShow('VIDEOCAMERA:camera:selfRule')"
+ >
+ <separate-rules ref="sepRule" />
+ <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
+ </el-tab-pane>
+ <el-tab-pane
+ label="鐙珛鍦烘櫙"
+ name="separate-rule"
+ v-if="this.TreeDataPool.treeActiveName == 'dataStack' && isShow('VIDEOCAMERA:dataStack:selfRule')"
+ >
+ <separate-rules ref="sepRule" />
+ <!-- <local-separate ref="localSeparate" v-else></local-separate> -->
+ </el-tab-pane>
+ <el-tab-pane
+ label="鑱斿姩鍦烘櫙"
+ name="linkage-rule"
+ v-if="(isShow('VIDEOCAMERA:camera:linkRule') || isShow('VIDEOCAMERA:dataStack:linkRule')) && this.TreeDataPool.treeActiveName == 'camera'"
+ >
+ <linkage-rule ref="linkRule" />
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+</template>
+
+<script>
+import CameraInfo from "../components/CameraInfo";
+import DataStackInfo from "../components/DataStackInfo"
+import SeparateRules from "../components/SeparateRules";
+import LinkageRule from "../components/LinkageRule";
+// import fTemplate from "@/components/common/fTemplate";
+// import localSeparate from "@/components/camera/localSeparate";
+
+//import bus from "@/main";
+import TreeDataPool from "@/Pool/TreeData";
+
+export default {
+ components: {
+ CameraInfo,
+ DataStackInfo,
+ SeparateRules,
+ LinkageRule },
+ data() {
+ return {
+ activeName: "camera-info",
+ buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
+ intervalTimer: null
+ };
+ },
+ computed: {
+ isAdmin() {
+ if (
+ sessionStorage.getItem("userInfo") &&
+ sessionStorage.getItem("userInfo") !== ""
+ ) {
+ let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
+ return loginName === "superadmin" || loginName === "basic";
+ }
+ return false;
+ },
+ firstLabeName() {
+ return this.TreeDataPool.treeActiveName === "camera" ? "鎽勫儚鏈轰俊鎭�" : "鏁版嵁鏍堜俊鎭�"
+ }
+ },
+ watch: {
+ // 鏁版嵁鏍堜笉鏄剧ず鑱斿姩瑙勫垯锛岄槻姝㈠湪閫変腑鑱斿姩瑙勫垯tab涓垏鎹㈠埌鏁版嵁鏍�
+ "TreeDataPool.treeActiveName": function (val) {
+ if (val === "dataStack" && this.activeName === "linkage-rule") {
+ this.activeName = "camera-info";
+ }
+ },
+ "TreeDataPool.selectedNode": function (node) {
+ if (this.activeName == "camera-info") {
+ if (this.TreeDataPool.treeActiveName == 'camera') {
+ this.$refs.cameraInfo.selectCamera(node);
+ }
+ } else if (this.activeName === "separate-rule") {
+ this.$refs.sepRule.Camera = {}
+ this.$refs.sepRule.initCameraData(node.id);
+ }
+ },
+ "TreeDataPool.selectedNodes": {
+ handler(nodes) {
+ if (this.activeName == "linkage-rule") {
+ this.$refs.linkRule.initCameraData();
+ }
+ },
+ deep: true
+ },
+ "DataStackPool.selectedDir": {
+ handler(node, oldNode) {
+ console.log(this.activeName)
+ console.log(node, '鍕鹃�夋湰鍦拌棰�')
+ if (this.TreeDataPool.treeActiveName !== 'dataStack') {
+ return
+ }
+ this.$nextTick(() => {
+ if (this.activeName == "camera-info") {
+ console.log("dataStackInfo.selectDir(node)")
+ this.$refs.dataStackInfo.selectDir(node);
+ } else if (this.activeName == "separate-rule" && node.length !== 0) {
+ this.$refs.sepRule.initCameraData(node.id);
+ }
+ })
+ },
+ deep: true
+ }
+ },
+ created() {
+ if (this.TreeDataPool.treeActiveName == 'camera') {
+ if (this.isShow('VIDEOCAMERA:camera:info')) {
+ this.activeName = "camera-info"
+ } else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
+ this.activeName = "separate-rule"
+ } else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
+ this.activeName = "linkage-rule"
+ } else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
+ this.activeName = "poll-setting"
+ }
+ } else {
+ if (this.isShow('VIDEOCAMERA:camera:info')) {
+ this.activeName = "camera-info"
+ } else if (this.isShow('VIDEOCAMERA:camera:selfRule') || this.isShow('VIDEOCAMERA:datastack:selfRule')) {
+ this.activeName = "separate-rule"
+ } else if (this.isShow('VIDEOCAMERA:camera:linkRule') || this.isShow('VIDEOCAMERA:datastack:linkRule')) {
+ this.activeName = "linkage-rule"
+ } else if (this.isShow('VIDEOCAMERA:camera:resourceCalc') || this.isShow('VIDEOCAMERA:datastack:resourceCalc')) {
+ this.activeName = "poll-setting"
+ }
+ }
+ this.TreeDataPool.readonly = true;
+ this.TreeDataPool.gbReadonly = true;
+ this.TreeDataPool.multiple = false;
+ this.TreeDataPool.selectedNode = "";
+ this.selectedNodes = [];
+ this.VideoManageData.init();
+ },
+ beforeDestroy() {
+ clearInterval(this.intervalTimer);
+ //this.TreeDataPool.treeActiveName = "camera";
+ },
+ mounted() {
+ this.$nextTick(() => {
+ // bus.$on("addCameraOnTree", node => {
+ // this.handAddDevice(node);
+ // });
+ // bus.$on("addDirOnTree", node => {
+ // this.handAddDIr(node);
+ // });
+ // this.TreeDataPool.clean();
+ });
+
+ let _this = this
+ this.intervalTimer = setInterval(() => {
+ _this.PollData.statisticTaskInfo();
+ }, 10000)
+ },
+ methods: {
+ isShow(authority) {
+ if (this.isAdmin) {
+ return true;
+ } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
+ return true;
+ } else if ("videoCamera:pollSetting" === authority) {
+ return true;
+ } else {
+ return false;
+ }
+ },
+ handAddDevice(node) {
+ let _this = this;
+ setTimeout(() => {
+ _this.$refs.cameraInfo.addDevice(node);
+ _this.activeName = "camera-info";
+ }, 100);
+ },
+ handAddDIr(node) {
+ let _this = this;
+ setTimeout(() => {
+ _this.$refs.dataStackInfo.addDir(node);
+ _this.activeName = "camera-info";
+ }, 100);
+ },
+ handleClick(tab, event) {
+ this.TreeDataPool.multiple = tab.name === "linkage-rule";
+ if (tab.name === "camera-info") {
+ if (this.TreeDataPool.treeActiveName == 'camera') {
+ this.$refs.cameraInfo.selectCamera(this.TreeDataPool.selectedNode);
+ } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
+ this.$refs.dataStackInfo.selectDir(this.DataStackPool.selectedDir);
+ }
+ } else if (tab.name === "separate-rule") {
+ if (this.TreeDataPool.treeActiveName == 'camera') {
+ this.$refs.sepRule.initCameraData(this.TreeDataPool.selectedNode.id);
+ } else if (this.TreeDataPool.treeActiveName == 'dataStack') {
+ this.$refs.sepRule.initCameraData(this.DataStackPool.selectedDir.id);
+ }
+ } else if (this.activeName == "linkage-rule") {
+ this.$refs.linkRule.initCameraData();
+ } else if (this.activeName == "poll-setting") {
+ this.$nextTick(() => {
+ this.$refs.pullSetting.initLineChart();
+ })
+ }
+ }
+ }
+};
+</script>
+<style lang="scss">
+.s-video-manage {
+ width: 100%;
+ height: 100%;
+ float: right;
+ box-sizing: border-box;
+ padding: 16px;
+ background-color: #e9ebf2;
+ .el-tabs--border-card {
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ border: none;
+ }
+ // .s-video-manage-breadcrumb {
+ // height: 5%;
+ // -webkit-box-sizing: border-box;
+ // border: 1px solid #e4e7ed;
+ // -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
+ // box-shadow: #e4e7ed 0px 0px 9px inset;
+ // border-radius: 5px;
+ // }
+ .el-tabs--border-card {
+ height: 100%;
+ width: 100%;
+ .el-tabs__header {
+ .is-active {
+ color: #3d68e1 !important;
+ }
+ .el-tabs__item:not(.is-disabled):hover {
+ color: #3d68e1 !important;
+ }
+ height: 52px;
+ border-bottom: none;
+ background-color: #f8f9fb;
+ .el-tabs__nav-wrap,
+ .el-tabs__nav-scroll,
+ .el-tabs__nav,
+ .el-tabs__item {
+ height: calc(100% + 1px);
+ }
+ .el-tabs__item {
+ line-height: 52px;
+ width: 144px;
+ border-right-color: transparent;
+ border-left-color: transparent;
+ font-family: PingFangSC-Medium;
+ font-size: 14px;
+ color: #222222;
+ }
+ }
+ }
+ .el-tabs__content {
+ width: 100%;
+ height: calc(100% - 52px);
+ box-sizing: border-box;
+ padding: 13px 38px;
+ }
+ .el-tab-pane {
+ width: 100%;
+ height: 100%;
+ }
+}
+</style>
diff --git a/src/pages/cameraAccess/index/main.ts b/src/pages/cameraAccess/index/main.ts
index 80f18a4..782d019 100644
--- a/src/pages/cameraAccess/index/main.ts
+++ b/src/pages/cameraAccess/index/main.ts
@@ -1,9 +1,26 @@
-import Vue from 'vue'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+import "../../../assets/icons/alibaba/iconfont.css";
+import "../../../assets/icons/basic/iconfont.css";
+import "../../../assets/icons/iconfont.css";
+import "../../../assets/icons/symbol.js";
+
+
+import VueAwesomeSwiper from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
+import * as VueWindow from "@hscmap/vue-window";
+
+import Mixin from "./mixins";
+
import App from './App.vue'
Vue.use(ElementUI)
+Vue.use(VueAwesomeSwiper as any);
+Vue.use(VueWindow);
+
+Vue.mixin(Mixin);
new Vue({
el: '#app',
diff --git a/src/pages/cameraAccess/index/mixins.ts b/src/pages/cameraAccess/index/mixins.ts
index e69de29..52fb92b 100644
--- a/src/pages/cameraAccess/index/mixins.ts
+++ b/src/pages/cameraAccess/index/mixins.ts
@@ -0,0 +1,25 @@
+import TreeDataPool from "@/Pool/TreeData";
+import DataStackPool from "@/Pool/dataStack"
+import DataPool from "@/Pool/PollData"
+import VideoManageData from "@/Pool/VideoManageData";
+import TaskMange from '@/Pool/TaskMange'
+
+/* eslint-disable */
+const onlyTreeDataPool = new TreeDataPool
+const onlyDataStack = new DataStackPool
+const onlyDataPool = new DataPool
+const onlyVideoManageData = new VideoManageData
+const onlyTaskMange = new TaskMange
+
+const mixin = {
+ data() {
+ return {
+ TreeDataPool: onlyTreeDataPool,
+ DataStackPool: onlyDataStack,
+ VideoManageData: onlyVideoManageData,
+ TaskMange: onlyTaskMange,
+ PollData: onlyDataPool
+ };
+ },
+};
+export default mixin;
\ No newline at end of file
diff --git a/src/pages/settings/index/App.vue b/src/pages/settings/index/App.vue
index e5a2172..234d499 100644
--- a/src/pages/settings/index/App.vue
+++ b/src/pages/settings/index/App.vue
@@ -5,22 +5,12 @@
</template>
<script>
-import AuthorityManagement from "../components/AuthorityManagement";
import BasicSetting from "../components/BasicSetting";
-import ClusterManagement from "../components/ClusterManagement";
-import LogManagement from "../components/LogManagement";
-import RadioSet from "../components/RadioSet";
-import SystemMaintenance from "../components/SystemMaintenance";
-//import EventPush from "../components/systemManage/EventPush/index";
export default {
name: 'settings',
components: {
- AuthorityManagement,
- BasicSetting,
- LogManagement,
- RadioSet,
- SystemMaintenance
+ BasicSetting
},
data() {
return {
@@ -53,19 +43,19 @@
},
},
created() {
- if(this.isShow('videoSystem:base')){
- this.activeName = "basic"
- }else if(this.isShow('videoSystem:permission')){
- this.activeName = "user"
- }else if(this.isShow('videoSystem:broadcast')){
- this.activeName = "radio"
- }else if(this.isShow('videoSystem:eventPush')){
- this.activeName = "event"
- }else if(this.isShow('videoSystem:logManage')){
- this.activeName = "log"
- }else if(this.isShow('videoSystem:sysManage')){
- this.activeName = "system"
- }
+ if (this.isShow('videoSystem:base')) {
+ this.activeName = "basic"
+ } else if (this.isShow('videoSystem:permission')) {
+ this.activeName = "user"
+ } else if (this.isShow('videoSystem:broadcast')) {
+ this.activeName = "radio"
+ } else if (this.isShow('videoSystem:eventPush')) {
+ this.activeName = "event"
+ } else if (this.isShow('videoSystem:logManage')) {
+ this.activeName = "log"
+ } else if (this.isShow('videoSystem:sysManage')) {
+ this.activeName = "system"
+ }
},
};
</script>
@@ -107,7 +97,7 @@
}
.el-tabs__item.is-active {
color: #3d68e1;
-
+
// border-right-color: #fff;
// border-left-color: #fff;
}
@@ -116,7 +106,7 @@
}
}
}
- .el-tabs__header{
+ .el-tabs__header {
margin-bottom: 0;
}
.el-tabs__content {
--
Gitblit v1.8.0