|
|
|
|
@ -0,0 +1,339 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 视频设备、智能设备查询 -->
|
|
|
|
|
<div class="search_box">
|
|
|
|
|
<div class="box_title">设备列表</div>
|
|
|
|
|
<div class="search_check">
|
|
|
|
|
<!-- 视频设备查询条件 -->
|
|
|
|
|
<div class="video_check">
|
|
|
|
|
<div class="video_btn">
|
|
|
|
|
<el-button class="video_button" @click="video_all_check">
|
|
|
|
|
<img :src="video_btn_img_src" alt="" />
|
|
|
|
|
</el-button>
|
|
|
|
|
<div class="video_text">{{ video_text }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-checkbox-group v-model="video_checkgroup">
|
|
|
|
|
<el-checkbox
|
|
|
|
|
class="video_checks"
|
|
|
|
|
v-for="item in video_btn_list"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
@change="video_check_search($event, item.value)"
|
|
|
|
|
>
|
|
|
|
|
{{ item.name }}</el-checkbox
|
|
|
|
|
>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 智能设备查询条件 -->
|
|
|
|
|
<div class="perception_check">
|
|
|
|
|
<div class="perception_btn">
|
|
|
|
|
<el-button class="perception_button" @click="perception_all_check">
|
|
|
|
|
<img :src="perception_btn_img_src" alt="" />
|
|
|
|
|
</el-button>
|
|
|
|
|
<div class="perception_text">{{ perception_text }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-checkbox-group v-model="perception_checkgroup">
|
|
|
|
|
<el-checkbox
|
|
|
|
|
class="perception_checks"
|
|
|
|
|
v-for="item in perception_btn_list"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
@change="perception_check_search($event, item.value)"
|
|
|
|
|
>
|
|
|
|
|
{{ item.name }}</el-checkbox
|
|
|
|
|
>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
|
|
|
|
|
export default {
|
|
|
|
|
name: "SearchBox",
|
|
|
|
|
props: {
|
|
|
|
|
only_params: {}, // 主页传来的查询入参，会在本页面添加更多查询入参
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
video_checkgroup: [], // 视频设备复选框双向绑定
|
|
|
|
|
deviceVideoSubTypes: [], // 视频设备点击查询添加参数
|
|
|
|
|
video_btn_list: [
|
|
|
|
|
{ value: 1, name: "公共区域", type: "1" },
|
|
|
|
|
{ value: 2, name: "地下车库", type: "1" },
|
|
|
|
|
{ value: 3, name: "全景监控", type: "1" },
|
|
|
|
|
{ value: 5, name: "人脸抓拍", type: "1" },
|
|
|
|
|
{ value: 6, name: "电梯监控", type: "1" },
|
|
|
|
|
{ value: 7, name: "人体测温", type: "1" },
|
|
|
|
|
{ value: 8, name: "车辆抓拍", type: "1" },
|
|
|
|
|
{ value: 9, name: "人脸门禁", type: "1" },
|
|
|
|
|
{ value: 4, name: "高空抛物", type: "1" },
|
|
|
|
|
],
|
|
|
|
|
video_btn_img_src: require("@/assets/companyFile/camera03.png"),
|
|
|
|
|
video_text: "视频监控设备",
|
|
|
|
|
perception_checkgroup: [], // 智能设备复选框双向绑定
|
|
|
|
|
devicePerceptionSubTypes: [], // 智能设备点击查询添加参数
|
|
|
|
|
perception_btn_list: [
|
|
|
|
|
{ value: 2, name: "车辆抓拍", type: "2" },
|
|
|
|
|
{ value: 1, name: "人脸抓拍", type: "2" },
|
|
|
|
|
{ value: 3, name: "门禁设备", type: "2" },
|
|
|
|
|
{ value: 4, name: "高抛抓拍", type: "2" },
|
|
|
|
|
{ value: 6, name: "全结构化", type: "2" },
|
|
|
|
|
{ value: 7, name: "智能烟感", type: "2" },
|
|
|
|
|
{ value: 8, name: "访客机", type: "2" },
|
|
|
|
|
{ value: 10, name: "多维设备", type: "2" },
|
|
|
|
|
{ value: 11, name: "WIFI设备", type: "2" },
|
|
|
|
|
],
|
|
|
|
|
perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
|
|
|
|
|
perception_text: "智能感知设备",
|
|
|
|
|
check_push_table_data: {}, // 复选框查询的表格数据传递给表格
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
clear_search_list() {
|
|
|
|
|
this.video_checkgroup = []; // 视频设备复选框清空
|
|
|
|
|
this.perception_checkgroup = []; //智能设备复选框清空
|
|
|
|
|
this.deviceVideoSubTypes = []; // 视频设备复选框清空
|
|
|
|
|
this.devicePerceptionSubTypes = []; // 智能查询参数清空
|
|
|
|
|
delete this.only_params.deviceVideoSubType;
|
|
|
|
|
delete this.only_params.devicePerceptionSubType;
|
|
|
|
|
},
|
|
|
|
|
// 视频设备按钮查全部
|
|
|
|
|
video_all_check() {
|
|
|
|
|
this.perception_checkgroup = []; //智能设备复选框清空
|
|
|
|
|
this.video_checkgroup = []; // 视频设备复选框清空
|
|
|
|
|
delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
|
|
|
|
|
this.only_params.deviceVideoSubType = ""; // 按钮查视频设备的全部
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
console.log("res_video", res);
|
|
|
|
|
this.check_push_table_data = res;
|
|
|
|
|
let data_params = {
|
|
|
|
|
data: this.check_push_table_data,
|
|
|
|
|
params: this.only_params,
|
|
|
|
|
};
|
|
|
|
|
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 智能设备按钮查全部
|
|
|
|
|
perception_all_check() {
|
|
|
|
|
this.perception_checkgroup = []; //智能设备复选框清空
|
|
|
|
|
this.video_checkgroup = []; // 视频设备复选框清空
|
|
|
|
|
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
|
|
|
|
|
this.only_params.devicePerceptionSubType = ""; // 按钮查智能设备的全部
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
console.log("res_video", res);
|
|
|
|
|
this.check_push_table_data = res;
|
|
|
|
|
let data_params = {
|
|
|
|
|
data: this.check_push_table_data,
|
|
|
|
|
params: this.only_params,
|
|
|
|
|
};
|
|
|
|
|
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 视频设备复选查询
|
|
|
|
|
video_check_search(e, value) {
|
|
|
|
|
if (e) {
|
|
|
|
|
// 点击
|
|
|
|
|
delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
|
|
|
|
|
this.perception_checkgroup = []; //智能设备复选框清空
|
|
|
|
|
this.devicePerceptionSubTypes = []; // 智能查询参数清空
|
|
|
|
|
this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
|
|
|
|
|
this.only_params.deviceVideoSubType =
|
|
|
|
|
this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
console.log("res_video", res);
|
|
|
|
|
this.check_push_table_data = res;
|
|
|
|
|
let data_params = {
|
|
|
|
|
data: this.check_push_table_data,
|
|
|
|
|
params: this.only_params,
|
|
|
|
|
};
|
|
|
|
|
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 取消
|
|
|
|
|
delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
|
|
|
|
|
this.perception_checkgroup = []; //智能设备复选框清空
|
|
|
|
|
this.devicePerceptionSubTypes = []; // 智能查询参数清空
|
|
|
|
|
this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
|
|
|
|
|
(item) => item != value
|
|
|
|
|
); // 收集视频类型查询入参
|
|
|
|
|
this.only_params.deviceVideoSubType =
|
|
|
|
|
this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
console.log("res_video", res);
|
|
|
|
|
this.check_push_table_data = res;
|
|
|
|
|
let data_params = {
|
|
|
|
|
data: this.check_push_table_data,
|
|
|
|
|
params: this.only_params,
|
|
|
|
|
};
|
|
|
|
|
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 智能设备复选查询
|
|
|
|
|
perception_check_search(e, value) {
|
|
|
|
|
if (e) {
|
|
|
|
|
// 点击
|
|
|
|
|
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
|
|
|
|
|
this.video_checkgroup = []; // 视频设备复选框清空
|
|
|
|
|
this.deviceVideoSubTypes = []; // 视频设备复选框清空
|
|
|
|
|
this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
|
|
|
|
|
this.only_params.devicePerceptionSubType =
|
|
|
|
|
this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
|
|
|
|
|
getPerceptionList(this.only_params).then((res) => {
|
|
|
|
|
this.check_push_table_data = res;
|
|
|
|
|
let data_params = {
|
|
|
|
|
data: this.check_push_table_data,
|
|
|
|
|
params: this.only_params,
|
|
|
|
|
};
|
|
|
|
|
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 取消
|
|
|
|
|
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
|
|
|
|
|
this.video_checkgroup = []; // 视频设备复选框清空
|
|
|
|
|
this.deviceVideoSubTypes = []; // 视频设备复选框清空
|
|
|
|
|
this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
|
|
|
|
|
(item) => item != value
|
|
|
|
|
); // 收集智能类型查询入参
|
|
|
|
|
this.only_params.devicePerceptionSubType =
|
|
|
|
|
this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
|
|
|
|
|
getPerceptionList(this.only_params).then((res) => {
|
|
|
|
|
this.check_push_table_data = res;
|
|
|
|
|
let data_params = {
|
|
|
|
|
data: this.check_push_table_data,
|
|
|
|
|
params: this.only_params,
|
|
|
|
|
};
|
|
|
|
|
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.search_box {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
width: 63vw;
|
|
|
|
|
height: 24vh;
|
|
|
|
|
// border: 0.1px solid #485f6c;
|
|
|
|
|
.box_title {
|
|
|
|
|
width: 63vw;
|
|
|
|
|
height: 2vh;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
}
|
|
|
|
|
.search_check {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
width: 63vw;
|
|
|
|
|
height: 20vh;
|
|
|
|
|
// border: 0.1px solid #485f6c;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
// 视频设备复选框盒子
|
|
|
|
|
.video_check {
|
|
|
|
|
width: 31vw;
|
|
|
|
|
height: 20vh;
|
|
|
|
|
border: 0.1px solid #485f6c;
|
|
|
|
|
display: flex;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
// 按钮区域
|
|
|
|
|
.video_btn {
|
|
|
|
|
width: 7vw;
|
|
|
|
|
height: 20vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.video_button {
|
|
|
|
|
background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
width: 5vw;
|
|
|
|
|
height: 10vh;
|
|
|
|
|
margin: 0px auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 0px;
|
|
|
|
|
img {
|
|
|
|
|
width: 1.8vw;
|
|
|
|
|
height: 3.6vh;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.video_button:focus,
|
|
|
|
|
.video_button:hover {
|
|
|
|
|
filter: brightness(170%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 智能设备复选框盒子
|
|
|
|
|
.perception_check {
|
|
|
|
|
width: 31vw;
|
|
|
|
|
height: 20vh;
|
|
|
|
|
border: 0.1px solid #485f6c;
|
|
|
|
|
display: flex;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
// 按钮区域
|
|
|
|
|
.perception_btn {
|
|
|
|
|
width: 7vw;
|
|
|
|
|
height: 20vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.perception_button {
|
|
|
|
|
background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
width: 5vw;
|
|
|
|
|
height: 10vh;
|
|
|
|
|
margin: 0px auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 0px;
|
|
|
|
|
img {
|
|
|
|
|
width: 1.8vw;
|
|
|
|
|
height: 3.6vh;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.perception_button:focus,
|
|
|
|
|
.perception_button:hover {
|
|
|
|
|
filter: brightness(170%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-checkbox-group {
|
|
|
|
|
width: 24vw;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-flow: wrap;
|
|
|
|
|
padding: 20px 5px 0px 5px;
|
|
|
|
|
.el-checkbox {
|
|
|
|
|
width: 30%;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 4vh;
|
|
|
|
|
border: 1px solid #4a6072;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 0px !important;
|
|
|
|
|
background: #323f43;
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
.el-checkbox__label {
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding-left: 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-checkbox.is-checked {
|
|
|
|
|
background: #495461;
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
}
|
|
|
|
|
.el-checkbox__inner {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
lukeyan
1 year ago