From 2cb264ec2b7c7dd9798d1821927104fad35bd063 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期二, 28 六月 2022 14:47:43 +0800
Subject: [PATCH] 系统设置自适应
---
src/pages/cameraAccess/components/SceneRule.vue | 368 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 231 insertions(+), 137 deletions(-)
diff --git a/src/pages/cameraAccess/components/SceneRule.vue b/src/pages/cameraAccess/components/SceneRule.vue
index c5d985a..b89044f 100644
--- a/src/pages/cameraAccess/components/SceneRule.vue
+++ b/src/pages/cameraAccess/components/SceneRule.vue
@@ -1,8 +1,13 @@
<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:90%" v-show="!editScene"
+ <b style="font-size: 14px; line-height: 18px">鍦烘櫙</b>
+ <el-button
+ type="primary"
+ size="mini"
+ @click="handleCreate"
+ style="margin-left: 90%"
+ v-show="!editScene && TreeDataPool.selectedNode.type !== 'MENU'"
>+ 娣诲姞鍦烘櫙</el-button
>
</div>
@@ -11,10 +16,19 @@
<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-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-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>
@@ -23,7 +37,11 @@
</el-select>
</el-form-item>
<el-form-item label="鏃堕棿娈�">
- <el-select v-model="sceneForm.time_rule_id" placeholder="璇烽�夋嫨" size="mini">
+ <el-select
+ v-model="sceneForm.time_rule_id"
+ placeholder="璇烽�夋嫨"
+ size="mini"
+ >
<el-option
v-for="item in VideoManageData.TimeRules"
:key="item.id"
@@ -35,19 +53,42 @@
</div>
<div class="right">
<el-form-item label="鍦烘櫙鎻忚堪">
- <el-input v-model="sceneForm.desc" type="textarea" size="mini"></el-input>
+ <el-input
+ v-model="sceneForm.desc"
+ type="textarea"
+ size="mini"
+ ></el-input>
</el-form-item>
<el-form-item label="浜嬩欢澹伴煶">
- <el-select v-model="sceneForm.voice" 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
+ v-model="sceneForm.voice"
+ 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 @click="togglePlayer" style="cursor:pointer; margin-left:20px" v-show="sceneForm.voiceId.length">
+ <span
+ @click="togglePlayer"
+ style="cursor: pointer; margin-left: 20px"
+ v-show="sceneForm.voiceId.length"
+ >
<i
v-if="togglePlay"
class="el-icon-video-play"
- style="font-size:26px; vertical-align:middle; color:#409eff"
+ style="font-size: 26px; vertical-align: middle; color: #409eff"
></i>
- <i v-else class="el-icon-video-pause" style="font-size:26px; vertical-align:middle; color:#409eff"></i>
+ <i
+ v-else
+ class="el-icon-video-pause"
+ style="font-size: 26px; vertical-align: middle; color: #409eff"
+ ></i>
</span>
</el-form-item>
</div>
@@ -61,9 +102,11 @@
@sdkNameChange="getSceneName"
></scene-editor>
- <el-form-item style="width: 60%;min-width: 1048px;">
+ <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-button type="primary" size="mini" @click="saveSceneRule"
+ >淇濆瓨</el-button
+ >
</el-form-item>
</el-form>
@@ -73,19 +116,42 @@
<el-table
:data="tableRuleList"
border
- style="width:100%"
+ style="width: 100%"
:cell-style="cellStyle"
:header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
>
- <el-table-column label="搴忓彿" type="index" align="center"></el-table-column>
- <el-table-column label="鍦烘櫙鍚嶇О" prop="scene_name" align="center" show-overflow-tooltip></el-table-column>
- <el-table-column label="绛栫暐" prop="group_text" align="center" min-width="350px">
+ <el-table-column
+ label="搴忓彿"
+ type="index"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ label="鍦烘櫙鍚嶇О"
+ prop="scene_name"
+ 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"></el-table-column>
- <el-table-column label="鎻忚堪" prop="desc" align="center" min-width="120"></el-table-column>
+ <el-table-column
+ label="鏃堕棿娈�"
+ prop="time_name"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ label="鎻忚堪"
+ prop="desc"
+ align="center"
+ min-width="120"
+ ></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>
@@ -103,13 +169,27 @@
</el-table-column>
<el-table-column label="鎿嶄綔" fixed="right" align="center">
<template slot-scope="scope">
- <el-tooltip content="缂栬緫" :hide-after="700" placement="top" popper-class="atooltip">
- <i class="iconfont iconbianji1 btn-icon" style="font-size: 28px;" @click="handleEdit(scope.row)"></i>
+ <el-tooltip
+ content="缂栬緫"
+ :hide-after="700"
+ 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="鍒犻櫎" :hide-after="700" placement="top" popper-class="atooltipgroup_">
+ <el-tooltip
+ content="鍒犻櫎"
+ :hide-after="700"
+ placement="top"
+ popper-class="atooltipgroup_"
+ >
<i
class="iconfont iconshanchu4 btn-icon"
- style="font-size: 28px; color:red;"
+ style="font-size: 28px; color: red"
@click="handleDelScene(scope.row)"
></i>
</el-tooltip>
@@ -122,65 +202,65 @@
</template>
<script>
-import { saveCameraScene, deleteCameraScene } from "@/api/scene"
-import RuleEditor from "@/components/subComponents/RuleEditor"
-import SceneEditor from "./scene/Editor"
-import { getSoundList } from "@/api/event"
+import { saveCameraScene, deleteCameraScene } from "@/api/scene";
+import RuleEditor from "@/components/subComponents/RuleEditor";
+import SceneEditor from "./scene/Editor";
+import { getSoundList } from "@/api/event";
export default {
name: "SceneRuleEditor",
components: {
- SceneEditor
+ SceneEditor,
},
props: {
seletedCameras: {
type: Array,
default: () => {
- return []
- }
+ return [];
+ },
},
tableRuleList: {
type: Array,
default: () => {
- return []
- }
+ return [];
+ },
},
onSaveScene: {
type: Function,
- default: () => false
+ default: () => false,
},
linkRule: {
type: Boolean,
- default: false
- }
+ default: false,
+ },
},
filters: {
alarmLevel(level) {
switch (level) {
case 1:
- return "涓�绾�"
+ return "涓�绾�";
case 2:
- return "浜岀骇"
+ return "浜岀骇";
case 3:
- return "涓夌骇"
+ return "涓夌骇";
case 4:
- return "鍥涚骇"
+ return "鍥涚骇";
case 5:
- return "浜旂骇"
+ return "浜旂骇";
}
- }
+ },
},
watch: {
tableRuleList(n, o) {
- this.editScene = false
- }
+ this.editScene = false;
+ },
},
mounted() {
// window.addEventListener('resize', this.windowSizeChange)
- this.getSounds()
+ this.getSounds();
this.eventAudio.addEventListener("ended", () => {
- this.togglePlay = true
- })
+ this.togglePlay = true;
+ });
},
data() {
return {
@@ -194,7 +274,7 @@
template_id: "",
time_rule_id: "",
voice: {},
- voiceId: ""
+ voiceId: "",
},
templateSdks: [],
templateRules: "",
@@ -202,53 +282,55 @@
sceneNameStore: [],
eventAudio: new Audio(),
soundList: [],
- togglePlay: true
- }
+ togglePlay: true,
+ };
},
methods: {
getSoundById(id) {
if (id) {
- let sound = this.soundList.find((item) => item.id == id)
- return sound.name
+ let sound = this.soundList.find((item) => item.id == id);
+ return sound.name;
} else {
- return ""
+ return "";
}
},
getSounds() {
- let _this = this
+ let _this = this;
getSoundList()
.then((res) => {
if (res.success) {
//_this.soundList = [{ id: "", name: "绌�", path: "" }].concat(res.data.list)
- _this.soundList = [{ id: "", name: "绌�", path: "" }].concat(res.data)
+ _this.soundList = [{ id: "", name: "绌�", path: "" }].concat(
+ res.data
+ );
}
})
- .catch((e) => console.log(e))
+ .catch((e) => console.log(e));
},
selSound(sound) {
- this.soundPath = sound.path
- this.sceneForm.voiceId = sound.id
- this.togglePlay = true
- this.eventAudio.pause()
- this.$forceUpdate()
+ this.soundPath = sound.path;
+ this.sceneForm.voiceId = sound.id;
+ this.togglePlay = true;
+ this.eventAudio.pause();
+ this.$forceUpdate();
// this.eventAudio.
},
togglePlayer() {
if (!this.soundPath) {
this.$notify({
type: "info",
- message: "璇峰厛閫夋嫨涓�涓０闊�!"
- })
- return false
+ message: "璇峰厛閫夋嫨涓�涓０闊�!",
+ });
+ return false;
}
- debugger
- this.eventAudio.src = this.soundPath
+ debugger;
+ this.eventAudio.src = this.soundPath;
if (this.togglePlay) {
- this.eventAudio.play()
- this.togglePlay = false
+ this.eventAudio.play();
+ this.togglePlay = false;
} else {
- this.eventAudio.pause()
- this.togglePlay = true
+ this.eventAudio.pause();
+ this.togglePlay = true;
}
// this.togglePlay = !this.togglePlay
},
@@ -256,19 +338,19 @@
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
+ let temp = arr[j];
+ arr[j] = arr[j + 1];
+ arr[j + 1] = temp;
}
}
}
- return arr
+ return arr;
},
getSceneName(sdk_name) {
- this.sceneNameStore.push(sdk_name)
+ this.sceneNameStore.push(sdk_name);
if (!this.sceneForm.scene_name.trim()) {
- this.sceneForm.scene_name = sdk_name
+ this.sceneForm.scene_name = sdk_name;
}
// }else if(this.sceneForm.scene_name == store[store.length-2]){
// //鍦烘櫙鍚嶇О鍙栫殑鏄笂涓�娆′紶杩囨潵鐨勭畻娉曞悕绉帮紝鍒欓』鏇存柊涓烘渶鏂颁紶鏉ョ殑绠楁硶鍚�
@@ -284,18 +366,18 @@
template_id: "",
time_rule_id: "",
voice: {},
- voiceId: ""
- }
- this.$refs.sceneEditor.cleanRule()
- this.$refs.sceneEditor.getSdkConnection()
+ voiceId: "",
+ };
+ this.$refs.sceneEditor.cleanRule();
+ this.$refs.sceneEditor.getSdkConnection();
},
handleCreate() {
if (this.linkRule && this.TreeDataPool.selectedNodes.length < 2) {
this.$notify({
type: "warning",
- message: "璇烽�夋嫨鑷冲皯2涓憚鍍忔満!"
- })
- return false
+ message: "璇烽�夋嫨鑷冲皯2涓憚鍍忔満!",
+ });
+ return false;
} else if (
!this.linkRule &&
this.TreeDataPool.treeActiveName != "dataStack" &&
@@ -303,117 +385,126 @@
) {
this.$notify({
type: "warning",
- message: `璇烽�夋嫨1涓憚鍍忔満!`
- })
- return false
- } else if (this.TreeDataPool.treeActiveName == "dataStack" && !this.DataStackPool.selectedDir.id) {
+ message: `璇烽�夋嫨1涓憚鍍忔満!`,
+ });
+ return false;
+ } else if (
+ this.TreeDataPool.treeActiveName == "dataStack" &&
+ !this.DataStackPool.selectedDir.id
+ ) {
this.$notify({
type: "warning",
- message: `璇峰厛閫夋嫨鏁版嵁鏍堟枃浠跺す!`
- })
- return false
+ message: `璇峰厛閫夋嫨鏁版嵁鏍堟枃浠跺す!`,
+ });
+ return false;
}
- this.editScene = true
- this.cleanForm()
+ this.editScene = true;
+ this.cleanForm();
//鍒濆鍖栧満鏅悕绉�
- var pattern = /^鍦烘櫙\s*\d+\s*$/
- var tempArr = []
+ 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()))
+ tempArr.push(Number(scene.scene_name.substring(2).trim()));
}
- })
- let latest = tempArr.length > 0 ? this.bubbleSort(tempArr)[tempArr.length - 1] + 1 : 1
+ });
+ let latest =
+ tempArr.length > 0
+ ? this.bubbleSort(tempArr)[tempArr.length - 1] + 1
+ : 1;
- this.sceneForm.scene_name = "鍦烘櫙" + latest
+ this.sceneForm.scene_name = "鍦烘櫙" + latest;
//鍒濆鍖栨椂闂存
- this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id
+ this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
},
handleEdit(scene) {
- this.sceneForm = JSON.parse(JSON.stringify(scene))
+ this.sceneForm = JSON.parse(JSON.stringify(scene));
// this.originSceneInfo = JSON.parse(JSON.stringify(scene));
- this.sceneForm.voice = this.soundList.find((o) => o.id === scene.voiceId)
+ this.sceneForm.voice = this.soundList.find((o) => o.id === scene.voiceId);
- this.editScene = true
- let selectedTpl = {}
+ this.editScene = true;
+ let selectedTpl = {};
this.sceneTemplates.forEach((t) => {
if (t.id == this.sceneForm.template_id) {
- selectedTpl = t
+ selectedTpl = t;
}
- })
- this.templateSdks = selectedTpl.sdks
+ });
+ this.templateSdks = selectedTpl.sdks;
- this.templateRules = JSON.stringify(scene.rules)
- this.$refs.sceneEditor.editHandle(this.templateRules)
+ this.templateRules = JSON.stringify(scene.rules);
+ this.$refs.sceneEditor.editHandle(this.templateRules);
},
validateForm() {
if (!this.sceneForm.scene_name.trim()) {
this.$notify({
type: "warning",
- message: "鍦烘櫙鍚嶄笉鑳戒负绌�"
- })
- return false
+ message: "鍦烘櫙鍚嶄笉鑳戒负绌�",
+ });
+ return false;
} else if (!this.sceneForm.alarm_level) {
this.$notify({
type: "warning",
- message: "浜嬩欢绛夌骇涓嶈兘涓虹┖"
- })
- return false
+ message: "浜嬩欢绛夌骇涓嶈兘涓虹┖",
+ });
+ return false;
} else if (!this.sceneForm.time_rule_id) {
this.$notify({
type: "warning",
- message: "鏃堕棿娈典笉鑳戒负绌�"
- })
- return false
+ message: "鏃堕棿娈典笉鑳戒负绌�",
+ });
+ return false;
}
- return true
+ return true;
},
saveSceneRule() {
if (!this.validateForm()) {
- return
+ return;
}
- let editorResp = this.$refs.sceneEditor.submitRule()
- this.sceneForm.rules = editorResp.rules
- this.sceneForm.id = editorResp.id
- this.sceneForm.group_text = editorResp.text
+ let editorResp = this.$refs.sceneEditor.submitRule();
+ if (!editorResp) {
+ return;
+ }
+ this.sceneForm.rules = editorResp.rules;
+ this.sceneForm.id = editorResp.id;
+ this.sceneForm.group_text = editorResp.text;
- this.onSaveScene(this.sceneForm)
+ this.onSaveScene(this.sceneForm);
},
handleDelScene(groupRule) {
- let _this = this
+ let _this = this;
this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛岃鏉¤鍒欏皢澶辨晥锛屾槸鍚﹀垹闄わ紵", {
center: true,
cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure"
+ confirmButtonClass: "comfirm-class-sure",
})
.then(() => {
deleteCameraScene(groupRule.id).then((res) => {
- this.$emit("delete-rule")
+ this.$emit("delete-rule");
if (res && res.success) {
this.$notify({
type: "success",
- message: "鍒犻櫎鎴愬姛"
- })
- _this.$root.$children[0].$children[0].querySearchAsync("camera")
+ message: "鍒犻櫎鎴愬姛",
+ });
+ _this.$root.$children[0].$children[0].querySearchAsync("camera");
} else {
this.$notify({
type: "error",
- message: "鍒犻櫎澶辫触锛�"
- })
+ message: "鍒犻櫎澶辫触锛�",
+ });
}
- })
+ });
})
- .catch(() => {})
+ .catch(() => {});
},
cellStyle(obj) {
if (obj.column.label == "绛栫暐" || obj.column.label == "浜嬩欢澹伴煶") {
- return "text-align:left;padding-left:8px;"
+ return "text-align:left;padding-left:8px;";
}
- }
- }
-}
+ },
+ },
+};
</script>
<style lang="scss">
@@ -481,5 +572,8 @@
}
}
}
+ .el-table th.el-table__cell > .cell {
+ padding-right: 0;
+ }
}
</style>
--
Gitblit v1.8.0