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 cd8e7878d0
commit 6cee1f6532
3 changed files with 279 additions and 61 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,24 +1,24 @@
<template> <template>
<div> <div>
<div class="equipment_table_video"> <div v-if="table_flag" class="equipment_table_video">
<div class="table_title">视频监控设备列表</div> <div class="table_title">视频监控设备列表</div>
<div class="table_search"> <div class="table_search">
<el-form :model="search" class="table_search_form"> <el-form :model="search" class="table_search_form">
<el-form-item> <el-form-item>
<el-input <el-input
v-model="search.equipment" v-model="search.deviceName"
placeholder="输入设备名称搜索" placeholder="输入设备名称搜索"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input <el-input
v-model="search.channel_code" v-model="search.gbsChannelNo"
placeholder="输入通道国际编码搜索" placeholder="输入通道国际编码搜索"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input <el-input
v-model="search.equipment_ip" v-model="search.deviceIp"
placeholder="输入设备IP搜索" placeholder="输入设备IP搜索"
></el-input> ></el-input>
</el-form-item> </el-form-item>
@ -46,7 +46,7 @@
> >
<el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="selection" width="55"> </el-table-column>
<el-table-column <el-table-column
v-for="item in table_column" v-for="item in table_column_video"
:key="item.prop" :key="item.prop"
:prop="item.prop" :prop="item.prop"
:label="item.label" :label="item.label"
@ -70,17 +70,114 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="table_pagination">
<el-pagination
:background="true"
@current-change="handleCurrentChange"
:page-sizes="[5]"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
<div v-else class="equipment_table_perception">
<div class="table_title">智能感知设备列表</div>
<div class="table_search">
<el-form :model="search" class="table_search_form">
<el-form-item>
<el-input
v-model="perception_search.deviceName"
placeholder="输入设备名称搜索"
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="perception_search.deviceIp"
placeholder="输入设备IP搜索"
></el-input>
</el-form-item>
<el-form-item>
<el-button @click="perception_search">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="perception_reset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_btn_list">
<el-button v-for="item in btn_list" :key="item.value">
<i :class="`el-icon-${item.icon}`" />
{{ item.label }}</el-button
>
</div>
<div class="table_perception">
<el-table
:cell-style="{ background: 'revert' }"
:header-cell-style="table_header"
:data="table_data"
:highlight-current-row="true"
height="336"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
v-for="item in table_column_perception"
: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 class="table_pagination">
<el-pagination
:background="true"
@current-change="handleCurrentChange"
:page-sizes="[5]"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getVideoList } from "@/api/correlationEquipment";
export default { export default {
data() { data() {
return { return {
table_flag: true,
// 视频查询
search: { search: {
equipment: "", deviceName: "",
channel_code: "", gbsChannelNo: "",
equipment_ip: "", deviceIp: "",
},
// 智能查询
perception_search: {
deviceName: "",
deviceIp: "",
}, },
btn_list: [ btn_list: [
{ value: "1", label: "新增", icon: "plus" }, { value: "1", label: "新增", icon: "plus" },
@ -88,8 +185,7 @@ export default {
{ value: "3", label: "导入", icon: "bottom-right" }, { value: "3", label: "导入", icon: "bottom-right" },
{ value: "4", label: "导出", icon: "top-left" }, { value: "4", label: "导出", icon: "top-left" },
], ],
table_data:[], table_data: [],
table_column: [],
table_column_video: [ table_column_video: [
{ prop: "gbsChannelNo", label: "通道国际编码", width: "200" }, { prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
{ prop: "gbsNvrNo", label: "NVR设备编码", width: "200" }, { prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
@ -97,21 +193,52 @@ export default {
{ prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" }, { prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
{ prop: "deviceIp", label: "设备IP" }, { prop: "deviceIp", label: "设备IP" },
], ],
table_column_perception:[
{ prop: "deviceName", label: "设备名称", width: "270" },
{ prop: "devicePerceptionSubTypeCn", label: "设备类型" },
{ prop: "deviceIp", label: "设备IP" },
{ prop: "orientationCn", label: "进出方向" },
],
pageSize: 0,
pageNum: 0,
only_params: {},
total: 0,
}; };
}, },
created() { created() {
this.table_column = this.table_column_video; this.table_column = this.table_column_video;
}, },
methods: { methods: {
obtain_table_data(data,params) { obtain_table_data(data, params,flag) {
console.log('data_1',data); this.table_flag = flag
this.table_data = data.rows console.log("data_1", data);
console.log('params_1',params); this.table_data = data.rows;
this.total = data.total;
this.pageSize = params.pageSize;
this.pageNum = params.pageNum;
this.only_params = params;
console.log("params_1", params);
}, },
// 视频设备查询 // 视频设备查询
video_search() {}, video_search() {
this.only_params = Object.assign(this.only_params, this.search);
getVideoList(this.only_params).then((res) => {
this.table_data = res.rows;
this.total = res.total;
});
},
// 视频设备重置 // 视频设备重置
video_reset() {}, video_reset() {
// 查询项清空
this.search.gbsChannelNo = "";
this.search.deviceName = "";
this.search.deviceIp = "";
this.only_params = Object.assign(this.only_params, this.search);
getVideoList(this.only_params).then((res) => {
this.table_data = res.rows;
this.total = res.total;
});
},
table_header({ row, rowIndex }) { table_header({ row, rowIndex }) {
console.log(row); console.log(row);
console.log(rowIndex); console.log(rowIndex);
@ -119,11 +246,19 @@ export default {
color: "#fff", color: "#fff",
}; };
}, },
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.only_params.pageNum = val;
getVideoList(this.only_params).then((res) => {
this.table_data = res.rows;
});
},
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.equipment_table_video { .equipment_table_video,
.equipment_table_perception {
.table_title { .table_title {
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);
@ -230,22 +365,64 @@ export default {
} }
} }
/deep/.el-button.operation { /deep/.el-button.operation {
width: 40px; width: 40px;
height: 30px; height: 30px;
text-align: center; background-color: rgb(35 52 56);
background-color: rgb(35 52 56); border: 0px;
border: 0px; color: #2fabdc;
color: #fff; }
}
/deep/.el-button.operation:hover, /deep/.el-button.operation:hover,
.el-button.operation:focus { .el-button.operation:focus {
width: 40px; width: 40px;
height: 30px; height: 30px;
background-color: rgb(35 52 56); background-color: rgb(35 52 56 0);
border: 0px; border: 0px;
color: #fff; color: #2fabdc;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64); text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.table_pagination {
width: 64vw;
height: 5vh;
.el-pagination {
margin-left: 50%;
margin-top: 2vh;
/deep/.el-pagination__total {
color: #fff;
}
/deep/.el-input__inner {
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
/deep/.btn-prev {
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
/deep/ul {
li {
background: #3c4b4a;
color: #fff;
}
}
/deep/.btn-next {
border-radius: 0px;
background: #3c4b4a;
color: #fff;
}
/deep/ .el-pager {
li {
background: #3c4b4a !important;
}
}
} }
}
} }
</style> </style>

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

@ -86,6 +86,7 @@ export default {
perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"), perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
perception_text: "智能感知设备", perception_text: "智能感知设备",
check_push_table_data: {}, // 复选框查询的表格数据传递给表格 check_push_table_data: {}, // 复选框查询的表格数据传递给表格
flag: true,
}; };
}, },
methods: { methods: {
@ -101,55 +102,83 @@ export default {
video_all_check() { video_all_check() {
this.perception_checkgroup = []; //智能设备复选框清空 this.perception_checkgroup = []; //智能设备复选框清空
this.video_checkgroup = []; // 视频设备复选框清空 this.video_checkgroup = []; // 视频设备复选框清空
delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参 this.deviceVideoSubTypes = []
this.only_params.deviceVideoSubType = ""; // 按钮查视频设备的全部 this.devicePerceptionSubTypes = [];
delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
this.only_params.deviceVideoSubTypes = ""; // 按钮查视频设备的全部
this.flag = true;
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;
this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // 传给父亲，再转给兄弟Table
}); });
}, },
// 智能设备按钮查全部 // 智能设备按钮查全部
perception_all_check() { perception_all_check() {
this.perception_checkgroup = []; //智能设备复选框清空 this.perception_checkgroup = []; //智能设备复选框清空
this.video_checkgroup = []; // 视频设备复选框清空 this.video_checkgroup = []; // 视频设备复选框清空
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参 this.deviceVideoSubTypes = []
this.only_params.devicePerceptionSubType = ""; // 按钮查智能设备的全部 this.devicePerceptionSubTypes = [];
getVideoList(this.only_params).then((res) => { delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
this.only_params.devicePerceptionSubTypes = ""; // 按钮查智能设备的全部
this.flag = false;
getPerceptionList(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;
this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // 传给父亲，再转给兄弟Table
}); });
}, },
// 视频设备复选查询 // 视频设备复选查询
video_check_search(e, value) { video_check_search(e, value) {
if (e) { if (e) {
// 点击 // 点击
delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参 delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
this.perception_checkgroup = []; //智能设备复选框清空 this.perception_checkgroup = []; //智能设备复选框清空
this.devicePerceptionSubTypes = []; // 智能查询参数清空 this.devicePerceptionSubTypes = []; // 智能查询参数清空
this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参 this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
this.only_params.deviceVideoSubType = this.only_params.deviceVideoSubTypes =
this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化 this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
this.flag = true;
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;
this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // 传给父亲，再转给兄弟Table
}); });
} else { } else {
// 取消 // 取消
delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参 delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
this.perception_checkgroup = []; //智能设备复选框清空 this.perception_checkgroup = []; //智能设备复选框清空
this.devicePerceptionSubTypes = []; // 智能查询参数清空 this.devicePerceptionSubTypes = []; // 智能查询参数清空
this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter( this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
(item) => item != value (item) => item != value
); // 收集视频类型查询入参 ); // 收集视频类型查询入参
this.only_params.deviceVideoSubType = this.only_params.deviceVideoSubTypes =
this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化 this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
this.flag = true;
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;
this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // 传给父亲，再转给兄弟Table
}); });
} }
}, },
@ -157,29 +186,41 @@ export default {
perception_check_search(e, value) { perception_check_search(e, value) {
if (e) { if (e) {
// 点击 // 点击
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参 delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
this.video_checkgroup = []; // 视频设备复选框清空 this.video_checkgroup = []; // 视频设备复选框清空
this.deviceVideoSubTypes = []; // 视频设备复选框清空 this.deviceVideoSubTypes = []; // 视频设备复选框清空
this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参 this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
this.only_params.devicePerceptionSubType = this.only_params.devicePerceptionSubTypes =
this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化 this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
this.flag = false;
getPerceptionList(this.only_params).then((res) => { getPerceptionList(this.only_params).then((res) => {
this.check_push_table_data = res; this.check_push_table_data = res;
this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // 传给父亲，再转给兄弟Table
}); });
} else { } else {
// 取消 // 取消
delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参 delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
this.video_checkgroup = []; // 视频设备复选框清空 this.video_checkgroup = []; // 视频设备复选框清空
this.deviceVideoSubTypes = []; // 视频设备复选框清空 this.deviceVideoSubTypes = []; // 视频设备复选框清空
this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter( this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
(item) => item != value (item) => item != value
); // 收集智能类型查询入参 ); // 收集智能类型查询入参
this.only_params.devicePerceptionSubType = this.only_params.devicePerceptionSubTypes =
this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化 this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
this.flag = false;
getPerceptionList(this.only_params).then((res) => { getPerceptionList(this.only_params).then((res) => {
this.check_push_table_data = res; this.check_push_table_data = res;
this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // 传给父亲，再转给兄弟Table
}); });
} }
}, },

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

@ -96,7 +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;
this.push_data_to_table(this.push_table_data,this.only_params); this.push_data_to_table(this.push_table_data,this.only_params,true);
}); });
}); });
}, },
@ -135,11 +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;
this.push_data_to_table(this.push_table_data,this.only_params); this.push_data_to_table(this.push_table_data,this.only_params,true);
}); });
}, },
push_data_to_table(data,params) { push_data_to_table(data,params,flag) {
this.$refs.equipmentTable.obtain_table_data(data,params); this.$refs.equipmentTable.obtain_table_data(data,params,flag);
}, },
}, },
}; };
@ -305,12 +305,12 @@ export default {
.right { .right {
width: 64vw; width: 64vw;
height: 78vh; height: 78vh;
border: 0.1px solid #485f6c; // border: 0.1px solid #485f6c;
.right_table { .right_table {
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