From ea7ddf0ff187335d68e167faa8e04548abbb2e6f Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期六, 01 八月 2020 18:25:39 +0800
Subject: [PATCH] fix: remove datastack dir
---
/dev/null | 25 -------------------------
src/pages/index/main.ts | 2 +-
2 files changed, 1 insertions(+), 26 deletions(-)
diff --git a/src/pages/datastack/components/CameraInfo.vue b/src/pages/datastack/components/CameraInfo.vue
deleted file mode 100644
index 35546d2..0000000
--- a/src/pages/datastack/components/CameraInfo.vue
+++ /dev/null
@@ -1,651 +0,0 @@
-<template>
- <div class="camera-info">
- <el-form ref="addForm" :model="form" :rules="rules" label-width="88px">
- <el-row>
- <el-col :span="9">
- <el-form-item label="RTSP鍦板潃" :span="11" prop="rtsp">
- <el-input v-model="form.rtsp" placeholder="rtsp://" :disabled="isDisabled" size="small"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="9" :offset="1">
- <el-form-item label="鍧愭爣" style="width:100%;">
- <label slot="label"> 鍧愭爣</label>
- <el-col :span="11">
- <el-input
- v-model="form.latitude"
- placeholder="缁忓害"
- :disabled="isDisabled"
- size="small"
- ></el-input>
- </el-col>
- <el-col :span="11" :offset="2">
- <el-input
- v-model="form.longitude"
- placeholder="绾害"
- :disabled="isDisabled"
- size="small"
- ></el-input>
- </el-col>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="9">
- <el-form-item label="璁惧鍚嶇О" style="width:100%" prop="name">
- <el-input v-model="form.name" placeholder="璇疯緭鍏ヨ澶囧悕绉�" :disabled="isDisabled" size="small"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="9" :offset="1">
- <el-form-item label="璁惧鍦板潃" style="width:100%" prop="addr">
- <el-input v-model="form.addr" placeholder="璇疯緭鍏ュ湴鍧�鎻忚堪" :disabled="!form.rtsp" size="small"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="9">
- <el-form-item label="澶勭悊鍒嗚鲸鐜�" style="width:100%">
- <el-select
- v-model="form.resolution"
- placeholder="鏈満鍒嗚鲸鐜�"
- style="position: absolute;left: 0;"
- size="small"
- >
- <el-option
- v-for="item in resolutionList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="9" :offset="1" style="padding-left: 11px;">
- <el-form-item label="浜嬩欢澹伴煶">
- <div class="flex-wrap" style="margin-left:-10px">
- <el-switch v-model="form.voiceEnable" active-color="#409eff" :width="50"></el-switch>
- <el-select
- v-model="form.voiceId"
- placeholder="閫夋嫨澹伴煶"
- size="small"
- value-key="id"
- @change="selSound"
- >
- <el-option
- v-for="item in soundList"
- :key="item.id"
- :label="item.name"
- :value="item"
- ></el-option>
- </el-select>
- <span class="player-btn" @click="togglePlayer">
- <i
- class="el-icon-video-play"
- style="font-size:26px; vertical-align:middle; color:#409eff"
- ></i>
- </span>
- </div>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-show="isGb28182">
- <el-col :span="9">
- <el-form-item label="璁惧鍒悕" style="width:100%" prop="alias">
- <el-input v-model="form.alias" placeholder="璇疯緭鍏ヨ澶囧埆鍚�" size="small"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row>
- <!-- 娣诲姞浼犳劅鍣� -->
- <CameraInfoEditor ref="cameraEditor" :Carmeras="form" :sensors="sensors"></CameraInfoEditor>
- </el-row>
-
- <el-row style="padding-top: 15px">
- <el-col :span="19" style="text-align: right;">
- <el-button
- size="small"
- type="primary"
- @click="onSubmit('addForm')"
- :disabled="conDisabled"
- >淇濆瓨</el-button>
- <el-button
- type="danger"
- size="small"
- @click="deleteCamera"
- v-if="!isAdd"
- :disabled="isDisabled"
- >鍒犻櫎鎽勫儚鏈�</el-button>
- </el-col>
- </el-row>
- <el-divider></el-divider>
- <input v-model="form.id" type="hidden" />
- <input v-model="form.areaid" type="hidden" />
- <el-row>
- <el-col :span="12" style="text-align: right;">
- <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">杩炴帴娴嬭瘯</el-button>
- </el-col>
- </el-row>
- <el-row style="padding-top: 15px">
- <el-col :span="12">
- <camera-player
- :cameraName="videoItem.name"
- :cameraID="videoItem.id"
- :isGb="videoItem.cameraType === 1"
- :rtspUrl="videoItem.rtsp"
- :isRunning="false"
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
- ></camera-player>
- <video v-else poster="../../../assets/baseimg_cameara.png" preload="none"></video>
- </el-col>
-
- <!-- 绯荤粺杩愯淇℃伅 -->
- <el-col :span="11" :offset="1">
- <div class="sysinfo-box">
- <div style="width: 70%">
- <ul>
- <li style="width:100%">
- <info-card
- style="width:100%;min-width: 440px"
- :realtime="PollData.RealTimeSum"
- :polling="PollData.PollValidCount"
- :dataStack="PollData.stackChannelCount"
- ></info-card>
- </li>
- </ul>
- </div>
- <div
- :style="`width:80%;height:174px;position: relative;left: -12px;`"
- v-if="PollData.barCharts && PollData.barCharts.length !== 0"
- >
- <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
- </div>
- </div>
- </el-col>
- </el-row>
- </el-form>
- </div>
-</template>
-<script>
-import {
- checkCameraConnet,
- createCamera,
- updateCameraInfo,
- getCameraInfo,
- delCamera
-} from "@/api/camera";
-import { getSoundList } from "@/api/event";
-import { changeRunType } from "@/api/pollConfig";
-
-import CameraPlayer from "@/components/player";
-import eChartsBar from '@/components/subComponents/eChartsBar'
-
-import InfoCard from "./infoCard"
-import CameraInfoEditor from './CameraInfoEditor'
-
-export default {
- name: "CameraInfo",
- components: {
- CameraPlayer,
- InfoCard,
- eChartsBar,
- CameraInfoEditor
- },
- props: {
- cameraList: {
- default: () => {
- return [];
- },
- type: Array
- }
- },
- data() {
- return {
- videoItem: null,
- visibilityState: true,
- soundList: [],
- togglePlay: true,
- eventAudio: new Audio(),
- soundPath: '',
- form: {
- latitude: 0,
- rtsp: "",
- longitude: 0,
- name: "",
- addr: "",
- alias: "",
- areaid: "",
- brand: "",
- id: "",
- ip: "",
- reserved: "",
- run_type: 0,
- isAI: false,
- username: "",
- password: "",
- cameraType: 0,
- resolution: "",
- voiceId: "",
- voiceEnable: true
- },
- // 璁板綍娣诲姞鐘舵��
- isAdd: false,
- addParentId: "",
- rules: {
- name: [
- { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
- ],
- rtsp: [
- { required: true, message: "RTSP鍦板潃涓嶈兘涓虹┖", trigger: "blur" }
- ],
- addr: [
- { required: true, message: "璁惧鍦板潃涓嶈兘涓虹┖", trigger: "blur" }
- ]
- },
- resolutionList: [],
- //浼犳劅鍣ㄥ垪琛�
- sensors: []
- };
- },
- computed: {
- isSelected() {
- return this.TreeDataPool.selectedNode.type !== "4"
- },
- isGb28182() {
- return this.TreeDataPool.selectedNode.cameraType === 1;
- },
- isDisabled() {
- if (this.isGb28182) {
- return true;
- }
-
- return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
- },
- conDisabled() {
- return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
- }
- },
- mounted() {
- this.initFormData();
- document.addEventListener("visibilitychange", () => {
- this.visibilitychange();
- });
- this.getSounds();
- },
- methods: {
- getSounds() {
- getSoundList().then(res => {
- if (res.success) {
- this.soundList = res.data.list
- }
- }).catch(
- e => console.log(e)
- )
- },
- selSound(sound) {
- this.soundPath = sound.path;
- this.form.voiceId = sound.id
- },
- togglePlayer() {
- if (!this.soundPath) {
- this.$notify({
- type: 'info',
- message: '璇峰厛閫夋嫨涓�涓０闊�!'
- })
- return false;
- }
- this.eventAudio.src = this.soundPath;
-
- if (this.togglePlay) {
- this.eventAudio.play();
- } else {
- this.eventAudio.pause()
- }
- this.togglePlay = !this.togglePlay
- },
- visibilitychange() {
- switch (document.visibilityState) {
- case "hidden":
- this.visibilityState = false;
- break;
- case "visible":
- this.visibilityState = true;
- break;
- }
- },
- selectCamera(node) {
- this.isAdd = false;
- this.videoItem = null;
- this.$refs.addForm.resetFields();
- // this.initFormData();
- // this.$refs.addForm.clearValidate();
- if (node.type === "4") {
- getCameraInfo(node.id).then(res => {
- if (res.success) {
- console.log(res, '鑾峰彇鎽勫儚鏈轰俊鎭�')
- if (res.data.resolutions) {
- let list = res.data.resolutions.map(i => {
- let obj = {}
- if (i.width == 0 && i.height == 0) {
- obj.label = "鏈満鍒嗚鲸鐜�"
- obj.value = "0*0"
- } else {
- obj.label = i.width + "*" + i.height
- obj.value = i.width + "*" + i.height
- }
- return obj
- })
- this.resolutionList = list
- this.sensors = res.data.sensors
- }
- this.$nextTick(() => {
- Object.assign(this.form, res.data)
- if (this.form.run_type !== -1) {
- this.form.isAI = true
- } else {
- this.form.isAI = false
- }
- this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
- })
- }
- });
- }
- },
- // 淇濆瓨
- onSubmit(formName) {
- let list = this.$refs.cameraEditor.getResult()
- console.log(list, "sensor")
- // id涓虹┖锛屾柊澧炴憚鍍忔満
- this.$refs[formName].validate(async valid => {
- if (valid) {
- const isRequire = this.verifyRequrie();
- if (!isRequire) return false;
- // 鏇存柊
- if (this.form.id !== "") {
- this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182);
- this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude);
- this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude);
- this.form.sensors = list
- this.form.resolution_width = Number(this.form.resolution.split("*")[0])
- this.form.resolution_height = Number(this.form.resolution.split("*")[1])
- updateCameraInfo(this.form).then(rsp => {
- if (rsp.success) {
- this.$notify({
- type: "success",
- message: "鎽勫儚鏈轰俊鎭慨鏀规垚鍔燂紒"
- });
- this.TreeDataPool.fetchTreeData();
- } else {
- this.selectCamera(this.TreeDataPool.selectedNode);
- this.$notify({
- type: "error",
- message: "鎽勫儚鏈轰俊鎭慨鏀瑰け璐ワ紒"
- });
- }
- });
- } else {
- this.form.areaid = this.addParentId;
- this.form.sensors = list
- const { ...json } = this.form;
- createCamera({
- latitude: parseFloat(json.latitude),
- rtsp: this.form.rtsp,
- longitude: parseFloat(json.longitude),
- name: this.form.name,
- addr: this.form.addr,
- areaid: this.form.areaid,
- brand: this.form.brand,
- id: this.form.id,
- ip: this.form.ip,
- port: parseFloat(json.port),
- reserved: this.form.reserved,
- run_type: this.form.isAI ? this.form.run_type : -1,
- username: this.form.username,
- password: this.form.password,
- areaId: this.form.areaId,
- sensors: this.form.sensors
- }).then(rsp => {
- if (rsp.success) {
- this.$notify({
- type: "success",
- message: "鎽勫儚鏈烘坊鍔犳垚鍔燂紒"
- });
- this.TreeDataPool.selectedNode = rsp.data;
- this.TreeDataPool.fetchTreeData();
- // 鍚庣杩斿洖缁撴灉涓�0锛屾煡璇㈠悗涓�4
- this.TreeDataPool.selectedNode.type = "4";
- this.selectCamera(this.TreeDataPool.selectedNode);
- } else {
- this.$notify({
- type: "error",
- message: "鎽勫儚鏈烘坊鍔犲け璐ワ紒"
- });
- }
- });
- }
- }
- });
- },
- // 杩炴帴娴嬭瘯
- cameraConnet() {
- this.videoItem = null;
- this.$nextTick(() => {
- this.videoItem = {
- name: this.form.name,
- rtsp: this.form.rtsp,
- id: this.form.id,
- isRunning: this.form.run_enable,
- cameraType: this.form.type
- };
- })
- },
- // * 楠岃瘉蹇呴�夐」
- verifyRequrie() {
- if (this.isGb28182) {
- return true;
- }
- // const rtspReg = /^(rtsp:\/\/)([a-zA-Z0-9_]+):([a-zA-Z0-9_]+)@(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?):([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])(\/)([a-zA-Z0-9_/]+)$/;
- // !rtspReg.test(this.form.rtsp
-
- if (this.form.rtsp === "") {
- this.$notify({
- type: "warning",
- message: "璇疯緭鍏ユ纭殑rtsp鍦板潃"
- });
- return false;
- }
- return true;
- },
- // 鍒犻櫎鎽勫儚鏈�
- deleteCamera() {
- this.$confirm("鏄惁鍒犻櫎姝ゆ憚鍍忔満锛�", {
- center: true,
- cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure"
- }).then(() => {
- delCamera(this.form.id).then(res => {
- if (res.success) {
- this.initFormData();
- this.$notify({
- type: "success",
- message: "鍒犻櫎鎴愬姛锛�"
- });
- this.TreeDataPool.fetchTreeData();
- this.TreeDataPool.selectedNode = {};
- } else {
- this.$notify({
- type: "error",
- message: "鍒犻櫎澶辫触锛�"
- });
- }
- });
- });
- },
- // 娓呯┖杈撳叆妗�
- initFormData() {
- this.form = {
- latitude: 0,
- rtsp: "",
- longitude: 0,
- name: "",
- addr: "",
- alias: "",
- areaid: "",
- brand: "",
- id: "",
- ip: "",
- reserved: "",
- run_type: 0,
- isAI: false,
- username: "",
- password: "",
- resolution: "",
- voiceId: "",
- voiceEnable: true
- };
- },
- // 娣诲姞璁惧
- addDevice(node) {
- this.isAdd = true;
- this.addParentId = node;
- this.initFormData();
- },
- //瀹炴椂銆佽疆璇㈠垏鎹�
- changePoll(row) {
- // console.log(row,'瀹炴椂銆佽疆璇㈠垏鎹�',this.form,this.PollData.RealTimeSum)
- //鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
- if (this.form.id && this.form.id !== undefined) {
- if (this.PollData.RealTimeSum < 16) {
- if (row.value) {
- this.form.run_type = 1
- } else {
- this.form.run_type = 0
- }
- changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
- rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "閰嶇疆鎴愬姛"
- });
- } else {
- this.$notify({
- type: "error",
- message: "閰嶇疆澶辫触"
- });
- }
- }
- );
- } else {
- if (this.form.run_type === 1) {
- this.form.run_type = 0
- changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
- rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "閰嶇疆鎴愬姛"
- });
- } else {
- this.$notify({
- type: "error",
- message: "閰嶇疆澶辫触"
- });
- }
- }
- );
- }
- this.$nextTick(() => {
- this.$set(this.form, 'run_type', 0)
- })
- // this.$notify({
- // type: 'warning',
- // message: '瀹炴椂澶勭悊璺暟宸茶揪鏈�澶у鐞嗚矾鏁帮紒'
- // })
- }
- this.TreeDataPool.fetchTreeData();
- this.PollData.statisticTaskInfo();
- }
- },
- //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊
- pollEnable(row) {
- // console.log(row,'瀹炴椂銆佽疆璇㈠垏鎹�')
- if (row) {
- if (this.PollData.RealTimeSum < 16) {
- this.form.run_type = 1
- } else {
- this.form.run_type = 0
- }
- } else {
- this.form.run_type = -1
- }
- if (this.form.id && this.form.id !== undefined) {
- changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
- rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "閰嶇疆鎴愬姛"
- });
- } else {
- this.$notify({
- type: "error",
- message: "閰嶇疆澶辫触"
- });
- }
- this.selectCamera(this.TreeDataPool.selectedNode)
- }
- );
- }
- this.TreeDataPool.fetchTreeData();
- this.PollData.statisticTaskInfo();
- }
- }
-};
-</script>
-
-<style lang="scss">
-.camera-info {
- width: 100%;
- height: 100%;
- margin-left: 20px;
- overflow: auto;
- .ai-select {
- text-align: left;
- }
- .el-form-item__label {
- text-align: left;
- }
- .label {
- color: #606266;
- font-size: 14px;
- }
- .flex-wrap {
- display: flex;
- justify-content: space-between;
- align-items: center;
- .el-select {
- width: 70%;
- }
- }
- .sysinfo-box {
- .card-box {
- float: left;
- }
- .chart-box {
- float: left;
- width: 50%;
- margin-top: 20px;
- margin-left: 20px;
- }
- ul {
- list-style: none;
- display: table;
- width: 100%;
- li {
- display: table-cell;
- text-align: center;
- }
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/datastack/components/CameraInfoEditor.vue b/src/pages/datastack/components/CameraInfoEditor.vue
deleted file mode 100644
index 2c74fc5..0000000
--- a/src/pages/datastack/components/CameraInfoEditor.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
- <div>
- <div class="task-camera-box">
- <p style="padding: 0">
- <b style="font-size: 14px; line-height: 28px;">浼犳劅鍣�</b>
- <span
- class="add-btn"
- @click="createSensor"
- >
- <i class="iconfont iconhebingxingzhuang "
- style="color:#3D68E1;margin-left:10px;font-size:16px;cursor: pointer;"></i>
- </span>
- </p>
-
- <div class="sub-task-rules-box">
- <span class="task-blank" v-show="groupRules.length == 0 ">鏆傛棤浼犳劅鍣紝璇烽�夋嫨鏂板</span>
- <div style=" text-align: left;" v-for="(rule, index) in groupRules" :key="index">
-
- <div style="margin-left:10px;">
- <!-- 閫夋嫨鍖哄煙 -->
- <el-checkbox v-model="rule.enable">
- <span>
- {{'寮�鍚�'}}
- </span>
- </el-checkbox>
-
- <!-- 閫夋嫨绫诲瀷 -->
- <el-select v-model="rule.type" placeholder="閫夋嫨绫诲瀷" size="small">
- <el-option
- v-for="item in selectTypeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
-
- <!-- ip鍦板潃 -->
- <div style="max-width:220px;display: inline-block;">
- <ip-input
- :ip="rule.ip"
- @on-blur="rule.ip = arguments[0]"
- ></ip-input>
- </div>
-
- <div style="max-width:120px;display: inline-block;margin-left:10px;">
- <el-input v-model="rule.port" placeholder="璇疯緭鍏ョ鍙�"
- size="small"></el-input>
- </div>
-
- <div style="max-width:120px;display: inline-block;margin-left:10px;">
- <el-input v-model="rule.username" placeholder="璇疯緭鍏ョ敤鎴峰悕"
- size="small"></el-input>
- </div>
-
- <div style="max-width:120px;display: inline-block;margin-left:10px;">
- <el-input v-model="rule.password" placeholder="璇疯緭鍏ュ瘑鐮�"
- size="small"></el-input>
- </div>
-
- <div style="max-width:120px;display: inline-block;margin-left:10px;">
- <el-input v-model="rule.threshold" placeholder="璇疯緭鍏ラ槇鍊�"
- size="small"></el-input>
- </div>
-
- <!-- 鏂板銆佸垹闄� 鎸夐挳 -->
- <el-button
- type="text"
- style="color: #F53D3D;margin-left:10px;"
- class="iconfont iconshanchu11"
- @click="groupRules.splice(index, 1)"
- ></el-button>
-
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-<script>
-import {
- deleteCameraRules,
- updateRuleDefence,
- updateAlarmLevel
-} from "@/api/camera";
-import {
- findByType
-} from '@/api/taskMange'
-import ipInput from "@/components/subComponents/IPInput"
-
-
-export default {
- name: "TaskRuleEditor",
- components:{
- ipInput
- },
- props: {
- Carmeras: {
- type: Object,
- default: () => {
- return {}
- }
- },
- sensors: {
- type: Array,
- default: () =>{
- return []
- }
- }
- },
- filters: {
- },
- computed: {
- },
- watch: {
- sensors: function(newVal, oldVal) {
- if(newVal !== oldVal){
- this.groupRules = newVal
- }
- }
- },
- data() {
- return {
- baseSensor: {
- enable:false,
- type: "",
- ip: "",
- id: "",
- port: "",
- username: "",
- password: "",
- threshold:""
- },
- groupRules: [
- {
- enable:false,
- type: "",
- ip: "",
- id: "",
- port: "",
- username: "",
- password: "",
- threshold:""
- }
- ],
- selectTypeOptions:[
- {
- value:"1",
- label:"娓╁害"
- },
- {
- value:"2",
- label:"婀垮害"
- },
- {
- value:"3",
- label:"婀垮害"
- }
- ]
- };
- },
- methods: {
- createSensor(){
- this.groupRules.push(this.baseSensor)
- },
- getResult(){
- if(this.groupRules.length !== 0){
- let list = this.groupRules.filter(item=>{
- return item.selectType != "" || item.cameraIp != ""
- || item.cameraPort != "" || item.cameraUserName != ""
- || item.cameraPaw != "" || item.cameraThro != ""
- })
- this.groupRules = list
- return list.map(i=>{
- i.port = Number(i.port)
- i.threshold = Number(i.threshold)
- return i
- })
- }
- },
- // 鏌ヨ瀛楀吀
- async findByType() {
- let res = await findByType();
- if (res && res.success) {
- let list = res.data.sensorType.map(i => {
- let obj = {};
- obj.label = i.name;
- obj.value = i.value;
- return obj;
- });
- this.selectTypeOptions = [...list];
- }
- },
- },
- mounted() {
- this.findByType();
- },
-};
-</script>
-
-<style lang="scss" scoped>
-.task-camera-box {
- width: 100%;
- border-top: 1px solid #ccc;
- padding-top: 5px;
- box-sizing: border-box;
- .sub-task-rules-box {
- width: 100%;
- min-height: 50px;
- padding-top: 7px;
- box-sizing: border-box;
- padding-bottom: 38px;
- .task-rules-button {
- text-align: right;
- margin: 15px;
- }
-
- .el-select {
- margin: 3px 8px;
- min-width: 130px;
- width: 12%;
- }
- }
-
- .el-button--text {
- text-decoration: unset;
- }
-
- 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;
- }
- .nocamera-css {
- cursor: not-allowed;
- color: #3d68e1;
- margin-left: 10px;
- font-size: 14px;
- }
-}
-
-.task-rules-box2 {
- .task-rules-table-box {
- width: 98%;
- padding: 0px;
- box-sizing: border-box;
- }
-
- .el-input__inner {
- border: 0px !important;
- border-radius: 2px;
- padding: 0 22px;
- background-color: transparent;
- }
-
- .el-input__suffix {
- right: 8px;
- }
- span {
- cursor: pointer;
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/datastack/components/DataStackInfo.vue b/src/pages/datastack/components/DataStackInfo.vue
deleted file mode 100644
index 0111608..0000000
--- a/src/pages/datastack/components/DataStackInfo.vue
+++ /dev/null
@@ -1,818 +0,0 @@
-<template>
- <div class="data-stack-info">
- <el-row>
- <el-col :span="12">
- <el-form ref="addForm" :model="form" :rules="rules" label-width="88px">
- <el-form-item label="鍚嶇О" prop="name" style="width:440px">
- <el-input v-model="form.name" size="small" :disabled="isDisabled"></el-input>
- </el-form-item>
-
- <el-form-item label="绫诲瀷" prop="type" style="width:440px">
- <el-radio v-model="form.type" :label="1" :disabled="!isAdd">瑙嗛</el-radio>
- <el-radio v-model="form.type" :label="2" :disabled="!isAdd">鍥剧墖</el-radio>
- <el-radio v-model="form.type" :label="3" :disabled="!isAdd">闊抽</el-radio>
- <el-radio v-model="form.type" :label="4" :disabled="!isAdd">鍏朵粬鏁版嵁</el-radio>
- </el-form-item>
-
- <el-form-item
- label="澶勭悊瀹屾垚鍚庤嚜鍔ㄥ垹闄ゆ枃浠�"
- prop="isAutoDelFile"
- label-width="200px"
- style="width:440px"
- >
- <el-radio v-model="form.isAutoDelFile" :label="true" :disabled="isDisabled">鏄�</el-radio>
- <el-radio v-model="form.isAutoDelFile" :label="false" :disabled="isDisabled">鍚�</el-radio>
- </el-form-item>
-
- <el-form-item label-width="0px" style="text-align: left">
- <el-button
- size="small"
- type="primary"
- @click="onSubmit('addForm')"
- :disabled="isDisabled"
- >淇濆瓨</el-button>
- <el-button
- type="danger"
- size="small"
- @click="deleteDir"
- v-if="!isAdd"
- :disabled="isDisabled"
- >鍒犻櫎鏁版嵁鏍�</el-button>
- </el-form-item>
- </el-form>
- </el-col>
-
- <!-- 绯荤粺杩愯淇℃伅 -->
- <el-col :span="11" :offset="1">
- <div class="sysinfo-box">
- <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>
- </li>
- </ul>
- </div>
- <div
- :style="`width:80%;height:174px;position: relative;left: -12px;`"
- v-if="PollData.barCharts && PollData.barCharts.length !== 0"
- >
- <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
- </div>
- </div>
- </el-col>
- </el-row>
-
- <!-- 涓婁紶绠＄悊 -->
- <el-divider></el-divider>
- <div class="upload-menu">
- <span
- @click="activeName = 'uploaded'"
- :class="activeName === 'uploaded' ? 'active tab' : 'tab'"
- >宸蹭笂浼�</span>
- <span
- @click="activeName = 'uploading'"
- :class="activeName === 'uploading' ? 'active tab' : 'tab'"
- >姝ｅ湪涓婁紶</span>
-
- <div class="btn-right">
- <el-input
- v-model="searchInput"
- placeholder="鎼滅储"
- clearable
- style="width: 203px;"
- size="small"
- @change="handelSearchInputChange"
- >
- <i class="el-icon-search el-input__icon" style="color:#DCDFE6;padding:0px" slot="prefix"></i>
- </el-input>
-
- <!-- 鎵归噺鏆傚仠 -->
- <el-tooltip content="鎵归噺鏆傚仠" placement="bottom" popper-class="atooltip">
- <el-button
- type="text"
- class="iconfont iconzanting btn"
- @click="handleFileStatus({}, 0, true)"
- ></el-button>
- </el-tooltip>
- <!-- 鎵归噺鍒犻櫎 -->
- <el-tooltip content="鎵归噺鍒犻櫎" placement="bottom" popper-class="atooltip">
- <el-button type="text" class="el-icon-delete btn" @click="handleFileDelete({}, true)"></el-button>
- </el-tooltip>
-
- <!-- 鏂囦欢涓婁紶 -->
- <el-button type="primary" size="small" @click="handleUpload">
- 涓婁紶
- <i class="el-icon-upload el-icon--right"></i>
- </el-button>
- </div>
- </div>
-
- <!-- 宸蹭笂浼犳枃浠跺垪琛� -->
- <el-table
- ref="multipleTable"
- v-show="activeName === 'uploaded' "
- :data="fileList"
- tooltip-effect="dark"
- style="width: 99%"
- border
- :header-cell-style="{background:'#f8f8f8', color:'#222222', textAlign:'center'}"
- @select="handleSelect"
- @select-all="handleSelect"
- >
- <el-table-column type="selection" width="50" align="center" :selectable="isSelectable"></el-table-column>
- <el-table-column prop="name" label="鏂囦欢鍚�">
- <template slot-scope="{row}">
- <div :class="snapshotClass">
- <el-image
- v-show="row.snapshot_url !== ''"
- style="width: 30x; height: 30px"
- :src="'/httpImage/' + row.snapshot_url"
- fit="fill"
- >
- <div slot="error" :class="snapshotClass"></div>
- </el-image>
- </div>
-
- <el-input
- v-if="editRowId === row.id"
- :autofocus="editRowId === row.id"
- v-model="row.name"
- size="small"
- @blur="cellRenameFile(row)"
- style="display: inline-block;width: calc(100% - 50px);margin-left: 10px;"
- />
- <a
- v-else
- style="line-height: 30px;margin-left: 10px; cursor:pointer"
- @click="preview(row)"
- >{{row.name}}</a>
- </template>
- </el-table-column>
- <el-table-column prop="fileSize" label="澶у皬" width="120">
- <template slot-scope="scope">{{scope.row.size | readFileSizeUnit}}</template>
- </el-table-column>
- <el-table-column prop="duration" label="鏃堕暱" show-overflow-tooltip align="center"></el-table-column>
- <el-table-column prop="uploadTime" label="涓婁紶鏃堕棿" show-overflow-tooltip align="center">
- <template slot-scope="scope">{{scope.row.createTime | moment}}</template>
- </el-table-column>
- <el-table-column prop="status" label="澶勭悊鐘舵��" show-overflow-tooltip align="center">
- <template slot-scope="scope">{{scope.row.status | statusFormat}}</template>
- </el-table-column>
- <el-table-column label="鎿嶄綔" show-overflow-tooltip align="center">
- <template slot-scope="scope">
- <div class="btn-operation">
- <!-- 鎺掑簭 -->
- <el-button
- type="text"
- :disabled="scope.row.status == 2"
- class="el-icon-top btn"
- @click="handleSortFile(1, scope.row.id)"
- :style="scope.row.id === fileList[0].id ? 'visibility:hidden' : 'visibility:initial'"
- ></el-button>
- <!-- 鏆傚仠 -->
- <el-tooltip content="鏆傚仠澶勭悊" placement="bottom" popper-class="atooltip">
- <el-button
- type="text"
- :disabled="scope.row.status == 2"
- class="iconfont iconzanting btn"
- @click="handleFileStatus(scope.row, 0)"
- v-show="scope.row.status === 1"
- ></el-button>
- </el-tooltip>
-
- <!-- 寮�濮� -->
- <el-tooltip content="閲嶆柊寮�濮�" placement="bottom" popper-class="atooltip">
- <el-button
- type="text"
- :disabled="scope.row.status == 2"
- class="iconfont iconkaishi btn"
- @click="handleFileStatus(scope.row, 1)"
- v-show="scope.row.status === 0"
- ></el-button>
- </el-tooltip>
-
- <!-- 閲嶆柊澶勭悊 -->
- <el-tooltip content="閲嶆柊澶勭悊" placement="bottom" popper-class="atooltip">
- <el-button
- type="text"
- :disabled="scope.row.status == 2"
- class="iconfont iconzhongxinkaishi btn"
- @click="handleFileStatus(scope.row, 1)"
- v-show="scope.row.status === 9"
- ></el-button>
- </el-tooltip>
-
- <!-- 鍏朵粬鎿嶄綔 -->
- <el-dropdown @command="dropdownClick">
- <!-- <span class="iconfont icongengduo1 btn"></span> -->
- <el-button
- type="text"
- :disabled="scope.row.status == 2"
- class="iconfont icongengduo1 btn"
- ></el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item
- icon="el-icon-edit"
- :command="{cb: handleFileRename, data: scope.row}"
- >閲嶅懡鍚�</el-dropdown-item>
- <el-dropdown-item
- icon="el-icon-copy-document"
- :command="{cb: handleFileMove, data: scope.row}"
- >绉诲姩/澶嶅埗</el-dropdown-item>
- <el-dropdown-item
- icon="el-icon-delete"
- :command="{cb: handleFileDelete, data: scope.row}"
- >鍒犻櫎</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- </template>
- </el-table-column>
- </el-table>
-
- <!-- 鍒嗛〉 -->
- <div class="pagination">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleRefrashFileList"
- :current-page="page"
- :page-sizes="[5, 10, 15, 20]"
- :page-size="size"
- style="position:absolute;right:10px;bottom:5px"
- :total="total"
- layout="total, sizes, prev, pager, next"
- ></el-pagination>
- </div>
-
- <!-- 鏂囦欢涓婁紶缁勪欢 -->
- <file-uploader ref="uploader" v-show="activeName === 'uploading'" />
-
- <!-- 鏂囦欢棰勮 -->
- <el-dialog title="鏌ョ湅鏂囦欢" :visible.sync="previewDialog" width="500px">
- <video :src="videoUrl" controls style="margin-top: 12px;">鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
- </el-dialog>
-
- <el-dialog title="绉诲姩/澶嶅埗" :visible.sync="fileDialog" width="500px">
- <p style="margin:0px 0px 20px 0px">璇烽�夋嫨鎮ㄦ兂澶嶅埗/绮樿创鍒扮殑 鏁版嵁鏍堬細</p>
- <span class="iconfont iconwenjian" style="color:#3d68e1; margin-right:5px"></span>
- <el-select v-model="targetDir" placeholder="璇烽�夋嫨鐩爣鏂囦欢澶�" size="mini">
- <el-option v-for="item in dirOptions" :key="item.id" :label="item.name" :value="item.id">
- <span class="iconfont iconwenjian"></span>
- <span style="margin-left: 10px">{{ item.name }}</span>
- </el-option>
- </el-select>
-
- <div style="margin-top:20px">
- <el-button type="primary" size="mini" @click="cellFileCopy">澶嶅埗</el-button>
- <el-button type="primary" size="mini" @click="cellFileMove">绉诲姩</el-button>
- <el-button type="info" size="mini" @click="fileDialog = false">鍙栨秷</el-button>
- </div>
- </el-dialog>
- </div>
-</template>
-
-<script>
-import {
- getDirDetails,
- saveDir,
- sortFile,
- updateStatus,
- delDir,
- deleteLocalFile,
- findAllFileByStackId,
- renameFile,
- moveFile,
- copyFile
-} from "@/api/localVedio";
-
-import { changeRunType } from "@/api/pollConfig";
-
-import InfoCard from "./infoCard"
-import eChartsBar from '@/components/subComponents/eChartsBar'
-import FileUploader from '@/components/subComponents/FileUpload'
-
-export default {
- name: "DataStackInfo",
- components: {
- InfoCard,
- eChartsBar,
- FileUploader
- },
- props: {
- cameraList: {
- default: () => {
- return [];
- },
- type: Array
- }
- },
- filters: {
- statusFormat(value) {
- let statusCode = {
- "-1": "宸插垹闄�",
- "0": "鏆傚仠澶勭悊",
- "1": "绛夊緟澶勭悊",
- "2": "澶勭悊涓�",
- "9": "澶勭悊瀹屾垚"
- }
- return statusCode[value];
- },
- readFileSizeUnit(value) {
- let UNITS = [' B', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB'];
- let format = function (value, power) {
- return (value / Math.pow(1024, power)).toFixed(2) + UNITS[power];
- };
-
- value = parseFloat(value, 10);
- for (var i = 0; i < UNITS.length; i++) {
- if (value < Math.pow(1024, i)) {
- if (UNITS[i - 1]) {
- return format(value, i - 1);
- }
- return value + UNITS[i];
- }
- }
- return format(value, i - 1);
- }
- },
- computed: {
- snapshotClass() {
- let classs = ["snapshot"];
- if (this.form.type === 1) {
- classs.push("snapshot-video")
- } else if (this.form.type === 2) {
- classs.push("snapshot-image")
- } else if (this.form.type === 3) {
- classs.push("snapshot-audio")
- } else {
- classs.push("snapshot-files")
- }
-
- return classs;
- },
- dirOptions() {
- return this.DataStackPool.dirs.filter(dir => {
- return dir.id !== this.DataStackPool.selectedDir.id
- })
- }
- },
- data() {
- return {
- videoUrl: "",
- previewDialog: false,
- fileDialog: false,
- isDisabled: true,
- videoItem: null,
- visibilityState: true,
- multipleSelection: [],
- searchInput: "",
- form: {
- id: ""
- },
- fileList: [],
- // 璁板綍娣诲姞鐘舵��
- isAdd: false,
- addParentId: "",
- rules: {
- dirName: [
- { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
- ]
- },
- activeName: "uploaded",
- page: 1,
- size: 10,
- total: 0,
- taskUid: 0,
- editRowId: "",
- timer: 0,
- targetDir: "",
- targetFile: ""
- };
- },
- mounted() {
- this.initFormData();
- },
- beforeDestroy() {
- this.taskUid = 0;
- },
- methods: {
- preview(row) {
- if (this.form.type === 1) {
- this.previewDialog = true;
- this.videoUrl = "/files/" + row.identifier + ".mp4"
- }
- },
- // 娓呯┖杈撳叆妗�
- initFormData() {
- this.form = {
- enable: false,
- id: "",
- isAutoDelFile: false,
- name: "",
- sort: 0,
- status: 0,
- type: 1
- };
- },
- // 娣诲姞璁惧
- addDir(node) {
- this.isAdd = true;
- this.isDisabled = false;
- this.initFormData();
- },
- selectDir(node) {
- if (node.id === "") {
- return
- }
-
- this.isDisabled = false;
- this.isAdd = false;
- this.videoItem = null;
- this.$refs.addForm.resetFields();
- // this.initFormData();
- // this.$refs.addForm.clearValidate();
- this.form = { ...node };
- delete this.form.createTime;
- delete this.form.updateTime;
- delete this.form.status;
-
- this.fileList = [];
- this.searchInput = "";
- this.page = 1;
- this.size = 10;
- this.total = 0;
- this.multipleSelection = []; // 娓呯┖閫変腑鐘舵��
- this.initFetchListTask();
- },
- initFetchListTask() {
- const uid = Math.round(Math.random() * 1000);
- this.taskUid = uid;
- this.timingtask(uid);
- },
- timingtask(uid) {
- if (uid !== this.taskUid || this.form.id === "") {
- return;
- }
-
- this.fetchFileList();
-
- let _this = this;
- this.timer = setTimeout(() => {
- _this.timingtask(uid);
- }, 2 * 1000);
- },
- fetchFileList() {
- findAllFileByStackId({ name: this.searchInput, stackId: this.form.id, page: this.page, size: this.size, type: 0 }).then(rsp => {
- if (rsp && rsp.success && rsp.data.total > 0) {
- this.fileList = rsp.data.dataList;
- this.total = rsp.data.total;
-
- // 瀹氭椂鍒锋柊浼氭竻绌洪�変腑鐘舵�侊紝鍦ㄨ繖閲屾仮澶�
- this.fileList.forEach(row => {
- if (this.multipleSelection.indexOf(row.id) !== -1) {
- this.$nextTick(() => {
- this.$refs.multipleTable.toggleRowSelection(row);
- })
- }
- });
- }
- }).catch(err => {
- console.log(err)
- })
-
- },
-
- // 淇濆瓨
- onSubmit(formName) {
- this.$refs[formName].validate(async valid => {
- if (valid) {
- saveDir(this.form).then(rsp => {
- if (rsp.success) {
- this.$notify({
- type: "success",
- message: "鏁版嵁鏍堜俊鎭繚瀛樻垚鍔燂紒"
- });
- this.DataStackPool.fetchFiles();
- } else {
- this.$notify({
- type: "error",
- message: "鏁版嵁鏍堜俊鎭繚瀛樺け璐ワ紒"
- });
- }
- })
- }
- });
- },
- // 鍒犻櫎鎽勫儚鏈�
- deleteDir() {
- this.$confirm("鏄惁鍒犻櫎姝ゆ枃浠跺す锛�", {
- center: true,
- cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure"
- }).then(() => {
- delDir(this.form.id).then(res => {
- if (res.success) {
- this.initFormData();
- this.$notify({
- type: "success",
- message: "鍒犻櫎鎴愬姛锛�"
- });
- this.DataStackPool.fetchFiles();
- this.DataStackPool.selectedDir = {};
- } else {
- this.$notify({
- type: "error",
- message: "鍒犻櫎澶辫触锛�"
- });
- }
- }).catch(err => {
- this.$notify({
- type: "error",
- message: "鍒犻櫎澶辫触锛�"
- });
- });
- });
- },
- handleTabClick(tab, event) {
- console.log(tab, event);
- },
- handleSelect(val) {
- this.multipleSelection = val.map(row => {
- return row.id;
- });
- },
- handelSearchInputChange(val) {
- this.multipleSelection = [];
- },
- handleUpload() {
- console.log(this.$refs.uploader.$refs.button.$refs.btn.click())
- },
- handleRefrashFileList(val) {
- this.page = val;
- this.multipleSelection = [];
- this.fetchFileList();
- },
- handleSizeChange(val) {
- this.size = val;
- this.multipleSelection = [];
- this.fetchFileList();
- },
- async handleSortFile(direct, id) {
- let res = await sortFile({
- id: id,
- direct: direct
- })
- if (res && res.success) {
- this.fetchFileList();
- this.$notify({
- type: "success",
- message: "鏂囦欢鎺掑簭鎴愬姛锛�"
- })
- }
- },
- async handleFileStatus(row, status, multi = false) {
- let ids = this.multipleSelection;
- if (!multi) {
- ids = [row.id];
- }
- if (!ids.length) {
- this.$notify({
- type: "error",
- message: "鏈�変腑鏂囦欢"
- })
- return
- }
- try {
- let res = await updateStatus({
- ids: ids,
- status: status
- })
- if (res && res.success) {
- this.fetchFileList();
- this.$notify({
- type: "success",
- message: "鍒囨崲鏂囦欢澶勭悊鐘舵�佹垚鍔�"
- })
- }
- } catch {
- console.log("err")
- }
- },
- dropdownClick(cmd) {
- cmd.cb(cmd.data);
- },
- handleFileDelete(rows, multi = false) {
- let ids = this.multipleSelection;
- if (!multi) {
- ids = [rows.id];
- }
- if (!ids.length) {
- this.$notify({
- type: "error",
- message: "鏈�変腑鏂囦欢"
- })
- return
- }
- this.$confirm('鎻愮ず锛氱‘瀹氬垹闄よ鏂囦欢鍚楋紵', {
- center: true,
- cancelButtonClass: 'comfirm-class-cancle',
- confirmButtonClass: 'comfirm-class-sure'
- }).then(() => {
- deleteLocalFile({ ids: ids }).then(rsp => {
- this.$notify({
- type: "error",
- message: "鏂囦欢宸插垹闄�"
- })
- })
- }).catch(() => { })
- },
- handleFileMove(row) {
- this.targetDir = "";
- this.targetFile = row.id;
- this.fileDialog = true;
- },
- handleFileRename(row) {
- this.editRowId = row.id;
- clearTimeout(this.timer);
- this.timer = null;
- },
- cellRenameFile(row) {
- this.editRowId = "";
- renameFile({ id: row.id, name: row.name }).then(rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "鏂囦欢閲嶅懡鍚嶆垚鍔�"
- })
- } else {
- this.$notify({
- type: "error",
- message: "鏂囦欢閲嶅懡鍚嶅け璐�"
- })
- }
- if (!this.timer) {
- this.initFetchListTask();
- }
- }).catch(() => {
- if (!this.timer) {
- this.initFetchListTask();
- }
- })
- },
- isSelectable(row, rowIndex) {
- return row.status !== 2
- },
- cellFileCopy() {
- copyFile({ id: this.targetFile, stackIds: [this.targetDir] }).then(rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "澶嶅埗鎴愬姛"
- })
- this.fileDialog = false;
- } else {
- this.$notify({
- type: "error",
- message: "澶嶅埗澶辫触"
- })
- }
- })
- },
- cellFileMove() {
- moveFile({ id: this.targetFile, stackId: this.targetDir }).then(rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "绉诲姩鎴愬姛"
- })
- this.fileDialog = false;
- } else {
- this.$notify({
- type: "error",
- message: "绉诲姩澶辫触"
- })
- }
- })
- }
- }
-};
-</script>
-
-<style lang="scss">
-.data-stack-info {
- width: 100%;
- height: 100%;
- margin-left: 20px;
- overflow: auto;
- .ai-select {
- text-align: left;
- }
- .el-form-item__label {
- text-align: left;
- }
- .label {
- color: #606266;
- font-size: 14px;
- }
- .sysinfo-box {
- .card-box {
- float: left;
- }
- .chart-box {
- float: left;
- width: 50%;
- margin-top: 20px;
- margin-left: 20px;
- }
- ul {
- list-style: none;
- display: table;
- width: 100%;
- li {
- display: table-cell;
- text-align: center;
- }
- }
- }
- .el-tabs__content {
- padding: unset !important;
- }
-
- .upload-menu {
- height: 40px;
- width: 100%;
- text-align: left;
-
- .tab {
- padding: 10px;
- font-size: 14px;
- cursor: pointer;
- margin-right: 40px;
- }
-
- .active {
- border-bottom: solid 2px #3d68e1;
- }
-
- .icon {
- font-size: 20px;
- margin: 0px 10px;
- }
-
- .btn-right {
- float: right;
- margin-top: -5px;
- margin-right: 10px;
- .btn {
- cursor: pointer;
- font-size: 20px;
- margin: 0px 5px;
- }
- .btn:hover {
- color: #3d68e1;
- }
- }
- }
- .btn-operation {
- .btn {
- cursor: pointer;
- font-size: 20px;
- margin: 0px 5px;
- }
- .btn:hover {
- color: #3d68e1;
- }
- }
- .pagination {
- height: 40px;
- position: relative;
- }
- .snapshot {
- display: inline-block;
- width: 30px;
- height: 30px;
- vertical-align: middle;
- }
- .snapshot-video {
- background: url("/public/images/test/video.png");
- background-repeat: round;
- }
- .snapshot-image {
- background: url("../../../assets/img/image.png");
- background-repeat: round;
- }
- .snapshot-audio {
- background: url("../../../assets/img/audio.png");
- background-repeat: round;
- }
- .snapshot-files {
- background: url("../../../assets/img/files.png");
- background-repeat: round;
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/datastack/components/LinkageRule.vue b/src/pages/datastack/components/LinkageRule.vue
deleted file mode 100644
index 2d5e609..0000000
--- a/src/pages/datastack/components/LinkageRule.vue
+++ /dev/null
@@ -1,602 +0,0 @@
-<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>
- </p>
- <!-- <swiper :options="swiperTaskOption" class="swiper-box-container swiper-no-swiping">
- <span class="task-tip" v-show="tableRuleList.length == 0 ">鏆傛棤绠楁硶锛岃鍦ㄧ嫭绔嬭鍒欎腑閫夋嫨绠楁硶</span>
- <swiper-slide v-for="(item, index) in tableRuleList" :key="index">
- <div class="item-card">
- <p style="text-align: right; width:100%; height:25px"></p>
- <p style="color: #0066EB;padding-top: 20px;'">
- <b>{{ item.scene_name }}</b>
- </p>
- </div>
- </swiper-slide>
- </swiper>
-
- <div class="pre-border" v-show="tableRuleList.length > 4 ">
- <div class="icon-btn" slot="button-prev">
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="next-border" v-show="tableRuleList.length > 4 ">
- <div class="icon-btn" slot="button-next">
- <i class="iconfont iconyou1"></i>
- </div>
- </div>-->
- <div>
- <div class="slide-scene">
- <span class="task-tip" v-if="tableRuleList.length == 0 ">鏆傛棤绠楁硶锛岃鍦ㄧ嫭绔嬭鍒欎腑閫夋嫨绠楁硶</span>
- <slide-scene :sceneData="tableRuleList"></slide-scene>
- </div>
- <!-- <slide-scene :sceneData="Camera.rules"></slide-scene> -->
- <!-- 绯荤粺淇℃伅 -->
- <div class="top-right">
- <sysinfo
- v-if="showSysInfo"
- style="margin-left: 25px;margin-top: -10px;"
- :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
- :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
- />
- </div>
- </div>
- </div>
-
- <div class="bottom">
- <div
- style="width: calc(100% + 80px);height: 10px;background-color: #E9EBF2;p;position:relative;left:-50px"
- ></div>
- <div class="bottom-right">
- <div class="draw-and-time-box">
- <div class="draw-box">
- <p style="text-align:left;padding: 10px 0px 0px 0px;box-sizing: border-box;">
- <b style="font-size: 14px">鏌ョ湅鍖哄煙</b>
- </p>
- <div class="img-box">
- <span class="camera-tip" v-show="swipercanvasData.length == 0 ">鏆傛棤鍖哄煙锛岃鑷冲皯閫夋嫨2涓憚鍍忔満</span>
- <!-- swiper 灞曠ず -->
- <swiper
- ref="swiper"
- :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-background="rgba(0, 0, 0, 0.8)"
- :divId="data.cameraId"
- :isShowDrawArrow="true"
- :isLink="true"
- :disabled="false"
- :loading="data.loading"
- :snapshot_url="data.baseImg"
- :canvasDataShow="data.canvasData"
- :currentCameraId="data.cameraId"
- @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>
-
- <!-- 鍦烘櫙瑙勫垯 -->
- <scene-rule
- linkRule
- :seletedCameras="Carmeras"
- :tableRuleList="tableRuleList"
- :onSaveScene="saveSceneRule"
- @delete-rule="showRules"
- ></scene-rule>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import {
- saveLinkScene,
- getLinkSceneRule,
-} from '@/api/scene'
-
-import VideoRuleData from "@/Pool/VideoRuleData";
-import polygonCanvas from "@/components/canvas";
-import TimeSlider from "./TimeSlider";
-import Sysinfo from "./SystemInfo"
-import SceneRule from "./SceneRule";
-import SlideScene from "./scene/SlideScene";
-
-export default {
- components: {
- TimeSlider,
- polygonCanvas,
- SceneRule,
- Sysinfo,
- SlideScene
- },
- computed: {
- selectedCameraIds() {
- let ids = [];
- if (this.TreeDataPool.treeActiveName == 'dataStack') {
- if (this.TreeDataPool.checkedLocalVedio.length > 0) {
- ids = this.TreeDataPool.checkedLocalVedio.map(i => {
- return i.id;
- })
-
- }
- } else {
- if (this.TreeDataPool.selectedNodes.length > 0) {
- ids = this.TreeDataPool.selectedNodes;
- }
- }
-
- return ids;
- }
- },
- data() {
- return {
- loading: false,
- Carmeras: [],
- Camera: new VideoRuleData(),
- tasksTable: {},
- swipercanvasData: [],
- seqNumber: 0,
- tableRuleList: [],
- swiperIndex: 0,
- swiperOption: {
- grabCursor: true,
- pagination: {
- el: ".swiper-pagination",
- type: "fraction"
- },
- 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"
- }
- },
- showSysInfo: false
- };
- },
- watch: {
- Carmeras: {
- handler(newVal, oldVal) {
- this.setSwiperData();
- },
- deep: true
- }
- },
-
- methods: {
- swiperSlideChange() {
- this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
- },
- initCameraData() {
- this.$nextTick(() => {
- this.Carmeras = [];
- this.loading = false;
- this.showSysInfo = true
- if (this.TreeDataPool.treeActiveName == 'dataStack') {
- this.TreeDataPool.checkedLocalVedio.forEach(camera => {
- this.Carmeras.push(new VideoRuleData(camera.id));
- });
- } else {
- this.TreeDataPool.selectedNodes.forEach(camera => {
- this.Carmeras.push(new VideoRuleData(camera));
- });
- }
- this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
- this.showRules();
- })
- },
- setSwiperData() {
- let swipers = [];
- let carmeras = this.Carmeras;
- for (let i = 0; i < carmeras.length; i++) {
- swipers = swipers.concat({
- cameraId: carmeras[i].cameraId,
- name: carmeras[i].camearInfo.name,
- baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined,
- canvasData: carmeras[i].canvasData,
- loading: carmeras[i].loading,
- });
- }
- this.swipercanvasData = swipers;
- },
- getCanvasData() { },
- showRules() {
- this.tableRuleList = [];
-
- if (this.selectedCameraIds.length > 0) {
- getLinkSceneRule({ cameraIds: this.selectedCameraIds }).then(
- rsp => {
- if (rsp && rsp.success) {
-
- this.tableRuleList = rsp.data;
-
- // 缁熶竴瑙勫垯缂栬緫鐨勬暟鎹粨鏋�
- for (let i = 0; i < this.tableRuleList.length; i++) {
- this.tableRuleList[i].group_rules = this.tableRuleList[i].rules;
- }
- }
- // this.TreeDataPool.fetchTreeData();
- }
- );
- }
-
- },
-
- saveSceneRule(groupRule) {
- const payload = { ...groupRule }
- payload.cameraIds = this.selectedCameraIds;
-
- saveLinkScene(payload).then(rsp => {
- if (rsp && rsp.success) {
- //this.Camera.update();
- this.initCameraData();
- this.$notify({
- type: "success",
- message: "浠诲姟淇濆瓨鎴愬姛锛�"
- });
- } else {
- this.$notify({
- type: "error",
- message: rsp.data
- });
- }
- }).catch(err => {
- this.$message({
- type: "error",
- message: "淇濆瓨澶辫触锛�" + err.data
- });
- });
- },
- changeLoading(params) {
- this.loading = params
- }
- }
-};
-</script>
-<style lang="scss">
-.s-linkage-rules {
- width: 100%;
- height: 100%;
- position: relative;
- .top {
- width: 100%;
- height: 174px;
- position: relative;
- top: 0;
- .swiper-box {
- height: 100%;
- float: left;
- width: 48%;
- margin-top: -10px;
- position: relative;
- }
- .swiper-container {
- position: initial;
- min-width: 472px;
- width: 80%;
-
- // 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;
- }
- }
- .item-card:hover {
- .mask {
- display: block;
- }
- }
- }
- .swiper-pre-border,
- .swiper-next-border {
- width: 40px;
- height: 40px;
- position: absolute;
- background: #8888;
- top: 35%;
- z-index: 99;
- border-radius: 4em;
- outline: none;
- .icon-btn {
- color: rgb(255, 255, 255);
- text-align: center;
- line-height: 38px;
- cursor: pointer;
- }
- }
- .swiper-pre-border {
- left: 10px;
- }
- .swiper-pre-border:hover {
- background: #666;
- }
- .swiper-next-border {
- right: 10px;
- }
- .swiper-next-border:hover {
- background: #666;
- }
- .top-right {
- float: right;
- width: 52%;
- height: 144px;
- }
- .task-css {
- text-align: left;
- margin-bottom: 14px;
- }
- }
-
- .bottom {
- width: 100%;
- height: calc(100% - 190px);
- position: absolute;
- top: 190px;
- .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 0px;
- box-sizing: border-box;
- .draw-and-time-box {
- height: 430px;
- width: 100%;
- .draw-box,
- .time-box {
- float: left;
- width: 50%;
- height: 100%;
- .img-box {
- height: calc(100% - 32px);
- width: 100%;
- // padding: 5px;
- box-sizing: border-box;
- display: flex;
- // justify-content: center;
- // align-items: center;
- position: relative;
- overflow: hidden;
- .refresh-btn {
- position: absolute;
- right: 10px;
- top: 10px;
- }
- img {
- width: 90%;
- padding: 5px;
- box-sizing: border-box;
- }
- .swiper-box-container2 {
- width: 100%;
- //padding: 8px 8px 0px 8px;
- .el-card__body {
- height: 100%;
- padding: 0px;
- }
- height: calc(100% - 10px);
- .info {
- width: 100%;
- height: 100%;
- .info-left {
- width: 50%;
- height: 100%;
- float: left;
- img {
- width: 100%;
- }
- }
- .info-right {
- width: 50%;
- height: 100%;
- float: left;
- box-sizing: border-box;
- padding: 10px;
- p {
- padding: 4px 0px;
- }
- .infoIcon {
- height: 24px;
- cursor: pointer;
- i {
- margin: 5px;
- font-size: 22px;
- }
- }
- }
- }
- }
- .swiper-local-prev,
- .swiper-local-next {
- width: 40px;
- height: 40px;
- position: absolute;
- background: #8888;
- top: 40%;
- 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: 10px;
- }
- .swiper-local-prev:hover {
- background: #666;
- }
- .swiper-local-next {
- left: 90%;
- }
- .swiper-local-next:hover {
- background: #666;
- }
- .camera-tip {
- position: relative;
- width: 300px;
- top: 40%;
- left: 40%;
- font-size: 12px;
- color: #cccccc;
- font-family: PingFangSC-Regular;
- }
- }
- }
- .draw-box {
- width: 576px;
- }
- }
- }
- .bottom-right::-webkit-scrollbar {
- width: 0 !important;
- }
- }
-
- .add-btn {
- color: #3d68e1;
- margin-left: 10px;
- font-size: 14px;
- cursor: pointer;
- }
- .add-btn:hover {
- color: #2249b4;
- }
- .task-tip {
- font-family: PingFangSC-Regular;
- font-size: 12px;
- color: #cccccc;
- margin-top: 10%;
- margin-left: 38%;
- }
-}
-</style>
-<style lang="scss" scoped>
-.el-loading-spinner {
- background: url("../../../assets/gif/loading.gif") no-repeat;
- top: 50%;
- margin-top: -21px;
- width: calc(100% - 260px) !important;
- text-align: center;
- position: absolute;
- margin-left: 260px;
- .el-loading-text {
- color: #3d68e1;
- margin: 3px 0;
- font-size: 14px;
- text-align: left;
- margin-top: 22px !important;
- padding-left: 30px;
- }
-}
-</style>
diff --git a/src/pages/datastack/components/SceneRule.vue b/src/pages/datastack/components/SceneRule.vue
deleted file mode 100644
index 13fcb07..0000000
--- a/src/pages/datastack/components/SceneRule.vue
+++ /dev/null
@@ -1,519 +0,0 @@
-<template>
- <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>
- </div>
-
- <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-select
- v-model="sceneForm.alarm_level"
- placeholder="璇烽�夋嫨"
- size="mini"
- style="width:250px"
- >
- <el-option label="涓�绾�" :value="1"></el-option>
- <el-option label="浜岀骇" :value="2"></el-option>
- <el-option label="涓夌骇" :value="3"></el-option>
- <el-option label="鍥涚骇" :value="4"></el-option>
- <el-option label="浜旂骇" :value="5"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="鏃堕棿娈�">
- <el-select v-model="sceneForm.time_rule_id" placeholder="璇烽�夋嫨" size="mini">
- <el-option
- v-for="item in VideoManageData.TimeRules"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- </div>
- <div class="right">
- <el-form-item label="鍦烘櫙鎻忚堪">
- <el-input v-model="sceneForm.desc" type="textarea" size="mini"></el-input>
- </el-form-item>
- </div>
- </div>
- <!-- <el-row>
- <el-col :span="8">-->
- <!-- <el-form-item label="鍦烘櫙妯℃澘">
- <el-select
- v-model="sceneForm.template_id"
- placeholder="璇烽�夋嫨"
- @change="selectTemplate"
- size="mini"
- style="width:200px"
- >
- <el-option
- v-for="item in sceneTemplates"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>-->
- <!-- </el-col>
- <el-col :span="8">
- <el-form-item label="鏃堕棿娈�">
- <el-select
- v-model="sceneForm.time_rule_id"
- placeholder="璇烽�夋嫨"
- size="mini"
- style="width:200px"
- >
- <el-option
- v-for="item in VideoManageData.TimeRules"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>-->
- <!-- <el-row>
- <el-col :span="8">
- <el-form-item label="鍦烘櫙鍚嶇О">
- <el-input v-model="sceneForm.scene_name" size="mini" style="width:200px"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鍦烘櫙鎻忚堪">
- <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-col :span="8">
- <el-form-item label="浜嬩欢绛夌骇">
- <el-select
- v-model="sceneForm.alarm_level"
- placeholder="璇烽�夋嫨"
- size="mini"
- style="width:200px"
- >
- <el-option label="涓�绾�" :value="1"></el-option>
- <el-option label="浜岀骇" :value="2"></el-option>
- <el-option label="涓夌骇" :value="3"></el-option>
- <el-option label="鍥涚骇" :value="4"></el-option>
- <el-option label="浜旂骇" :value="5"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>-->
-
- <scene-editor
- ref="sceneEditor"
- :isLinkRule="linkRule"
- :Cameras="seletedCameras"
- :ruleList="templateRules"
- @sdkNameChange="getSceneName"
- ></scene-editor>
-
- <el-form-item style="width: 60%;min-width: 1048px;">
- <el-button size="mini" @click="editScene = false">鍙栨秷</el-button>
- <el-button type="primary" size="mini" @click="saveSceneRule">淇濆瓨</el-button>
- </el-form-item>
- </el-form>
-
- <!-- 瑙勫垯鍒楄〃 -->
- <div class="edit-rule-table" v-show="!editScene">
- <div class="task-rules-table-box">
- <el-table
- :data="tableRuleList"
- border
- style="width: 100%"
- :cell-style="cellStyle"
- :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
- >
- <el-table-column label="搴忓彿" type="index" align="center" width="50"></el-table-column>
- <el-table-column
- label="鍦烘櫙鍚嶇О"
- prop="scene_name"
- width="120"
- align="center"
- show-overflow-tooltip
- ></el-table-column>
- <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="desc" align="center" min-width="150"></el-table-column>
- <!-- <el-table-column label="鐘舵��" align="center" width="90">
- <template slot-scope="scope">
- <el-switch v-model="scope.row.defence_state" @change="updateDefence(scope.row)"></el-switch>
- </template>
- </el-table-column>-->
- <el-table-column label="浜嬩欢绛夌骇" align="center" width="120">
- <template slot-scope="scope">
- <span>{{scope.row.alarm_level | alarmLevel }}</span>
- </template>
- </el-table-column>
- <el-table-column label="鎿嶄綔" fixed="right" align="center" width="100">
- <template slot-scope="scope">
- <el-tooltip content="缂栬緫" placement="top" popper-class="atooltip">
- <i
- class="iconfont iconbianji1 btn-icon"
- style="font-size: 28px;"
- @click="handleEdit(scope.row)"
- ></i>
- </el-tooltip>
- <el-tooltip content="鍒犻櫎" placement="top" popper-class="atooltipgroup_">
- <i
- class="iconfont iconshanchu4 btn-icon"
- style="font-size: 28px; color:red;"
- @click="handleDelScene(scope.row)"
- ></i>
- </el-tooltip>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import {
- getAllTemplate,
- saveCameraScene,
- getCameraSceneRule,
- deleteCameraScene
-} from '@/api/scene'
-import RuleEditor from "@/components/subComponents/RuleEditor";
-import SceneEditor from "./scene/Editor";
-
-export default {
- name: "SceneRuleEditor",
- components: {
- SceneEditor
- },
- props: {
- seletedCameras: {
- type: Array,
- default: () => {
- return []
- }
- },
- tableRuleList: {
- type: Array,
- default: () => {
- return []
- }
- },
- onSaveScene: {
- type: Function,
- default: () => false
- },
- linkRule: {
- type: Boolean,
- default: false
- }
- },
- filters: {
- alarmLevel(level) {
- switch (level) {
- case 1:
- return "涓�绾�";
- case 2:
- return "浜岀骇";
- case 3:
- return "涓夌骇";
- case 4:
- return "鍥涚骇";
- case 5:
- return "浜旂骇";
- }
- }
- },
- watch: {
- tableRuleList(n, o) {
- this.editScene = false;
- }
- },
- mounted() {
- // window.addEventListener('resize', this.windowSizeChange)
- this.updateTemplates();
- },
- data() {
- return {
- editScene: false,
- sceneTemplates: [],
- sceneForm: {
- alarm_level: 1,
- enable: true,
- scene_name: "",
- desc: "",
- template_id: "",
- time_rule_id: "",
- },
- templateSdks: [],
- templateRules: "",
- ruleList: [],
- sceneNameStore: []
- }
- },
- 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
- }
- }
- }
- return arr;
- },
- getSceneName(sdk_name) {
- this.sceneNameStore.push(sdk_name)
-
- if (!this.sceneForm.scene_name.trim()) {
- this.sceneForm.scene_name = sdk_name
- }
- // }else if(this.sceneForm.scene_name == store[store.length-2]){
- // //鍦烘櫙鍚嶇О鍙栫殑鏄笂涓�娆′紶杩囨潵鐨勭畻娉曞悕绉帮紝鍒欓』鏇存柊涓烘渶鏂颁紶鏉ョ殑绠楁硶鍚�
- // this.sceneForm.scene_name = sdk_name
- // }
- },
- cleanForm() {
- this.sceneForm = {
- alarm_level: 1,
- enable: true,
- scene_name: "",
- desc: "",
- template_id: "",
- time_rule_id: "",
- };
- this.$refs.sceneEditor.cleanRule();
- },
- handleCreate() {
-
- 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) {
- this.$notify({
- type: "warning",
- message: `璇烽�夋嫨1涓憚鍍忔満!`
- });
- return false;
- } else if (this.TreeDataPool.treeActiveName == 'dataStack' && !this.DataStackPool.selectedDir.id) {
- this.$notify({
- type: "warning",
- message: `璇峰厛閫夋嫨鏁版嵁鏍堟枃浠跺す!`
- });
- return false;
- }
- this.editScene = true;
- this.cleanForm();
- console.log(this.tableRuleList)
-
- //鍒濆鍖栧満鏅悕绉�
- var pattern = /^鍦烘櫙\s*\d+\s*$/;
- var tempArr = [];
- 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;
- //鍒濆鍖栨椂闂存
- this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
-
- },
- handleEdit(scene) {
-
- this.sceneForm = scene;
- this.editScene = true;
- let selectedTpl = {};
- this.sceneTemplates.forEach((t) => {
- if (t.id == this.sceneForm.template_id) {
- selectedTpl = t
- }
- })
- this.templateSdks = selectedTpl.sdks;
-
- this.templateRules = JSON.stringify(scene.rules);
- this.$refs.sceneEditor.editHandle(this.templateRules);
-
- },
- updateTemplates() {
- getAllTemplate().then(rsp => {
- if (rsp && rsp.success) {
- this.sceneTemplates = rsp.data;
- }
- })
- },
- selectTemplate() {
- let selectedTpl = {};
- this.sceneTemplates.forEach((t) => {
- if (t.id == this.sceneForm.template_id) {
- selectedTpl = t;
- }
- })
-
- // 璁剧疆榛樿鍙傛暟, 鏃堕棿瑙勫垯鍙栫涓�涓�
- this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
- this.sceneForm.scene_name = selectedTpl.name;
- this.sceneForm.desc = selectedTpl.desc;
-
- this.templateSdks = selectedTpl.sdks;
- this.templateRules = selectedTpl.rules;
- },
- validateForm() {
-
- if (!this.sceneForm.scene_name.trim()) {
- this.$notify({
- type: 'warning',
- message: '鍦烘櫙鍚嶄笉鑳戒负绌�'
- });
- return false
- } else if (!this.sceneForm.alarm_level) {
- this.$notify({
- type: 'warning',
- message: '浜嬩欢绛夌骇涓嶈兘涓虹┖'
- });
- return false
- } else if (!this.sceneForm.time_rule_id) {
- this.$notify({
- type: 'warning',
- message: '鏃堕棿娈典笉鑳戒负绌�'
- });
- return false
- }
- return true
- },
- saveSceneRule() {
-
- if (!this.validateForm()) {
- return
- }
- let editorResp = this.$refs.sceneEditor.submitRule();
- this.sceneForm.rules = editorResp.rules;
- this.sceneForm.id = editorResp.id;
- this.sceneForm.group_text = editorResp.text;
- this.onSaveScene(this.sceneForm);
- },
- handleDelScene(groupRule) {
- this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛岃鏉¤鍒欏皢澶辨晥锛屾槸鍚﹀垹闄わ紵", {
- center: true,
- cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure"
- })
- .then(() => {
- deleteCameraScene(groupRule.id).then(res => {
- this.$emit("delete-rule");
- if (res && res.success) {
- this.$notify({
- type: "success",
- message: "鍒犻櫎鎴愬姛"
- });
-
- } else {
- this.$notify({
- type: "error",
- message: "鍒犻櫎澶辫触锛�"
- });
- }
- });
- })
- .catch(() => { });
- },
- cellStyle(obj) {
- if (obj.column.label == '绛栫暐') {
- return 'text-align:left;padding-left:8px;'
- }
- }
- }
-}
-</script>
-
-<style lang="scss">
-.scene-edit-container {
- .scene-title {
- height: 30px;
- text-align: left;
- margin: 10px 0px;
- }
- .flex-form {
- display: flex;
- width: 80%;
- padding-left: 25px;
- .left,
- .right {
- width: 43.3%;
- min-width: 550px;
- .el-form-item {
- margin-bottom: 16px;
- }
- .el-form-item__label {
- text-align: left;
- }
- .el-form-item__content {
- text-align: left;
- .el-input,
- .el-select {
- width: 400px !important;
- }
- }
- textarea {
- height: 143px;
- }
- }
- .right {
- padding-top: 6px;
- }
- }
- .edit-rule-table {
- .task-rules-table-box {
- width: 98%;
- padding: 0px;
- box-sizing: border-box;
- }
- .el-form-item {
- width: calc(100% - 30px);
- }
- .el-input__inner {
- border: 0px !important;
- border-radius: 2px;
- padding: 0 22px;
- background-color: transparent;
- }
-
- .el-input__suffix {
- right: 8px;
- }
- span {
- cursor: pointer;
- }
- .cell {
- padding-left: 0 !important;
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/datastack/components/SeparateRules.vue b/src/pages/datastack/components/SeparateRules.vue
deleted file mode 100644
index b4e507c..0000000
--- a/src/pages/datastack/components/SeparateRules.vue
+++ /dev/null
@@ -1,872 +0,0 @@
-<template>
- <div class="s-separate-rules">
- <div class="ai">
- <div class="check-area">
- <el-row class="mt5">
- <el-col :span="24">
- <div class="ai-select">
- <div style="float:left;" v-show="cameraType === 'camera'">
- <span>
- <span class="label">瑙嗛鍒嗘瀽澶勭悊</span>
- <el-switch
- style="margin-left: 10px;"
- v-model="Camera.analytics"
- @change="pollEnable"
- :disabled="!Camera.cameraId"
- ></el-switch>
- </span>
- </div>
-
- <div
- v-if="Camera.analytics"
- style="float:left;margin-left: 5%;"
- class="flex-box"
- v-show="cameraType === 'camera'"
- >
- <span class="label" style="margin-right:10px;line-height: 22px;">澶勭悊鏂瑰紡</span>
- <toggle-button
- :value="Camera.dealWay"
- :width="60"
- :labels="{checked: '瀹炴椂', unchecked: '杞'}"
- :color="{checked: '#3D68E1', unchecked: '#FF7733', disabled: '#CCCCCC'}"
- :sync="true"
- @change="changePoll"
- />
- </div>
-
- <div
- v-if="Camera.analytics"
- style="float:left;margin-left:5%;"
- class="flex-box"
- v-show="cameraType === 'camera'"
- >
- <span class="label" style="line-height:25px">鍒嗚鲸鐜�</span>
- <el-select
- v-model="Camera.selectResolution"
- placeholder="璇烽�夋嫨"
- size="mini"
- style="width: 134px;height: 30px;
- margin-left:10px;position: relative;bottom: 3px;"
- >
- <el-option
- v-for="item in Camera.resolutionOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </div>
-
- <div v-if="Camera.analytics" style="float:left;margin-left:5%;" class="flex-box">
- <span class="label" style="line-height:22px">鏅鸿兘璁＄畻鑺傜偣: {{ Camera.runServerName}}</span>
- </div>
-
- <div
- v-if="Camera.analytics"
- style="float:left;margin-left: 5%;line-height: 22px;"
- class="flex-box"
- >
- <span style="float:left;">绠楁硶蹇�熼�氶亾</span>
- <div class="flex-box" style="float: left;
- margin-left: 5px;">
- <el-tooltip
- effect="dark"
- content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯"
- placement="bottom"
- popper-class="atooltip"
- >
- <span
- style="color:#3D68E1;cursor: pointer;font-size:23px;"
- @click="ctrlC"
- class="iconfont iconfuzhiguize"
- ></span>
- </el-tooltip>
- <el-tooltip
- effect="dark"
- :content="!TreeDataPool.ctrlCameraId?'绮樿创绠楁硶瑙勫垯':`绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}`"
- placement="bottom"
- popper-class="atooltip"
- >
- <span
- :style="!TreeDataPool.ctrlCameraId?'cursor: not-allowed;font-size:23px;':'color:#3D68E1;font-size:23px;cursor: pointer;'"
- @click="ctrlV"
- class="iconfont iconniantie ml5"
- ></span>
- </el-tooltip>
- </div>
- </div>
- </div>
- </el-col>
- </el-row>
- </div>
- </div>
-
- <div
- style="width: calc(100% + 76px);position: absolute;left: -38px;top:38px;height: 10px;background-color: #E9EBF2;"
- ></div>
-
- <div class="top" style="top:60px;">
- <p class="task-css">
- <b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b>
- </p>
- <div>
- <slide-scene :sceneData="Camera.rules"></slide-scene>
- <div class="top-right">
- <sysinfo
- :showRealPoll="cameraType === 'camera'"
- :ShowLocalVedio="cameraType === 'dataStack'"
- v-if="showSysInfo"
- style="margin-left: 25px;margin-top:-10px"
- />
- </div>
- </div>
-
- <!-- <swiper :options="swiperOption" class="swiper-box-container">
-
- <swiper-slide v-for="(item, index) in 10" :key="index">
- <div class="item-card">
- <p style="color: #0066EB;padding-top: 20px;">
- <b>{{ item }}</b>
- </p>
- </div>
- </swiper-slide>
- </swiper>
- <div class="swiper-pre-border" >
- <div class="icon-btn" slot="button-prev">
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="swiper-next-border" >
- <div class="icon-btn" slot="button-next">
- <i class="iconfont iconyou1"></i>
- </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">
- <div class="item-card">
- <p style="color: #0066EB;padding-top: 20px;">
- <b>{{ item.scene_name }}</b>
- </p>
- </div>
- </swiper-slide>
- </swiper>
- <div class="swiper-pre-border" v-show="Camera.rules.length > 4 ">
- <div class="icon-btn" slot="button-prev">
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="swiper-next-border" v-show="Camera.rules.length > 4 ">
- <div class="icon-btn" slot="button-next">
- <i class="iconfont iconyou1"></i>
- </div>
- </div>-->
-
- <!-- 绯荤粺淇℃伅 -->
- </div>
-
- <div class="bottom" style="top:254px;">
- <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>
- </div>
- <div style="width:590px;height:16px;">
- <b
- style="font-size:14px"
- >{{ Camera.camearInfo.alias ? Camera.camearInfo.alias: Camera.camearInfo.name }}</b>
- </div>
- <div class="img-box">
- <polygon-canvas
- class="cavas"
- ref="canvas"
- v-if="showCanvas"
- v-loading="loading"
- element-loading-text="鍒锋柊涓紝璇风◢绛�..."
- element-loading-background="rgba(0, 0, 0, 0.8)"
- :isShowDrawArrow="false"
- :disabled="false"
- :snapshot_url="Camera.baseImg"
- :canvasDataShow="Camera.canvasData"
- :currentCameraId="Camera.cameraId"
- :loading="Camera.loading"
- :canvasWidth="canvasWidth"
- :canvasHeight="canvasHeight"
- @fromCanvas="getCanvasData"
- @changeLoading="changeLoading"
- @refresh="refresh"
- ></polygon-canvas>
- </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="'sep'" />
- </div>
- </div>
-
- <!-- 鍦烘櫙瑙勫垯 -->
- <scene-rule
- :seletedCameras="[Camera]"
- :tableRuleList="Camera.rules"
- :onSaveScene="saveSceneRule"
- @delete-rule="delScenRule"
- ></scene-rule>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-//import { timeSilderData } from "@/mockData/timeSilder";
-import { savePolygon } from "@/api/polygon";
-
-import {
- pasteRules
-} from '@/api/task';
-
-import {
- getAllTemplate,
- saveCameraScene,
- getCameraSceneRule,
-} from '@/api/scene'
-
-import { changeRunType } from "@/api/pollConfig";
-
-import VideoRuleData from "@/Pool/VideoRuleData";
-
-import TimeSlider from "./TimeSlider";
-import polygonCanvas from "@/components/canvas";
-import Sysinfo from "./SystemInfo";
-import SceneRule from "./SceneRule";
-import SlideScene from "./scene/SlideScene";
-
-export default {
- components: {
- TimeSlider,
- polygonCanvas,
- Sysinfo,
- SceneRule,
- SlideScene
- },
- directives: {
- focus: {
- inserted: function (el) {
- el.querySelector('input').focus()
- }
- }
- },
- computed: {
- cameraType() {
- return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack"
- }
- },
- data() {
- return {
- mockSceneData: [],
- loading: false,
- Camera: new VideoRuleData(),
- runType: -1,
- swiperOption: {
- slidesPerView: 5,
- spaceBetween: 8,
- pagination: {
- el: ".swiper-pagination",
- clickable: true
- },
- navigation: {
- nextEl: ".swiper-next-border",
- prevEl: ".swiper-pre-border"
- }
- },
- tableRuleList: [],
-
- cameraId: "",
- activeTaskIndex: 0,
- activeTaskId: "",
- booleanValue: false,
- showSysInfo: false,
- showCanvas: true,
- canvasWidth: 576,
- canvasHeight: 324
- };
- },
- mounted() {
- this.mockAsync()
- },
-
- methods: {
- 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)
- },
- drawBaseImg() {
- this.$refs.canvas.showModal();
- },
- getCanvasData(data) {
- let polyon = { ...data };
- polyon.camera_id = this.Camera.cameraId;
- savePolygon(polyon).then(rsp => {
- this.Camera.getPolygon();
- this.Camera.getCameraTask();
- });
- },
- refresh(url) {
- this.Camera.baseImg = url
- },
- // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤
- async initCameraData(id) {
- this.Camera = new VideoRuleData();
-
- if (id && id !== "") {
- this.loading = false;
- this.Camera.cameraId = id;
- await this.Camera.update();
- }
-
- this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
- this.showSysInfo = true
- // 鍒ゆ柇姝ｅ湪鎵ц瀹炴椂鎴栬�呰疆璇换鍔�
- this.PollData.CameraList.forEach(element => {
- if (element.id === this.Camera.cameraId) {
- this.runType = element.run_type;
- }
- })
-
- },
- saveSceneRule(groupRule) {
- const payload = { ...groupRule }
- payload.cameraIds = [this.Camera.cameraId];
- saveCameraScene(payload).then(rsp => {
- if (rsp && rsp.success) {
- this.Camera.update();
- this.$notify({
- type: "success",
- message: "绛栫暐淇濆瓨鎴愬姛锛�"
- });
- }
- });
- },
- delScenRule() {
- this.Camera.update();
- },
- changeLoading(params) {
- this.loading = params
- // console.log(this.loading,'changeLoading',params)
- },
- //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊
- pollEnable(row) {
- let val = 0
- if (row) {
- if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
- this.Camera.dealWay = true
- val = 1
- } else {
- this.Camera.dealWay = false
- val = 0
- }
- } else {
- this.Camera.dealWay = false
- val = -1
- }
- if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
- changeRunType({ camera_ids: [this.Camera.cameraId], run_type: val }).then(
- rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "閰嶇疆鎴愬姛"
- });
- } else {
- this.$notify({
- type: "error",
- message: "閰嶇疆澶辫触"
- });
- }
- // this.selectCamera(this.TreeDataPool.selectedNode)
- }
- );
- }
- this.TreeDataPool.fetchTreeData();
- this.PollData.statisticTaskInfo();
- },
- //瀹炴椂銆佽疆璇㈠垏鎹�
- changePoll(row) {
- //鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
- if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
- if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
- if (row.value) {
- this.Camera.dealWay = true
- } else {
- this.Camera.dealWay = false
- }
- changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then(
- rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "閰嶇疆鎴愬姛"
- });
- } else {
- this.$notify({
- type: "error",
- message: "閰嶇疆澶辫触"
- });
- }
- }
- );
- } else {
- if (this.Camera.dealWay) {
- this.Camera.dealWay = false
- changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then(
- rsp => {
- if (rsp && rsp.success) {
- this.$notify({
- type: "success",
- message: "閰嶇疆鎴愬姛"
- });
- } else {
- this.$notify({
- type: "error",
- message: "閰嶇疆澶辫触"
- });
- }
- }
- );
- }
- }
- this.TreeDataPool.fetchTreeData();
- this.PollData.statisticTaskInfo();
- }
- },
- //澶嶅埗
- ctrlC() {
- this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
- this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
- this.$notify({
- type: "success",
- message: "澶嶅埗绠楁硶鎴愬姛锛�"
- })
- },
- ctrlV() {
- if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
- this.$notify({
- type: "warning",
- message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�"
- })
- return false;
- }
- pasteRules({
- sourceId: this.TreeDataPool.ctrlCameraId,
- targetIds: [this.Camera.cameraId]
- }).then((res) => {
- // console.log(res,'澶嶅埗绠楁硶')
- if (res && res.success) {
- this.$notify({
- type: "success",
- message: "绮樿创绠楁硶鎴愬姛锛�"
- })
- this.initCameraData(this.Camera.cameraId)
- } else {
- this.$notify({
- type: "error",
- message: "绮樿创绠楁硶澶辫触锛�"
- })
- }
- }).catch(err => {
- // console.log(err,'澶嶅埗绠楁硶鎶ラ敊锛�')
- this.$notify({
- type: "error",
- message: "绮樿创绠楁硶澶辫触锛�"
- })
- })
- },
- }
-};
-</script>
-<style lang="scss">
-.s-separate-rules {
- width: 100%;
- height: 100%;
- position: relative;
- .ai {
- width: calc(100% + 76px);
- height: 38px;
- position: absolute;
- left: -38px;
- .check-area {
- width: 100%;
- height: 100%;
- float: left;
- overflow: auto;
- padding: 0 38px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
- }
- .top {
- width: 100%;
- height: 174px;
- position: relative;
- top: 60px;
- .swiper-box {
- height: 100%;
- float: left;
- width: 48%;
- margin-top: -10px;
- position: relative;
- }
- .swiper-container {
- position: initial;
- min-width: 472px;
- width: 80%;
-
- // 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;
- }
- }
- .item-card:hover {
- .mask {
- display: block;
- }
- }
- }
- .swiper-pre-border,
- .swiper-next-border {
- width: 40px;
- height: 40px;
- position: absolute;
- background: #8888;
- top: 35%;
- z-index: 99;
- border-radius: 4em;
- outline: none;
- .icon-btn {
- color: rgb(255, 255, 255);
- text-align: center;
- line-height: 38px;
- cursor: pointer;
- }
- }
- .swiper-pre-border {
- left: 10px;
- }
- .swiper-pre-border:hover {
- background: #666;
- }
- .swiper-next-border {
- right: 10px;
- }
- .swiper-next-border:hover {
- background: #666;
- }
- .top-right {
- float: right;
- width: 52%;
- height: 144px;
- }
- .task-css {
- text-align: left;
- margin-bottom: 14px;
- }
- }
- .bottom {
- width: 100%;
- height: calc(100% - 234px);
- position: absolute;
- top: 234px;
- .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 0px;
- box-sizing: border-box;
- .draw-and-time-box {
- height: 400px;
- width: 100%;
- //min-width: 1150px;
- .draw-box,
- .time-box {
- float: left;
- height: 100%;
- .img-box {
- height: calc(100% - 32px);
- //width: 90%;
- // padding: 5px;
- box-sizing: border-box;
- display: flex;
- // justify-content: center;
- // align-items: center;
- position: relative;
- overflow: hidden;
- .refresh-btn {
- position: absolute;
- right: 10px;
- top: 10px;
- }
- img {
- width: 90%;
- padding: 5px;
- box-sizing: border-box;
- }
- .swiper-box-container {
- margin-top: -10px;
- text-align: left;
- padding: 0px 8px 0px 8px;
- .el-card__body {
- height: 100%;
- padding: 0px;
- }
- height: calc(100% - 10px);
- .info {
- width: 100%;
- height: 100%;
- .info-left {
- width: 50%;
- height: 100%;
- float: left;
- img {
- width: 100%;
- }
- }
- .info-right {
- width: 50%;
- height: 100%;
- float: left;
- box-sizing: border-box;
- padding: 10px;
- p {
- padding: 4px 0px;
- }
- .infoIcon {
- height: 24px;
- cursor: pointer;
- i {
- margin: 5px;
- font-size: 22px;
- }
- }
- }
- }
- }
- .pre-border,
- .next-border {
- width: 40px;
- height: 40px;
- position: absolute;
- background: #8888;
- top: 34%;
- z-index: 99;
- border-radius: 4em;
- outline: none;
- .icon-btn {
- color: rgb(255, 255, 255);
- text-align: center;
- line-height: 38px;
- cursor: pointer;
- }
- }
- .pre-border {
- left: -9px;
- }
- .pre-border:hover {
- background: #666;
- }
- .next-border {
- right: 10px;
- }
- .next-border:hover {
- background: #666;
- }
- }
- }
- .draw-box {
- width: 576px;
- }
- .draw-box-title {
- text-align: left;
- margin-top: -3px;
- .btn-css {
- position: relative;
- left: 514px;
- margin-bottom: 3px;
- }
- }
- }
- }
- .bottom-right::-webkit-scrollbar {
- width: 0 !important;
- }
- }
-
- .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%;
- }
-
- .marker {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 10px;
- margin-right: 7px;
- background: #3d68e1;
- }
- .loadingClass {
- text-align: center;
- }
- .el-loading-spinner-div {
- }
-}
-</style>
-<style lang="scss" scoped>
-.el-dropdown-menu {
- width: 200px;
- .el-dropdown-menu__item {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-}
-.el-loading-spinner {
- background: url("../../../assets/gif/loading.gif") no-repeat;
- top: 50%;
- margin-top: -21px;
- width: calc(100% - 260px) !important;
- text-align: center;
- position: absolute;
- margin-left: 260px;
- .el-loading-text {
- color: #3d68e1;
- margin: 3px 0;
- font-size: 14px;
- text-align: left;
- margin-top: 22px !important;
- padding-left: 30px;
- }
-}
-</style>
diff --git a/src/pages/datastack/components/SystemInfo.vue b/src/pages/datastack/components/SystemInfo.vue
deleted file mode 100644
index cdd0353..0000000
--- a/src/pages/datastack/components/SystemInfo.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
- <div :class="showClass">
- <div class="card-box" :style="`width:${borderWidth}`">
- <ul>
- <li style="max-width:30px;" v-if="ShowLocalVedio">
- <div class="total-box">
- <div style="width:100%;margin-top:28px;">
- <div class="top-text">
- <em>{{"鎬荤畻鍔�"}}</em>
- </div>
- <div class="mid-text">
- <em>{{` ${PollData.channelTotal}`}}</em>
- </div>
- </div>
- </div>
- </li>
- <li style="max-width:120px" v-if="showRealPoll">
- <DataStackCard
- style="width:95%"
- title="瀹炴椂绠楀姏"
- fourTip="鏁呴殰瀵艰嚧鏈鐞�"
- fourIcon="iconicon-test21"
- :total="`${PollData.RealTimeValidCount}璺痐"
- :ValidCount="`${PollData.RealTimeSum}璺痐"
- :InValidCount="`${PollData.RealTimeInvalid}璺痐"
- :RunningCount="`${PollData.RealTimeRun}璺痐"
- :NoDeal="`${PollData.RealTimeNoDeal}璺痐"
- />
- </li>
- <li style="max-width:120px" v-if="showRealPoll">
- <DataStackCard
- title="杞绠楀姏"
- fourTip="绛夊緟杞澶勭悊"
- fourIcon="iconicon-test2"
- style="width:95%"
- :total="`${PollData.PollValidCount}璺痐"
- :ValidCount="`${PollData.PollSum}璺痐"
- :InValidCount="`${PollData.PollInvalid}璺痐"
- :RunningCount="`${PollData.PollRun}璺痐"
- :NoDeal="`${PollData.PollNoDeal}璺痐"
- />
- </li>
- <li style="max-width:120px" v-if="ShowLocalVedio">
- <!-- <local-vedio-card
- title="鏈湴绠楀姏"
- style="width:95%"
- :total="`${PollData.localVideo}閫氶亾`"
- :success="`${PollData.PollRun}璺痐"
- :warning="`${PollData.PollInvalid}璺痐"
- />-->
- <DataStackCard
- title="鏁版嵁鏍堢畻鍔�"
- style="width:95%"
- fourTip="鏈煡鍘熷洜瀵艰嚧鏈鐞�"
- fourIcon="iconicon-test5"
- :total="`${PollData.stackChannelCount}璺痐"
- :ValidCount="`${PollData.stackTotal}璺痐"
- :InValidCount="`${PollData.stackInvalidCount}璺痐"
- :RunningCount="`${PollData.stackRunningCount}璺痐"
- :NoDeal="`${PollData.stackNoDeal}璺痐"
- ></DataStackCard>
- </li>
- </ul>
- </div>
- <!-- <div :class="marginTop" :style="`width:${liquidWidth};`">
- <ul>
- <li>
- <liquid-fill-chart title="鍐呭瓨" :value="PollData.MemUsedPercent" :size="75" />
- </li>
- <li>
- <liquid-fill-chart title="绠楀姏" :value="PollData.GpuUsedPercent" :size="75" />
- </li>
- <li>
- <liquid-fill-chart title="CPU" :value="PollData.CpuUsedPercent" :size="75" />
- </li>
- </ul>
- </div>-->
- <div class="eCharts-box" :style="`width:${liquidWidth}`">
- <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
- </div>
- </div>
-</template>
-
-<script>
-import DataStackCard from "@/components/subComponents/DataStackCard"
-import BoardCard from "@/components/subComponents/BoardCard"
-import LocalVedioCard from "@/components/subComponents/LocalVedioCard"
-import LiquidFillChart from "@/components/subComponents/chartLiquid"
-import eChartsBar from '@/components/subComponents/eChartsBar'
-
-export default {
- name: "SystemInfo",
- components: {
- DataStackCard,
- eChartsBar,
- },
- props: {
- showTask: {
- type: Boolean,
- default: false
- },
- showClass: {
- type: String,
- default: 'sysinfo-box flex-box'
- },
- ShowLocalVedio: {
- type: Boolean,
- default: false
- },
- showRealPoll: {
- type: Boolean,
- default: true
- },
- marginTop: {
- type: String,
- default: 'ma'
- },
- borderWidth: {
- type: String,
- default: '70%'
- },
- liquidWidth: {
- type: String,
- default: '30%'
- }
- },
- methods: {
- initCpuCharts() {
- this.$forceUpdate();
- }
- },
-}
-</script>
-<style lang="scss">
-.sysinfo-box {
- height: 100%;
- .card-box {
- width: 50%;
- @media screen and (min-width: 1280px) and (max-width: 1440px) {
- width: 65%;
- }
- @media screen and (max-width: 1279px) {
- width: 70%;
- }
- .total-box {
- height: 120px;
- width: 100%;
- display: inline-block;
- margin: 10px 5px;
- background: #ffffff;
- border: 1px solid #e2e2e2;
- box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- border-radius: 4px;
- cursor: pointer;
- .top-text {
- line-height: 30px;
- font-family: PingFangSC-Medium;
- font-size: 14px;
- color: #222222;
- }
- .mid-text {
- margin-bottom: 18px;
- font-family: PingFangSC-Medium;
- font-size: 18px;
- color: #ff7733;
- }
- .bottom-text {
- position: relative;
- top: 3px;
- left: 1px;
- color: #666666;
- font-size: 13px;
- }
- em {
- font-weight: 700;
- }
- }
- }
- .eCharts-box {
- width: 50%;
- height: 100%;
- margin-left: 5px;
- @media screen and (min-width: 1280px) and (max-width: 1440px) {
- width: 35%;
- }
- @media screen and (max-width: 1279px) {
- width: 30%;
- }
- }
- .chart-box {
- float: left;
- width: 50%;
- margin-top: 20px;
- margin-left: 20px;
- }
- ul {
- list-style: none;
- display: table;
- width: 100%;
- li {
- display: table-cell;
- text-align: center;
- vertical-align: top;
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/datastack/components/TimeSlider.vue b/src/pages/datastack/components/TimeSlider.vue
deleted file mode 100644
index fca901d..0000000
--- a/src/pages/datastack/components/TimeSlider.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<template>
- <div class="sub-time-box">
- <div class="btn-control">
- <div class="el-tabs-edit">
- <span v-if="!editSlider" class="add-btn" @click="handleTabsEdit('','edit')">
- <i class="el-icon-edit"></i>
- 缂栬緫
- </span>
- <span v-else class="add-btn" @click="handleTabsEdit('','lock')">
- <i class="el-icon-lock"></i>
- 閿佸畾
- </span>
- </div>
- <div class="el-tabs-add">
- <span class="add-btn" @click="handleTabsEdit('','add')">
- <i class="iconfont iconhebingxingzhuang"></i>
- 鏂板
- </span>
- </div>
- </div>
- <el-tabs v-model="activeTab" type="border-card" editable @edit="handleTabsEdit">
- <el-tab-pane v-for="item in VideoManageData.TimeRules" :key="item.id" :name="item.id">
- <span slot="label" @click="tabClick(item)" style="width:100px">{{item.name}}</span>
- <multi-range-slider
- :timeData="JSON.parse(item.time_rule)"
- :mainId="`${item.id}_${type}`"
- :itemId="item.id"
- :itemName="item.name"
- :edit="editSlider"
- @range-update="updateTimeRule"
- ></multi-range-slider>
- </el-tab-pane>
- </el-tabs>
- </div>
-</template>
-
-<script>
-import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider";
-import { saveTimeRule, deleteTimeRule } from "@/api/timeRule";
-
-export default {
- name: "TimeSlider",
- components: {
- MultiRangeSlider
- },
- props: {
- type: {
- default: "",
- type: String
- }
- },
- data() {
- return {
- editSlider: false,
- activeTab: "",
- activeIndex: 0,
- cavasLength: 800,
- allDay: [
- { day: 1, time_range: [{ start: "00:00", end: "24:00" }] },
- { day: 2, time_range: [{ start: "00:00", end: "24:00" }] },
- { day: 3, time_range: [{ start: "00:00", end: "24:00" }] },
- { day: 4, time_range: [{ start: "00:00", end: "24:00" }] },
- { day: 5, time_range: [{ start: "00:00", end: "24:00" }] },
- { day: 6, time_range: [{ start: "00:00", end: "24:00" }] },
- { day: 7, time_range: [{ start: "00:00", end: "24:00" }] }
- ]
- };
- },
- mounted() {
- // window.addEventListener('resize', this.windowSizeChange)
- },
- methods: {
- handleTabsEdit(tabId, action) {
- let tabs = this.VideoManageData.TimeRules;
- if (action === "add") {
- let newRule = {
- id: "",
- name: "鏃堕棿娈�" + this.VideoManageData.TimeRules.length,
- time_rule: this.allDay
- };
- this.updateTimeRule(newRule);
- }
- if (action === "remove") {
- this.$confirm(
- "姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ヨ鍒�, 鎵�鍏宠仈鐨勪换鍔″皢浼氬け鏁堬紝鏄惁缁х画?",
- {
- center: true,
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- }
- ).then(() => {
- deleteTimeRule({ id: tabId }).then(rsp => {
- if (rsp && rsp.success) {
- this.VideoManageData.getTimeRule();
- // this.VideoManageData.TimeRules.splice(2, 1)
- this.activeTab = this.VideoManageData.TimeRules[0].id;
- this.$notify({
- type: "success",
- message: "鍒犻櫎鎴愬姛!"
- });
- }
- });
- }).catch(() => { });
- }
- if (action == "edit") {
- this.editSlider = true;
- }
- if (action == "lock") {
- this.editSlider = false;
- }
- },
- windowSizeChange() {
- let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth
- this.cavasLength = timeSlideWidth
- console.log("鏃堕棿缁勪欢瀹藉害锛�", timeSlideWidth)
- },
- updateTimeRule(rule) {
- saveTimeRule(rule).then(rsp => {
- if (rsp && rsp.success) {
- this.VideoManageData.getTimeRule();
- this.activeTab = rsp.data.id;
- }
- });
- },
- tabClick(item) {
- if (this.activeTab === item.id) {
- this.$prompt("", "淇敼鍚嶇О", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- inputValue: item.name,
- inputPattern: /^[\S]{1,16}$/,
- inputErrorMessage: "鍚嶇О涓嶈兘鍖呭惈绌烘牸"
- }).then(({ value }) => {
- this.updateTimeRule({
- id: item.id,
- name: value,
- time_rule: JSON.parse(item.time_rule)
- });
- this.$notify({
- type: "success",
- message: "鏃堕棿瑙勫垯鍚嶇О淇敼鎴愬姛"
- });
- }).catch(() => { });
- }
- }
- }
-};
-</script>
-<style lang='scss'>
-.sub-time-box {
- width: 660px;
- position: relative;
- /* height: calc(100% - 32px);
- width: 100%;
- padding: 5px; */
- /* box-sizing: border-box; */
- /* border-right: 1px solid #ccc;
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc; */
- .btn-control {
- position: absolute;
- margin-top: -27px;
- top: 0;
- right: 0;
- display: flex;
- i {
- font-size: 16px;
- }
- }
- .el-tabs__item {
- border-right-color: #e2e2e2 !important;
- border-left-color: #e2e2e2 !important;
- border-top-color: #e2e2e2 !important;
- }
- .el-tab-pane {
- height: calc(100% - 50px);
- }
- // .el-tabs__new-tab {
- // margin: 15px 19px 9px 10px;
- // }
- .el-tabs {
- height: 100%;
- }
-
- .el-tabs__header {
- margin: 0px !important;
- height: 45px !important;
- border-top: 1px solid #e2e2e2 !important;
- border-bottom: 1px solid #e2e2e2 !important;
- background-color: #fff !important;
- .is-active {
- border-bottom-color: #fff !important;
- }
- .el-tabs__item {
- line-height: 45px !important;
- }
- }
- .el-tabs__content {
- overflow: auto !important;
- height: calc(100% - 51px) !important;
- padding: 13px 0px !important;
- }
- .el-tabs__new-tab {
- visibility: hidden;
- // width: 130px;
- }
- // .el-tabs-add {
- // position: relative;
- // display: flex;
- // width: 70px;
- // top: 32px;
- // left: 88%;
- // z-index: 1;
- // }
- // .el-tabs-edit {
- // position: relative;
- // display: -webkit-box;
- // display: -ms-flexbox;
- // display: flex;
- // width: 70px;
- // top: 47px;
- // left: 79%;
- // z-index: 1;
- // }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/datastack/components/infoCard.vue b/src/pages/datastack/components/infoCard.vue
deleted file mode 100644
index 700efe4..0000000
--- a/src/pages/datastack/components/infoCard.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<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/pages/datastack/components/localSeparate.vue b/src/pages/datastack/components/localSeparate.vue
deleted file mode 100644
index f17311d..0000000
--- a/src/pages/datastack/components/localSeparate.vue
+++ /dev/null
@@ -1,729 +0,0 @@
-<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/pages/datastack/components/scene/Editor.vue b/src/pages/datastack/components/scene/Editor.vue
deleted file mode 100644
index 162733f..0000000
--- a/src/pages/datastack/components/scene/Editor.vue
+++ /dev/null
@@ -1,1510 +0,0 @@
-<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/pages/datastack/components/scene/SlideScene.vue b/src/pages/datastack/components/scene/SlideScene.vue
deleted file mode 100644
index 8caaf09..0000000
--- a/src/pages/datastack/components/scene/SlideScene.vue
+++ /dev/null
@@ -1,285 +0,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/datastack/index/App.vue b/src/pages/datastack/index/App.vue
deleted file mode 100644
index 4f00ebd..0000000
--- a/src/pages/datastack/index/App.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
- <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 LeftNav from "@/components/LeftNav";
-// import CameraVideo from "./components/Video.vue";
-import RightSide from "./StackManage"
-
-export default {
- name: "SearchPage",
- components: {
- LeftNav,
- RightSide
- },
- data() {
- return {
- screenHeight: 0,
- }
- },
- mounted() {
- this.screenHeight = document.documentElement.clientHeight - 20;
- window.onresize = () => {
- return (() => {
- this.screenHeight = document.documentElement.clientHeight - 20;
- })();
- };
- },
-};
-</script>
-
-<style lang="scss" scoped>
-.column {
- overflow: hidden;
-}
-.column-left {
- height: inherit;
- background-color: #fff;
- position: relative;
- float: left;
-}
-.column-right {
- height: 100%;
- padding: 16px;
- 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;
- }
- .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/datastack/index/StackManage.vue b/src/pages/datastack/index/StackManage.vue
deleted file mode 100644
index 66be6e7..0000000
--- a/src/pages/datastack/index/StackManage.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<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-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/datastack/index/main.ts b/src/pages/datastack/index/main.ts
deleted file mode 100644
index 782d019..0000000
--- a/src/pages/datastack/index/main.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-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',
- render: h => h(App)
-})
diff --git a/src/pages/datastack/index/mixins.ts b/src/pages/datastack/index/mixins.ts
deleted file mode 100644
index 52fb92b..0000000
--- a/src/pages/datastack/index/mixins.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/index/main.ts b/src/pages/index/main.ts
index d910dc3..692b57e 100644
--- a/src/pages/index/main.ts
+++ b/src/pages/index/main.ts
@@ -6,7 +6,7 @@
import "../../assets/css/common.scss"
import "../../assets/css/overried.scss"
-import App from './app.vue'
+import App from './App.vue'
Vue.use(ElementUI)
--
Gitblit v1.8.0