<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(item.name, i)"
|
>
|
<span class="icon iconfont">{{ item.icon }}</span>
|
<span class="card-text">{{ item.name }}</span>
|
</div>
|
</div>
|
|
<div class="container-center" v-if="activeIndex == 0 || activeIndex == 1">
|
<div class="account-left" v-if="activeIndex == 0">
|
<div class="account-list">
|
<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>
|
<el-tag size="mini" v-if="item.id == curUserID">当前登录</el-tag>
|
</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>
|
</div>
|
</div>
|
</div>
|
<div class="container-right" v-if="activeIndex == 0 || activeIndex == 1">
|
<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="onLeave"
|
>
|
<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
|
>
|
</div>
|
</div>
|
<div class="user-desc">
|
<div class="username">
|
<span
|
class="icon iconfont"
|
style="font-size: 18px; margin-right: 3px"
|
></span
|
>
|
<span>{{ activeAccountItem.username }}</span>
|
</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"
|
class="icon iconfont"
|
@click="showInputNickName = false"
|
></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>
|
<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="list-btn" v-if="showJPGArr == false">
|
<div class="item-btn" @click="showChangePassword">修改密码</div>
|
<div
|
class="item-btn"
|
v-if="isShowDeleteAccount"
|
@click="deleteAccount"
|
>
|
删除账户
|
</div>
|
<div
|
v-if="isShowPermitBtn"
|
class="item-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>
|
|
<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="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="请选择角色">
|
<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="ntp-time" v-if="isNtp">
|
<el-form label-width="160px">
|
<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>
|
<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>
|
</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"
|
@input="checkMonthInput"
|
type="text"
|
v-model="inputMonth"
|
@blur="hideInput('Month')"
|
@keydown.enter="hideInput('Month')"
|
/>
|
月
|
</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"
|
@input="checkDayInput"
|
type="text"
|
v-model="inputDay"
|
@blur="hideInput('Day')"
|
@keydown.enter="hideInput('Day')"
|
/>
|
日
|
</div>
|
<div class="plus" @click="plusOne('day')">+</div>
|
</div>
|
</div>
|
|
<div class="btns">
|
<div class="cancel" @click="cancelSetTime">取消</div>
|
<div class="ok" @click="submitClock">保存</div>
|
</div>
|
</div>
|
</div>
|
|
<clusterManagement
|
v-if="activeIndex == 2"
|
style="width: 100%"
|
></clusterManagement>
|
<netSettings
|
ref="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>
|
<deviceInfo
|
v-if="activeIndex == 6"
|
style="width: 100%"
|
></deviceInfo>
|
|
</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>
|
</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/subComponents/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: "",
|
syncMin: "",
|
syncSec: "00",
|
isSyncBrowser: false,
|
showDateTime: false,
|
isAddAccount: false,
|
browserTimer: null,
|
timezone: "",
|
inputNickName: "",
|
showHourInput: false,
|
showMinInput: false,
|
showSecInput: false,
|
showYrsInput: false,
|
showMonthInput: false,
|
selectedPic: null,
|
showDayInput: false,
|
timestamp: 0,
|
inAccountDetail: false,
|
isChangePw: false,
|
isSetPermission: false,
|
timeInterval: 10,
|
ntpServer: "",
|
syncType: "1",
|
equipmentTime: "",
|
equipmentDate: "",
|
roleList: [],
|
ntpTestLoading: false,
|
showJPGArr: false,
|
settime: "",
|
weekday: "",
|
menuArr: [
|
{ name: "账户", icon: "\ue6de" },
|
{ name: "日期时间", icon: "\ue6ff" },
|
{ name: "集群管理", icon: "\ue6df" },
|
{ name: "网络设置", icon: "\ue6dd" },
|
{ name: "键盘和语言", icon: "\ue6dc" },
|
{ name: "通用设置", icon: "\ue6db" },
|
{ name: "设备信息", icon: "\ue756" },
|
],
|
accountArr: [],
|
jpgArr: [],
|
isManual: false,
|
isNtp: true,
|
activeIndex: 0,
|
clockTimer: null,
|
inputHour: "",
|
inputMin: "",
|
inputSec: "",
|
inputYrs: "",
|
showInputNickName: false,
|
inputMonth: "",
|
inputDay: "",
|
passwordForm: {
|
curPassword: "",
|
newPassword: "",
|
confirmPassword: "",
|
},
|
activeAccountIndex: 0,
|
sysMenus: [],
|
addForm: {
|
userName: "",
|
nickName: "",
|
password: "",
|
headpic: "",
|
confirmPassword: "",
|
roleId: "",
|
},
|
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" }],
|
},
|
};
|
},
|
beforeDestroy() {
|
clearTimeout(this.clockTimer);
|
clearInterval(this.browserTimer);
|
},
|
mounted() {
|
const menu = getUrlKey("menu");
|
if (menu) {
|
this.showWelcome = false;
|
this.activeIndex = this.menuArr.findIndex((x) => x.name == menu);
|
this.$nextTick(() => {
|
this.$refs.netSettings.openRight(2);
|
});
|
}
|
this.fetchUserList();
|
this.fetchDefHeadPic();
|
},
|
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;
|
}
|
},
|
submitClock() {
|
if (this.syncType === "1") {
|
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.syncType === "1",
|
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);
|
}
|
);
|
},
|
flatGetArr(arr, res) {
|
for (const item of arr) {
|
if (item.selected) res.push(item.id);
|
if (item.children) this.flatGetArr(item.children, res);
|
}
|
},
|
saveAuth() {
|
let arr = [];
|
this.flatGetArr(this.sysMenus, arr);
|
updataUser({
|
id: this.activeAccountItem.id,
|
menuIds: arr,
|
}).then((res) => {
|
if (res.success) {
|
this.$message.success(res.msg);
|
this.cancelSet();
|
}
|
});
|
},
|
formatTime(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.syncType = rsp.data.ntp ? "1" : "2";
|
this.isNtp = rsp.data.ntp;
|
this.isManual = !rsp.data.ntp;
|
}
|
if (rsp.data.ntp) {
|
this.ntpServer = rsp.data.ntp_server;
|
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.isManual) this.parseTime();
|
}
|
}
|
});
|
},
|
openMenu(name, i) {
|
this.activeIndex = i;
|
if (this.activeIndex == 1) {
|
this.initClockConf();
|
}
|
},
|
openWelcome(item, i) {
|
this.showWelcome = false;
|
this.openMenu(item.name, 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 + "";
|
}
|
}
|
},
|
onLeave() {
|
if (this.showJPGArr) {
|
return;
|
}
|
this.showChangePic = false;
|
},
|
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();
|
},
|
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 {
|
console.log("error submit!!");
|
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() {
|
this.$confirm("您是否确认删除账户？", "删除账户", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
})
|
.then(() => {
|
let obj = {
|
ids: [this.activeAccountItem.id],
|
};
|
deleteUser(obj).then((res) => {
|
if (res.success) {
|
this.fetchUserList();
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
} else {
|
this.$message.error("删除失败");
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
fetchMenu() {
|
getUserMenus({
|
userId: this.activeAccountItem.id,
|
}).then((res) => {
|
if (res && res.success) {
|
this.sysMenus = res.data;
|
}
|
});
|
},
|
openPermission() {
|
this.inAccountDetail = true;
|
this.isSetPermission = true;
|
if (this.sysMenus.length == 0) {
|
this.fetchMenu();
|
}
|
},
|
parseTime() {
|
[this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
|
"-"
|
);
|
[this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
|
":"
|
);
|
},
|
changeSwitch(str) {
|
if (str == "isNtp") {
|
this.isManual = !this[str];
|
} else {
|
this.isNtp = !this[str];
|
}
|
this.syncType = this.isNtp ? "1" : "2";
|
if (this.isManual) this.parseTime();
|
},
|
},
|
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 == "超级管理员") {
|
if (this.activeUserRole == "超级管理员") {
|
return false;
|
}
|
return true;
|
} else if (this.curUserRole == "管理员") {
|
if (this.activeUserRole == "普通用户") {
|
return true;
|
}
|
return false;
|
}
|
return false;
|
},
|
isShowPermitBtn() {
|
if (this.curUserRole == "管理员") {
|
if (this.activeUserRole == "普通用户") {
|
return true;
|
}
|
return false;
|
} else if (this.curUserRole == "普通用户") {
|
return false;
|
}
|
return true;
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.welcome-page {
|
width: 100%;
|
height: 100%;
|
background-color: #f5f5f5;
|
display: -ms-flexbox;
|
padding: 0 50px;
|
box-sizing: border-box;
|
.child {
|
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;
|
}
|
.welcome-title {
|
font-size: 18px;
|
}
|
}
|
}
|
.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;
|
}
|
}
|
.container {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
flex-basis: auto;
|
box-sizing: border-box;
|
.container-left {
|
height: 100%;
|
width: 230px;
|
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;
|
cursor: pointer;
|
border-radius: 12px;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
.iconfont {
|
margin-left: 25px;
|
margin-right: 10px;
|
font-size: 24px;
|
}
|
.card-text {
|
font-size: 16px;
|
}
|
}
|
.left-card-active {
|
background-color: var(--colorCard);
|
color: #fff;
|
}
|
.left-card:hover {
|
background-color: var(--colorCard);
|
color: #fff;
|
}
|
}
|
.container-center {
|
height: 100%;
|
width: 280px;
|
overflow: auto;
|
flex-shrink: 0;
|
padding: 10px;
|
border-right: 5px solid rgba(248, 248, 248, 1);
|
box-sizing: border-box;
|
.account-left {
|
height: 100%;
|
.account-list {
|
height: calc(85%);
|
overflow: auto;
|
}
|
.add-account {
|
color: rgba(61, 104, 225, 1);
|
margin-top: 15px;
|
.el-icon-circle-plus {
|
cursor: pointer;
|
font-size: 38px;
|
}
|
}
|
.account-card {
|
height: 50px;
|
background-color: rgba(248, 248, 248, 1);
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
box-sizing: border-box;
|
border-radius: 10px;
|
cursor: pointer;
|
justify-content: space-between;
|
|
.touxiang {
|
display: flex;
|
align-items: center;
|
img {
|
border: none;
|
|
height: 35px;
|
width: 35px;
|
border-radius: 17.5px;
|
}
|
}
|
.user-name {
|
margin-left: 10px;
|
font-size: 14px;
|
}
|
}
|
|
.account-card-active {
|
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;
|
}
|
}
|
}
|
}
|
.container-right {
|
flex: 1;
|
flex-basis: auto;
|
overflow: auto;
|
box-sizing: border-box;
|
position: relative;
|
padding: 20px 40px;
|
.account-right {
|
.account-content {
|
.content-top {
|
height: 120px;
|
width: 350px;
|
margin: 0 auto;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 20px;
|
.touxiang-big {
|
width: 100px;
|
height: 100px;
|
position: relative;
|
border-radius: 50px;
|
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;
|
}
|
.enable:hover {
|
color: orangered;
|
font-size: 15px;
|
transition: all 0.2s;
|
}
|
.selected {
|
font-size: 20px;
|
}
|
}
|
}
|
.user-desc {
|
height: 100px;
|
display: flex;
|
flex-direction: column;
|
align-items: baseline;
|
min-width: 200px;
|
.username {
|
margin: 0 15px;
|
height: 28px;
|
line-height: 28px;
|
text-align: left;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
}
|
.nick-name {
|
margin: 5px 15px;
|
font-size: 14px;
|
display: flex;
|
height: 30px;
|
align-items: center;
|
.nick-text {
|
width: fit-content;
|
text-align: left;
|
}
|
|
.iconfont {
|
font-size: 14px;
|
margin-left: 5px;
|
cursor: pointer;
|
}
|
.el-input--mini {
|
font-size: 14px;
|
width: 83px;
|
.el-input__inner {
|
padding: 0 5px;
|
}
|
}
|
}
|
.user-role {
|
margin: 5px 0 0 15px;
|
font-size: 14px;
|
color: skyblue;
|
}
|
}
|
}
|
.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;
|
}
|
.item-btn:hover {
|
color: rgba(255, 153, 102, 1);
|
}
|
}
|
}
|
.title {
|
height: 30px;
|
line-height: 30px;
|
margin-bottom: 10px;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
.change-pw {
|
.p-title {
|
text-align: left;
|
font-size: 15px;
|
margin-top: 5px;
|
}
|
}
|
.el-form-item {
|
margin-bottom: 0;
|
.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: dimgray;
|
font-size: 17px;
|
line-height: 45px;
|
}
|
.el-input__suffix {
|
right: 1px;
|
top: -0.5px;
|
width: 45px;
|
border-radius: 12px;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
|
.upload-group {
|
height: 120px;
|
width: 360px;
|
margin: 0 auto;
|
overflow: hidden;
|
.upload-jpg {
|
position: relative;
|
height: 48px;
|
width: 48px;
|
float: left;
|
margin: 0 10px;
|
margin-bottom: 10px;
|
background-color: rgba(242, 242, 242, 1);
|
border: 2px solid transparent;
|
border-radius: 50%;
|
cursor: pointer;
|
img {
|
height: 48px;
|
width: 48px;
|
border-radius: 50%;
|
}
|
.img-mask {
|
position: absolute;
|
left: 0;
|
top: 0;
|
height: 48px;
|
width: 48px;
|
background-color: rgba(0, 0, 0, 0.3);
|
color: white;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.selected {
|
font-size: 22px;
|
}
|
}
|
}
|
.upload-jpg-border {
|
border: 2px solid cornflowerblue;
|
}
|
}
|
.add-account-page {
|
.fill-group {
|
.el-form-item__content {
|
line-height: 44px;
|
}
|
.p-title {
|
height: 34px;
|
text-align: left;
|
line-height: 50px;
|
}
|
.el-form-item__error {
|
line-height: 0.8;
|
left: 3.3%;
|
}
|
.el-form-item {
|
.el-select {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
.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 {
|
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;
|
line-height: 42px;
|
}
|
}
|
.el-form-item__content {
|
line-height: 40px;
|
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;
|
}
|
}
|
}
|
}
|
</style>
|
