From a827dbadd7dcc86067cb71d36a62abbf3418a91f Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 03 十一月 2021 17:38:26 +0800
Subject: [PATCH] hyj change shuohuang
---
src/pages/systemSettings/views/generalSettings.vue | 500 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 389 insertions(+), 111 deletions(-)
diff --git a/src/pages/systemSettings/views/generalSettings.vue b/src/pages/systemSettings/views/generalSettings.vue
index b07b8b5..753211b 100644
--- a/src/pages/systemSettings/views/generalSettings.vue
+++ b/src/pages/systemSettings/views/generalSettings.vue
@@ -11,57 +11,177 @@
<div class="menu-item" @click="openRight('sound')">
<div>浜嬩欢澹伴煶</div>
</div>
+ <div class="menu-item" @click="openRight('personalise')">
+ <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 class="bar">
+ <span class="name">璁惧ID</span>
+ <span class="desc">{{ deviceInfo.server_id }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">璁惧鍨嬪彿</span>
+ <span class="desc">{{ deviceInfo.deviceModel }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">璁惧绫诲瀷</span>
+ <span class="desc">{{ deviceInfo.deviceDesc }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">閫氶亾涓暟</span>
+ <span class="desc">{{ deviceInfo.channelCount }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">涓绘帶鐗堟湰</span>
+ <span class="desc">{{ deviceInfo.masterVersion }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">web鐗堟湰</span>
+ <span class="desc">{{ deviceInfo.webVersion }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">纭洏淇℃伅</span>
+ <span class="desc">{{ deviceInfo.disks }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">CPU</span>
+ <span class="desc">{{ deviceInfo.cpu }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">鍐呭瓨</span>
+ <span class="desc">{{ deviceInfo.memory }}</span>
+ </div>
+ <div class="bar">
+ <span class="name">杩愯鏃堕棿</span>
+ <span class="desc">{{ deviceInfo.runningTime }}</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
- >
- </el-slider>
+ :show-tooltip="false"
+ ></el-slider>
</div>
- s
+ <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
- >
- </el-slider>
+ :show-tooltip="false"
+ ></el-slider>
</div>
- s
+ <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 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" @click="removeSound(item)"></span>
+ </div>
+ </div>
+ <div class="add-group">
+ <el-upload
+ class="upload-demo"
+ drag
+ action="https://jsonplaceholder.typicode.com/posts/"
+ :http-request="uploadSound"
+ v-show="showUpload"
+ :show-file-list="false"
+ >
+ <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 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 class="lang" v-if="activePage == 'personalise'">
+ <div class="title">鍥炬爣涓婚</div>
+
+ <div class="min-dur" style="cursor:pointer;" @click="selectIcons(0)">
+ <div class="title">鎵佸钩鍐欏疄鍥炬爣</div>
+ <div class="entity">
+ <div
+ class="entity-img"
+ v-for="(item, i) in realIconList"
+ :key="i"
+ ></div>
+ </div>
+ </div>
+ <div class="min-dur" style="cursor:pointer;" @click="selectIcons(1)">
+ <div class="title">鎵佸钩鍖栧浘鏍�</div>
+ <div class="entity">
+ <div
+ class="entity-img"
+ v-for="(item, i) in flatIconList"
+ :key="i"
+ ></div>
+ </div>
+ </div>
+ <div class="title">妗岄潰鑳屾櫙涓婚</div>
+ <div class="min-dur" style="padding-top:25px;">
+ <div class="bg-list">
+ <div
+ class="bg-img"
+ v-for="(item, i) in tableBGList"
+ :key="i"
+ ></div>
</div>
</div>
</div>
@@ -71,104 +191,99 @@
</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 { saveAlarmConfig, getDevInfo } from "@/api/system";
+import { uploadSound, getSoundList ,deleteSound} from "@/api/event";
+import config from "../../../../package.json";
+
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: {},
+ showUpload: false,
alarmConf: {
- min_video_len: 0,
- max_video_len: 0,
+ min_video_len: 10,
+ max_video_len: 15,
},
- basioInfoList: [
- { name: "绠�浣撲腑鏂�", desc: "fesF" },
- { name: "鑻辨枃", desc: "fesF" },
- { name: "绻佷綋涓枃锛堥娓級", desc: "fesF" },
- ],
- keyboardList: [{ name: "Hanyu Pinyin(algtr)" }, { name: "ENG" }],
-
- wireFormRules: {},
+ soundList: [],
activePage: "basic",
- rules: {
- deviceName: [
- { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
- ],
+ deviceInfo: {
+ cpu: "",
+ runningTime: "",
+ server_id: "",
+ deviceModel: "",
+ deviceDesc: "",
+ masterVersion: "",
+ channelCount: "",
+ webVersion: "",
+ disks: "",
+ memory: "",
},
- ipv4Form: {},
- ipv6Form: {},
- ipv4FormRules: {},
- ipv6FormRules: {},
- options: [
- {
- value: "閫夐」1",
- label: "鎵嬪姩",
- },
- {
- value: "閫夐」2",
- label: "鑷姩",
- },
- ],
- value: "",
+ realIconList: [{}, {}, {}],
+ flatIconList: [{}, {}, {}],
+ tableBGList: [{}, {}, {}],
};
},
- components: {
- cloudNode,
- ipInput,
- switchBar,
+ mounted() {
+ this.getDeviceInfo();
+ this.getSounds();
+
},
- mounted() {},
beforeDestroy() {},
props: ["barName"],
methods: {
+ getDeviceInfo() {
+ getDevInfo().then((res) => {
+ let info = res.data.deviceInfo;
+ let basic = res.data;
+ this.deviceInfo.cpu = info.cpu[0].modelName;
+ this.deviceInfo.runningTime = this.secondsFormat(info.host.uptime);
+ this.deviceInfo.server_id = basic.server_id;
+ this.deviceInfo.deviceModel = basic.deviceModel;
+ this.deviceInfo.deviceDesc = basic.deviceDesc;
+ this.deviceInfo.masterVersion = basic.masterVersion;
+ this.deviceInfo.channelCount = basic.channelCount;
+ this.deviceInfo.webVersion = "V" + config.version;
+ this.deviceInfo.disks = "( " + info.disk + ") ";
+ this.deviceInfo.memory =
+ (info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";
+ this.alarmConf.min_video_len = basic.min_video_len
+ this.alarmConf.max_video_len = basic.max_video_len
+ });
+ },
+
+ getSounds() {
+ getSoundList()
+ .then((res) => {
+ if (res.success) {
+ this.soundList = res.data;
+ }
+ })
+ .catch((e) => console.log(e));
+ },
+ secondsFormat(s) {
+ var day = (s / (24 * 3600)) | 0;
+ var hour = ((s - day * 24 * 3600) / 3600) | 0;
+ var minute = ((s - day * 24 * 3600 - hour * 3600) / 60) | 0;
+ var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
+ return day + "澶� " + hour + "灏忔椂 " + minute + "鍒� " + second + "绉�";
+ },
+ uploadSound(params) {
+ let param = new FormData();
+ param.append("file", params.file);
+ uploadSound(param).then((res) => {
+ console.log(res.data);
+ this.getSounds();
+ });
+ },
openRight(typ) {
this.activePage = typ;
+ // if (typ == "sound") {
+ // this.getSounds();
+ // }
},
wifiControl(val) {},
checkWifi() {
@@ -176,6 +291,48 @@
},
checkWire(item) {
this.inWireDetail = true;
+ },
+ selectIcons(typ){
+
+ },
+ removeSound(item){
+ this.$confirm('鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�', '鍒犻櫎浜嬩欢澹伴煶', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ deleteSound({
+ id:item.id
+ }).then((res) => {
+ if (res.success) {
+ this.getSounds()
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ });
+ this.showUpload=false
+ }
+ },err=>{
+ this.$message.error(err.msg)
+ })
+ })
+ },
+ 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: "淇濆瓨鎴愬姛",
+ });
+ }
+ });
},
},
};
@@ -194,12 +351,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 +413,90 @@
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: 50px;
+ 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: 105px;
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;
}
}
+
+ .min-dur:hover {
+ background-color: rgba(233, 233, 233, 1);
+ }
+
.entity {
display: flex;
align-items: center;
@@ -288,10 +505,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;
+ }
}
}
}
@@ -307,5 +561,29 @@
margin-top: 20px;
}
}
+
+ .lang {
+ .min-dur {
+ .bg-list {
+ display: flex;
+ .bg-img {
+ background-color: aquamarine;
+ width: 100px;
+ height: 60px;
+ margin-right: 10px;
+ }
+ }
+ .entity {
+ display: flex;
+
+ .entity-img {
+ background-color: aquamarine;
+ width: 50px;
+ height: 50px;
+ margin-right: 10px;
+ }
+ }
+ }
+ }
}
</style>
--
Gitblit v1.8.0