| | |
| | | |
| | | <div class="container-center" v-if="activeIndex == 0"> |
| | | <div class="account-left" v-if="activeIndex == 0"> |
| | | <div class="account-list" |
| | | :class="{'account-list-scroll' |
| | | :account_list_scroll}" |
| | | @mouseenter="account_list_scroll = true" |
| | | @mouseleave="account_list_scroll = false" |
| | | <div |
| | | class="account-list" |
| | | :class="{ 'account-list-scroll': account_list_scroll }" |
| | | @mouseenter="account_list_scroll = true" |
| | | @mouseleave="account_list_scroll = false" |
| | | > |
| | | <div |
| | | class="account-card" |
| | |
| | | <span class="enable" v-if="!showJPGArr" @click="editHeadPic" |
| | | >编辑头像</span |
| | | > |
| | | |
| | | </div> |
| | | </div> |
| | | <div class="user-desc"> |
| | |
| | | |
| | | <div class="permission" v-if="inAccountDetail && isSetPermission"> |
| | | <div class="title">权限管理</div> |
| | | |
| | | <!-- <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="tree-window"> |
| | | <el-tree |
| | | ref="treeMenus" |
| | |
| | | style="width: 100%" |
| | | ref="view_6" |
| | | ></deviceInfo> |
| | | <Authorization v-if="activeIndex == 7" style="width: 100%" ref="view_7"> |
| | | </Authorization> |
| | | <WebManage v-if="activeIndex == 8"></WebManage> |
| | | </div> |
| | | <div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''"> |
| | | <div |
| | |
| | | size="mini" |
| | | @focus="showRecomand = true" |
| | | clearable |
| | | @input="filterRecomand" |
| | | :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'" |
| | | v-model="searchText" |
| | | > |
| | |
| | | class="nav-child" |
| | | @click="openWelcome(i)" |
| | | @mousedown="mouseDownIndex = i" |
| | | :class="mouseDownIndex === i? 'nav-child-active':''" |
| | | :class="mouseDownIndex === i ? 'nav-child-active' : ''" |
| | | v-for="(item, i) in menuArr" |
| | | :key="i" |
| | | > |
| | |
| | | import deviceInfo from "../views/deviceInfo"; |
| | | import keyboardLanguage from "../views/keyboardLanguage"; |
| | | import generalSettings from "../views/generalSettings"; |
| | | import Authorization from "../views/Authorization"; |
| | | import WebManage from "@/pages/settings/components/WebManage"; |
| | | import { pad0, getUrlKey } from "@/api/utils"; |
| | | |
| | | export default { |
| | |
| | | keyboardLanguage, |
| | | generalSettings, |
| | | deviceInfo, |
| | | Authorization, |
| | | WebManage, |
| | | }, |
| | | data() { |
| | | var v2 = (rule, value, callback) => { |
| | |
| | | selectedPic: null, |
| | | showDayInput: false, |
| | | timestamp: 0, |
| | | ajustType: "手动校时", |
| | | inAccountDetail: false, |
| | | isChangePw: false, |
| | | isSetPermission: false, |
| | |
| | | blackIcon: "/images/settings/黑色一级icon/设备信息.png", |
| | | whiteIcon: "/images/settings/白色一级icon/设备信息.png", |
| | | }, |
| | | { |
| | | name: "授权管理", |
| | | icon: "\ue7e9;", |
| | | imgUrl: "/images/settings/授权管理.png", |
| | | blackIcon: "/images/settings/黑色一级icon/授权管理.png", |
| | | whiteIcon: "/images/settings/白色一级icon/授权管理.png", |
| | | }, |
| | | { |
| | | name: "域名管理", |
| | | icon: "\ue6db", |
| | | imgUrl: "/images/settings/通用设置.png", |
| | | blackIcon: "/images/settings/黑色一级icon/通用设置.png", |
| | | whiteIcon: "/images/settings/白色一级icon/通用设置.png", |
| | | }, |
| | | ], |
| | | accountArr: [], |
| | | jpgArr: [], |
| | |
| | | inputHour: "", |
| | | inputMin: "", |
| | | inputSec: "", |
| | | mouseDownIndex:'', |
| | | mouseDownIndex: "", |
| | | inputYrs: "", |
| | | showInputNickName: false, |
| | | inputMonth: "", |
| | |
| | | ], |
| | | confirmPassword: [{ validator: v4, trigger: "blur" }], |
| | | }, |
| | | account_list_scroll: false |
| | | account_list_scroll: false, |
| | | }; |
| | | }, |
| | | created(){ |
| | | let color = localStorage.getItem('--colorCard') |
| | | if(color) { |
| | | document.documentElement.style.setProperty('--colorCard',`${color}`) |
| | | } |
| | | created() { |
| | | let color = localStorage.getItem("--colorCard"); |
| | | if (color) { |
| | | document.documentElement.style.setProperty("--colorCard", `${color}`); |
| | | } |
| | | }, |
| | | beforeDestroy() { |
| | | clearTimeout(this.clockTimer); |
| | | clearInterval(this.browserTimer); |
| | | // if (this.$refs.curPage) { |
| | | // this.$refs.curPage.removeEventListener("click"); |
| | | // } |
| | | }, |
| | | mounted() { |
| | | window.addEventListener("message",(e)=>{ |
| | | if(e.data.msg === '返回系统设置') { |
| | | this.showWelcome = true |
| | | } |
| | | }) |
| | | // 返回按钮回调 |
| | | window.addEventListener("message", (e) => { |
| | | if (e.data.msg === "返回系统设置") { |
| | | this.showWelcome = true; |
| | | } |
| | | }); |
| | | const menu = getUrlKey("menu"); |
| | | if (menu) { |
| | | this.showWelcome = false; |
| | |
| | | } |
| | | ); |
| | | }, |
| | | // flatCheckedArr(arr, res) { |
| | | // for (const item of arr) { |
| | | // if (item.selected) res.push(item.id); |
| | | // if (item.children) this.flatCheckedArr(item.children, res); |
| | | // } |
| | | // }, |
| | | saveAuth() { |
| | | // let arr = []; |
| | | // this.flatCheckedArr(this.sysMenus, arr); |
| | | updataUser({ |
| | | id: this.activeAccountItem.id, |
| | | menuIds: this.$refs.treeMenus.getCheckedKeys(), |
| | |
| | | } |
| | | }, |
| | | parseTime() { |
| | | [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split( |
| | | "-" |
| | | ); |
| | | [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split( |
| | | ":" |
| | | ); |
| | | [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(); |
| | | // }, |
| | | }, |
| | | computed: { |
| | | activeUserRole() { |
| | | return this.activeAccountItem.sysRoles[0].name; |
| | | if ( |
| | | this.activeAccountItem.sysRoles && |
| | | this.activeAccountItem.sysRoles.length |
| | | ) { |
| | | return this.activeAccountItem.sysRoles[0].name; |
| | | } |
| | | return "普通用户"; |
| | | }, |
| | | curUserRole() { |
| | | const info = JSON.parse(sessionStorage.getItem("userInfo")); |
| | |
| | | return false; |
| | | }, |
| | | isShowPermitBtn() { |
| | | // basic 用户不允许修改权限 |
| | | if (this.activeUserRole == "超级管理员") { |
| | | return false; |
| | | } |
| | | if (this.curUserRole == "管理员") { |
| | | return this.activeUserRole == "普通用户"; |
| | | } else { |
| | |
| | | return this.searchArr.filter((item) => { |
| | | return item.name.indexOf(this.searchText.toUpperCase()) > -1; |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | watch: { |
| | | showWelcome(newVal) { |
| | | if (newVal) { |
| | | // 隐藏返回按按钮 |
| | | window.parent.postMessage( |
| | | { |
| | | msg: "hiddenBack", |
| | | }, |
| | | "*" |
| | | ); |
| | | } else { |
| | | //显示返回按钮 |
| | | window.parent.postMessage( |
| | | { |
| | | msg: "showBack", |
| | | }, |
| | | "*" |
| | | ); |
| | | } |
| | | }, |
| | | }, |
| | |
| | | border-radius: 40px; |
| | | |
| | | .search-res { |
| | | background-color: rgba(255,255,255,.5); |
| | | background-color: rgba(255, 255, 255, 0.5); |
| | | } |
| | | .search-input { |
| | | font-size: 14px; |
| | |
| | | width: 100%; |
| | | font-weight: bold; |
| | | |
| | | &::-webkit-input-placeholder { /* WebKit browsers */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | &::-webkit-input-placeholder { |
| | | /* WebKit browsers */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | } |
| | | &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | &:-moz-placeholder { |
| | | /* Mozilla Firefox 4 to 18 */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | } |
| | | &::-moz-placeholder { /* Mozilla Firefox 19+ */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | &::-moz-placeholder { |
| | | /* Mozilla Firefox 19+ */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | } |
| | | &:-ms-input-placeholder { /* Internet Explorer 10+ */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | |
| | | } |
| | | |
| | | |
| | | &:-ms-input-placeholder { |
| | | /* Internet Explorer 10+ */ |
| | | color: #828282; |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | .el-input__suffix { |
| | | display: flex; |
| | |
| | | text-align: left; |
| | | box-sizing: border-box; |
| | | padding: 0 20px; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | } |
| | |
| | | text-align: left; |
| | | box-sizing: border-box; |
| | | padding: 0 20px; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | font-size: 14px; |
| | | } |
| | | .res-bar:hover { |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | border: 2px solid #F2F2F7; |
| | | border: 2px solid #f2f2f7; |
| | | |
| | | &-active { |
| | | border: 2px solid #4E94FF; |
| | | border: 2px solid #4e94ff; |
| | | } |
| | | |
| | | &:hover { |
| | | background: #F2F2F7; |
| | | background: #f2f2f7; |
| | | } |
| | | |
| | | .child-info { |
| | |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | margin-top: 24px; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | .container { |
| | |
| | | flex-basis: auto; |
| | | box-sizing: border-box; |
| | | background-color: #fff; |
| | | color: #4F4F4F; |
| | | border-top: 2px solid #E1E0E6; |
| | | color: #4f4f4f; |
| | | border-top: 2px solid #e1e0e6; |
| | | overflow-x: hidden; |
| | | .container-left { |
| | | height: 100%; |
| | | width: 244px; |
| | |
| | | |
| | | .card-text { |
| | | margin-left: 20px; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | line-height: 22px; |
| | |
| | | height: calc(85%); |
| | | overflow: auto; |
| | | padding-right: 5px; |
| | | &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { visibility: hidden; } |
| | | &::-webkit-scrollbar { |
| | | background-color: #fff; |
| | | } |
| | | &::-webkit-scrollbar-track, |
| | | &::-webkit-scrollbar-thumb { |
| | | visibility: hidden; |
| | | } |
| | | &::-webkit-scrollbar { |
| | | background-color: #fff; |
| | | } |
| | | |
| | | &.account-list-scroll::-webkit-scrollbar-thumb, &.account-list-scroll::-webkit-scrollbar-track { |
| | | &.account-list-scroll::-webkit-scrollbar-thumb, |
| | | &.account-list-scroll::-webkit-scrollbar-track { |
| | | visibility: visible; |
| | | } |
| | | &.account-list-scroll::-webkit-scrollbar { |
| | | background-color: #f5f5f5; |
| | | } |
| | | background-color: #f5f5f5; |
| | | } |
| | | } |
| | | .add-account { |
| | | color: var(--colorCard); |
| | |
| | | height: 19.21px; |
| | | background: #ffffff; |
| | | border-radius: 20px; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | transform: scale(0.833333); |
| | | line-height: 22.21px; |
| | | span { |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | min-width: 200px; |
| | | .user-name { |
| | | margin-bottom: 10px; |
| | |
| | | |
| | | .change-pw { |
| | | padding: 40px 10px; |
| | | max-width: 600px; |
| | | // max-width: 600px; |
| | | margin: 0 auto; |
| | | .title { |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | line-height: 22px; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | margin-bottom: 40px; |
| | | height: 28px; |
| | | display: flex; |
| | |
| | | border-radius: 8px; |
| | | padding: 0 15px 0 20px; |
| | | .el-select-dropdown__item { |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | height: 32px; |
| | | font-size: 12px; |
| | | line-height: 32px; |
| | |
| | | border: 2px solid transparent; |
| | | border-radius: 20px; |
| | | height: 32px; |
| | | line-height: 32px; |
| | | line-height: 32px; |
| | | padding: 0 15px; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | } |
| | | .el-input__inner:focus{ |
| | | .el-input__inner:focus { |
| | | border: 2px solid var(--colorCard); |
| | | } |
| | | .el-input__inner::placeholder { |
| | |
| | | width: 100%; |
| | | } |
| | | .el-select .el-input .el-select__caret { |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | } |
| | |
| | | font-size: 15px; |
| | | } |
| | | .el-input__clear { |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | font-size: 16px; |
| | | line-height: 48px; |
| | | } |
| | |
| | | line-height: 48px; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | height: 48px; |
| | | background: #fbfaff; |
| | | border-bottom: 2px solid #f2f2f7; |
| | |
| | | line-height: 22px; |
| | | } |
| | | .fill-group { |
| | | max-width: 450px; |
| | | // max-width: 450px; |
| | | margin-top: 10px; |
| | | |
| | | margin: 0 auto; |
| | |
| | | border-radius: 8px; |
| | | padding: 0 15px 0 20px; |
| | | .el-select-dropdown__item { |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | height: 32px; |
| | | font-size: 12px; |
| | | line-height: 32px; |
| | |
| | | } |
| | | .el-form-item { |
| | | .el-input__inner { |
| | | background-color: #ffffff; |
| | | border: 2px solid transparent; |
| | | border-radius: 20px; |
| | | height: 32px; |
| | | line-height: 32px; |
| | | padding: 0 15px; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | } |
| | | .el-input__inner:focus{ |
| | | border: 2px solid var(--colorCard); |
| | | } |
| | | background-color: #ffffff; |
| | | border: 2px solid transparent; |
| | | border-radius: 20px; |
| | | height: 32px; |
| | | line-height: 32px; |
| | | padding: 0 15px; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | } |
| | | .el-input__inner:focus { |
| | | border: 2px solid var(--colorCard); |
| | | } |
| | | .el-input__inner::placeholder { |
| | | color: #c0c4cc; |
| | | font-size: 12px; |
| | |
| | | width: 100%; |
| | | } |
| | | .el-select .el-input .el-select__caret { |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | } |
| | |
| | | .datetime-right { |
| | | .datetime-left { |
| | | .device-time { |
| | | color: #4F4F4F; |
| | | color: #4f4f4f; |
| | | .title { |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | border: 2px solid transparent; |
| | | } |
| | | } |
| | | |
| | | } |
| | | .btns { |
| | | margin: 0 auto; |
| | | margin-top: 40px; |
| | | width: fit-content; |
| | | display: flex; |
| | | .cancel { |
| | | width: 188px; |
| | | height: 40px; |
| | | cursor: pointer; |
| | | border-radius: 25px; |
| | | background-color: #e0e0e0; |
| | | line-height: 40px; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | margin-right: 12px; |
| | | } |
| | | .ok { |
| | | width: 188px; |
| | | height: 40px; |
| | | cursor: pointer; |
| | | border-radius: 25px; |
| | | background-color: var(--colorCard); |
| | | color: #fff; |
| | | line-height: 40px; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | } |
| | | .btns { |
| | | margin: 0 auto; |
| | | margin-top: 40px; |
| | | width: fit-content; |
| | | display: flex; |
| | | .cancel { |
| | | width: 188px; |
| | | height: 40px; |
| | | cursor: pointer; |
| | | border-radius: 25px; |
| | | background-color: #e0e0e0; |
| | | line-height: 40px; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | margin-right: 12px; |
| | | } |
| | | .ok { |
| | | width: 188px; |
| | | height: 40px; |
| | | cursor: pointer; |
| | | border-radius: 25px; |
| | | background-color: var(--colorCard); |
| | | color: #fff; |
| | | line-height: 40px; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | .container-right-for-account { |
| | | background: #fbfaff; |
| | | padding: 0; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | |