web/apsDashboard-1.git

			@@ -3,22 +3,25 @@
			<div class="container-left">
			<div
			class="left-card"
			:class="activeIndex == index ? 'left-card-active' : ''"
			v-for="(item, index) in menuArr"
			:key="index"
			@click="openMenu(item.name, index)"
			:class="activeIndex == i ? 'left-card-active' : ''"
			v-for="(item, i) in menuArr"
			:key="i"
			@click="openMenu(i)"
			>
			<span class="icon iconfont">{{ item.icon }}</span>
			<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 \|\| activeIndex == 1"
			>
			<div class="container-center" v-if="activeIndex == 0">
			<div class="account-left" v-if="activeIndex == 0">
			<div class="account-list">
			<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' : ''"
			@@ -28,137 +31,56 @@
			@click="openAccount(item, index)"
			>
			<div class="touxiang">
			<img
			v-if="item.headpic"
			:src="`data:image/png;base64,${item.headpic}`"
			alt=""
			/>
			<img v-if="item.headpic" :src="`data:image/png;base64,${item.headpic}`" alt="" />
			<span class="user-name">{{ item.username }}</span>
			</div>
			<el-tag size="mini" v-if="item.id == curUserID">我的</el-tag>
			<div class="login-tag" v-if="item.id == curUserID">
			<span>当前登录</span>
			</div>
			</div>
			</div>
			<div class="add-account" v-if="curUserRole != '普通用户'">
			<!-- <span class="icon iconfont" @click="openAdd"></span> -->
			<i
			class="el-icon-circle-plus"
			style="font-size: 38px"
			@click="openAdd"
			></i>
			</div>
			</div>
			<div class="datetime-left" v-if="activeIndex == 1">
			<div class="time-card">
			<div class="head">
			<span class="icon iconfont"></span>
			<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="line">
			<div class="name">NTP校时</div>
			<el-switch
			v-model="isNtp"
			@change="changeSwitch('isNtp')"
			active-color="rgba(61, 104, 225, 1)"
			>
			</el-switch>
			</div>

			<div class="line">
			<div class="name">手动校对</div>
			<el-switch
			v-model="isManual"
			@change="changeSwitch('isManual')"
			active-color="rgba(61, 104, 225, 1)"
			>
			</el-switch>
			<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="account-content" v-if="inAccountDetail == false && isAddAccount == false">
			<div class="content-top">
			<div
			class="touxiang-big"
			@mouseenter="showChangePic = true"
			@mouseleave="onLeave"
			>
			<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="showJPGArr = true"
			>修改头像</span
			>
			<span
			class="enable"
			v-if="addForm.headpic"
			@click="confirmChangePic"
			>确认选择</span
			>
			<span class="enable" v-if="showJPGArr" @click="cacelChoosePic">
			取消</span
			>
			<span class="enable" v-if="!showJPGArr" @click="editHeadPic">编辑头像</span>
			</div>
			</div>
			<div class="user-desc">
			<div class="username">
			<span
			class="icon iconfont"
			style="font-size: 18px; margin-right: 3px"
			></span
			>
			<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"
			@click="editNickName"
			></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"
			@click="showInputNickName = false"
			></span
			<span v-show="showInputNickName" class="icon iconfont confirm-icon" @click="hideInputNick"
			></span
			>
			<span
			v-show="showInputNickName"
			class="icon iconfont"
			style="font-size: 21px; font-weight: 600; color: green"
			@click="hideInputNick"
			></span
			>
			</div>
			<div class="user-role">
			<el-tag type="info" size="mini">{{ activeUserRole }}</el-tag>
			</div>
			</div>
			</div>
			@@ -171,72 +93,48 @@
			:key="index"
			@click="pickHeadDefPic(item, index)"
			>
			<img
			v-if="item"
			:src="`data:image/png;base64,${item.path}`"
			alt=""
			srcset=""
			/>
			<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" @click="showChangePassword">修改密码</div>
			<div
			class="item-btn"
			v-if="isShowDeleteAccount"
			@click="deleteAccount"
			>
			<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"
			@click="openPermission"
			>
			<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">修改密码</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>
			<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-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>
			<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>
			<div class="p-title">确认密码</div>
			<el-input placeholder="必填" v-model="passwordForm.confirmPassword" show-password></el-input>
			</el-form-item>
			</el-form>
			<div class="btns">
			@@ -247,33 +145,17 @@

			<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 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>
			@@ -291,64 +173,35 @@
			:key="index"
			@click="pickHeadDefPic(item, index)"
			>
			<img
			v-if="item"
			:src="`data:image/png;base64,${item.path}`"
			alt=""
			srcset=""
			/>
			<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 :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>
			<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="请选择角色">
			<el-option
			v-for="(item, i) in roleList"
			:key="i"
			:label="item.name"
			:value="item.id"
			></el-option>
			<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>
			<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>
			<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>
			<div class="p-title">确认密码</div>
			<el-input placeholder="必填" v-model="addForm.confirmPassword" show-password></el-input>
			</el-form-item>
			</el-form>
			</div>
			@@ -360,220 +213,251 @@
			</div>

			<div class="datetime-right" v-if="activeIndex == 1">
			<div class="ntp-time" v-if="isNtp">
			<el-form label-width="160px">
			<el-form-item label="服务器地址">
			<!-- :disabled="syncType === '2'" -->
			<ip-input
			:ip="ntpServer"
			@on-blur="ntpServer = arguments[0]"
			></ip-input>
			</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>
			<el-button
			type="text"
			@click="testNTP"
			:loading="ntpTestLoading"
			>测试</el-button
			>
			</div>
			</el-form-item>
			</el-form>
			</div>

			<div class="manual-time" v-if="isManual">
			<switchBar
			:barName="`同步本计算机时间`"
			@switchChange="syncBrowser"
			:value="isSyncBrowser"
			></switchBar>

			<div class="clock-wrap">
			<div class="clock">
			<div class="hour">
			<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="mins">
			<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="mins">
			<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 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-bar">
			<div class="minus" @click="minusOne('yrs')">-</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')"
			/>
			年
			</div>
			<div class="plus" @click="plusOne('yrs')">+</div>
			</div>
			<div class="adjust-bar">
			<div class="minus" @click="minusOne('mth')">-</div>
			<div class="middle" @click="showInput('Month')">
			<span v-show="!showMonthInput">{{ syncMonth }}</span>
			<input
			class="input-box"
			v-show="showMonthInput"
			ref="iptMonth"
			oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>12)value='12'"
			type="text"
			v-model="inputMonth"
			@blur="hideInput('Month')"
			@keydown.enter="hideInput('Month')"
			/>
			月
			<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="plus" @click="plusOne('mth')">+</div>
			</div>
			<div class="adjust-bar">
			<div class="minus" @click="minusOne('day')">-</div>
			<div class="middle" @click="showInput('Day')">
			<span v-show="!showDayInput">{{ syncDay }}</span>
			<input
			class="input-box"
			v-show="showDayInput"
			ref="iptDay"
			oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>31)value='31'"
			type="text"
			v-model="inputDay"
			@blur="hideInput('Day')"
			@keydown.enter="hideInput('Day')"
			/>
			日
			</div>
			<div class="plus" @click="plusOne('day')">+</div>
			</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="btns">
			<div class="cancel" @click="cancelPassword">取消</div>
			<div class="ok" @click="submitClock">保存</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"
			style="width: 100%"
			></clusterManagement>
			<netSettings
			v-if="activeIndex == 3"
			style="width: 100%"
			></netSettings>
			<keyboardLanguage
			v-if="activeIndex == 4"
			style="width: 100%"
			></keyboardLanguage>
			<generalSettings
			v-if="activeIndex == 5"
			style="width: 100%"
			></generalSettings>
			<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>
			<Authorization v-if="activeIndex == 7" style="width: 100%" ref="view_7"> </Authorization>
			</div>
			<div class="welcome-page" v-else>
			<div
			class="child"
			@click="openWelcome(item, i)"
			v-for="(item, i) in menuArr"
			:key="i"
			>
			<div class="child-info">
			<span class="icon iconfont welcome-icon">{{ item.icon }}</span>
			<span class="welcome-title">{{ item.name }}</span>
			<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(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 { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system"
			import {
			uploadHeadPic,
			addUser,
			getUsers,
			updateUser,
			@@ -582,15 +466,17 @@
			deleteUser,
			getUserMenus,
			defHeadPics,
			getRoles,
			} from "@/api/user";
			import switchBar from "../components/switchBar";
			import ipInput from "@/components/subComponents/IPInput";
			import clusterManagement from "../views/clusterManagement";
			import netSettings from "../views/NetSettings";
			import keyboardLanguage from "../views/keyboardLanguage";
			import generalSettings from "../views/generalSettings";
			import { pad0 } from "@/api/utils";
			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 { pad0, getUrlKey } from "@/api/utils"

			export default {
			name: "settings",
			@@ -601,44 +487,43 @@
			netSettings,
			keyboardLanguage,
			generalSettings,
			deviceInfo,
			Authorization
			},
			data() {
			var v2 = (rule, value, callback) => {
			console.log("rule", rule);
			if (value === "") {
			callback(new Error("请再次输入密码"));
			callback(new Error("请再次输入密码"))
			} else if (value !== this.addForm.password) {
			callback(new Error("两次输入密码不一致!"));
			callback(new Error("两次输入密码不一致!"))
			} else {
			callback();
			callback()
			}
			};
			}
			var v4 = (rule, value, callback) => {
			console.log("rule", rule);
			if (value === "") {
			callback(new Error("请再次输入密码"));
			callback(new Error("请再次输入密码"))
			} else if (value !== this.passwordForm.newPassword) {
			callback(new Error("两次输入密码不一致!"));
			callback(new Error("两次输入密码不一致!"))
			} else {
			callback();
			callback()
			}
			};
			}
			const v1 = (rule, value, callback) => {
			if (value.trim() === "") {
			callback(new Error("请输入用户名"));
			this.addForm.userName = "";
			callback(new Error("请输入用户名"))
			this.addForm.userName = ""
			} else if (isNaN(Number(value[0])) == false) {
			callback(new Error("不能以数字开头"));
			callback(new Error("不能以数字开头"))
			} else if (/[\u4E00-\u9FA5]/g.test(value)) {
			callback(new Error("不能输入汉字"));
			callback(new Error("不能输入汉字"))
			} else if (value.length < 2 \|\| value.length > 10) {
			callback(new Error("长度为 2 - 10 个字符"));
			callback(new Error("长度为 2 - 10 个字符"))
			} else {
			callback();
			callback()
			}
			};
			}
			return {
			showAccount: true,
			showChangePic: false,
			syncYrs: "",
			activeAccountItem: {},
			@@ -646,16 +531,33 @@
			syncHour: "",
			showWelcome: true,
			syncDay: "",
			searchText: "",
			syncMin: "",
			syncSec: "00",
			isSyncBrowser: false,
			showDateTime: false,
			isAddAccount: false,
			isCount: false,
			isCalculate: false,
			browserTimer: null,
			timezone: "",
			isRealtime: false,
			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,
			@@ -664,16 +566,12 @@
			showMonthInput: false,
			selectedPic: null,
			showDayInput: false,
			loadedPic: "",
			cameraInfo: false,
			dependentScene: false,
			timestamp: 0,
			inAccountDetail: false,
			isChangePw: false,
			isSetPermission: false,
			timeInterval: 10,
			ntpServer: "",
			syncType: "1",
			equipmentTime: "",
			equipmentDate: "",
			roleList: [],
			@@ -682,23 +580,72 @@
			settime: "",
			weekday: "",
			menuArr: [
			{ name: "账户", icon: "\ue6de" },
			{ name: "日期时间", icon: "\ue6ff" },
			{ name: "集群管理", icon: "\ue6df" },
			{ name: "网络设置", icon: "\ue6dd" },
			{ name: "键盘和语言", icon: "\ue6dc" },
			{ name: "通用设置", icon: "\ue6db" },
			{
			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"
			},
			{
			name: "授权管理",
			icon: "\ue7e9;",
			imgUrl: "/images/settings/授权管理.png",
			blackIcon: "/images/settings/黑色一级icon/授权管理.png",
			whiteIcon: "/images/settings/白色一级icon/授权管理.png"
			}
			],
			accountArr: [],
			jpgArr: [],
			isManual: false,
			isNtp: true,
			// activePage: "账户",
			isNtp: false,
			activeIndex: 0,
			clockTimer: null,
			inputHour: "",
			inputMin: "",
			inputSec: "",
			mouseDownIndex: "",
			inputYrs: "",
			showInputNickName: false,
			inputMonth: "",
			@@ -706,424 +653,493 @@
			passwordForm: {
			curPassword: "",
			newPassword: "",
			confirmPassword: "",
			confirmPassword: ""
			},
			activeAccountIndex: 0,
			sysMenus: [],
			checkedArr: [],
			addForm: {
			userName: "",
			nickName: "",
			password: "",
			headpic: "",
			confirmPassword: "",
			roleId: "",
			roleId: ""
			},
			props: {
			label: "name"
			},
			addRules: {
			userName: [{ validator: v1, trigger: "blur" }],
			nickName: [
			{ min: 2, max: 10, message: "长度为 2 - 10 位", trigger: "blur" },
			],
			nickName: [{ min: 2, max: 10, message: "长度为 2 - 10 位", trigger: "blur" }],
			password: [
			{ required: true, message: "请输入密码", trigger: "blur" },
			{ min: 6, message: "长度至少为 6 位", trigger: "blur" },
			{ min: 6, message: "长度至少为 6 位", trigger: "blur" }
			],
			confirmPassword: [{ validator: v2, trigger: "blur" }],
			confirmPassword: [{ validator: v2, trigger: "blur" }]
			},
			pwRules: {
			curPassword: [
			{ required: true, message: "请输入密码", trigger: "blur" },
			{ min: 6, message: "长度至少为 6 位", trigger: "blur" },
			{ min: 6, message: "长度至少为 6 位", trigger: "blur" }
			],
			newPassword: [
			{ required: true, message: "请输入密码", trigger: "blur" },
			{ min: 6, message: "长度至少为 6 位", trigger: "blur" },
			{ min: 6, message: "长度至少为 6 位", trigger: "blur" }
			],
			confirmPassword: [{ validator: v4, 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);
			clearTimeout(this.clockTimer)
			clearInterval(this.browserTimer)
			},
			mounted() {
			this.fetchUserList();
			this.fetchDefHeadPic();
			// 返回按钮回调
			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;
			});
			this.jpgArr = res.data
			})
			},
			fetchUserList(showLast = false) {
			getUsers().then((res) => {
			this.accountArr = res.data;
			this.accountArr = res.data
			if (this.accountArr.length) {
			this.activeAccountItem = this.accountArr[this.activeAccountIndex];
			this.activeAccountItem = this.accountArr[this.activeAccountIndex]
			}
			if (showLast) {
			this.cancelAdd();
			const lastIdx = this.accountArr.length - 1;
			this.openAccount(this.accountArr[lastIdx], lastIdx);
			this.cancelAdd()
			const lastIdx = this.accountArr.length - 1
			this.openAccount(this.accountArr[lastIdx], lastIdx)
			}
			});
			})
			},
			confirmChangePic() {
			updateUser({
			id: this.activeAccountItem.id,
			headpic: this.addForm.headpic,
			headpic: this.addForm.headpic
			}).then((res) => {
			if (res.success) {
			this.$message.success(res.msg);
			this.fetchUserList();
			this.cacelChoosePic();
			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;
			this.showInputNickName = true
			this.inputNickName = this.activeAccountItem.nickname
			},
			hideInputNick() {
			if (this.inputNickName == this.activeAccountItem.nickname) {
			this.showInputNickName = false;
			return;
			this.showInputNickName = false
			return
			}
			updateUser({
			id: this.activeAccountItem.id,
			nickname: this.inputNickName,
			nickname: this.inputNickName
			}).then((res) => {
			this.activeAccountItem.nickname = this.inputNickName;
			this.$message.success(res.msg);
			this.fetchUserList(true);
			this.showInputNickName = false;
			});
			this.activeAccountItem.nickname = this.inputNickName
			this.$message.success(res.msg)
			this.fetchUserList(true)
			this.showInputNickName = false
			})
			},
			openAccount(item, i) {
			this.activeAccountItem = item;
			this.activeAccountIndex = i;
			this.inAccountDetail = false;
			this.cancelSet();
			this.cancelAdd();
			this.cacelChoosePic();
			this.fetchMenu();
			this.cancelPassword();
			this.showInputNickName = false;
			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;
			this.isSyncBrowser = false
			this.syncBrowser(false)
			let num
			switch (typ) {
			case "hrs":
			num = +this.syncHour - 1;
			num = +this.syncHour - 1
			if (num == -1) {
			num = 23;
			num = 23
			}
			this.syncHour = pad0(+num);
			break;
			this.syncHour = pad0(+num)
			break
			case "min":
			num = +this.syncMin - 1;
			num = +this.syncMin - 1
			if (num == -1) {
			num = 59;
			num = 59
			}
			this.syncMin = pad0(+num);
			break;
			this.syncMin = pad0(+num)
			break
			case "sec":
			num = +this.syncSec + 1;
			num = +this.syncSec + 1
			if (num == -1) {
			num = 59;
			num = 59
			}
			this.syncSec = pad0(+num);
			break;
			this.syncSec = pad0(+num)
			break
			case "yrs":
			num = +this.syncYrs - 1;
			this.syncYrs = pad0(+num);
			break;
			num = +this.syncYrs - 1
			this.syncYrs = pad0(+num)
			break
			case "mth":
			num = +this.syncMonth - 1;
			num = +this.syncMonth - 1
			if (num == 0) {
			num = 12;
			this.minusOne("yrs");
			num = 12
			this.minusOne("yrs")
			}
			this.syncMonth = pad0(+num);
			break;
			this.syncMonth = pad0(+num)
			if (+this.syncDay > this.getMaxDayOfMonth()) {
			this.minusOne("day")
			}
			break
			case "day":
			num = +this.syncDay - 1;
			num = +this.syncDay - 1
			if (num == 0) {
			this.minusOne("mth");
			const maxDay = new Date(
			+this.syncYrs,
			+this.syncMonth,
			0
			).getDate();
			num = maxDay;
			num = this.getMaxDayOfMonth()
			}
			this.syncDay = pad0(+num);
			break;
			this.syncDay = pad0(+num)
			break
			default:
			break;
			break
			}
			},
			getMaxDayOfMonth() {
			return new Date(+this.syncYrs, +this.syncMonth, 0).getDate()
			},
			fatherChange(item) {
			item.children.forEach((x) => {
			x.selected = item.selected;
			});
			x.selected = item.selected
			})
			},
			childrenChange(item) {
			let SomeOneSelected = item.children.some((x) => x.selected == true);
			item.selected = SomeOneSelected;
			let SomeOneSelected = item.children.some((x) => x.selected == true)
			item.selected = SomeOneSelected
			},
			plusOne(typ) {
			this.isSyncBrowser = false;
			this.syncBrowser(false);
			let num;
			this.isSyncBrowser = false
			this.syncBrowser(false)
			let num
			switch (typ) {
			case "hrs":
			num = +this.syncHour + 1;
			num = +this.syncHour + 1
			if (num == 24) {
			num = 0;
			num = 0
			}
			this.syncHour = pad0(+num);
			break;
			this.syncHour = pad0(+num)
			break
			case "min":
			num = +this.syncMin + 1;
			num = +this.syncMin + 1
			if (num == 60) {
			num = 0;
			num = 0
			}
			this.syncMin = pad0(+num);
			break;
			this.syncMin = pad0(+num)
			break
			case "sec":
			num = +this.syncSec + 1;
			num = +this.syncSec + 1
			if (num == 60) {
			num = 0;
			num = 0
			}
			this.syncSec = pad0(+num);
			break;
			this.syncSec = pad0(+num)
			break
			case "yrs":
			num = +this.syncYrs + 1;
			this.syncYrs = pad0(+num);
			break;
			num = +this.syncYrs + 1
			this.syncYrs = pad0(+num)
			break
			case "mth":
			num = +this.syncMonth + 1;
			num = +this.syncMonth + 1
			if (num == 13) {
			num = 1;
			num = 1
			}
			this.syncMonth = pad0(+num);
			break;
			this.syncMonth = pad0(+num)
			if (+this.syncDay > this.getMaxDayOfMonth()) {
			this.minusOne("day")
			}
			break
			case "day":
			num = +this.syncDay + 1;
			const maxDay = new Date(+this.syncYrs, +this.syncMonth, 0).getDate();
			if (num > maxDay) {
			num = 1;
			num = +this.syncDay + 1
			if (num > this.getMaxDayOfMonth()) {
			num = 1
			}
			this.syncDay = pad0(+num);
			break;
			this.syncDay = pad0(+num)
			break
			default:
			break;
			break
			}
			},
			editHeadPic() {
			this.showJPGArr = true
			this.jpgArr.forEach((item, index) => {
			if (this.activeAccountItem.headpic == item.path) {
			this.selectedPic = index
			}
			})
			},
			submitClock() {
			if (this.syncType === "1") {
			if (this.isNtp) {
			if (this.ntpServer === "" \|\| this.ntpServer === "...") {
			this.$notify({
			type: "error",
			message: "NTP 服务器地址不能为空",
			});
			return false;
			this.$notify.error("NTP 服务器地址不能为空")
			return false
			} else if (this.timeInterval === "") {
			this.timeInterval = 1;
			this.timeInterval = 1
			}
			} else if (this.isSyncBrowser) {
			if (this.settime === "") {
			this.$notify({
			type: "error",
			message: "设置时间不能为空",
			});
			return false;
			this.$notify.error("设置时间不能为空")
			return false
			}
			} else {
			this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`;
			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.syncType === "1",
			ntp: this.isNtp,
			ntpServer: this.ntpServer,
			interval: this.timeInterval,
			newTime: this.settime,
			}).then((rsp) => {
			if (rsp && rsp.success) {
			this.$notify({
			type: "success",
			message: "设置成功",
			});
			newTime: this.settime
			}).then(
			(rsp) => {
			if (rsp && rsp.success) {
			this.$notify.success("设置成功")
			}
			this.initClockConf()
			},
			(err) => {
			this.$notify.error("设置失败 " + err.msg)
			}
			this.initClockConf();
			});
			},
			flatGetArr(arr, res) {
			for (const item of arr) {
			if (item.selected) res.push(item.id);
			if (item.children) this.flatGetArr(item.children, res);
			}
			)
			},
			saveAuth() {
			let arr = [];
			this.flatGetArr(this.sysMenus, arr);
			updataUser({
			id: this.activeAccountItem.id,
			menuIds: arr,
			menuIds: this.$refs.treeMenus.getCheckedKeys()
			}).then((res) => {
			if (res.success) {
			this.$message.success(res.msg);
			this.cancelSet();
			this.$message.success(res.msg)
			this.cancelSet()
			}
			});
			})
			},
			formatTime(number, format) {
			var formateArr = ["Y", "M", "D", "h", "m", "s"];
			var returnArr = [];
			var date = new Date(number * 1000);
			returnArr.push(date.getFullYear());
			returnArr.push(this.formatNumber(date.getMonth() + 1));
			returnArr.push(this.formatNumber(date.getDate()));
			returnArr.push(this.formatNumber(date.getHours()));
			returnArr.push(this.formatNumber(date.getMinutes()));
			returnArr.push(this.formatNumber(date.getSeconds()));
			this.weekday = "星期" + "日一二三四五六".charAt(date.getDay());
			for (var i in returnArr) {
			format = format.replace(formateArr[i], returnArr[i]);
			formatTime(timestamp, format) {
			const formatNumber = (n) => {
			n = n + ""
			return n[1] ? n : "0" + n
			}
			return format;
			},
			formatNumber(n) {
			n = n.toString();
			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;
			this.timezone = rsp.data.time_zone
			if (!ntpTest) {
			this.syncType = rsp.data.ntp ? "1" : "2";
			this.isNtp = rsp.data.ntp;
			this.isManual = !rsp.data.ntp;
			this.isNtp = rsp.data.ntp
			}
			if (rsp.data.ntp) {
			this.ntpServer = rsp.data.ntp_server;
			this.timeInterval = rsp.data.interval;
			this.ntpServer = rsp.data.ntp_server
			this.timeInterval = rsp.data.interval
			}
			this.timestamp = rsp.data.local_time;
			this.timestamp = rsp.data.local_time
			this.weekday = "星期" + "日一二三四五六".charAt(new Date(+this.timestamp * 1000).getDay())
			if (this.clockTimer === null) {
			this.runClock();
			if (this.isManual) this.parseTime();
			this.runClock()
			if (!this.isNtp) this.parseTime()
			}
			}
			});
			})
			},
			openMenu(name, i) {
			this.activeIndex = i;
			openMenu(i) {
			this.activeIndex = i
			if (this.activeIndex == 1) {
			this.initClockConf();
			this.initClockConf()
			}
			},
			openWelcome(item, i) {
			this.showWelcome = false;
			this.openMenu(item.name, i);
			openWelcome(i) {
			this.showWelcome = false
			this.openMenu(i)
			},
			showInput(typ) {
			this[`show${typ}Input`] = true;
			this[`show${typ}Input`] = true
			this.$nextTick(() => {
			this.$refs[`ipt${typ}`].focus();
			});
			this.$refs[`ipt${typ}`].focus()
			})
			},
			hideInput(typ) {
			if (this[`input${typ}`]) {
			this[`sync${typ}`] = pad0(+this[`input${typ}`]);
			this[`sync${typ}`] = pad0(+this[`input${typ}`])
			}
			this[`show${typ}Input`] = false;
			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 + ""
			}
			}
			},
			onLeave() {
			if (this.showJPGArr) {
			return;
			}
			this.showChangePic = false;
			cancelSetTime() {
			this.parseTime()
			this.ntpServer = "..."
			this.timeInterval = 10
			},
			syncBrowser(enable) {
			this.isSyncBrowser = enable;
			this.isSyncBrowser = enable
			if (!enable) {
			clearInterval(this.browserTimer);
			clearInterval(this.browserTimer)
			} else {
			this.browserTimer = setInterval(() => {
			let timestamp = new Date().getTime() / 1000;
			this.settime = this.formatTime(timestamp, "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);
			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;
			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;
			this.roleList = res.data
			}
			});
			})
			},
			cancelAdd() {
			this.inAccountDetail = false;
			this.isAddAccount = false;
			this.$refs["addForm"].resetFields();
			this.selectedPic = null;
			this.inAccountDetail = false
			this.isAddAccount = false
			this.$refs["addForm"].resetFields()
			this.selectedPic = null
			},
			cancelPassword() {
			this.isChangePw = false;
			this.inAccountDetail = false;
			this.$refs["passwordForm"].resetFields();
			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;
			this.addForm.headpic = ""
			this.showChangePic = false
			this.selectedPic = null
			this.showJPGArr = false
			},
			SaveNewPassword(formName) {
			let data;
			let data
			this.$refs[formName].validate((valid) => {
			if (valid) {
			if (this.passwordForm.curPassword == "") {
			data = {
			userId: this.activeAccountItem.id,
			oldPwd: "",
			newPwd: this.passwordForm.newPassword,
			};
			newPwd: this.passwordForm.newPassword
			}
			} else {
			data = {
			oldPwd: this.passwordForm.curPassword,
			newPwd: this.passwordForm.newPassword,
			};
			newPwd: this.passwordForm.newPassword
			}
			}
			updatePassword(data).then(
			(res) => {
			if (res.success) {
			this.$message.success("密码" + res.msg);
			this.$message.success("密码" + res.msg)
			setTimeout(() => {
			this.cancelPassword();
			}, 1000);
			this.cancelPassword()
			}, 1000)
			}
			},
			(err) => {
			this.$message.error("保存失败，" + err.msg);
			this.$message.error("保存失败，" + err.msg)
			}
			);
			)
			}
			});
			})
			},
			saveAddAccount(formName) {
			this.$refs[formName].validate((valid) => {
			@@ -1133,213 +1149,381 @@
			password: this.addForm.password,
			nickname: this.addForm.nickName,
			headpic: this.addForm.headpic,
			roleId: this.addForm.roleId,
			};
			roleId: this.addForm.roleId
			}
			addUser(data).then(
			(res) => {
			this.$message.success(res.data);
			this.fetchUserList(true);
			this.$message.success(res.data)
			this.fetchUserList(true)
			},
			(err) => {
			this.$message.error("保存失败，" + err.msg);
			this.$message.error("保存失败，" + err.msg)
			}
			);
			)
			} else {
			console.log("error submit!!");
			return false;
			return false
			}
			});
			})
			},
			pickHeadDefPic(item, i) {
			if (this.selectedPic == i) {
			this.selectedPic = null;
			this.addForm.headpic = "";
			return;
			this.selectedPic = null
			this.addForm.headpic = ""
			return
			}
			this.addForm.headpic = item.path;
			this.selectedPic = i;
			this.addForm.headpic = item.path
			this.selectedPic = i
			},
			testNTP() {
			this.ntpTestLoading = true;
			this.ntpTestLoading = true
			testNTPserver({ server: this.ntpServer })
			.then((rsp) => {
			if (rsp && rsp.success) {
			this.$notify({
			type: "success",
			message: "时间同步成功",
			});
			message: "时间同步成功"
			})
			} else {
			this.$notify({
			type: "error",
			message: "时间同步失败",
			});
			message: "时间同步失败"
			})
			}
			this.ntpTestLoading = false;
			this.initClockConf(true);
			this.ntpTestLoading = false
			this.initClockConf(true)
			})
			.catch((err) => {
			this.$notify({
			type: "error",
			message: "时间同步失败,请检查服务器ip",
			});
			this.ntpTestLoading = false;
			});
			message: "时间同步失败,请检查服务器ip"
			})
			this.ntpTestLoading = false
			})
			},
			cancelSet() {
			this.isSetPermission = false;
			this.inAccountDetail = false;
			this.sysMenus = [];
			this.isSetPermission = false
			this.inAccountDetail = false
			this.sysMenus = []
			},
			showChangePassword() {
			this.isChangePw = true;
			this.inAccountDetail = true;
			this.isChangePw = true
			this.inAccountDetail = true
			},
			runClock() {
			const str = this.formatTime(++this.timestamp, "Y-M-D h:m:s");
			[this.equipmentDate, this.equipmentTime] = str.split(" ");
			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);
			this.runClock()
			}, 1000)
			},
			deleteAccount() {
			this.$confirm("您是否确认删除账户？", "删除账户", {
			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],
			};
			ids: [this.activeAccountItem.id]
			}
			deleteUser(obj).then((res) => {
			if (res.success) {
			this.fetchUserList();
			this.$message({
			type: "success",
			message: "删除成功!",
			});
			this.fetchUserList()
			this.$message.success("删除成功!")
			} else {
			this.$message.error("删除失败");
			this.$message.error("删除失败")
			}
			});
			})
			})
			.catch(() => {});
			.catch(() => {})
			},
			fetchMenu() {
			getUserMenus({
			userId: this.activeAccountItem.id,
			userId: this.activeAccountItem.id
			}).then((res) => {
			if (res && res.success) {
			this.sysMenus = res.data;
			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;
			this.inAccountDetail = true
			this.isSetPermission = true
			if (this.sysMenus.length == 0) {
			this.fetchMenu();
			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();
			},
			;[this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split("-")
			;[this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(":")
			}
			},
			computed: {
			activeUserRole() {
			return this.activeAccountItem.sysRoles[0].name;
			if (this.activeAccountItem.sysRoles && this.activeAccountItem.sysRoles.length) {
			return this.activeAccountItem.sysRoles[0].name
			}
			return "普通用户"
			},
			curUserRole() {
			const info = JSON.parse(sessionStorage.getItem("userInfo"));
			return info.roleName;
			const info = JSON.parse(sessionStorage.getItem("userInfo"))
			return info.roleName
			},
			curUserID() {
			const info = JSON.parse(sessionStorage.getItem("userInfo"));
			return info.id;
			const info = JSON.parse(sessionStorage.getItem("userInfo"))
			return info.id
			},
			isShowDeleteAccount() {
			if (this.curUserRole == "超级管理员") {
			if (this.activeUserRole == "超级管理员") {
			return false;
			}
			return true;
			return this.activeUserRole != "超级管理员"
			} else if (this.curUserRole == "管理员") {
			if (this.activeUserRole == "普通用户") {
			return true;
			}
			return false;
			return this.activeUserRole == "普通用户"
			}
			return false;
			return false
			},
			isShowPermitBtn(){
			isShowPermitBtn() {
			// basic 用户不允许修改权限
			if (this.activeUserRole == "超级管理员") {
			return false
			}
			if (this.curUserRole == "管理员") {
			if (this.activeUserRole == "普通用户") {
			return true
			}
			return false
			}else if (this.curUserRole == "普通用户"){
			return false
			return this.activeUserRole == "普通用户"
			} else {
			return this.curUserRole != "普通用户"
			}
			return true
			},
			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%;
			background-color: #f5f5f5;
			display: -ms-flexbox;
			padding: 0 50px;
			padding: 145px 32px 50px 32px;
			box-sizing: border-box;
			.child {
			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;
			background-color: white;
			float: left;
			width: 250px;
			height: 200px;
			margin: 50px 57px 30px 57px;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			-moz-box-shadow: 2px 2px 4px rgb(226, 226, 226);
			-webkit-box-shadow: 2px 2px 4px rgb(226, 226, 226);
			box-shadow: 2px 2px 4px rgb(226, 226, 226);
			.child-info {
			display: flex;
			flex-direction: column;
			height: 62%;
			justify-content: space-around;
			.welcome-icon {
			font-size: 72px;
			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;
			}
			.welcome-title {
			font-size: 18px;
			.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);
			}
			}
			}
			.child:hover {
			-moz-box-shadow: 5px 5px 15px rgb(218, 218, 218);
			-webkit-box-shadow: 5px 5px 15px rgb(218, 218, 218);
			box-shadow: 5px 5px 15px rgb(218, 218, 218);
			transform: translate3d(0, -3px, 0);
			transition: all 0.4s;
			.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 {
			@@ -1349,141 +1533,148 @@
			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: 230px;
			width: 244px;
			overflow: auto;
			box-sizing: border-box;
			flex-shrink: 0;
			padding: 10px;
			border-right: 5px solid rgba(248, 248, 248, 1);
			box-sizing: border-box;
			.left-card {
			height: 55px;
			height: 56px;
			cursor: pointer;
			border-radius: 12px;
			margin-bottom: 10px;
			border-radius: 8px;
			margin-bottom: 4px;
			display: flex;
			align-items: center;
			.iconfont {
			margin-left: 25px;
			margin-right: 10px;
			font-size: 24px;
			}
			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: rgba(61, 104, 225, 1);
			color: #fff;
			background-color: var(--colorCard) !important;
			.card-text {
			color: #fff !important;
			}
			.b {
			display: none;
			}
			.w {
			display: block;
			}
			}
			.left-card:hover {
			background-color: rgba(61, 104, 225, 1);
			color: #fff;
			background-color: #f2f2f7;
			}
			}
			.container-center {
			height: 100%;
			width: 280px;
			width: 300px;
			overflow: auto;
			flex-shrink: 0;
			padding: 10px;
			border-right: 5px solid rgba(248, 248, 248, 1);
			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: rgba(61, 104, 225, 1);
			margin-top: 15px;
			color: var(--colorCard);
			margin-top: 30px;
			.el-icon-circle-plus {
			cursor: pointer;
			font-size: 38px;
			}
			}
			.account-card {
			height: 50px;
			background-color: rgba(248, 248, 248, 1);
			margin-bottom: 10px;
			height: 60px;
			background-color: #f2f2f7;
			margin-bottom: 4px;
			display: flex;
			align-items: center;
			padding: 0 20px;
			padding: 0 5px 0 20px;

			box-sizing: border-box;
			border-radius: 10px;
			border-radius: 8px;
			cursor: pointer;
			justify-content: space-between;

			.touxiang {
			display: flex;
			align-items: center;
			img {
			border: none;

			height: 35px;
			width: 35px;
			border-radius: 17.5px;
			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: 10px;
			margin-left: 20px;
			font-size: 14px;
			font-weight: bold;
			}
			}

			.account-card-active {
			background-color: rgba(61, 104, 225, 1);
			background-color: var(--colorCard);
			color: #fff;
			}
			}
			.datetime-left {
			.time-card {
			height: 105px;
			background-color: rgba(248, 248, 248, 1);
			margin-bottom: 30px;
			border-radius: 10px;
			.head {
			height: 30px;
			line-height: 30px;
			text-align: left;
			box-sizing: border-box;
			padding: 0 10px;
			font-size: 14px;
			.icon {
			margin-right: 5px;
			color: rgba(61, 104, 225, 1);
			}
			}
			.time-main {
			height: 42px;
			line-height: 42px;
			font-family: Consolas;
			font-size: 36px;
			}
			.date-bot {
			height: 25px;
			font-size: 14px;
			line-height: 25px;
			color: #868686;
			display: flex;
			justify-content: space-evenly;
			}
			}
			.line {
			display: flex;
			align-items: center;
			height: 50px;
			padding: 0 25px;
			background-color: rgba(248, 248, 248, 1);
			justify-content: space-between;
			border-radius: 12px;
			margin-bottom: 10px;
			.name {
			font-size: 14px;
			}
			}
			}
			}
			@@ -1493,22 +1684,25 @@
			overflow: auto;
			box-sizing: border-box;
			position: relative;
			padding: 20px 40px;
			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 {
			height: 120px;
			width: 350px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			.touxiang-big {
			width: 100px;
			height: 100px;
			position: relative;
			border-radius: 50px;
			margin-bottom: 20px;
			img {
			border: none;
			width: 100px;
			@@ -1536,10 +1730,9 @@
			border-radius: 3px;
			border: 1px solid transparent;
			font-size: 14px;
			font-weight: bold;
			}
			.enable:hover {
			color: orangered;
			font-size: 15px;
			transition: all 0.2s;
			}
			.selected {
			@@ -1551,83 +1744,193 @@
			height: 100px;
			display: flex;
			flex-direction: column;
			align-items: baseline;
			align-items: center;
			color: #4f4f4f;
			min-width: 200px;
			.username {
			margin: 0 15px;
			.user-name {
			margin-bottom: 10px;
			height: 28px;
			line-height: 28px;
			text-align: left;
			font-size: 16px;
			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 {
			font-size: 14px;
			margin-left: 5px;
			cursor: pointer;
			font-weight: normal;
			}
			.el-input--mini {
			font-size: 14px;
			width: 83px;
			width: 82px;
			.el-input__inner {
			padding: 0 5px;
			padding: 0 8px;
			height: 20px;
			line-height: 20px;
			/* border: 1px solid; */
			border: 1px solid var(--colorCard);
			border-radius: 20px;
			background: #f2f2f7;
			}
			}
			}
			.user-role {
			margin: 5px 0 0 15px;
			font-size: 14px;
			color: skyblue;
			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;
			.item-btn {
			width: 500px;
			height: 45px;
			background-color: #f0f0f0;
			margin-bottom: 15px;
			border-radius: 10px;
			line-height: 45px;
			font-size: 15px;
			cursor: pointer;
			margin-top: 80px;
			.alt-pw-btn {
			background: rgba(78, 148, 255, 0.1);
			border: 1px solid var(--colorCard);
			}
			.item-btn:hover {
			color: rgba(255, 153, 102, 1);
			.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;
			}
			}
			}
			.title {
			height: 30px;
			line-height: 30px;
			margin-bottom: 10px;
			font-size: 16px;
			font-weight: 600;
			}

			.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;
			font-size: 15px;
			margin-top: 5px;
			line-height: 48px;
			width: 90px;
			font-weight: 600;
			}
			}
			.el-form-item {
			margin-bottom: 0;
			margin-bottom: 15px;
			.el-input__inner {
			background-color: rgba(240, 240, 240, 1);
			border: none;
			@@ -1637,9 +1940,9 @@
			font-size: 15px;
			}
			.el-input__clear {
			color: dimgray;
			font-size: 17px;
			line-height: 45px;
			color: #4f4f4f;
			font-size: 16px;
			line-height: 48px;
			}
			.el-input__suffix {
			right: 1px;
			@@ -1649,91 +1952,446 @@
			}
			}
			.permission {
			.line {
			display: flex;
			align-items: center;
			height: 50px;
			padding: 0 25px;
			background-color: rgba(248, 248, 248, 1);
			justify-content: space-between;
			border-radius: 12px;
			margin-bottom: 10px;
			.name {
			font-size: 14px;
			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 {
			height: 120px;
			width: 360px;
			width: 340px;

			margin: 0 auto;
			overflow: hidden;
			.upload-jpg {
			position: relative;
			height: 48px;
			width: 48px;
			height: 44px;
			width: 44px;
			float: left;
			margin: 0 10px;
			margin-bottom: 10px;
			margin-bottom: 20px;
			background-color: rgba(242, 242, 242, 1);
			border: 2px solid transparent;
			border-radius: 50%;
			cursor: pointer;
			img {
			height: 48px;
			width: 48px;
			height: 44px;
			width: 44px;
			border-radius: 50%;
			}
			.img-mask {
			position: absolute;
			left: 0;
			top: 0;
			height: 48px;
			width: 48px;
			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 cornflowerblue;
			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: 44px;
			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: 34px;
			height: 48px;
			text-align: left;
			line-height: 50px;
			line-height: 48px;
			width: 90px;
			font-weight: 600;
			}
			.el-form-item__error {
			line-height: 0.8;
			left: 3.3%;
			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 {
			.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 {
			.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 {
			@@ -1746,184 +2404,61 @@
			border-radius: 10px;
			.el-form-item__label {
			text-align: left;
			line-height: 42px;
			width: 184px;
			color: #333;
			font-weight: bold;
			}
			}
			.el-form-item__content {
			line-height: 40px;
			line-height: 16px;
			position: relative;
			font-size: 14px;
			margin-bottom: 10px;
			}
			.ip-input-container {
			max-width: none !important;
			}
			.ntp-time {
			.right {
			display: flex;
			align-items: baseline;
			.el-input-number--small {
			width: 100%;
			}
			.el-button--text {
			margin-left: 10px;
			text-decoration: underline;
			}
			}
			}
			.manual-time {
			.clock-wrap {
			height: 75px;

			background-color: #f8f8f8;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
			border-radius: 10px;
			.clock {
			display: flex;
			align-items: center;
			height: 90px;
			justify-content: space-evenly;
			.iconfont {
			cursor: pointer;
			color: rgba(134, 134, 134, 1);
			}
			.iconfont:hover {
			background-color: gainsboro;
			}
			.hour {
			background-color: rgba(240, 240, 240, 1);
			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;
			}
			.mins {
			background-color: #f0f0f0;
			display: flex;
			align-items: center;
			width: 110px;
			height: 50px;
			justify-content: space-evenly;
			border-radius: 10px;
			}
			}
			}
			.adjust-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			border-radius: 10px;
			height: 50px;
			background-color: rgba(248, 248, 248, 1);
			.middle {
			font-size: 14px;
			}
			.input-box {
			width: 80px;
			border: none;
			border-radius: 5px;
			height: 25px;
			font-size: 18px;
			text-align: center;
			}

			.input-box:focus {
			outline: none;
			}
			.minus {
			width: 50px;
			height: 50px;
			background-color: #f0f0f0;
			font-size: 35px;
			border-radius: 10px;
			cursor: pointer;
			line-height: 50px;
			color: rgba(134, 134, 134, 1);
			}
			.plus {
			width: 50px;
			height: 50px;
			cursor: pointer;
			background-color: #f0f0f0;
			font-size: 35px;
			border-radius: 10px;
			line-height: 50px;
			color: rgba(134, 134, 134, 1);
			}
			}
			}
			}
			.btns {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;

			.cancel {
			height: 40px;
			width: 48%;
			cursor: pointer;
			border-radius: 8px;
			background-color: rgba(240, 240, 240, 1);
			line-height: 40px;
			font-size: 14px;
			}
			.ok {
			height: 40px;
			width: 48%;
			cursor: pointer;
			border-radius: 8px;
			background-color: rgba(61, 104, 225, 1);
			color: #fff;
			line-height: 40px;
			font-size: 14px;
			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>