|
|
|
|
@ -1,24 +1,24 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="equipment_table_video">
|
|
|
|
|
<div v-if="table_flag" class="equipment_table_video">
|
|
|
|
|
<div class="table_title">视频监控设备列表</div>
|
|
|
|
|
<div class="table_search">
|
|
|
|
|
<el-form :model="search" class="table_search_form">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search.equipment"
|
|
|
|
|
v-model="search.deviceName"
|
|
|
|
|
placeholder="输入设备名称搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search.channel_code"
|
|
|
|
|
v-model="search.gbsChannelNo"
|
|
|
|
|
placeholder="输入通道国际编码搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search.equipment_ip"
|
|
|
|
|
v-model="search.deviceIp"
|
|
|
|
|
placeholder="输入设备IP搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
@ -46,7 +46,7 @@
|
|
|
|
|
>
|
|
|
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
v-for="item in table_column"
|
|
|
|
|
v-for="item in table_column_video"
|
|
|
|
|
:key="item.prop"
|
|
|
|
|
:prop="item.prop"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
@ -70,17 +70,114 @@
|
|
|
|
|
</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 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>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { getVideoList } from "@/api/correlationEquipment";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
table_flag: true,
|
|
|
|
|
// 视频查询
|
|
|
|
|
search: {
|
|
|
|
|
equipment: "",
|
|
|
|
|
channel_code: "",
|
|
|
|
|
equipment_ip: "",
|
|
|
|
|
deviceName: "",
|
|
|
|
|
gbsChannelNo: "",
|
|
|
|
|
deviceIp: "",
|
|
|
|
|
},
|
|
|
|
|
// 智能查询
|
|
|
|
|
perception_search: {
|
|
|
|
|
deviceName: "",
|
|
|
|
|
deviceIp: "",
|
|
|
|
|
},
|
|
|
|
|
btn_list: [
|
|
|
|
|
{ value: "1", label: "新增", icon: "plus" },
|
|
|
|
|
@ -88,8 +185,7 @@ export default {
|
|
|
|
|
{ value: "3", label: "导入", icon: "bottom-right" },
|
|
|
|
|
{ value: "4", label: "导出", icon: "top-left" },
|
|
|
|
|
],
|
|
|
|
|
table_data:[],
|
|
|
|
|
table_column: [],
|
|
|
|
|
table_data: [],
|
|
|
|
|
table_column_video: [
|
|
|
|
|
{ prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
|
|
|
|
|
{ prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
|
|
|
|
|
@ -97,21 +193,52 @@ export default {
|
|
|
|
|
{ prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
|
|
|
|
|
{ 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() {
|
|
|
|
|
this.table_column = this.table_column_video;
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
obtain_table_data(data,params) {
|
|
|
|
|
console.log('data_1',data);
|
|
|
|
|
this.table_data = data.rows
|
|
|
|
|
console.log('params_1',params);
|
|
|
|
|
obtain_table_data(data, params,flag) {
|
|
|
|
|
this.table_flag = flag
|
|
|
|
|
console.log("data_1", data);
|
|
|
|
|
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 }) {
|
|
|
|
|
console.log(row);
|
|
|
|
|
console.log(rowIndex);
|
|
|
|
|
@ -119,11 +246,19 @@ export default {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
|
this.only_params.pageNum = val;
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.equipment_table_video {
|
|
|
|
|
.equipment_table_video,
|
|
|
|
|
.equipment_table_perception {
|
|
|
|
|
.table_title {
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
@ -230,22 +365,64 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-button.operation {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: rgb(35 52 56);
|
|
|
|
|
border: 0px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: rgb(35 52 56);
|
|
|
|
|
border: 0px;
|
|
|
|
|
color: #2fabdc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-button.operation:hover,
|
|
|
|
|
.el-button.operation:focus {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: rgb(35 52 56);
|
|
|
|
|
border: 0px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
/deep/.el-button.operation:hover,
|
|
|
|
|
.el-button.operation:focus {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: rgb(35 52 56 0);
|
|
|
|
|
border: 0px;
|
|
|
|
|
color: #2fabdc;
|
|
|
|
|
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>
|
lukeyan
1 year ago