ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

提交

Browse Source
pull/52/head
lukeyan 1 year ago
parent 2ab2f89ed2
commit cd8e7878d0
3 changed files with 221 additions and 341 deletions
Show Stats Download Patch File Download Diff File

488
src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
Unescape View File

@ -1,339 +1,251 @@
<template> <template>
<!-- 视频设备、智能设备查询 --> <div>
<div class="search_box"> <div class="equipment_table_video">
<div class="box_title">设备列表</div> <div class="table_title">视频监控设备列表</div>
<div class="search_check"> <div class="table_search">
<!-- 视频设备查询条件 --> <el-form :model="search" class="table_search_form">
<div class="video_check"> <el-form-item>
<div class="video_btn"> <el-input
<el-button class="video_button" @click="video_all_check"> v-model="search.equipment"
<img :src="video_btn_img_src" alt="" /> placeholder="输入设备名称搜索"
</el-button> ></el-input>
<div class="video_text">{{ video_text }}</div> </el-form-item>
<el-form-item>
<el-input
v-model="search.channel_code"
placeholder="输入通道国际编码搜索"
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="search.equipment_ip"
placeholder="输入设备IP搜索"
></el-input>
</el-form-item>
<el-form-item>
<el-button @click="video_search">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="video_reset">重置</el-button>
</el-form-item>
</el-form>
</div> </div>
<el-checkbox-group v-model="video_checkgroup"> <div class="table_btn_list">
<el-checkbox <el-button v-for="item in btn_list" :key="item.value">
class="video_checks" <i :class="`el-icon-${item.icon}`" />
v-for="item in video_btn_list" {{ item.label }}</el-button
: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> </div>
<el-checkbox-group v-model="perception_checkgroup"> <div class="table_video">
<el-checkbox <el-table
class="perception_checks" :cell-style="{ background: 'revert' }"
v-for="item in perception_btn_list" :header-cell-style="table_header"
:key="item.value" :data="table_data"
:label="item.name" :highlight-current-row="true"
@change="perception_check_search($event, item.value)" height="336"
> >
{{ item.name }}</el-checkbox <el-table-column type="selection" width="55"> </el-table-column>
> <el-table-column
</el-checkbox-group> v-for="item in table_column"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
></el-table-column>
<el-table-column prop="operation" label="操作">
<template slot-scope="scope">
<el-button
size="small"
class="operation"
@click="openDialog('2', scope.row)"
>编辑
</el-button>
<el-button
size="small"
class="operation"
@click="openDialog('5', scope.row)"
>详情
</el-button>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
export default { export default {
name: "SearchBox",
props: {
only_params: {}, // 主页传来的查询入参，会在本页面添加更多查询入参
},
data() { data() {
return { return {
video_checkgroup: [], // 视频设备复选框双向绑定 search: {
deviceVideoSubTypes: [], // 视频设备点击查询添加参数 equipment: "",
video_btn_list: [ channel_code: "",
{ value: 1, name: "公共区域", type: "1" }, equipment_ip: "",
{ value: 2, name: "地下车库", type: "1" }, },
{ value: 3, name: "全景监控", type: "1" }, btn_list: [
{ value: 5, name: "人脸抓拍", type: "1" }, { value: "1", label: "新增", icon: "plus" },
{ value: 6, name: "电梯监控", type: "1" }, { value: "2", label: "删除", icon: "delete" },
{ value: 7, name: "人体测温", type: "1" }, { value: "3", label: "导入", icon: "bottom-right" },
{ value: 8, name: "车辆抓拍", type: "1" }, { value: "4", label: "导出", icon: "top-left" },
{ value: 9, name: "人脸门禁", type: "1" },
{ value: 4, name: "高空抛物", type: "1" },
], ],
video_btn_img_src: require("@/assets/companyFile/camera03.png"), table_data:[],
video_text: "视频监控设备", table_column: [],
perception_checkgroup: [], // 智能设备复选框双向绑定 table_column_video: [
devicePerceptionSubTypes: [], // 智能设备点击查询添加参数 { prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
perception_btn_list: [ { prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
{ value: 2, name: "车辆抓拍", type: "2" }, { prop: "deviceName", label: "设备名称", width: "270" },
{ value: 1, name: "人脸抓拍", type: "2" }, { prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
{ value: 3, name: "门禁设备", type: "2" }, { prop: "deviceIp", label: "设备IP" },
{ 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: { created() {
clear_search_list() { this.table_column = this.table_column_video;
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
});
}, },
// 智能设备按钮查全部 methods: {
perception_all_check() { obtain_table_data(data,params) {
this.perception_checkgroup = []; //智能设备复选框清空 console.log('data_1',data);
this.video_checkgroup = []; // 视频设备复选框清空 this.table_data = data.rows
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参 console.log('params_1',params);
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) { video_search() {},
if (e) { // 视频设备重置
// 点击 video_reset() {},
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参 table_header({ row, rowIndex }) {
this.video_checkgroup = []; // 视频设备复选框清空 console.log(row);
this.deviceVideoSubTypes = []; // 视频设备复选框清空 console.log(rowIndex);
this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参 return {
this.only_params.devicePerceptionSubType = color: "#fff",
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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.search_box { .equipment_table_video {
margin: 0 auto; .table_title {
margin-top: 1vh;
width: 63vw;
height: 24vh;
// border: 0.1px solid #485f6c;
.box_title {
width: 63vw;
height: 2vh;
color: #fff; color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64); text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
margin-left: 10px;
font-size: 17px;
} }
.search_check { .table_search {
margin-top: 1vh; margin-top: 1vh;
width: 63vw; width: 64vw;
height: 20vh; height: 4vh;
// border: 0.1px solid #485f6c; .table_search_form {
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; display: flex;
justify-content: center; .el-form-item {
align-items: center; margin-left: 0.5vw;
border: 0px;
img {
width: 1.8vw;
height: 3.6vh;
} }
} }
.video_button:focus, /deep/.el-input__inner {
.video_button:hover { border-radius: 0px 0px 0px 0px;
filter: brightness(170%); background: #3c4b4a;
color: #fff;
width: 10vw;
}
.el-button {
width: 4vw;
border: 1px solid #4a6072;
color: #fff;
border-radius: 0px !important;
background: #323f43;
} }
.el-button:focus,
.el-button:hover {
border: 1px solid#34e1b3;
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
background-size: 100% 100% !important;
} }
} }
// 智能设备复选框盒子 .table_btn_list {
.perception_check { width: 64vw;
width: 31vw; height: 5vh;
height: 20vh; .el-button {
border: 0.1px solid #485f6c; width: 90px;
display: flex; height: 5vh;
color: #fff; 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; border: 0px;
img { border-radius: 0px !important;
width: 1.8vw; background: url("~@/assets/companyFile/btn1.png") no-repeat !important;
height: 3.6vh; background-size: 100% 100% !important;
}
.el-button:focus,
.el-button:hover {
filter: brightness(200%);
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
} }
.perception_button:focus, .table_video {
.perception_button:hover { width: 64vw;
filter: brightness(170%); height: 34vh;
} }
/deep/.el-table {
.el-table__body-wrapper {
overflow: auto;
background: #233438;
color: #fff;
&::-webkit-scrollbar {
width: 3px;
} }
// 滚动条里面默认的小方块,自定义样式
&::-webkit-scrollbar-thumb {
background: #4cf993;
border-radius: 2px;
} }
// 滚动条里面的轨道
&::-webkit-scrollbar-track {
background: transparent;
} }
/deep/.el-checkbox-group { }
width: 24vw;
overflow: hidden; thead {
display: flex;
justify-content: space-between;
flex-flow: wrap;
padding: 20px 5px 0px 5px;
.el-checkbox {
width: 30%;
height: 4vh;
text-align: center; text-align: center;
line-height: 4vh;
border: 1px solid #4a6072;
color: #fff; color: #fff;
border-radius: 0px !important; font-weight: 500;
background: #323f43; background: linear-gradient(
margin-right: 0px; to right,
.el-checkbox__label { #284f49,
#2f6363,
#233b38
) !important;
& th {
background-color: transparent;
}
& tr {
background-color: transparent;
}
}
tr {
background: #233438;
}
}
/deep/.el-button.operation {
width: 40px;
height: 30px;
text-align: center;
background-color: rgb(35 52 56);
border: 0px;
color: #fff; color: #fff;
padding-left: 0px;
} }
}
.el-checkbox.is-checked { /deep/.el-button.operation:hover,
background: #495461; .el-button.operation:focus {
border-radius: 0px; width: 40px;
border: 1px solid; height: 30px;
background-color: rgb(35 52 56);
border: 0px;
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64); text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
.el-checkbox__inner {
display: none;
}
}
} }
</style> </style>

36
src/views/systemManagement/correlationEquipment2/components/searchBox.vue
Unescape View File

@ -106,11 +106,7 @@ export default {
getVideoList(this.only_params).then((res) => { getVideoList(this.only_params).then((res) => {
console.log("res_video", res); console.log("res_video", res);
this.check_push_table_data = res; this.check_push_table_data = res;
let data_params = { this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
data: this.check_push_table_data,
params: this.only_params,
};
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
}); });
}, },
// 智能设备按钮查全部 // 智能设备按钮查全部
@ -122,11 +118,7 @@ export default {
getVideoList(this.only_params).then((res) => { getVideoList(this.only_params).then((res) => {
console.log("res_video", res); console.log("res_video", res);
this.check_push_table_data = res; this.check_push_table_data = res;
let data_params = { this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
data: this.check_push_table_data,
params: this.only_params,
};
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
}); });
}, },
// 视频设备复选查询 // 视频设备复选查询
@ -142,11 +134,7 @@ export default {
getVideoList(this.only_params).then((res) => { getVideoList(this.only_params).then((res) => {
console.log("res_video", res); console.log("res_video", res);
this.check_push_table_data = res; this.check_push_table_data = res;
let data_params = { this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
data: this.check_push_table_data,
params: this.only_params,
};
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
}); });
} else { } else {
// 取消 // 取消
@ -161,11 +149,7 @@ export default {
getVideoList(this.only_params).then((res) => { getVideoList(this.only_params).then((res) => {
console.log("res_video", res); console.log("res_video", res);
this.check_push_table_data = res; this.check_push_table_data = res;
let data_params = { this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
data: this.check_push_table_data,
params: this.only_params,
};
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
}); });
} }
}, },
@ -181,11 +165,7 @@ export default {
this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化 this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
getPerceptionList(this.only_params).then((res) => { getPerceptionList(this.only_params).then((res) => {
this.check_push_table_data = res; this.check_push_table_data = res;
let data_params = { this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
data: this.check_push_table_data,
params: this.only_params,
};
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
}); });
} else { } else {
// 取消 // 取消
@ -199,11 +179,7 @@ export default {
this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化 this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
getPerceptionList(this.only_params).then((res) => { getPerceptionList(this.only_params).then((res) => {
this.check_push_table_data = res; this.check_push_table_data = res;
let data_params = { this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
data: this.check_push_table_data,
params: this.only_params,
};
this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
}); });
} }
}, },

18
src/views/systemManagement/correlationEquipment2/index.vue
Unescape View File

@ -96,11 +96,7 @@ export default {
console.log("resVideoList", res.rows); //res.rows res.total console.log("resVideoList", res.rows); //res.rows res.total
// 传给右下方表格数据 // 传给右下方表格数据
this.push_table_data = res; this.push_table_data = res;
let data_params = { this.push_data_to_table(this.push_table_data,this.only_params);
data: this.push_table_data,
params: this.only_params,
};
this.push_data_to_table(data_params);
}); });
}); });
}, },
@ -139,15 +135,11 @@ export default {
getVideoList(this.only_params).then((res) => { getVideoList(this.only_params).then((res) => {
console.log("resVideoList", res.rows); console.log("resVideoList", res.rows);
this.push_table_data = res; this.push_table_data = res;
let data_params = { this.push_data_to_table(this.push_table_data,this.only_params);
data: this.push_table_data,
params: this.only_params,
};
this.push_data_to_table(data_params);
}); });
}, },
push_data_to_table(data_params) { push_data_to_table(data,params) {
this.$refs.equipmentTable.obtain_table_data(data_params); this.$refs.equipmentTable.obtain_table_data(data,params);
}, },
}, },
}; };
@ -318,7 +310,7 @@ export default {
margin-top: 1vh; margin-top: 1vh;
width: 64vw; width: 64vw;
height: 52vh; height: 52vh;
// border: 0.1px solid #485f6c; border: 0.1px solid #485f6c;
} }
} }
} }

Write Preview
Loading…
Cancel
Save