From 3e4904fda5c78cfd8b40fa925fd2970b01850224 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期五, 19 八月 2022 22:21:30 +0800 Subject: [PATCH] 添加摄像机权限 --- src/views/personalCenter/components/SubAccount.vue | 450 ++++++++++++++++++++++++++++++------------------------- 1 files changed, 243 insertions(+), 207 deletions(-) diff --git a/src/views/personalCenter/components/SubAccount.vue b/src/views/personalCenter/components/SubAccount.vue index 996cc34..95b6f3d 100644 --- a/src/views/personalCenter/components/SubAccount.vue +++ b/src/views/personalCenter/components/SubAccount.vue @@ -10,17 +10,8 @@ <div class="cluster"> 鎺堟潈鏃堕暱 - <el-select - @change="findUserList" - v-model="timeLength" - placeholder="璇烽�夋嫨" - > - <el-option - v-for="item in durationArr" - :key="item.value" - :label="item.label" - :value="item.value" - > + <el-select @change="findUserList" v-model="timeLength" placeholder="璇烽�夋嫨"> + <el-option v-for="item in durationArr" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> @@ -52,40 +43,31 @@ :default-sort="{ prop: 'createTime', order: 'descending' }" > <el-table-column label="搴忓彿" width="55" class-name="index"> - <template slot-scope="scope">{{ - scope.$index + 1 + (page - 1) * size - }}</template> + <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template> </el-table-column> <!-- <el-table-column prop="trueName" label="濮撳悕" show-overflow-tooltip ></el-table-column> --> - <el-table-column - prop="username" - label="鐢ㄦ埛鍚�" - show-overflow-tooltip - ></el-table-column> - <el-table-column - prop="phoneNum" - label="鎵嬫満鍙�" - show-overflow-tooltip - ></el-table-column> + <el-table-column prop="username" label="鐢ㄦ埛鍚�" show-overflow-tooltip></el-table-column> + <el-table-column prop="phoneNum" label="鎵嬫満鍙�" show-overflow-tooltip></el-table-column> <el-table-column prop="userType" label="鐢ㄦ埛绫诲瀷"> <template slot-scope="scope"> <span>{{ scope.row.userType == 1 ? "涓汉" : "鍏徃" }}</span> </template> </el-table-column> - <el-table-column prop="authDuration" label="鎺堟潈鏃堕暱"> + <!-- <el-table-column prop="authDuration" label="鎺堟潈鏃堕暱"> <template slot-scope="scope"> <span>{{ scope.row.authDuration + " 骞�" }} </span> </template> - </el-table-column> + </el-table-column> --> <!-- <el-table-column prop="authDuration" label="鎺堟潈鏃堕暱"> </el-table-column> --> - <el-table-column prop="dataNames" label="鏉冮檺"> </el-table-column> + <el-table-column prop="dataNames" label="鍏徃"> </el-table-column> + <el-table-column prop="companyName" label="閮ㄩ棬" show-overflow-tooltip></el-table-column> <el-table-column label="鐘舵��"> <template slot-scope="scope"> @@ -96,9 +78,7 @@ <el-table-column label="鎿嶄綔"> <template slot-scope="scope"> - <span class="iconfont option" @click="editUser(scope.row)" - >缂栬緫</span - > + <span class="iconfont option" @click="editUser(scope.row)">缂栬緫</span> </template> </el-table-column> </el-table> @@ -132,6 +112,7 @@ <el-form-item label="鐢ㄦ埛鍚�" prop="username"> <el-input v-model="ruleForm.username" style="width: 350px"></el-input> </el-form-item> + <!-- <el-form-item label="瀵嗙爜" prop="password" v-show="!isEditing"> --> <el-form-item label="瀵嗙爜" prop="password"> <el-input v-model="ruleForm.password" style="width: 350px"></el-input> </el-form-item> @@ -141,48 +122,38 @@ > </el-form-item> --> <el-form-item label="鐢ㄦ埛绫诲瀷" prop="userType"> - <el-radio v-model="ruleForm.userType" :label="1">涓汉</el-radio> - <el-radio v-model="ruleForm.userType" :label="2">鍏徃</el-radio> + <el-radio v-model="ruleForm.userType" :label="1">鏈湴</el-radio> + <el-radio v-model="ruleForm.userType" :label="2">OA璐︽埛</el-radio> </el-form-item> + <el-form-item label="濮撳悕" prop="trueName"> <el-input v-model="ruleForm.trueName" style="width: 350px"></el-input> </el-form-item> - <el-form-item label="閭"> - <el-input v-model="ruleForm.email" style="width: 350px"></el-input> + + <el-form-item label="鎵嬫満鍙�"> + <el-input v-model="ruleForm.phoneNum" style="width: 350px"></el-input> </el-form-item> - <el-form-item label="琛屼笟"> - <el-select - v-model="ruleForm.industryId" - placeholder="璇烽�夋嫨琛屼笟" - style="width: 350px" - > - <el-option - v-for="(item, index) in industrys" - :label="item.name" - :value="item.id" - :key="index" - ></el-option> + <el-form-item label="閮ㄩ棬"> + <el-input v-model="ruleForm.companyName" style="width: 350px"></el-input> + </el-form-item> + + <!-- <el-form-item label="琛屼笟"> + <el-select v-model="ruleForm.industryId" placeholder="璇烽�夋嫨琛屼笟" style="width: 350px"> + <el-option v-for="(item, index) in industrys" :label="item.name" :value="item.id" :key="index"></el-option> </el-select> </el-form-item> <el-form-item label="鍦板尯"> - <el-cascader - v-model="ruleForm.address" - :props="options" - style="width: 350px" - ></el-cascader> - </el-form-item> - <el-form-item label="鎺堟潈鏃堕暱"> - <el-select - v-model="ruleForm.authDuration" - style="width: 350px" - placeholder="璇烽�夋嫨鎺堟潈鏃堕暱" - > + <el-cascader v-model="ruleForm.address" :props="options" style="width: 350px"></el-cascader> + </el-form-item> --> + + <!-- <el-form-item label="鎺堟潈鏃堕暱"> + <el-select v-model="ruleForm.authDuration" style="width: 350px" placeholder="璇烽�夋嫨鎺堟潈鏃堕暱"> <el-option label="涓�骞�" :value="1"></el-option> <el-option label="涓ゅ勾" :value="2"></el-option> <el-option label="涓夊勾" :value="3"></el-option> </el-select> - </el-form-item> + </el-form-item> --> <el-form-item label="鐢ㄦ埛鏉冮檺" prop="menuIds" class="user-tree"> <div class="tree-box"> @@ -210,14 +181,28 @@ :props="defaultProp" :default-checked-keys="checkedData" check-on-click-node + @check-change="selectDevice" > </el-tree> + </div> + <div class="tree-box"> + <div class="t">鎽勫儚鏈烘潈闄�</div> + <tree-menu + ref="ztreeMenus" + app="Camera" + treeName="localTree" + :node="TreeDataPool.treeData" + :height="treeHeight" + :setting="treeSettings" + style="width:330px;max-height:440px" + /> </div> </el-form-item> </el-form> <div class="right"> <div class="button searchBtn" @click="saveSubUser">淇濆瓨</div> <div class="button resetBtn" @click="resetUser">閲嶇疆</div> + <div class="button resetBtn" style="margin-left:20px" @click="goback">杩斿洖</div> </div> </div> <div class="sub-account" v-else-if="isShowRelate"> @@ -225,24 +210,24 @@ <span class="iconfont"></span> <span>鍏宠仈瀛愯处鎴�</span> </div> - <Steps - :titleList="['鍏宠仈瀛愯处鍙蜂俊鎭�', '鏉冮檺璁剧疆', '瀹屾垚']" - :activeIndex="activeIndex" - ></Steps> + <Steps :titleList="['鍏宠仈瀛愯处鍙蜂俊鎭�', '鏉冮檺璁剧疆', '瀹屾垚']" :activeIndex="activeIndex"></Steps> <StepsCard @goback="goback" @goto="goto"></StepsCard> </div> </template> <script> -import { findUserList, saveSubUser, getMenu, getDataTree } from "@/api/user"; -import { getAreas, getDic } from "@/api/login"; +import { findUserList, saveSubUser, getMenu, getDataTree } from "@/api/user" +import { getAreas, getDic } from "@/api/login" -import Steps from "./Steps"; -import StepsCard from "./StepCard"; +import Steps from "./Steps" +import StepsCard from "./StepCard" +import TreeMenu from "@/components/giantTree/index" + export default { components: { Steps, StepsCard, + TreeMenu }, data() { const validateTree = (rule, value, callback) => { @@ -252,44 +237,48 @@ this.ruleForm.menuIds.length > 0 && this.ruleForm.dataIds.length > 0 ) { - callback(); + callback() } else { - callback(new Error("璇烽�夎彍鍗曟潈闄愬拰鏁版嵁鏉冮檺")); + callback(new Error("璇烽�夎彍鍗曟潈闄愬拰鏁版嵁鏉冮檺")) } - }; + } return { - searchTime: [ - this.$moment().format("YYYY-MM-DD 00:00:00"), - this.$moment().format("YYYY-MM-DD HH:mm:ss"), - ], //鎼滅储鏃堕棿 + searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")], //鎼滅储鏃堕棿 page: 1, size: 10, //鍒嗛〉鐩稿叧 inputText: "", //杈撳叆妗嗗唴瀹� activeStep: 0, activeIndex: 0, industrys: [], - total: 0, //鎬绘暟 + total: 0, //鎬绘暟, + treeHeight: 750, + treeData: [], + treeSettings: { + check: { + enable: true + } + }, options: { lazy: true, lazyLoad(node, resolve) { // 鎳掑姞杞借妭鐐圭渷甯傛暟鎹� - const { level } = node; - let nodes; + const { level } = node + let nodes getAreas({ parentId: level == 0 ? 0 : node.value }) .then((json) => { - nodes = json.data.list; + nodes = json.data.list nodes = nodes.map((item) => ({ value: item.id, label: item.name, level: item.level, - leaf: level >= 1, - })); - resolve(nodes); + leaf: level >= 1 + })) + resolve(nodes) }) .catch((err) => { - console.log(err); - }); - }, + console.log(err) + }) + } }, dataList: [], isShowAdd: false, //鏄惁灞曠ず鏂板寮圭獥 @@ -300,16 +289,16 @@ durationArr: [ { value: 1, - label: "1骞�", + label: "1骞�" }, { value: 2, - label: "2骞�", + label: "2骞�" }, { value: 3, - label: "3骞�", - }, + label: "3骞�" + } ], //鎵�灞為泦缇や笅鎷夋 timeLength: null, //閫変腑鐨勬巿鏉冩椂闀� showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥 @@ -323,26 +312,24 @@ userType: "", password: "", trueName: "", - email: "", + companyName: "", + phoneNum: "", + email: "basic", isChangePwd: false, industryId: "", address: [], - authDuration: 1, + authDuration: 3, areaId: "", provinceId: "", menuIds: [], - dataIds: [], + dataIds: [] }, rules: { - username: [ - { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" }, - ], - password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }], - userType: [ - { required: true, message: "璇烽�夋嫨鐢ㄦ埛绫诲瀷", trigger: "blur" }, - ], + username: [{ required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" }], + // password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }], + userType: [{ required: true, message: "璇烽�夋嫨鐢ㄦ埛绫诲瀷", trigger: "blur" }], trueName: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "blur" }], - menuIds: [{ validator: validateTree, trigger: "blur" }], + menuIds: [{ validator: validateTree, trigger: "blur" }] }, sysMenus: [], DataTree: [], @@ -350,52 +337,87 @@ curEditId: "", defaultProp: { children: "children", - label: "name", - }, - }; + label: "name" + } + } }, created() { - this.userInfo = JSON.parse(sessionStorage.getItem("userInfo")); - this.findUserList(); - this.getIndustrys(); - this.fetchSysMenus(); - this.fetchDataTree(); + this.userInfo = JSON.parse(sessionStorage.getItem("userInfo")) + this.findUserList() + this.getIndustrys() + this.fetchSysMenus() + this.fetchDataTree() + }, + mounted() { + this.TreeDataPool.reset() + this.TreeDataPool.multiple = true }, methods: { fetchDataTree() { getDataTree({ userId: this.userInfo.id }).then((res) => { - this.DataTree = res.data.dataTree; - }); + this.DataTree = res.data.dataTree + }) }, fetchSysMenus() { getMenu().then((rsp) => { if (rsp && rsp.success) { - this.sysMenus = rsp.data.menus; + this.sysMenus = rsp.data.menus // this.userMenus = []; } - }); + }) + }, + selectDevice(node, checked, hasChildren) { + if (checked) { + sessionStorage.setItem("clusterId", node.id) + this.TreeDataPool.fetchTreeData() + this.treeData = this.TreeDataPool.treeData + } else { + this.treeData = [] + this.TreeDataPool.reset() + } }, addSubCount() { - this.isShowAdd = true; - this.resetUser(); + this.isShowAdd = true + this.resetUser() }, - editUser(row) { - this.isShowAdd = true; - this.isEditing = true; - this.ruleForm.id = row.id; - this.ruleForm.username = row.username; - this.ruleForm.userType = row.userType; - this.ruleForm.password = row.password; - this.ruleForm.trueName = row.trueName; - this.ruleForm.email = row.email; - this.ruleForm.isChangePwd = row.isChangePwd; - this.ruleForm.industryId = row.industryId; - this.ruleForm.areaId = row.areaId; - this.ruleForm.address = [row.provinceId, row.areaId]; - this.ruleForm.provinceId = row.provinceId; - this.ruleForm.authDuration = row.authDuration; - this.checkedMenu = row.menuIds; - this.checkedData = row.dataIds; + async editUser(row) { + this.isShowAdd = true + this.isEditing = true + this.ruleForm.id = row.id + this.ruleForm.username = row.username + this.ruleForm.userType = row.userType + this.ruleForm.password = row.password + this.ruleForm.trueName = row.trueName + this.ruleForm.companyName = row.companyName + this.ruleForm.phoneNum = row.phoneNum + this.ruleForm.email = row.email + this.ruleForm.isChangePwd = row.isChangePwd + this.ruleForm.industryId = row.industryId + this.ruleForm.areaId = row.areaId + this.ruleForm.address = [row.provinceId, row.areaId] + this.ruleForm.provinceId = row.provinceId + this.ruleForm.authDuration = row.authDuration + this.checkedMenu = row.menuIds + this.checkedData = row.dataIds + + // 鏌ヨ褰撳墠鐢ㄦ埛鏉冮檺涓嬫墍鏈夊彲绠$悊鐨勬憚鍍忔満 + if (row.dataIds) { + sessionStorage.setItem("clusterId", row.dataIds[0]) + await this.TreeDataPool.fetchTreeData() + } + // 鐢╡mail瀛楁鏆傛椂浠f浛鎽勫儚鏈洪泦鍚堝瓧娈� + let checkedCameras = row.email + + // basic 涓哄瓙璐︽埛榛樿鐨勭┖瀛楁,琛ㄧず鍙鐞嗙殑鎽勫儚鏈虹洰褰曚负绌� + if (checkedCameras == "basic") { + return + } + + // 鍙嶉�夋憚鍍忔満 + if (checkedCameras.length) { + let cameraIds = checkedCameras.split(",") + this.$refs.ztreeMenus.updateNodes(cameraIds) + } }, resetUser() { this.ruleForm = { @@ -404,30 +426,33 @@ userType: "", password: "", trueName: "", + companyName: "", + phoneNum: "", email: "", isChangePwd: false, address: [], industryId: "", areaId: "", provinceId: "", - authDuration: 1, - }; + authDuration: 1 + } this.$nextTick(() => { - this.$refs.treeMenus.setCheckedKeys([]); - this.$refs.treeData.setCheckedKeys([]); - }); + this.$refs.treeMenus.setCheckedKeys([]) + this.$refs.treeData.setCheckedKeys([]) + }) }, async getIndustrys() { - let res = await getDic(); + let res = await getDic() if (res.success) { - this.industrys = res.data.dics; + this.industrys = res.data.dics } else { - console.log("鏌ヨ琛屼笟鍒楄〃澶辫触锛�"); + console.log("鏌ヨ琛屼笟鍒楄〃澶辫触锛�") } }, saveSubUser() { - this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys(); - this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys(); + let _this = this + this.ruleForm.menuIds = this.$refs.treeMenus.getCheckedKeys() + this.ruleForm.dataIds = this.$refs.treeData.getCheckedKeys() this.$refs["ruleForm"].validate((valid) => { if (valid) { let json = { @@ -437,73 +462,87 @@ isChangePwd: this.ruleForm.isChangePwd, userType: this.ruleForm.userType, trueName: this.ruleForm.trueName, - email: this.ruleForm.email, + companyName: this.ruleForm.companyName, + phoneNum: this.ruleForm.phoneNum, industryId: this.ruleForm.industryId, - areaId: - this.ruleForm.address.length == 2 ? this.ruleForm.address[1] : "", + areaId: this.ruleForm.address.length == 2 ? this.ruleForm.address[1] : "", authDuration: this.ruleForm.authDuration, menuIds: this.ruleForm.menuIds, - dataIds: this.ruleForm.dataIds, - }; + dataIds: this.ruleForm.dataIds + } + + // 鑾峰彇瀛愯处鎴烽�変腑鐨勬憚鍍忔満鍒楄〃 + let cameraIds = this.TreeDataPool.selectedNodes + if (cameraIds.length == 0) { + json.email = "basic" + } else { + json.email = cameraIds.join(",") + } + + // 缂栬緫涓嶆彁浜ゅ瘑鐮� + if (this.isEditing) { + // delete json.password + } if (typeof json.areaId === "string") { - delete json.areaId; + delete json.areaId } if (typeof json.authDuration === "string") { - delete json.authDuration; + delete json.authDuration } + // return saveSubUser(json) .then((res) => { if (res.success) { - this.$notify.success(res.data); - this.isShowAdd = false; - this.isEditing = false; - this.findUserList(); + this.$notify.success(res.data) + this.isShowAdd = false + this.isEditing = false + this.findUserList() } else { - this.$notify.error(res.msg); + this.$notify.error(res.msg) } }) .catch((err) => { - this.$notify.error(err.data.msg); - }); + this.$notify.error(err.data.msg) + }) } else { - return false; + return false } - }); + }) }, findUserList() { findUserList({ inputText: this.inputText, page: this.page, size: this.size, - authDuration: this.timeLength, + authDuration: this.timeLength }) .then((res) => { if (res.success) { - this.dataList = res.data.dataList; - this.total = res.data.total; + this.dataList = res.data.dataList + this.total = res.data.total } else { - this.$notify.error("鍔犺浇瀛愯处鎴峰垪琛ㄥけ璐�"); + this.$notify.error("鍔犺浇瀛愯处鎴峰垪琛ㄥけ璐�") } }) .catch((e) => { - this.$notify.error(e.msg); - }); + this.$notify.error(e.msg) + }) }, goback() { - this.isShowAdd = false; - this.isEditing = false; - this.isShowRelate = false; - this.activeIndex = 0; + this.isShowAdd = false + this.isEditing = false + this.isShowRelate = false + this.activeIndex = 0 }, goto(i) { - this.activeIndex = i; + this.activeIndex = i }, reset() { - this.inputText = ""; - this.timeLength = null; + this.inputText = "" + this.timeLength = null }, // 璺冲埌璁惧璇︽儏 checkDetail(row) { @@ -513,9 +552,9 @@ id: row.devId, ip: row.devIp, port: row.serverPort, - ndid: row.id, - }, - }); + ndid: row.id + } + }) }, // 璺冲埌绠楁硶璇︽儏 @@ -525,9 +564,9 @@ query: { id: row.devId, ip: row.devIp, - port: row.serverPort, - }, - }); + port: row.serverPort + } + }) }, // 鏌ヨ鍒楄〃 @@ -535,68 +574,65 @@ save() {}, //鍒嗛〉鍔熻兘 handleSizeChange(size) { - this.size = size; - this.findUserList(); + this.size = size + this.findUserList() }, //鍒嗛〉鍔熻兘 refrash(page) { - this.page = page; - this.findUserList(); + this.page = page + this.findUserList() }, //瑙g粦鎸夐挳 Untying(row) { - console.log(row); - this.unbindId = row.id; - this.isShowUnbind = true; + console.log(row) + this.unbindId = row.id + this.isShowUnbind = true }, //鑾峰緱榛樿鏃堕棿 getDateInit() { // 瑕佹眰 榛樿涓�涓湀 - const end = new Date(); - const start = new Date(); - const nowDate = new Date(); - nowDate.setHours(0); - nowDate.setMinutes(0); - nowDate.setSeconds(0); - nowDate.setMilliseconds(0); - start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30); - end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1); - return [ - this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), - this.$moment(end).format("YYYY-MM-DD HH:mm:ss"), - ]; + const end = new Date() + const start = new Date() + const nowDate = new Date() + nowDate.setHours(0) + nowDate.setMinutes(0) + nowDate.setSeconds(0) + nowDate.setMilliseconds(0) + start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30) + end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1) + return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")] }, // 鍏抽棴瑙g粦寮圭獥 closeUnbindBox() { - this.isShowUnbind = false; + this.isShowUnbind = false }, //瑙g粦鎴愬姛鍥炶皟 reflash() { - this.isShowUnbind = false; + this.isShowUnbind = false }, clearSearch() { - this.searchTime = this.getDateInit(); - this.inputText = ""; + this.searchTime = this.getDateInit() + this.inputText = "" }, //閫�鍑洪泦缇� quitCluster(equipment) { - this.activeEquipment = equipment; - this.showQuit = true; + this.activeEquipment = equipment + this.showQuit = true }, //鍔犲叆闆嗙兢 joinCluster(equipment) { - this.activeEquipment = equipment; - this.showJoin = true; - }, - }, -}; + this.activeEquipment = equipment + this.showJoin = true + } + } +} </script> <style scoped lang="scss"> @@ -885,7 +921,7 @@ } </style> -<style > +<style> .el-date-table td.start-date span, .el-date-table td.end-date span { background-color: #0065ff; -- Gitblit v1.8.0