<template>
|
<div class="container" v-if="!showWelcome">
|
<div class="container-left">
|
<div
|
v-for="(item, i) in menuArr"
|
:key="i"
|
:class="activeIndex == item.name ? 'left-card-active left-card' : 'left-card'"
|
@click="openMenu(item.name)"
|
>
|
<img :src="item.blackIcon" class="b" alt="" />
|
<img :src="item.whiteIcon" class="w" alt="" />
|
<span class="card-text">{{ item.name }}</span>
|
</div>
|
</div>
|
|
<div class="container-center" v-if="activeIndex == '账户'">
|
<div class="account-left">
|
<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"
|
:class="activeAccountIndex == index ? 'account-card-active' : ''"
|
v-for="(item, index) in accountArr"
|
:key="index"
|
ref="account-card"
|
@click="openAccount(item, index)"
|
>
|
<div class="touxiang">
|
<img v-if="item.headpic" :src="`data:image/png;base64,${item.headpic}`" alt="" />
|
<span class="user-name">{{ item.username }}</span>
|
</div>
|
<div class="login-tag" v-if="item.id == curUserID">
|
<span>当前登录</span>
|
</div>
|
</div>
|
</div>
|
<div class="add-account" v-if="curUserRole != '普通用户'">
|
<i class="el-icon-circle-plus" style="font-size: 40px" @click="openAdd"></i>
|
</div>
|
</div>
|
</div>
|
<div
|
class="container-right"
|
v-if="activeIndex == '账户' || activeIndex == '日期时间'"
|
:class="activeIndex == '账户' ? 'container-right-for-account' : ''"
|
>
|
<div class="account-right" v-if="activeIndex == 0">
|
<div class="account-content" v-if="inAccountDetail == false && isAddAccount == false">
|
<div class="content-top">
|
<div class="touxiang-big" @mouseenter="showChangePic = true" @mouseleave="showChangePic = false">
|
<img
|
v-if="activeAccountItem.headpic"
|
:src="`data:image/png;base64,${activeAccountItem.headpic}`"
|
alt=""
|
/>
|
<div class="touxiang-mask" v-show="showChangePic">
|
<span class="enable" v-if="!showJPGArr" @click="editHeadPic">编辑头像</span>
|
</div>
|
</div>
|
<div class="user-desc">
|
<div class="user-name">
|
<span class="icon iconfont" style="font-size: 19px; margin-right: 4px"></span>
|
<span>{{ activeAccountItem.username }}</span>
|
</div>
|
<div class="user-role">
|
{{ activeUserRole }}
|
</div>
|
<div class="nick-name">
|
<span class="nick-text">昵称：</span>
|
<span v-show="!showInputNickName">{{ activeAccountItem.nickname }}</span>
|
<el-input size="mini" v-model="inputNickName" v-if="showInputNickName"></el-input>
|
<span v-show="!showInputNickName" class="icon iconfont edit-icon" @click="editNickName"></span>
|
<span v-show="showInputNickName" class="icon iconfont clear-icon" @click="showInputNickName = false"
|
></span
|
>
|
<span v-show="showInputNickName" class="icon iconfont confirm-icon" @click="hideInputNick"
|
></span
|
>
|
</div>
|
</div>
|
</div>
|
<div class="chang-pic-arr" v-if="showJPGArr">
|
<div class="upload-group">
|
<div
|
class="upload-jpg"
|
:class="selectedPic == index ? 'upload-jpg-border' : ''"
|
v-for="(item, index) in jpgArr"
|
:key="index"
|
@click="pickHeadDefPic(item, index)"
|
>
|
<img v-if="item" :src="`data:image/png;base64,${item.path}`" alt="" srcset="" />
|
<div class="img-mask" v-if="selectedPic == index">
|
<span class="icon iconfont enable"></span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="btns" v-if="showJPGArr">
|
<div class="cancel" @click="cacelChoosePic">取消</div>
|
<div class="ok" @click="confirmChangePic">保存</div>
|
</div>
|
<div class="list-btn" v-if="showJPGArr == false">
|
<div class="item-btn alt-pw-btn" @click="showChangePassword">
|
修改密码
|
</div>
|
<div class="item-btn del-usr-btn" v-if="isShowDeleteAccount" @click="deleteAccount">
|
删除账户
|
</div>
|
<div v-if="isShowPermitBtn" class="item-btn auth-set-btn" @click="openPermission">
|
权限设置
|
</div>
|
</div>
|
</div>
|
|
<div class="change-pw" v-if="inAccountDetail && isChangePw">
|
<div class="title">
|
<span class="icon iconfont"></span>
|
<span>修改密码</span>
|
</div>
|
<el-form :model="passwordForm" :rules="pwRules" ref="passwordForm" class="password-form">
|
<el-form-item prop="curPassword" v-if="activeAccountItem.id == curUserID">
|
<div class="p-title">当前密码</div>
|
|
<el-input placeholder="必填" v-model="passwordForm.curPassword" show-password></el-input>
|
</el-form-item>
|
<el-form-item prop="newPassword">
|
<div class="p-title">新密码</div>
|
<el-input placeholder="必填" v-model="passwordForm.newPassword" show-password></el-input>
|
</el-form-item>
|
<el-form-item prop="confirmPassword">
|
<div class="p-title">确认密码</div>
|
<el-input placeholder="必填" v-model="passwordForm.confirmPassword" show-password></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="btns">
|
<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="tree-window">
|
<el-tree
|
ref="treeMenus"
|
:data="sysMenus"
|
:props="props"
|
node-key="id"
|
:default-checked-keys="checkedArr"
|
show-checkbox
|
check-on-click-node
|
default-expand-all
|
></el-tree>
|
</div>
|
<div class="btns">
|
<div class="cancel" @click="cancelSet">取消</div>
|
<div class="ok" @click="saveAuth">保存</div>
|
</div>
|
</div>
|
|
<div class="add-account-page" v-if="isAddAccount">
|
<div class="title">添加账户</div>
|
<div class="upload-group">
|
<div
|
class="upload-jpg"
|
:class="selectedPic == index ? 'upload-jpg-border' : ''"
|
v-for="(item, index) in jpgArr"
|
:key="index"
|
@click="pickHeadDefPic(item, index)"
|
>
|
<img v-if="item" :src="`data:image/png;base64,${item.path}`" alt="" srcset="" />
|
<div class="img-mask" v-if="selectedPic == index">
|
<span class="icon iconfont enable"></span>
|
</div>
|
</div>
|
</div>
|
<div class="fill-group">
|
<el-form :model="addForm" :rules="addRules" ref="addForm" class="add-form">
|
<el-form-item prop="userName">
|
<div class="p-title">用户名</div>
|
<el-input placeholder="2~10 位字符，不能以数字开头，不可包含汉字" v-model="addForm.userName"></el-input>
|
</el-form-item>
|
<el-form-item prop="roleId" v-if="curUserRole != '普通用户'">
|
<div class="p-title">角色</div>
|
<el-select v-model="addForm.roleId" placeholder="请选择角色" :popper-append-to-body="false">
|
<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="选填，2~10 位字符" v-model="addForm.nickName"></el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<div class="p-title">密码</div>
|
<el-input placeholder="必填，至少为 6 位" v-model="addForm.password" show-password></el-input>
|
</el-form-item>
|
<el-form-item prop="confirmPassword">
|
<div class="p-title">确认密码</div>
|
<el-input placeholder="必填" v-model="addForm.confirmPassword" show-password></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="btns">
|
<div class="cancel" @click="cancelAdd">取消</div>
|
<div class="ok" @click="saveAddAccount('addForm')">保存</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="datetime-right" v-if="activeIndex == '日期时间'">
|
<div class="datetime-left">
|
<div class="device-time">
|
<div class="title">
|
<img src="/images/settings/黑色一级icon/设备信息.png" alt="" />
|
<span>设备时间</span>
|
</div>
|
<div class="time-main">{{ equipmentTime }}</div>
|
<div class="date-bot">
|
<span class="year">{{ equipmentDate }}</span>
|
<span class="week">{{ weekday }}</span>
|
</div>
|
</div>
|
|
<div class="adjust-zone">
|
<div class="two-radio">
|
<div class="radio" :class="isNtp ? '' : 'highlight-radio'" @click="isNtp = false">
|
手动校时
|
</div>
|
<div class="radio" :class="isNtp ? 'highlight-radio' : ''" @click="isNtp = true">
|
NTP校时
|
</div>
|
</div>
|
|
<div class="mamal-wrap" v-if="isNtp == false">
|
<div class="clock-wrap">
|
<div class="clock">
|
<div class="time-block">
|
<div class="dnum" @click="showInput('Hour')">
|
<span v-show="!showHourInput">{{ syncHour }}</span>
|
<input
|
class="input-box"
|
v-show="showHourInput"
|
ref="iptHour"
|
oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>23)value='23'"
|
type="text"
|
v-model="inputHour"
|
@blur="hideInput('Hour')"
|
@keydown.enter="hideInput('Hour')"
|
/>
|
</div>
|
<div class="control">
|
<span class="icon iconfont" @click="plusOne('hrs')"></span>
|
<span class="icon iconfont fanzhuan" @click="minusOne('hrs')"></span>
|
</div>
|
</div>
|
<div class="sep">:</div>
|
<div class="time-block">
|
<div class="dnum" @click="showInput('Min')">
|
<span v-show="!showMinInput">{{ syncMin }}</span>
|
<input
|
class="input-box"
|
v-show="showMinInput"
|
ref="iptMin"
|
oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>59)value='59'"
|
type="text"
|
v-model="inputMin"
|
@blur="hideInput('Min')"
|
@keydown.enter="hideInput('Min')"
|
/>
|
</div>
|
<div class="control">
|
<span class="icon iconfont" @click="plusOne('min')"></span>
|
<span class="icon iconfont fanzhuan" @click="minusOne('min')"></span>
|
</div>
|
</div>
|
<div class="sep">:</div>
|
<div class="time-block">
|
<div class="dnum" @click="showInput('Sec')">
|
<span v-show="!showSecInput">{{ syncSec }}</span>
|
<input
|
class="input-box"
|
v-show="showSecInput"
|
ref="iptSec"
|
oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>59)value='59'"
|
type="text"
|
v-model="inputSec"
|
@blur="hideInput('Sec')"
|
@keydown.enter="hideInput('Sec')"
|
/>
|
</div>
|
<div class="control">
|
<span class="icon iconfont" @click="plusOne('sec')"></span>
|
<span class="icon iconfont fanzhuan" @click="minusOne('sec')"></span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="date-adjust">
|
<div class="adjust-bar">
|
<div class="minus" @click="minusOne('yrs')">
|
<i class="el-icon-remove-outline"></i>
|
</div>
|
<div class="middle" @click="showInput('Yrs')">
|
<span v-show="!showYrsInput">{{ syncYrs }}</span>
|
<input
|
class="input-box"
|
v-show="showYrsInput"
|
ref="iptYrs"
|
oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4);"
|
type="text"
|
v-model="inputYrs"
|
@blur="hideInput('Yrs')"
|
@keydown.enter="hideInput('Yrs')"
|
/>
|
<span>年</span>
|
</div>
|
<div class="plus" @click="plusOne('yrs')">
|
<i class="el-icon-circle-plus-outline"></i>
|
</div>
|
</div>
|
<div class="adjust-bar">
|
<div class="minus" @click="minusOne('mth')">
|
<i class="el-icon-remove-outline"></i>
|
</div>
|
<div class="middle" @click="showInput('Month')">
|
<span v-show="!showMonthInput">{{ syncMonth }}</span>
|
<input
|
class="input-box"
|
v-show="showMonthInput"
|
ref="iptMonth"
|
@input="checkMonthInput"
|
type="text"
|
v-model="inputMonth"
|
@blur="hideInput('Month')"
|
@keydown.enter="hideInput('Month')"
|
/>
|
<span>月</span>
|
</div>
|
|
<div class="plus" @click="plusOne('mth')">
|
<i class="el-icon-circle-plus-outline"></i>
|
</div>
|
</div>
|
<div class="adjust-bar">
|
<div class="minus" @click="minusOne('day')">
|
<i class="el-icon-remove-outline"></i>
|
</div>
|
<div class="middle" @click="showInput('Day')">
|
<span v-show="!showDayInput">{{ syncDay }}</span>
|
<input
|
class="input-box"
|
v-show="showDayInput"
|
ref="iptDay"
|
@input="checkDayInput"
|
type="text"
|
v-model="inputDay"
|
@blur="hideInput('Day')"
|
@keydown.enter="hideInput('Day')"
|
/>
|
<span>日</span>
|
</div>
|
<div class="plus" @click="plusOne('day')">
|
<i class="el-icon-circle-plus-outline"></i>
|
</div>
|
</div>
|
</div>
|
|
<div class="manual-time">
|
<switchBar :barName="`同步本计算机时间`" @switchChange="syncBrowser" :value="isSyncBrowser"></switchBar>
|
</div>
|
</div>
|
|
<div class="ntp-wrap" v-if="isNtp">
|
<el-form>
|
<el-form-item label="服务器地址">
|
<ipInput :ip="ntpServer" @on-blur="ntpServer = arguments[0]"></ipInput>
|
</el-form-item>
|
|
<el-form-item label="校时时间间隔">
|
<div class="right">
|
<el-input-number
|
v-model.number="timeInterval"
|
:min="1"
|
:max="60"
|
placeholder="请输入"
|
size="small"
|
:controls="false"
|
></el-input-number>
|
|
<span class="desc-min">分钟</span>
|
<el-button type="text" @click="testNTP" :loading="ntpTestLoading">测试</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="btns">
|
<div class="cancel" @click="cancelSetTime">取消</div>
|
<div class="ok" @click="submitClock">保存</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<clusterManagement v-if="activeIndex == '集群管理'" ref="view_2" style="width: 100%"></clusterManagement>
|
<netSettings ref="网络设置" v-if="activeIndex == '网络设置'" style="width: 100%"></netSettings>
|
<keyboardLanguage ref="键盘和语言" v-if="activeIndex == '键盘和语言'" style="width: 100%"></keyboardLanguage>
|
<generalSettings ref="通用设置" v-if="activeIndex == '通用设置'" style="width: 100%"></generalSettings>
|
<deviceInfo v-if="activeIndex == '设备信息'" style="width: 100%" ref="view_6"></deviceInfo>
|
<Authorization v-if="activeIndex == '授权管理'" style="width: 100%" ref="view_7"> </Authorization>
|
<WebManage v-if="activeIndex == '域名管理'"></WebManage>
|
</div>
|
<div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''">
|
<div class="search-box" :class="showRecomand ? 'border-change' : ''" @click.stop>
|
<el-input
|
class="search-input"
|
placeholder="查找设置"
|
size="mini"
|
@focus="showRecomand = true"
|
clearable
|
:suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'"
|
v-model="searchText"
|
>
|
</el-input>
|
|
<div class="search-res" v-if="showRecomand">
|
<div class="res-bar" v-for="(item, index) in searchArrForShow" :key="index" @click="pickQuick(item.addr)">
|
{{ item.name }}
|
</div>
|
<div class="no-res-bar" v-if="searchArrForShow.length == 0">没有找到与 {{ searchText }} 相关的结果</div>
|
</div>
|
<div class="dummy-end" v-if="showRecomand" style="height: 14px"></div>
|
</div>
|
<div class="nav-items">
|
<div
|
class="nav-child"
|
@click="openWelcome(item.name)"
|
@mousedown="mouseDownIndex = item.name"
|
:class="mouseDownIndex === item.name ? 'nav-child-active' : ''"
|
v-for="(item, i) in menuArr"
|
:key="i"
|
>
|
<div class="child-info">
|
<img :src="item.imgUrl" alt="" />
|
<span class="welcome-title">{{ item.name }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system"
|
import {
|
addUser,
|
getUsers,
|
updateUser,
|
updataUser,
|
updatePassword,
|
deleteUser,
|
getUserMenus,
|
defHeadPics,
|
getRoles
|
} from "@/api/user"
|
import switchBar from "../components/switchBar"
|
import ipInput from "../components/IPInput"
|
import clusterManagement from "../views/clusterManagement"
|
import netSettings from "../views/NetSettings"
|
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 {
|
name: "settings",
|
components: {
|
switchBar,
|
ipInput,
|
clusterManagement,
|
netSettings,
|
keyboardLanguage,
|
generalSettings,
|
deviceInfo,
|
Authorization,
|
WebManage
|
},
|
data() {
|
var v2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"))
|
} else if (value !== this.addForm.password) {
|
callback(new Error("两次输入密码不一致!"))
|
} else {
|
callback()
|
}
|
}
|
var v4 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"))
|
} else if (value !== this.passwordForm.newPassword) {
|
callback(new Error("两次输入密码不一致!"))
|
} else {
|
callback()
|
}
|
}
|
const v1 = (rule, value, callback) => {
|
if (value.trim() === "") {
|
callback(new Error("请输入用户名"))
|
this.addForm.userName = ""
|
} else if (isNaN(Number(value[0])) == false) {
|
callback(new Error("不能以数字开头"))
|
} else if (/[\u4E00-\u9FA5]/g.test(value)) {
|
callback(new Error("不能输入汉字"))
|
} else if (value.length < 2 || value.length > 10) {
|
callback(new Error("长度为 2 - 10 个字符"))
|
} else {
|
callback()
|
}
|
}
|
return {
|
showChangePic: false,
|
syncYrs: "",
|
activeAccountItem: {},
|
syncMonth: "",
|
syncHour: "",
|
showWelcome: true,
|
syncDay: "",
|
searchText: "",
|
syncMin: "",
|
syncSec: "00",
|
isSyncBrowser: false,
|
showDateTime: false,
|
isAddAccount: false,
|
browserTimer: null,
|
timezone: "",
|
showRecomand: false,
|
searchArr: [
|
// { name: "账户", addr: [0] },
|
// { name: "通用设置", addr: [5] },
|
// { name: "时间录像时长", addr: [5, 0] },
|
// { name: "事件声音", addr: [5, 1] },
|
// { name: "个性化设置", addr: [5, 2] },
|
{ name: "集群管理", addr: ["集群管理"] },
|
{ name: "网络设置", addr: ["网络设置"] },
|
{ name: "无线网络", addr: ["网络设置", 1] },
|
{ name: "有线网络", addr: ["网络设置", 2] },
|
{ name: "设备信息", addr: ["设备信息"] },
|
{ name: "日期时间", addr: ["日期时间"] },
|
{ name: "NTP校时", addr: ["日期时间", 0] },
|
{ name: "手动校时", addr: ["日期时间", 1] },
|
{ name: "键盘和语言", addr: ["键盘和语言"] },
|
{ name: "系统语言", addr: ["键盘和语言", 0] },
|
{ name: "键盘管理", addr: ["键盘和语言", 1] }
|
],
|
inputNickName: "",
|
showHourInput: false,
|
showMinInput: false,
|
showSecInput: false,
|
showYrsInput: false,
|
showMonthInput: false,
|
selectedPic: null,
|
showDayInput: false,
|
timestamp: 0,
|
inAccountDetail: false,
|
isChangePw: false,
|
isSetPermission: false,
|
timeInterval: 10,
|
ntpServer: "",
|
equipmentTime: "",
|
equipmentDate: "",
|
roleList: [],
|
ntpTestLoading: false,
|
showJPGArr: false,
|
settime: "",
|
weekday: "",
|
menuArr: [
|
{
|
name: "账户",
|
icon: "\ue6de",
|
imgUrl: "/images/settings/账户-蓝.png",
|
blackIcon: "/images/settings/黑色一级icon/账户.png",
|
whiteIcon: "/images/settings/白色一级icon/账户.png",
|
hidden: true
|
},
|
{
|
name: "日期时间",
|
icon: "\ue6ff",
|
imgUrl: "/images/settings/时间日期.png",
|
blackIcon: "/images/settings/黑色一级icon/时间信息.png",
|
whiteIcon: "/images/settings/白色一级icon/时间日期.png",
|
hidden: false
|
},
|
{
|
name: "集群管理",
|
icon: "\ue6df",
|
imgUrl: "/images/settings/集群管理.png",
|
blackIcon: "/images/settings/黑色一级icon/集群管理.png",
|
whiteIcon: "/images/settings/白色一级icon/集群管理.png",
|
hidden: false
|
},
|
{
|
name: "网络设置",
|
icon: "\ue6dd",
|
imgUrl: "/images/settings/网络设置.png",
|
blackIcon: "/images/settings/黑色一级icon/网络设置.png",
|
whiteIcon: "/images/settings/白色一级icon/网络设置.png",
|
hidden: false
|
},
|
{
|
name: "键盘和语言",
|
icon: "\ue6dc",
|
imgUrl: "/images/settings/键盘和语言.png",
|
blackIcon: "/images/settings/黑色一级icon/键盘和语言.png",
|
whiteIcon: "/images/settings/白色一级icon/键盘和语言.png",
|
hidden: false
|
},
|
{
|
name: "通用设置",
|
icon: "\ue6db",
|
imgUrl: "/images/settings/通用设置.png",
|
blackIcon: "/images/settings/黑色一级icon/通用设置.png",
|
whiteIcon: "/images/settings/白色一级icon/通用设置.png",
|
hidden: true
|
},
|
{
|
name: "设备信息",
|
icon: "\ue756",
|
imgUrl: "/images/settings/设备信息.png",
|
blackIcon: "/images/settings/黑色一级icon/设备信息.png",
|
whiteIcon: "/images/settings/白色一级icon/设备信息.png",
|
hidden: false
|
},
|
{
|
name: "授权管理",
|
icon: "\ue7e9;",
|
imgUrl: "/images/settings/授权管理.png",
|
blackIcon: "/images/settings/黑色一级icon/授权管理.png",
|
whiteIcon: "/images/settings/白色一级icon/授权管理.png",
|
hidden: false
|
},
|
{
|
name: "域名管理",
|
icon: "\ue6db",
|
imgUrl: "/images/settings/通用设置.png",
|
blackIcon: "/images/settings/黑色一级icon/通用设置.png",
|
whiteIcon: "/images/settings/白色一级icon/通用设置.png",
|
hidden: false
|
}
|
].filter((item) => {
|
return !item.hidden
|
}),
|
accountArr: [],
|
jpgArr: [],
|
isNtp: false,
|
activeIndex: "日期时间",
|
clockTimer: null,
|
inputHour: "",
|
inputMin: "",
|
inputSec: "",
|
mouseDownIndex: "",
|
inputYrs: "",
|
showInputNickName: false,
|
inputMonth: "",
|
inputDay: "",
|
passwordForm: {
|
curPassword: "",
|
newPassword: "",
|
confirmPassword: ""
|
},
|
activeAccountIndex: 0,
|
sysMenus: [],
|
checkedArr: [],
|
addForm: {
|
userName: "",
|
nickName: "",
|
password: "",
|
headpic: "",
|
confirmPassword: "",
|
roleId: ""
|
},
|
props: {
|
label: "name"
|
},
|
addRules: {
|
userName: [{ validator: v1, trigger: "blur" }],
|
nickName: [{ min: 2, max: 10, message: "长度为 2 - 10 位", trigger: "blur" }],
|
password: [
|
{ required: true, message: "请输入密码", trigger: "blur" },
|
{ min: 6, message: "长度至少为 6 位", trigger: "blur" }
|
],
|
confirmPassword: [{ validator: v2, trigger: "blur" }]
|
},
|
pwRules: {
|
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: v4, trigger: "blur" }]
|
},
|
account_list_scroll: false
|
}
|
},
|
created() {
|
let color = localStorage.getItem("--colorCard")
|
if (color) {
|
document.documentElement.style.setProperty("--colorCard", `${color}`)
|
}
|
},
|
beforeDestroy() {
|
clearTimeout(this.clockTimer)
|
clearInterval(this.browserTimer)
|
},
|
mounted() {
|
// 返回按钮回调
|
window.addEventListener("message", (e) => {
|
if (e.data.msg === "返回系统设置") {
|
this.showWelcome = true
|
}
|
})
|
const menu = getUrlKey("menu")
|
if (menu) {
|
this.showWelcome = false
|
this.activeIndex = menu
|
this.$nextTick(() => {
|
this.$refs[menu].openRight(2)
|
})
|
}
|
this.fetchUserList()
|
this.fetchDefHeadPic()
|
const e = this.$refs.curPage
|
if (e) {
|
e.addEventListener("click", () => {
|
if (this.showRecomand) {
|
this.showRecomand = false
|
}
|
})
|
}
|
},
|
methods: {
|
fetchDefHeadPic() {
|
defHeadPics().then((res) => {
|
this.jpgArr = res.data
|
})
|
},
|
fetchUserList(showLast = false) {
|
getUsers().then((res) => {
|
this.accountArr = res.data
|
if (this.accountArr.length) {
|
this.activeAccountItem = this.accountArr[this.activeAccountIndex]
|
}
|
if (showLast) {
|
this.cancelAdd()
|
const lastIdx = this.accountArr.length - 1
|
this.openAccount(this.accountArr[lastIdx], lastIdx)
|
}
|
})
|
},
|
confirmChangePic() {
|
updateUser({
|
id: this.activeAccountItem.id,
|
headpic: this.addForm.headpic
|
}).then((res) => {
|
if (res.success) {
|
this.$message.success(res.msg)
|
this.fetchUserList()
|
this.cacelChoosePic()
|
}
|
})
|
},
|
checkMonthInput() {
|
this.inputMonth = this.inputMonth.replace(/[^\d]/g, "")
|
if (this.inputMonth.length > 2) this.inputMonth = this.inputMonth.slice(0, 2)
|
if (+this.inputMonth > 12) {
|
this.inputMonth = "12"
|
}
|
},
|
checkDayInput() {
|
this.inputDay = this.inputDay.replace(/[^\d]/g, "")
|
if (this.inputDay.length > 2) {
|
this.inputDay = this.inputDay.slice(0, 2)
|
}
|
const max = this.getMaxDayOfMonth()
|
if (+this.inputDay > max) {
|
this.inputDay = max + ""
|
}
|
},
|
editNickName() {
|
this.showInputNickName = true
|
this.inputNickName = this.activeAccountItem.nickname
|
},
|
hideInputNick() {
|
if (this.inputNickName == this.activeAccountItem.nickname) {
|
this.showInputNickName = false
|
return
|
}
|
updateUser({
|
id: this.activeAccountItem.id,
|
nickname: this.inputNickName
|
}).then((res) => {
|
this.activeAccountItem.nickname = this.inputNickName
|
this.$message.success(res.msg)
|
this.fetchUserList(true)
|
this.showInputNickName = false
|
})
|
},
|
openAccount(item, i) {
|
this.showInputNickName = false
|
this.activeAccountItem = item
|
this.activeAccountIndex = i
|
this.isChangePw = false
|
this.inAccountDetail = false
|
this.cancelSet()
|
this.inAccountDetail = false
|
this.isAddAccount = false
|
this.selectedPic = null
|
this.cacelChoosePic()
|
this.fetchMenu()
|
},
|
minusOne(typ) {
|
this.isSyncBrowser = false
|
this.syncBrowser(false)
|
let num
|
switch (typ) {
|
case "hrs":
|
num = +this.syncHour - 1
|
if (num == -1) {
|
num = 23
|
}
|
this.syncHour = pad0(+num)
|
break
|
case "min":
|
num = +this.syncMin - 1
|
if (num == -1) {
|
num = 59
|
}
|
this.syncMin = pad0(+num)
|
break
|
case "sec":
|
num = +this.syncSec + 1
|
if (num == -1) {
|
num = 59
|
}
|
this.syncSec = pad0(+num)
|
break
|
case "yrs":
|
num = +this.syncYrs - 1
|
this.syncYrs = pad0(+num)
|
break
|
case "mth":
|
num = +this.syncMonth - 1
|
if (num == 0) {
|
num = 12
|
this.minusOne("yrs")
|
}
|
this.syncMonth = pad0(+num)
|
if (+this.syncDay > this.getMaxDayOfMonth()) {
|
this.minusOne("day")
|
}
|
break
|
case "day":
|
num = +this.syncDay - 1
|
if (num == 0) {
|
num = this.getMaxDayOfMonth()
|
}
|
this.syncDay = pad0(+num)
|
break
|
default:
|
break
|
}
|
},
|
getMaxDayOfMonth() {
|
return new Date(+this.syncYrs, +this.syncMonth, 0).getDate()
|
},
|
fatherChange(item) {
|
item.children.forEach((x) => {
|
x.selected = item.selected
|
})
|
},
|
childrenChange(item) {
|
let SomeOneSelected = item.children.some((x) => x.selected == true)
|
item.selected = SomeOneSelected
|
},
|
plusOne(typ) {
|
this.isSyncBrowser = false
|
this.syncBrowser(false)
|
let num
|
switch (typ) {
|
case "hrs":
|
num = +this.syncHour + 1
|
if (num == 24) {
|
num = 0
|
}
|
this.syncHour = pad0(+num)
|
break
|
case "min":
|
num = +this.syncMin + 1
|
if (num == 60) {
|
num = 0
|
}
|
this.syncMin = pad0(+num)
|
break
|
case "sec":
|
num = +this.syncSec + 1
|
if (num == 60) {
|
num = 0
|
}
|
this.syncSec = pad0(+num)
|
break
|
case "yrs":
|
num = +this.syncYrs + 1
|
this.syncYrs = pad0(+num)
|
break
|
case "mth":
|
num = +this.syncMonth + 1
|
if (num == 13) {
|
num = 1
|
}
|
this.syncMonth = pad0(+num)
|
if (+this.syncDay > this.getMaxDayOfMonth()) {
|
this.minusOne("day")
|
}
|
break
|
case "day":
|
num = +this.syncDay + 1
|
if (num > this.getMaxDayOfMonth()) {
|
num = 1
|
}
|
this.syncDay = pad0(+num)
|
break
|
default:
|
break
|
}
|
},
|
editHeadPic() {
|
this.showJPGArr = true
|
this.jpgArr.forEach((item, index) => {
|
if (this.activeAccountItem.headpic == item.path) {
|
this.selectedPic = index
|
}
|
})
|
},
|
submitClock() {
|
if (this.isNtp) {
|
if (this.ntpServer === "" || this.ntpServer === "...") {
|
this.$notify.error("NTP 服务器地址不能为空")
|
return false
|
} else if (this.timeInterval === "") {
|
this.timeInterval = 1
|
}
|
} else if (this.isSyncBrowser) {
|
if (this.settime === "") {
|
this.$notify.error("设置时间不能为空")
|
return false
|
}
|
} else {
|
this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`
|
}
|
|
const now = new Date().getTime()
|
if (new Date(this.settime).getTime() > now) {
|
this.$message.warning("设置的时间不能晚于当前时间: " + this.formatTime(now, "Y-M-D h:m:s"))
|
return
|
}
|
saveClockInfo({
|
timeZone: this.timezone,
|
ntp: this.isNtp,
|
ntpServer: this.ntpServer,
|
interval: this.timeInterval,
|
newTime: this.settime
|
}).then(
|
(rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify.success("设置成功")
|
}
|
this.initClockConf()
|
},
|
(err) => {
|
this.$notify.error("设置失败 " + err.msg)
|
}
|
)
|
},
|
saveAuth() {
|
updataUser({
|
id: this.activeAccountItem.id,
|
menuIds: this.$refs.treeMenus.getCheckedKeys()
|
}).then((res) => {
|
if (res.success) {
|
this.$message.success(res.msg)
|
this.cancelSet()
|
}
|
})
|
},
|
formatTime(timestamp, format) {
|
const formatNumber = (n) => {
|
n = n + ""
|
return n[1] ? n : "0" + n
|
}
|
var formateArr = ["Y", "M", "D", "h", "m", "s"]
|
var returnArr = []
|
var date = new Date(timestamp)
|
returnArr.push(date.getFullYear())
|
returnArr.push(formatNumber(date.getMonth() + 1))
|
returnArr.push(formatNumber(date.getDate()))
|
returnArr.push(formatNumber(date.getHours()))
|
returnArr.push(formatNumber(date.getMinutes()))
|
returnArr.push(formatNumber(date.getSeconds()))
|
for (var i in returnArr) {
|
format = format.replace(formateArr[i], returnArr[i])
|
}
|
return format
|
},
|
initClockConf(ntpTest = false) {
|
getClockInfo().then((rsp) => {
|
if (rsp && rsp.success) {
|
this.timezone = rsp.data.time_zone
|
if (!ntpTest) {
|
this.isNtp = rsp.data.ntp
|
}
|
if (rsp.data.ntp) {
|
this.ntpServer = rsp.data.ntp_server
|
this.timeInterval = rsp.data.interval
|
}
|
this.timestamp = rsp.data.local_time
|
this.weekday = "星期" + "日一二三四五六".charAt(new Date(+this.timestamp * 1000).getDay())
|
if (this.clockTimer === null) {
|
this.runClock()
|
if (!this.isNtp) this.parseTime()
|
}
|
}
|
})
|
},
|
openMenu(i) {
|
this.activeIndex = i
|
if (this.activeIndex == "日期时间") {
|
this.initClockConf()
|
}
|
console.log(this.activeIndex)
|
},
|
openWelcome(i) {
|
console.log("welcome", i)
|
this.showWelcome = false
|
this.openMenu(i)
|
},
|
showInput(typ) {
|
this[`show${typ}Input`] = true
|
this.$nextTick(() => {
|
this.$refs[`ipt${typ}`].focus()
|
})
|
},
|
hideInput(typ) {
|
if (this[`input${typ}`]) {
|
this[`sync${typ}`] = pad0(+this[`input${typ}`])
|
}
|
this[`show${typ}Input`] = false
|
this[`input${typ}`] = ""
|
if (typ == "Month") {
|
const max = this.getMaxDayOfMonth()
|
if (+this.syncDay > max) {
|
this.syncDay = max + ""
|
}
|
}
|
},
|
cancelSetTime() {
|
this.parseTime()
|
this.ntpServer = "..."
|
this.timeInterval = 10
|
},
|
syncBrowser(enable) {
|
this.isSyncBrowser = enable
|
if (!enable) {
|
clearInterval(this.browserTimer)
|
} else {
|
this.browserTimer = setInterval(() => {
|
this.settime = this.formatTime(new Date().getTime(), "Y-M-D h:m:s")
|
let [arr1, arr2] = this.settime.split(" ")
|
;[this.syncYrs, this.syncMonth, this.syncDay] = arr1.split("-")
|
;[this.syncHour, this.syncMin, this.syncSec] = arr2.split(":")
|
}, 1000)
|
}
|
},
|
openAdd() {
|
this.inAccountDetail = false
|
this.isAddAccount = true
|
this.selectedPic = 0
|
this.addForm.headpic = this.jpgArr[0].path
|
getRoles().then((res) => {
|
if (res.success) {
|
this.roleList = res.data
|
}
|
})
|
},
|
cancelAdd() {
|
this.inAccountDetail = false
|
this.isAddAccount = false
|
this.$refs["addForm"].resetFields()
|
this.selectedPic = null
|
},
|
cancelPassword() {
|
this.isChangePw = false
|
this.inAccountDetail = false
|
this.$refs["passwordForm"].resetFields()
|
},
|
pickQuick(addr) {
|
if (addr.length == 1) {
|
this.openWelcome(addr[0])
|
} else {
|
this.openWelcome(addr[0])
|
this.$nextTick(() => {
|
if (addr[0] == "日期时间") {
|
return
|
}
|
this.$refs[`${addr[0]}`].openRight(addr[1])
|
})
|
}
|
},
|
cacelChoosePic() {
|
this.addForm.headpic = ""
|
this.showChangePic = false
|
this.selectedPic = null
|
this.showJPGArr = false
|
},
|
SaveNewPassword(formName) {
|
let data
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
if (this.passwordForm.curPassword == "") {
|
data = {
|
userId: this.activeAccountItem.id,
|
oldPwd: "",
|
newPwd: this.passwordForm.newPassword
|
}
|
} else {
|
data = {
|
oldPwd: this.passwordForm.curPassword,
|
newPwd: this.passwordForm.newPassword
|
}
|
}
|
updatePassword(data).then(
|
(res) => {
|
if (res.success) {
|
this.$message.success("密码" + res.msg)
|
setTimeout(() => {
|
this.cancelPassword()
|
}, 1000)
|
}
|
},
|
(err) => {
|
this.$message.error("保存失败，" + err.msg)
|
}
|
)
|
}
|
})
|
},
|
saveAddAccount(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let data = {
|
username: this.addForm.userName,
|
password: this.addForm.password,
|
nickname: this.addForm.nickName,
|
headpic: this.addForm.headpic,
|
roleId: this.addForm.roleId
|
}
|
addUser(data).then(
|
(res) => {
|
this.$message.success(res.data)
|
this.fetchUserList(true)
|
},
|
(err) => {
|
this.$message.error("保存失败，" + err.msg)
|
}
|
)
|
} else {
|
return false
|
}
|
})
|
},
|
pickHeadDefPic(item, i) {
|
if (this.selectedPic == i) {
|
this.selectedPic = null
|
this.addForm.headpic = ""
|
return
|
}
|
this.addForm.headpic = item.path
|
this.selectedPic = i
|
},
|
testNTP() {
|
this.ntpTestLoading = true
|
testNTPserver({ server: this.ntpServer })
|
.then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "时间同步成功"
|
})
|
} else {
|
this.$notify({
|
type: "error",
|
message: "时间同步失败"
|
})
|
}
|
this.ntpTestLoading = false
|
this.initClockConf(true)
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: "时间同步失败,请检查服务器ip"
|
})
|
this.ntpTestLoading = false
|
})
|
},
|
cancelSet() {
|
this.isSetPermission = false
|
this.inAccountDetail = false
|
this.sysMenus = []
|
},
|
showChangePassword() {
|
this.isChangePw = true
|
this.inAccountDetail = true
|
},
|
runClock() {
|
const str = this.formatTime(++this.timestamp * 1000, "Y-M-D h:m:s")
|
;[this.equipmentDate, this.equipmentTime] = str.split(" ")
|
|
this.clockTimer = setTimeout(() => {
|
this.runClock()
|
}, 1000)
|
},
|
deleteAccount() {
|
const h = this.$createElement
|
this.$msgbox({
|
title: "",
|
message: h(
|
"div",
|
{
|
style: "display: flex; flex-direction: column; justify-content: center; align-items: center;"
|
},
|
[
|
h("span", { class: "icon iconfont warn-icon" }, "\ue71c"),
|
h("span", { class: "warn-title" }, "删除账户"),
|
h("span", { class: "warn-dec" }, "您是否确认删除账户？")
|
]
|
),
|
showCancelButton: true,
|
showClose: true,
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
customClass: "del-account-message-box"
|
})
|
.then(() => {
|
let obj = {
|
ids: [this.activeAccountItem.id]
|
}
|
deleteUser(obj).then((res) => {
|
if (res.success) {
|
this.fetchUserList()
|
this.$message.success("删除成功!")
|
} else {
|
this.$message.error("删除失败")
|
}
|
})
|
})
|
.catch(() => {})
|
},
|
fetchMenu() {
|
getUserMenus({
|
userId: this.activeAccountItem.id
|
}).then((res) => {
|
if (res && res.success) {
|
this.sysMenus = res.data
|
let arr = []
|
this.drawChecked(this.sysMenus, arr)
|
this.checkedArr = arr
|
}
|
})
|
},
|
drawChecked(arr, res) {
|
for (const item of arr) {
|
if (item.selected && !item.children) res.push(item.id)
|
if (item.children) this.drawChecked(item.children, res)
|
}
|
},
|
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(":")
|
}
|
},
|
computed: {
|
activeUserRole() {
|
if (this.activeAccountItem.sysRoles && this.activeAccountItem.sysRoles.length) {
|
return this.activeAccountItem.sysRoles[0].name
|
}
|
return "普通用户"
|
},
|
curUserRole() {
|
const info = JSON.parse(sessionStorage.getItem("userInfo"))
|
return info.roleName
|
},
|
curUserID() {
|
const info = JSON.parse(sessionStorage.getItem("userInfo"))
|
return info.id
|
},
|
isShowDeleteAccount() {
|
if (this.curUserRole == "超级管理员") {
|
return this.activeUserRole != "超级管理员"
|
} else if (this.curUserRole == "管理员") {
|
return this.activeUserRole == "普通用户"
|
}
|
return false
|
},
|
isShowPermitBtn() {
|
// basic 用户不允许修改权限
|
if (this.activeUserRole == "超级管理员") {
|
return false
|
}
|
if (this.curUserRole == "管理员") {
|
return this.activeUserRole == "普通用户"
|
} else {
|
return this.curUserRole != "普通用户"
|
}
|
},
|
searchArrForShow() {
|
if (this.searchText == "") {
|
return this.searchArr
|
} 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"
|
},
|
"*"
|
)
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.welcome-page {
|
width: 100%;
|
height: 100%;
|
display: -ms-flexbox;
|
padding: 145px 32px 50px 32px;
|
box-sizing: border-box;
|
background-color: rgba(255, 255, 255, 0.9);
|
backdrop-filter: blur(4px);
|
.border-change {
|
border-radius: 15px !important;
|
}
|
.search-box {
|
width: 332px;
|
z-index: 999;
|
position: fixed;
|
left: calc(50% - 166px);
|
top: 50px;
|
|
border: 2px solid var(--colorCard);
|
box-sizing: border-box;
|
backdrop-filter: blur(4px);
|
border-radius: 40px;
|
|
.search-res {
|
background-color: rgba(255, 255, 255, 0.5);
|
}
|
.search-input {
|
font-size: 14px;
|
.el-input--mini .el-input__inner {
|
height: 36px;
|
line-height: 36px;
|
}
|
.el-input--suffix .el-input__inner {
|
padding-right: 40px;
|
}
|
.el-input__inner {
|
background-color: #fff;
|
background-image: none;
|
border-radius: 40px;
|
border: none;
|
box-sizing: border-box;
|
color: #606266;
|
display: inline-block;
|
font-size: 14px;
|
height: 36px;
|
line-height: 36px;
|
outline: 0;
|
padding: 0 20px;
|
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
font-weight: bold;
|
|
&::-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 19+ */
|
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;
|
align-items: center;
|
padding-right: 10px;
|
.el-input__suffix-inner {
|
border-color: none;
|
.el-icon-circle-close:before {
|
content: "\e79d" !important;
|
font-size: 17px;
|
}
|
.el-icon-search {
|
color: #2f2d3d;
|
font-weight: bold;
|
font-size: 17px;
|
}
|
}
|
}
|
}
|
.search-res {
|
max-height: 240px;
|
overflow: auto;
|
.res-bar {
|
height: 40px;
|
line-height: 40px;
|
text-align: left;
|
box-sizing: border-box;
|
padding: 0 20px;
|
color: #4f4f4f;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
.no-res-bar {
|
height: 40px;
|
line-height: 40px;
|
text-align: left;
|
box-sizing: border-box;
|
padding: 0 20px;
|
color: #4f4f4f;
|
font-size: 14px;
|
}
|
.res-bar:hover {
|
background: #f5f5f6 10%;
|
font-weight: bold;
|
color: var(--colorCard);
|
}
|
}
|
}
|
.nav-items {
|
max-width: 960px;
|
margin: 0 auto;
|
.nav-child {
|
box-sizing: border-box;
|
background-color: rgba(251, 251, 255, 0.1);
|
backdrop-filter: blur(4px);
|
float: left;
|
width: 208px;
|
height: 190px;
|
margin: 0 15px;
|
margin-bottom: 30px;
|
border-radius: 15px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
border: 2px solid #f2f2f7;
|
|
&-active {
|
border: 2px solid #4e94ff;
|
}
|
|
&:hover {
|
background: #f2f2f7;
|
}
|
|
.child-info {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
.welcome-icon {
|
font-size: 72px;
|
}
|
img {
|
width: 64px;
|
margin: 0 auto;
|
margin-top: 61px;
|
height: 50px;
|
}
|
.welcome-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin-top: 24px;
|
color: #4f4f4f;
|
}
|
}
|
}
|
}
|
}
|
.container {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
flex-basis: auto;
|
box-sizing: border-box;
|
background-color: #fff;
|
color: #4f4f4f;
|
border-top: 2px solid #e1e0e6;
|
overflow-x: hidden;
|
.container-left {
|
height: 100%;
|
width: 244px;
|
overflow: auto;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
padding: 10px;
|
box-sizing: border-box;
|
.left-card {
|
height: 56px;
|
cursor: pointer;
|
border-radius: 8px;
|
margin-bottom: 4px;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
|
.card-text {
|
margin-left: 20px;
|
color: #4f4f4f;
|
font-weight: bold;
|
font-size: 16px;
|
line-height: 22px;
|
height: 22px;
|
}
|
img {
|
height: 30px;
|
width: 30px;
|
}
|
.w {
|
display: none;
|
}
|
.b {
|
display: block;
|
}
|
}
|
.left-card-active {
|
background-color: var(--colorCard) !important;
|
.card-text {
|
color: #fff !important;
|
}
|
.b {
|
display: none;
|
}
|
.w {
|
display: block;
|
}
|
}
|
.left-card:hover {
|
background-color: #f2f2f7;
|
}
|
}
|
.container-center {
|
height: 100%;
|
width: 300px;
|
overflow: auto;
|
flex-shrink: 0;
|
padding: 10px;
|
padding-top: 6px;
|
padding-right: 5px;
|
border-top: 4px solid #f2f2f7;
|
border-left: 4px solid #f2f2f7;
|
box-sizing: border-box;
|
background-color: #fbfaff;
|
.account-left {
|
height: 100%;
|
.account-list {
|
height: calc(85%);
|
overflow: auto;
|
padding-right: 5px;
|
&::-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 {
|
visibility: visible;
|
}
|
&.account-list-scroll::-webkit-scrollbar {
|
background-color: #f5f5f5;
|
}
|
}
|
.add-account {
|
color: var(--colorCard);
|
margin-top: 30px;
|
.el-icon-circle-plus {
|
cursor: pointer;
|
font-size: 38px;
|
}
|
}
|
.account-card {
|
height: 60px;
|
background-color: #f2f2f7;
|
margin-bottom: 4px;
|
display: flex;
|
align-items: center;
|
padding: 0 5px 0 20px;
|
|
box-sizing: border-box;
|
border-radius: 8px;
|
cursor: pointer;
|
justify-content: space-between;
|
.touxiang {
|
display: flex;
|
align-items: center;
|
img {
|
border: none;
|
height: 44px;
|
width: 44px;
|
border-radius: 50%;
|
}
|
}
|
.login-tag {
|
width: 72px;
|
height: 19.21px;
|
background: #ffffff;
|
border-radius: 20px;
|
color: #4f4f4f;
|
transform: scale(0.833333);
|
line-height: 22.21px;
|
span {
|
font-size: 13px;
|
}
|
}
|
.user-name {
|
margin-left: 20px;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
}
|
|
.account-card-active {
|
background-color: var(--colorCard);
|
color: #fff;
|
}
|
}
|
}
|
.container-right {
|
flex: 1;
|
flex-basis: auto;
|
overflow: auto;
|
box-sizing: border-box;
|
position: relative;
|
padding: 30px 40px;
|
background: #f2f2f7;
|
border-left: 4px solid #f2f2f7;
|
border-top: 4px solid #f2f2f7;
|
.account-right {
|
height: 100%;
|
.account-content {
|
margin-top: 40px;
|
.content-top {
|
margin: 0 auto;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.touxiang-big {
|
width: 100px;
|
height: 100px;
|
position: relative;
|
border-radius: 50px;
|
margin-bottom: 20px;
|
img {
|
border: none;
|
width: 100px;
|
height: 100px;
|
position: relative;
|
border-radius: 50px;
|
}
|
.touxiang-mask {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100px;
|
height: 100px;
|
background-color: rgba(0, 0, 0, 0.25);
|
color: white;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
align-items: center;
|
.enable {
|
cursor: pointer;
|
margin: 2px 0;
|
padding: 1px 2px;
|
border-radius: 3px;
|
border: 1px solid transparent;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
.enable:hover {
|
transition: all 0.2s;
|
}
|
.selected {
|
font-size: 20px;
|
}
|
}
|
}
|
.user-desc {
|
height: 100px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
color: #4f4f4f;
|
min-width: 200px;
|
.user-name {
|
margin-bottom: 10px;
|
height: 28px;
|
line-height: 28px;
|
text-align: left;
|
display: flex;
|
align-items: center;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.nick-name {
|
margin: 5px 15px;
|
font-size: 14px;
|
display: flex;
|
font-weight: bold;
|
height: 30px;
|
align-items: center;
|
.nick-text {
|
width: fit-content;
|
text-align: left;
|
}
|
.edit-icon {
|
font-size: 13px;
|
margin-left: 10px;
|
}
|
.confirm-icon {
|
color: var(--colorCard);
|
font-size: 18px;
|
margin-left: 10px;
|
}
|
.clear-icon {
|
margin-left: 10px;
|
font-size: 18px;
|
}
|
.iconfont {
|
cursor: pointer;
|
font-weight: normal;
|
}
|
.el-input--mini {
|
width: 82px;
|
.el-input__inner {
|
padding: 0 8px;
|
height: 20px;
|
line-height: 20px;
|
/* border: 1px solid; */
|
border: 1px solid var(--colorCard);
|
border-radius: 20px;
|
background: #f2f2f7;
|
}
|
}
|
}
|
.user-role {
|
width: 75px;
|
height: 18px;
|
border: 1px solid #333333;
|
box-sizing: border-box;
|
border-radius: 20px;
|
font-weight: bold;
|
font-size: 12px;
|
margin-bottom: 20px;
|
}
|
}
|
}
|
.chang-pic-arr {
|
margin-top: 40px;
|
}
|
.list-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 80px;
|
.alt-pw-btn {
|
background: rgba(78, 148, 255, 0.1);
|
border: 1px solid var(--colorCard);
|
}
|
.del-usr-btn {
|
background: #e0e0e0;
|
color: #fc4958;
|
}
|
.auth-set-btn {
|
background: var(--colorCard);
|
color: #ffffff;
|
}
|
.item-btn {
|
width: 212px;
|
height: 40px;
|
margin-bottom: 15px;
|
line-height: 40px;
|
border-radius: 25px;
|
font-size: 16px;
|
font-weight: bold;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.change-pw {
|
padding: 40px 10px;
|
// max-width: 600px;
|
margin: 0 auto;
|
.title {
|
font-weight: bold;
|
font-size: 16px;
|
line-height: 22px;
|
color: #4f4f4f;
|
margin-bottom: 40px;
|
height: 28px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.icon {
|
font-size: 28px;
|
font-weight: normal;
|
margin-right: 10px;
|
}
|
}
|
.el-form-item__content {
|
line-height: 48px;
|
display: flex;
|
align-items: center;
|
background: #f2f2f7;
|
border-radius: 8px;
|
padding: 0 15px 0 20px;
|
.el-select-dropdown__item {
|
color: #4f4f4f;
|
height: 32px;
|
font-size: 12px;
|
line-height: 32px;
|
text-align: center;
|
}
|
.el-popper {
|
margin-top: 0;
|
background: #fbfaff;
|
box-shadow: 0px 2px 6px rgb(0 0 0 / 18%);
|
border-radius: 2px;
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
background-color: #f2f2f7;
|
color: var(--colorCard);
|
}
|
}
|
}
|
.el-form-item__error {
|
line-height: 0.7;
|
left: 20px;
|
}
|
.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);
|
}
|
.el-input__inner::placeholder {
|
color: #c0c4cc;
|
font-size: 12px;
|
font-weight: normal;
|
}
|
.el-select {
|
width: 100%;
|
}
|
.el-select .el-input .el-select__caret {
|
color: #4f4f4f;
|
font-size: 14px;
|
font-weight: 600;
|
}
|
}
|
.p-title {
|
height: 48px;
|
text-align: left;
|
line-height: 48px;
|
width: 90px;
|
font-weight: 600;
|
}
|
}
|
.el-form-item {
|
margin-bottom: 15px;
|
.el-input__inner {
|
background-color: rgba(240, 240, 240, 1);
|
border: none;
|
border-radius: 12px;
|
height: 45px;
|
padding: 0 20px;
|
font-size: 15px;
|
}
|
.el-input__clear {
|
color: #4f4f4f;
|
font-size: 16px;
|
line-height: 48px;
|
}
|
.el-input__suffix {
|
right: 1px;
|
top: -0.5px;
|
width: 45px;
|
border-radius: 12px;
|
}
|
}
|
.permission {
|
height: 100%;
|
|
.title {
|
height: 22px;
|
line-height: 48px;
|
font-size: 16px;
|
font-weight: 600;
|
color: #4f4f4f;
|
height: 48px;
|
background: #fbfaff;
|
border-bottom: 2px solid #f2f2f7;
|
}
|
.tree-window {
|
padding: 10px 15px;
|
height: calc(100% - 155px);
|
border-bottom: 2px solid #f2f2f7;
|
.el-tree {
|
background: initial;
|
color: #333;
|
height: 100%;
|
overflow: auto;
|
max-width: 600px;
|
margin: 0 auto;
|
.el-tree-node {
|
background: initial;
|
.el-tree-node__content {
|
height: 30px;
|
background: #f2f2f7;
|
margin-bottom: 4px;
|
border-radius: 4px;
|
box-sizing: border-box;
|
border: 2px solid transparent;
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
padding: 6px 18px;
|
font-size: 16px;
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner,
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
background-color: var(--colorCard);
|
border-color: var(--colorCard);
|
}
|
.el-checkbox__inner {
|
border-radius: 1px;
|
border: 1px solid var(--colorCard);
|
}
|
.el-tree-node__label {
|
font-size: 13px;
|
font-weight: 600;
|
}
|
}
|
.el-tree-node__content:hover {
|
border: 2px solid var(--colorCard);
|
}
|
}
|
}
|
}
|
.btns {
|
margin-top: 19px;
|
}
|
}
|
|
.upload-group {
|
width: 340px;
|
|
margin: 0 auto;
|
overflow: hidden;
|
.upload-jpg {
|
position: relative;
|
height: 44px;
|
width: 44px;
|
float: left;
|
margin: 0 10px;
|
margin-bottom: 20px;
|
background-color: rgba(242, 242, 242, 1);
|
border: 2px solid transparent;
|
border-radius: 50%;
|
cursor: pointer;
|
img {
|
height: 44px;
|
width: 44px;
|
border-radius: 50%;
|
}
|
.img-mask {
|
position: absolute;
|
left: 0;
|
top: 0;
|
height: 44px;
|
width: 44px;
|
background-color: rgba(0, 0, 0, 0.3);
|
color: white;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.icon {
|
font-size: 20px;
|
}
|
.selected {
|
font-size: 22px;
|
}
|
}
|
}
|
.upload-jpg-border {
|
border: 2px solid var(--colorCard);
|
}
|
}
|
.add-account-page {
|
margin-top: 20px;
|
padding: 0 10px;
|
.title {
|
height: 22px;
|
margin-bottom: 20px;
|
font-weight: bold;
|
font-size: 16px;
|
line-height: 22px;
|
}
|
.fill-group {
|
// max-width: 450px;
|
margin-top: 10px;
|
|
margin: 0 auto;
|
.el-form-item__content {
|
line-height: 48px;
|
display: flex;
|
align-items: center;
|
background: #f2f2f7;
|
border-radius: 8px;
|
padding: 0 15px 0 20px;
|
.el-select-dropdown__item {
|
color: #4f4f4f;
|
height: 32px;
|
font-size: 12px;
|
line-height: 32px;
|
text-align: center;
|
}
|
.el-popper {
|
margin-top: 0;
|
background: #fbfaff;
|
box-shadow: 0px 2px 6px rgb(0 0 0 / 18%);
|
border-radius: 2px;
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
background-color: #f2f2f7;
|
color: var(--colorCard);
|
}
|
}
|
}
|
.p-title {
|
height: 48px;
|
text-align: left;
|
line-height: 48px;
|
width: 90px;
|
font-weight: 600;
|
}
|
.el-form-item__error {
|
line-height: 0.7;
|
left: 20px;
|
}
|
.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);
|
}
|
.el-input__inner::placeholder {
|
color: #c0c4cc;
|
font-size: 12px;
|
font-weight: normal;
|
}
|
.el-select {
|
width: 100%;
|
}
|
.el-select .el-input .el-select__caret {
|
color: #4f4f4f;
|
font-size: 14px;
|
font-weight: 600;
|
}
|
}
|
}
|
}
|
}
|
.datetime-right {
|
.datetime-left {
|
.device-time {
|
color: #4f4f4f;
|
.title {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 16px;
|
line-height: 28px;
|
font-weight: bold;
|
margin-bottom: 22px;
|
img {
|
margin-right: 10px;
|
height: 28px;
|
width: 28px;
|
}
|
}
|
.time-main {
|
height: 50px;
|
line-height: 50px;
|
font-family: Consolas;
|
font-size: 40px;
|
|
font-weight: bold;
|
letter-spacing: 2px;
|
}
|
.date-bot {
|
height: 20px;
|
letter-spacing: 0.5px;
|
display: flex;
|
justify-content: center;
|
font-weight: bold;
|
font-size: 14px;
|
line-height: 20px;
|
margin-top: 8px;
|
.year {
|
margin-right: 10px;
|
}
|
}
|
}
|
.adjust-zone {
|
margin-top: 40px;
|
background: linear-gradient(
|
96.76deg,
|
rgba(234, 253, 255, 0.1) 0%,
|
rgba(200, 249, 255, 0.35) 29.69%,
|
rgba(244, 238, 255, 0.5) 68.75%,
|
rgba(201, 249, 255, 0.5) 100%
|
);
|
height: 370px;
|
box-sizing: border-box;
|
padding: 29px;
|
.two-radio {
|
width: 180px;
|
height: 28px;
|
background: #ffffff;
|
border-radius: 20px;
|
display: flex;
|
margin: 0 auto;
|
.radio {
|
width: 90px;
|
height: 28px;
|
line-height: 28px;
|
border-radius: 20px;
|
display: flex;
|
justify-content: center;
|
font-weight: bold;
|
font-size: 14px;
|
cursor: pointer;
|
letter-spacing: 0.5px;
|
}
|
.highlight-radio {
|
background: var(--colorCard);
|
color: #ffffff;
|
}
|
}
|
.clock-wrap {
|
display: flex;
|
margin: 30px auto;
|
justify-content: center;
|
align-items: center;
|
.clock {
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
.iconfont {
|
cursor: pointer;
|
color: rgba(134, 134, 134, 1);
|
}
|
.iconfont:hover {
|
background-color: gainsboro;
|
}
|
.time-block {
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
width: 100px;
|
height: 50px;
|
justify-content: space-evenly;
|
border-radius: 10px;
|
}
|
.dnum {
|
width: 40px;
|
height: 40px;
|
line-height: 40px;
|
font-size: 34px;
|
font-family: Consolas;
|
display: flex;
|
align-items: center;
|
.input-box {
|
width: inherit;
|
border: none;
|
border-radius: 5px;
|
height: 35px;
|
font-size: 28px;
|
text-align: center;
|
}
|
|
.input-box:focus {
|
outline: none;
|
}
|
}
|
.control {
|
width: 20px;
|
.fanzhuan {
|
display: inline-block;
|
-moz-transform: scaleY(-1);
|
-webkit-transform: scaleY(-1);
|
-o-transform: scaleY(-1);
|
transform: scaleY(-1);
|
}
|
}
|
.sep {
|
font-family: Consolas;
|
width: 40px;
|
font-size: 34px;
|
height: 40px;
|
line-height: 40px;
|
}
|
}
|
}
|
.date-adjust {
|
width: 580px;
|
margin: 0 auto;
|
height: 40px;
|
background: #ffffff;
|
border-radius: 20px;
|
display: flex;
|
justify-content: space-evenly;
|
justify-content: space-around;
|
padding: 0px 15px;
|
box-sizing: border-box;
|
.adjust-bar {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
line-height: 40px;
|
width: 90px;
|
.middle {
|
font-weight: 600;
|
font-size: 14px;
|
width: 70px;
|
}
|
.input-box {
|
width: 38px;
|
border: none;
|
border-radius: 2px;
|
height: 25px;
|
text-align: center;
|
background-color: #f2f2f7;
|
}
|
|
.input-box:focus {
|
outline: none;
|
}
|
.minus {
|
font-size: 14px;
|
cursor: pointer;
|
line-height: 40px;
|
color: #000000;
|
width: 25px;
|
cursor: pointer;
|
}
|
.plus {
|
font-size: 14px;
|
cursor: pointer;
|
line-height: 40px;
|
color: #000000;
|
width: 25px;
|
cursor: pointer;
|
}
|
}
|
}
|
.ntp-wrap {
|
margin-top: 40px;
|
margin-bottom: 68px;
|
.el-form-item {
|
margin: 20px auto;
|
height: 48px;
|
background: #ffffff;
|
box-sizing: border-box;
|
border-radius: 8px;
|
width: 580px;
|
padding: 0 30px;
|
display: flex;
|
align-items: center;
|
}
|
.right {
|
display: flex;
|
align-items: center;
|
.desc-min {
|
font-size: 12px;
|
font-weight: bold;
|
margin-left: 6px;
|
}
|
.el-input-number--small {
|
width: 195px;
|
.el-input__inner {
|
height: 32px;
|
line-height: 32px;
|
border: 2px solid transparent;
|
border-radius: 20px;
|
background: #f2f2f7;
|
}
|
.el-input__inner:focus {
|
border: 2px solid var(--colorCard);
|
}
|
}
|
.el-button--text {
|
margin-left: 42px;
|
color: #409eff;
|
background: rgba(78, 148, 255, 0.1);
|
border: 1px solid var(--colorCard);
|
box-sizing: border-box;
|
border-radius: 20px;
|
width: 68px;
|
color: #333;
|
font-weight: bold;
|
padding: 6px 20px;
|
}
|
}
|
}
|
.manual-time {
|
width: 500px;
|
margin: 0 auto;
|
}
|
}
|
}
|
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
|
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
|
display: none;
|
}
|
.el-form-item {
|
margin-bottom: 10px;
|
height: 50px;
|
background: #f8f8f8;
|
padding: 4px 20px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
border-radius: 10px;
|
.el-form-item__label {
|
text-align: left;
|
width: 184px;
|
color: #333;
|
font-weight: bold;
|
}
|
}
|
.el-form-item__content {
|
line-height: 16px;
|
position: relative;
|
font-size: 14px;
|
}
|
.ip-input-container {
|
max-width: none !important;
|
width: 336px;
|
height: 34px;
|
line-height: normal;
|
box-sizing: border-box;
|
background-color: #f2f2f7;
|
text-align: left;
|
max-width: 360px;
|
border-radius: 20px;
|
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;
|
}
|
}
|
.container-right-for-account {
|
background: #fbfaff;
|
padding: 0;
|
}
|
}
|
</style>
|
