|
|
|
|
@ -2,9 +2,12 @@
|
|
|
|
|
<!-- 关联设备的右侧查询盒子 -->
|
|
|
|
|
<div class="searchBox_body">
|
|
|
|
|
<div class="searchBox_img">
|
|
|
|
|
<div class="searchBox_img_top">
|
|
|
|
|
<el-button
|
|
|
|
|
class="searchBox_img_top"
|
|
|
|
|
@click="change_types(searchBoxData.typesAll)"
|
|
|
|
|
>
|
|
|
|
|
<img :src="searchBoxData.src" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-button>
|
|
|
|
|
<span>{{ searchBoxData.img_text }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-checkbox-group v-model="searchBoxData.company_types">
|
|
|
|
|
@ -12,7 +15,7 @@
|
|
|
|
|
class="searchBox_btn"
|
|
|
|
|
v-for="item in searchBoxData.btnList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
@change="sendClearList(item.type, item.value)"
|
|
|
|
|
@change="sendClearList($event, item.type, item.value)"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
name="type"
|
|
|
|
|
>
|
|
|
|
|
@ -34,50 +37,155 @@ export default {
|
|
|
|
|
pushValue: {
|
|
|
|
|
title: "",
|
|
|
|
|
pushTableData: [],
|
|
|
|
|
search_params:{}, // 最新的查询入参
|
|
|
|
|
},
|
|
|
|
|
types_params_list: [], // 选中视频企业类型对应的id
|
|
|
|
|
per_types_params_list: [], // 选中智能企业类型对应的id
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
methods: {
|
|
|
|
|
async sendClearList(item, value) {
|
|
|
|
|
async sendClearList(e, item, value) {
|
|
|
|
|
if (e) {
|
|
|
|
|
// 单点确定要查询的时候
|
|
|
|
|
// 复选框单独点击时查询表格数据
|
|
|
|
|
this.$emit("clearList"); // 先执行清空邻复选框
|
|
|
|
|
// 切换表格标题
|
|
|
|
|
console.log("item123", item);
|
|
|
|
|
if (item === "1") {
|
|
|
|
|
this.types_params_list.push(value);
|
|
|
|
|
this.pushValue.title = "视频监控设备列表";
|
|
|
|
|
// 根据企业标签查询视频数据
|
|
|
|
|
this.pushValue.search_params = {
|
|
|
|
|
pageSize: 4,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
deviceVideoSubTypes: "",
|
|
|
|
|
};
|
|
|
|
|
this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
|
|
|
|
|
await getVideoList(this.pushValue.search_params).then((res) => {
|
|
|
|
|
console.log("resVideoList1", res.rows);
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
} else if (item === "2") {
|
|
|
|
|
this.per_types_params_list.push(value);
|
|
|
|
|
this.pushValue.title = "智能感知设备列表";
|
|
|
|
|
this.pushValue.search_params = {
|
|
|
|
|
pageSize: 4,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
devicePerceptionSubTypes: "",
|
|
|
|
|
};
|
|
|
|
|
this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
|
|
|
|
|
.sort()
|
|
|
|
|
.toString();
|
|
|
|
|
await getPerceptionList(this.pushValue.search_params).then((res) => {
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
bus.$emit("send", this.pushValue);
|
|
|
|
|
console.log("value", value);
|
|
|
|
|
} else {
|
|
|
|
|
// 复选框单独点击时查询表格数据
|
|
|
|
|
console.log("e1111", e);
|
|
|
|
|
this.$emit("clearList"); // 先执行清空邻复选框
|
|
|
|
|
// 切换表格标题
|
|
|
|
|
console.log("item123", item);
|
|
|
|
|
if (item === "1") {
|
|
|
|
|
console.log("this.types_params_list2", this.types_params_list);
|
|
|
|
|
console.log("value", value);
|
|
|
|
|
this.types_params_list = this.types_params_list.filter(
|
|
|
|
|
(val) => val != value
|
|
|
|
|
); // 取消选中的标签查询
|
|
|
|
|
console.log("this.types_params_list3", this.types_params_list);
|
|
|
|
|
this.pushValue.title = "视频监控设备列表";
|
|
|
|
|
// 根据企业标签查询视频数据
|
|
|
|
|
this.pushValue.search_params = {
|
|
|
|
|
pageSize: 4,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
deviceVideoSubTypes: "",
|
|
|
|
|
};
|
|
|
|
|
this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
|
|
|
|
|
await getVideoList(this.pushValue.search_params).then((res) => {
|
|
|
|
|
console.log("resVideoList1", res.rows);
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
} else if (item === "2") {
|
|
|
|
|
this.per_types_params_list = this.per_types_params_list.filter(
|
|
|
|
|
(item) => item != value
|
|
|
|
|
);
|
|
|
|
|
this.pushValue.title = "智能感知设备列表";
|
|
|
|
|
this.pushValue.search_params = {
|
|
|
|
|
pageSize: 4,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
devicePerceptionSubTypes: "",
|
|
|
|
|
};
|
|
|
|
|
this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
|
|
|
|
|
.sort()
|
|
|
|
|
.toString();
|
|
|
|
|
await getPerceptionList(this.pushValue.search_params).then((res) => {
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
bus.$emit("send", this.pushValue);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async change_types(num) {
|
|
|
|
|
// 标签按钮左侧图标点击
|
|
|
|
|
this.$emit("clearList"); // 先执行清空邻复选框
|
|
|
|
|
// 切换表格标题
|
|
|
|
|
if (item === "1") {
|
|
|
|
|
this.types_params_list = []; // 点击按钮全查的时候，要让单点查询的记录清空掉
|
|
|
|
|
this.per_types_params_list = [];
|
|
|
|
|
this.searchBoxData.company_types = [];
|
|
|
|
|
if (num === "1") {
|
|
|
|
|
// 视频监控全标签查
|
|
|
|
|
this.pushValue.title = "视频监控设备列表";
|
|
|
|
|
// 根据企业标签查询视频数据
|
|
|
|
|
const val = {
|
|
|
|
|
this.pushValue.search_params = {
|
|
|
|
|
pageSize: 4,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
deviceVideoSubType: value,
|
|
|
|
|
deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
|
|
|
|
|
};
|
|
|
|
|
await getVideoList(val).then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
console.log("resVideoList1", res.rows);
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning("查询视频监控设备列表失败");
|
|
|
|
|
}
|
|
|
|
|
await getVideoList(this.pushValue.search_params).then((res) => {
|
|
|
|
|
console.log("resVideoList1", res.rows);
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
} else if (item === "2") {
|
|
|
|
|
} else if (num === "2") {
|
|
|
|
|
console.log("num123", num);
|
|
|
|
|
// 智能感知全标签查
|
|
|
|
|
this.pushValue.title = "智能感知设备列表";
|
|
|
|
|
const val = {
|
|
|
|
|
this.pushValue.search_params = {
|
|
|
|
|
pageSize: 4,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
devicePerceptionSubType: value,
|
|
|
|
|
devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
|
|
|
|
|
};
|
|
|
|
|
await getPerceptionList(val).then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning("查询智能感知设备列表失败");
|
|
|
|
|
}
|
|
|
|
|
await getPerceptionList(this.pushValue.search_params).then((res) => {
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushValue.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
bus.$emit("send", this.pushValue);
|
|
|
|
|
console.log("value", value);
|
|
|
|
|
// deviceVideoSubType
|
|
|
|
|
// const types_arr = this.searchBoxData.btnList.map((item) => ({
|
|
|
|
|
// name: item.name,
|
|
|
|
|
// }));
|
|
|
|
|
// const types_text = types_arr.map((item) => item.name);
|
|
|
|
|
// console.log("types_text", types_text);
|
|
|
|
|
// console.log(
|
|
|
|
|
// "this.searchBoxData.company_types",
|
|
|
|
|
// this.searchBoxData.company_types.length
|
|
|
|
|
// );
|
|
|
|
|
// // 全选或者全不选操作
|
|
|
|
|
// if (this.searchBoxData.company_types.length === 9) {
|
|
|
|
|
// this.searchBoxData.company_types = []; // 置空，全不选
|
|
|
|
|
// } else if (
|
|
|
|
|
// this.searchBoxData.company_types.length != 0 &&
|
|
|
|
|
// this.searchBoxData.company_types.length != 9
|
|
|
|
|
// ) {
|
|
|
|
|
// this.searchBoxData.company_types = types_text; // 没全选，则全选
|
|
|
|
|
// } else if (this.searchBoxData.company_types.length === 0) {
|
|
|
|
|
// this.searchBoxData.company_types = types_text; // 没选，也全选
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
@ -91,22 +199,30 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 19.8%;
|
|
|
|
|
height: 53%;
|
|
|
|
|
padding-top: 8%;
|
|
|
|
|
padding-left: 3%;
|
|
|
|
|
width: 22%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
.searchBox_img_top {
|
|
|
|
|
width: 78%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
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: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 1.8vw;
|
|
|
|
|
height: 3.6vh;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.searchBox_img_top:focus,
|
|
|
|
|
.searchBox_img_top:hover {
|
|
|
|
|
filter: brightness(170%);
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
margin-top: 7%;
|
|
|
|
|
}
|
|
|
|
|
|
