<template>
|
<div>
|
<div class="task-camera-box">
|
<p style="padding: 0">
|
<b style="font-size: 14px; line-height: 28px;">传感器</b>
|
<span
|
class="add-btn"
|
@click="createSensor"
|
>
|
<i class="iconfont iconhebingxingzhuang "
|
style="color:#3D68E1;margin-left:10px;font-size:16px;cursor: pointer;"></i>
|
</span>
|
</p>
|
|
<div class="sub-task-rules-box">
|
<span class="task-blank" v-show="groupRules.length == 0 ">暂无传感器，请选择新增</span>
|
<div style=" text-align: left;" v-for="(rule, index) in groupRules" :key="index">
|
|
<div style="margin-left:10px;">
|
<!-- 选择区域 -->
|
<el-checkbox v-model="rule.enable">
|
<span>
|
{{'开启'}}
|
</span>
|
</el-checkbox>
|
|
<!-- 选择类型 -->
|
<el-select v-model="rule.type" placeholder="选择类型" size="small">
|
<el-option
|
v-for="item in selectTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
|
<!-- ip地址 -->
|
<div style="max-width:220px;display: inline-block;">
|
<ip-input
|
:ip="rule.ip"
|
@on-blur="rule.ip = arguments[0]"
|
></ip-input>
|
</div>
|
|
<div style="max-width:120px;display: inline-block;margin-left:10px;">
|
<el-input v-model="rule.port" placeholder="请输入端口"
|
size="small"></el-input>
|
</div>
|
|
<div style="max-width:120px;display: inline-block;margin-left:10px;">
|
<el-input v-model="rule.username" placeholder="请输入用户名"
|
size="small"></el-input>
|
</div>
|
|
<div style="max-width:120px;display: inline-block;margin-left:10px;">
|
<el-input v-model="rule.password" placeholder="请输入密码"
|
size="small"></el-input>
|
</div>
|
|
<div style="max-width:120px;display: inline-block;margin-left:10px;">
|
<el-input v-model="rule.threshold" placeholder="请输入阈值"
|
size="small"></el-input>
|
</div>
|
|
<!-- 新增、删除 按钮 -->
|
<el-button
|
type="text"
|
style="color: #F53D3D;margin-left:10px;"
|
class="iconfont iconshanchu11"
|
@click="groupRules.splice(index, 1)"
|
></el-button>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
deleteCameraRules,
|
updateRuleDefence,
|
updateAlarmLevel
|
} from "@/api/camera";
|
import {
|
findByType
|
} from '@/api/taskMange'
|
import ipInput from "@/components/subComponents/IPInput"
|
|
|
export default {
|
name: "TaskRuleEditor",
|
components:{
|
ipInput
|
},
|
props: {
|
Carmeras: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
sensors: {
|
type: Array,
|
default: () =>{
|
return []
|
}
|
}
|
},
|
filters: {
|
},
|
computed: {
|
},
|
watch: {
|
sensors: function(newVal, oldVal) {
|
if(newVal !== oldVal){
|
this.groupRules = newVal
|
}
|
}
|
},
|
data() {
|
return {
|
baseSensor: {
|
enable:false,
|
type: "",
|
ip: "",
|
id: "",
|
port: "",
|
username: "",
|
password: "",
|
threshold:""
|
},
|
groupRules: [
|
{
|
enable:false,
|
type: "",
|
ip: "",
|
id: "",
|
port: "",
|
username: "",
|
password: "",
|
threshold:""
|
}
|
],
|
selectTypeOptions:[
|
{
|
value:"1",
|
label:"温度"
|
},
|
{
|
value:"2",
|
label:"湿度"
|
},
|
{
|
value:"3",
|
label:"湿度"
|
}
|
]
|
};
|
},
|
methods: {
|
createSensor(){
|
this.groupRules.push(this.baseSensor)
|
},
|
getResult(){
|
if(this.groupRules.length !== 0){
|
let list = this.groupRules.filter(item=>{
|
return item.selectType != "" || item.cameraIp != ""
|
|| item.cameraPort != "" || item.cameraUserName != ""
|
|| item.cameraPaw != "" || item.cameraThro != ""
|
})
|
this.groupRules = list
|
return list.map(i=>{
|
i.port = Number(i.port)
|
i.threshold = Number(i.threshold)
|
return i
|
})
|
}
|
},
|
// 查询字典
|
async findByType() {
|
let res = await findByType();
|
if (res && res.success) {
|
let list = res.data.sensorType.map(i => {
|
let obj = {};
|
obj.label = i.name;
|
obj.value = i.value;
|
return obj;
|
});
|
this.selectTypeOptions = [...list];
|
}
|
},
|
},
|
mounted() {
|
this.findByType();
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.task-camera-box {
|
width: 100%;
|
border-top: 1px solid #ccc;
|
padding-top: 5px;
|
box-sizing: border-box;
|
.sub-task-rules-box {
|
width: 100%;
|
min-height: 50px;
|
padding-top: 7px;
|
box-sizing: border-box;
|
padding-bottom: 38px;
|
.task-rules-button {
|
text-align: right;
|
margin: 15px;
|
}
|
|
.el-select {
|
margin: 3px 8px;
|
min-width: 130px;
|
width: 12%;
|
}
|
}
|
|
.el-button--text {
|
text-decoration: unset;
|
}
|
|
p {
|
text-align: left;
|
// padding: 10px;
|
box-sizing: border-box;
|
}
|
|
.task-blank {
|
float: left;
|
font-family: PingFangSC-Regular;
|
font-size: 12px;
|
color: #cccccc;
|
margin-top: 5px;
|
}
|
.nocamera-css {
|
cursor: not-allowed;
|
color: #3d68e1;
|
margin-left: 10px;
|
font-size: 14px;
|
}
|
}
|
|
.task-rules-box2 {
|
.task-rules-table-box {
|
width: 98%;
|
padding: 0px;
|
box-sizing: border-box;
|
}
|
|
.el-input__inner {
|
border: 0px !important;
|
border-radius: 2px;
|
padding: 0 22px;
|
background-color: transparent;
|
}
|
|
.el-input__suffix {
|
right: 8px;
|
}
|
span {
|
cursor: pointer;
|
}
|
}
|
</style>
|
