<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="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="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"></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"
|
>
|
<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>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { saveAlarmConfig } from "@/api/system";
|
import { uploadSound, getSoundList } from "@/api/event";
|
|
import { isIPv4 } from "@/scripts/validate";
|
|
export default {
|
data() {
|
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,
|
},
|
basioInfoList: [
|
{ name: "简体中文", desc: "fesF" },
|
{ name: "英文", desc: "fesF" },
|
{ name: "繁体中文（香港）", desc: "fesF" },
|
],
|
soundList: [{ name: "2.mp3" }, { name: "3.mp3" }],
|
|
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() {
|
this.getSounds()
|
|
},
|
beforeDestroy() { },
|
props: ["barName"],
|
methods: {
|
getSounds() {
|
getSoundList().then(res => {
|
if (res.success) {
|
this.soundList = res.data.list
|
}
|
}).catch(
|
e => console.log(e)
|
)
|
},
|
uploadSound(params) {
|
let param = new FormData();
|
param.append("file", params.file);
|
uploadSound(param).then((res) => {
|
console.log(res.data);
|
});
|
},
|
openRight(typ) {
|
this.activePage = typ;
|
if (typ == "sound") {
|
this.getSounds()
|
}
|
},
|
wifiControl(val) { },
|
checkWifi() {
|
this.inWifiDetail = true;
|
},
|
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>
|
<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: 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 20px;
|
background-color: rgba(248, 248, 248, 1);
|
height: 95px;
|
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;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
</style>
|
