From 804d59e162b72be684d0087a8cd74dbd6fecbf4d Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 30 十二月 2022 16:57:18 +0800
Subject: [PATCH] 添加投影配置页面
---
src/pages/cameraAccess/components/SceneRule.vue | 350 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 240 insertions(+), 110 deletions(-)
diff --git a/src/pages/cameraAccess/components/SceneRule.vue b/src/pages/cameraAccess/components/SceneRule.vue
index 82e709d..8bcc9ab 100644
--- a/src/pages/cameraAccess/components/SceneRule.vue
+++ b/src/pages/cameraAccess/components/SceneRule.vue
@@ -1,28 +1,33 @@
<template>
<div class="scene-edit-container">
<div class="scene-title">
- <b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b>
+ <b style="font-size: 14px; line-height: 18px">鍦烘櫙</b>
<el-button
type="primary"
size="mini"
@click="handleCreate"
- style="margin-left:90%"
- v-show="!editScene"
- >+ 娣诲姞鍦烘櫙</el-button>
+ style="margin-left: 90%"
+ v-show="!editScene && TreeDataPool.selectedNode.type !== 'MENU'"
+ >+ 娣诲姞鍦烘櫙</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-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"
+ style="width: 250px"
>
<el-option label="涓�绾�" :value="1"></el-option>
<el-option label="浜岀骇" :value="2"></el-option>
@@ -32,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"
@@ -44,11 +53,47 @@
</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>
+ <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>
-
+
<scene-editor
ref="sceneEditor"
:isLinkRule="linkRule"
@@ -57,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>
@@ -71,46 +118,78 @@
border
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="搴忓彿"
+ type="index"
+ align="center"
+ ></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">
+ <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="缂栬緫" :hide-after="700" placement="top" popper-class="atooltip">
+ <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;"
+ 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>
@@ -123,40 +202,37 @@
</template>
<script>
-import {
- saveCameraScene,
- getCameraSceneRule,
- deleteCameraScene
-} from '@/api/scene'
+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) {
@@ -172,16 +248,19 @@
case 5:
return "浜旂骇";
}
- }
+ },
},
watch: {
tableRuleList(n, o) {
this.editScene = false;
- }
+ },
},
mounted() {
// window.addEventListener('resize', this.windowSizeChange)
-
+ this.getSounds();
+ this.eventAudio.addEventListener("ended", () => {
+ this.togglePlay = true;
+ });
},
data() {
return {
@@ -194,31 +273,84 @@
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() {
+ console.log(this.soundPath);
+ if (!this.soundPath) {
+ this.$notify({
+ type: "info",
+ message: "璇峰厛閫夋嫨涓�涓０闊�!",
+ });
+ return false;
+ }
+ this.eventAudio.src = "/httpImage/" + 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];
- arr[j + 1] = temp
+ arr[j + 1] = temp;
}
}
}
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]){
// //鍦烘櫙鍚嶇О鍙栫殑鏄笂涓�娆′紶杩囨潵鐨勭畻娉曞悕绉帮紝鍒欓』鏇存柊涓烘渶鏂颁紶鏉ョ殑绠楁硶鍚�
@@ -233,116 +365,111 @@
desc: "",
template_id: "",
time_rule_id: "",
+ 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涓憚鍍忔満!"
+ message: "璇烽�夋嫨鑷冲皯2涓憚鍍忔満!",
});
return false;
- } else if (!this.linkRule && this.TreeDataPool.treeActiveName != 'dataStack' && this.TreeDataPool.selectedNodes.length < 1) {
+ } else if (
+ !this.linkRule &&
+ this.TreeDataPool.treeActiveName != "dataStack" &&
+ this.TreeDataPool.selectedNodes.length < 1
+ ) {
this.$notify({
type: "warning",
- message: `璇烽�夋嫨1涓憚鍍忔満!`
+ message: `璇烽�夋嫨1涓憚鍍忔満!`,
});
return false;
- } else if (this.TreeDataPool.treeActiveName == 'dataStack' && !this.DataStackPool.selectedDir.id) {
+ } else if (
+ this.TreeDataPool.treeActiveName == "dataStack" &&
+ !this.DataStackPool.selectedDir.id
+ ) {
this.$notify({
type: "warning",
- message: `璇峰厛閫夋嫨鏁版嵁鏍堟枃浠跺す!`
+ message: `璇峰厛閫夋嫨鏁版嵁鏍堟枃浠跺す!`,
});
return false;
}
this.editScene = true;
this.cleanForm();
- console.log(this.tableRuleList)
//鍒濆鍖栧満鏅悕绉�
var pattern = /^鍦烘櫙\s*\d+\s*$/;
var tempArr = [];
- this.tableRuleList.forEach(scene => {
-
+ 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;
+ 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;
-
},
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.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);
-
- },
-
- 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() {
+ this.templateRules = JSON.stringify(scene.rules);
+ this.$refs.sceneEditor.editHandle(this.templateRules);
+ },
+
+ validateForm() {
if (!this.sceneForm.scene_name.trim()) {
this.$notify({
- type: 'warning',
- message: '鍦烘櫙鍚嶄笉鑳戒负绌�'
+ type: "warning",
+ message: "鍦烘櫙鍚嶄笉鑳戒负绌�",
});
- return false
+ return false;
} else if (!this.sceneForm.alarm_level) {
this.$notify({
- type: 'warning',
- message: '浜嬩欢绛夌骇涓嶈兘涓虹┖'
+ type: "warning",
+ message: "浜嬩欢绛夌骇涓嶈兘涓虹┖",
});
- return false
+ return false;
} else if (!this.sceneForm.time_rule_id) {
this.$notify({
- type: 'warning',
- message: '鏃堕棿娈典笉鑳戒负绌�'
+ type: "warning",
+ message: "鏃堕棿娈典笉鑳戒负绌�",
});
- return false
+ return false;
}
- return true
+ return true;
},
saveSceneRule() {
-
if (!this.validateForm()) {
- return
+ return;
}
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);
},
handleDelScene(groupRule) {
@@ -350,34 +477,34 @@
this.$confirm("鎻愮ず锛氬垹闄ゅ悗锛岃鏉¤鍒欏皢澶辨晥锛屾槸鍚﹀垹闄わ紵", {
center: true,
cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure"
+ confirmButtonClass: "comfirm-class-sure",
})
.then(() => {
- deleteCameraScene(groupRule.id).then(res => {
+ deleteCameraScene(groupRule.id).then((res) => {
this.$emit("delete-rule");
if (res && res.success) {
this.$notify({
type: "success",
- message: "鍒犻櫎鎴愬姛"
+ message: "鍒犻櫎鎴愬姛",
});
- _this.$root.$children[0].$children[0].querySearchAsync('camera')
+ _this.$root.$children[0].$children[0].querySearchAsync("camera");
} else {
this.$notify({
type: "error",
- message: "鍒犻櫎澶辫触锛�"
+ 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;";
}
- }
- }
-}
+ },
+ },
+};
</script>
<style lang="scss">
@@ -409,7 +536,7 @@
}
}
textarea {
- height: 143px;
+ height: 92px;
}
}
.right {
@@ -440,10 +567,13 @@
}
.cell {
padding-left: 0 !important;
- i{
- outline: none!important;
+ i {
+ outline: none !important;
}
}
}
+ .el-table th.el-table__cell > .cell {
+ padding-right: 0;
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0