From 3740ee45d8d314cb9157a03729777f837f8899b5 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期三, 07 七月 2021 17:53:21 +0800
Subject: [PATCH] merge master
---
src/pages/settings/index/App.vue | 1914 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 1,792 insertions(+), 122 deletions(-)
diff --git a/src/pages/settings/index/App.vue b/src/pages/settings/index/App.vue
index 8a8d3e9..ef71b7c 100644
--- a/src/pages/settings/index/App.vue
+++ b/src/pages/settings/index/App.vue
@@ -1,161 +1,1831 @@
<template>
- <div class="s-system-manage">
- <basic-setting v-show="activeName === 'basic'"></basic-setting>
+ <div class="container" v-if="!showWelcome">
+ <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)"
+ >
+ <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="`data:image/png;base64,${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="`data:image/png;base64,${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="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>
+ <!-- <el-upload
+ class="upload-demo"
+ action="https://jsonplaceholder.typicode.com/posts/"
+ :show-file-list="false"
+ :http-request="uploadUserPic"
+ >
+ <div v-if="loadedPic == ''" 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="roleId">
+ <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="閫夊～"
+ 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="cancelPassword">鍙栨秷</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>
+ <div class="welcome-page" v-else>
+ <div class="child" @click="openWelcome('璐︽埛',0)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">璐︽埛</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('鏃ユ湡鏃堕棿',1)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">鏃ユ湡鏃堕棿</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('闆嗙兢绠＄悊',2)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">闆嗙兢绠＄悊</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('缃戠粶璁剧疆',3)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">缃戠粶璁剧疆</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('閿洏鍜岃瑷�',4)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">閿洏鍜岃瑷�</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('閫氱敤璁剧疆',5)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">閫氱敤璁剧疆</span>
+ </div>
+ </div>
</div>
</template>
<script>
-import BasicSetting from "../components/BasicSetting";
-
+import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system";
+import {
+ uploadHeadPic,
+ 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 keyboardLanguage from "../views/keyboardLanguage";
+import generalSettings from "../views/generalSettings";
export default {
- name: 'settings',
+ name: "settings",
components: {
- BasicSetting
+ switchBar,
+ ipInput,
+ clusterManagement,
+ netSettings,
+ keyboardLanguage,
+ generalSettings,
},
data() {
- return {
- activeName: "basic",
- buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
- loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "鐢ㄦ埛鍚�"
- }
- },
- computed: {
- isAdmin() {
- if (
- sessionStorage.getItem("userInfo") &&
- sessionStorage.getItem("userInfo") !== ""
- ) {
- let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
- return loginName === "superadmin" || loginName === "basic";
+ var validatePass2 = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
+ } else if (value !== this.addForm.password) {
+ callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
+ } else {
+ callback();
}
- return false;
- }
+ };
+ 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: "",
+ showWelcome: true,
+ 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,
+ loadedPic: "",
+ cameraInfo: false,
+ dependentScene: false,
+ timestamp: 0,
+ inAccountDetail: false,
+ isChangePw: false,
+ isSetPermission: false,
+ timeInterval: 10,
+ ntpServer: "",
+ syncType: "1",
+ equipmentTime: "",
+ equipmentDate: "",
+ roleList: [],
+ 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: "",
+ roleId: "",
+ },
+ 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: {
- isShow(authority) {
- if (this.isAdmin) {
- return true;
- } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
- return true;
- } else {
- return false;
+ 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[0];
+ this.activeAccountIndex = 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;
+ this.cancelSet();
+ 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 = 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 = item.selected;
+ });
+ },
+ childrenChange(item) {
+ let isAllSelected = item.children.every((x) => x.selected == true);
+ item.selected = isAllSelected;
+ },
+ 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) => {
+ if (res.success) {
+ 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]);
+ }
+ 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) => {
+ // this.jpgArr.push(res.data);
+ // this.loadedPic = 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(name, i) {
+ this.activePage = name;
+ this.activeIndex = i;
+ if (this.activePage == "鏃ユ湡鏃堕棿") {
+ this.initClockConf();
+ }
+ },
+ openWelcome(name,i){
+ this.showWelcome = false
+ this.openMenu(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}`] = this.padZero(this[`input${typ}`]);
+ }
+ this[`show${typ}Input`] = false;
+ this[`input${typ}`] = "";
+ },
+ syncBrowser(enable) {
+ this.isSyncBrowser = enable;
+ 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;
+ 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();
+ },
+ SaveNewPassword(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ updatePassword({
+ oldPwd: this.passwordForm.curPassword,
+ newPwd: this.passwordForm.newPassword,
+ }).then(
+ (res) => {
+ if (res.success) {
+ this.$message.success(res.msg);
+ this.cancelPassword();
+ }
+ },
+ (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(item, i) {
+ 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, "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;
+ 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();
+ },
},
- created() {
- if (this.isShow('videoSystem:base')) {
- this.activeName = "basic"
- } else if (this.isShow('videoSystem:permission')) {
- this.activeName = "user"
- } else if (this.isShow('videoSystem:broadcast')) {
- this.activeName = "radio"
- } else if (this.isShow('videoSystem:eventPush')) {
- this.activeName = "event"
- } else if (this.isShow('videoSystem:logManage')) {
- this.activeName = "log"
- } else if (this.isShow('videoSystem:sysManage')) {
- this.activeName = "system"
- }
+ computed: {
+ isShowAddAccount() {
+ const info = JSON.parse(sessionStorage.getItem("userInfo"));
+ return true;
+ },
},
};
</script>
<style lang="scss">
-.s-system-manage {
- width: 100% !important;
- min-width: 1067px;
+.welcome-page {
+ width: 100%;
height: 100%;
+ background-color: #f5f5f5;
+ display: -ms-flexbox;
+ padding: 0 50px;
+ -webkit-box-sizing: border-box;
box-sizing: border-box;
- padding: 10px;
- background-color: #f8f9fb;
- .s-system-manage-breadcrumb {
- height: 5%;
+ .child {
box-sizing: border-box;
- border: 1px solid #e4e7ed;
- box-shadow: #e4e7ed 0px 0px 9px inset;
- box-shadow: #e4e7ed 0px 0px 9px inset;
- border-radius: 5px;
- }
-
- .el-tabs--border-card {
- border: 0px solid #dcdfe6;
- -webkit-box-shadow: none;
- box-shadow: none;
- .el-tabs__header {
- border: 0px solid #dcdfe6;
- .el-tabs__item {
- padding: 5px 50px;
- height: 50px;
- font-family: PingFangSC-Regular;
- font-size: 15px;
- color: #222222;
- text-align: center;
- border: 0px solid transparent;
+ background-color: white;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 33.3%;
+ /* flex: 0 0 16%; */
+ float: left;
+ width: 250px;
+ height: 200px;
+ margin: 50px 57px 30px 57px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ .child-info {
+ display: flex;
+ flex-direction: column;
+ height: 62%;
+ justify-content: space-around;
+ .welcome-icon {
+ font-size: 72px;
}
- .el-tabs__item:nth-child(2) {
- padding-left: 50px !important;
- }
- .el-tabs__item:last-child {
- padding-right: 50px !important;
- }
- .el-tabs__item.is-active {
- color: #3d68e1;
-
- // border-right-color: #fff;
- // border-left-color: #fff;
- }
- .el-tabs__item:not(.is-disabled):hover {
- color: #3d68e1;
+ .welcome-title {
+ font-size: 18px;
}
}
}
- .el-tabs__header {
- margin-bottom: 0;
- }
- .el-tabs__content {
- height: calc(100% - 64px);
+ .child:hover {
+ -moz-box-shadow: 5px 5px 10px #ddd;
+ -webkit-box-shadow: 5px 5px 10px #ddd;
+ box-shadow: 5px 5px 10px #ddd;
+ transform: translate3d(0,-2.5px,0);
+ transition: all 0.3s;
+}
+}
+.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;
- overflow-y: auto;
- padding: 20px 40px !important;
- background: #fff;
- .el-tab-pane {
- width: 100%;
- .s-title {
- text-align: left;
- padding: 15px 0px;
+ 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: 30px;
+ .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;
- .s-table {
- border: 1px solid #e8e8e9;
- margin-top: 40px;
+ 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;
+ }
+ }
+ }
}
-
- .ui-top-title {
- padding-bottom: 10px;
- /* border-bottom: 1px solid #ebebeb; */
+ .container-right {
+ flex: 1;
+ flex-basis: auto;
+ overflow: auto;
+ box-sizing: border-box;
position: relative;
- text-align: left;
- padding-left: 15px;
- font-size: 16px;
- font-weight: bold;
- }
- .ui-top-title:before {
- content: " ";
- border-left: 4px solid #f53d3d;
- display: inline-block;
- height: 16px;
- position: absolute;
- top: 50%;
- left: 0;
- margin-top: -13px;
- }
+ 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;
- .el-button--text {
- color: #3d68e1;
- text-decoration: underline;
+ 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;
+ color: darkseagreen;
+ }
+ }
+ }
+ .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: 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;
+ }
+ .upload-jpg-up {
+ height: 48px;
+ width: 48px;
+ float: left;
+ display: flex;
+ background-color: rgba(242, 242, 242, 1);
+ border: 2px solid transparent;
+ border-radius: 50%;
+
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+ cursor: pointer;
+ }
+ }
+ .fill-group {
+ .p-title {
+ height: 34px;
+ text-align: left;
+ }
+ .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;
+ }
+ }
+ .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>
+
+
--
Gitblit v1.8.0