<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 class="menu-item" @click="openRight('personalise')">
|
<div>个性化设置</div>
|
</div>
|
</div>
|
<div class="cluster-right">
|
<div class="lang" v-if="activePage == 'basic'">
|
<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="block">
|
<el-slider
|
v-model="alarmConf.min_video_len"
|
id="cut_min_duration"
|
:min="0"
|
:max="100"
|
: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="block">
|
<el-slider
|
v-model="alarmConf.max_video_len"
|
id="cut_max_duration"
|
:min="0"
|
:max="100"
|
: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 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 />仅支持mp3/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 == '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>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { saveAlarmConfig, getDevInfo } from "@/api/system";
|
import { uploadSound, getSoundList ,deleteSound} from "@/api/event";
|
import config from "../../../../package.json";
|
|
import { isIPv4 } from "@/scripts/validate";
|
|
export default {
|
data() {
|
return {
|
isHighClass: false,
|
inWifiDetail: false,
|
inWireDetail: false,
|
showUpload: false,
|
alarmConf: {
|
min_video_len: 10,
|
max_video_len: 15,
|
},
|
soundList: [],
|
activePage: "basic",
|
deviceInfo: {
|
cpu: "",
|
runningTime: "",
|
server_id: "",
|
deviceModel: "",
|
deviceDesc: "",
|
masterVersion: "",
|
channelCount: "",
|
webVersion: "",
|
disks: "",
|
memory: "",
|
},
|
realIconList: [{}, {}, {}],
|
flatIconList: [{}, {}, {}],
|
tableBGList: [{}, {}, {}],
|
};
|
},
|
mounted() {
|
this.getDeviceInfo();
|
this.getSounds();
|
|
},
|
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() {
|
this.inWifiDetail = true;
|
},
|
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: "保存成功",
|
});
|
}
|
});
|
},
|
},
|
};
|
</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: 280px;
|
overflow: auto;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
padding: 10px;
|
border-right: 5px solid #f8f8f8;
|
|
// 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 {
|
.title {
|
height: 35px;
|
line-height: 35px;
|
font-size: 16px;
|
text-align: left;
|
margin-bottom: 5px;
|
}
|
.bar {
|
height: 50px;
|
background-color: rgba(248, 248, 248, 1);
|
border-radius: 10px;
|
line-height: 50px;
|
box-sizing: border-box;
|
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 20px;
|
background-color: rgba(248, 248, 248, 1);
|
height: 105px;
|
margin-bottom: 20px;
|
border-radius: 15px;
|
.title {
|
height: 45px;
|
line-height: 45px;
|
|
text-align: left;
|
box-sizing: border-box;
|
padding: 0 6px;
|
font-size: 14px;
|
}
|
}
|
|
.min-dur:hover {
|
background-color: rgba(233, 233, 233, 1);
|
}
|
|
.entity {
|
display: flex;
|
align-items: center;
|
height: 30px;
|
|
.sec {
|
min-width: 30px;
|
line-height: 80px;
|
margin-right: 10px;
|
color: rgba(120, 120, 120, 1);
|
font-size: 14px;
|
}
|
.block {
|
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;
|
}
|
}
|
}
|
}
|
.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;
|
}
|
}
|
|
.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>
|
