<template>
|
<div class="container" v-if="!showWelcome">
|
<div class="container-left">
|
<div
|
class="left-card"
|
:class="activeIndex == i ? 'left-card-active' : ''"
|
v-for="(item, i) in menuArr"
|
:key="i"
|
@click="openMenu(i)"
|
>
|
<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 == 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-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 == 0 || activeIndex == 1"
|
:class="activeIndex == 0 ? '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="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"
|
: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 == 1">
|
<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 == 2"
|
ref="view_2"
|
style="width: 100%"
|
></clusterManagement>
|
<netSettings
|
ref="view_3"
|
v-if="activeIndex == 3"
|
style="width: 100%"
|
></netSettings>
|
<keyboardLanguage
|
ref="view_4"
|
v-if="activeIndex == 4"
|
style="width: 100%"
|
></keyboardLanguage>
|
<generalSettings
|
ref="view_5"
|
v-if="activeIndex == 5"
|
style="width: 100%"
|
></generalSettings>
|
<deviceInfo
|
v-if="activeIndex == 6"
|
style="width: 100%"
|
ref="view_6"
|
></deviceInfo>
|
</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
|
@input="filterRecomand"
|
: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(i)"
|
@mousedown="mouseDownIndex = i"
|
:class="mouseDownIndex === i? '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 { pad0, getUrlKey } from "@/api/utils";
|
|
export default {
|
name: "settings",
|
components: {
|
switchBar,
|
ipInput,
|
clusterManagement,
|
netSettings,
|
keyboardLanguage,
|
generalSettings,
|
deviceInfo,
|
},
|
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: [2] },
|
{ name: "网络设置", addr: [3] },
|
{ name: "无线网络", addr: [3, 1] },
|
{ name: "有线网络", addr: [3, 2] },
|
{ name: "设备信息", addr: [6] },
|
{ name: "日期时间", addr: [1] },
|
{ name: "NTP校时", addr: [1, 0] },
|
{ name: "手动校时", addr: [1, 1] },
|
{ name: "键盘和语言", addr: [4] },
|
{ name: "系统语言", addr: [4, 0] },
|
{ name: "键盘管理", addr: [4, 1] },
|
],
|
inputNickName: "",
|
showHourInput: false,
|
showMinInput: false,
|
showSecInput: false,
|
showYrsInput: false,
|
showMonthInput: false,
|
selectedPic: null,
|
showDayInput: false,
|
timestamp: 0,
|
ajustType: "手动校时",
|
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",
|
},
|
{
|
name: "日期时间",
|
icon: "\ue6ff",
|
imgUrl: "/images/settings/时间日期.png",
|
blackIcon: "/images/settings/黑色一级icon/时间信息.png",
|
whiteIcon: "/images/settings/白色一级icon/时间日期.png",
|
},
|
{
|
name: "集群管理",
|
icon: "\ue6df",
|
imgUrl: "/images/settings/集群管理.png",
|
blackIcon: "/images/settings/黑色一级icon/集群管理.png",
|
whiteIcon: "/images/settings/白色一级icon/集群管理.png",
|
},
|
{
|
name: "网络设置",
|
icon: "\ue6dd",
|
imgUrl: "/images/settings/网络设置.png",
|
blackIcon: "/images/settings/黑色一级icon/网络设置.png",
|
whiteIcon: "/images/settings/白色一级icon/网络设置.png",
|
},
|
{
|
name: "键盘和语言",
|
icon: "\ue6dc",
|
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",
|
},
|
{
|
name: "设备信息",
|
icon: "\ue756",
|
imgUrl: "/images/settings/设备信息.png",
|
blackIcon: "/images/settings/黑色一级icon/设备信息.png",
|
whiteIcon: "/images/settings/白色一级icon/设备信息.png",
|
},
|
],
|
accountArr: [],
|
jpgArr: [],
|
isNtp: false,
|
activeIndex: 0,
|
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);
|
// if (this.$refs.curPage) {
|
// this.$refs.curPage.removeEventListener("click");
|
// }
|
},
|
mounted() {
|
window.addEventListener("message",(e)=>{
|
if(e.data.msg === '返回系统设置') {
|
this.showWelcome = true
|
}
|
})
|
const menu = getUrlKey("menu");
|
if (menu) {
|
this.showWelcome = false;
|
this.activeIndex = this.menuArr.findIndex((x) => x.name == menu);
|
this.$nextTick(() => {
|
this.$refs.view_3.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);
|
}
|
);
|
},
|
// 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(),
|
}).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 == 1) {
|
this.initClockConf();
|
}
|
},
|
openWelcome(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] == 1) {
|
return;
|
}
|
this.$refs[`view_${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(
|
":"
|
);
|
},
|
// 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;
|
},
|
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() {
|
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;
|
});
|
}
|
},
|
},
|
};
|
</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,.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>
|
