<template>
|
<div class="container">
|
<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, index)"
|
>
|
<span class="icon iconfont"></span>
|
<span class="card-text">{{ item.name }}</span>
|
</div>
|
</div>
|
|
<div
|
class="container-center"
|
v-if="activePage == '账户' || activePage == '日期时间'"
|
>
|
<div class="account-left" v-if="activePage == '账户'">
|
<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="
|
item.headpic.indexOf('http') > -1
|
? item.headpic
|
: 'http://' + item.headpic
|
"
|
alt=""
|
/>
|
</div>
|
<span class="user-name">{{ item.username }}</span>
|
</div>
|
</div>
|
<div class="add-account">
|
<span class="icon iconfont" @click="showAddAccount"></span>
|
</div>
|
</div>
|
<div class="datetime-left" v-if="activePage == '日期时间'">
|
<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="activePage == '账户' || activePage == '日期时间'"
|
>
|
<div class="account-right" v-if="activePage == '账户'">
|
<div
|
class="account-content"
|
v-if="inAccountDetail == false && isAddAccount == false"
|
>
|
<div class="content-top">
|
<div class="touxiang-big">
|
<img
|
v-if="activeAccountItem.headpic"
|
:src="
|
activeAccountItem.headpic.indexOf('http') > -1
|
? activeAccountItem.headpic
|
: 'http://' + activeAccountItem.headpic
|
"
|
alt=""
|
/>
|
</div>
|
<div class="user-desc">
|
<div class="username">
|
<span class="icon iconfont" style="margin-right: 5px"
|
></span
|
>
|
<span>{{ activeAccountItem.username }}</span>
|
</div>
|
<div class="nickname">
|
<span>昵称：</span>
|
<span v-show="!showInputNickName">{{
|
activeAccountItem.nickname
|
}}</span>
|
<input
|
type="text"
|
class="input-nick"
|
ref="input-nick"
|
v-show="showInputNickName"
|
v-model="inputNickName"
|
@blur="hideInputNick"
|
@keydown.enter="blurInputNick"
|
/>
|
<span class="icon iconfont" @click="editNickName"
|
></span
|
>
|
</div>
|
<div class="user-role">
|
{{
|
activeAccountItem.sysRoles.length
|
? activeAccountItem.sysRoles[0].name
|
: ""
|
}}
|
</div>
|
</div>
|
</div>
|
<div class="list-btn">
|
<div class="item-btn" @click="showChangePassword">修改密码</div>
|
<div class="item-btn" @click="deleteAccount">删除账户</div>
|
<div 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">
|
<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="cancelChangePassword">取消</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 && url !== '' ? 'upload-jpg-mask' : ''
|
"
|
v-for="(url, index) in jpgArr"
|
:key="index"
|
@click="pickHeadDefPic(url, index)"
|
>
|
<img v-if="url !== ''" :src="url" alt="" srcset="" />
|
</div>
|
|
<el-upload
|
class="upload-demo"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:show-file-list="false"
|
:http-request="uploadUserPic"
|
>
|
<div class="upload-jpg-up">上传</div>
|
</el-upload>
|
</div>
|
<div class="fill-group">
|
<el-form
|
:model="addForm"
|
:rules="rules"
|
ref="addForm"
|
class="add-form"
|
>
|
<el-form-item prop="userName">
|
<div class="p-title">用户名：</div>
|
<el-input
|
placeholder="必填"
|
v-model="addForm.userName"
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="nickName">
|
<div class="p-title">昵称：</div>
|
<el-input
|
placeholder="选填"
|
v-model="addForm.nickName"
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<div class="p-title">密码：</div>
|
<el-input
|
placeholder="必填"
|
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="activePage == '日期时间'">
|
<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>
|
</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>
|
|
<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="btns">
|
<div class="cancel" @click="cancelChangePassword">取消</div>
|
<div class="ok" @click="submitClock">保存</div>
|
</div>
|
</div>
|
</div>
|
|
<clusterManagement
|
v-if="activePage == '集群管理'"
|
style="width: 100%"
|
></clusterManagement>
|
<netSettings
|
v-if="activePage == '网络设置'"
|
style="width: 100%"
|
></netSettings>
|
<keyboardLanguage
|
v-if="activePage == '键盘和语言'"
|
style="width: 100%"
|
></keyboardLanguage>
|
<generalSettings
|
v-if="activePage == '通用设置'"
|
style="width: 100%"
|
></generalSettings>
|
</div>
|
</template>
|
|
<script>
|
import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system";
|
import {
|
uploadHeadPic,
|
addUser,
|
getUsers,
|
updateUser,
|
updataUser,
|
updatePassword,
|
deleteUser,
|
getUserMenus,
|
defHeadPics,
|
} 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";
|
export default {
|
name: "settings",
|
components: {
|
switchBar,
|
ipInput,
|
clusterManagement,
|
netSettings,
|
keyboardLanguage,
|
generalSettings,
|
},
|
data() {
|
var validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== this.addForm.password) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
var validatePass4 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== this.passwordForm.newPassword) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
showAccount: true,
|
syncYrs: "",
|
activeAccountItem: {},
|
syncMonth: "",
|
syncHour: "",
|
syncDay: "",
|
syncMin: "",
|
syncSec: "00",
|
isSyncBrowser: false,
|
showDateTime: false,
|
isAddAccount: false,
|
isCount: false,
|
isCalculate: false,
|
browserTimer: null,
|
timezone: "",
|
isRealtime: false,
|
inputNickName: "",
|
showHourInput: false,
|
showMinInput: false,
|
showSecInput: false,
|
showYrsInput: false,
|
showMonthInput: false,
|
selectedPic: null,
|
showDayInput: false,
|
cameraInfo: false,
|
dependentScene: false,
|
timestamp: 0,
|
inAccountDetail: false,
|
isChangePw: false,
|
isSetPermission: false,
|
timeInterval: 10,
|
ntpServer: "",
|
syncType: "1",
|
equipmentTime: "",
|
equipmentDate: "",
|
ntpTestLoading: false,
|
settime: "",
|
weekday: "",
|
menuArr: [
|
{ name: "账户" },
|
{ name: "日期时间" },
|
{ name: "集群管理" },
|
{ name: "网络设置" },
|
{ name: "键盘和语言" },
|
{ name: "通用设置" },
|
],
|
accountArr: [],
|
jpgArr: ["", "", "", "", "", "", "", "", ""],
|
isManual: false,
|
isNtp: true,
|
activePage: "账户",
|
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: "",
|
},
|
rules: {
|
userName: [
|
{ required: true, message: "请输入用户名", trigger: "blur" },
|
{
|
min: 3,
|
max: 10,
|
message: "长度在 3 到 10 个字符",
|
trigger: "blur",
|
},
|
],
|
password: [
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
{ min: 6, message: '长度至少为 6 位', trigger: 'blur' }
|
],
|
confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
|
},
|
pwRules: {
|
// pw: [{ validator: validatePass3, trigger: "blur" }],
|
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: validatePass4, trigger: "blur" }],
|
},
|
};
|
},
|
beforeDestroy() {
|
clearTimeout(this.clockTimer);
|
clearInterval(this.browserTimer);
|
},
|
mounted() {
|
this.fetchUserList();
|
this.fetchDefHeadPic();
|
},
|
methods: {
|
fetchDefHeadPic() {
|
defHeadPics().then((res) => {
|
res.data.slice(0, 5).forEach((x, i) => {
|
this.jpgArr[i] = x;
|
});
|
});
|
},
|
fetchUserList(showLast = false) {
|
getUsers().then((res) => {
|
this.accountArr = res.data;
|
if (this.accountArr.length) {
|
this.activeAccountItem = this.accountArr[0];
|
}
|
if (showLast) {
|
this.cancelAdd();
|
const lastIdx = this.accountArr.length - 1;
|
this.openAccount(this.accountArr[lastIdx], lastIdx);
|
|
}
|
});
|
},
|
blurInputNick() {
|
this.$refs["input-nick"].blur();
|
},
|
editNickName() {
|
this.showInputNickName = true;
|
this.inputNickName = this.activeAccountItem.nickname;
|
this.$refs["input-nick"].focus();
|
},
|
hideInputNick() {
|
this.showInputNickName = false;
|
updateUser({
|
id: this.activeAccountItem.id,
|
nickname: this.inputNickName,
|
}).then((res) => {
|
this.$message.success(res.msg);
|
this.fetchUserList(true);
|
});
|
},
|
openAccount(item, i) {
|
this.activeAccountItem = item;
|
this.activeAccountIndex = i;
|
this.inAccountDetail = false;
|
},
|
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 = this.padZero(num);
|
break;
|
case "min":
|
num = +this.syncMin - 1;
|
if (num == -1) {
|
num = 59;
|
}
|
this.syncMin = this.padZero(num);
|
break;
|
case "sec":
|
num = +this.syncSec + 1;
|
if (num == -1) {
|
num = 59;
|
}
|
this.syncSec = this.padZero(num);
|
break;
|
case "yrs":
|
num = +this.syncYrs - 1;
|
this.syncYrs = this.padZero(num);
|
break;
|
case "mth":
|
num = +this.syncMonth - 1;
|
if (num == 0) {
|
num = 12;
|
this.minusOne("yrs");
|
}
|
this.syncMonth = this.padZero(num);
|
break;
|
case "day":
|
num = +this.syncDay - 1;
|
if (num == 0) {
|
this.minusOne("mth");
|
const maxDay = new Date(
|
+this.syncYrs,
|
+this.syncMonth,
|
0
|
).getDate();
|
num = maxDay;
|
}
|
this.syncDay = this.padZero(num);
|
break;
|
default:
|
break;
|
}
|
},
|
fatherChange(item) {
|
item.children.forEach((x) => {
|
x.selected = false;
|
});
|
},
|
childrenChange(item) {
|
let isAllSelected = item.children.every((x) => x.selected == true);
|
let isAllNotSelected = item.children.every((x) => x.selected == false);
|
if (isAllSelected) item.selected = true;
|
if (isAllNotSelected) item.selected = false;
|
},
|
getMaxDay() {
|
const maxDay = new Date(+this.syncYrs, +this.syncMonth, 0).getDate();
|
if (this.syncDay > maxDay) this.syncDay = maxDay;
|
},
|
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 = this.padZero(num);
|
break;
|
case "min":
|
num = +this.syncMin + 1;
|
if (num == 60) {
|
num = 0;
|
}
|
this.syncMin = this.padZero(num);
|
break;
|
case "sec":
|
num = +this.syncSec + 1;
|
if (num == 60) {
|
num = 0;
|
}
|
this.syncSec = this.padZero(num);
|
break;
|
case "yrs":
|
num = +this.syncYrs + 1;
|
this.syncYrs = this.padZero(num);
|
break;
|
case "mth":
|
num = +this.syncMonth + 1;
|
if (num == 13) {
|
num = 1;
|
}
|
this.syncMonth = this.padZero(num);
|
break;
|
case "day":
|
num = +this.syncDay + 1;
|
const maxDay = new Date(+this.syncYrs, +this.syncMonth, 0).getDate();
|
if (num > maxDay) {
|
num = 1;
|
}
|
this.syncDay = this.padZero(num);
|
break;
|
default:
|
break;
|
}
|
},
|
submitClock() {
|
if (this.syncType === "1") {
|
if (this.ntpServer === "" || this.ntpServer === "...") {
|
this.$notify({
|
type: "error",
|
message: "NTP 服务器地址不能为空",
|
});
|
return false;
|
} else if (this.timeInterval === "") {
|
this.timeInterval = 1;
|
}
|
} else if (this.isSyncBrowser) {
|
if (this.settime === "") {
|
this.$notify({
|
type: "error",
|
message: "设置时间不能为空",
|
});
|
return false;
|
}
|
} else {
|
this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`;
|
}
|
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({
|
type: "success",
|
message: "设置成功",
|
});
|
}
|
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,
|
}).then((res) => {
|
res.data;
|
});
|
},
|
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]);
|
}
|
return format;
|
},
|
padZero(n) {
|
n = +n;
|
return n < 10 ? "0" + n : "" + n;
|
},
|
formatNumber(n) {
|
n = n.toString();
|
return n[1] ? n : "0" + n;
|
},
|
uploadUserPic(params) {
|
let param = new FormData();
|
param.append("file", params.file);
|
uploadHeadPic(param).then((res) => {
|
let index = this.jpgArr.findIndex((x) => x == "");
|
this.$set(this.jpgArr, index, res.data);
|
});
|
},
|
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;
|
if (this.clockTimer === null) {
|
this.runClock();
|
if (this.isManual) this.parseTime();
|
}
|
}
|
});
|
},
|
openMenu(item, i) {
|
this.activePage = item.name;
|
this.activeIndex = i;
|
if (this.activePage == "日期时间") {
|
this.initClockConf();
|
}
|
},
|
showInput(typ) {
|
this[`show${typ}Input`] = true;
|
this.$nextTick(() => {
|
this.$refs[`ipt${typ}`].focus();
|
});
|
},
|
hideInput(typ) {
|
if (this[`input${typ}`]) {
|
this[`sync${typ}`] = this.padZero(this[`input${typ}`]);
|
}
|
this[`show${typ}Input`] = false;
|
this[`input${typ}`] = "";
|
},
|
syncBrowser(enable) {
|
this.isSyncBrowser = val;
|
if (!enable) {
|
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);
|
}
|
},
|
showAddAccount() {
|
this.inAccountDetail = false;
|
this.isAddAccount = true;
|
},
|
cancelAdd() {
|
this.inAccountDetail = false;
|
this.isAddAccount = false;
|
},
|
cancelChangePassword() {
|
this.isChangePw = false;
|
this.inAccountDetail = false;
|
this.$refs['passwordForm'].resetFields()
|
},
|
SaveNewPassword(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
updatePassword({
|
oldPwd: this.passwordForm.curPassword,
|
newPwd: this.passwordForm.newPassword,
|
}).then(
|
(res) => {
|
this.$message.success(res.data);
|
},
|
(err) => {
|
this.$message.warning("保存失败，" + 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,
|
};
|
addUser(data).then(
|
(res) => {
|
this.$message.success(res.data);
|
this.fetchUserList(true);
|
},
|
(err) => {
|
this.$message.warning("保存失败，" + err.msg);
|
}
|
);
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
pickHeadDefPic(url, i) {
|
this.addForm.headpic = url;
|
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;
|
},
|
showChangePassword() {
|
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(" ");
|
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.warning("删除失败");
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
fetchMenu() {
|
getUserMenus({
|
userId: this.activeAccountItem.id,
|
}).then((res) => {
|
if (res && res.success) {
|
this.sysMenus = res.data;
|
}
|
});
|
},
|
openPermission() {
|
this.inAccountDetail = true;
|
this.isSetPermission = true;
|
this.fetchMenu();
|
},
|
parseTime() {
|
debugger;
|
[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: {
|
isShowAddAccount() {
|
const info = JSON.parse(sessionStorage.getItem("userInfo"));
|
return true;
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.container {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
flex-basis: auto;
|
box-sizing: border-box;
|
.container-left {
|
height: 100%;
|
width: 210px;
|
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: rgba(61, 104, 225, 1);
|
color: #fff;
|
}
|
.left-card:hover {
|
background-color: rgba(61, 104, 225, 1);
|
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 {
|
.add-account {
|
color: rgba(61, 104, 225, 1);
|
margin-top: 50px;
|
|
.iconfont {
|
cursor: pointer;
|
font-size: 32px;
|
}
|
}
|
.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;
|
.touxiang {
|
height: 35px;
|
width: 35px;
|
background-color: bisque;
|
border-radius: 17.5px;
|
img {
|
border: none;
|
|
height: 35px;
|
width: 35px;
|
border-radius: 17.5px;
|
}
|
}
|
.user-name {
|
margin-left: 10px;
|
font-size: 14px;
|
}
|
}
|
|
.account-card-active {
|
background-color: rgba(61, 104, 225, 1);
|
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;
|
background-color: bisque;
|
border-radius: 50px;
|
img {
|
border: none;
|
|
width: 100px;
|
height: 100px;
|
border-radius: 50px;
|
}
|
}
|
.user-desc {
|
height: 100px;
|
display: flex;
|
flex-direction: column;
|
align-items: baseline;
|
min-width: 200px;
|
.username {
|
margin: 5px 15px;
|
height: 30px;
|
line-height: 30px;
|
width: 90px;
|
text-align: left;
|
font-size: 15px;
|
display: flex;
|
align-items: center;
|
}
|
.nickname {
|
margin: 5px 15px;
|
font-size: 14px;
|
.input-nick {
|
width: 50px;
|
margin-right: 5px;
|
}
|
.iconfont {
|
font-size: 14px;
|
margin-left: 5px;
|
cursor: pointer;
|
}
|
}
|
.user-role {
|
margin: 5px 0 0 15px;
|
font-size: 14px;
|
}
|
}
|
}
|
.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;
|
/* background-color: aliceblue; */
|
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;
|
// background-color: rgba(61, 104, 225, 1);
|
/* color: white; */
|
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;
|
}
|
}
|
}
|
|
.add-account-page {
|
.upload-group {
|
height: 130px;
|
width: 360px;
|
margin: 0 auto;
|
overflow: hidden;
|
.upload-jpg {
|
height: 46px;
|
width: 46px;
|
float: left;
|
margin: 0 10px;
|
margin-bottom: 20px;
|
background-color: rgba(242, 242, 242, 1);
|
border: 3px solid transparent;
|
border-radius: 50%;
|
cursor: pointer;
|
img {
|
height: 46px;
|
width: 46px;
|
}
|
}
|
.upload-jpg-mask {
|
border: 3px solid blue;
|
}
|
.upload-jpg-up {
|
height: 52px;
|
width: 52px;
|
float: left;
|
display: flex;
|
background-color: rgba(242, 242, 242, 1);
|
margin: 0 10px;
|
margin-bottom: 20px;
|
border-radius: 25px;
|
justify-content: center;
|
align-items: center;
|
font-size: 12px;
|
cursor: pointer;
|
}
|
.loaded-Pic {
|
}
|
}
|
.fill-group {
|
.p-title {
|
text-align: left;
|
}
|
}
|
}
|
}
|
.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;
|
}
|
}
|
.ntp-bar {
|
height: 40px;
|
background-color: rgba(248, 248, 248, 1);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 10px;
|
border-radius: 10px;
|
margin-bottom: 10px;
|
.title {
|
min-width: 70px;
|
}
|
.input-area {
|
width: 450px;
|
height: 30px;
|
background-color: rgba(240, 240, 240, 1);
|
border-radius: 10px;
|
line-height: 30px;
|
font-size: 14px;
|
}
|
}
|
.int-bar {
|
height: 40px;
|
background-color: rgba(248, 248, 248, 1);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 10px;
|
border-radius: 10px;
|
margin-bottom: 10px;
|
.title {
|
min-width: 130px;
|
}
|
.right {
|
width: 450px;
|
display: flex;
|
align-items: center;
|
height: 30px;
|
|
.input-area {
|
// width: 410px;
|
background-color: rgba(240, 240, 240, 1);
|
border-radius: 10px;
|
line-height: 30px;
|
width: -webkit-fill-available;
|
|
font-size: 14px;
|
}
|
.test {
|
width: 40px;
|
}
|
}
|
}
|
}
|
.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>
|
