From fed1301812fab576517b582fa01dfe51bb429f8c Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 四月 2021 17:58:20 +0800
Subject: [PATCH] 设备管理和新设置中心
---
vue.config.js | 4
src/pages/desktop/index/components/ToolsEntry.vue | 11
src/pages/desktop/index/App.vue | 2
src/pages/deviceCenter/index/main.ts | 30
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 10
src/pages/systemSettings/index/App.vue | 1286 ++++++++++++
src/pages/systemSettings/views/generalSettings.vue | 311 ++
public/apps.json | 46
src/pages/systemSettings/components/switchBar.vue | 42
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 318 +-
src/pages/ai/index/App.vue | 876 ++++----
src/pages/settings/components/ClusterManagement.vue | 78
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 4
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 71
src/pages/settings/components/BasicSetting.vue | 39
src/pages/systemSettings/views/keyboardLanguage.vue | 240 ++
src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue | 1
src/components/subComponents/LocalVedioList.vue | 6
src/pages/systemSettings/index/main.ts | 12
src/pages/deviceCenter/index/mixins.ts | 25
src/pages/systemSettings/components/CloudNode.vue | 149 +
src/pages/deviceCenter/index/App.vue | 1368 +++++++++++++
src/pages/systemSettings/views/NetSettings.vue | 570 +++++
src/pages/systemSettings/views/clusterManagement.vue | 714 ++++++
24 files changed, 5,571 insertions(+), 642 deletions(-)
diff --git a/public/apps.json b/public/apps.json
index a77785f..a8d2ce6 100644
--- a/public/apps.json
+++ b/public/apps.json
@@ -186,6 +186,29 @@
"progressMsg": ""
},
{
+ "id": "5a5e0610-0a62-4de3-8021-2c6652c29ebe",
+ "name": "绯荤粺璁剧疆(鏂扮増)",
+ "package": "systemSettings",
+ "type": "2",
+ "url": "/view/systemSettings/",
+ "title": "绯荤粺璁剧疆(鏂扮増)",
+ "width": 1200,
+ "height": 650,
+ "iconBlob": "",
+ "icon": "../../images/app-mid/settings.png",
+ "version": "1.0.0",
+ "create_time": "2020-10-09 14:00:10",
+ "create_by": "",
+ "update_time": "",
+ "update_by": "",
+ "isDelete": 0,
+ "isDefault": true,
+ "remoteVersion": "",
+ "installed": true,
+ "isUpgrade": false,
+ "progressMsg": ""
+ },
+ {
"id": "ee64fe23-7631-4ef9-9aca-ea09673693be",
"name": "绯荤粺缁存姢",
"package": "vindicate",
@@ -414,6 +437,29 @@
"installed": true,
"isUpgrade": false,
"progressMsg": ""
+ },
+ {
+ "id": "af412cbe-472e-4dbc-b962-b290483c9ea1",
+ "name": "璁惧涓績",
+ "package": "deviceCenter",
+ "type": "2",
+ "url": "/view/deviceCenter/",
+ "title": "璁惧涓績",
+ "width": 1200,
+ "height": 670,
+ "iconBlob": "",
+ "icon": "../../images/app-mid/datastack-config.png",
+ "version": "1.0.1",
+ "create_time": "2021-04-01 21:47:38",
+ "create_by": "basic",
+ "update_time": "",
+ "update_by": "",
+ "isDelete": 0,
+ "isDefault": false,
+ "remoteVersion": "",
+ "installed": true,
+ "isUpgrade": false,
+ "progressMsg": ""
}
],
"msg": "璇锋眰澶勭悊鎴愬姛",
diff --git a/src/components/subComponents/LocalVedioList.vue b/src/components/subComponents/LocalVedioList.vue
index 5c80dc1..1762b8e 100644
--- a/src/components/subComponents/LocalVedioList.vue
+++ b/src/components/subComponents/LocalVedioList.vue
@@ -17,7 +17,9 @@
<span class="iconfont iconshipinwenjianjia1 folder" v-else-if="item.type === 3"></span>
<span class="iconfont iconwenjian folder" v-else></span>
+ <!-- <el-tooltip class="item" effect="dark" :content="item.name" placement="top" :enterable="false" transition="all 0 ease 0" > -->
<span class="folder-name">{{item.name}}</span>
+ <!-- </el-tooltip> -->
<!-- 绠楁硶閰嶇疆涓嶅叏 -->
<i class="iconfont iconicon-test6 folder-status" v-if="item.status === 0"></i>
@@ -94,6 +96,10 @@
margin-left: 5px;
float: left;
line-height: 27px;
+ max-width: 134px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.folder-status {
color: #3d68e1;
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 679fc32..87b1598 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -49,7 +49,7 @@
v-if="!item.isDefault || item.isUpgrade"
>
<div class="left-top">
- <div>褰撳墠鐗堟湰:{{ item.version }}</div>
+ <div>褰撳墠鐗堟湰1:{{ item.version }}</div>
<div v-if="item.remoteVersion">
鏈�鏂扮増鏈�:{{ item.remoteVersion }}
</div>
@@ -70,11 +70,11 @@
>
<el-button
v-if="item.isUpgrade"
- @click="donwload(item,0)"
+ @click="donwload(item, 0)"
type="warning"
size="small"
class="bot-btn"
- >鍗囩骇</el-button
+ >鍗囩骇1</el-button
>
</div>
</div>
@@ -119,28 +119,28 @@
v-loading="downloading && downloadItem == item.id"
>
<div class="mask">
- <div class="left-top">
- <div v-if="item.installed">褰撳墠鐗堟湰:{{ item.version }}</div>
- <div v-if="item.remoteVersion">
- 鏈�鏂扮増鏈�:{{ item.remoteVersion }}
- </div>
- </div>
- <div
- class="info-onmask"
- @click="checkDetail(item, 'activeNotInstall')"
- >
- 鏌ョ湅璇︽儏
- </div>
- <div class="mask-btn">
- <el-button
- @click="donwload(item,1)"
- type="primary"
- class="bot-btn"
- >瀹夎</el-button
- >
-
- </div>
-
+ <div class="left-top">
+ <div v-if="item.installed">
+ 褰撳墠鐗堟湰:{{ item.version }}
+ </div>
+ <div v-if="item.remoteVersion">
+ 鏈�鏂扮増鏈�:{{ item.remoteVersion }}
+ </div>
+ </div>
+ <div
+ class="info-onmask"
+ @click="checkDetail(item, 'activeNotInstall')"
+ >
+ 鏌ョ湅璇︽儏
+ </div>
+ <div class="mask-btn">
+ <el-button
+ @click="donwload(item, 1)"
+ type="primary"
+ class="bot-btn"
+ >瀹夎</el-button
+ >
+ </div>
</div>
<div class="click-download" title="涓嬭浇">
<span class="iconfont iconxiazai1"></span>
@@ -206,10 +206,10 @@
鏈�鏂扮増鏈�:{{ item.remoteVersion }}
</div>
</div>
- <!-- v-if="!item.isDefault" -->
+ <!-- v-if="!item.isDefault" -->
<div
class="info-onmask"
- @click="checkDetail(item,'active')"
+ @click="checkDetail(item, 'active')"
>
鏌ョ湅璇︽儏
</div>
@@ -276,7 +276,6 @@
element-loading-background="rgba(0,0,0,.8)"
>
<div class="mask">
-
<el-button
size="small"
type="primary"
@@ -388,7 +387,6 @@
class="bot-btn"
>婵�娲�</el-button
>
-
</div>
</div>
<img
@@ -424,7 +422,7 @@
</div>
<p class="src-title">搴旂敤杞欢</p>
<div class="app-list flex-list">
- <div v-if="!unActivedAppList.length" class="empty-tip">
+ <div v-if="!unActivedAppList.length" class="empty-tip">
鏆傛棤鏁版嵁
</div>
<div
@@ -450,7 +448,7 @@
"
></span>
</div> -->
- <div
+ <div
class="mask"
v-if="!item.isDefault || item.isUpgrade"
>
@@ -462,19 +460,18 @@
</div>
<div
class="info-onmask"
- @click="actSdkOrApp(item,'app')"
+ @click="actSdkOrApp(item, 'app')"
>
鏌ョ湅璇︽儏
</div>
<div class="mask-btn">
<el-button
- @click="actSdkOrApp(item,'app')"
+ @click="actSdkOrApp(item, 'app')"
type="primary"
size="small"
class="bot-btn"
>婵�娲�</el-button
>
-
</div>
</div>
<img
@@ -508,11 +505,13 @@
</div>
</div>
<!-- -->
-
</el-tab-pane>
<el-tab-pane name="update">
<span slot="label">
- <el-badge class="update-badge" :value="updateNum" :hidden="updateNum==0"
+ <el-badge
+ class="update-badge"
+ :value="updateNum"
+ :hidden="updateNum == 0"
>鏇存柊</el-badge
>
</span>
@@ -527,8 +526,8 @@
>
</div>
<div class="flex-list">
- <div v-if="hasNewVersionSdk.length==0" class="empty-tip">
- {{errMsg?errMsg:"鏆傛棤鏁版嵁"}}
+ <div v-if="hasNewVersionSdk.length == 0" class="empty-tip">
+ {{ errMsg ? errMsg : "鏆傛棤鏁版嵁" }}
</div>
<div
class="wrap-box"
@@ -560,7 +559,7 @@
</div>
<div
class="info-onmask"
- @click="checkDetail(item,'active')"
+ @click="checkDetail(item, 'active')"
>
鏌ョ湅璇︽儏
</div>
@@ -574,7 +573,7 @@
>
<el-button
v-if="item.isUpgrade"
- @click="donwload(item,0)"
+ @click="donwload(item, 0)"
type="warning"
size="small"
class="bot-btn"
@@ -647,7 +646,7 @@
</div>
<div
class="info-onmask"
- @click="checkDetail(item,'active')"
+ @click="checkDetail(item, 'active')"
>
鏌ョ湅璇︽儏
</div>
@@ -758,16 +757,21 @@
:visible="productDetailVisible"
@close="closeDial"
>
- <!-- <el-button-group> -->
- <div class="button-group" v-show="!backDisable||!forwardDisable">
- <el-button size="small" @click="backwards" :disabled="backDisable"> <span><</span> </el-button>
- <!-- <el-button type="primary" size="small" icon="el-icon-arrow-left"></el-button> -->
- <el-button size="small" @click="forwards" :disabled="forwardDisable">></el-button>
- <!-- <el-button type="primary" size="small"><i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
-
+ <!-- <el-button-group> -->
+ <div class="button-group" v-show="!backDisable || !forwardDisable">
+ <el-button size="small" @click="backwards" :disabled="backDisable">
+ <span><</span>
+ </el-button>
+ <!-- <el-button type="primary" size="small" icon="el-icon-arrow-left"></el-button> -->
+ <el-button size="small" @click="forwards" :disabled="forwardDisable"
+ >></el-button
+ >
+ <!-- <el-button type="primary" size="small"><i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
</div>
-<!-- </el-button-group> -->
- <div class="dialog-title" slot="title">{{isSDKDialog?"绠楁硶璇︽儏":"搴旂敤璇︽儏"}}</div>
+ <!-- </el-button-group> -->
+ <div class="dialog-title" slot="title">
+ {{ isSDKDialog ? "绠楁硶璇︽儏" : "搴旂敤璇︽儏" }}
+ </div>
<div class="dialog-content">
<div class="box-top">
<div class="top-left">
@@ -823,39 +827,85 @@
/>
</div>
<div class="right-desc">
-
- <div class="name"><el-tooltip class="" effect="dark" :content="productDetail.productName " placement="right-start">
- <span>{{ productDetail.productName }}</span>
- </el-tooltip></div>
+ <div class="name">
+ <el-tooltip
+ class=""
+ effect="dark"
+ :content="productDetail.productName"
+ placement="right-start"
+ >
+ <span>{{ productDetail.productName }}</span>
+ </el-tooltip>
+ </div>
<div class="tags">
- <el-tag type="info" size="small" color="#fff" v-if="!isSDKDialog">搴旂敤</el-tag>
- <el-tag type="info" size="small" color="#fff" v-if="isSDKDialog">绠楁硶</el-tag>
+ <el-tag
+ type="info"
+ size="small"
+ color="#fff"
+ v-if="!isSDKDialog"
+ >搴旂敤</el-tag
+ >
+ <el-tag
+ type="info"
+ size="small"
+ color="#fff"
+ v-if="isSDKDialog"
+ >绠楁硶</el-tag
+ >
</div>
<div class="btns">
- <el-button size="small" type="warning" v-if="needToUpgradeInWin||productDetail.isUpgrade" @click="upgradeSDKinWin" >{{
- isUpgrading ? "鍗囩骇涓�.." : "鍗囩骇"
- }}</el-button>
- <el-button size="small" type="primary" v-if="isActive&&!isDefaultApp" @click="unloadSDKinWin">鍗歌浇</el-button>
- <el-button size="small" type="primary" v-if="!isActive&&!showInstallNotActive" @click="showInputCode=!showInputCode">婵�娲�</el-button>
- <el-button size="small" type="primary" v-if="!isActive&&showInstallNotActive" @click="downloadSdkInSide">{{isUpgrading?"瀹夎涓�..":"瀹夎"}}</el-button>
- <el-button size="small" type="success" v-if="!isSDKDialog&&isActive" @click="openApp">鎵撳紑</el-button>
+ <el-button
+ size="small"
+ type="warning"
+ v-if="needToUpgradeInWin || productDetail.isUpgrade"
+ @click="upgradeSDKinWin"
+ >{{ isUpgrading ? "鍗囩骇涓�.." : "鍗囩骇" }}</el-button
+ >
+ <el-button
+ size="small"
+ type="primary"
+ v-if="isActive && !isDefaultApp"
+ @click="unloadSDKinWin"
+ >鍗歌浇</el-button
+ >
+ <el-button
+ size="small"
+ type="primary"
+ v-if="!isActive && !showInstallNotActive"
+ @click="showInputCode = !showInputCode"
+ >婵�娲�</el-button
+ >
+ <el-button
+ size="small"
+ type="primary"
+ v-if="!isActive && showInstallNotActive"
+ @click="downloadSdkInSide"
+ >{{ isUpgrading ? "瀹夎涓�.." : "瀹夎" }}</el-button
+ >
+ <el-button
+ size="small"
+ type="success"
+ v-if="!isSDKDialog && isActive"
+ @click="openApp"
+ >鎵撳紑</el-button
+ >
</div>
-
</div>
</div>
<div class="jihuo-input" v-if="showInputCode">
- <el-input size="small"
- v-model="activeCode"
- placeholder="00000-00000-00000-00000-00000"
- @blur="getCodeDetail"
- ></el-input>
- <el-button type="primary" size="small" @click="actived"
- >婵�娲�</el-button
- >
- <el-button type="primary" size="small" @click="cancelActivate"
- >鍙栨秷</el-button
- >
- </div>
+ <el-input
+ size="small"
+ v-model="activeCode"
+ placeholder="00000-00000-00000-00000-00000"
+ @blur="getCodeDetail"
+ ></el-input>
+ <el-button type="primary" size="small" @click="actived"
+ >婵�娲�</el-button
+ >
+ <el-button type="primary" size="small" @click="cancelActivate"
+ >鍙栨秷</el-button
+ >
+ </div>
<div class="product-intruduction">
<div class="part-title" v-if="!showInputCode">绠�浠�</div>
<div class="text">
@@ -895,7 +945,9 @@
</div>
<div class="box-bottom">
<div class="bot-left">
- <div class="part-title">{{isSDKDialog?"搴旂敤鍦烘櫙":"鍔熻兘鐗圭偣"}}</div>
+ <div class="part-title">
+ {{ isSDKDialog ? "搴旂敤鍦烘櫙" : "鍔熻兘鐗圭偣" }}
+ </div>
<div class="list-zone">
<div
class="list-item"
@@ -906,11 +958,7 @@
{{ item.title === "" ? "鏆傛棤鏁版嵁" : item.title }}
</el-tag>
<div class="desc">
- {{
- item.desc === ""
- ? "鏆傛棤鏁版嵁"
- : item.desc
- }}
+ {{ item.desc === "" ? "鏆傛棤鏁版嵁" : item.desc }}
</div>
</div>
</div>
@@ -940,15 +988,26 @@
alt
/>
- <div class="icon-name">
- <el-tooltip class="" effect="dark" :content="item.name === '' ? '鏆傛棤鏁版嵁':item.name" placement="top-start">
- <span>{{ item.name === "" ? "鏆傛棤鏁版嵁" : item.name }}</span>
- </el-tooltip>
+ <div class="icon-name">
+ <el-tooltip
+ class=""
+ effect="dark"
+ :content="item.name === '' ? '鏆傛棤鏁版嵁' : item.name"
+ placement="top-start"
+ >
+ <span>{{
+ item.name === "" ? "鏆傛棤鏁版嵁" : item.name
+ }}</span>
+ </el-tooltip>
</div>
-
</div>
<div class="look-button">
- <el-button type="primary" size="mini" @click="checkInWindow(item)">鏌ョ湅</el-button>
+ <el-button
+ type="primary"
+ size="mini"
+ @click="checkInWindow(item)"
+ >鏌ョ湅</el-button
+ >
</div>
</div>
</div>
@@ -956,12 +1015,12 @@
</div>
</div>
</el-dialog>
- <el-dialog
- :visible.sync="showActivateSuccess"
- title="婵�娲绘垚鍔燂紒"
- width="30%"
- class="active-Dial"
- :before-close="handleClose"
+ <el-dialog
+ :visible.sync="showActivateSuccess"
+ title="婵�娲绘垚鍔燂紒"
+ width="30%"
+ class="active-Dial"
+ :before-close="handleClose"
>
<div class="dialog-active">
<ul class="desc">
@@ -987,9 +1046,7 @@
</li>
</ul>
<div class="text-right">
- <el-button type="primary" @click="checkMyAlgorith"
- >纭畾</el-button
- >
+ <el-button type="primary" @click="checkMyAlgorith">纭畾</el-button>
<p class="tip">鎻愮ず锛氳鍦ㄢ�滃凡婵�娲烩�濅腑鏌ョ湅骞跺畨瑁呯畻娉�</p>
</div>
</div>
@@ -1015,7 +1072,7 @@
actApp,
} from "@/api/app";
-import bus from '@/plugin/bus'
+import bus from "@/plugin/bus";
import FileUploader from "@/components/subComponents/FileUpload/index";
export default {
name: "algorithmManage",
@@ -1073,19 +1130,19 @@
downloading: false,
direction: "rtl",
actStep: 0,
- showActivateSuccess:false,
+ showActivateSuccess: false,
activeCode: "",
isInstall: false,
installDialogVisible: false,
installPackage: {},
installAppPackage: null,
installSdkPackage: null,
- isActive:true,
- isDefaultApp:false,
+ isActive: true,
+ isDefaultApp: false,
installPercentage: 0,
unActivedSDKList: [],
unActivedAppList: [],
- isSDKDialog:true,
+ isSDKDialog: true,
//actSdkId: '',
actType: "",
actId: "",
@@ -1113,12 +1170,12 @@
otherProducts: [],
backStack: [],
forwardStack: [],
- backDisable:true,
- forwardDisable:true,
- showInputCode:false,
- needToUpgradeInWin:false,
- errMsg:"",
- showInstallNotActive:false
+ backDisable: true,
+ forwardDisable: true,
+ showInputCode: false,
+ needToUpgradeInWin: false,
+ errMsg: "",
+ showInstallNotActive: false,
};
},
directives: {
@@ -1135,7 +1192,6 @@
this.getUnActivedList();
this.getUnActivedAppList();
-
},
beforeDestroy() {
this.autoRefresh = false;
@@ -1149,7 +1205,7 @@
batchUpdate(type) {
if (type == "sdk") {
this.hasNewVersionSdk.forEach((sdk) => {
- this.donwload(sdk,0);
+ this.donwload(sdk, 0);
});
} else {
this.hasNewVersionApp.forEach((app) => {
@@ -1157,115 +1213,114 @@
});
}
},
- closeDial(){
- this.productDetailVisible = false
- this.productDetail = {}
- this.otherProducts = []
+ closeDial() {
+ this.productDetailVisible = false;
+ this.productDetail = {};
+ this.otherProducts = [];
},
- checkDetail(item,type) {
- if (type =='inactive') {
- this.isActive =false
- this.showInstallNotActive = false
- this.showInputCode = false
- }else if (type =='active'){
- this.showInputCode = false
- this.showInstallNotActive = false
- this.isActive =true
- }else if (type =='activeNotInstall'){
- this.showInputCode = false
- this.isActive =false
- this.showInstallNotActive = true
+ checkDetail(item, type) {
+ if (type == "inactive") {
+ this.isActive = false;
+ this.showInstallNotActive = false;
+ this.showInputCode = false;
+ } else if (type == "active") {
+ this.showInputCode = false;
+ this.showInstallNotActive = false;
+ this.isActive = true;
+ } else if (type == "activeNotInstall") {
+ this.showInputCode = false;
+ this.isActive = false;
+ this.showInstallNotActive = true;
}
- this.checkIsDefOrNot(item.id)
- this.needToUpgradeInWin = item.isUpgrade?true:false
- this.resetStack()
- if (item.sdk_type===undefined) {
- this.isSDKDialog=false
- }else{
- this.isSDKDialog=true
+ this.checkIsDefOrNot(item.id);
+ this.needToUpgradeInWin = item.isUpgrade ? true : false;
+ this.resetStack();
+ if (item.sdk_type === undefined) {
+ this.isSDKDialog = false;
+ } else {
+ this.isSDKDialog = true;
}
this.productDetailVisible = true;
let _this = this;
getAppDetail({ id: item.id }).then((res) => {
_this.productDetail = res.data.detail;
- _this.productDetail.isUpgrade = item.isUpgrade
- _this.productDetail.iconBlob = item.iconBlob
+ _this.productDetail.isUpgrade = item.isUpgrade;
+ _this.productDetail.iconBlob = item.iconBlob;
_this.otherProducts = res.data.randoms;
-
});
},
- resetStack(){
- this.forwardStack = []
- this.backStack = []
- this.backDisable = true
- this.forwardDisable = true
-
+ resetStack() {
+ this.forwardStack = [];
+ this.backStack = [];
+ this.backDisable = true;
+ this.forwardDisable = true;
},
- checkInWindow(item){
- this.backStack.push([this.productDetail, this.otherProducts])
- this.backDisable = false
- this.checkIsDefOrNot(item.id)
+ checkInWindow(item) {
+ this.backStack.push([this.productDetail, this.otherProducts]);
+ this.backDisable = false;
+ this.checkIsDefOrNot(item.id);
let _this = this;
getAppDetail({ id: item.id }).then((res) => {
_this.productDetail = res.data.detail;
- _this.productDetail.iconBlob = item.iconBlob
- this.actId = _this.productDetail.productBaseId
- let flag=false
- const allNeedToNew = [...this.hasNewVersionSdk,...this.hasNewVersionApp]
+ _this.productDetail.iconBlob = item.iconBlob;
+ this.actId = _this.productDetail.productBaseId;
+ let flag = false;
+ const allNeedToNew = [
+ ...this.hasNewVersionSdk,
+ ...this.hasNewVersionApp,
+ ];
for (let i = 0; i < allNeedToNew.length; i++) {
const item = allNeedToNew[i];
if (item.id == _this.productDetail.productBaseId) {
- flag=true
+ flag = true;
}
}
- this.needToUpgradeInWin = flag
- _this.productDetail.isUpgrade = flag
+ this.needToUpgradeInWin = flag;
+ _this.productDetail.isUpgrade = flag;
_this.otherProducts = res.data.randoms;
});
},
- checkIsDefOrNot(id){
- if (id.length>10) {
- this.isDefaultApp=false
- }else {
- this.isDefaultApp=true
+ checkIsDefOrNot(id) {
+ if (id.length > 10) {
+ this.isDefaultApp = false;
+ } else {
+ this.isDefaultApp = true;
}
},
- backwards(){
- if (this.backStack.length ==0) {
- this.backDisable = true
- return
+ backwards() {
+ if (this.backStack.length == 0) {
+ this.backDisable = true;
+ return;
}
- this.forwardStack.push([this.productDetail,this.otherProducts])
- let item = this.backStack.pop()
- this.productDetail = item[0]
- this.checkIsDefOrNot(this.productDetail.productBaseId)
- this.otherProducts = item[1]
- this.forwardDisable=false
- if (this.backStack.length ==0) {
- this.backDisable = true
-
+ this.forwardStack.push([this.productDetail, this.otherProducts]);
+ let item = this.backStack.pop();
+ this.productDetail = item[0];
+ this.checkIsDefOrNot(this.productDetail.productBaseId);
+ this.otherProducts = item[1];
+ this.forwardDisable = false;
+ if (this.backStack.length == 0) {
+ this.backDisable = true;
}
},
- forwards(){
- if(this.forwardStack.length==0){
- this.forwardDisable=true
- return
+ forwards() {
+ if (this.forwardStack.length == 0) {
+ this.forwardDisable = true;
+ return;
}
- this.backStack.push([this.productDetail,this.otherProducts])
- this.backDisable=false
- let item = this.forwardStack.pop()
+ this.backStack.push([this.productDetail, this.otherProducts]);
+ this.backDisable = false;
+ let item = this.forwardStack.pop();
- this.productDetail = item[0]
- this.otherProducts = item[1]
- if (this.forwardStack.length==0) {
- this.forwardDisable=true
+ this.productDetail = item[0];
+ this.otherProducts = item[1];
+ if (this.forwardStack.length == 0) {
+ this.forwardDisable = true;
}
-
},
//绂荤嚎瀹夎
offlineInstall() {
@@ -1313,10 +1368,10 @@
.then((res) => {
if (res && res.success) {
_this.$notify({
- title: "鎴愬姛",
- message: "瀹夎搴旂敤鎴愬姛",
- type: "success",
- });
+ title: "鎴愬姛",
+ message: "瀹夎搴旂敤鎴愬姛",
+ type: "success",
+ });
setTimeout(() => {
if (action == "upgrade") {
app.upgradeLoading = false;
@@ -1331,16 +1386,15 @@
"*"
);
}, 3000);
- }else {
-
+ } else {
}
})
.catch((e) => {
- _this.$notify({
- title: "瀹夎澶辫触",
- message: e.data,
- type: "warning",
- });
+ _this.$notify({
+ title: "瀹夎澶辫触",
+ message: e.data,
+ type: "warning",
+ });
if (action == "upgrade") {
app.upgradeLoading = false;
} else {
@@ -1384,7 +1438,7 @@
let _this = this;
this.$confirm("纭畾瑕佸嵏杞借搴旂敤鍚�?", "鎻愮ず")
.then(() => {
- _this.productDetailVisible = false
+ _this.productDetailVisible = false;
app.unloadLoading = true;
removeApp({ appId: app.id })
@@ -1416,7 +1470,7 @@
},
actSdkOrApp(item, type = "sdk") {
- this.checkDetail(item, 'inactive')
+ this.checkDetail(item, "inactive");
this.actType = type;
this.actId = item.id;
this.actStep = 0;
@@ -1424,9 +1478,9 @@
this.activedSdkOrApp = this.newActInfo();
},
- cancelActivate(){
- this.showInputCode= false
- this.activeCode = ""
+ cancelActivate() {
+ this.showInputCode = false;
+ this.activeCode = "";
},
newActInfo() {
return {
@@ -1454,21 +1508,21 @@
},
actived() {
let _this = this;
- if (this.activeCode.trim()=="") {
+ if (this.activeCode.trim() == "") {
this.$notify({
type: "error",
message: "婵�娲荤爜涓嶈兘涓虹┖",
});
- return
+ return;
}
if (this.actType == "sdk") {
//婵�娲荤畻娉�
actPageAlg(this.actId, this.activeCode)
.then((res) => {
if (res.data.isSuccess) {
- this.productDetailVisible = false
+ this.productDetailVisible = false;
_this.activedSdkOrApp = res.data.successMsg;
- this.showActivateSuccess=true
+ this.showActivateSuccess = true;
_this.actStep++;
_this.getUnActivedList();
_this.getAllSdk();
@@ -1487,9 +1541,9 @@
actApp(this.actId, this.activeCode)
.then((res) => {
if (res.data.isSuccess) {
- this.productDetailVisible = false
+ this.productDetailVisible = false;
_this.activedSdkOrApp = res.data.successMsg;
- this.showActivateSuccess=true
+ this.showActivateSuccess = true;
_this.actStep++;
_this.getUnActivedAppList();
_this.getAllApps();
@@ -1547,11 +1601,14 @@
});
});
},
- openApp(){
- let message = 'toOpenApp?' + this.productDetail.productBaseId;
- window.parent.postMessage({
- msg: message
- }, "*")
+ openApp() {
+ let message = "toOpenApp?" + this.productDetail.productBaseId;
+ window.parent.postMessage(
+ {
+ msg: message,
+ },
+ "*"
+ );
},
onFileAdded(f) {
@@ -1579,27 +1636,26 @@
//绠楁硶杞欢 宸插畨瑁呭叾涓寘鍚緟鍗囩骇 鏈畨瑁�
item.installed ? installedList.push(obj) : unInstalledList.push(obj);
- item.isUpgrade ? hasNewVersionList.push(obj): null
+ item.isUpgrade ? hasNewVersionList.push(obj) : null;
});
}
this.installedList = installedList;
this.notInstalledList = unInstalledList;
this.hasNewVersionSdk = hasNewVersionList;
},
- unloadSDKinWin(){
-
- let appToUnload
- let sdkToUnload
- if (this.productDetail.productTypeName=="搴旂敤") {
- appToUnload= this.installedApps.find((item)=>{
- return item.id == this.productDetail.productBaseId
- })
- this.unLoad(appToUnload)
- }else{
- sdkToUnload= this.installedList.find((item)=>{
- return item.id == this.productDetail.productBaseId
- })
- this.unLoadSdk(sdkToUnload)
+ unloadSDKinWin() {
+ let appToUnload;
+ let sdkToUnload;
+ if (this.productDetail.productTypeName == "搴旂敤") {
+ appToUnload = this.installedApps.find((item) => {
+ return item.id == this.productDetail.productBaseId;
+ });
+ this.unLoad(appToUnload);
+ } else {
+ sdkToUnload = this.installedList.find((item) => {
+ return item.id == this.productDetail.productBaseId;
+ });
+ this.unLoadSdk(sdkToUnload);
}
},
//鍗歌浇绠楁硶
@@ -1607,17 +1663,17 @@
let _this = this;
this.$confirm("纭畾瑕佸嵏杞借绠楁硶鍚�?", "鎻愮ず")
.then(() => {
- _this.productDetailVisible = false
+ _this.productDetailVisible = false;
sdk.unloadLoading = true;
removeSdk({ sdkId: sdk.id })
.then((res) => {
if (res && res.success) {
sdk.unloadLoading = false;
this.$notify({
- title: "鎴愬姛",
- message: "鍗歌浇瀹屾垚",
- type: "success",
- });
+ title: "鎴愬姛",
+ message: "鍗歌浇瀹屾垚",
+ type: "success",
+ });
_this.getAllSdk();
window.parent.postMessage(
{
@@ -1636,73 +1692,70 @@
console.log(e);
});
},
- upgradeSDKinWin(){
-
+ upgradeSDKinWin() {
this.isUpgrading = !this.isUpgrading;
let _this = this;
- if (this.productDetail.productTypeName=="搴旂敤") {
- installApp({ path: this.productDetail.productBaseId})
- .then((res) => {
- if (res && res.success) {
- this.$notify({
- title: "鎴愬姛",
- message: "鍗囩骇瀹屾垚",
- type: "success",
- });
- this.needToUpgradeInWin=false
- this.productDetail.isUpgrade = false
- this.isUpgrading = !this.isUpgrading;
-
- }
- })
- .catch((e) => {
+ if (this.productDetail.productTypeName == "搴旂敤") {
+ installApp({ path: this.productDetail.productBaseId })
+ .then((res) => {
+ if (res && res.success) {
+ this.$notify({
+ title: "鎴愬姛",
+ message: "鍗囩骇瀹屾垚",
+ type: "success",
+ });
+ this.needToUpgradeInWin = false;
+ this.productDetail.isUpgrade = false;
+ this.isUpgrading = !this.isUpgrading;
+ }
+ })
+ .catch((e) => {
_this.$notify({
title: "鍗囩骇澶辫触",
message: e.data,
type: "warning",
});
- this.isUpgrading = !this.isUpgrading;
- });
+ this.isUpgrading = !this.isUpgrading;
+ });
- // 寮�鍚嚜鍔ㄥ埛鏂�
- this.appUpgreading = true;
- }else{
- downloadSdk({path:this.productDetail.productBaseId}).then((res)=>{
- this.needToUpgradeInWin=false
- this.productDetail.isUpgrade = false
- this.isUpgrading = !this.isUpgrading;
- this.$notify({
- title: "鎴愬姛",
- message: "鍗囩骇瀹屾垚",
- type: "success",
- });
- }).catch((err)=>{
- this.$notify({
- title: "鍗囩骇澶辫触",
- message: err.data,
- type: "warning",
- });
- this.isUpgrading = !this.isUpgrading;
- })
- this.sdkUpgreading = true;
+ // 寮�鍚嚜鍔ㄥ埛鏂�
+ this.appUpgreading = true;
+ } else {
+ downloadSdk({ path: this.productDetail.productBaseId })
+ .then((res) => {
+ this.needToUpgradeInWin = false;
+ this.productDetail.isUpgrade = false;
+ this.isUpgrading = !this.isUpgrading;
+ this.$notify({
+ title: "鎴愬姛",
+ message: "鍗囩骇瀹屾垚",
+ type: "success",
+ });
+ })
+ .catch((err) => {
+ this.$notify({
+ title: "鍗囩骇澶辫触",
+ message: err.data,
+ type: "warning",
+ });
+ this.isUpgrading = !this.isUpgrading;
+ });
+ this.sdkUpgreading = true;
}
-
-
-
},
- downloadSdkInSide(){
+ downloadSdkInSide() {
this.downloadItem = this.productDetail.productBaseId;
- this.isUpgrading = true
+ this.isUpgrading = true;
downloadSdk({ path: this.productDetail.productBaseId })
.then((rsp) => {
- this.productDetailVisible = false
+ this.productDetailVisible = false;
this.downloadItem = "";
this.$notify({
type: "success",
- message: "绠楁硶宸插畨瑁�"
+ message: "绠楁硶宸插畨瑁�",
});
- this.isUpgrading=false
+ this.isUpgrading = false;
})
.catch((err) => {
this.$notify({
@@ -1710,12 +1763,13 @@
message: err.data,
});
this.downloadItem = "";
- this.isUpgrading=false
+ this.isUpgrading = false;
});
// 寮�鍚嚜鍔ㄥ埛鏂�
this.sdkUpgreading = true;
},
- donwload(item,typ) {
+ donwload(item, typ) {
+
item.upgradeLoading = true;
this.downloadItem = item.id;
@@ -1726,7 +1780,7 @@
this.downloadItem = "";
this.$notify({
type: "success",
- message: typ==1? "绠楁硶瀹夎鎴愬姛":"绠楁硶鍗囩骇鎴愬姛"
+ message: typ == 1 ? "绠楁硶瀹夎鎴愬姛" : "绠楁硶鍗囩骇鎴愬姛",
});
})
.catch((err) => {
@@ -1801,9 +1855,8 @@
height: 100%;
}
.product-detail-dialog {
- .dialog-title{
- font-size: 13px;
-
+ .dialog-title {
+ font-size: 13px;
}
.el-dialog {
width: 50%;
@@ -1812,36 +1865,35 @@
}
.el-dialog__header {
text-align: center;
- padding: 6px;
+ padding: 6px;
.el-dialog__headerbtn {
- position: absolute;
- top: 5px;
+ position: absolute;
+ top: 5px;
- right: 20px;
- padding: 0;
- background: transparent;
- outline: none;
- cursor: pointer;
- font-size: 20px;
+ right: 20px;
+ padding: 0;
+ background: transparent;
+ outline: none;
+ cursor: pointer;
+ font-size: 20px;
}
}
.el-dialog__body {
background-color: rgba(222, 225, 230, 1);
- padding: 8px 3px;
- .button-group{
+ padding: 8px 3px;
+ .button-group {
position: absolute;
- top: 3px;
+ top: 3px;
- left:6px;
- left: 10px;
- .el-button--small {
- padding: 5px 12px;
-
- }
- button{
+ left: 6px;
+ left: 10px;
+ .el-button--small {
+ padding: 5px 12px;
+ }
+ button {
font-size: 18px;
- line-height: 12px;
+ line-height: 12px;
}
}
}
@@ -1857,20 +1909,19 @@
height: 330px;
border-radius: 2px;
.banner {
- text-align: center;
- margin-top: 3px;
- video {
+ text-align: center;
+ margin-top: 3px;
+ video {
+ margin: 0px auto;
+ margin-top: 23px;
- margin: 0px auto;
- margin-top: 23px;
-
- width: 443px;
- height: 277px;
- }
- img{
- max-width: 90%;
- margin-top: 28px;
- }
+ width: 443px;
+ height: 277px;
+ }
+ img {
+ max-width: 90%;
+ margin-top: 28px;
+ }
}
}
.top-right {
@@ -1883,34 +1934,33 @@
border-radius: 2px;
overflow: hidden;
.summary {
- height: 120px;
+ height: 120px;
-
- margin: 5px 5px 0 5px;
+ margin: 5px 5px 0 5px;
.icon {
- margin: 0 10px;
- margin-top: 8px;
+ margin: 0 10px;
+ margin-top: 8px;
float: left;
- .baseImg{
- max-width: 106px;
- max-height: 106px;
+ .baseImg {
+ max-width: 106px;
+ max-height: 106px;
}
}
-
+
.right-desc {
float: left;
position: absolute;
- left: 140px;
+ left: 140px;
.name {
- font-size: 28px;
+ font-size: 28px;
margin-bottom: 5px;
text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- width: 250px;
+ white-space: nowrap;
+ overflow: hidden;
+ width: 250px;
}
.tags {
margin-bottom: 10px;
@@ -1919,55 +1969,50 @@
}
}
}
-
}
- .jihuo-input{
- margin-left: 10px;
- margin-bottom: 10px;
- .el-input{
- float: left;
- width: 63%;
- margin-bottom: 8px;
- margin-right: 10px;
- }
- el-button{
- float: left;
- }
+ .jihuo-input {
+ margin-left: 10px;
+ margin-bottom: 10px;
+ .el-input {
+ float: left;
+ width: 63%;
+ margin-bottom: 8px;
+ margin-right: 10px;
}
+ el-button {
+ float: left;
+ }
+ }
.product-intruduction {
height: 200px;
- margin-top: 3px;
+ margin-top: 3px;
.part-title {
display: block;
- line-height: 20px;
+ line-height: 20px;
font-size: 16px;
margin-left: 24px;
border-bottom: 3px solid #3d68e1;
width: fit-content;
- height: 26px;
- margin-bottom: 8px;
-
+ height: 26px;
+ margin-bottom: 8px;
}
.text {
- height: 156px;
+ height: 156px;
overflow: auto;
padding: 0 15px 0px 15px;
-
.single-desc {
- margin-bottom: 10px;
- font-size: 13px;
-
-
+ margin-bottom: 10px;
+ font-size: 13px;
}
}
}
}
}
.box-bottom {
- margin-top: 8px;
+ margin-top: 8px;
height: 240px;
.bot-left {
@@ -1984,24 +2029,22 @@
margin-left: 24px;
border-bottom: 3px solid #3d68e1;
width: fit-content;
- margin-bottom: 10px;
+ margin-bottom: 10px;
- height: 33px;
-
+ height: 33px;
}
.list-zone {
overflow: auto;
- height: 190px;
- padding: 0 20px;
+ height: 190px;
+ padding: 0 20px;
.list-item {
.desc {
background-color: rgba(242, 242, 242, 1.3);
- margin: 5px 12px 0 12px;
- font-size: 12px;
- line-height: 18px;
-
+ margin: 5px 12px 0 12px;
+ font-size: 12px;
+ line-height: 18px;
}
- margin-bottom: 12px;
+ margin-bottom: 12px;
}
}
}
@@ -2021,13 +2064,12 @@
border-bottom: 3px solid #3d68e1;
width: fit-content;
margin-bottom: 5px;
- height: 33px;
-
+ height: 33px;
}
.item-zone {
overflow: auto;
height: 225px;
- padding: 0px 12px;
+ padding: 0px 12px;
.item {
height: 165px;
@@ -2046,26 +2088,25 @@
img {
max-width: 60px;
max-height: 60px;
- position: absolute;
- top: 20%;
- left: 26%;
+ position: absolute;
+ top: 20%;
+ left: 26%;
}
.icon-name {
- text-align: center;
- position: absolute;
- top: 61%;
- left: 12%;
- width: 100px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- font-size: 13px;
-
+ text-align: center;
+ position: absolute;
+ top: 61%;
+ left: 12%;
+ width: 100px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ font-size: 13px;
}
}
.look-button {
position: absolute;
- left: 30%;
+ left: 30%;
top: 76%;
}
@@ -2228,8 +2269,7 @@
max-width: 200px;
.mask {
width: 100%;
-
-
+
.el-button + .el-button {
margin-left: 0 !important;
}
@@ -2478,7 +2518,7 @@
flex-wrap: wrap;
justify-content: center;
top: 0;
-
+
.bot-btn {
flex: 1;
}
@@ -2752,42 +2792,40 @@
}
}
}
-.active-Dial{
- .el-dialog{
-
+.active-Dial {
+ .el-dialog {
min-width: 400px;
}
- .dialog-active{
- .desc {
- padding: 0 30px;
- margin-bottom: 30px;
- li {
- border-bottom: 1px solid #eee;
- height: 45px;
- line-height: 45px;
- font-size: 14px;
- &:last-child {
- border-bottom: none;
- }
- label {
- display: inline-block;
- width: 90px;
- padding-left: 14px;
- font-weight: bold;
- }
- }
+ .dialog-active {
+ .desc {
+ padding: 0 30px;
+ margin-bottom: 30px;
+ li {
+ border-bottom: 1px solid #eee;
+ height: 45px;
+ line-height: 45px;
+ font-size: 14px;
+ &:last-child {
+ border-bottom: none;
}
- .text-right {
- padding-right: 30px;
- text-align: right;
- .tip {
- color: #999;
- line-height: 38px;
- }
+ label {
+ display: inline-block;
+ width: 90px;
+ padding-left: 14px;
+ font-weight: bold;
}
+ }
+ }
+ .text-right {
+ padding-right: 30px;
+ text-align: right;
+ .tip {
+ color: #999;
+ line-height: 38px;
+ }
+ }
+ }
}
-}
-
</style>
diff --git a/src/pages/desktop/index/App.vue b/src/pages/desktop/index/App.vue
index 4bbd122..7babd3b 100644
--- a/src/pages/desktop/index/App.vue
+++ b/src/pages/desktop/index/App.vue
@@ -86,7 +86,7 @@
if (rsp && rsp.success) {
_that.$store.state.desktop.docks = [];
let installedApps = [];
-
+ rsp.data
rsp.data.forEach(function (item) {
if (item.installed) {
let temp = {
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index c25e428..ac23151 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -107,13 +107,10 @@
if (window.innerHeight >= 930) {
//this.rowSize = 4;
arr = this.chunk(tempArr, 24);
- //arr = chunkArr(tempArr,24);
} else {
//this.rowSize = 3;
arr = this.chunk(tempArr, 18);
- //arr = chunkArr(tempArr, 18);
}
- console.log(arr)
return arr
},
badgeNum() {
@@ -139,8 +136,6 @@
location.assign("/");
return;
}
-
- // 鎵撳紑妫�绱�, toSearch?showType=findByPic&targetId=108ba0bc-b0a1-433d-8e1e-d5d2e712b53b&picSmUrl=192.168.20.10:6700/47628,7cc869f3a9c714&compType=1
if (msg.indexOf("toSearch") >= 0) {
let params = msg.substring(7);
this.addFrameByName("search", params)
@@ -181,13 +176,10 @@
console.log(e)
})
},
-
dockClick(dock) {
-
if (dock.type === '1') {
window.open(dock.url);
} else if (dock.type === '2' && !dock.isOpen) {
-
this.$store.dispatch('desktop/addFrame', {
id: dock.id,
icon: dock.src,
@@ -212,6 +204,7 @@
} else if (dock.type === '2' && dock.isOpen) {
this.$store.commit('desktop/resetMinFrame', dock.id);
}
+
},
resetDockItem() {
const dockItems = document.getElementsByClassName('dock-item');
@@ -231,7 +224,6 @@
dock = app;
}
});
-
if (dock.isOpen) {
this.$store.dispatch('desktop/closeFrame', dock);
}
@@ -252,7 +244,6 @@
});
},
addFrameByID(id, params) {
-
let dock = null;
let toClose = null
this.$store.state.desktop.docks.forEach(app => {
diff --git a/src/pages/deviceCenter/index/App.vue b/src/pages/deviceCenter/index/App.vue
new file mode 100644
index 0000000..5f4b456
--- /dev/null
+++ b/src/pages/deviceCenter/index/App.vue
@@ -0,0 +1,1368 @@
+<template>
+ <div class="column">
+ <div class="column-left" ref="left">
+ <div class="left-title">璁惧绠＄悊</div>
+ <div
+ class="left-item"
+ :ref="`item_${index}`"
+ v-for="(item, index) in groups"
+ :key="index"
+ @click="clickCard(index)"
+ >
+ <div class="cir-all">
+ <div class="pie">
+ <el-progress
+ :width="60"
+ :stroke-width="8"
+ :color="item.barColor"
+ :show-text="false"
+ type="circle"
+ :percentage="25"
+ ></el-progress>
+ <div class="circleCenter">25%</div>
+ </div>
+
+ <div class="circle-bot">
+ <div class="dot"></div>
+ 鍦ㄧ嚎
+ </div>
+ </div>
+
+ <div class="desc-item">
+ <div class="desc-name">{{ item.name }}</div>
+ <div class="desc-count">
+ <span class="count-name">璁惧鎬婚噺锛�</span>
+ <span class="num" style="margin-right: 10px">{{ 31 }}</span>
+ <span class="count-name">绠楁硶锛�</span>
+ <span class="num">{{ 31 }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="column-right">
+ <div class="title">
+ <span class="m-t" @click="backToList">鍏ㄩ儴璁惧</span>
+
+ <span class="sep" v-show="isInDetail">|</span>
+
+ <span v-show="isInDetail">璁惧璇︽儏</span>
+ </div>
+
+ <div class="area-left" v-if="!isInDetail">
+ <!-- <div class="add-btn btn" ></div> -->
+ <div class="add-btn" @click="addDevice">
+ <span class="icon iconfont"></span>
+ <span class="add-text">娣诲姞璁惧</span>
+ </div>
+ <span
+ class="icon iconfont"
+ style="font-size: 25px"
+ :style="{ color: !showTable ? '#333333' : '#3d5ee1' }"
+ @click="showTable = true"
+ ></span
+ >
+ <span
+ class="icon iconfont"
+ :style="{ color: showTable ? '#333333' : '#3d5ee1' }"
+ style="font-size: 19px"
+ @click="showTable = false"
+ ></span
+ >
+ </div>
+
+ <el-dialog
+ v-drag
+ class="device-dial"
+ title="娣诲姞璁惧"
+ :visible.sync="dialogVisible"
+ :close-on-click-modal="false"
+ :destroy-on-close="true"
+ :modal-append-to-body="false"
+ width="50%"
+ >
+ <div style="">
+ <el-input
+ placeholder="璇疯緭鍏ラ泦缇P/璁惧ID/璁惧IP"
+ v-model="input3"
+ class="input-with-select"
+ >
+ <el-button slot="append" icon="el-icon-search"></el-button>
+ </el-input>
+ </div>
+
+ <el-table
+ :data="gTableData"
+ v-if="gTableData"
+ ref="elTable"
+ :header-cell-style="{
+ backgroundColor: `rgb(238, 238, 241)`,
+ 'text-align': 'center',
+ }"
+ :row-style="{
+ height: `0`,
+ }"
+ :header-row-style="{
+ height: `0`,
+ }"
+ header-align="center"
+ @selection-change="taskTableSelection"
+ >
+ <!-- v-loading -->
+ <el-table-column
+ prop="name"
+ label="闆嗙兢鍚嶇О"
+ align="center"
+ ></el-table-column>
+ <el-table-column label="IP鍦板潃" align="center">
+ <template slot-scope="scope">
+ <div>{{ scope.row.ip }}</div>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="鎿嶄綔" align="center">
+ <template slot-scope="scope">
+ <div class="operation">
+ <el-button size="mini" @click="applyAdd(scope.row)"
+ >鐢宠娣诲姞璁惧</el-button
+ >
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column type="expand">
+ <template slot-scope="scope">
+ <div class="video-item">
+ <el-table
+ ref="singleTable"
+ :data="scope.row.deviceList"
+ highlight-current-row
+ @current-change="handleCurrentChange"
+ style="width: 100%"
+ >
+ <el-table-column label="搴忓彿" type="index" width="50">
+ </el-table-column>
+ <el-table-column property="id" label="鏃ユ湡" width="120">
+ </el-table-column>
+ <el-table-column property="ip" label="濮撳悕" width="120">
+ </el-table-column>
+ <el-table-column property="name" label="鍦板潃">
+ </el-table-column>
+ </el-table>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[10, 20, 50]"
+ :page-size="10"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="30"
+ >
+ </el-pagination>
+
+ <el-dialog
+ width="400px"
+ class="inner-dial"
+ v-drag
+ title="璇疯緭鍏ヨ澶囩鐞嗙殑鎺堟潈瀵嗛挜"
+ :visible.sync="innerVisible"
+ append-to-body
+ :modal="false"
+ >
+ <div class="code-text">瀵嗛挜淇℃伅璇疯闂澶囩鐞嗕汉鍛�</div>
+ <el-input
+ v-model="password"
+ size="small"
+ placeholder="璇疯緭鍏ユ巿鏉冨瘑閽�"
+ style="width: 200px"
+ ></el-input>
+ <span class="err-pw">瀵嗙爜閿欒 </span>
+
+ <span slot="footer" class="dialog-footer">
+ <el-button size="small" @click="innerVisible = false"
+ >鍙� 娑�</el-button
+ >
+ <el-button type="primary" size="small" @click="innerVisible = false"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </el-dialog>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="dialogVisible = false"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </el-dialog>
+
+ <el-menu
+ :default-active="activeIndex"
+ v-if="!isInDetail"
+ class="el-menu-demo"
+ mode="horizontal"
+ active-text-color="#3D60E1"
+ @select="handleSelect"
+ >
+ <el-menu-item index="1">鍏ㄩ儴锛坽{ 23 }}锛�</el-menu-item>
+ <el-menu-item index="2">鍦ㄧ嚎锛坽{ 23 }}锛�</el-menu-item>
+ <el-menu-item index="3">绂荤嚎锛坽{ 23 }}锛�</el-menu-item>
+ </el-menu>
+
+ <el-table
+ v-if="showTable && !isInDetail"
+ ref="multipleTable"
+ highlight-current-row
+ :data="jTableData"
+ style="width: 100%"
+ :header-cell-style="{ background: '#EEEEF1', color: '#222222' }"
+ >
+ <el-table-column
+ align="center"
+ prop="name"
+ label="璁惧鍚嶇О"
+ ></el-table-column>
+ <el-table-column
+ align="center"
+ prop="id"
+ label="璁惧ID"
+ ></el-table-column>
+ <el-table-column
+ align="center"
+ prop="ip"
+ label="IP鍦板潃"
+ ></el-table-column>
+ <el-table-column
+ align="center"
+ prop="downloadTime"
+ label="瀹夎鏃堕棿"
+ ></el-table-column>
+ <el-table-column
+ align="center"
+ prop="firstTime"
+ label="棣栨浣跨敤鏃堕棿"
+ ></el-table-column>
+ <el-table-column
+ align="center"
+ prop="group"
+ label="鎵�灞為泦缇�"
+ ></el-table-column>
+ <el-table-column
+ align="center"
+ prop="state"
+ label="鐘舵��"
+ ></el-table-column>
+ <el-table-column label="鎿嶄綔" :align="'center'">
+ <template slot-scope="scope">
+ <div class="circle-bot">
+ <div class="dot"></div>
+ 鍦ㄧ嚎{{ scope.row.state }}
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <div class="cards-group" v-show="!showTable && !isInDetail">
+ <el-row :gutter="20">
+ <el-col
+ :xs="5"
+ :sm="5"
+ :md="5"
+ :lg="5"
+ v-for="(item, i) in cardList"
+ :key="i"
+ >
+ <div class="card-item" @click="checkDetail">
+ <div class="card-icon"></div>
+ <div class="server-name">鏈嶅姟鍣�20.10</div>
+ <div class="server-ip">192.168.20.10:7009/</div>
+ <el-divider></el-divider>
+
+ <div class="info-list">
+ <div class="item">
+ <div class="item-name">鍐呭瓨</div>
+ <div class="bar-outer">
+ <div
+ class="bar-inner"
+ :style="{ width: widthObj.storage }"
+ ></div>
+ </div>
+ <span class="percent-text">{{ widthObj.storage }}</span>
+ </div>
+ <div class="item">
+ <div class="item-name">绠楀姏</div>
+ <div class="bar-outer">
+ <div
+ class="bar-inner"
+ :style="{ width: widthObj.power, background: '#F99D9D' }"
+ ></div>
+ </div>
+ <span class="percent-text">{{ widthObj.power }}</span>
+ </div>
+ <div class="item">
+ <div class="item-name">CPU</div>
+ <div class="bar-outer">
+ <div
+ class="bar-inner"
+ :style="{ width: widthObj.cpu }"
+ ></div>
+ </div>
+ <span class="percent-text">{{ widthObj.cpu }}</span>
+ </div>
+ <div class="item">
+ <div class="item-name">纭洏</div>
+ <div class="bar-outer">
+ <div
+ class="bar-inner"
+ :style="{ width: widthObj.hard }"
+ ></div>
+ </div>
+ <span class="percent-text">{{ widthObj.hard }}</span>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+
+ <div class="detail-page" v-if="isInDetail">
+ <div class="detail-top">
+ <div class="detail-title">鏈嶅姟鍣�20.10</div>
+ <div class="device-time">璁惧褰撳墠鏃堕棿锛歿{ "2021-03-04" }}</div>
+ <div class="btn-group">
+ <div class="btn">鍔犲叆闆嗙兢</div>
+ <div class="btn">璁惧閲嶅惎</div>
+ <div class="btn">绉婚櫎璁惧</div>
+ </div>
+ </div>
+
+ <div class="detail-info">
+ <div class="basic-info">
+ <div class="basic-info-title">璁惧鍩烘湰淇℃伅</div>
+ <el-divider></el-divider>
+ <div class="info-content">
+ <div class="single-content">
+ <div class="head-title">璁惧淇℃伅</div>
+ <div class="bar-content">
+ <span>璁惧ID</span>
+ <span>DWOFWE1039120</span>
+ </div>
+ <div class="bar-content">
+ <span>璁惧ID</span>
+ <span>DWOFWE1039120</span>
+ </div>
+ <div class="bar-content">
+ <span>璁惧ID</span>
+ <span>DWOFWE1039120</span>
+ </div>
+ <div class="bar-content">
+ <span>璁惧ID</span>
+ <span>DWOFWE1039120</span>
+ </div>
+ </div>
+ <div class="single-content">
+ <div class="head-title">纭欢淇℃伅</div>
+ <div class="bar-content">
+ <span>璁惧ID</span>
+ <span>DWOFWE1039120</span>
+ </div>
+ <div class="bar-content">
+ <span>璁惧ID</span>
+ <span>DWOFWE1039120</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="info-right">
+ <div class="performance">
+ <div class="basic-info-title">璁惧鎬ц兘</div>
+ <el-divider></el-divider>
+ <div class="performance-content">
+ <el-progress
+ type="circle"
+ :percentage="25"
+ :width="70"
+ :stroke-width="15"
+ ></el-progress>
+ <el-progress
+ type="circle"
+ color="rgba(49, 249, 170, 1)"
+ :percentage="25"
+ :width="70"
+ :stroke-width="15"
+ ></el-progress>
+ <el-progress
+ type="circle"
+ color="rgba(249, 210, 49, 1)"
+ :percentage="25"
+ :width="70"
+ :stroke-width="15"
+ ></el-progress>
+ <el-progress
+ type="circle"
+ color="rgba(249, 129, 129, 1)"
+ :percentage="25"
+ :width="70"
+ :stroke-width="15"
+ ></el-progress>
+ </div>
+ <div class="names">
+ <div class="name">鍐呭瓨</div>
+ <div class="name">绠楀姏</div>
+ <div class="name">CPU</div>
+ <div class="name">纭洏</div>
+ </div>
+ </div>
+ <div class="version">
+ <div class="basic-info-title">璁惧鐗堟湰淇℃伅</div>
+ <el-divider></el-divider>
+ <div class="info-content">
+ <div class="single-content">
+ <div class="bar-content">
+ <span>璁惧ID</span>
+ <span>DWOFWE1039120</span>
+ </div>
+ <div class="check-new">
+ <span class="text">妫�娴嬪埌鏈夋柊鐗堟湰锛�2.23.1</span>
+ <div class="btn">鏇存柊</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="count-list">
+ <div class="count-item">
+ <div class="desc">绠楁硶鎬婚噺</div>
+ <div class="num">{{ 22 }}</div>
+ </div>
+ <div class="count-item">
+ <div class="desc">搴旂敤鎬婚噺</div>
+ <div class="num">{{ 22 }}</div>
+ </div>
+ <div class="count-item">
+ <div class="desc">绠楁硶寰呮洿鏂版�婚噺</div>
+ <div class="num">{{ 22 }}</div>
+ </div>
+ <div class="count-item">
+ <div class="desc">搴旂敤寰呮洿鏂版�婚噺</div>
+ <div class="num">{{ 22 }}</div>
+ </div>
+ </div>
+ <div class="skd-list">
+ <div class="basic-info-title">
+ <span class="small-title">瀹夎鐨勭畻娉�</span>
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="mini">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </div>
+ <el-divider></el-divider>
+ <div class="list-display">
+ <el-row :gutter="20" style="padding: 15px 15px 5px 15px">
+ <el-col
+ :xs="5"
+ :sm="5"
+ :md="5"
+ :lg="5"
+ v-for="(item, i) in sdkList"
+ :key="i"
+ >
+ <div
+ class="item-card"
+ :class="{ willUpGrade: item.isUpgrade }"
+ v-loading="item.upgradeLoading"
+ element-loading-text="绠楁硶涓嬭浇涓�"
+ element-loading-background="rgba(0,0,0,.8)"
+ >
+ <i class="iconfont iconupdate" v-if="1"></i>
+ <div class="up">
+ <div class="img-wrap"></div>
+ <div class="right-desc">
+ <div>
+ <div class="card-title">鏈甫瀹夊叏甯芥娴�</div>
+ <div class="tag-btn">{{ "杞" }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="down">
+ <div class="down-bar">瀹夎鏃堕棿</div>
+ <div class="down-bar">杩囨湡鏃堕棿</div>
+ <div class="down-bar">婵�娲荤爜</div>
+ </div>
+
+ <div class="card-mask">
+ <i class="iconfont iconupdate" v-if="item.isUpgrade"></i>
+ <div class="left-top">
+ <div>褰撳墠鐗堟湰锛歿{ 2121 }}</div>
+ <div v-if="1">鏈�鏂扮増鏈細{{ 32231 }}</div>
+ </div>
+ <div class="btns">
+ <el-button type="primary" size="small">鍗歌浇</el-button>
+ <el-button
+ type="warning"
+ size="small"
+ @click="upgradeSDK(item)"
+ >鍗囩骇</el-button
+ >
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+
+ <div class="app-list">
+ <div class="basic-info-title">
+ <span class="small-title">瀹夎鐨勫簲鐢�</span>
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="mini">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </div>
+ <el-divider></el-divider>
+
+ <div class="list-display">
+ <el-row :gutter="20" style="padding: 15px 15px 5px 15px">
+ <el-col
+ :xs="5"
+ :sm="5"
+ :md="5"
+ :lg="5"
+ v-for="(item, i) in sdkList"
+ :key="i"
+ >
+ <div class="item-card">
+ <i class="iconfont iconupdate" v-if="1"></i>
+ <div class="up">
+ <div class="img-wrap"></div>
+ <div class="right-desc">
+ <div>
+ <div class="card-title">鏈甫瀹夊叏甯芥娴�</div>
+ <div class="tag-btn">{{ "杞" }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="down">
+ <div class="down-bar">瀹夎鏃堕棿</div>
+ <div class="down-bar">杩囨湡鏃堕棿</div>
+ <div class="down-bar">婵�娲荤爜</div>
+ </div>
+ <div class="card-mask">
+ <div class="left-top">
+ <div>褰撳墠鐗堟湰锛歿{ 2121 }}</div>
+ <div v-if="1">鏈�鏂扮増鏈細{{ 32231 }}</div>
+ </div>
+ <div class="btns">
+ <el-button type="primary" size="small">鍗歌浇</el-button>
+ <el-button type="warning" size="small">鍗囩骇</el-button>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "VideoManage",
+ components: {},
+ data() {
+ return {
+ input3: "",
+ dialogVisible: false,
+ screenHeight: 0,
+ jTableData: [
+ {
+ name: "澶ц泧涓�",
+ id: "efefw",
+ ip: "2123",
+ downloadTime: "239:212",
+ firstTime: "fe12",
+ group: "feee",
+ state: "fefe",
+ },
+ ],
+ gTableData: [
+ {
+ name: "鏈嶅姟鍣�20.10",
+ ip: "11111",
+ deviceList: [
+ {
+ id: "21312",
+ ip: "2232fef",
+ name: "eofs",
+ },
+ {
+ id: "3423",
+ ip: "2232eef",
+ name: "fe",
+ },
+ {
+ id: "45435",
+ ip: "2232fgg",
+ name: "eoffaefws",
+ },
+ ],
+ },
+ {
+ name: "鏈嶅姟鍣�20.11",
+ ip: "22222",
+ },
+ ],
+ currentPage4: 4,
+ groups: [
+ {
+ barColor: "#535FF4",
+ name: "鍏ㄩ儴璁惧",
+ },
+ {
+ barColor: "#A07EF0",
+ name: "Basic闆嗙兢",
+ },
+ {
+ barColor: "#EE6779",
+ name: "瀛︽牎闆嗙兢",
+ },
+ {
+ barColor: "#67C6F1",
+ name: "鏈姞鍏ラ泦缇�",
+ },
+ ],
+ highlightCardIndex: 0,
+ cardList: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
+ widthObj: {
+ storage: "50%",
+ power: "30%",
+ cpu: "50%",
+ hard: "70%",
+ },
+ showTable: true,
+ isInDetail: false,
+ sdkList: [
+ { isUpgrade: false, upgradeLoading: false },
+ { isUpgrade: false, upgradeLoading: false },
+ { isUpgrade: false, upgradeLoading: false },
+ { isUpgrade: true, upgradeLoading: false },
+ { isUpgrade: false, upgradeLoading: false },
+ { isUpgrade: true, upgradeLoading: false },
+ { isUpgrade: false, upgradeLoading: false },
+ { isUpgrade: true, upgradeLoading: false },
+ { isUpgrade: true, upgradeLoading: false },
+ { isUpgrade: true, upgradeLoading: false },
+ { isUpgrade: false, upgradeLoading: false },
+ ],
+ appList: [{}, {}, {}, {}, {}, {}, {}],
+ options: [
+ {
+ value: "閫夐」1",
+ label: "榛勯噾绯�",
+ },
+ {
+ value: "閫夐」2",
+ label: "鍙岀毊濂�",
+ },
+ {
+ value: "閫夐」3",
+ label: "铓典粩鐓�",
+ },
+ {
+ value: "閫夐」4",
+ label: "榫欓』闈�",
+ },
+ {
+ value: "閫夐」5",
+ label: "鍖椾含鐑ら腑",
+ },
+ ],
+ value: "",
+ activeIndex: "1",
+ innerVisible: false,
+ password: "",
+ };
+ },
+ mounted() {
+ this.screenHeight = document.documentElement.clientHeight;
+ window.onresize = () => {
+ return (() => {
+ this.screenHeight = document.documentElement.clientHeight;
+ })();
+ };
+ this.$refs[`item_${0}`][0].style.backgroundColor = "#353A8A";
+ },
+ methods: {
+ upgradeSDK(item) {
+ item.upgradeLoading = true;
+ // setTimeout(() => {
+ // item.upgradeLoading=false
+
+ // }, 2400);
+ },
+ applyAdd(item) {
+ this.innerVisible = true;
+ },
+ handleSelect(key, keyPath) {
+ console.log(key, keyPath);
+ },
+ backToList() {
+ this.isInDetail = false;
+ },
+ checkDetail() {
+ this.isInDetail = true;
+ },
+ addDevice() {
+ this.dialogVisible = true;
+ },
+ clickCard(i) {
+ this.$refs[`item_${this.highlightCardIndex}`][0].style.backgroundColor =
+ "#25283A";
+ this.highlightCardIndex = i;
+ this.$refs[`item_${i}`][0].style.backgroundColor = "#353A8A";
+ },
+ },
+ directives: {
+ drag(el, binding) {
+ const dialogHeaderEl = el.querySelector(".el-dialog__header");
+ const dragDom = el.querySelector(".el-dialog");
+ dialogHeaderEl.style.cursor = "move";
+ const sty =
+ dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+ dialogHeaderEl.onmousedown = (e) => {
+ const disX = e.clientX - dialogHeaderEl.offsetLeft;
+ const disY = e.clientY - dialogHeaderEl.offsetTop;
+ let styL, styT;
+
+ if (sty.left.includes("%")) {
+ styL =
+ +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
+ styT =
+ +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
+ } else {
+ styL = +sty.left.replace(/\px/g, "");
+ styT = +sty.top.replace(/\px/g, "");
+ }
+ document.onmousemove = function (e) {
+ const l = e.clientX - disX;
+ const t = e.clientY - disY;
+ dragDom.style.left = `${l + styL}px`;
+ dragDom.style.top = `${t + styT}px`;
+ };
+ document.onmouseup = function (e) {
+ document.onmousemove = null;
+ document.onmouseup = null;
+ };
+ };
+ },
+ },
+ watch: {
+ // isInDetail(v){
+ // debugger
+ // if (v) {
+ // document.getElementsByClassName("column-right").style.backgroundColor = 'rgba(240, 242, 245, 1)'
+ // } else {
+ // document.getElementsByClassName("column-right").style.backgroundColor = 'initial'
+ // }
+ // }
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.column {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ flex-basis: auto;
+ box-sizing: border-box;
+}
+.circle-bot {
+ width: 55px;
+ text-align: center;
+ margin: 0 auto;
+ font-size: 12px;
+ font-weight: 400;
+ color: #00b948;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 16px;
+ .dot {
+ width: 5px;
+ height: 5px;
+ background: #00b948;
+ border-radius: 50%;
+ display: inline-block;
+ margin-right: 3px;
+ }
+}
+.column-left {
+ background-color: #2f325a;
+ height: 100%;
+ width: 300px;
+ overflow: auto;
+ box-sizing: border-box;
+ flex-shrink: 0;
+ padding: 10px;
+ .left-title {
+ font-size: 25px;
+ color: #ffffff;
+ text-align: left;
+ padding: 10px;
+ padding-top: 5px;
+ }
+ .left-item {
+ border-radius: 8px;
+ height: 100px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ color: #ffffff;
+ background-color: #25283a;
+ .cir-all {
+ margin-left: 15px;
+ margin-right: 5px;
+ }
+ .pie {
+ position: relative;
+ }
+
+ .circleCenter {
+ position: absolute;
+ width: 60px;
+ top: 22px;
+
+ text-align: center;
+ left: 0px;
+ font-size: 15px;
+ font-weight: 600;
+ }
+
+ .desc-item {
+ height: 80px;
+ .desc-name {
+ text-align: left;
+ font-size: 16px;
+ padding: 10px;
+ }
+ .desc-count {
+ text-align: left;
+ padding: 0 10px 10px 10px;
+ .count-name {
+ font-size: 14px;
+ color: #7477a2;
+ }
+ .num {
+ font-size: 24px;
+ font-family: Impact;
+ font-weight: 400;
+ color: #5781ff;
+ }
+ }
+ }
+ }
+ .left-item:hover {
+ background-color: #353a8a;
+ }
+}
+.column-right {
+ flex: 1;
+ flex-basis: auto;
+ overflow: auto;
+ // background-color: rgba(240, 242, 245, 1);
+ box-sizing: border-box;
+ padding: 10px 15px;
+ position: relative;
+ .title {
+ text-align: left;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333333;
+ padding: 5px 15px;
+ .m-t {
+ cursor: pointer;
+ }
+ .m-t:hover {
+ font-weight: 600;
+ color: #3d68e1;
+ }
+ .sep {
+ margin: 0 10px 0px 15px;
+ font-size: 20px;
+ color: lightgray;
+ }
+ }
+ .el-menu-item {
+ font-size: 15px;
+
+ font-weight: 600;
+ padding: 0 15px;
+ }
+
+ .el-menu--horizontal > .el-menu-item {
+ height: 50px;
+ line-height: 50px;
+ }
+ .area-left {
+ height: 40px;
+ display: flex;
+ width: 150px;
+ justify-content: space-between;
+ align-items: center;
+ position: absolute;
+ top: 47px;
+ right: 15px;
+ z-index: 1;
+ .icon {
+ cursor: pointer;
+ color: #333333;
+ }
+ .icon:hover {
+ color: #3d5ee1 !important;
+ }
+ .add-btn {
+ display: flex;
+ align-items: center;
+ width: 90px;
+ cursor: pointer;
+ font-size: 16px;
+ justify-content: space-evenly;
+ color: #3d62e1;
+ .icon {
+ font-size: 18px;
+ color: #3d5ee1;
+ line-height: 24px;
+ }
+ .add-text {
+ height: 24px;
+ line-height: 24px;
+ }
+ }
+ .add-btn:hover {
+ font-weight: 600;
+ }
+ }
+ .el-table {
+ margin-top: 15px;
+ }
+ .cards-group {
+ margin-top: 15px;
+
+ .card-item {
+ height: 270px;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ box-shadow: 0px 0px 7px 0px rgba(167, 167, 167, 0.53);
+ padding: 15px;
+ background-color: #fff;
+ position: relative;
+ box-sizing: border-box;
+ cursor: pointer;
+
+ .card-icon {
+ height: 75px;
+ width: 75px;
+ background-color: gainsboro;
+ margin: 0 auto;
+ }
+ .server-name {
+ margin: 5px auto;
+ font-size: 16px;
+ font-weight: bold;
+ color: #333333;
+ }
+ .server-ip {
+ font-size: 14px;
+ margin-bottom: 5px;
+ color: #ccccd2;
+ }
+ .info-list {
+ margin-top: 13px;
+ .item {
+ display: flex;
+ align-items: center;
+ height: 24px;
+ .item-name {
+ font-size: 14px;
+ color: #333333;
+ min-width: 28px;
+ // width: 18%;
+ margin-right: 5px;
+ }
+ .bar-outer {
+ height: 11px;
+ background-color: #eeeef1;
+ overflow: hidden;
+ position: relative;
+ width: 70%;
+ vertical-align: middle;
+ margin-right: 6px;
+ .bar-inner {
+ opacity: 0.5;
+
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ background-color: #bfccf6;
+ text-align: right;
+ border-radius: 6px;
+ line-height: 1;
+ white-space: nowrap;
+ transition: width 0.6s ease;
+ }
+ }
+ .percent-text {
+ font-size: 14px;
+ }
+ }
+ }
+ }
+ .card-item:hover {
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
+ }
+ .el-col-lg-5 {
+ width: 20%;
+ }
+ }
+
+ .detail-page {
+ .detail-top {
+ height: 50px;
+ padding: 0 20px;
+ background-color: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 5px;
+ .detail-title {
+ font-size: 16px;
+ font-weight: 600;
+ }
+ .device-time {
+ font-size: 14px;
+ }
+ .btn-group {
+ width: 270px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+ .basic-info-title {
+ text-align: left;
+ padding: 8px 15px;
+ font-size: 14px;
+ display: flex;
+ justify-content: space-between;
+ .small-title {
+ font-size: 16px;
+ line-height: 28px;
+ }
+ .el-select {
+ width: 140px;
+ }
+ }
+ .detail-info {
+ width: 100%;
+ height: 300px;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 10px;
+ .basic-info {
+ height: 300px;
+ width: 60%;
+ background-color: #fff;
+ margin-right: 10px;
+ }
+
+ .info-content {
+ padding: 15px 50px;
+ .single-content {
+ margin-bottom: 10px;
+ .head-title {
+ text-align: left;
+ margin-bottom: 10px;
+ }
+ .bar-content {
+ display: flex;
+ justify-content: space-between;
+ background-color: #f7f9fa;
+ margin-bottom: 4px;
+ padding: 2px 10px;
+ height: 20px;
+ color: #a1a1a1;
+ align-items: center;
+ }
+ }
+ }
+ .info-right {
+ height: 300px;
+ width: 40%;
+ .performance {
+ height: 170px;
+ background-color: #fff;
+ .performance-content {
+ margin-top: 20px;
+ display: flex;
+ justify-content: space-evenly;
+ }
+ .names {
+ margin-top: 10px;
+ display: flex;
+ justify-content: space-evenly;
+ .name {
+ width: 70px;
+ text-align: center;
+ }
+ }
+ }
+ .version {
+ margin-top: 10px;
+ height: 120px;
+ background-color: #fff;
+ .check-new {
+ .text {
+ margin-right: 10px;
+ }
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 10px;
+ }
+ }
+ }
+ }
+ .count-list {
+ margin-top: 10px;
+ background-color: #fff;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ padding: 15px;
+
+ .count-item {
+ width: 25%;
+ height: 55px;
+ border-right: 1px solid rgba(177, 179, 181, 1);
+ .desc {
+ height: 20px;
+ line-height: 20px;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.447058);
+ }
+ .num {
+ height: 35px;
+ line-height: 35px;
+ font-size: 24px;
+ }
+ }
+ .count-item:last-child {
+ border: none;
+ }
+ }
+ .list-display {
+ .el-col-lg-5 {
+ width: 20%;
+ }
+ }
+ .item-card {
+ border: 1px solid rgba(233, 233, 233, 1);
+ height: 145px;
+ position: relative;
+ margin-bottom: 15px;
+ svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .iconupdate {
+ color: #01e667;
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ font-size: 25px;
+ }
+
+ .up {
+ height: 70px;
+ display: flex;
+ background-color: rgba(247, 249, 250, 1);
+ .img-wrap {
+ width: 70px;
+ height: 100%;
+ background-color: cornsilk;
+ }
+ .right-desc {
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ .card-title {
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 5px;
+ }
+ .tag-btn {
+ background-color: cornflowerblue;
+ color: white;
+ border-radius: 15px;
+ width: 55px;
+ height: 18px;
+ line-height: 18px;
+ }
+ }
+ }
+ .down {
+ height: 75px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .down-bar {
+ height: 16px;
+ padding: 2px 15px;
+
+ text-align: left;
+ }
+ }
+ }
+ .item-card:hover {
+ .card-mask {
+ display: block;
+ }
+ }
+ .skd-list {
+ min-height: 300px;
+ background-color: #fff;
+ margin: 10px 0;
+ }
+ .app-list {
+ min-height: 300px;
+ background-color: #fff;
+ margin: 10px 0;
+ }
+ }
+}
+.inner-dial {
+ .el-dialog__body {
+ text-align: left;
+ padding: 10px 50px;
+ .code-text {
+ margin: 10px 0;
+ }
+ .err-pw {
+ color: red;
+ margin-left: 10px;
+ }
+ }
+ .el-dialog__header {
+ padding: 10px 20px;
+ border-bottom: 1px solid #eee;
+ }
+ .el-dialog__title {
+ font-size: 16px;
+ }
+}
+.device-dial {
+ .el-dialog__body {
+ padding: 10px 20px 15px 20px;
+ }
+}
+.el-dialog {
+ .el-dialog__header {
+ padding: 10px 20px;
+ text-align: left;
+ .el-dialog__headerbtn {
+ top: 13px;
+ }
+ .el-dialog__headerbtn .el-dialog__close {
+ color: #909399;
+ }
+ }
+}
+.heigher-index {
+ position: absolute;
+ top: 0;
+ z-index: 10;
+ width: 100%;
+ height: 100%;
+}
+
+.el-divider--horizontal {
+ margin: 0;
+}
+.btn {
+ height: 25px;
+ width: 80px;
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(229, 240, 255, 1);
+ border: 1px solid rgba(215, 215, 215, 1);
+ cursor: pointer;
+ border-radius: 4px;
+}
+.card-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(0.5px) brightness(100%);
+ text-align: center;
+ z-index: 1;
+ display: none;
+ // svg {
+ // position: absolute;
+ // top: 49%;
+ // left: 50%;
+ // transform: translate(-50%, -50%);
+ // z-index: 33;
+ // }
+ .left-top {
+ position: absolute;
+ left: 10px;
+ top: 6px;
+
+ font-size: 14px;
+ color: #fff;
+ text-align: left;
+ }
+ .btns {
+ position: absolute;
+ bottom: 12px;
+ right: 10px;
+ .el-button--small {
+ padding: 7px 13px;
+ font-size: 14px;
+ }
+ }
+}
+.input-with-select .el-input-group__prepend {
+ background-color: #fff;
+}
+</style>
diff --git a/src/pages/deviceCenter/index/main.ts b/src/pages/deviceCenter/index/main.ts
new file mode 100644
index 0000000..36c7ac2
--- /dev/null
+++ b/src/pages/deviceCenter/index/main.ts
@@ -0,0 +1,30 @@
+import Vue from "vue";
+import App from './App.vue';
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+
+import ToggleButton from 'vue-js-toggle-button';
+import VueAwesomeSwiper from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
+import * as VueWindow from "@hscmap/vue-window";
+import moment from 'moment';
+import Mixin from "./mixins";
+
+Vue.prototype.$moment = moment;
+Vue.use(ElementUI);
+Vue.use(ToggleButton);
+Vue.use(VueAwesomeSwiper as any);
+Vue.use(VueWindow);
+Vue.filter('moment', function (value, formatString) {
+ formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
+ return moment(value).format(formatString);
+
+});
+Vue.mixin(Mixin);
+
+new Vue({
+ el: '#app',
+ render: h => h(App)
+})
diff --git a/src/pages/deviceCenter/index/mixins.ts b/src/pages/deviceCenter/index/mixins.ts
new file mode 100644
index 0000000..52fb92b
--- /dev/null
+++ b/src/pages/deviceCenter/index/mixins.ts
@@ -0,0 +1,25 @@
+import TreeDataPool from "@/Pool/TreeData";
+import DataStackPool from "@/Pool/dataStack"
+import DataPool from "@/Pool/PollData"
+import VideoManageData from "@/Pool/VideoManageData";
+import TaskMange from '@/Pool/TaskMange'
+
+/* eslint-disable */
+const onlyTreeDataPool = new TreeDataPool
+const onlyDataStack = new DataStackPool
+const onlyDataPool = new DataPool
+const onlyVideoManageData = new VideoManageData
+const onlyTaskMange = new TaskMange
+
+const mixin = {
+ data() {
+ return {
+ TreeDataPool: onlyTreeDataPool,
+ DataStackPool: onlyDataStack,
+ VideoManageData: onlyVideoManageData,
+ TaskMange: onlyTaskMange,
+ PollData: onlyDataPool
+ };
+ },
+};
+export default mixin;
\ No newline at end of file
diff --git a/src/pages/settings/components/BasicSetting.vue b/src/pages/settings/components/BasicSetting.vue
index b720c44..604374d 100644
--- a/src/pages/settings/components/BasicSetting.vue
+++ b/src/pages/settings/components/BasicSetting.vue
@@ -178,26 +178,8 @@
<el-tab-pane label="鏃堕棿閰嶇疆" name="timeSet" v-if="isShow('settings:timeSet')">
<el-form label-width="100px">
<el-form-item label="璁惧鏃堕棿">
- <!-- <el-input v-model="equipmentTime" placeholder="璇疯緭鍏�" size="small"></el-input> -->
{{ equipmentTime }}
</el-form-item>
-
- <!-- <el-form-item label="鏃跺尯" prop="timezone">
- <el-select
- v-model="timezone"
- placeholder="璇烽�夋嫨"
- style="width: 360px; height: 32px"
- size="small"
- @change="checkTimeZone"
- >
- <el-option
- v-for="item in timeZoneOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </el-form-item>-->
<div style="text-align: left;padding: 10px 0px">
<div class="time-type">NTP鏍℃椂</div>
<div style="padding: 10px 0px;">
@@ -349,15 +331,15 @@
RadioSet
},
computed: {
- timeZoneOption() {
- let options = []
- TimeZones.forEach(zone => {
- options = options.concat(zone.utc.map(v => {
- return { value: v, label: v }
- }))
- })
- return options
- },
+ // timeZoneOption() {
+ // let options = []
+ // TimeZones.forEach(zone => {
+ // options = options.concat(zone.utc.map(v => {
+ // return { value: v, label: v }
+ // }))
+ // })
+ // return options
+ // },
isAdmin() {
if (
sessionStorage.getItem("userInfo") &&
@@ -503,7 +485,6 @@
this.initResourceConfig();
this.initClockConf();
//this.markStartTime();
-
});
},
beforeDestroy() {
@@ -578,7 +559,6 @@
},
runClock() {
this.equipmentTime = this.formatTime(++this.timestamp, 'Y-M-D h:m:s');
- // console.log(this.equipmentTime)
this.clockTimer = setTimeout(() => {
this.runClock();
}, 1000)
@@ -720,7 +700,6 @@
message: "璁剧疆鎴愬姛"
});
}
-
this.initClockConf();
})
},
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index d18c0c1..bedd193 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/src/pages/settings/components/ClusterManagement.vue
@@ -321,12 +321,12 @@
checkPsd(psd) {
return psd.trim().length === 6
},
- cleanValue() {
- this.members = [];
- },
- sHandleClick(tab, event) {
- console.log(tab, event);
- },
+ // cleanValue() {
+ // this.members = [];
+ // },
+ // sHandleClick(tab, event) {
+ // console.log(tab, event);
+ // },
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
@@ -347,25 +347,25 @@
});
},
- saveForm(formName) {
- this.$refs[formName].validate(valid => {
- if (valid) {
- alert("submit!");
- let json = {
- enable: this.vrIpForm.enable,
- serve_port: this.vrIpForm.serve_port,
- virtual_ip: this.vrIpForm.virtual_ip,
+ // saveForm(formName) {
+ // this.$refs[formName].validate(valid => {
+ // if (valid) {
+ // alert("submit!");
+ // let json = {
+ // enable: this.vrIpForm.enable,
+ // serve_port: this.vrIpForm.serve_port,
+ // virtual_ip: this.vrIpForm.virtual_ip,
- };
- setVrrp(json).then(() => {
- this.getVrrpInfo();
- });
- } else {
- console.log("error submit!!");
- return false;
- }
- });
- },
+ // };
+ // setVrrp(json).then(() => {
+ // this.getVrrpInfo();
+ // });
+ // } else {
+ // console.log("error submit!!");
+ // return false;
+ // }
+ // });
+ // },
join(formName) {
let _this = this;
@@ -552,16 +552,16 @@
}
}
},
- getVrrpInfo() {
- getVrrp().then(res => {
- if (res.success) {
- this.vrIpForm.virtual_ip = res.data.virtual_ip;
- this.vrIpForm.enable = res.data.enable;
- }
- }).catch(e => {
- console.log(e)
- })
- },
+ // getVrrpInfo() {
+ // getVrrp().then(res => {
+ // if (res.success) {
+ // this.vrIpForm.virtual_ip = res.data.virtual_ip;
+ // this.vrIpForm.enable = res.data.enable;
+ // }
+ // }).catch(e => {
+ // console.log(e)
+ // })
+ // },
async updateCluster() {
if (this.ruleForm.clustername === "") {
this.$message({
@@ -614,7 +614,15 @@
this.members = [];
this.innerNodes = [];
}
- }).catch(() => { });
+ }).catch(() => {
+ this.ruleForm.clustername = "";
+ this.ruleForm.clusterpwd = ""
+ this.clusterid = "";
+ this.isHasColony = false;
+ this.activeName = "1";
+ this.members = [];
+ this.innerNodes = [];
+ });
},
joinNode(event, node) {
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index d528eb6..9075503 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -570,8 +570,8 @@
{
name: '鏁伴噺',
type: 'bar',
- barWidth: '24%',
- data: [21, 102, 100, 1, 7, 14]
+ barWidth: '60%',
+ data: [{value:21,itemStyle:{color:'#3aa0ff'}},{value:102,itemStyle:{color:'#36cbcb'}},{value:100,itemStyle:{color:'#4dcb73'}},{value:1,itemStyle:{color:'#fad337'}},{value:7,itemStyle:{color:'#f2637b'}}, {value:14,itemStyle:{color:'#975fe4'}}]
}
]
},
@@ -641,18 +641,18 @@
name: '寮傚父浜嬩欢',
type: 'pie',
color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['70%', '90%'],
+ radius: ['50%', '80%'],
//center: ['40%','60%'],
avoidLabelOverlap: false,
label: {
show: false,
- position: 'center',
+ // position: 'center',
formatter: '{b}\n{c} '
},
emphasis: {
label: {
show: true,
- fontSize: '30',
+ fontSize: '20',
fontWeight: 'bold'
}
},
@@ -910,24 +910,35 @@
name: '寮傚父浜嬩欢',
type: 'pie',
color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['70%', '90%'],
+ radius: ['50%', '80%'],
//center: ['40%','60%'],
avoidLabelOverlap: false,
label: {
show: false,
- position: 'center',
+ // position: 'center',
formatter: '{b}\n{c} '
},
emphasis: {
label: {
show: true,
- fontSize: '30',
+ fontSize: '20',
fontWeight: 'bold'
}
},
- labelLine: {
- show: false
+ itemStyle:{
+ normal:{
+ label:{
+ show:true,
+ formatter: '{b}\n{c} ',
+ labelLine:{
+ show:true
+ }
+ }
+ }
},
+ // labelLine: {
+ // show: false
+ // },
data: [
{ value: 32, name: '闃叉姢鍦版' },
{ value: 55, name: '杩涘嚭绔�' },
@@ -1110,6 +1121,46 @@
},
}
+
+
+
+// title : {
+// /* text: '鏌愮珯鐐圭敤鎴疯闂潵婧�',
+// subtext: '绾睘铏氭瀯',
+// x:'center'*/
+// },
+// tooltip : {
+// trigger: 'item',
+// formatter: "{a} <br/>{b} : {c} ({d}%)"
+// },
+// legend: {
+// orient: 'vertical',
+// left: 'right',
+// bottom:'80px',
+// data: ['浼佷笟','涓綋','绀句細缁勭粐','浜嬩笟鍗曚綅','鏈哄叧鍗曚綅','鍏朵粬']
+// },
+// series : [
+// {
+// name: '鍗犳瘮鎯呭喌',
+// type: 'pie',
+// radius : '55%',
+// center: ['40%', '60%'],
+// data: data,
+// /*鍦╯eries涓坊鍔爄temStyle鍗冲彲鐩磋鏄剧ず楗煎瀷鏁板��*/
+// itemStyle:{
+// normal:{
+// label:{
+// show: true,
+// formatter: '{b} : {c} ({d}%)'
+// },
+// labelLine :{show:true}
+// }
+// }
+// }
+// ]
+
+// };
+// myChart_qyhhmd.setOption(option,true)
</script>
<style lang="scss">
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index b2763e7..8645349 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -360,11 +360,11 @@
-->
<!-- <div > -->
+ <!-- :modal="false" -->
<el-dialog v-drag v-resize
class="dialog-video"
:visible="videoDialogVisible"
- @close="videoDialogVisible = false"
- :modal="false"
+ @close="closeDial"
:close-on-click-modal="false"
:destroy-on-close="true"
:modal-append-to-body="false"
@@ -375,7 +375,7 @@
<span>鎾斁瑙嗛</span>
</div>
</div>
- <video-analyze :videoDetails="selectedVideo" />
+ <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" />
</el-dialog>
<!-- </div> -->
@@ -516,6 +516,10 @@
}
);
},
+ closeDial(){
+ this.videoDialogVisible = false
+ this.selectedVideo={}
+ },
handleTabSizeChange(size) {
this.tabPageSize = size;
this.filterSearchData();
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index 1d93278..e0130a2 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -304,7 +304,6 @@
}
},
searchName(val) {
- console.log(this.personList, val);
if (val == "") {
this.searchMemberByOrg();
}
@@ -330,7 +329,7 @@
checkedCount > 0 && checkedCount < this.personList.length;
},
cancelDistribute(row) {
- let arr = row.LKGList.map((x) => x.ID);
+ let arr = row.LKGList.map(x => x.ID);
cancelMission({ LkgIDs: arr }).then((res) => {
if (res.success) {
this.$notify({
@@ -408,7 +407,6 @@
let arr = pickList.map((a) => {
return a.map((item) => item.ID);
});
-
addToAssignList({
UserID: this.memberChecked,
LkgIDs: arr,
diff --git a/src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue b/src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue
index 9d3c697..0aa24ee 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue
@@ -74,6 +74,7 @@
<style lang="scss">
.time-shortcut {
+ margin-right: 62px;
ul {
display: flex;
li {
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 37885b5..c1a6ea0 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -73,7 +73,6 @@
<div style="display: none"></div>
<div class="currentPlayer">
<ali-player
- @playing="getPlayStatus"
@pause="isStop = true"
@play="isStop = false"
@timeupdate="timeUpdate"
@@ -112,7 +111,6 @@
@pause="isStop = true"
@play="isStop = false"
:ref="`player_${videoArrs[index].ID}`"
- @ready="videoReady"
/>
</div>
</template>
@@ -125,7 +123,7 @@
v-for="(item, index) in eventMarks"
:key="index"
>
- <div slot="content">
+ <div slot="content">
{{ getTimeStr(item.offset) }}<br />{{ item.text }}
</div>
<div
@@ -147,39 +145,43 @@
<div
class="label-dot"
:style="{
- left: (item.offset/maxSecond)*100 + '%',
+ left: (item.offset / maxSecond) * 100 + '%',
}"
@click="dotJump(item.offset)"
></div>
</el-tooltip>
+ <div ref="time-clip" class="time-clip"></div>
- <el-tooltip placement="top" :offset="440-hoverOffset"
- :hide-after="0" :visible-arrow="false"
- >
- <div slot="content" >{{hoverTime}}</div>
<el-slider
v-model="curTime"
- :format-tooltip="formatTooltip"
+ :show-tooltip="false"
:max="maxSecond"
- @mousemove.native="triggerHover"
+ @mousemove.native.stop="triggerHover"
+ @mouseleave.native="leaveBar"
+ @mouseover.native="intoBar"
@change="progressChange"
- @input="inTimeChange"
></el-slider>
-</el-tooltip>
-
- </div>
+ </div>
<div class="control-zone">
<span class="time">{{ curPlayTime }} / {{ maxVideoTime }}</span>
-
-
- <div class="play-btn" @click="playAll" v-if="showPlayBtn">
-
- <span class="icon iconfont"></span>
-
- </div>
- <div class="stop-btn" @click="pauseAll" v-else>
-
- <span class="icon iconfont"></span>
+ <div class="play-btn">
+ <div class="group">
+ <i class="el-icon-d-arrow-left" @click="moveBar(-10)"></i>
+ <i
+ class="el-icon-video-play"
+ style="font-size: 29px; cursor: pointer"
+ @click="playAll"
+ v-if="showPlayBtn"
+ ></i>
+ <i
+ class="el-icon-video-pause"
+ style="font-size: 29px; cursor: pointer"
+ @click="pauseAll"
+ v-else
+ ></i>
+ <i class="el-icon-d-arrow-right" @click="moveBar(10)"></i>
+ </div>
+ <!-- <span class="icon iconfont"></span> -->
</div>
</div>
</div>
@@ -216,8 +218,8 @@
>
<div class="time">
<span
- >{{ zeroize(Math.floor(mark.Time / 60)) }}:{{
- zeroize(mark.Time % 60)
+ >{{ pad0(Math.floor(mark.Time / 60)) }}:{{
+ pad0(mark.Time % 60)
}}</span
>
<i class="el-icon-edit" @click="editCurLabel(mark)"></i>
@@ -286,7 +288,7 @@
</div>
<div class="btns">
<el-button @click="cancelLabelChecked" size="small">鍙栨秷</el-button>
- <el-button @click="submitLabelChecked()" size="small" type="primary"
+ <el-button @click="submitLabelChecked" size="small" type="primary"
>纭畾</el-button
>
</div>
@@ -307,6 +309,27 @@
} from "@/api/shuohuang";
import DatasetChart from "./charts/datasetForVideo";
import AliPlayer from "./aliPlayer/index";
+
+function throttle(fn, delay) {
+ // 璁板綍涓婁竴娆″嚱鏁拌Е鍙戠殑鏃堕棿浠ュ強瀹氫箟涓�涓畾鏃跺櫒
+ var lastTime, timer;
+ var delay = delay || 500;
+ return function (e) {
+ var nowTime = Date.now();
+ if (lastTime && nowTime - lastTime < delay) {
+ clearTimeout(timer);
+ timer = setTimeout(function () {
+ // 璁板綍涓婁竴娆″嚱鏁拌Е鍙戠殑鏃堕棿
+ lastTime = nowTime;
+ // 淇this鎸囧悜闂
+ fn.call(this, e);
+ }, delay);
+ } else {
+ lastTime = nowTime;
+ fn.call(this, e);
+ }
+ };
+}
export default {
name: "VideoAnalyze",
@@ -353,8 +376,6 @@
curPlayTime: "00:00",
maxSecond: 0,
isStop: false,
- hoverTime:"",
- hoverOffset:0,
};
},
watch: {
@@ -369,10 +390,13 @@
deep: true,
},
videoDetails: {
- handler(newVal, oldVal) {
+ handler(newVal) {
this.getCurVideos(newVal);
},
deep: true,
+ },
+ curTime(newVal) {
+ this.curPlayTime = this.getTimeStr(newVal);
},
},
mounted() {
@@ -381,15 +405,36 @@
this.getCurVideos(this.videoDetails);
this.getRelatedVideos(this.videoDetails);
},
+ destroyed() {
+ this.videoArrs.length = 0;
+ },
methods: {
- triggerHover(e){
- this.hoverOffset=e.offsetX
- this.hoverTime=this.getTimeStr((e.offsetX/880)*this.maxSecond)
+ triggerHover(e) {
+ let fn = throttle(this.hoverAction, 2000);
+ fn(e);
},
- getPlayStatus(e) {
- console.log(e, 1111);
+ hoverAction(e) {
+ console.log(e.target.className);
+ if (
+ e.target.className == "el-slider__button-wrapper hover" ||
+ e.target.className == "el-tooltip el-slider__button hover"
+ ) {
+ this.$refs["time-clip"].style["left"] =
+ (this.curTime / this.maxSecond) * 880 - 20 + "px";
+ this.$refs["time-clip"].innerHTML = this.curPlayTime;
+ return;
+ }
+ this.$refs["time-clip"].style["left"] = e.offsetX - 20 + "px";
+ this.$refs["time-clip"].innerHTML = this.getTimeStr(
+ (e.offsetX / 880) * this.maxSecond
+ );
},
- videoReady(a, b) {},
+ intoBar(e) {
+ this.$refs["time-clip"].style["display"] = "block";
+ },
+ leaveBar(e) {
+ this.$refs["time-clip"].style["display"] = "none";
+ },
playAll() {
this.showPlayBtn = false;
if (this.guid == 1) {
@@ -413,45 +458,37 @@
});
}
},
- inTimeChange(val) {},
+ moveBar(val) {
+ this.curTime += val;
+ this.progressChange(this.curTime);
+ },
progressChange(val) {
- console.log(val);
this.showPlayBtn = false;
- this.curPlayTime = this.getTimeStr(val);
let that = this;
if (this.guid == 1) {
this.$refs[`player_${this.curVideo.ID}`][0].pause();
this.$refs[`player_${this.curVideo.ID}`][0].seek(val);
- this.$refs[`player_${this.curVideo.ID}`][0].play();
+ // this.$refs[`player_${this.curVideo.ID}`][0].play();
setTimeout(() => {
let curT = that.$refs[
`player_${that.curVideo.ID}`
][0].getCurrentTime();
- that.barRolling(curT);
}, 600);
} else {
this.videoArrs.forEach((v, i) => {
this.$refs[`player_${v.ID}`][0].seek(val);
- this.$refs[`player_${v.ID}`][0].play();
+ // this.$refs[`player_${v.ID}`][0].play();
if (i == 0) {
let curT = this.$refs[`player_${v.ID}`][0].getCurrentTime();
- this.barRolling(curT);
}
});
}
},
getTimeStr(sec) {
- return `${
- Math.floor(sec / 60) < 10
- ? "0" + Math.floor(sec / 60)
- : Math.floor(sec / 60)
- }:${
- Math.floor(sec % 60) < 10
- ? "0" + Math.floor(sec % 60)
- : Math.floor(sec % 60)
- }`;
+ return `${this.pad0(Math.floor(sec / 60))}:${this.pad0(
+ Math.floor(sec % 60)
+ )}`;
},
- barRolling(curT) {},
timeUpdate(e, index) {
if (this.isStop) {
return;
@@ -471,10 +508,6 @@
} else {
this.curTime = curT;
}
- this.curPlayTime = this.getTimeStr(this.curTime);
- },
- formatTooltip(val) {
- return this.curPlayTime;
},
videoMouseEnter(e) {
let target = e.target;
@@ -500,18 +533,27 @@
},
handleCommand(cmd) {
let _this = this;
- this.curCamera = cmd.Camera;
- this.curRoomVideos = this.allCurVideos.filter((item) => {
+
+ getCarVideos({
+ TrainNumber: cmd.TrainNumber,
+ CarNumber: cmd.CarNumber,
+ Driver1: cmd.Driver1,
+ }).then((res) => {
+ _this.allCurVideos = res.data;
+ _this.curCamera = cmd.Camera;
+ _this.curRoomVideos = _this.allCurVideos.filter((item) => {
return item.Camera == cmd.Camera;
});
- this.curVideo = this.curRoomVideos.find((item) => {
- return item.UniqeID == this.curVideo.UniqeID;
+ _this.curVideo = _this.curRoomVideos.find((item) => {
+ return item.ID == cmd.ID;
});
- this.$nextTick(() => {
+ _this.$nextTick(() => {
_this.$refs[`player_${_this.curVideo.ID}`][0].init();
});
+ });
+
},
- zeroize(val) {
+ pad0(val) {
return val < 10 ? "0" + val : val;
},
checkCurVideo(index) {
@@ -531,13 +573,13 @@
item.marks = _this.mergeMarks(item);
});
_this.curVideo = res.data.find((item) => item.ID == v.ID);
- _this.curVideo.marks.forEach(item=>{
+ _this.curVideo.marks.forEach((item) => {
if (item.type == 0) {
- _this.eventMarks.push(item)
+ _this.eventMarks.push(item);
} else {
- _this.labelMarks.push(item)
+ _this.labelMarks.push(item);
}
- })
+ });
if (_this.guid == 1) {
_this.maxVideoTime = _this.curVideo.VideoTime;
}
@@ -562,10 +604,10 @@
let arr = [];
let map = {};
res.data.forEach((item) => {
- this.popDownArr.push(item);
+ _this.popDownArr.push(item);
});
- if (this.popDownArr.length) {
- this.curCamera = this.popDownArr[0].Camera;
+ if (_this.popDownArr.length) {
+ _this.curCamera = _this.popDownArr[0].Camera;
}
});
},
@@ -610,7 +652,6 @@
console.log(`calc(` + 100 / guid + `% -10px)`);
this.$refs[`gridVideoItem_${i}`][0].style.width =
`calc(` + 100 / guid + `%)`;
- // this.$refs["playerWrap"].offsetWidth / guid + "px";
this.$refs[`gridVideoItem_${i}`][0].style.height =
`calc(` + 100 / guid + `%)`;
// this.$refs["playerWrap"].offsetHeight / guid + "px";
@@ -621,9 +662,9 @@
cancelLabelChecked() {
this.labelDialogVisible = false;
},
- dotJump(offset){
- this.curTime = offset
- this.progressChange(offset)
+ dotJump(offset) {
+ this.curTime = offset;
+ this.progressChange(offset);
},
submitLabelChecked() {
let _this = this;
@@ -645,23 +686,27 @@
Codes: this.labelCheckedList.join(","),
Desc: desc.join("锛�"),
};
+
editLabel(query).then((rsp) => {
if (rsp && rsp.success) {
_this.labelDialogVisible = false;
- this.$set(_this.curVideo, "LableLst", []);
- //_this.curVideo.LableLst = [];
+ _this.$set(_this.curVideo, "LableLst", []);
rsp.data.forEach((label) => {
if (label.ParentID == _this.curVideo.ID) {
_this.curVideo.LableLst.push(label);
}
});
-
- this.$message.success("娣诲姞鎴愬姛");
+ _this.labelMarks.push({
+ type: 1,
+ offset: +query.Time,
+ text: query.Desc,
+ });
+ _this.$message.success("娣诲姞鎴愬姛");
// 鏍囨敞
- _this.setMarks(this.curVideo);
+ _this.setMarks(_this.curVideo);
_this.$parent.$parent.filterSearchData();
} else {
- this.$message.warning(rsp.msg);
+ _this.$message.warning(rsp.msg);
}
});
},
@@ -669,7 +714,6 @@
this.labelCheckedList = [];
this.selectedLabelId = "";
this.labelDialogVisible = true;
-
// 淇濆瓨鐐瑰嚮鏍囨敞鐨勬椂闂�
this.setLabelTime = this.$refs[`player_${video.ID}`][0].getCurrentTime();
},
@@ -680,34 +724,46 @@
},
removeCurLabel(mark) {
let _this = this;
- delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then((rsp) => {
+ let obj = {
+ Desc: mark.Desc,
+ ParentUniqID: mark.ParentUniqID,
+ Time: mark.Time,
+ ParentID:mark.ParentID
+ };
+ delLabel(obj).then((rsp) => {
if (rsp && rsp.success) {
_this.curVideo.LableLst = rsp.data;
- this.$message.success("鍒犻櫎鎴愬姛");
+ _this.$message.success("鍒犻櫎鎴愬姛");
// 鏍囨敞
+ _this.labelMarks.length = 0;
+ _this.curVideo.LableLst.forEach((x) => {
+ _this.labelMarks.push({
+ type: 1,
+ offset: +x.Time,
+ text: x.Desc,
+ });
+ });
_this.setMarks(_this.curVideo);
_this.$parent.$parent.filterSearchData();
} else {
- this.$message.warning(rsp.msg);
+ _this.$message.warning(rsp.msg);
}
});
},
mergeMarks(videoInfo) {
const eMarks = videoInfo.EventLst.map((item) => {
- let obj = {
+ return {
offset: item.SecondsInVideo,
text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
type: 0,
};
- return obj;
});
const labMarks = videoInfo.LableLst.map((lable) => {
- let obj = {
+ return {
offset: +lable.Time,
text: lable.Desc,
type: 1,
};
- return obj;
});
return eMarks.concat(labMarks);
},
@@ -728,9 +784,7 @@
text-align: left;
.content-top {
margin-bottom: 15px;
-
// height: calc(60% + -16px);
-
.grid-check {
text-align: right;
margin-bottom: 3px;
@@ -749,7 +803,6 @@
}
span {
font-size: 17px;
-
color: #cacaca;
padding-left: 12px;
cursor: pointer;
@@ -761,14 +814,12 @@
.video-area {
display: flex;
height: 100%;
-
.info-list {
width: 180px;
min-width: 180px;
margin-right: 10px;
.v-name-block {
height: 484px;
-
overflow: auto;
}
.video-name {
@@ -814,9 +865,6 @@
float: left;
}
}
- // .prism-controlbar{
- // display: none;
- // }
.currentPlayer {
border: 2px solid aqua;
height: 100%;
@@ -834,22 +882,18 @@
margin: 0px 30px;
position: relative;
.self-dot {
- // top: 16px;
position: absolute;
- height: 6px;
+ height: 8px;
width: 6px;
z-index: 1;
background-color: lightcoral;
- // border-radius: 30%;
- // pointer-events: none;
cursor: pointer;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
- .label-dot{
- // top: 16px;
+ .label-dot {
position: absolute;
- height: 6px;
+ height: 8px;
width: 6px;
z-index: 1;
background-color: yellowgreen;
@@ -857,11 +901,19 @@
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
- .el-slider{
- margin: 16px 0;
- .el-slider__runway{
- margin: 0;
- }
+ .el-slider {
+ margin: 15px 0;
+
+ .el-slider__runway {
+ margin: 0;
+ height: 8px;
+ .el-slider__bar {
+ height: 8px;
+ }
+ .el-slider__button-wrapper {
+ width: 16px;
+ }
+ }
}
.el-slider__button {
width: 12px;
@@ -870,33 +922,44 @@
.el-slider__stop {
background-color: lightcoral;
}
+ .time-clip {
+ width: 40px;
+ background-color: dimgray;
+ color: white;
+ display: none;
+ font-size: 12px;
+ top: -26px;
+ border-radius: 3px;
+ left: -20px;
+ height: 19px;
+ text-align: center;
+ line-height: 19px;
+ position: absolute;
+ }
}
.control-zone {
.time {
float: left;
margin-left: 23px;
- // color: #fff;
}
.play-btn {
- width: 24px;
- height: 24px;
- cursor: pointer;
- // background: url(/apps/shuohuangMonitorAnalyze/img/smallplay.png)
-
+ width: 200px;
+ height: 27px;
+ border-radius: 4px;
margin: 0 auto;
- .iconfont{
- font-size: 25px;
+ .group {
+ text-align: center;
+ .el-icon-d-arrow-left {
+ cursor: pointer;
+ margin-right: 20px;
+ font-size: 27px;
+ }
+ .el-icon-d-arrow-right {
+ cursor: pointer;
+ font-size: 27px;
+ margin-left: 20px;
+ }
}
- }
- .stop-btn {
- width: 24px;
- height: 24px;
- cursor: pointer;
- // background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
- .iconfont{
- font-size: 25px;
- }
- margin: 0 auto;
}
}
}
@@ -973,9 +1036,6 @@
}
p.label {
line-height: 36px;
- }
- .label-radio {
- padding: 20px;
}
.label-check {
padding: 20px;
diff --git a/src/pages/systemSettings/components/CloudNode.vue b/src/pages/systemSettings/components/CloudNode.vue
new file mode 100644
index 0000000..800651a
--- /dev/null
+++ b/src/pages/systemSettings/components/CloudNode.vue
@@ -0,0 +1,149 @@
+<template>
+ <div class="cloud">
+ <div class="inner">
+ <div class="rect">
+ <serfDiagram
+ ref="inside-nodes"
+ :members="insideNodes"
+ :agent="agentName"
+ :sizeX="insideSizeX"
+ :sizeY="insideSizeY"
+ :startX="insideStartX"
+ :isShowHover="true"
+ class="inside-nodes"
+ ></serfDiagram>
+ </div>
+ </div>
+ <div class="outer" v-if="outsideNodes.length">
+ <serfDiagram
+ ref="outer-nodes"
+ :members="outsideNodes"
+ :agent="agentName"
+ :sizeX="280"
+ :sizeY="370"
+ :startX="60"
+ class="outer-nodes"
+ ></serfDiagram>
+ </div>
+ </div>
+</template>
+<script>
+import SerfDiagram from "@/components/serfDiagram";
+export default {
+ name: "cloudNode",
+ props: {
+ nodes: Array,
+ },
+ components: {
+ SerfDiagram,
+ },
+ data() {
+ return {
+ agentName: "",
+ nodeIcons: [],
+ //insideNodes: [],
+ BaseWidth: 150,
+ BaseHeight: 70,
+ minWidth: 0,
+ minHeight: 0,
+ };
+ },
+ mounted() {
+ console.log(this.nodes);
+ //this.getInsideNodes();
+ },
+ methods: {
+ getRandom(index) {
+ if (index % 2 == 0) {
+ return Math.random() * 20;
+ } else {
+ return Math.random() * 50;
+ }
+ },
+ getInsideNodes() {
+ let arr = this.nodes.filter(
+ (item) => item.hardwareType == "01" || item.hardwareType == "02"
+ );
+ let len = arr.length;
+ let lefts = [];
+ let tops = [];
+ this.insideNodes = arr.map((item, index) => {
+ lefts.push((20 - len) * (index + 1) + this.getRandom(index));
+ tops.push(30 * (index + 1));
+ return {
+ l: 10 + this.getRandom(index),
+ t: 30 * (index + 1),
+ nodeName: item.nodeName,
+ id: item.id,
+ workType: item.workType,
+ };
+ });
+ this.minWidth = Math.max(...lefts) - Math.min(...lefts);
+ this.minHeight = Math.max(...tops) - Math.min(...tops);
+ console.log("w,h", this.minWidth, this.minHeight);
+ },
+ },
+ computed: {
+ cloudPic() {
+ return "/images/settings/cloud.png";
+ },
+ insideNodes() {
+ return this.nodes.filter(
+ (item) => item.hardwareType == "01" || item.hardwareType == "02"
+ );
+ },
+ insideSizeX() {
+ return 160 + 200 * 0.2 * this.insideNodes.length <= 400
+ ? 160 + 200 * 0.2 * this.insideNodes.length
+ : 400;
+ },
+ insideSizeY() {
+ return 140 + 200 * 0.2 * this.insideNodes.length <= 380
+ ? 140 + 200 * 0.2 * this.insideNodes.length
+ : 380;
+ },
+ insideStartX() {
+ return this.insideSizeX / 3;
+ },
+ outsideNodes() {
+ return this.nodes.filter((item) => item.hardwareType == "03");
+ },
+ },
+};
+</script>
+<style lang="scss">
+.cloud {
+ width: 100%;
+ display: flex;
+ .inner {
+ background: url("/images/settings/easy-cloud.png") no-repeat;
+ background-size: 100%;
+ margin-top: -55px;
+ margin-left: 55px;
+
+ .rect {
+ position: relative;
+ margin: 130px 100px 70px;
+ .node {
+ position: absolute;
+ .node-icon {
+ width: 40px;
+ height: 40px;
+ }
+ .node-name {
+ font-size: 14px;
+ color: #333;
+ }
+ }
+ }
+ }
+ .outer {
+ width: 40%;
+ position: relative;
+ text-align: left;
+ .node {
+ position: absolute;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/systemSettings/components/switchBar.vue b/src/pages/systemSettings/components/switchBar.vue
new file mode 100644
index 0000000..0cbc558
--- /dev/null
+++ b/src/pages/systemSettings/components/switchBar.vue
@@ -0,0 +1,42 @@
+<template>
+ <div class="switch-bar">
+ <div class="name">{{ barName }}</div>
+ <el-switch
+ v-model="value"
+ active-color="rgba(61, 104, 225, 1)"
+ @change="switchChange"
+ >
+ </el-switch>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ // value: false,
+ };
+ },
+ props: ["barName","value"],
+ methods: {
+ switchChange(val) {
+ this.$emit("switchChange",val);
+ },
+ },
+};
+</script>
+<style lang="scss">
+.switch-bar {
+ 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;
+ }
+}
+</style>
diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue
new file mode 100644
index 0000000..b13a647
--- /dev/null
+++ b/src/pages/systemSettings/index/App.vue
@@ -0,0 +1,1286 @@
+<template>
+ <div class="container">
+ <div class="container-left">
+ <div
+ class="left-card"
+ 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"
+ v-for="(item, index) in accountArr"
+ :key="index"
+ >
+ <div class="touxiang">
+ <img src="" alt="" />
+ </div>
+ <span class="user-name">{{ item.name }}</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" active-color="rgba(61, 104, 225, 1)">
+ </el-switch>
+ </div>
+
+ <div class="line">
+ <div class="name">鎵嬪姩鏍″</div>
+ <el-switch v-model="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">
+ <div class="content-top">
+ <div class="touxiang-big"></div>
+ <div class="user-desc">
+ <div class="username">椋炲埄娴�</div>
+ <div class="nickname">
+ <span>鍏斿厰</span>
+ <span class="icon iconfont"></span>
+ </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>
+
+ <div class="p-title">褰撳墠瀵嗙爜锛�</div>
+
+ <el-input
+ placeholder="蹇呭～"
+ v-model="input1"
+ show-password
+ ></el-input>
+ <div class="p-title">鏂板瘑鐮侊細</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="input2"
+ show-password
+ ></el-input>
+ <div class="p-title">纭瀵嗙爜锛�</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="input3"
+ show-password
+ ></el-input>
+
+ <div class="btns">
+ <div class="cancel" @click="cancelChangePassword">鍙栨秷</div>
+ <div class="ok">淇濆瓨</div>
+ </div>
+ </div>
+
+ <div class="permission" v-if="inAccountDetail && isSetPermission">
+ <div class="title">鏉冮檺绠＄悊</div>
+
+ <div class="line">
+ <div class="name">瀹炴椂鐩戞帶</div>
+ <el-switch
+ v-model="isRealtime"
+ active-color="rgba(61, 104, 225, 1)"
+ >
+ </el-switch>
+ </div>
+ <div class="line">
+ <div class="name">缁熻鏌ヨ</div>
+ <el-switch v-model="isCount" active-color="rgba(61, 104, 225, 1)">
+ </el-switch>
+ </div>
+ <div class="line">
+ <div class="name">绠楀姏绠＄悊</div>
+ <el-switch
+ v-model="isCalculate"
+ active-color="rgba(61, 104, 225, 1)"
+ >
+ </el-switch>
+ </div>
+
+ <div class="btns">
+ <div class="cancel" @click="cancelSet">鍙栨秷</div>
+ <div class="ok">淇濆瓨</div>
+ </div>
+ </div>
+
+ <div class="add-account-page" v-if="inAccountDetail && isAddAccount">
+ <div class="title">娣诲姞璐︽埛</div>
+ <div class="upload-group">
+ <div
+ class="upload-jpg"
+ v-for="(item, index) in jpgArr"
+ :key="index"
+ ></div>
+ <div
+ class="upload-jpg"
+ style="height: 0px; visibility: hidden"
+ ></div>
+ <div
+ class="upload-jpg"
+ style="height: 0px; visibility: hidden"
+ ></div>
+ <div
+ class="upload-jpg"
+ style="height: 0px; visibility: hidden"
+ ></div>
+ <div
+ class="upload-jpg"
+ style="height: 0px; visibility: hidden"
+ ></div>
+ </div>
+ <div class="fill-group">
+ <div class="p-title">鐢ㄦ埛鍚嶏細</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="input1"
+ show-password
+ ></el-input>
+ <div class="p-title">鏄电О</div>
+ <el-input
+ placeholder="閫夊～"
+ v-model="input2"
+ show-password
+ ></el-input>
+ <div class="p-title">瀵嗙爜锛�</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="input3"
+ show-password
+ ></el-input>
+ <div class="p-title">纭瀵嗙爜锛�</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="input3"
+ show-password
+ ></el-input>
+ </div>
+ <div class="btns">
+ <div class="cancel" @click="cancelAdd">鍙栨秷</div>
+ <div class="ok">淇濆瓨</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>
+ <!-- :disabled="syncType === '2'" -->
+ <!-- :disabled="syncType === '2'" -->
+ <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">
+
+ <span v-show="!showMonthInput">{{ syncMonth }}</span>
+ <input
+ class="input-box"
+ v-show="showMonthInput"
+ ref="iptYrs"
+ oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4);"
+ 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">{{ syncDay }} 鏃�</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 {
+ getDevInfo,
+ getAlarmConfig,
+ saveDevInfo,
+ saveAlarmConfig,
+ getClockInfo,
+ saveClockInfo,
+ testNTPserver,
+ getResourceConfig,
+ saveResourceConfig,
+} from "@/api/system";
+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() {
+ return {
+ showAccount: true,
+ syncYrs: "",
+ syncMonth: "",
+ syncHour: "",
+ syncDay: "",
+ syncMin: "",
+ syncSec: "00",
+ isSyncBrowser: false,
+ showDateTime: false,
+ isAddAccount: false,
+ isCount: false,
+ isCalculate: false,
+ browserTimer: null,
+ timezone: "",
+ isRealtime: false,
+ showHourInput: false,
+ showMinInput: false,
+ showSecInput: false,
+ showYrsInput: 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: [{ name: "璐濊拏" }, { name: "鏈辫开" }, { name: "鍗″皵" }],
+ jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
+ isManual: false,
+ isNtp: true,
+ activePage: "璐︽埛",
+ activeIndex: 0,
+ clockTimer: null,
+ inputHour: "",
+ inputMin: "",
+ inputSec: "",
+ inputYrs: "",
+ };
+ },
+ beforeDestroy() {
+ clearTimeout(this.clockTimer);
+ clearInterval(this.browserTimer);
+ },
+ mounted() {
+ const s = document.getElementsByClassName("left-card")[0];
+ s.style.backgroundColor = "rgba(61, 104, 225, 1)";
+ s.style.color = "#fff";
+ this.$nextTick(() => {
+ // this.initSysinfo();
+ // this.initResourceConfig();
+ this.initClockConf();
+ });
+ },
+ methods: {
+ 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;
+ }
+ },
+ 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.$notify({
+ type: "error",
+ message: "NTP 鏈嶅姟鍣ㄥ湴鍧�涓嶈兘涓虹┖",
+ });
+ return false;
+ } else if (this.timeInterval === "") {
+ this.timeInterval = 1;
+ }
+ } else {
+ if (this.settime === "") {
+ this.$notify({
+ type: "error",
+ message: "璁剧疆鏃堕棿涓嶈兘涓虹┖",
+ });
+ return false;
+ }
+ }
+ let requestBody = {
+ timeZone: this.timezone,
+ ntp: this.syncType === "1",
+ ntpServer: this.ntpServer,
+ interval: this.timeInterval,
+ newTime: this.settime,
+ };
+ saveClockInfo(requestBody).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.$notify({
+ type: "success",
+ message: "璁剧疆鎴愬姛",
+ });
+ }
+ this.initClockConf();
+ });
+ },
+ 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;
+ },
+ 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";
+ }
+ 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();
+ }
+ }
+ });
+ },
+ openMenu(item, i) {
+ const old = document.getElementsByClassName("left-card")[
+ this.activeIndex
+ ];
+ old.style.backgroundColor = "initial";
+ old.style.color = "rgba(81, 81, 81, 1)";
+
+ this.activePage = item.name;
+ this.activeIndex = i;
+ const s = document.getElementsByClassName("left-card")[i];
+ s.style.backgroundColor = "rgba(61, 104, 225, 1)";
+ s.style.color = "#fff";
+ },
+ 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(val) {
+ this.isSyncBrowser = val;
+ if (val == false) {
+ console.log(12121);
+ 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);
+ }
+ },
+ openChangePw() {},
+ showAddAccount() {
+ this.inAccountDetail = true;
+ this.isAddAccount = true;
+ },
+ cancelAdd() {
+ this.inAccountDetail = false;
+ this.isAddAccount = false;
+ },
+ cancelChangePassword() {
+ this.isChangePw = false;
+ this.inAccountDetail = false;
+ },
+ 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(() => {
+ this.$message({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛!",
+ });
+ })
+ .catch(() => {});
+ },
+ openPermission() {
+ this.inAccountDetail = true;
+ this.isSetPermission = true;
+ },
+ },
+
+ watch: {
+ isManual(v) {
+ this.isNtp = !v;
+ v && (this.syncType = "2");
+ if (v) {
+ [
+ this.syncYrs,
+ this.syncMonth,
+ this.syncDay,
+ ] = this.equipmentDate.split("-");
+ [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
+ ":"
+ );
+ }
+ },
+ isNtp(v) {
+ this.isManual = !v;
+ v && (this.syncType = "1");
+ },
+ },
+};
+</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: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 {
+ .account-list {
+ height: 530px;
+ }
+ .add-account {
+ color: rgba(61, 104, 225, 1);
+ .iconfont {
+ cursor: pointer;
+ font-size: 30px;
+ }
+ }
+ .account-card {
+ height: 40px;
+ background-color: goldenrod;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ .touxiang {
+ height: 30px;
+ width: 30px;
+ background-color: green;
+ }
+ .user-name {
+ margin-left: 10px;
+ }
+ }
+ }
+ .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: 150px;
+ background-color: antiquewhite;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .touxiang-big {
+ width: 100px;
+ height: 100px;
+ background-color: indigo;
+ }
+ .user-desc {
+ background-color: khaki;
+ height: 100px;
+ width: 150px;
+ display: flex;
+ flex-direction: column;
+ align-items: baseline;
+ .username {
+ margin: 5px 15px;
+ }
+ .nickname {
+ margin: 5px 15px;
+ }
+ }
+ }
+ .list-btn {
+ display: flex;
+
+ flex-direction: column;
+ align-items: center;
+ .item-btn {
+ width: 500px;
+ height: 50px;
+ background-color: rgba(240, 240, 240, 1);
+ margin-bottom: 10px;
+ }
+ }
+ }
+ .change-pw {
+ .p-title {
+ text-align: left;
+ }
+ }
+ .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 {
+ background-color: lightcyan;
+ padding: 10px 50px;
+ .upload-group {
+ background-color: lightgrey;
+ height: 100px;
+ display: flex;
+ .upload-jpg {
+ height: 40px;
+ width: 40px;
+ background-color: lightcoral;
+ margin-bottom: 20px;
+ }
+ }
+ .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;
+ }
+ .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: 200px;
+
+ .cancel {
+ height: 40px;
+ width: 48%;
+
+ border-radius: 8px;
+ background-color: rgba(240, 240, 240, 1);
+ line-height: 40px;
+ font-size: 14px;
+ }
+ .ok {
+ height: 40px;
+ width: 48%;
+
+ border-radius: 8px;
+ background-color: rgba(61, 104, 225, 1);
+ color: #fff;
+ line-height: 40px;
+ font-size: 14px;
+ }
+ }
+ }
+}
+</style>
+
+
diff --git a/src/pages/systemSettings/index/main.ts b/src/pages/systemSettings/index/main.ts
new file mode 100644
index 0000000..491ea9a
--- /dev/null
+++ b/src/pages/systemSettings/index/main.ts
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+Vue.use(ElementUI)
+
+new Vue({
+ el: '#app',
+ render: h => h(App)
+})
diff --git a/src/pages/systemSettings/views/NetSettings.vue b/src/pages/systemSettings/views/NetSettings.vue
new file mode 100644
index 0000000..b2e0eac
--- /dev/null
+++ b/src/pages/systemSettings/views/NetSettings.vue
@@ -0,0 +1,570 @@
+<template>
+ <div class="all">
+ <div class="cluster-content">
+ <div class="cluster-center" ref="left">
+ <div class="menu-item" @click="openRight('net')">
+ <div><span class="icon iconfont"></span>缃戠粶璁剧疆</div>
+ <div class="status">宸茶繛鎺�</div>
+ </div>
+ <div class="menu-item" @click="openRight('wifi')">
+ <div><span class="icon iconfont"></span>鏃犵嚎缃戠粶</div>
+ <div class="status">宸茶繛鎺�</div>
+ </div>
+ <div class="menu-item" @click="openRight('wire')">
+ <div><span class="icon iconfont"></span>鏈夌嚎缃戠粶</div>
+ <div class="status">宸茶繛鎺�</div>
+ </div>
+ </div>
+ <div class="cluster-right">
+ <div class="net-set" v-if="activePage == 'net'">
+ <div class="title">缃戠粶璁剧疆</div>
+ <el-form
+ :model="ruleForm"
+ :rules="rules"
+ ref="joinForm"
+ class="join-form"
+ label-width="150px"
+ v-loading="joinLoading"
+ >
+ <el-form-item label="璁惧鍚嶇О" prop="deviceName">
+ <el-input
+ v-model="ruleForm.deviceName"
+ size="small"
+ placeholder="蹇呭～"
+ ></el-input>
+ </el-form-item>
+
+ <el-form-item label="绔彛" prop="port">
+ <el-input
+ v-model="ruleForm.port"
+ placeholder="閫夊～锛屽閮ㄨ闂殑绔彛"
+ size="small"
+ ></el-input>
+ </el-form-item>
+ <div class="save-btn">淇濆瓨</div>
+ </el-form>
+ </div>
+
+ <div class="wifi" v-if="activePage == 'wifi' && !inWifiDetail">
+ <switchBar
+ :barName="`鏃犵嚎缃戝崱`"
+ @switchChange="wifiControl"
+ :value="isOpenWifi"
+ ></switchBar>
+
+ <div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
+ <div class="name">
+ <span class="icon iconfont"></span>
+ <span> {{ item.name }} </span>
+ </div>
+
+ <div class="more-detail">
+ <span class="icon iconfont"></span>
+ <span
+ class="icon iconfont"
+ style="margin-left: 10px"
+ @click="checkWifi(item)"
+ ></span
+ >
+ </div>
+ </div>
+ </div>
+ <div class="wifi-detail" v-if="activePage == 'wifi' && inWifiDetail">
+ <div class="btns">
+ <div class="left">鍒犻櫎</div>
+ <div class="right">鏂紑杩炴帴</div>
+ </div>
+
+ <div class="title">閫氱敤</div>
+
+ <el-form
+ :model="wifiForm"
+ :rules="wifiFormRules"
+ ref="wifiForm"
+ class="join-form"
+ label-width="150px"
+ >
+ <!-- v-loading="joinLoading" -->
+ <el-form-item label="鍚嶇О" prop="name">
+ <div class="wifi-name">{{ 12123 }}</div>
+ </el-form-item>
+
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input
+ v-model="wifiForm.password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ size="small"
+ show-password
+ ></el-input>
+ </el-form-item>
+ </el-form>
+
+ <switchBar
+ :barName="`楂樼骇璁剧疆`"
+ @switchChange="highClassSetting"
+ :value="isHighClass"
+ ></switchBar>
+ <div class="title">IPV4</div>
+
+ <!-- <el-form
+ :model="ipv4Form"
+ :rules="ipv4FormRules"
+ ref="ipv4Form"
+ class="join-form"
+ label-width="150px"
+ >
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input
+ v-model="wifiForm.password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ size="small"
+ show-password
+ ></el-input>
+ </el-form-item>
+ </el-form> -->
+
+ <el-form
+ :model="ipv4Form"
+ :rules="ipv4FormRules"
+ ref="ipv4Form"
+ label-width="150px"
+ >
+ <el-form-item label="鏂规硶">
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="IP" prop="ip">
+ <ip-input
+ :ip="ipv4Form.ip"
+ @on-blur="ipv4Form.ip = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="瀛愮綉鎺╃爜" prop="subMask">
+ <ip-input
+ :ip="ipv4Form.subMask"
+ @on-blur="ipv4Form.subMask = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+
+ <el-form-item label="缃戝叧" prop="gateway">
+ <ip-input
+ :ip="ipv4Form.gateway"
+ @on-blur="ipv4Form.gateway = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="棣栭�塂NS" prop="dns">
+ <ip-input
+ :ip="ipv4Form.dns1"
+ @on-blur="ipv4Form.dns1 = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="澶囩敤DNS" prop="dns">
+ <ip-input
+ :ip="ipv4Form.dns2"
+ @on-blur="ipv4Form.dns2 = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ </el-form>
+
+ <div class="title">IPV6</div>
+
+ <el-form
+ :model="ipv6Form"
+ :rules="ipv6FormRules"
+ ref="ipv4Form"
+ label-width="150px"
+ >
+ <el-form-item label="鏂规硶">
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="IP鍦板潃" prop="ip">
+ <ip-input
+ :ip="ipv6Form.ip"
+ @on-blur="ipv6Form.ip = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="鍓嶇紑" prop="subMask">
+ <div style="display: flex">
+ <el-input
+ v-model="wifiForm.password"
+ placeholder=""
+ size="small"
+ ></el-input>
+
+ <div class="ad">-</div>
+ <div class="ad">+</div>
+ <div class="ad">閲嶇疆</div>
+ </div>
+ </el-form-item>
+
+ <el-form-item label="缃戝叧" prop="gateway">
+ <ip-input
+ :ip="ipv6Form.gateway"
+ @on-blur="ipv6Form.gateway = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="棣栭�塂NS" prop="dns">
+ <ip-input
+ :ip="ipv6Form.dns1"
+ @on-blur="ipv6Form.dns1 = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="澶囩敤DNS" prop="dns">
+ <ip-input
+ :ip="ipv6Form.dns2"
+ @on-blur="ipv6Form.dns2 = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ </el-form>
+
+ <div class="btns">
+ <div class="left">鍙栨秷</div>
+ <div class="right">淇濆瓨</div>
+ </div>
+ </div>
+
+ <div class="wire" v-if="activePage == 'wire' && !inWireDetail">
+ <div
+ class="wire-bar"
+ v-for="(item, i) in wireArr"
+ :key="i"
+ @click="checkWire(item)"
+ >
+ <div class="name">{{ item.name }}</div>
+
+ <div class="right">
+ <span class="icon iconfont"></span>
+
+ <el-switch
+ v-model="value"
+ active-color="rgba(61, 104, 225, 1)"
+ @change="switchChange"
+ >
+ </el-switch>
+ </div>
+ </div>
+ </div>
+ <div class="wire-detail" v-if="activePage == 'wire' && inWireDetail">
+ <div class="title">缃戠粶璁剧疆</div>
+ <el-form
+ :model="wireForm"
+ :rules="wireFormRules"
+ ref="wireForm"
+ label-width="150px"
+ >
+ <el-form-item label="缃戠粶鍚嶇О" prop="name">
+ <div class="wifi-name">{{ 12123 }}</div>
+ </el-form-item>
+ <el-form-item label="缃戝崱" prop="name">
+ <div class="wifi-name">{{ 12123 }}</div>
+ </el-form-item>
+ <el-form-item label="IP" prop="ip">
+ <ip-input
+ :ip="wireForm.ip"
+ @on-blur="wireForm.ip = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="瀛愮綉鎺╃爜" prop="subMask">
+ <ip-input
+ :ip="wireForm.subMask"
+ @on-blur="wireForm.subMask = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+
+ <el-form-item label="缃戝叧" prop="gateway">
+ <ip-input
+ :ip="ipv4Form.gateway"
+ @on-blur="ipv4Form.gateway = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="棣栭�塂NS" prop="dns">
+ <ip-input
+ :ip="ipv4Form.dns1"
+ @on-blur="ipv4Form.dns1 = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ <el-form-item label="澶囩敤DNS" prop="dns">
+ <ip-input
+ :ip="ipv4Form.dns2"
+ @on-blur="ipv4Form.dns2 = arguments[0]"
+ ></ip-input>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {
+ createSerfCluster,
+ randomPwd,
+ search,
+ getSearchNodes,
+ stopSearching,
+ findCluster,
+ updateClusterName,
+ joinCluster,
+ leave,
+ getVrrp,
+ setVrrp,
+ createESNode,
+ addESNode,
+ getEsClusterInfo,
+} from "@/api/clusterManage";
+import cloudNode from "../components/CloudNode";
+import ipInput from "@/components/subComponents/IPInput";
+import { isIPv4 } from "@/scripts/validate";
+import switchBar from "../components/switchBar";
+
+export default {
+ data() {
+ const checkPwd = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ }
+ setTimeout(() => {
+ if (value.length != 6) {
+ callback(new Error("瀵嗙爜搴斾负6浣�!"));
+ } else {
+ callback();
+ }
+ }, 1000);
+ };
+ return {
+ isHighClass: false,
+
+ ruleForm: {
+ deviceName: "",
+ port: "",
+ },
+ wifiForm: {
+ name: "",
+ password: "",
+ },
+ wireArr: [{ name: "鏈夌嚎缃戠粶1" }, { name: "鏈夌嚎缃戠粶2" }],
+ inWifiDetail: false,
+ wifiList: [{ name: "鏃犵嚎缃戠粶1" }, { name: "鏃犵嚎缃戠粶2" }],
+ isOpenWifi: false,
+ inWireDetail: false,
+ wireForm:{
+
+ },
+ wireFormRules:{
+
+ },
+ activePage: "net",
+ rules: {
+ deviceName: [
+ { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
+ ],
+ },
+ ipv4Form: {},
+ ipv6Form: {},
+ ipv4FormRules: {},
+ ipv6FormRules: {},
+ options: [
+ {
+ value: "閫夐」1",
+ label: "鎵嬪姩",
+ },
+ {
+ value: "閫夐」2",
+ label: "鑷姩",
+ },
+ ],
+ value: "",
+ };
+ },
+ components: {
+ cloudNode,
+ ipInput,
+ switchBar,
+ },
+ mounted() {},
+ beforeDestroy() {},
+ props: ["barName"],
+ methods: {
+ openRight(typ) {
+ this.activePage = typ;
+ },
+ wifiControl(val) {},
+ checkWifi() {
+ this.inWifiDetail = true;
+ },
+ checkWire(item) {
+ this.inWireDetail = true;
+ },
+ },
+};
+</script>
+<style lang="scss">
+.all {
+ width: 100%;
+}
+
+.cluster-content {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ flex-basis: auto;
+ box-sizing: border-box;
+ .cluster-center {
+ height: 100%;
+ width: 260px;
+ overflow: auto;
+ box-sizing: border-box;
+ flex-shrink: 0;
+ padding: 10px;
+ background-color: lavender;
+ .menu-item {
+ background-color: #f8f8f8;
+ height: 40px;
+ margin-bottom: 10px;
+ border-radius: 8px;
+ line-height: 40px;
+ box-sizing: border-box;
+ font-size: 14px;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ .cluster-right {
+ flex: 1;
+ flex-basis: auto;
+ overflow: auto;
+ // background-color: rgba(240, 242, 245, 1);
+ box-sizing: border-box;
+ position: relative;
+ padding: 20px 40px;
+ // .create-new .join-exist {
+ .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-select {
+ width: 100%;
+ }
+ .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;
+ }
+ .ip-input-container {
+ max-width: none !important;
+ }
+ // }
+ .wifi {
+ .wifi-option {
+ height: 50px;
+ background-color: #f8f8f8;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 0 20px;
+ margin-bottom: 10px;
+ }
+ }
+ .wifi-detail {
+ .btns {
+ display: flex;
+ justify-content: space-between;
+ .left {
+ background-color: rgba(240, 240, 240, 1);
+ height: 40px;
+ line-height: 40px;
+ width: 48%;
+ border-radius: 10px;
+ }
+ .right {
+ background-color: rgba(61, 104, 225, 1);
+ height: 40px;
+ line-height: 40px;
+ width: 48%;
+ color: #fff;
+ border-radius: 10px;
+ }
+ }
+ .wifi-name {
+ height: 40px;
+ background-color: #f0f0f0;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 20px;
+ }
+ .ad {
+ min-width: 35px;
+ background-color: rgba(240, 240, 240, 1);
+ height: 35px;
+ margin: 4px 0px 4px 5px;
+ border-radius: 5px;
+ line-height: 35px;
+ }
+ }
+ .wire {
+ .wire-bar {
+ height: 50px;
+ background-color: aliceblue;
+ display: flex;
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding: 0 20px;
+ align-items: center;
+ }
+ .wifi-name {
+ height: 40px;
+ background-color: #f0f0f0;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 20px;
+ }
+ }
+ .save-btn {
+ background-color: #3d68e1;
+ width: 240px;
+ height: 40px;
+ margin: 0 auto;
+ border-radius: 10px;
+ color: #fff;
+ line-height: 40px;
+ font-size: 14px;
+ margin-top: 20px;
+ }
+ }
+}
+</style>
diff --git a/src/pages/systemSettings/views/clusterManagement.vue b/src/pages/systemSettings/views/clusterManagement.vue
new file mode 100644
index 0000000..89b4dc2
--- /dev/null
+++ b/src/pages/systemSettings/views/clusterManagement.vue
@@ -0,0 +1,714 @@
+<template>
+ <div class="all">
+ <div class="cluster-guanli" v-if="showCurCluster">
+ <cloud-node :nodes="innerNodes"></cloud-node>
+
+ <div class="bar">
+ <div class="title">闆嗙兢鍚嶇О</div>
+ <div class="input-area">
+ <div class="text" v-show="!isFillingName">
+ {{ ruleForm.clustername }}
+ </div>
+ <el-input
+ v-show="isFillingName"
+ size="mini"
+ v-model="selfForm.clustername"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ ></el-input>
+ <span
+ class="icon iconfont"
+ @click="startInput(1)"
+ v-show="!isFillingName"
+ ></span
+ >
+ <span
+ class="icon iconfont"
+ @click="clearInput(1)"
+ v-show="isFillingName"
+ ></span
+ >
+ <span
+ class="icon iconfont"
+ @click="updateCluster(1)"
+ v-show="isFillingName"
+ ></span
+ >
+ </div>
+ </div>
+ <div class="bar">
+ <div class="title">闆嗙兢ID</div>
+ <div class="input-area">
+ <div class="text">{{ clusterid }}</div>
+ </div>
+ </div>
+ <div class="bar">
+ <div class="title">闆嗙兢瀵嗙爜</div>
+ <div class="input-area">
+ <div class="text">{{ ruleForm.clusterpwd }}</div>
+ </div>
+ </div>
+ <div class="bar">
+ <div class="title">闆嗙兢IP</div>
+ <div class="input-area">
+ <div class="text" v-show="!isFillingIp">{{ ruleForm.virtualIp }}</div>
+
+ <ip-input
+ v-if="isFillingIp"
+ :ip="selfForm.virtualIp"
+ :on-blur="onIpBlur"
+ class="ip-input-comp"
+ ></ip-input>
+ <span
+ class="icon iconfont"
+ v-show="!isFillingIp"
+ @click="startInput(2)"
+ ></span
+ >
+ <span
+ class="icon iconfont"
+ @click="clearInput(2)"
+ v-show="isFillingIp"
+ ></span
+ >
+ <span
+ class="icon iconfont"
+ @click="updateCluster(2)"
+ v-show="isFillingIp"
+ ></span
+ >
+ </div>
+ </div>
+
+ <div class="exit" @click="exitCluster">閫�鍑洪泦缇�</div>
+ </div>
+
+ <div class="cluster-content">
+ <div class="cluster-center" ref="left" v-if="!showCurCluster">
+ <div class="menu-item" @click="isCreate = true">鍒涘缓闆嗙兢</div>
+ <div class="menu-item" @click="isCreate = false">鍔犲叆宸叉湁闆嗙兢</div>
+ </div>
+ <div class="cluster-right" v-if="!showCurCluster">
+ <div class="create-new" v-if="isCreate">
+ <el-form
+ :model="ruleForm"
+ :rules="rules"
+ ref="ruleForm"
+ label-width="150px"
+ >
+ <el-form-item label="闆嗙兢鍚嶇О" prop="clustername">
+ <el-input
+ v-model="ruleForm.clustername"
+ placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�"
+ size="small"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="闆嗙兢ID">
+ <el-input
+ v-model="clusterid"
+ placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�"
+ disabled
+ size="small"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd">
+ <el-input
+ v-model="ruleForm.clusterpwd"
+ placeholder="璇疯緭鍏�6浣嶅瘑鐮�,鎴栫偣鍑荤敓鎴�"
+ size="small"
+ >
+ <el-button type="text" slot="suffix" @click="getPSW"
+ >鐢熸垚瀵嗙爜</el-button
+ >
+ </el-input>
+ </el-form-item>
+ <el-form-item label="闆嗙兢IP" prop="virtualIp">
+ <ip-input
+ :ip="ruleForm.virtualIp"
+ :on-blur="onIpBlur"
+ class="ip-input-comp"
+ ></ip-input>
+ </el-form-item>
+ </el-form>
+ <div class="save-btn" @click="saveCluster('ruleForm')">淇濆瓨</div>
+ </div>
+ <div class="join-exist" v-if="!isCreate">
+ <el-form
+ :model="joinForm"
+ :rules="joinRules"
+ ref="joinForm"
+ class="join-form"
+ label-width="150px"
+ v-loading="joinLoading"
+ >
+ <el-form-item label="闆嗙兢ID" prop="clusterid">
+ <el-input v-model="joinForm.clusterid" size="small"></el-input>
+ </el-form-item>
+
+ <el-form-item label="IP鍦板潃" prop="clusterip">
+ <el-input
+ v-model="joinForm.clusterip"
+ placeholder="璇疯緭鍏ラ泦缇ゅ唴浠绘剰IP鍦板潃"
+ size="small"
+ autocomplete="new-password"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd">
+ <el-input
+ v-model="joinForm.clusterpwd"
+ placeholder="璇疯緭鍏ラ泦缇ゅ瘑鐮�"
+ show-password
+ autocomplete="new-password"
+ size="small"
+ >
+ <el-button
+ type="text"
+ slot="suffix"
+ @click="searchColony"
+ v-show="!searchDis"
+ >鎼滅储闆嗙兢</el-button
+ >
+ <el-button
+ type="text"
+ slot="suffix"
+ v-show="searchDis"
+ @click="stopSearch"
+ >
+ <i class="el-icon-loading"></i>鍋滄鎼滅储
+ </el-button>
+ </el-input>
+ </el-form-item>
+ </el-form>
+
+ <div class="save-btn" @click="join('joinForm')">鍔犲叆闆嗙兢</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {
+ createSerfCluster,
+ randomPwd,
+ search,
+ getSearchNodes,
+ stopSearching,
+ findCluster,
+ updateClusterName,
+ joinCluster,
+ leave,
+ getVrrp,
+ setVrrp,
+ createESNode,
+ addESNode,
+ getEsClusterInfo,
+} from "@/api/clusterManage";
+import cloudNode from "../components/CloudNode";
+import ipInput from "@/components/subComponents/IPInput";
+import { isIPv4 } from "@/scripts/validate";
+
+export default {
+ data() {
+ const checkPwd = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ }
+ setTimeout(() => {
+ if (value.length != 6) {
+ callback(new Error("瀵嗙爜搴斾负6浣�!"));
+ } else {
+ callback();
+ }
+ }, 1000);
+ };
+ return {
+ innerNodes: [],
+ intervalTimer: null,
+ isFillingName: false,
+ isFillingIp: false,
+ inputName: "",
+ inputIp: "",
+ serverIp: "",
+ members: [],
+ virtualIp: "192.168.1.188",
+ searchDis: false,
+ ruleForm: {
+ clustername: "",
+ clusterpwd: "",
+ virtualIp: "",
+ },
+ selfForm: {
+ virtualIp: "",
+ clustername: "",
+ },
+ joinForm: {
+ clusterid: "",
+ clusterip: "",
+ clusterpwd: "",
+ },
+ isSearch: false,
+ showCurCluster: true,
+ loading: false,
+ joinLoading: false,
+ isHasColony: false,
+ clusterid: "",
+ searchNum: "",
+ scheduleId: "",
+ isCreate: true,
+ rules: {
+ clustername: [
+ { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" },
+ ],
+ clusterpwd: [{ validator: checkPwd, trigger: "change" }],
+ virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
+ },
+ joinRules: {
+ clusterid: [
+ { required: true, message: "璇疯緭鍏ラ泦缇D", trigger: "change" },
+ ],
+ clusterip: [{ required: true, validator: isIPv4, trigger: "change" }],
+ clusterpwd: [{ validator: checkPwd, trigger: "change" }],
+ },
+ };
+ },
+ components: {
+ cloudNode,
+ ipInput,
+ },
+ mounted() {
+ this.findCluster();
+ let _this = this;
+ this.intervalTimer = setInterval(() => {
+ _this.findCluster();
+ }, 30000);
+ },
+ beforeDestroy() {
+ clearInterval(this.intervalTimer);
+ },
+ props: ["barName"],
+ methods: {
+ async createCluster(json) {
+ let res = await createSerfCluster(json);
+ this.$notify({
+ title: res.success ? "鎴愬姛" : "澶辫触",
+ message: res.msg,
+ type: res.success ? "success" : "error",
+ });
+ },
+ //鎼滅储闆嗙兢
+ async getSearchNodes() {
+ let res = await getSearchNodes();
+ if (res && res.success) {
+ let list = res.data.map((i) => {
+ let obj = {};
+ obj.cluster_id = i.clusterID ? i.clusterID : "";
+ obj.create_time = i.create_time ? i.create_time : "";
+ obj.id = i.nodeID ? i.nodeID : "";
+ obj.node_id = i.nodeID ? i.nodeID : "";
+ obj.Address = i.nodeAddress ? i.nodeAddress : "";
+ obj.nodeName = i.nodeAddress ? i.nodeAddress : "";
+ obj.role = i.role ? i.role : "pc";
+ return obj;
+ });
+ list.map((i) => {
+ let found = this.members.find((element) => {
+ return element.node_id === i.node_id;
+ });
+ if (found === undefined) {
+ this.members.push(i);
+ }
+ });
+ }
+ },
+ async joinCluster(json) {
+ let res = await joinCluster(json);
+ if (res.success) {
+ this.members = []
+ }
+ this.$notify({
+ title: res.success ? "鎴愬姛" : "澶辫触",
+ message: res.msg,
+ type: res.success ? "success" : "error"
+ });
+ },
+ join(formName) {
+ let _this = this;
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ _this.joinLoading = true;
+ let nodeIps = _this.members.map((i) => {
+ return i.Address;
+ });
+ let data = {
+ clusterId: _this.joinForm.clusterid,
+ password: _this.joinForm.clusterpwd,
+ nodeIps: [_this.joinForm.clusterip],
+ };
+ _this
+ .joinCluster(data)
+ .then(() => {
+ _this.joinLoading = false;
+ _this.findCluster();
+ })
+ .catch((e) => {
+ _this.joinLoading = false;
+ });
+ } else {
+ return false;
+ }
+ });
+ },
+ setSchedule() {
+ this.scheduleId = window.setInterval(() => {
+ this.getSearchNodes();
+ }, 1000);
+ },
+ async searchColony() {
+ this.isSearch = true;
+ this.$refs["joinForm"].clearValidate();
+ this.$refs["joinForm"].validateField("clusterpwd");
+ if (this.joinForm.clusterpwd.trim().length === 6) {
+ this.members = [];
+ const data = {
+ password: this.joinForm.clusterpwd,
+ };
+ this.search(data)
+ .then(() => {
+ this.setSchedule();
+ })
+ .catch(() => {
+ this.searchDis = false;
+ this.loading = false;
+ this.isSearch = false;
+ });
+ } else {
+ this.searchDis = false;
+ this.loading = false;
+ this.isSearch = false;
+ return false;
+ }
+ },
+ async search(data) {
+ let res = await search(data);
+ if (res && res.success) {
+ this.searchNum = res.data;
+ }
+ this.searchDis = true;
+ this.loading = true;
+ window.setTimeout(() => {
+ this.stopSearch();
+ }, 10 * 1000);
+ },
+ async stopSearch() {
+ if (!this.loading) {
+ return true;
+ }
+ stopSearching({
+ searchNum: this.searchNum,
+ })
+ .then((res) => {
+ this.loading = false;
+ this.searchDis = false;
+ window.clearInterval(this.scheduleId);
+ })
+ .catch((err) => {
+ this.$notify({
+ type: "error",
+ duration: 1000,
+ message: "鍋滄鎼滅储鎶ラ敊锛�",
+ });
+ });
+ },
+ saveCluster(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ let data = {
+ clusterId: this.clusterid,
+ clusterName: this.ruleForm.clustername,
+ password: this.ruleForm.clusterpwd,
+ virtualIp: this.ruleForm.virtualIp,
+ };
+ this.createCluster(data).then(() => {
+ this.findCluster();
+ });
+ } else {
+ return false;
+ }
+ });
+ },
+ getPSW() {
+ var chars =
+ "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+ var uuid = [];
+
+ for (let i = 0; i < 6; i++) {
+ uuid[i] = chars[0 | (Math.random() * 50)];
+ }
+
+ this.ruleForm.clusterpwd = uuid.join("");
+ },
+ exitCluster() {
+ clearInterval(this.intervalTimer);
+ this.showCurCluster = false;
+ this.ruleForm.virtualIp = "";
+ this.ruleForm.clustername = "";
+ this.ruleForm.clusterpwd = "";
+ this.clusterid = "";
+ },
+ clearInput(typ) {
+ if (typ == 1) {
+ this.selfForm.clustername = "";
+ this.isFillingName = false;
+ } else {
+ this.selfForm.virtualIp = "";
+ this.isFillingIp = false;
+ }
+ },
+ async randomPwd() {
+ let res = await randomPwd();
+ if (res && res.success) {
+ this.ruleForm.clusterpwd = res.data;
+ }
+ },
+ startInput(typ) {
+ if (typ == 1) {
+ this.selfForm.clustername = this.ruleForm.clustername;
+ this.isFillingName = true;
+ } else {
+ this.selfForm.virtualIp = this.ruleForm.virtualIp;
+ this.isFillingIp = true;
+ }
+ },
+ onIpBlur(ip) {
+ console.log(ip);
+ this.ruleForm.virtualIp = ip;
+ },
+ async updateCluster(v) {
+ if (v == 1) {
+ this.ruleForm.clustername = this.selfForm.clustername;
+ }
+ if (this.ruleForm.clustername === "") {
+ this.$message({
+ type: "error",
+ message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖",
+ });
+ return;
+ }
+ const data = {
+ clusterName: this.ruleForm.clustername,
+ virtualIp: this.ruleForm.virtualIp,
+ };
+ let res = await updateClusterName(data);
+ if (res.success) {
+ this.findCluster();
+ }
+ this.$notify({
+ title: res.success ? "鎴愬姛" : "澶辫触",
+ message: res.msg,
+ type: res.success ? "success" : "error",
+ });
+ this.isFillingIp = false;
+ this.isFillingName = false;
+ },
+ async findCluster() {
+ let res = await findCluster();
+ if (res && res.success) {
+ if (res.data && res.data.clusterId) {
+ this.isHasColony = true;
+ this.clusterid = res.data.clusterId;
+ this.ruleForm.clustername = res.data.clusterName;
+ this.ruleForm.clusterpwd = "******";
+ this.ruleForm.virtualIp = res.data.virtualIp;
+ this.isSearch = false;
+ this.innerNodes = res.data.nodes.map((i) => {
+ let obj = {};
+ obj.device_type = i.device_type;
+ obj.workType = i.device_type.substr(2, 2);
+ obj.hardwareType = i.device_type.substr(4, 2);
+ obj.cluster_id = i.cluster_id;
+ obj.clusterName = res.data.clusterName;
+ obj.create_time = i.create_time;
+ obj.id = i.id;
+ obj.node_id = i.node_id;
+ obj.node_ip = i.node_ip;
+ obj.nodeName = i.node_name;
+ obj.Address = i.node_ip;
+ obj.role = i.drift_state ? i.drift_state : "pc";
+ return obj;
+ });
+ } else {
+ this.isHasColony = false;
+ }
+ }
+ },
+ clearInnerNodes() {
+ this.innerNodes = [];
+ },
+ },
+};
+</script>
+<style lang="scss">
+.all {
+ width: 100%;
+}
+.cluster-guanli {
+ margin: 0 auto;
+ width: 520px;
+ .bar {
+ height: 40px;
+ background-color: rgba(248, 248, 248, 1);
+ margin-bottom: 10px;
+ display: flex;
+ box-sizing: border-box;
+ padding: 0 20px;
+ justify-content: space-between;
+ align-items: center;
+ .input-area {
+ display: flex;
+ width: 340px;
+ height: 30px;
+ line-height: 30px;
+ justify-content: inherit;
+ // padding: 0 20px;
+ box-sizing: border-box;
+ }
+ }
+ .exit {
+ background-color: #3d68e1;
+ width: 240px;
+ height: 40px;
+ margin: 0 auto;
+ border-radius: 10px;
+ color: #fff;
+ line-height: 40px;
+ font-size: 14px;
+ margin-top: 20px;
+ }
+}
+.cluster-content {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ flex-basis: auto;
+ box-sizing: border-box;
+ .cluster-center {
+ height: 100%;
+ width: 260px;
+ overflow: auto;
+ box-sizing: border-box;
+ flex-shrink: 0;
+ padding: 10px;
+ background-color: lightpink;
+ .menu-item {
+ background-color: #f8f8f8;
+ height: 40px;
+ margin-bottom: 10px;
+ border-radius: 8px;
+ line-height: 40px;
+ font-size: 14px;
+ }
+ }
+ .cluster-right {
+ flex: 1;
+ flex-basis: auto;
+ overflow: auto;
+ // background-color: rgba(240, 242, 245, 1);
+ box-sizing: border-box;
+ position: relative;
+ padding: 20px 40px;
+ // .create-new .join-exist {
+ .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;
+ }
+ .ip-input-container {
+ max-width: none !important;
+ }
+ // }
+ .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 {
+ min-width: 400px;
+ 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: 70px;
+ }
+ .right {
+ min-width: 400px;
+ display: flex;
+ align-items: center;
+ height: 30px;
+ .input-area {
+ background-color: rgba(240, 240, 240, 1);
+ border-radius: 10px;
+ line-height: 30px;
+ width: -webkit-fill-available;
+
+ font-size: 14px;
+ }
+ .test {
+ width: 70px;
+ }
+ }
+ }
+ .save-btn {
+ background-color: #3d68e1;
+ width: 240px;
+ height: 40px;
+ margin: 0 auto;
+ border-radius: 10px;
+ color: #fff;
+ line-height: 40px;
+ font-size: 14px;
+ margin-top: 20px;
+ }
+ }
+}
+</style>
diff --git a/src/pages/systemSettings/views/generalSettings.vue b/src/pages/systemSettings/views/generalSettings.vue
new file mode 100644
index 0000000..b07b8b5
--- /dev/null
+++ b/src/pages/systemSettings/views/generalSettings.vue
@@ -0,0 +1,311 @@
+<template>
+ <div class="all">
+ <div class="cluster-content">
+ <div class="cluster-center" ref="left">
+ <div class="menu-item" @click="openRight('basic')">
+ <div>璁惧淇℃伅</div>
+ </div>
+ <div class="menu-item" @click="openRight('video')">
+ <div>浜嬩欢褰曞儚鏃堕暱</div>
+ </div>
+ <div class="menu-item" @click="openRight('sound')">
+ <div>浜嬩欢澹伴煶</div>
+ </div>
+ </div>
+ <div class="cluster-right">
+ <div class="lang" v-if="activePage == 'basic'">
+ <div class="bar" v-for="(item, i) in basioInfoList" :key="i">
+ <span class="name">{{ item.name }}</span>
+ <span class="name">{{ item.desc }}</span>
+ </div>
+ </div>
+ <div class="lang" v-if="activePage == 'video'">
+ <div class="min-dur">
+ <div class="title">瑙嗛鎴彇鏈�鐭椂闀�</div>
+ <div class="entity">
+ <div class="sec">{{ alarmConf.min_video_len }} s</div>
+ <div class="block">
+ <el-slider
+ v-model="alarmConf.min_video_len"
+ :min="0"
+ :max="100"
+ show-input
+ >
+ </el-slider>
+ </div>
+ s
+ </div>
+ </div>
+ <div class="min-dur">
+ <div class="title">瑙嗛鎴彇鏈�闀挎椂闀�</div>
+ <div class="entity">
+ <div class="sec">{{ alarmConf.max_video_len }} s</div>
+ <div class="block">
+ <el-slider
+ v-model="alarmConf.max_video_len"
+ :min="0"
+ :max="100"
+ show-input
+ >
+ </el-slider>
+ </div>
+ s
+ </div>
+ </div>
+ </div>
+ <div class="lang" v-if="activePage == 'sound'">
+ <div class="title">浜嬩欢澹伴煶</div>
+ <div class="bar" v-for="(item, i) in keyboardList" :key="i">
+ <span class="name">
+ <span class="icon iconfont"></span>{{ item.name }}</span
+ >
+ <div class="btns">
+ <span class="icon iconfont"></span>
+ <span class="icon iconfont"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {
+ createSerfCluster,
+ randomPwd,
+ search,
+ getSearchNodes,
+ stopSearching,
+ findCluster,
+ updateClusterName,
+ joinCluster,
+ leave,
+ getVrrp,
+ setVrrp,
+ createESNode,
+ addESNode,
+ getEsClusterInfo,
+} from "@/api/clusterManage";
+import cloudNode from "../components/CloudNode";
+import ipInput from "@/components/subComponents/IPInput";
+import { isIPv4 } from "@/scripts/validate";
+import switchBar from "../components/switchBar";
+
+export default {
+ data() {
+ const checkPwd = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ }
+ setTimeout(() => {
+ if (value.length != 6) {
+ callback(new Error("瀵嗙爜搴斾负6浣�!"));
+ } else {
+ callback();
+ }
+ }, 1000);
+ };
+ return {
+ isHighClass: false,
+
+ ruleForm: {
+ deviceName: "",
+ port: "",
+ },
+ wifiForm: {
+ name: "",
+ password: "",
+ },
+ wireArr: [{ name: "鏈夌嚎缃戠粶1" }, { name: "鏈夌嚎缃戠粶2" }],
+ inWifiDetail: false,
+ wifiList: [{ name: "鏃犵嚎缃戠粶1" }, { name: "鏃犵嚎缃戠粶2" }],
+ isOpenWifi: false,
+ inWireDetail: false,
+ wireForm: {},
+ alarmConf: {
+ min_video_len: 0,
+ max_video_len: 0,
+ },
+ basioInfoList: [
+ { name: "绠�浣撲腑鏂�", desc: "fesF" },
+ { name: "鑻辨枃", desc: "fesF" },
+ { name: "绻佷綋涓枃锛堥娓級", desc: "fesF" },
+ ],
+ keyboardList: [{ name: "Hanyu Pinyin(algtr)" }, { name: "ENG" }],
+
+ wireFormRules: {},
+ activePage: "basic",
+ rules: {
+ deviceName: [
+ { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
+ ],
+ },
+ ipv4Form: {},
+ ipv6Form: {},
+ ipv4FormRules: {},
+ ipv6FormRules: {},
+ options: [
+ {
+ value: "閫夐」1",
+ label: "鎵嬪姩",
+ },
+ {
+ value: "閫夐」2",
+ label: "鑷姩",
+ },
+ ],
+ value: "",
+ };
+ },
+ components: {
+ cloudNode,
+ ipInput,
+ switchBar,
+ },
+ mounted() {},
+ beforeDestroy() {},
+ props: ["barName"],
+ methods: {
+ openRight(typ) {
+ this.activePage = typ;
+ },
+ wifiControl(val) {},
+ checkWifi() {
+ this.inWifiDetail = true;
+ },
+ checkWire(item) {
+ this.inWireDetail = true;
+ },
+ },
+};
+</script>
+<style lang="scss">
+.all {
+ width: 100%;
+}
+
+.cluster-content {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ flex-basis: auto;
+ box-sizing: border-box;
+ .cluster-center {
+ height: 100%;
+ width: 260px;
+ overflow: auto;
+ box-sizing: border-box;
+ flex-shrink: 0;
+ padding: 10px;
+ background-color: lavender;
+ .menu-item {
+ background-color: #f8f8f8;
+ height: 40px;
+ margin-bottom: 10px;
+ border-radius: 8px;
+ line-height: 40px;
+ box-sizing: border-box;
+ font-size: 14px;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ .cluster-right {
+ flex: 1;
+ flex-basis: auto;
+ overflow: auto;
+ // background-color: rgba(240, 242, 245, 1);
+ box-sizing: border-box;
+ position: relative;
+ padding: 20px 40px;
+ // .create-new .join-exist {
+ .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-select {
+ width: 100%;
+ }
+ .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;
+ }
+ .ip-input-container {
+ max-width: none !important;
+ }
+ .lang {
+ .bar {
+ height: 50px;
+ background-color: aliceblue;
+ border-radius: 10px;
+ line-height: 50px;
+ box-sizing: border-box;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
+ .min-dur {
+ box-sizing: border-box;
+ padding: 0 10px;
+ background-color: rgba(248, 248, 248, 1);
+ height: 100px;
+ margin-bottom: 20px;
+ border-radius: 15px;
+ .title {
+ height: 50px;
+ line-height: 50px;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 10px;
+ }
+ }
+ .entity {
+ display: flex;
+ align-items: center;
+ height: 30px;
+
+ .sec {
+ min-width: 30px;
+ line-height: 80px;
+ margin-right: 15px;
+ }
+ .block {
+ flex: auto;
+ }
+ }
+ }
+ .save-btn {
+ background-color: #3d68e1;
+ width: 240px;
+ height: 40px;
+ margin: 0 auto;
+ border-radius: 10px;
+ color: #fff;
+ line-height: 40px;
+ font-size: 14px;
+ margin-top: 20px;
+ }
+ }
+}
+</style>
diff --git a/src/pages/systemSettings/views/keyboardLanguage.vue b/src/pages/systemSettings/views/keyboardLanguage.vue
new file mode 100644
index 0000000..e916747
--- /dev/null
+++ b/src/pages/systemSettings/views/keyboardLanguage.vue
@@ -0,0 +1,240 @@
+<template>
+ <div class="all">
+ <div class="cluster-content">
+ <div class="cluster-center" ref="left">
+ <div class="menu-item" @click="openRight('lang')">
+ <div>绯荤粺璇█</div>
+ </div>
+ <div class="menu-item" @click="openRight('keyboard')">
+ <div>閿洏绠＄悊</div>
+ </div>
+ </div>
+ <div class="cluster-right">
+ <div class="lang" v-if="activePage=='lang'">
+ <div class="title">璇█鍒楄〃</div>
+ <div class="bar" v-for="(item, i) in langList" :key="i">
+ <span class="name">{{ item.name }}</span>
+ <span class="icon iconfont"></span>
+ </div>
+ </div>
+ <div class="lang" v-if="activePage=='keyboard'">
+ <div class="title">閿洏甯冨眬</div>
+ <div class="bar" v-for="(item, i) in keyboardList" :key="i">
+ <span class="name">{{ item.name }}</span>
+ <span class="icon iconfont"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {
+ createSerfCluster,
+ randomPwd,
+ search,
+ getSearchNodes,
+ stopSearching,
+ findCluster,
+ updateClusterName,
+ joinCluster,
+ leave,
+ getVrrp,
+ setVrrp,
+ createESNode,
+ addESNode,
+ getEsClusterInfo,
+} from "@/api/clusterManage";
+import cloudNode from "../components/CloudNode";
+import ipInput from "@/components/subComponents/IPInput";
+import { isIPv4 } from "@/scripts/validate";
+import switchBar from "../components/switchBar";
+
+export default {
+ data() {
+ const checkPwd = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ }
+ setTimeout(() => {
+ if (value.length != 6) {
+ callback(new Error("瀵嗙爜搴斾负6浣�!"));
+ } else {
+ callback();
+ }
+ }, 1000);
+ };
+ return {
+ isHighClass: false,
+
+ ruleForm: {
+ deviceName: "",
+ port: "",
+ },
+ wifiForm: {
+ name: "",
+ password: "",
+ },
+ wireArr: [{ name: "鏈夌嚎缃戠粶1" }, { name: "鏈夌嚎缃戠粶2" }],
+ inWifiDetail: false,
+ wifiList: [{ name: "鏃犵嚎缃戠粶1" }, { name: "鏃犵嚎缃戠粶2" }],
+ isOpenWifi: false,
+ inWireDetail: false,
+ wireForm: {},
+ langList: [
+ { name: "绠�浣撲腑鏂�" },
+ { name: "鑻辨枃" },
+ { name: "绻佷綋涓枃锛堥娓級" },
+ ],
+ keyboardList: [
+ { name: "Hanyu Pinyin(algtr)" },
+ { name: "ENG" },
+ ],
+
+ wireFormRules: {},
+ activePage: "lang",
+ rules: {
+ deviceName: [
+ { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
+ ],
+ },
+ ipv4Form: {},
+ ipv6Form: {},
+ ipv4FormRules: {},
+ ipv6FormRules: {},
+ options: [
+ {
+ value: "閫夐」1",
+ label: "鎵嬪姩",
+ },
+ {
+ value: "閫夐」2",
+ label: "鑷姩",
+ },
+ ],
+ value: "",
+ };
+ },
+ components: {
+ cloudNode,
+ ipInput,
+ switchBar,
+ },
+ mounted() {},
+ beforeDestroy() {},
+ props: ["barName"],
+ methods: {
+ openRight(typ) {
+ this.activePage = typ;
+ },
+ wifiControl(val) {},
+ checkWifi() {
+ this.inWifiDetail = true;
+ },
+ checkWire(item) {
+ this.inWireDetail = true;
+ },
+ },
+};
+</script>
+<style lang="scss">
+.all {
+ width: 100%;
+}
+
+.cluster-content {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ flex-basis: auto;
+ box-sizing: border-box;
+ .cluster-center {
+ height: 100%;
+ width: 260px;
+ overflow: auto;
+ box-sizing: border-box;
+ flex-shrink: 0;
+ padding: 10px;
+ background-color: lavender;
+ .menu-item {
+ background-color: #f8f8f8;
+ height: 40px;
+ margin-bottom: 10px;
+ border-radius: 8px;
+ line-height: 40px;
+ box-sizing: border-box;
+ font-size: 14px;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+ .cluster-right {
+ flex: 1;
+ flex-basis: auto;
+ overflow: auto;
+ // background-color: rgba(240, 242, 245, 1);
+ box-sizing: border-box;
+ position: relative;
+ padding: 20px 40px;
+ // .create-new .join-exist {
+ .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-select {
+ width: 100%;
+ }
+ .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;
+ }
+ .ip-input-container {
+ max-width: none !important;
+ }
+ .lang {
+ .bar {
+ height: 50px;
+ background-color: aliceblue;
+ border-radius: 10px;
+ line-height: 50px;
+ box-sizing: border-box;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ }
+ }
+ .save-btn {
+ background-color: #3d68e1;
+ width: 240px;
+ height: 40px;
+ margin: 0 auto;
+ border-radius: 10px;
+ color: #fff;
+ line-height: 40px;
+ font-size: 14px;
+ margin-top: 20px;
+ }
+ }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index bb448d4..a4d5c7b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -40,8 +40,8 @@
// }
})
-const serverUrl = "http://58.118.225.79:41243" // 缇婁簲
-// const serverUrl = "http://192.168.20.10:7003"
+// const serverUrl = "http://58.118.225.79:41243" // 缇婁簲
+const serverUrl = "http://192.168.20.10:7003"
module.exports = {
pages,
--
Gitblit v1.8.0