From feaf0a9778879ef211c5587a513ba4cbdabb52d0 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 23 六月 2022 17:42:58 +0800
Subject: [PATCH] bug修复
---
src/pages/cameraAccess/components/SceneRule.vue | 370 ++++++++++++++++++++++++----------------------------
1 files changed, 168 insertions(+), 202 deletions(-)
diff --git a/src/pages/cameraAccess/components/SceneRule.vue b/src/pages/cameraAccess/components/SceneRule.vue
index 13fcb07..c5d985a 100644
--- a/src/pages/cameraAccess/components/SceneRule.vue
+++ b/src/pages/cameraAccess/components/SceneRule.vue
@@ -2,13 +2,9 @@
<div class="scene-edit-container">
<div class="scene-title">
<b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b>
- <el-button
- type="primary"
- size="mini"
- @click="handleCreate"
- style="margin-left:87%"
- v-show="!editScene"
- >+ 娣诲姞鍦烘櫙</el-button>
+ <el-button type="primary" size="mini" @click="handleCreate" style="margin-left:90%" v-show="!editScene"
+ >+ 娣诲姞鍦烘櫙</el-button
+ >
</div>
<el-form ref="form" label-width="80px" v-show="editScene">
@@ -18,12 +14,7 @@
<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>
@@ -46,75 +37,21 @@
<el-form-item label="鍦烘櫙鎻忚堪">
<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>
+ <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"
+ ></i>
+ <i v-else class="el-icon-video-pause" style="font-size:26px; vertical-align:middle; color:#409eff"></i>
+ </span>
+ </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"
@@ -136,45 +73,40 @@
<el-table
:data="tableRuleList"
border
- style="width: 100%"
+ style="width:100%"
:cell-style="cellStyle"
- :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
+ :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="搴忓彿" 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" width="100"></el-table-column>
- <el-table-column label="鎻忚堪" prop="desc" align="center" min-width="150"></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>
</template>
</el-table-column>-->
- <el-table-column label="浜嬩欢绛夌骇" align="center" width="120">
+ <el-table-column label="浜嬩欢澹伴煶" align="center">
<template slot-scope="scope">
- <span>{{scope.row.alarm_level | alarmLevel }}</span>
+ <span>{{ getSoundById(scope.row.voiceId) }}</span>
</template>
</el-table-column>
- <el-table-column label="鎿嶄綔" fixed="right" align="center" width="100">
+ <el-table-column label="浜嬩欢绛夌骇" align="center">
<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>
+ <span>{{ scope.row.alarm_level | alarmLevel }}</span>
+ </template>
+ </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>
- <el-tooltip content="鍒犻櫎" 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;"
@@ -190,14 +122,10 @@
</template>
<script>
-import {
- getAllTemplate,
- saveCameraScene,
- getCameraSceneRule,
- deleteCameraScene
-} from '@/api/scene'
-import RuleEditor from "@/components/subComponents/RuleEditor";
-import SceneEditor from "./scene/Editor";
+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",
@@ -230,26 +158,29 @@
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.updateTemplates();
+ this.getSounds()
+ this.eventAudio.addEventListener("ended", () => {
+ this.togglePlay = true
+ })
},
data() {
return {
@@ -262,25 +193,76 @@
desc: "",
template_id: "",
time_rule_id: "",
+ voice: {},
+ voiceId: ""
},
templateSdks: [],
templateRules: "",
ruleList: [],
- sceneNameStore: []
+ sceneNameStore: [],
+ eventAudio: new Audio(),
+ soundList: [],
+ togglePlay: true
}
},
methods: {
+ getSoundById(id) {
+ if (id) {
+ let sound = this.soundList.find((item) => item.id == id)
+ return sound.name
+ } else {
+ return ""
+ }
+ },
+ getSounds() {
+ 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)
+ }
+ })
+ .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.eventAudio.
+ },
+ togglePlayer() {
+ if (!this.soundPath) {
+ this.$notify({
+ type: "info",
+ message: "璇峰厛閫夋嫨涓�涓０闊�!"
+ })
+ return false
+ }
+ debugger
+ this.eventAudio.src = this.soundPath
+ if (this.togglePlay) {
+ this.eventAudio.play()
+ this.togglePlay = false
+ } else {
+ this.eventAudio.pause()
+ this.togglePlay = true
+ }
+ // this.togglePlay = !this.togglePlay
+ },
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];
+ 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)
@@ -301,152 +283,133 @@
desc: "",
template_id: "",
time_rule_id: "",
- };
- this.$refs.sceneEditor.cleanRule();
+ voice: {},
+ voiceId: ""
+ }
+ this.$refs.sceneEditor.cleanRule()
+ this.$refs.sceneEditor.getSdkConnection()
},
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) {
+ })
+ 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) {
+ })
+ return false
+ } else if (this.TreeDataPool.treeActiveName == "dataStack" && !this.DataStackPool.selectedDir.id) {
this.$notify({
type: "warning",
message: `璇峰厛閫夋嫨鏁版嵁鏍堟枃浠跺す!`
- });
- return false;
+ })
+ return false
}
- this.editScene = true;
- this.cleanForm();
- console.log(this.tableRuleList)
+ this.editScene = true
+ this.cleanForm()
//鍒濆鍖栧満鏅悕绉�
- var pattern = /^鍦烘櫙\s*\d+\s*$/;
- var tempArr = [];
- this.tableRuleList.forEach(scene => {
-
+ 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.originSceneInfo = JSON.parse(JSON.stringify(scene));
+ this.sceneForm.voice = this.soundList.find((o) => o.id === scene.voiceId)
- this.sceneForm = scene;
- this.editScene = true;
- let selectedTpl = {};
+ this.editScene = true
+ let selectedTpl = {}
this.sceneTemplates.forEach((t) => {
if (t.id == this.sceneForm.template_id) {
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)
},
- 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: '鍦烘櫙鍚嶄笉鑳戒负绌�'
- });
+ type: "warning",
+ message: "鍦烘櫙鍚嶄笉鑳戒负绌�"
+ })
return false
} else if (!this.sceneForm.alarm_level) {
this.$notify({
- type: 'warning',
- message: '浜嬩欢绛夌骇涓嶈兘涓虹┖'
- });
+ type: "warning",
+ message: "浜嬩欢绛夌骇涓嶈兘涓虹┖"
+ })
return false
} else if (!this.sceneForm.time_rule_id) {
this.$notify({
- type: 'warning',
- message: '鏃堕棿娈典笉鑳戒负绌�'
- });
+ 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);
+ 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) {
+ let _this = this
this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛岃鏉¤鍒欏皢澶辨晥锛屾槸鍚﹀垹闄わ紵", {
center: true,
cancelButtonClass: "comfirm-class-cancle",
confirmButtonClass: "comfirm-class-sure"
})
.then(() => {
- deleteCameraScene(groupRule.id).then(res => {
- this.$emit("delete-rule");
+ deleteCameraScene(groupRule.id).then((res) => {
+ this.$emit("delete-rule")
if (res && res.success) {
this.$notify({
type: "success",
message: "鍒犻櫎鎴愬姛"
- });
-
+ })
+ _this.$root.$children[0].$children[0].querySearchAsync("camera")
} else {
this.$notify({
type: "error",
message: "鍒犻櫎澶辫触锛�"
- });
+ })
}
- });
+ })
})
- .catch(() => { });
+ .catch(() => {})
},
cellStyle(obj) {
- if (obj.column.label == '绛栫暐') {
- return 'text-align:left;padding-left:8px;'
+ if (obj.column.label == "绛栫暐" || obj.column.label == "浜嬩欢澹伴煶") {
+ return "text-align:left;padding-left:8px;"
}
}
}
@@ -482,7 +445,7 @@
}
}
textarea {
- height: 143px;
+ height: 92px;
}
}
.right {
@@ -513,7 +476,10 @@
}
.cell {
padding-left: 0 !important;
+ i {
+ outline: none !important;
+ }
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0