From 6f23040d7580a8a842731fd0a809c9e73dcd4dc5 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期二, 06 七月 2021 14:22:23 +0800 Subject: [PATCH] 全景跟踪.隐藏轨迹图菜单 --- src/pages/systemSettings/index/App.vue | 453 ++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 323 insertions(+), 130 deletions(-) diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue index c4a9817..785be66 100644 --- a/src/pages/systemSettings/index/App.vue +++ b/src/pages/systemSettings/index/App.vue @@ -3,6 +3,7 @@ <div class="container-left"> <div class="left-card" + :class="activeIndex == index ? 'left-card-active' : ''" v-for="(item, index) in menuArr" :key="index" @click="openMenu(item, index)" @@ -27,7 +28,15 @@ @click="openAccount(item, index)" > <div class="touxiang"> - <img :src="item.headpic" alt="" /> + <img + v-if="item.headpic" + :src=" + item.headpic.indexOf('http') > -1 + ? item.headpic + : 'http://' + item.headpic + " + alt="" + /> </div> <span class="user-name">{{ item.username }}</span> </div> @@ -51,13 +60,21 @@ <div class="line"> <div class="name">NTP鏍℃椂</div> - <el-switch v-model="isNtp" active-color="rgba(61, 104, 225, 1)"> + <el-switch + v-model="isNtp" + @change="changeSwitch('isNtp')" + active-color="rgba(61, 104, 225, 1)" + > </el-switch> </div> <div class="line"> <div class="name">鎵嬪姩鏍″</div> - <el-switch v-model="isManual" active-color="rgba(61, 104, 225, 1)"> + <el-switch + v-model="isManual" + @change="changeSwitch('isManual')" + active-color="rgba(61, 104, 225, 1)" + > </el-switch> </div> </div> @@ -73,7 +90,15 @@ > <div class="content-top"> <div class="touxiang-big"> - <img :src="activeAccountItem.headpic" alt="" /> + <img + v-if="activeAccountItem.headpic" + :src=" + activeAccountItem.headpic.indexOf('http') > -1 + ? activeAccountItem.headpic + : 'http://' + activeAccountItem.headpic + " + alt="" + /> </div> <div class="user-desc"> <div class="username"> @@ -100,6 +125,13 @@ ></span > </div> + <div class="user-role"> + {{ + activeAccountItem.sysRoles.length + ? activeAccountItem.sysRoles[0].name + : "" + }} + </div> </div> </div> <div class="list-btn"> @@ -111,14 +143,13 @@ <div class="change-pw" v-if="inAccountDetail && isChangePw"> <div class="title">淇敼瀵嗙爜</div> - <el-form :model="passwordForm" :rules="pwRules" ref="passwordForm" class="password-form" > - <el-form-item prop="pw"> + <el-form-item prop="curPassword"> <div class="p-title">褰撳墠瀵嗙爜锛�</div> <el-input @@ -127,7 +158,7 @@ show-password ></el-input> </el-form-item> - <el-form-item prop="newPw"> + <el-form-item prop="newPassword"> <div class="p-title">鏂板瘑鐮侊細</div> <el-input placeholder="蹇呭~" @@ -135,7 +166,7 @@ show-password ></el-input> </el-form-item> - <el-form-item prop="confirmNewPw"> + <el-form-item prop="confirmPassword"> <div class="p-title">纭瀵嗙爜锛�</div> <el-input placeholder="蹇呭~" @@ -145,39 +176,44 @@ </el-form-item> </el-form> <div class="btns"> - <div class="cancel" @click="cancelChangePassword">鍙栨秷</div> - <div class="ok">淇濆瓨</div> + <div class="cancel" @click="cancelPassword">鍙栨秷</div> + <div class="ok" @click="SaveNewPassword('passwordForm')">淇濆瓨</div> </div> </div> <div class="permission" v-if="inAccountDetail && isSetPermission"> <div class="title">鏉冮檺绠$悊</div> - <div class="line"> - <div class="name">瀹炴椂鐩戞帶</div> - <el-switch - v-model="isRealtime" - active-color="rgba(61, 104, 225, 1)" - > - </el-switch> + <div class="line-wrap" v-for="item in sysMenus" :key="item.id"> + <div class="line"> + <div class="name">{{ item.name }}</div> + <el-switch + v-model="item.selected" + active-color="rgba(61, 104, 225, 1)" + @change="fatherChange(item)" + > + </el-switch> + </div> + <div v-if="item.children"> + <div + class="line" + style="margin-left: 55px" + v-for="x in item.children" + :key="x.id" + > + <div class="name">{{ x.name }}</div> + <el-switch + v-model="x.selected" + active-color="rgba(61, 104, 225, 1)" + @change="childrenChange(item)" + > + </el-switch> + </div> + </div> </div> - <div class="line"> - <div class="name">缁熻鏌ヨ</div> - <el-switch v-model="isCount" active-color="rgba(61, 104, 225, 1)"> - </el-switch> - </div> - <div class="line"> - <div class="name">绠楀姏绠$悊</div> - <el-switch - v-model="isCalculate" - active-color="rgba(61, 104, 225, 1)" - > - </el-switch> - </div> - <div class="btns"> <div class="cancel" @click="cancelSet">鍙栨秷</div> - <div class="ok">淇濆瓨</div> + <div class="ok" @click="saveAuth">淇濆瓨</div> </div> </div> @@ -186,9 +222,15 @@ <div class="upload-group"> <div class="upload-jpg" - v-for="(item, index) in jpgArr" + :class=" + selectedPic == index && url !== '' ? 'upload-jpg-mask' : '' + " + v-for="(url, index) in jpgArr" :key="index" - ></div> + @click="pickHeadDefPic(url, index)" + > + <img v-if="url !== ''" :src="url" alt="" srcset="" /> + </div> <el-upload class="upload-demo" @@ -213,10 +255,19 @@ v-model="addForm.userName" ></el-input> </el-form-item> + <el-form-item prop="roleId"> + <div class="p-title">瑙掕壊锛�</div> + <el-select + v-model="addForm.roleId" + placeholder="璇烽�夋嫨瑙掕壊" + > + <el-option v-for="(item,i) in roleList" :key="i" :label="item.name" :value="item.id"></el-option> + </el-select> + </el-form-item> <el-form-item prop="nickName"> <div class="p-title">鏄电О锛�</div> <el-input - placeholder="蹇呭~" + placeholder="閫夊~" v-model="addForm.nickName" ></el-input> </el-form-item> @@ -418,7 +469,7 @@ </div> <div class="btns"> - <div class="cancel" @click="cancelChangePassword">鍙栨秷</div> + <div class="cancel" @click="cancelPassword">鍙栨秷</div> <div class="ok" @click="submitClock">淇濆瓨</div> </div> </div> @@ -445,7 +496,18 @@ <script> import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system"; -import { uploadHeadPic, addUser, getUsers, updateUser,updatePassword } from "@/api/user"; +import { + uploadHeadPic, + addUser, + getUsers, + updateUser, + updataUser, + updatePassword, + deleteUser, + getUserMenus, + defHeadPics, + getRoles, +} from "@/api/user"; import switchBar from "../components/switchBar"; import ipInput from "@/components/subComponents/IPInput"; import clusterManagement from "../views/clusterManagement"; @@ -463,20 +525,19 @@ generalSettings, }, data() { - var validatePass = (rule, value, callback) => { - if (value === "") { - callback(new Error("璇疯緭鍏ュ瘑鐮�")); - } else { - if (this.addForm.checkPass !== "") { - this.$refs.addForm.validateField("checkPassword"); - } - callback(); - } - }; var validatePass2 = (rule, value, callback) => { if (value === "") { callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); } else if (value !== this.addForm.password) { + callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")); + } else { + callback(); + } + }; + var validatePass4 = (rule, value, callback) => { + if (value === "") { + callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); + } else if (value !== this.passwordForm.newPassword) { callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")); } else { callback(); @@ -505,8 +566,10 @@ showSecInput: false, showYrsInput: false, showMonthInput: false, + selectedPic: null, showDayInput: false, - + cameraInfo: false, + dependentScene: false, timestamp: 0, inAccountDetail: false, isChangePw: false, @@ -516,6 +579,7 @@ syncType: "1", equipmentTime: "", equipmentDate: "", + roleList: [], ntpTestLoading: false, settime: "", weekday: "", @@ -528,7 +592,7 @@ { name: "閫氱敤璁剧疆" }, ], accountArr: [], - jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}], + jpgArr: ["", "", "", "", "", "", "", "", ""], isManual: false, isNtp: true, activePage: "璐︽埛", @@ -547,23 +611,43 @@ confirmPassword: "", }, activeAccountIndex: 0, + sysMenus: [], addForm: { userName: "", nickName: "", password: "", headpic: "", confirmPassword: "", + roleId:"" }, rules: { - password: [{ validator: validatePass, trigger: "blur" }], + userName: [ + { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" }, + { + min: 3, + max: 10, + message: "闀垮害鍦� 3 鍒� 10 涓瓧绗�", + trigger: "blur", + }, + ], + password: [ + { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, + { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" }, + ], confirmPassword: [{ validator: validatePass2, trigger: "blur" }], - // age: [{ validator: checkAge, trigger: "blur" }], }, - pwRules:{ - pw: [{ validator: validatePass3, trigger: "blur" }], - newPw: [{ validator: validatePass3, trigger: "blur" }], - confirmNewPw: [{ validator : validatePass4, trigger: "blur" }], - } + pwRules: { + // pw: [{ validator: validatePass3, trigger: "blur" }], + curPassword: [ + { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, + { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" }, + ], + newPassword: [ + { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }, + { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" }, + ], + confirmPassword: [{ validator: validatePass4, trigger: "blur" }], + }, }; }, beforeDestroy() { @@ -571,21 +655,28 @@ clearInterval(this.browserTimer); }, mounted() { - const s = document.getElementsByClassName("left-card")[0]; - s.style.backgroundColor = "rgba(61, 104, 225, 1)"; - s.style.color = "#fff"; - this.$nextTick(() => { - this.initClockConf(); - }); - this.fetchUserList(); + this.fetchDefHeadPic(); }, methods: { - fetchUserList() { + fetchDefHeadPic() { + defHeadPics().then((res) => { + res.data.forEach((x, i) => { + this.jpgArr[i] = x; + }); + }); + }, + fetchUserList(showLast = false) { getUsers().then((res) => { this.accountArr = res.data; if (this.accountArr.length) { this.activeAccountItem = this.accountArr[0]; + this.activeAccountIndex = 0 + } + if (showLast) { + this.cancelAdd(); + const lastIdx = this.accountArr.length - 1; + this.openAccount(this.accountArr[lastIdx], lastIdx); } }); }, @@ -604,12 +695,15 @@ nickname: this.inputNickName, }).then((res) => { this.$message.success(res.msg); - this.fetchUserList(); + this.fetchUserList(true); }); }, openAccount(item, i) { this.activeAccountItem = item; this.activeAccountIndex = i; + this.inAccountDetail = false; + this.cancelSet(); + this.fetchMenu(); }, minusOne(typ) { this.isSyncBrowser = false; @@ -666,11 +760,18 @@ break; } }, + fatherChange(item) { + item.children.forEach((x) => { + x.selected = item.selected; + }); + }, + childrenChange(item) { + let isAllSelected = item.children.every((x) => x.selected == true); + item.selected = isAllSelected + }, getMaxDay() { const maxDay = new Date(+this.syncYrs, +this.syncMonth, 0).getDate(); - if (this.syncDay > maxDay) { - this.syncDay = maxDay; - } + if (this.syncDay > maxDay) this.syncDay = maxDay; }, plusOne(typ) { this.isSyncBrowser = false; @@ -715,7 +816,6 @@ if (num > maxDay) { num = 1; } - // this.syncDay = this.padZero(num); break; default: @@ -723,9 +823,8 @@ } }, submitClock() { - debugger; if (this.syncType === "1") { - if (this.ntpServer === "") { + if (this.ntpServer === "" || this.ntpServer === "...") { this.$notify({ type: "error", message: "NTP 鏈嶅姟鍣ㄥ湴鍧�涓嶈兘涓虹┖", @@ -745,14 +844,13 @@ } else { this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`; } - let requestBody = { + saveClockInfo({ timeZone: this.timezone, ntp: this.syncType === "1", ntpServer: this.ntpServer, interval: this.timeInterval, newTime: this.settime, - }; - saveClockInfo(requestBody).then((rsp) => { + }).then((rsp) => { if (rsp && rsp.success) { this.$notify({ type: "success", @@ -762,19 +860,35 @@ this.initClockConf(); }); }, + flatGetArr(arr, res) { + for (const item of arr) { + if (item.selected) res.push(item.id); + if (item.children) this.flatGetArr(item.children, res); + } + }, + saveAuth() { + let arr = []; + this.flatGetArr(this.sysMenus, arr); + updataUser({ + id: this.activeAccountItem.id, + menuIds: arr, + }).then((res) => { + if (res.success) { + this.$message.success(res.msg) + this.cancelSet() + } + }); + }, formatTime(number, format) { var formateArr = ["Y", "M", "D", "h", "m", "s"]; var returnArr = []; - var date = new Date(number * 1000); returnArr.push(date.getFullYear()); returnArr.push(this.formatNumber(date.getMonth() + 1)); returnArr.push(this.formatNumber(date.getDate())); - returnArr.push(this.formatNumber(date.getHours())); returnArr.push(this.formatNumber(date.getMinutes())); returnArr.push(this.formatNumber(date.getSeconds())); - this.weekday = "鏄熸湡" + "鏃ヤ竴浜屼笁鍥涗簲鍏�".charAt(date.getDay()); for (var i in returnArr) { format = format.replace(formateArr[i], returnArr[i]); @@ -785,7 +899,6 @@ n = +n; return n < 10 ? "0" + n : "" + n; }, - //鏁版嵁杞寲 formatNumber(n) { n = n.toString(); return n[1] ? n : "0" + n; @@ -794,7 +907,9 @@ let param = new FormData(); param.append("file", params.file); uploadHeadPic(param).then((res) => { - this.addForm.headpic = res.data; + let index = this.jpgArr.findIndex((x) => x == ""); + this.$set(this.jpgArr, index, res.data); + this.loadedPic= res.data }); }, initClockConf(ntpTest = false) { @@ -803,6 +918,8 @@ this.timezone = rsp.data.time_zone; if (!ntpTest) { this.syncType = rsp.data.ntp ? "1" : "2"; + this.isNtp = rsp.data.ntp; + this.isManual = !rsp.data.ntp; } if (rsp.data.ntp) { this.ntpServer = rsp.data.ntp_server; @@ -811,22 +928,17 @@ this.timestamp = rsp.data.local_time; if (this.clockTimer === null) { this.runClock(); + if (this.isManual) this.parseTime(); } } }); }, openMenu(item, i) { - const old = document.getElementsByClassName("left-card")[ - this.activeIndex - ]; - old.style.backgroundColor = "initial"; - old.style.color = "rgba(81, 81, 81, 1)"; - this.activePage = item.name; this.activeIndex = i; - const s = document.getElementsByClassName("left-card")[i]; - s.style.backgroundColor = "rgba(61, 104, 225, 1)"; - s.style.color = "#fff"; + if (this.activePage == "鏃ユ湡鏃堕棿") { + this.initClockConf(); + } }, showInput(typ) { this[`show${typ}Input`] = true; @@ -841,10 +953,9 @@ this[`show${typ}Input`] = false; this[`input${typ}`] = ""; }, - syncBrowser(val) { + syncBrowser(enable) { this.isSyncBrowser = val; - if (val == false) { - console.log(12121); + if (!enable) { clearInterval(this.browserTimer); } else { this.browserTimer = setInterval(() => { @@ -856,18 +967,44 @@ }, 1000); } }, - openChangePw() {}, showAddAccount() { this.inAccountDetail = false; this.isAddAccount = true; + getRoles().then((res) => { + if (res.success) { + this.roleList= res.data + } + }); }, cancelAdd() { this.inAccountDetail = false; this.isAddAccount = false; + this.$refs["addForm"].resetFields(); }, - cancelChangePassword() { + cancelPassword() { this.isChangePw = false; this.inAccountDetail = false; + this.$refs["passwordForm"].resetFields(); + }, + SaveNewPassword(formName) { + this.$refs[formName].validate((valid) => { + if (valid) { + updatePassword({ + oldPwd: this.passwordForm.curPassword, + newPwd: this.passwordForm.newPassword, + }).then( + (res) => { + if(res.success) { + this.$message.success(res.msg); + this.cancelPassword() + } + }, + (err) => { + this.$message.warning("淇濆瓨澶辫触锛�" + err.msg); + } + ); + } + }); }, saveAddAccount(formName) { this.$refs[formName].validate((valid) => { @@ -881,6 +1018,7 @@ addUser(data).then( (res) => { this.$message.success(res.data); + this.fetchUserList(true); }, (err) => { this.$message.warning("淇濆瓨澶辫触锛�" + err.msg); @@ -891,6 +1029,10 @@ return false; } }); + }, + pickHeadDefPic(url, i) { + this.addForm.headpic = url; + this.selectedPic = i; }, testNTP() { this.ntpTestLoading = true; @@ -921,6 +1063,7 @@ cancelSet() { this.isSetPermission = false; this.inAccountDetail = false; + this.sysMenus = []; }, showChangePassword() { this.isChangePw = true; @@ -939,35 +1082,61 @@ cancelButtonText: "鍙栨秷", }) .then(() => { - this.$message({ - type: "success", - message: "鍒犻櫎鎴愬姛!", + let obj = { + ids: [this.activeAccountItem.id], + }; + deleteUser(obj).then((res) => { + if (res.success) { + this.fetchUserList(); + this.$message({ + type: "success", + message: "鍒犻櫎鎴愬姛!", + }); + } else { + this.$message.warning("鍒犻櫎澶辫触"); + } }); }) .catch(() => {}); }, + fetchMenu() { + getUserMenus({ + userId: this.activeAccountItem.id, + }).then((res) => { + if (res && res.success) { + this.sysMenus = res.data; + } + }); + }, openPermission() { this.inAccountDetail = true; this.isSetPermission = true; + if (this.sysMenus.length==0) { + this.fetchMenu() + } + }, + parseTime() { + [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split( + "-" + ); + [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split( + ":" + ); + }, + changeSwitch(str) { + if (str == "isNtp") { + this.isManual = !this[str]; + } else { + this.isNtp = !this[str]; + } + this.syncType = this.isNtp ? "1" : "2"; + if (this.isManual) this.parseTime(); }, }, - - watch: { - isManual(v) { - this.isNtp = !v; - v && (this.syncType = "2"); - if (v) { - [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split( - "-" - ); - [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split( - ":" - ); - } - }, - isNtp(v) { - this.isManual = !v; - v && (this.syncType = "1"); + computed: { + isShowAddAccount() { + const info = JSON.parse(sessionStorage.getItem("userInfo")); + return true; }, }, }; @@ -1005,6 +1174,10 @@ font-size: 16px; } } + .left-card-active { + background-color: rgba(61, 104, 225, 1); + color: #fff; + } .left-card:hover { background-color: rgba(61, 104, 225, 1); color: #fff; @@ -1021,8 +1194,7 @@ .account-left { .add-account { color: rgba(61, 104, 225, 1); - margin-top: 50px; - + margin-top: 30px; .iconfont { cursor: pointer; font-size: 32px; @@ -1134,12 +1306,12 @@ background-color: bisque; border-radius: 50px; img { - border: none; + border: none; - width: 100px; - height: 100px; - border-radius: 50px; - } + width: 100px; + height: 100px; + border-radius: 50px; + } } .user-desc { height: 100px; @@ -1151,7 +1323,7 @@ margin: 5px 15px; height: 30px; line-height: 30px; - width: 90px; + // width: 90px; text-align: left; font-size: 15px; display: flex; @@ -1169,6 +1341,10 @@ margin-left: 5px; cursor: pointer; } + } + .user-role { + margin: 5px 0 0 15px; + font-size: 14px; color: darkseagreen; } } } @@ -1250,37 +1426,54 @@ .add-account-page { .upload-group { height: 120px; - width: 350px; + width: 360px; margin: 0 auto; overflow: hidden; .upload-jpg { - height: 50px; - width: 50px; + height: 46px; + width: 46px; float: left; margin: 0 10px; - background-color: antiquewhite; - margin-bottom: 20px; - border-radius: 25px; + margin-bottom: 10px; + background-color: rgba(242, 242, 242, 1); + border: 3px solid transparent; + border-radius: 50%; + cursor: pointer; + img { + height: 46px; + width: 46px; + } + } + .upload-jpg-mask { + border: 3px solid blue; } .upload-jpg-up { - height: 50px; - width: 50px; + height: 52px; + width: 52px; float: left; display: flex; background-color: rgba(242, 242, 242, 1); margin: 0 10px; - margin-bottom: 20px; + margin-bottom: 10px; border-radius: 25px; justify-content: center; align-items: center; font-size: 12px; cursor: pointer; } + .loaded-Pic { + } } .fill-group { .p-title { + height: 34px; text-align: left; } + .el-form-item{ + .el-select { + width: 100%; +} + } } } } -- Gitblit v1.8.0