From 11a88a9bf8febf05cdd9dee2389ddd43273f3e05 Mon Sep 17 00:00:00 2001 From: sd <shidong@jhsoft.cc> Date: 星期三, 06 八月 2025 09:46:38 +0800 Subject: [PATCH] 摄像机配置-对接国标便摄像机配置任务接口 --- src/pages/cameraAccess/components/SceneRule.vue | 389 ++++++++++++++++++++++++++++++++---------------------- 1 files changed, 230 insertions(+), 159 deletions(-) diff --git a/src/pages/cameraAccess/components/SceneRule.vue b/src/pages/cameraAccess/components/SceneRule.vue index 9d3715d..f2f053b 100644 --- a/src/pages/cameraAccess/components/SceneRule.vue +++ b/src/pages/cameraAccess/components/SceneRule.vue @@ -1,34 +1,24 @@ <template> <div class="scene-edit-container"> <div class="scene-title"> - <b style="font-size: 14px; line-height: 18px">鐫f煡浠诲姟</b> - <el-button - type="primary" - size="mini" - @click="handleCreate" - style="margin-left: 90%" - v-show="!editScene && TreeDataPool.selectedNode.type !== 'MENU'" - >+ 娣诲姞浠诲姟</el-button - > + <b style="font-size: 14px; line-height: 18px">AI浠诲姟</b> + <el-button type="primary" size="mini" @click="handleCreate" 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-form-item label="鍥炬爣"> + <!-- 鍥剧墖棰勮 --> + <div class="icon-preview-container"> + <el-image :src="sceneForm.iconUrl?sceneForm.iconUrl + '?t=' + timestamp:'/opt/smart/icon/task_icon.png'" fit="cover" /> + <!-- <el-image v-else src="@/assets/img/瀹瑰櫒@1x.png" fit="cover" /> --> + <!-- <img style="width: 60px;" v-else src="@/assets/img/瀹瑰櫒@1x.png" /> --> + </div> </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> @@ -37,50 +27,46 @@ </el-select> </el-form-item> <el-form-item label="鏃堕棿娈�"> - <el-select - v-model="sceneForm.workingTimes" - placeholder="璇烽�夋嫨" - size="mini" - > - <el-option - v-for="item in VideoManageData.TimeRules" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> + <el-select v-model="sceneForm.workTimeId" 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> <!-- 妫�娴嬪唴瀹� --> - <el-form-item label="妫�娴嬪唴瀹�"> - <el-select v-model="sceneForm.checkContents" multiple placeholder="璇烽�夋嫨" - size="mini"> - <el-option v-for="item in VideoManageData.checkOptions" :key="item.checkId" :label="item.fileName" - :value="item.checkId"></el-option> - </el-select> - </el-form-item> + <!-- <el-form-item label="妫�娴嬪唴瀹�"> + <el-select v-model="sceneForm.checkContents" multiple placeholder="璇烽�夋嫨" size="mini"> + <el-option v-for="item in VideoManageData.checkOptions" :key="item.checkId" :label="item.fileName" + :value="item.checkId"></el-option> + </el-select> + </el-form-item> --> - <!-- 棰勮瑙勫垯 --> - <el-form-item label="棰勮瑙勫垯"> - <el-select v-model="sceneForm.warningRules" placeholder="璇烽�夋嫨" - size="mini" multiple> - <el-option v-for="item in VideoManageData.ruleOptions" :key="item.ruleId" :label="item.fileName" - :value="item.ruleId"></el-option> - </el-select> - </el-form-item> - <!-- 鐭ヨ瘑搴� --> - <!-- <el-form-item label="鐭ヨ瘑搴�" - size="mini"> - <el-cascader v-model="sceneForm.knowsList" :options="VideoManageData.knowledgeOptions" :props="knowledgeProps" clearable - filterable placeholder="璇烽�夋嫨" class="knowledge-cascader" :show-all-levels="false"></el-cascader> - </el-form-item> --> + </div> <div class="right"> + + <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-input - v-model="sceneForm.desc" - type="textarea" - size="mini" - ></el-input> + <!-- <el-select v-model="sceneForm.warningRules" placeholder="璇烽�夋嫨" size="mini" multiple> + <el-option v-for="item in VideoManageData.ruleOptions" :key="item.ruleId" :label="item.fileName" + :value="item.ruleId"></el-option> + </el-select> --> + <!-- <el-select v-model="sceneForm.warningRules" placeholder="璇烽�夋嫨" size="mini" filterable> + <el-option v-for="item in VideoManageData.ruleOptions" :key="item.ruleId" :label="item.fileName" + :value="item.ruleId"></el-option> + </el-select> --> + <ruleSelect :initial-rules="VideoManageData.ruleOptions" :selected-rule="currentRule" + @rule-selected="handleRuleSelect" @rule-created="handleRuleCreate" /> + </el-form-item> + <!-- 鐭ヨ瘑搴� --> + <el-form-item label="鍏宠仈鐭ヨ瘑搴�" size="mini"> + <el-cascader v-model="sceneForm.knowsList" :options="VideoManageData.knowsList" :props="knowledgeProps" + clearable filterable placeholder="璇烽�夋嫨" class="knowledge-cascader" :show-all-levels="false"></el-cascader> + </el-form-item> + <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 @@ -124,37 +110,21 @@ :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-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" - ></el-table-column> - <el-table-column - label="浠诲姟鍚嶇О" - prop="scene_name" - align="center" - show-overflow-tooltip - ></el-table-column> + <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"></el-table-column> + <el-table-column label="浠诲姟鍚嶇О" prop="scene_name" align="center" show-overflow-tooltip></el-table-column> <el-table-column label="浜嬩欢绛夌骇" align="center"> <template slot-scope="scope"> <span>{{ scope.row.alarm_level | alarmLevel }}</span> @@ -169,49 +139,31 @@ <template slot-scope="scope"> <span v-html="scope.row.group_text"></span> </template> + </el-table-column>workTimeId --> + <el-table-column label="鏃堕棿娈�" prop="time_name" align="center"> + <template slot-scope="scope"> + <!-- {{(scope.row.workingTime || []).map(r => r.labelName).join(' / ') || ''}} --> + <span v-for="(tag, idx) in VideoManageData.TimeRules.filter(t => t.id === scope.row.workTimeId)" + :key="idx"> + {{ tag.name }}</span> + </template> + </el-table-column> + <!-- <el-table-column label="妫�娴嬪唴瀹�" prop="checkContent" align="center"> + <template slot-scope="scope"> + {{(scope.row.checkContent || []).map(r => r.fileName).join(' / ') || ''}} + </template> </el-table-column> --> - <el-table-column - label="鏃堕棿娈�" - prop="time_name" - align="center" - > + <el-table-column label="浠诲姟鎻忚堪" prop="warningRule" align="center"> <template slot-scope="scope"> - {{(scope.row.workingTime || []).map(r => r.labelName).join(' / ') || ''}} - </template> + {{(scope.row.warningRule || []).map(r => r.fileName).join(' / ') || ''}} + </template> </el-table-column> - <el-table-column - label="妫�娴嬪唴瀹�" - prop="checkContent" - align="center" - > + <el-table-column label="鍏宠仈鐭ヨ瘑搴�" prop="knowledge" align="center"> <template slot-scope="scope"> - {{(scope.row.checkContent || []).map(r => r.fileName).join(' / ') || ''}} - </template> + {{(scope.row.knowledge || []).map(r => r.fileName).join(' / ') || ''}} + </template> </el-table-column> - <el-table-column - label="棰勮瑙勫垯" - prop="warningRule" - align="center" - > - <template slot-scope="scope"> - {{(scope.row.warningRule || []).map(r => r.fileName).join(' / ') || ''}} - </template> - </el-table-column> - <el-table-column - label="鐭ヨ瘑搴�" - prop="knowledge" - align="center" - > - <template slot-scope="scope"> - {{(scope.row.knowledge || []).map(r => r.fileName).join(' / ') || ''}} - </template> - </el-table-column> - <el-table-column - label="鎻忚堪" - prop="desc" - align="center" - min-width="120" - ></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> @@ -224,29 +176,12 @@ </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_" - > - <i - class="iconfont iconshanchu4 btn-icon" - style="font-size: 28px; color: red" - @click="handleDelScene(scope.row)" - ></i> + <el-tooltip content="鍒犻櫎" :hide-after="700" 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> @@ -257,15 +192,18 @@ </template> <script> -import { saveCameraScene, deleteCameraScene,deleteCameraSceneTwo } from "@/api/scene"; +import { saveCameraScene, deleteCameraScene, deleteCameraSceneTwo } from "@/api/scene"; import RuleEditor from "@/components/subComponents/RuleEditor"; import SceneEditor from "./scene/Editor"; import { getSoundList } from "@/api/event"; +import ruleSelect from "../components/ruleSelect/ruleSelect.vue"; +import { forEach } from "jszip"; export default { name: "SceneRuleEditor", components: { SceneEditor, + ruleSelect, }, props: { seletedCameras: { @@ -310,6 +248,14 @@ this.editScene = false; }, }, + created() { + this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo")) + }, + computed: { + isGb28182() { + return this.TreeDataPool.selectedNode.cameraType === 1 + } + }, mounted() { // window.addEventListener('resize', this.windowSizeChange) this.getSounds(); @@ -319,6 +265,15 @@ }, data() { return { + timestamp: Date.now(), // 鏃堕棿鎴崇敤浜庡己鍒跺埛鏂板浘鐗� + userInfo: {}, + currentRule: null,// 鍒濆鏃犻�変腑瑙勫垯 + knowledgeProps: { + multiple: true, // 鏀寔澶氶�� + value: 'id', // 鎸囧畾閫夐」鍊煎瓧娈� + label: 'title', // 鎸囧畾閫夐」鏍囩瀛楁 + children: 'files' // 鎸囧畾瀛愰�夐」瀛楁锛堟枃浠跺垪琛級 + }, editScene: false, sceneTemplates: [], sceneForm: { @@ -333,7 +288,6 @@ }, templateSdks: [], templateRules: "", - ruleList: [], sceneNameStore: [], eventAudio: new Audio(), soundList: [], @@ -341,6 +295,23 @@ }; }, methods: { + handleRuleSelect(rule) { + // console.log('閫変腑瑙勫垯:', rule); + this.sceneForm.warningRules = [rule.ruleId] + this.sceneForm.ruleName = null + this.sceneForm.iconUrl = rule.iconUrl + // 鏇存柊鏃堕棿鎴冲己鍒跺埛鏂板浘鐗� + this.timestamp = Date.now(); + console.info(this.sceneForm.iconUrl) + // 鎵ц棰勮鍒ゆ柇閫昏緫 + }, + handleRuleCreate(newRule) { + // console.log('鍒涘缓鏂拌鍒�:', newRule); + this.sceneForm.ruleName = newRule.fileName + this.sceneForm.warningRules = [] + this.sceneForm.rules = [] + // 灏嗘柊瑙勫垯淇濆瓨鍒板悗绔� + }, getSoundById(id) { if (id) { let sound = this.soundList.find((item) => item.id == id); @@ -422,9 +393,10 @@ time_rule_id: "", voice: {}, voiceId: "", + iconUrl:"" }; - this.$refs.sceneEditor.cleanRule(); - this.$refs.sceneEditor.getSdkConnection(); + // this.$refs.sceneEditor.cleanRule(); + // this.$refs.sceneEditor.getSdkConnection(); }, handleCreate() { if (this.linkRule && this.TreeDataPool.selectedNodes.length < 2) { @@ -475,6 +447,17 @@ }, handleEdit(scene) { this.sceneForm = JSON.parse(JSON.stringify(scene)); + // 淇鐭ヨ瘑搴撴枃浠惰浆鎹㈤�昏緫 + if (scene.knowledge) { + const convertKnowledge = scene.knowledge.map(file => { + const library = this.VideoManageData.knowsList.find(lib => + lib.files.some(f => f.id === file.id) + ) + return library ? [library.id, file.id] : null + }).filter(item => item !== null) || [] + this.sceneForm.knowsList = convertKnowledge + // console.info("know:" + JSON.stringify(convertKnowledge)) + } // this.originSceneInfo = JSON.parse(JSON.stringify(scene)); this.sceneForm.voice = this.soundList.find((o) => o.id === scene.voiceId); @@ -488,7 +471,12 @@ this.templateSdks = selectedTpl.sdks; this.templateRules = JSON.stringify(scene.rules); - this.$refs.sceneEditor.editHandle(this.templateRules); + this.sceneForm.iconUrl = this.VideoManageData.ruleOptions.find(rue => + rue.ruleId === scene.warningRule[0].ruleId + ).iconUrl + this.currentRule = this.sceneForm.warningRule[0] + console.info(this.currentRule) + // this.$refs.sceneEditor.editHandle(this.templateRules);//绠楁硶鐩稿叧 }, validateForm() { @@ -504,16 +492,38 @@ message: "浜嬩欢绛夌骇涓嶈兘涓虹┖", }); return false; - } else if (!this.sceneForm.workingTimes) { + } else if (!this.sceneForm.workTimeId) { this.$notify({ type: "warning", message: "鏃堕棿娈典笉鑳戒负绌�", }); return false; } + // else if (!this.sceneForm.checkContents) { + // this.$notify({ + // type: "warning", + // message: "妫�娴嬪唴瀹逛笉鑳戒负绌�", + // }); + // return false; + // } + else if (!this.sceneForm.warningRules) { + this.$notify({ + type: "warning", + message: "棰勮瑙勫垯涓嶈兘涓虹┖", + }); + return false; + } + // else if (!this.sceneForm.knowsList) { + // this.$notify({ + // type: "warning", + // message: "鐭ヨ瘑搴撲笉鑳戒负绌�", + // }); + // return false; + // } return true; }, saveSceneRule() { + console.log(this.Camera) if (!this.validateForm()) { return; } @@ -524,19 +534,34 @@ // this.sceneForm.rules = editorResp.rules; // this.sceneForm.id = editorResp.id; // this.sceneForm.group_text = editorResp.text; - const workTimes = [this.sceneForm.workingTimes].map(id => { - const timeOption = this.VideoManageData.TimeRules.find(opt => opt.id === id) - return { - labelId: id, - labelName: timeOption ? timeOption.name : '' + // const workTimes = [this.sceneForm.workingTimes].map(id => { + // const timeOption = this.VideoManageData.TimeRules.find(opt => opt.id === id) + // return { + // labelId: id, + // labelName: timeOption ? timeOption.name : '' + // } + // }) + let fileIds = [] + if (this.sceneForm.knowsList) { + fileIds = this.sceneForm.knowsList.map( + path => { + // 鎻愬彇鏈�鍚庝竴绾х殑鏂囦欢ID骞惰浆鎹负鏁板瓧 + const id = path[path.length - 1]; + return Number(id); // 鎴栬�呬娇鐢� parseInt(id) 鎴� +id } - }) + ) + } this.sceneForm.taskName = this.sceneForm.scene_name this.sceneForm.eventLevel = this.sceneForm.alarm_level - this.sceneForm.checks = this.sceneForm.checkContents + // this.sceneForm.checks = this.sceneForm.checkContents + this.sceneForm.checks = [this.VideoManageData.checkOptions[0].checkId] this.sceneForm.rules = this.sceneForm.warningRules - this.sceneForm.workTimes = workTimes + // this.sceneForm.workTimes = workTimes this.sceneForm.taskDescription = this.sceneForm.desc + this.sceneForm.knows = fileIds, + this.sceneForm.createUser = this.userInfo.id + this.sceneForm.type = this.isGb28182?1:0 + // console.info(this.sceneForm) this.onSaveScene(this.sceneForm); }, @@ -551,8 +576,8 @@ // console.info("groupRule锛�"+JSON.stringify(groupRule)) deleteCameraSceneTwo( { - taskId: groupRule.taskId - } + taskId: groupRule.taskId + } ).then((res) => { this.$emit("delete-rule"); if (res && res.status === 200) { @@ -570,7 +595,7 @@ } }); }) - .catch(() => {}); + .catch(() => { }); }, cellStyle(obj) { if (obj.column.label == "绛栫暐" || obj.column.label == "浜嬩欢澹伴煶") { @@ -582,50 +607,92 @@ </script> <style lang="scss"> +.icon-preview-container { + margin-right: 240px; + width: 60px; + height: 60px; + border: 1px dashed #d9d9d9; + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + + .el-image { + width: 100%; + height: 100%; + } + + .el-icon-plus { + font-size: 28px; + color: #8c939d; + } + + &:hover { + border-color: #409EFF; + } +} + .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; + // min-width: 82px; + font-size: 13px; } + .el-form-item__content { text-align: left; + .el-input, .el-select { width: 400px !important; } } + textarea { - height: 92px; + height: 72px; + width: 400px; } } + .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; @@ -636,17 +703,21 @@ .el-input__suffix { right: 8px; } + span { cursor: pointer; } + .cell { padding-left: 0 !important; + i { outline: none !important; } } } - .el-table th.el-table__cell > .cell { + + .el-table th.el-table__cell>.cell { padding-right: 0; } } -- Gitblit v1.8.0