From 18dfd3d183e68db6306b34500813cca8f8c689c9 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 29 四月 2021 10:08:30 +0800
Subject: [PATCH] 系统维护和系统设置
---
src/pages/systemSettings/views/generalSettings.vue | 221 +++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 183 insertions(+), 38 deletions(-)
diff --git a/src/pages/systemSettings/views/generalSettings.vue b/src/pages/systemSettings/views/generalSettings.vue
index b07b8b5..7507fbc 100644
--- a/src/pages/systemSettings/views/generalSettings.vue
+++ b/src/pages/systemSettings/views/generalSettings.vue
@@ -16,54 +16,100 @@
<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>
+ <span class="desc">{{ 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="sec">{{ alarmConf.min_video_len }}s</div>
<div class="block">
<el-slider
v-model="alarmConf.min_video_len"
+ id="cut_min_duration"
:min="0"
:max="100"
- show-input
+ :show-tooltip="false"
>
</el-slider>
</div>
+ <el-input-number
+ v-model="alarmConf.min_video_len"
+ controls-position="right"
+ :min="0"
+ :max="100"
+ size="mini"
+ ></el-input-number>
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="sec">{{ alarmConf.max_video_len }}s</div>
<div class="block">
<el-slider
v-model="alarmConf.max_video_len"
+ id="cut_max_duration"
:min="0"
:max="100"
- show-input
+ :show-tooltip="false"
>
</el-slider>
</div>
+ <el-input-number
+ v-model="alarmConf.max_video_len"
+ controls-position="right"
+ :min="0"
+ :max="100"
+ size="mini"
+ ></el-input-number>
s
</div>
</div>
+
+ <div class="save-btn" @click="submitAlarm">淇濆瓨</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="title">浜嬩欢澹伴煶</div>
+ <div
+ class="bar"
+ v-for="(item, i) in soundList"
+ :key="i"
+ @click="clickSound(item, i)"
+ ref="soundBar"
+ >
+ <div class="left-part">
+ <span class="icon iconfont"></span>
+ <span class="name"> {{ item.name }}</span>
+ </div>
<div class="btns">
<span class="icon iconfont"></span>
<span class="icon iconfont"></span>
</div>
</div>
+ <div class="add-group">
+ <el-upload
+ class="upload-demo"
+ drag
+ action="https://jsonplaceholder.typicode.com/posts/"
+ multiple
+ v-show="showUpload"
+ >
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">
+ 浜嬩欢澹伴煶鏂囦欢鎷栧埌姝ゅ锛屾垨<em>鐐瑰嚮涓婁紶</em> <br />
+ 浠呮敮鎸乵p3/wma绛夋牸寮�
+ </div>
+ </el-upload>
+ <div v-show="!showUpload"
+></div>
+ <div class="add-btn">
+ <span class="icon iconfont" @click="showUpload=!showUpload"></span>
+ </div>
+
+ </div>
</div>
</div>
</div>
@@ -71,22 +117,8 @@
</template>
<script>
-import {
- createSerfCluster,
- randomPwd,
- search,
- getSearchNodes,
- stopSearching,
- findCluster,
- updateClusterName,
- joinCluster,
- leave,
- getVrrp,
- setVrrp,
- createESNode,
- addESNode,
- getEsClusterInfo,
-} from "@/api/clusterManage";
+import { saveAlarmConfig } from "@/api/system";
+
import cloudNode from "../components/CloudNode";
import ipInput from "@/components/subComponents/IPInput";
import { isIPv4 } from "@/scripts/validate";
@@ -123,6 +155,7 @@
isOpenWifi: false,
inWireDetail: false,
wireForm: {},
+ showUpload:false,
alarmConf: {
min_video_len: 0,
max_video_len: 0,
@@ -132,7 +165,7 @@
{ name: "鑻辨枃", desc: "fesF" },
{ name: "绻佷綋涓枃锛堥娓級", desc: "fesF" },
],
- keyboardList: [{ name: "Hanyu Pinyin(algtr)" }, { name: "ENG" }],
+ soundList: [{ name: "2.mp3" }, { name: "3.mp3" }],
wireFormRules: {},
activePage: "basic",
@@ -177,6 +210,23 @@
checkWire(item) {
this.inWireDetail = true;
},
+ clickSound(item, i) {
+ this.$refs["soundBar"].forEach((x) => {
+ x.style.backgroundColor = "rgba(248, 248, 248, 1)";
+ });
+ this.$refs["soundBar"][i].style.backgroundColor =
+ "rgba(233, 233, 233, 1)";
+ },
+ submitAlarm() {
+ saveAlarmConfig(this.alarmConf).then((res) => {
+ if (res && res.success) {
+ this.$notify({
+ type: "success",
+ message: "淇濆瓨鎴愬姛",
+ });
+ }
+ });
+ },
},
};
</script>
@@ -194,12 +244,14 @@
box-sizing: border-box;
.cluster-center {
height: 100%;
- width: 260px;
+ width: 280px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
- background-color: lavender;
+ border-right: 5px solid #f8f8f8;
+
+ // background-color: lavender;
.menu-item {
background-color: #f8f8f8;
height: 40px;
@@ -254,32 +306,88 @@
max-width: none !important;
}
.lang {
+ .title {
+ height: 35px;
+ line-height: 35px;
+ font-size: 16px;
+ text-align: left;
+ margin-bottom: 5px;
+ }
.bar {
height: 50px;
- background-color: aliceblue;
+ background-color: rgba(248, 248, 248, 1);
border-radius: 10px;
line-height: 50px;
box-sizing: border-box;
- padding: 0 20px;
+ padding: 0 30px 0 20px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
+ cursor: pointer;
+ .left-part {
+ .icon {
+ color: rgba(191, 191, 191, 1);
+ font-size: 16px;
+ margin-right: 5px;
+ }
+ }
+ .name {
+ font-size: 15px;
+ }
+ .btns {
+ width: 50px;
+ display: flex;
+ justify-content: space-between;
+ color: rgba(191, 191, 191, 1);
+ }
+ .desc {
+ font-size: 14px;
+ color: rgba(134, 134, 134, 1);
+ }
+ }
+ .bar:hover {
+ background-color: rgba(233, 233, 233, 1);
+ }
+ .add-group{
+ margin-top: 170px;
+ height: 235px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ }
+ .upload-demo {
+ .el-upload-dragger {
+ width: 290px;
+ }
+ }
+ .add-btn {
+ height: 40px;
+ line-height: 40px;
+ margin-top: 10px;
+ .icon {
+ font-size: 30px;
+ color: rgba(61, 104, 225, 1);
+ }
}
.min-dur {
box-sizing: border-box;
- padding: 0 10px;
+ padding: 0 20px;
background-color: rgba(248, 248, 248, 1);
- height: 100px;
+ height: 95px;
margin-bottom: 20px;
border-radius: 15px;
.title {
- height: 50px;
- line-height: 50px;
+ height: 45px;
+ line-height: 45px;
+
text-align: left;
box-sizing: border-box;
- padding: 0 10px;
+ padding: 0 6px;
+ font-size: 14px;
}
}
+
.entity {
display: flex;
align-items: center;
@@ -288,10 +396,47 @@
.sec {
min-width: 30px;
line-height: 80px;
- margin-right: 15px;
+ margin-right: 10px;
+ color: rgba(120, 120, 120, 1);
+ font-size: 14px;
}
.block {
- flex: auto;
+ flex: 1;
+ margin: 0 20px 0 6px;
+ }
+ .el-input-number--mini {
+ width: 80px;
+ }
+ .el-input-number.is-controls-right[class*="mini"] [class*="increase"],
+ .el-input-number.is-controls-right[class*="mini"] [class*="decrease"] {
+ width: 23px;
+ }
+ .el-input-number.is-controls-right .el-input__inner {
+ padding-left: 13px;
+ padding-right: 37px;
+ }
+ #cut_min_duration {
+ .el-slider__bar {
+ background-color: #3d68e1;
+ }
+ .el-slider__button-wrapper .el-tooltip {
+ width: 18px;
+ height: 18px;
+ border: 4px solid #3d68e1;
+ box-sizing: border-box;
+ }
+ }
+
+ #cut_max_duration {
+ .el-slider__bar {
+ background-color: #ff9e6e;
+ }
+ .el-slider__button-wrapper .el-tooltip {
+ width: 18px;
+ height: 18px;
+ border: 4px solid #ff9e6e;
+ box-sizing: border-box;
+ }
}
}
}
--
Gitblit v1.8.0