| | |
| | | :style="{ left: clientX + 'px', top: clientY + 'px' }" |
| | | > |
| | | <el-card :body-style="{ padding: '10px' }"> |
| | | <el-form :model="dialogForm" size="mini" :rules="rules" ref="dialogForm" label-width="70px"> |
| | | <el-form |
| | | :model="dialogForm" |
| | | size="mini" |
| | | :rules="rules" |
| | | ref="dialogForm" |
| | | label-width="70px" |
| | | > |
| | | <el-form-item label="名称:" prop="name"> |
| | | <el-input v-model="dialogForm.text" oninput="if(value.length>10)value=value.slice(0,10)"></el-input> |
| | | <el-input |
| | | v-model="dialogForm.text" |
| | | oninput="if(value.length>10)value=value.slice(0,10)" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <div class="text-center pb-2"> |
| | | <el-button size="mini" type="primary" @click="submitForm">保存</el-button> |
| | | <el-button size="mini" type="primary" @click="submitForm" |
| | | >保存</el-button |
| | | > |
| | | <el-button size="mini" @click="hideDialogBox">取消</el-button> |
| | | </div> |
| | | </el-form> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import ZTree from "./zTree/ztree" |
| | | import ZTree from "./zTree/ztree"; |
| | | |
| | | export default { |
| | | name: "GiantTreeMenu", |
| | | components: { |
| | | ZTree |
| | | ZTree, |
| | | }, |
| | | props: { |
| | | app: { |
| | | type: String, |
| | | default: "Video" |
| | | default: "Video", |
| | | }, |
| | | node: { |
| | | type: Array |
| | | type: Array, |
| | | }, |
| | | treeName: { |
| | | type: String, |
| | | default: "" |
| | | default: "", |
| | | }, |
| | | gb28181: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | height: { |
| | | type: Number, |
| | | default: 0 |
| | | default: 0, |
| | | }, |
| | | setting: { |
| | | type: Object, |
| | |
| | | clientX: 0, |
| | | clientY: 0, |
| | | dialogForm: { |
| | | text: "" |
| | | text: "", |
| | | }, |
| | | rules: { |
| | | text: [ |
| | | { required: true, message: "请输入节点名称", trigger: "change" }, |
| | | { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" } |
| | | ] |
| | | { min: 2, max: 10, message: "长度在2到10个字", trigger: "change" }, |
| | | ], |
| | | }, |
| | | curNodeTid: '', |
| | | curNodeTid: "", |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | if (newValue !== this.treeName) { |
| | | this.TreeDataPool.cleanTree(this.treeName); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | methods: { |
| | | handleCreated: function (ztreeObj) { |
| | | let _this = this; |
| | | this.ztreeObj = ztreeObj; |
| | | ztreeObj.expandAll(true) |
| | | ztreeObj.expandAll(true); |
| | | // onCreated 中操作ztreeObj对象展开第一个节点 |
| | | // ztreeObj.expandNode(ztreeObj.getNodes()[0], true); |
| | | |
| | | // 摄像机配置切换时, 设置选中状态 |
| | | if (this.TreeDataPool.selectedNode.id) { |
| | | // 取消所有多选的节点,仅保留当前单选的节点 |
| | | this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id] |
| | | this.TreeDataPool.selectedNodes = [this.TreeDataPool.selectedNode.id]; |
| | | this.curNodeTid = this.TreeDataPool.selectedNode.tId; |
| | | //摄像机信息更新信息后,如果节点位置有变tId就不准了,this.TreeDataPool.selectedNode此时还是旧的信息 |
| | | let ztreeNodes = ztreeObj.getNodes(); |
| | | //var curNodeTid = ''; |
| | | _this.findTidByIdFromArr(ztreeNodes); |
| | | this.TreeDataPool.selectedNode.tId = _this.curNodeTid; |
| | | let node = this.ztreeObj.getNodeByTId(this.TreeDataPool.selectedNode.tId) |
| | | let node = this.ztreeObj.getNodeByTId( |
| | | this.TreeDataPool.selectedNode.tId |
| | | ); |
| | | |
| | | // 多选时, 选中单选单击的节点 |
| | | if (this.TreeDataPool.multiple) { |
| | |
| | | this.ztreeObj.checkNode(node, true, false, false); |
| | | } |
| | | |
| | | this.ztreeObj.selectNode(node, false, true) |
| | | this.ztreeObj.selectNode(node, false, true); |
| | | } |
| | | }, |
| | | |
| | |
| | | this.findTidByIdFromArr(arr[i].children); |
| | | } |
| | | } |
| | | |
| | | }, |
| | | onDblClick(evt, treeId, item) { |
| | | if (item.type !== "4" || this.app !== "Camera") { |
| | |
| | | this.TreeDataPool.activeVideoIndex !== "" && |
| | | this.TreeDataPool.activeVideoIndex <= videoArr.length - 1 |
| | | ) { |
| | | this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this); |
| | | this.TreeDataPool.setVideoArr( |
| | | this.TreeDataPool.activeVideoIndex, |
| | | undefined, |
| | | this |
| | | ); |
| | | this.$nextTick(() => { |
| | | this.TreeDataPool.setVideoArr( |
| | | this.TreeDataPool.activeVideoIndex, |
| | | item, |
| | | this |
| | | ); |
| | | }) |
| | | }); |
| | | return; |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | if (nullVideoIndex === "") { |
| | | this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this); |
| | | this.TreeDataPool.setVideoArr( |
| | | this.TreeDataPool.activeVideoIndex, |
| | | undefined, |
| | | this |
| | | ); |
| | | this.$nextTick(() => { |
| | | this.TreeDataPool.setVideoArr( |
| | | this.TreeDataPool.activeVideoIndex, |
| | | item, |
| | | this |
| | | ); |
| | | }) |
| | | }); |
| | | } else { |
| | | // this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, undefined, this); |
| | | this.$nextTick(() => { |
| | |
| | | item, |
| | | this |
| | | ); |
| | | }) |
| | | }); |
| | | this.TreeDataPool.activeVideoIndex = nullVideoIndex; |
| | | } |
| | | }, |
| | |
| | | this.dialogForm = { |
| | | text: "", |
| | | method: "add", |
| | | node: node.id |
| | | node: node.id, |
| | | }; |
| | | this.showDialogBox(event); |
| | | }, |
| | |
| | | method: "edit", |
| | | node: node.id, |
| | | alias: node.alias, |
| | | gb28181: this.gb28181 |
| | | gb28181: this.gb28181, |
| | | }; |
| | | this.showDialogBox(event); |
| | | }, |
| | |
| | | }, |
| | | submitForm() { |
| | | // 提交新增或者编辑区域节点表单 |
| | | this.$refs.dialogForm.validate(valid => { |
| | | this.$refs.dialogForm.validate((valid) => { |
| | | if (valid) { |
| | | if (this.dialogForm.method == "add") { |
| | | this.TreeDataPool.add(this.dialogForm.text, this.dialogForm.node); |
| | |
| | | this.showDialog = true; |
| | | }, |
| | | itemClick(evt, treeId, treeNode) { |
| | | |
| | | this.TreeDataPool.selectedNode = treeNode; |
| | | this.TreeDataPool.treeType = this.treeName; |
| | | |
| | |
| | | itemCheck(evt, treeId, treeNode) { |
| | | this.TreeDataPool.selectedNode = treeNode; |
| | | this.TreeDataPool.treeType = this.treeName; |
| | | debugger |
| | | debugger; |
| | | // 多选 |
| | | // this.ztreeObj.checkNode(treeNode, true, false, false); |
| | | let checkedNodes = this.ztreeObj.getCheckedNodes(true); |
| | |
| | | this.TreeDataPool.countCheckedNodes(checkedNodes); |
| | | |
| | | // 保存一份数据 |
| | | this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes() |
| | | |
| | | this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes(); |
| | | }, |
| | | //展开 |
| | | itemExpand(e, id, node) { |
| | | delete this.TreeDataPool.foldNodeList[node.id] |
| | | delete this.TreeDataPool.foldNodeList[node.id]; |
| | | }, |
| | | // 折叠 |
| | | itemCollapse(e, id, node) { |
| | | this.TreeDataPool.foldNodeList[node.id] = true |
| | | this.TreeDataPool.foldNodeList[node.id] = true; |
| | | }, |
| | | dropNode(node, item, draggedItem, e) { |
| | | // console.log('dropNode', node, item, draggedItem); |
| | | this.TreeDataPool.dropNode(draggedItem.id, item.id) |
| | | this.TreeDataPool.dropNode(draggedItem.id, item.id); |
| | | }, |
| | | showCameraPic(nodeId) { |
| | | this.TreeDataPool.showBaseImage(nodeId) |
| | | } |
| | | } |
| | | this.TreeDataPool.showBaseImage(nodeId); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | |
| | | } |
| | | .tree-menu { |
| | | // max-width: 350px; |
| | | overflow-x: hidden; |
| | | overflow-x: auto; |
| | | overflow-y: hidden; |
| | | margin-bottom: 4px; |
| | | } |
| | |
| | | background: rgba(0, 0, 0, 0.4); |
| | | } |
| | | .tree-menu:hover { |
| | | overflow-x: visible; |
| | | overflow-y: auto; |
| | | margin-bottom: 0px; |
| | | } |
| | | </style> |
| | |
| | | </h2> |
| | | <p class="compearValue"> |
| | | <span |
| | | style="font-family: PingFangSC-Regular;font-size: 13px;color: #333333;letter-spacing: 0.28px;margin-right:10px" |
| | | >对比阈值</span> |
| | | style=" |
| | | font-family: PingFangSC-Regular; |
| | | font-size: 13px; |
| | | color: #333333; |
| | | letter-spacing: 0.28px; |
| | | margin-right: 10px; |
| | | " |
| | | >对比阈值</span |
| | | > |
| | | <el-input-number |
| | | size="mini" |
| | | v-model="VideoPhotoData.threshold" |
| | |
| | | ></el-input-number> |
| | | </p> |
| | | <div class="upload-img-box"> |
| | | <img :src="'/httpImage/'+tempUploadImg" alt="临时测试" v-show="!displayUpload" class="bigPhoto" /> |
| | | <img |
| | | :src="'/httpImage/' + tempUploadImg" |
| | | alt="临时测试" |
| | | v-show="!displayUpload" |
| | | class="bigPhoto" |
| | | /> |
| | | <el-upload |
| | | ref="upload" |
| | | :list-type="'picture-card'" |
| | |
| | | <i |
| | | ref="uploadIcon" |
| | | class="el-icon-upload" |
| | | style="color:#3D68E1;font-size:60px;position:relative;left:50px" |
| | | style=" |
| | | color: #3d68e1; |
| | | font-size: 60px; |
| | | position: relative; |
| | | left: 50px; |
| | | " |
| | | ></i> |
| | | <span |
| | | class="el-upload__text" |
| | | style="font-size:12px;color:#3D68E1;position:relative;top:25px;left:-30px" |
| | | style=" |
| | | font-size: 12px; |
| | | color: #3d68e1; |
| | | position: relative; |
| | | top: 25px; |
| | | left: -30px; |
| | | " |
| | | > |
| | | <em>点击选择上传图片</em> |
| | | </span> |
| | |
| | | <img width="100%" :src="dialogImageUrl" alt /> |
| | | </el-dialog>--> |
| | | </div> |
| | | <div class="res-img-box" v-if="resReady" :style="oneLine? 'height:95px':'height:185px'"> |
| | | <div class="single-box fl" v-for="(item, index) in realSmallPath" :key="index"> |
| | | <div |
| | | class="res-img-box" |
| | | v-if="resReady" |
| | | :style="oneLine ? 'height:95px' : 'height:185px'" |
| | | > |
| | | <div |
| | | class="single-box fl" |
| | | v-for="(item, index) in realSmallPath" |
| | | :key="index" |
| | | > |
| | | <img |
| | | :src="item |
| | | ? '/httpImage/'+item |
| | | : tempImg |
| | | " |
| | | :src="item ? '/httpImage/' + item : tempImg" |
| | | @click="selected($event,index)" |
| | | style="max-height:100%" |
| | | :style="index == clickNum ? 'border:1px solid #FF7733':''" |
| | | /> |
| | | <img class="select" v-show="index == clickNum" :src="selectedIcon" alt /> |
| | | <img |
| | | class="select" |
| | | v-show="index == clickNum" |
| | | :src="selectedIcon" |
| | | alt |
| | | /> |
| | | </div> |
| | | <div class="single-box fl" v-for="(item, index) in unrealSmallPath" :key="index+'t'"> |
| | | <img :src="item |
| | | ? item |
| | | : tempImg |
| | | " /> |
| | | <div |
| | | class="single-box fl" |
| | | v-for="(item, index) in unrealSmallPath" |
| | | :key="index + 't'" |
| | | > |
| | | <img :src="item ? item : tempImg" /> |
| | | </div> |
| | | </div> |
| | | <el-select |
| | |
| | | :value="item.key" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-button-group v-if="resReady" style="margin-top:10px;"> |
| | | <el-button type="info" size="small" @click="reUpload">重新上传</el-button> |
| | | <el-button type="primary" size="small" style="margin-left:10px" @click="searchStart">开始检索</el-button> |
| | | <el-button-group v-if="resReady" style="margin-top: 10px"> |
| | | <el-button type="info" size="small" @click="reUpload" |
| | | >重新上传</el-button |
| | | > |
| | | <el-button |
| | | type="primary" |
| | | size="small" |
| | | style="margin-left: 10px" |
| | | @click="searchStart" |
| | | >开始检索</el-button |
| | | > |
| | | </el-button-group> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import Card from "../subComponents/Card"; |
| | | import request from "@/scripts/httpRequest" |
| | | import request from "@/scripts/httpRequest"; |
| | | export default { |
| | | watch: { |
| | | "VideoPhotoData.tabsForUploadImg": function (value) { |
| | | this.selectChange() |
| | | this.selectChange(); |
| | | }, |
| | | "VideoPhotoData.uploadImg": { |
| | | handler(val) { |
| | | // console.log('val:::', val) |
| | | if (val !== "") { |
| | | this.tempUploadImg = val |
| | | this.realSmallPath = [val] |
| | | this.unrealSmallPath = [this.tempImg, this.tempImg] |
| | | this.resReady = true |
| | | this.displayUpload = false |
| | | this.tempUploadImg = val; |
| | | this.realSmallPath = [val]; |
| | | this.unrealSmallPath = [this.tempImg, this.tempImg]; |
| | | this.resReady = true; |
| | | this.displayUpload = false; |
| | | } |
| | | }, |
| | | immediate: true, |
| | | deep: true |
| | | } |
| | | deep: true, |
| | | }, |
| | | }, |
| | | computed: { |
| | | getResImg() { |
| | |
| | | arr.length = 9; |
| | | } |
| | | return arr; |
| | | } |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | realSmallPath: [], |
| | | unrealSmallPath: [], |
| | | oneLine: true, |
| | | multiSelect: false |
| | | multiSelect: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.selectChange() |
| | | this.selectChange(); |
| | | this.$nextTick(() => { |
| | | let scrollContain = this.$refs.rightSection |
| | | console.log("赋值容器:", scrollContain) |
| | | this.VideoPhotoData.scrollContainDom = scrollContain |
| | | }) |
| | | let scrollContain = this.$refs.rightSection; |
| | | console.log("赋值容器:", scrollContain); |
| | | this.VideoPhotoData.scrollContainDom = scrollContain; |
| | | }); |
| | | }, |
| | | methods: { |
| | | closeUploadImg() { |
| | | this.VideoPhotoData.uploadDiaplay = false |
| | | this.VideoPhotoData.clearStatus() |
| | | this.VideoPhotoData.uploadDiaplay = false; |
| | | this.VideoPhotoData.clearStatus(); |
| | | }, |
| | | selectChange() { |
| | | if (!this.compareTabs.includes("esData") && this.compareTabs.length > 0) { |
| | |
| | | this.VideoPhotoData.tabsForUploadImg[i].disabled = true; |
| | | } |
| | | } |
| | | this.$emit('labelDisabled', true) |
| | | this.$emit("labelDisabled", true); |
| | | return; |
| | | } |
| | | if (this.compareTabs.includes("esData")) { |
| | |
| | | this.VideoPhotoData.tabsForUploadImg[i].disabled = true; |
| | | } |
| | | } |
| | | this.$emit('labelDisabled', false) |
| | | this.$emit("labelDisabled", false); |
| | | } else { |
| | | for (let i = 0; i < this.VideoPhotoData.tabsForUploadImg.length; i++) { |
| | | this.VideoPhotoData.tabsForUploadImg[i].disabled = false; |
| | |
| | | } |
| | | }, |
| | | selected(e, index) { |
| | | this.clickNum = index |
| | | this.clickNum = index; |
| | | }, |
| | | async uploadImg(param) { |
| | | const fd = new FormData() |
| | | fd.append('file', param.file) |
| | | fd.append('picQuality', this.VideoPhotoData.threshold) |
| | | const fd = new FormData(); |
| | | fd.append("file", param.file); |
| | | fd.append("picQuality", this.VideoPhotoData.threshold); |
| | | let res = await request({ |
| | | method: 'post', |
| | | method: "post", |
| | | url: `/data/api-v/dbperson/faceExtract`, |
| | | data: fd |
| | | }) |
| | | this.unrealSmallPath.length = 0 |
| | | console.log("切图返回:", res) |
| | | data: fd, |
| | | }); |
| | | this.unrealSmallPath.length = 0; |
| | | console.log("切图返回:", res); |
| | | if (res.success) { |
| | | document.querySelector(".el-upload-list").querySelector("img").src = "/httpImage/" + res.data.uploadImage |
| | | document.querySelector(".el-upload-list").querySelector("img").src = |
| | | "/httpImage/" + res.data.uploadImage; |
| | | this.resReady = true; |
| | | this.realSmallPath = res.data.smImage |
| | | this.VideoPhotoData.isHaveRealSmallImg = res.data.smImage.length > 0 ? true : false |
| | | this.realSmallPath = res.data.smImage; |
| | | this.VideoPhotoData.isHaveRealSmallImg = |
| | | res.data.smImage.length > 0 ? true : false; |
| | | if (res.data.smImage.length > 3) { |
| | | this.oneLine = false |
| | | this.oneLine = false; |
| | | } else { |
| | | this.oneLine = true |
| | | this.oneLine = true; |
| | | } |
| | | if (res.data.smImage.length % 3 !== 0) { |
| | | // 用虚拟人像补全整行 |
| | | const length = res.data.smImage.length % 3 |
| | | console.log("看看length的值", length) |
| | | this.unrealSmallPath.length = 0 |
| | | const length = res.data.smImage.length % 3; |
| | | console.log("看看length的值", length); |
| | | this.unrealSmallPath.length = 0; |
| | | for (var i = 0; i < 3 - length; i++) { |
| | | this.unrealSmallPath.push(this.tempImg) |
| | | this.unrealSmallPath.push(this.tempImg); |
| | | } |
| | | } |
| | | } |
| | |
| | | this.$notify({ |
| | | title: "成功", |
| | | message: "图片上传成功!", |
| | | type: "success" |
| | | type: "success", |
| | | }); |
| | | this.resReady = true; |
| | | console.log("文件列表:", file, fileList) |
| | | console.log("上传的文件:", this.bigPhoto) |
| | | console.log("文件列表:", file, fileList); |
| | | console.log("上传的文件:", this.bigPhoto); |
| | | }, |
| | | beforeUpload() { |
| | | this.$refs.uploadIcon.parentNode.classList.add("s-display"); |
| | | console.log("上传之前文件:", this.bigPhoto) |
| | | console.log("上传之前文件:", this.bigPhoto); |
| | | }, |
| | | uploadError(err) { |
| | | this.$notify({ |
| | | title: "失败", |
| | | message: "图片上传失败!" + err.data, |
| | | type: "error" |
| | | message: err.msg, |
| | | type: "error", |
| | | }); |
| | | console.log("上传失败", err) |
| | | console.log("上传失败", err); |
| | | this.dialogImageUrl = ""; |
| | | this.dialogVisible = false; |
| | | this.$refs.uploadIcon.parentNode.classList.remove("s-display"); |
| | | }, |
| | | toAdd(item) { |
| | | this.CardList.addBaseList.push(item) |
| | | this.CardList.addBaseList.push(item); |
| | | }, |
| | | removeImg() { |
| | | this.resReady = false; |
| | | this.$refs.uploadIcon.parentNode.classList.remove("s-display"); |
| | | }, |
| | | reUpload() { |
| | | this.displayUpload = true |
| | | this.displayUpload = true; |
| | | this.$refs.upload.clearFiles(); |
| | | // this.dialogImageUrl = ""; |
| | | // this.dialogVisible = false; |
| | |
| | | title: "警告", |
| | | type: "warning", |
| | | message: "您还没有选择要比对的目标库", |
| | | }) |
| | | return |
| | | }); |
| | | return; |
| | | } |
| | | this.rightSectionDisplay = true; |
| | | this.VideoPhotoData.uploadType = true; |
| | | this.VideoPhotoData.picUrl = this.realSmallPath[this.clickNum] |
| | | this.VideoPhotoData.compareTabs = this.compareTabs |
| | | console.log("选的库:", this.compareTabs) |
| | | this.VideoPhotoData.showType = "findByPic" |
| | | this.VideoPhotoData.picUrl = this.realSmallPath[this.clickNum]; |
| | | this.VideoPhotoData.compareTabs = this.compareTabs; |
| | | console.log("选的库:", this.compareTabs); |
| | | this.VideoPhotoData.showType = "findByPic"; |
| | | if (this.displayUpload) { |
| | | this.VideoPhotoData.findPerson() |
| | | this.VideoPhotoData.findPerson(); |
| | | } else { |
| | | this.VideoPhotoData.findPerson2() |
| | | this.VideoPhotoData.findPerson2(); |
| | | } |
| | | }, |
| | | getDetails(ev, index) { |
| | | this.CardList.datalist = this.VideoPhotoData.persons |
| | | this.CardList.datalist = this.VideoPhotoData.persons; |
| | | let obj = this.CardList.datalist[index]; |
| | | this.CardList.details = Array.from( |
| | | new Set([...this.CardList.details, ...[obj]]) |
| | | ); |
| | | this.VideoPhotoData.activeCard = obj.activeObject.id |
| | | } |
| | | } |
| | | this.VideoPhotoData.activeCard = obj.activeObject.id; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="scss"> |
| | |
| | | <div class="sub-time-box"> |
| | | <div class="btn-control"> |
| | | <div class="el-tabs-edit"> |
| | | <span v-if="!editSlider" class="add-btn" @click="handleTabsEdit('','edit')"> |
| | | <span
|
| | | v-if="!editSlider"
|
| | | class="add-btn"
|
| | | @click="handleTabsEdit('', 'edit')"
|
| | | >
|
| | | <i class="el-icon-edit"></i> |
| | | 编辑 |
| | | </span> |
| | |
| | | </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> |
| | | <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}`" |
| | |
| | | export default { |
| | | name: "TimeSlider", |
| | | components: { |
| | | MultiRangeSlider |
| | | MultiRangeSlider,
|
| | | }, |
| | | props: { |
| | | type: { |
| | | default: "", |
| | | type: String |
| | | } |
| | | type: String,
|
| | | },
|
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | { 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" }] } |
| | | ] |
| | | { day: 7, time_range: [{ start: "00:00", end: "24:00" }] },
|
| | | ],
|
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | let newRule = { |
| | | id: "", |
| | | name: "时间段" + this.VideoManageData.TimeRules.length, |
| | | time_rule: this.allDay |
| | | time_rule: this.allDay,
|
| | | }; |
| | | this.updateTimeRule(newRule); |
| | | } |
| | | if (action === "remove") { |
| | | console.log();
|
| | |
|
| | | if (this.VideoManageData.TimeRules.length == 1) {
|
| | | this.$notify({
|
| | | title: "警告",
|
| | | message: "此时间段正在使用中,无法删除!",
|
| | | type: "warning",
|
| | | });
|
| | |
|
| | | return;
|
| | | }
|
| | |
|
| | | this.$confirm( |
| | | "此操作将永久删除该规则, 所关联的任务将会失效,是否继续?", |
| | | { |
| | |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | } |
| | | ).then(() => { |
| | | deleteTimeRule({ id: tabId }).then(rsp => { |
| | | )
|
| | | .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: "删除成功!" |
| | | message: "删除成功!",
|
| | | }); |
| | | } |
| | | }); |
| | | }).catch(() => { }); |
| | | })
|
| | | .catch(() => {});
|
| | | } |
| | | if (action == "edit") { |
| | | this.editSlider = true; |
| | |
| | | } |
| | | }, |
| | | windowSizeChange() { |
| | | let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth |
| | | this.cavasLength = timeSlideWidth |
| | | console.log("时间组件宽度:", timeSlideWidth) |
| | | let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth;
|
| | | this.cavasLength = timeSlideWidth;
|
| | | console.log("时间组件宽度:", timeSlideWidth);
|
| | | }, |
| | | updateTimeRule(rule) { |
| | | saveTimeRule(rule).then(rsp => { |
| | | saveTimeRule(rule).then((rsp) => {
|
| | | if (rsp && rsp.success) { |
| | | this.VideoManageData.getTimeRule(); |
| | | this.activeTab = rsp.data.id; |
| | |
| | | cancelButtonText: "取消", |
| | | inputValue: item.name, |
| | | inputPattern: /^[\S]{1,16}$/, |
| | | inputErrorMessage: "名称不能包含空格" |
| | | }).then(({ value }) => { |
| | | inputErrorMessage: "名称不能包含空格",
|
| | | })
|
| | | .then(({ value }) => {
|
| | | this.updateTimeRule({ |
| | | id: item.id, |
| | | name: value, |
| | | time_rule: JSON.parse(item.time_rule) |
| | | time_rule: JSON.parse(item.time_rule),
|
| | | }); |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "时间规则名称修改成功" |
| | | message: "时间规则名称修改成功",
|
| | | }); |
| | | }).catch(() => { }); |
| | | })
|
| | | .catch(() => {});
|
| | | } |
| | | } |
| | | } |
| | | },
|
| | | },
|
| | | }; |
| | | </script> |
| | | <style lang='scss'> |
| | |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | |
| | | <span style="line-height: 38px;">推送服务器</span> |
| | | <span style="line-height: 38px">推送服务器</span>
|
| | | <div class="icon-btn" v-if="urls.length < 1" @click="addUrl()"> |
| | | <i class="el-icon-circle-plus-outline"></i> |
| | | <span> 添加接口地址</span> |
| | | </div> |
| | | <div v-for="(item,index) in urls" :key="item.hash" class="flex-box server-url"> |
| | | <div
|
| | | v-for="(item, index) in urls"
|
| | | :key="item.hash"
|
| | | class="flex-box server-url"
|
| | | >
|
| | | <div> |
| | | <el-checkbox v-model="item.enable"></el-checkbox> |
| | | <span class="ml20">{{'URL '}}</span> |
| | | <el-input v-model="item.url" style="width:360px;margin-left:0px;" size="small"></el-input> |
| | | <span class="ml20">{{ "URL " }}</span>
|
| | | <el-input
|
| | | v-model="item.url"
|
| | | style="width: 360px; margin-left: 0px"
|
| | | size="small"
|
| | | ></el-input>
|
| | | </div> |
| | | <div class="server-add"> |
| | | <i |
| | |
| | | </div> |
| | | |
| | | <el-form-item label="联动方式" style="margin-top: 20px;width:100"> |
| | | <el-select v-model="taskEditData.lineWay" placeholder="请选择" size="small"> |
| | | <el-select
|
| | | v-model="taskEditData.lineWay"
|
| | | placeholder="请选择"
|
| | | size="small"
|
| | | >
|
| | | <el-option |
| | | v-for="item in taskEditData.lineOptions" |
| | | :key="item.value" |
| | |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="标签"> |
| | | <el-radio v-model="taskEditData.radioValue" label="1">满足全部</el-radio> |
| | | <el-radio v-model="taskEditData.radioValue" label="2">满足任意一个</el-radio> |
| | | <el-radio v-model="taskEditData.radioValue" label="1"
|
| | | >满足全部</el-radio
|
| | | >
|
| | | <el-radio v-model="taskEditData.radioValue" label="2"
|
| | | >满足任意一个</el-radio
|
| | | >
|
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-for="(rule,index) in dataList" :key="index" style="margin-top:10px"> |
| | | <div
|
| | | v-for="(rule, index) in dataList"
|
| | | :key="index"
|
| | | style="margin-top: 10px"
|
| | | >
|
| | | <el-row :gutter="20"> |
| | | <!-- 主题 --> |
| | | <el-col :span="4"> |
| | |
| | | |
| | | <!-- 操作符 --> |
| | | <el-col :span="4"> |
| | | <el-select v-model="rule.operator" placeholder="请选择" size="small"> |
| | | <el-select
|
| | | v-model="rule.operator"
|
| | | placeholder="请选择"
|
| | | size="small"
|
| | | >
|
| | | <el-option label="==" value="="></el-option> |
| | | </el-select> |
| | | </el-col> |
| | |
| | | <!-- 过滤值 --> |
| | | <el-col :span="4"> |
| | | <div v-if="rule.operator_type === 'custom'"> |
| | | <el-input v-model="rule.rule_value" placeholder="请输入内容" size="small"></el-input> |
| | | <el-input
|
| | | v-model="rule.rule_value"
|
| | | placeholder="请输入内容"
|
| | | size="small"
|
| | | ></el-input>
|
| | | </div> |
| | | <div v-else> |
| | | <el-select |
| | |
| | | v-show="index === dataList.length -1" |
| | | class="el-icon-circle-plus-outline" |
| | | @click="addRule()" |
| | | style="color:#3D68E1" |
| | | style="color: #3d68e1"
|
| | | ></i> |
| | | </div> |
| | | </el-col> |
| | |
| | | </div> |
| | | <div class="config-item"> |
| | | <b>推送字段</b> |
| | | <el-button type="primary" size="mini" @click="openPushSetDialog">设置</el-button> |
| | | <el-button type="primary" size="mini" @click="openPushSetDialog"
|
| | | >设置</el-button
|
| | | >
|
| | | </div> |
| | | <div class="save-btn"> |
| | | <el-button type="info" size="small" @click="onCancle" style="color:#222">取消</el-button> |
| | | <el-button type="primary" @click="eventPushsSave" size="small">保存</el-button> |
| | | <el-button
|
| | | type="info"
|
| | | size="small"
|
| | | @click="onCancle"
|
| | | style="color: #222"
|
| | | >取消</el-button
|
| | | >
|
| | | <el-button type="primary" @click="eventPushsSave" size="small"
|
| | | >保存</el-button
|
| | | >
|
| | | </div> |
| | | </div> |
| | | <el-dialog |
| | |
| | | <div slot="title" class="slot-title"> |
| | | <p>请选择想要推送的字段</p> |
| | | <div class="right"> |
| | | <el-checkbox v-model="allFieldChecked" @change="allCheckChange"></el-checkbox> |
| | | <el-checkbox
|
| | | v-model="allFieldChecked"
|
| | | @change="allCheckChange"
|
| | | ></el-checkbox>
|
| | | </div> |
| | | </div> |
| | | <div class="check-area" v-for="configObj in tempPushSet" :key="configObj.id"> |
| | | <div
|
| | | class="check-area"
|
| | | v-for="configObj in tempPushSet"
|
| | | :key="configObj.id"
|
| | | >
|
| | | <div class="header"> |
| | | <div class="title">{{configObj.name}}</div> |
| | | <div class="right"> |
| | | <el-checkbox v-model="configObj.checked" @change="toggleConfigCheck(configObj)">全选</el-checkbox> |
| | | <el-checkbox
|
| | | v-model="configObj.checked"
|
| | | @change="toggleConfigCheck(configObj)"
|
| | | >全选</el-checkbox
|
| | | >
|
| | | </div> |
| | | </div> |
| | | <div class="flex-box flex-wrap"> |
| | | <div class="param flex-box" v-for="param in configObj.children" :key="param.id"> |
| | | <el-checkbox v-model="param.checked" @change="checkChildren"></el-checkbox> |
| | | <div
|
| | | class="param flex-box"
|
| | | v-for="param in configObj.children"
|
| | | :key="param.id"
|
| | | >
|
| | | <el-checkbox
|
| | | v-model="param.checked"
|
| | | @change="checkChildren"
|
| | | ></el-checkbox>
|
| | | <span class="param-name">{{param.name}}</span> |
| | | <el-input |
| | | v-model="param.alias" |
| | | size="mini" |
| | | :ref="`input_${param.id}`" |
| | | @input="varifyField(param)" |
| | | :style="{color:param.error?'red':'',borderColor:param.error?'red':''}" |
| | | :style="{
|
| | | color: param.error ? 'red' : '',
|
| | | borderColor: param.error ? 'red' : '',
|
| | | }"
|
| | | ></el-input> |
| | | </div> |
| | | </div> |
| | |
| | | type="primary" |
| | | :disabled="disabledPushFieldSet" |
| | | @click="submitPushFieldSet" |
| | | >保存</el-button> |
| | | >保存</el-button
|
| | | >
|
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | |
| | | import { eventPushsSave, findByEventTopic, getPushSet } from "@/api/event"; |
| | | import { findDictionaryByType, findDictionaryByID } from "@/api/dictionary"; |
| | | import { getTaskList } from "@/api/search"; |
| | |
| | | type: Object, |
| | | default: () => { |
| | | return {}; |
| | | } |
| | | } |
| | | },
|
| | | },
|
| | | }, |
| | | computed: { |
| | | urls() { |
| | | return this.taskEditData.urls |
| | | } |
| | | return this.taskEditData.urls;
|
| | | },
|
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | topicArgOptions: {}, |
| | | operatorOptions: {}, |
| | | operatorTypeOpionts: {}, |
| | | ruleValueOptions: [] |
| | | ruleValueOptions: [],
|
| | | }, |
| | | pushFieldDialog: false, |
| | | tempPushSet: [], |
| | |
| | | this.taskEditData.name = newVal.name; |
| | | this.taskEditData.time = [ |
| | | this.eventObject.time_start, |
| | | this.eventObject.time_end |
| | | this.eventObject.time_end,
|
| | | ]; |
| | | this.taskEditData.serverIp = newVal.ip_ports; |
| | | this.taskEditData.urls = newVal.urls; |
| | |
| | | this.taskEditData.radioValue = newVal.is_satisfy_all ? "1" : "2"; |
| | | |
| | | if (!this.taskEditData.urls) { |
| | | this.$set(this.taskEditData, "urls", []) |
| | | this.$set(this.taskEditData, "urls", []);
|
| | | } |
| | | //this.taskEditData.push_set = this.eventObject.push_set; |
| | | if (!this.eventObject.push_set.length) { |
| | | this.$set(this.taskEditData, "push_set", this.pushFields) |
| | | this.$set(this.taskEditData, "push_set", this.pushFields);
|
| | | } else { |
| | | this.$set(this.taskEditData, "push_set", this.eventObject.push_set) |
| | | this.$set(
|
| | | this.taskEditData,
|
| | | "push_set",
|
| | | this.eventObject.push_set
|
| | | );
|
| | | } |
| | | if (newVal.rules) { |
| | | newVal.rules.forEach(element => { |
| | | let newRule = Object.assign(JSON.parse(JSON.stringify(this.baseRule)), element) |
| | | this.dataList.push(newRule) |
| | | newVal.rules.forEach((element) => {
|
| | | let newRule = Object.assign(
|
| | | JSON.parse(JSON.stringify(this.baseRule)),
|
| | | element
|
| | | );
|
| | | this.dataList.push(newRule);
|
| | | this.selectTopic(newRule); |
| | | this.selectOperator(newRule); |
| | | }) |
| | | });
|
| | | } |
| | | } |
| | | } |
| | | }, |
| | | deep: true |
| | | deep: true,
|
| | | }, |
| | | tempPushSet: { |
| | | handler(n, o) { |
| | | let _this = this; |
| | | let flag = false; |
| | | n.forEach(configObj => { |
| | | let notChecked = configObj.children.find(param => !param.checked); |
| | | n.forEach((configObj) => {
|
| | | let notChecked = configObj.children.find((param) => !param.checked);
|
| | | if (!notChecked) { |
| | | configObj.checked = true; |
| | | } else { |
| | | configObj.checked = false; |
| | | } |
| | | let someoneChecked = configObj.children.find(param => param.checked); |
| | | let someoneChecked = configObj.children.find(
|
| | | (param) => param.checked
|
| | | );
|
| | | if (someoneChecked) { |
| | | flag = true |
| | | flag = true;
|
| | | } |
| | | |
| | | }); |
| | | if (flag) { |
| | | this.disabledPushFieldSet = false; |
| | |
| | | this.disabledPushFieldSet = true; |
| | | } |
| | | }, |
| | | deep: true |
| | | } |
| | | deep: true,
|
| | | },
|
| | | }, |
| | | created() { |
| | | this.reAdd(); |
| | |
| | | openPushSetDialog() { |
| | | this.pushFieldDialog = true; |
| | | this.tempPushSet = JSON.parse(JSON.stringify(this.taskEditData.push_set)); |
| | | this.checkFlag() |
| | | this.checkFlag();
|
| | | }, |
| | | checkFlag() { |
| | | // debugger |
| | | let flag = true |
| | | this.tempPushSet.forEach(item => { |
| | | let flag = true;
|
| | | this.tempPushSet.forEach((item) => {
|
| | | if (item.checked == false) { |
| | | flag = false |
| | | flag = false;
|
| | | } |
| | | }); |
| | | this.allFieldChecked = flag |
| | | this.allFieldChecked = flag;
|
| | | }, |
| | | checkChildren(val) { |
| | | console.log(val, 12121); |
| | | if (val == false) { |
| | | this.allFieldChecked = false |
| | | this.allFieldChecked = false;
|
| | | } else if (val == true && this.allFieldChecked == false) { |
| | | this.$nextTick(() => { |
| | | this.checkFlag() |
| | | }) |
| | | this.checkFlag();
|
| | | });
|
| | | } |
| | | |
| | | }, |
| | | varifyField(param) { |
| | | var reg = /^[A-Za-z]+[0-9-_]?$/; |
| | | if (!reg.test(param.alias)) { |
| | | this.$message('请输入合法字段名'); |
| | | this.$message("请输入合法字段名");
|
| | | param.error = true; |
| | | } else { |
| | | param.error = false; |
| | |
| | | // this.pushFields.forEach(configObj => { |
| | | // configObj.children.find(param => param.error) |
| | | // }) |
| | | |
| | | }, |
| | | canclePushFieldSet() { |
| | | this.pushFieldDialog = false; |
| | | }, |
| | | allCheckChange(val) { |
| | | |
| | | this.tempPushSet.forEach(function (item) { |
| | | item.checked = val |
| | | item.checked = val;
|
| | | item.children.forEach(function (child) { |
| | | child.checked = val |
| | | }) |
| | | }) |
| | | child.checked = val;
|
| | | });
|
| | | });
|
| | | }, |
| | | submitPushFieldSet() { |
| | | let flag = false; |
| | | //this.pushFields.forEach(configObj => { |
| | | this.tempPushSet.forEach(configObj => { |
| | | let errorOne = configObj.children.find(param => param.checked && param.error); |
| | | this.tempPushSet.forEach((configObj) => {
|
| | | let errorOne = configObj.children.find(
|
| | | (param) => param.checked && param.error
|
| | | );
|
| | | if (errorOne) { |
| | | this.$notify({ |
| | | type: 'error', |
| | | message: '请将选中字段输入合法字段名' |
| | | }) |
| | | flag = true |
| | | type: "error",
|
| | | message: "请将选中字段输入合法字段名",
|
| | | });
|
| | | flag = true;
|
| | | } |
| | | }); |
| | | if (flag) { |
| | | //NO SUBMIT |
| | | return |
| | | return;
|
| | | } |
| | | |
| | | this.taskEditData.push_set = this.tempPushSet; |
| | | this.pushFieldDialog = false; |
| | | |
| | | // 保存规则 |
| | | this.eventPushsSave() |
| | | this.eventPushsSave();
|
| | | }, |
| | | toggleConfigCheck(configObj) { |
| | | |
| | | configObj.children.forEach(child => { |
| | | child.checked = configObj.checked |
| | | }) |
| | | this.checkFlag() |
| | | configObj.children.forEach((child) => {
|
| | | child.checked = configObj.checked;
|
| | | });
|
| | | this.checkFlag();
|
| | | }, |
| | | getPushFields() { |
| | | let _this = this; |
| | | getPushSet().then(res => { |
| | | getPushSet().then((res) => {
|
| | | _this.pushFields = res.data; |
| | | }) |
| | | });
|
| | | // this.pushFields = [ |
| | | // { id: 'sxjxx', name: '摄像机信息', checked: false, alias: '', |
| | | // children: [ |
| | |
| | | // { id: 'cjxx', name: '场景信息', checked: false, alias: '', |
| | | // children: [{ name: '场景ID', checked: false, alias: 'taskId', id: 'tskId', children: null }] }, |
| | | // ]; |
| | | |
| | | }, |
| | | addUrl() { |
| | | this.taskEditData.urls.push({ |
| | |
| | | if (this.taskEditData.urls.length < 1) { |
| | | this.$notify({ |
| | | type: "warning", |
| | | message: "请配置至少一台推送服务器" |
| | | message: "请配置至少一台推送服务器",
|
| | | }); |
| | | return; |
| | | } |
| | |
| | | if (this.taskEditData.urls[i].url.length < 1) { |
| | | this.$notify({ |
| | | type: "warning", |
| | | message: "接口URL地址不允许为空" |
| | | message: "接口URL地址不允许为空",
|
| | | }); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | // 拼接字符串 |
| | | let ruleDesc = [] |
| | | this.dataList.forEach(i => { |
| | | let ruleDesc = [];
|
| | | this.dataList.forEach((i) => {
|
| | | let str = ""; |
| | | if (i.topic_type) { |
| | | str += this.getNameByValue(i.topicTypeOptions, i.topic_type); |
| | |
| | | if (i.topic_arg) { |
| | | str += this.getNameByValue(i.topicArgOptions, i.topic_arg); |
| | | } |
| | | if (i.operator === '==') { |
| | | str += ' = '; |
| | | if (i.operator === "==") {
|
| | | str += " = ";
|
| | | } |
| | | |
| | | if (i.rule_value === "all*all") { |
| | |
| | | } |
| | | }); |
| | | // 处理规则列表数据结构 |
| | | let ruleList = this.dataList.map(i => { |
| | | let ruleList = this.dataList.map((i) => {
|
| | | return { |
| | | topic_type: i.topic_type, |
| | | topic_arg: i.topic_arg, |
| | | operator: i.operator, |
| | | operator_type: i.operator_type, |
| | | rule_value: i.rule_value |
| | | } |
| | | rule_value: i.rule_value,
|
| | | };
|
| | | }); |
| | | |
| | | let json = { |
| | |
| | | urls: this.taskEditData.urls, |
| | | is_satisfy_all: this.taskEditData.radioValue === "1", |
| | | link_type: this.taskEditData.lineWay, |
| | | push_set: this.taskEditData.push_set |
| | | push_set: this.taskEditData.push_set,
|
| | | }; |
| | | |
| | | let res = await eventPushsSave(json); |
| | |
| | | this.$emit("updateList", res.data.id); |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "保存成功" |
| | | message: "保存成功",
|
| | | }); |
| | | } |
| | | }, |
| | |
| | | async findByType() { |
| | | let res = await findDictionaryByType(); |
| | | if (res && res.success) { |
| | | this.dictionary = Object.assign(this.dictionary, res.data) |
| | | this.baseRule.topicTypeOptions = this.dictionary.EVENTRULETOPIC |
| | | this.baseRule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE |
| | | this.dictionary['alarmLevel'] = this.dictionary.ALARMLEVEL.map(el => { |
| | | this.dictionary = Object.assign(this.dictionary, res.data);
|
| | | this.baseRule.topicTypeOptions = this.dictionary.EVENTRULETOPIC;
|
| | | this.baseRule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE;
|
| | | this.dictionary["alarmLevel"] = this.dictionary.ALARMLEVEL.map((el) => {
|
| | | return { |
| | | name: el.name, |
| | | value: el.name |
| | | } |
| | | }) |
| | | value: el.name,
|
| | | };
|
| | | });
|
| | | } |
| | | }, |
| | | async getCameras() { |
| | | let rsp = await findByEventTopic({ topic: 'camera', type: 'name' }); |
| | | let rsp = await findByEventTopic({ topic: "camera", type: "name" });
|
| | | if (rsp && rsp.success) { |
| | | this.dictionary['camera'] = rsp.data; |
| | | this.dictionary["camera"] = rsp.data;
|
| | | } |
| | | |
| | | rsp = await findByEventTopic({ topic: 'dbtable' }); |
| | | rsp = await findByEventTopic({ topic: "dbtable" });
|
| | | if (rsp && rsp.success) { |
| | | this.dictionary['dbtable'] = rsp.data.map(el => { |
| | | this.dictionary["dbtable"] = rsp.data.map((el) => {
|
| | | return { |
| | | name: el.name, |
| | | value: el.name |
| | | } |
| | | }) |
| | | value: el.name,
|
| | | };
|
| | | });
|
| | | } |
| | | }, |
| | | async getTasks() { |
| | | this.dictionary['task'] = [] |
| | | this.dictionary["task"] = [];
|
| | | let rsp = await getTaskList(); |
| | | if (rsp && rsp.success) { |
| | | let hash = {} |
| | | rsp.data.forEach(task => { |
| | | let hash = {};
|
| | | rsp.data.forEach((task) => {
|
| | | if (!task.isDelete && !hash[task.name]) { |
| | | this.dictionary['task'].push({ |
| | | this.dictionary["task"].push({
|
| | | value: task.name, |
| | | name: task.name |
| | | }) |
| | | name: task.name,
|
| | | });
|
| | | hash[task.name] = true; |
| | | } |
| | | }) |
| | | });
|
| | | } |
| | | }, |
| | | // 新建配置 |
| | |
| | | }, |
| | | // 规则中下拉框的选择回调 |
| | | selectTopic(rule, resetNext = false) { |
| | | rule.topicTypeOptions.forEach(element => { |
| | | rule.topicTypeOptions.forEach((element) => {
|
| | | if (element.value === rule.topic_type) { |
| | | rule.topicArgOptions = element.children; |
| | | if (resetNext) { |
| | |
| | | }); |
| | | }, |
| | | selectArg(rule, resetNext = false) { |
| | | debugger |
| | | let argInfo = rule.topicArgOptions.filter(arg => { |
| | | debugger;
|
| | | let argInfo = rule.topicArgOptions.filter((arg) => {
|
| | | return arg.value === rule.topic_arg; |
| | | }) |
| | | });
|
| | | |
| | | if (argInfo.length > 0) { |
| | | let desc = argInfo[0].description.split(","); |
| | | if (desc.length > 0) { |
| | | rule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE.filter(el => { |
| | | rule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE.filter(
|
| | | (el) => {
|
| | | return desc.indexOf(el.value) >= 0; |
| | | }) |
| | | }
|
| | | );
|
| | | } |
| | | } |
| | | |
| | | if (resetNext) { |
| | | rule.operator_type = rule.operatorTypeOpionts[rule.operatorTypeOpionts.length - 1].value; |
| | | rule.operator_type =
|
| | | rule.operatorTypeOpionts[rule.operatorTypeOpionts.length - 1].value;
|
| | | this.selectOperator(rule, resetNext); |
| | | } |
| | | }, |
| | | selectOperator(rule, resetNext = false) { |
| | | if (rule.operator_type === "option") { |
| | | rule.ruleValueOptions = this.dictionary[rule.topic_type] ? this.dictionary[rule.topic_type] : []; |
| | | rule.ruleValueOptions = this.dictionary[rule.topic_type]
|
| | | ? this.dictionary[rule.topic_type]
|
| | | : [];
|
| | | |
| | | if (rule.rule_value != "") { |
| | | rule.rule_values = rule.rule_value.split(","); |
| | |
| | | rule.rule_values[i] = "空"; |
| | | } |
| | | } |
| | | |
| | | console.log("-----------");
|
| | | this.setOptionsDisable(rule); |
| | | } |
| | | |
| | |
| | | rule.rule_value = val.join(","); |
| | | }, |
| | | setOptionsDisable(rule) { |
| | | let isAllSelect = (rule.rule_values.indexOf("全部") >= 0); |
| | | let isNullSelect = (rule.rule_values.indexOf("空") >= 0); |
| | | let isAllSelect = rule.rule_values.indexOf("全部") >= 0;
|
| | | let isNullSelect = rule.rule_values.indexOf("空") >= 0;
|
| | | console.log(rule.rule_values);
|
| | | |
| | | rule.ruleValueOptions.forEach(opt => { |
| | | rule.ruleValueOptions.forEach((opt) => {
|
| | | if (!rule.rule_values.length) { |
| | | opt.disabled = false; |
| | | return |
| | | } |
| | | |
| | | if (opt.name === "全部") { |
| | | opt.disabled = !isAllSelect; |
| | | return |
| | | return;
|
| | | } |
| | | |
| | | if (opt.name === "空") { |
| | | opt.disabled = !isNullSelect; |
| | | return |
| | | return;
|
| | | } |
| | | |
| | | opt.disabled = (isAllSelect || isNullSelect); |
| | | }) |
| | | opt.disabled = isAllSelect || isNullSelect;
|
| | | });
|
| | | }, |
| | | // 根据value返回对应的name |
| | | getNameByValue(arr, value) { |
| | | let s = arr.find(item => { |
| | | let s = arr.find((item) => {
|
| | | return item.value === value; |
| | | }); |
| | | |
| | |
| | | name: "", |
| | | time: [ |
| | | this.$moment().format("YYYY-MM-DD 00:00:00"), |
| | | this.$moment().format("YYYY-MM-DD HH:mm:ss") |
| | | this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
| | | ], |
| | | serverIp: [ |
| | | { |
| | | enable: true, |
| | | server_ip: "", |
| | | port: 0 |
| | | } |
| | | port: 0,
|
| | | },
|
| | | ], |
| | | urls: [ |
| | | ], |
| | | urls: [],
|
| | | lineWay: "", |
| | | lineOptions: [ |
| | | { |
| | | value: "001", |
| | | label: "IP广播" |
| | | } |
| | | label: "IP广播",
|
| | | },
|
| | | ], |
| | | radioValue: "1", |
| | | eventTxt: "", |
| | | push_set: this.pushFields |
| | | push_set: this.pushFields,
|
| | | }; |
| | | this.dataList = []; |
| | | }, |
| | | onCancle() { |
| | | this.$emit('onCancle') |
| | | } |
| | | } |
| | | this.$emit("onCancle");
|
| | | },
|
| | | },
|
| | | }; |
| | | </script> |
| | | <style lang="scss"> |
| | |
| | | :visible.sync="showPasswdForm" |
| | | :append-to-body="true" |
| | | width="500px" |
| | | @close="cancelPasswordChange" |
| | | > |
| | | <el-form |
| | | :model="passwdForm" |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="info" @click="showPasswdForm = false" size="small" |
| | | <el-button type="info" size="small" @click="cancelPasswordChange" |
| | | >取 消</el-button |
| | | > |
| | | <el-button type="primary" @click="submitForm('ruleForm')" size="small" |
| | |
| | | ); |
| | | }, |
| | | updateSysNow() { |
| | | window.parent.postMessage( |
| | | { msg: `toVindicate?autoUpdate=1` }, |
| | | "*" |
| | | ); |
| | | window.parent.postMessage({ msg: `toVindicate?autoUpdate=1` }, "*"); |
| | | }, |
| | | delaySysRemind(sec) { |
| | | delayUpgradeNotice({ |
| | |
| | | }); |
| | | }, |
| | | toggleShowWifi() { |
| | | this.notificationCenterVisible = false; |
| | | this.showWifi = !this.showWifi; |
| | | this.$store.commit( |
| | | "desktop/changeNotificationCenterVisible", |
| | | this.notificationCenterVisible |
| | | ); |
| | | }, |
| | | submitForm(formName) { |
| | | this.$refs[formName].validate((valid) => { |
| | |
| | | oldPwd: this.passwdForm.oldPwd, |
| | | newPwd: this.passwdForm.checkPwd, |
| | | }; |
| | | updatePwd(json).then((res) => { |
| | | updatePwd(json) |
| | | .then((res) => { |
| | | this.$notify({ |
| | | type: res.success ? "success" : "error", |
| | | message: res.msg, |
| | | }); |
| | | if (res.success) { |
| | | this.showPasswdForm = false; |
| | | this.cancelPasswordChange(); |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: err.msg, |
| | | }); |
| | | }); |
| | | } else { |
| | | console.log("error submit!!"); |
| | |
| | | console.log("退出失败"); |
| | | }); |
| | | }, |
| | | cancelPasswordChange() { |
| | | this.showPasswdForm = false; |
| | | this.passwdForm = { |
| | | oldPwd: "", |
| | | newPwd: "", |
| | | checkPwd: "", |
| | | }; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | <div class="all">
|
| | | <!-- -->
|
| | | <div class="cluster-guanli" v-if="showCurCluster && isHasColony">
|
| | | <!-- <cloud-node :nodes="innerNodes"></cloud-node> -->
|
| | | <cloud-node :nodes="innerNodes"></cloud-node>
|
| | | <net-node :innerNodes="innerNodes"></net-node>
|
| | |
|
| | | <div class="cls-bar">视频分析集群管理</div>
|
| | |
| | | </el-input>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | <div class="clu-list">
|
| | | <!-- :class="pickedNodeI == index ? 'clu-item-active' : ''" -->
|
| | | <div
|
| | | class="clu-item"
|
| | | v-for="(item, index) in members"
|
| | | :key="index"
|
| | | @click="pickNode(index)"
|
| | | >
|
| | | <i class="iconfont"></i>
|
| | | {{ item.Address }}
|
| | | </div>
|
| | | </div>
|
| | | <div class="btns">
|
| | | <div class="ok" @click="join('joinForm')">加入集群</div>
|
| | | </div>
|
| | |
| | | updateClusterName,
|
| | | joinCluster,
|
| | | } from "@/api/clusterManage";
|
| | | // import cloudNode from "../components/CloudNode";
|
| | | import cloudNode from "../components/CloudNode";
|
| | | import NetNode from "../components/NetNode";
|
| | | import ipInput from "../components/IPInput";
|
| | | import { isIPv4 } from "@/scripts/validate";
|
| | |
| | | };
|
| | | },
|
| | | components: {
|
| | | // cloudNode,
|
| | | cloudNode,
|
| | | NetNode,
|
| | | ipInput,
|
| | | },
|
| | |
| | | });
|
| | | },
|
| | | join(formName) {
|
| | | debugger;
|
| | | let _this = this;
|
| | | this.$refs[formName].validate((valid) => {
|
| | | debugger;
|
| | | if (valid) {
|
| | | debugger;
|
| | | _this.joinLoading = true;
|
| | | let data = {
|
| | | clusterId: _this.joinForm.clusterid,
|
| | |
| | | left: 20px;
|
| | | }
|
| | | .el-form-item {
|
| | | margin-bottom: 16px;
|
| | | margin-bottom: 10px;
|
| | | .el-input__inner {
|
| | | background-color: #ffffff;
|
| | | border: 2px solid transparent;
|