|
|
|
|
@ -1,389 +1,260 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<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">
|
|
|
|
|
<!-- 设备表格 -->
|
|
|
|
|
<div class="equipment_data">
|
|
|
|
|
<p>{{ table_title }}</p>
|
|
|
|
|
<!-- 查询表 -->
|
|
|
|
|
<div v-if="display_search" class="equipment_data_search">
|
|
|
|
|
<el-form :inline="true" :model="search" class="search_data">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search.deviceName"
|
|
|
|
|
placeholder="输入设备名称搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
<el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search.gbsChannelNo"
|
|
|
|
|
placeholder="输入通道国际编码搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input v-model="search.channel_code" placeholder="输入通道国际编码搜索"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search.deviceIp"
|
|
|
|
|
placeholder="输入设备IP搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
<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-button @click="onSubmitVideo">搜索</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="video_reset">重置</el-button>
|
|
|
|
|
<el-button @click="resetVideo">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table_btn_list">
|
|
|
|
|
<el-button
|
|
|
|
|
v-for="item in btn_list"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
@click="open_video_dialog(item.value)"
|
|
|
|
|
>
|
|
|
|
|
<i :class="`el-icon-${item.icon}`" />
|
|
|
|
|
{{ item.label }}</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table_video">
|
|
|
|
|
<el-table
|
|
|
|
|
:cell-style="{ background: 'revert' }"
|
|
|
|
|
:header-cell-style="table_header"
|
|
|
|
|
:data="table_data"
|
|
|
|
|
:highlight-current-row="true"
|
|
|
|
|
@selection-change="handle_video_change"
|
|
|
|
|
height="336"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
v-for="item in table_column_video"
|
|
|
|
|
: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="open_video_dialog('5', scope.row)"
|
|
|
|
|
>编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="small"
|
|
|
|
|
class="operation"
|
|
|
|
|
@click="open_video_dialog('6', 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 v-else class="equipment_table_perception">
|
|
|
|
|
<div class="table_title">智能感知设备列表</div>
|
|
|
|
|
<div class="table_search">
|
|
|
|
|
<el-form :model="search" class="table_search_form">
|
|
|
|
|
<div v-else class="equipment_data_search">
|
|
|
|
|
<el-form :inline="true" :model="search" class="search_data">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search_p.deviceName"
|
|
|
|
|
placeholder="输入设备名称搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
<el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search_p.deviceIp"
|
|
|
|
|
placeholder="输入设备IP搜索"
|
|
|
|
|
></el-input>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input v-model="search.ip" placeholder="输入IP名称搜索"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="perception_search">搜索</el-button>
|
|
|
|
|
<el-button @click="onSubmit">搜索</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="perception_reset">重置</el-button>
|
|
|
|
|
<el-button @click="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"
|
|
|
|
|
@click="open_perception_dialog(item.value)"
|
|
|
|
|
>
|
|
|
|
|
<!-- 增删按钮 -->
|
|
|
|
|
<div class="equipment_data_btn">
|
|
|
|
|
<el-button v-for="item in btnList" :key="item.value" @click="openDialog(item.value)">
|
|
|
|
|
<i :class="`el-icon-${item.icon}`" />
|
|
|
|
|
{{ item.label }}</el-button
|
|
|
|
|
>
|
|
|
|
|
{{ 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"
|
|
|
|
|
@selection-change="handle_perception_change"
|
|
|
|
|
height="336"
|
|
|
|
|
>
|
|
|
|
|
<!-- 表格 -->
|
|
|
|
|
<div class="equipment_data_table">
|
|
|
|
|
<el-table :cell-style="{ background: 'revert' }" :header-cell-style="table_header" :data="pushTableData"
|
|
|
|
|
:highlight-current-row="true" height="250">
|
|
|
|
|
<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 v-for="item in tableColumn" :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="open_perception_dialog('5', scope.row)"
|
|
|
|
|
>编辑
|
|
|
|
|
<el-button size="small" class="operation" @click="openDialog('2', scope.row)">编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="small"
|
|
|
|
|
class="operation"
|
|
|
|
|
@click="open_perception_dialog('6', scope.row)"
|
|
|
|
|
>详情
|
|
|
|
|
<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="handleCurrentChangePerception"
|
|
|
|
|
:page-sizes="[5]"
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
:current-page="pageNum"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="total"
|
|
|
|
|
>
|
|
|
|
|
<div class="equipment_data_pagination">
|
|
|
|
|
<el-pagination :background="true" @current-change="handleCurrentChange" :page-sizes="[4]" :page-size="PageSize"
|
|
|
|
|
:current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pushTableData.length">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 视频设备表单弹窗 -->
|
|
|
|
|
<VideoForm ref="videoForm" @refresh_video="refresh_video"></VideoForm>
|
|
|
|
|
<!-- 删除视频设备表单弹窗 -->
|
|
|
|
|
<DeleteVideo ref="deleteVideo" @refresh_video="refresh_video"></DeleteVideo>
|
|
|
|
|
<!-- 导入视频设备弹窗 -->
|
|
|
|
|
<ImportVideo ref="importVideo"></ImportVideo>
|
|
|
|
|
<!-- 导出视频设备弹窗 -->
|
|
|
|
|
<ExportVideo ref="exportVideo"></ExportVideo>
|
|
|
|
|
<!-- 智能设备表单弹窗 -->
|
|
|
|
|
<PerceptionForm
|
|
|
|
|
ref="perceptionForm"
|
|
|
|
|
@refresh_perception="refresh_perception"
|
|
|
|
|
></PerceptionForm>
|
|
|
|
|
<!-- 删除智能设备表单弹窗 -->
|
|
|
|
|
<DeletePerception
|
|
|
|
|
ref="deletePerception"
|
|
|
|
|
@refresh_perception="refresh_perception"
|
|
|
|
|
></DeletePerception>
|
|
|
|
|
<!-- 导入智能设备弹窗 -->
|
|
|
|
|
<ImportPerception ref="importPerception"></ImportPerception>
|
|
|
|
|
<!-- 导出智能设备弹窗 -->
|
|
|
|
|
<ExportPerception ref="exportPerception"></ExportPerception>
|
|
|
|
|
<AddVideoDialog ref="addVideoDialog"></AddVideoDialog>
|
|
|
|
|
<AddPerceptionDialog ref="addPerceptionDialog"></AddPerceptionDialog>
|
|
|
|
|
<UploadDialog ref="uploadDialog"></UploadDialog>
|
|
|
|
|
<DeriveDialog ref="deriveDialog" :table_title="table_title"></DeriveDialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import AddVideoDialog from "./addVideoDialog";
|
|
|
|
|
import AddPerceptionDialog from "./addPerceptionDialog";
|
|
|
|
|
import UploadDialog from "./uploadDialog";
|
|
|
|
|
import DeriveDialog from "./deriveDialog";
|
|
|
|
|
import bus from "@/assets/js/eventBus.js";
|
|
|
|
|
import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
|
|
|
|
|
import VideoForm from "./videoForm";
|
|
|
|
|
import DeleteVideo from "./deleteVideo";
|
|
|
|
|
import ImportVideo from "./importVideo";
|
|
|
|
|
import ExportVideo from "./exportVideo";
|
|
|
|
|
import PerceptionForm from "./perceptionForm";
|
|
|
|
|
import DeletePerception from "./deletePerception";
|
|
|
|
|
import ImportPerception from "./importPerception";
|
|
|
|
|
import ExportPerception from "./exportPerception"
|
|
|
|
|
export default {
|
|
|
|
|
name:'EquipmentTable',
|
|
|
|
|
name: "EquipmentTable",
|
|
|
|
|
components: {
|
|
|
|
|
VideoForm,
|
|
|
|
|
DeleteVideo,
|
|
|
|
|
ImportVideo,
|
|
|
|
|
ExportVideo,
|
|
|
|
|
PerceptionForm,
|
|
|
|
|
DeletePerception,
|
|
|
|
|
ImportPerception,
|
|
|
|
|
ExportPerception,
|
|
|
|
|
AddPerceptionDialog,
|
|
|
|
|
AddVideoDialog,
|
|
|
|
|
UploadDialog,
|
|
|
|
|
DeriveDialog,
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
pushTableData: [],
|
|
|
|
|
only_params: {},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
table_flag: true,
|
|
|
|
|
// 视频查询
|
|
|
|
|
table_title: "视频监控设备列表", // 表格主题
|
|
|
|
|
display_search: true, // 判断展示对应查询项
|
|
|
|
|
search_params_table: {}, // 承接传过来的表格查询入参
|
|
|
|
|
search: {
|
|
|
|
|
deviceName: "",
|
|
|
|
|
gbsChannelNo: "",
|
|
|
|
|
deviceIp: "",
|
|
|
|
|
equipment: "",
|
|
|
|
|
ip: "",
|
|
|
|
|
channel_code: "",
|
|
|
|
|
equipemnt_ip: "",
|
|
|
|
|
},
|
|
|
|
|
// 智能查询
|
|
|
|
|
search_p: {
|
|
|
|
|
deviceName: "",
|
|
|
|
|
deviceIp: "",
|
|
|
|
|
},
|
|
|
|
|
btn_list: [
|
|
|
|
|
btnList: [
|
|
|
|
|
{ value: "1", label: "新增", icon: "plus" },
|
|
|
|
|
{ value: "2", label: "删除", icon: "delete" },
|
|
|
|
|
{ value: "3", label: "导入", icon: "bottom-right" },
|
|
|
|
|
{ value: "4", label: "导出", icon: "top-left" },
|
|
|
|
|
],
|
|
|
|
|
table_data: [],
|
|
|
|
|
table_column_video: [
|
|
|
|
|
tableColumn: [],
|
|
|
|
|
tableData: [],
|
|
|
|
|
// 视频表头
|
|
|
|
|
tableColumn_video: [
|
|
|
|
|
{ prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
|
|
|
|
|
{ prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
|
|
|
|
|
{ prop: "deviceName", label: "设备名称", width: "270" },
|
|
|
|
|
{ prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
|
|
|
|
|
{ prop: "deviceIp", label: "设备IP" },
|
|
|
|
|
// { prop: "deviceBrand", label: "设备品牌" },
|
|
|
|
|
// { prop: "longitude", label: "设备经度" },
|
|
|
|
|
// { prop: "latitude", label: "设备维度" },
|
|
|
|
|
],
|
|
|
|
|
table_column_perception: [
|
|
|
|
|
// 智能表头
|
|
|
|
|
tableColumn_preception: [
|
|
|
|
|
{ prop: "deviceName", label: "设备名称", width: "270" },
|
|
|
|
|
{ prop: "devicePerceptionSubTypeCn", label: "设备类型" },
|
|
|
|
|
{ prop: "deviceIp", label: "设备IP" },
|
|
|
|
|
// { prop: "longitude", label: "设备经度" },
|
|
|
|
|
// { prop: "latitude", label: "设备维度" },
|
|
|
|
|
{ prop: "orientationCn", label: "进出方向" },
|
|
|
|
|
],
|
|
|
|
|
handle_video: "", // 选中视频表格数据
|
|
|
|
|
handle_perception: "", // 选中智能表格数据
|
|
|
|
|
pageSize: 0,
|
|
|
|
|
pageNum: 0,
|
|
|
|
|
only_params: {},
|
|
|
|
|
total: 0,
|
|
|
|
|
table_params: {}, // 本页面查询入参
|
|
|
|
|
pageSize: 4,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
total: 0, // 信息总数
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.table_column = this.table_column_video;
|
|
|
|
|
this.tableColumn = this.tableColumn_video; // 初始加载为视频监控表
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
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);
|
|
|
|
|
},
|
|
|
|
|
// 刷新视频表格
|
|
|
|
|
refresh_video() {
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
this.total = res.total;
|
|
|
|
|
mounted() {
|
|
|
|
|
bus.$on("send", (data) => {
|
|
|
|
|
this.table_title = data.title;
|
|
|
|
|
if (this.table_title === "视频监控设备列表") {
|
|
|
|
|
this.display_search = true;
|
|
|
|
|
this.tableColumn = this.tableColumn_video;
|
|
|
|
|
} else if (this.table_title === "智能感知设备列表") {
|
|
|
|
|
this.display_search = false;
|
|
|
|
|
this.tableColumn = this.tableColumn_preception;
|
|
|
|
|
}
|
|
|
|
|
this.pushTableData = data.pushTableData;
|
|
|
|
|
this.only_params = data.search_params; // 如果点击了标签查询
|
|
|
|
|
console.log("this.pushTableData", this.pushTableData);
|
|
|
|
|
this.search_params_table = data.search_params;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
refresh_perception() {
|
|
|
|
|
methods: {
|
|
|
|
|
// 智能搜索
|
|
|
|
|
onSubmit() {
|
|
|
|
|
this.only_params = {
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
|
deviceIp: this.search.ip,
|
|
|
|
|
deviceName: this.search.equipment,
|
|
|
|
|
};
|
|
|
|
|
Object.assign(this.only_params, this.search_params_table);
|
|
|
|
|
getPerceptionList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
this.total = res.total;
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 视频设备查询
|
|
|
|
|
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;
|
|
|
|
|
// 智能搜索重置
|
|
|
|
|
reset() {
|
|
|
|
|
(this.search.equipment = ""), (this.search.ip = "");
|
|
|
|
|
this.only_params = {
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
|
deviceIp: this.search.ip,
|
|
|
|
|
deviceName: this.search.equipment,
|
|
|
|
|
};
|
|
|
|
|
Object.assign(this.only_params, this.search_params_table);
|
|
|
|
|
getPerceptionList(this.only_params).then((res) => {
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 视频设备重置
|
|
|
|
|
video_reset() {
|
|
|
|
|
// 查询项清空
|
|
|
|
|
this.search.gbsChannelNo = "";
|
|
|
|
|
this.search.deviceName = "";
|
|
|
|
|
this.search.deviceIp = "";
|
|
|
|
|
this.only_params = Object.assign(this.only_params, this.search);
|
|
|
|
|
// 视频搜索
|
|
|
|
|
onSubmitVideo() {
|
|
|
|
|
this.only_params = {
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
|
gbsChannelNo: this.search.channel_code,
|
|
|
|
|
deviceIp: this.search.equipemnt_ip,
|
|
|
|
|
deviceName: this.search.equipment,
|
|
|
|
|
};
|
|
|
|
|
Object.assign(this.only_params, this.search_params_table);
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
this.total = res.total;
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 智能查询
|
|
|
|
|
perception_search() {
|
|
|
|
|
this.only_params = Object.assign(this.only_params, this.search_p);
|
|
|
|
|
getPerceptionList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
this.total = res.total;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 智能重置
|
|
|
|
|
perception_reset() {
|
|
|
|
|
// 查询项清空
|
|
|
|
|
this.search_p.deviceIp = "";
|
|
|
|
|
this.search_p.deviceName = "";
|
|
|
|
|
this.only_params = Object.assign(this.only_params, this.search_p);
|
|
|
|
|
getPerceptionList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
this.total = res.total;
|
|
|
|
|
// 视频搜索重置
|
|
|
|
|
resetVideo() {
|
|
|
|
|
(this.search.channel_code = ""),
|
|
|
|
|
(this.search.equipemnt_ip = ""),
|
|
|
|
|
(this.search.equipment = "");
|
|
|
|
|
this.only_params = {
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
|
gbsChannelNo: this.search.channel_code,
|
|
|
|
|
deviceIp: this.search.equipemnt_ip,
|
|
|
|
|
deviceName: this.search.equipment,
|
|
|
|
|
};
|
|
|
|
|
Object.assign(this.only_params, this.search_params_table);
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
// res.row传给右下方表格数据
|
|
|
|
|
this.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 视频设备增删改导
|
|
|
|
|
open_video_dialog(num, row) {
|
|
|
|
|
openDialog(num, row) {
|
|
|
|
|
console.log(num, "num");
|
|
|
|
|
if (num === "1") {
|
|
|
|
|
// 新增视频设备
|
|
|
|
|
this.$refs.videoForm.open(num);
|
|
|
|
|
} else if (num === "2") {
|
|
|
|
|
// 删除视频设备
|
|
|
|
|
if (this.handle_video.length != 1) {
|
|
|
|
|
this.$message.warning("请选择一条表格数据");
|
|
|
|
|
} else {
|
|
|
|
|
this.$refs.deleteVideo.open(this.handle_video);
|
|
|
|
|
// 新增弹窗
|
|
|
|
|
console.log(num, "num");
|
|
|
|
|
if (this.table_title === "视频监控设备列表") {
|
|
|
|
|
this.$refs.addVideoDialog.open(num);
|
|
|
|
|
} else if (this.table_title === "智能感知设备列表") {
|
|
|
|
|
this.$refs.addPerceptionDialog.open(num);
|
|
|
|
|
}
|
|
|
|
|
} else if (num === "3") {
|
|
|
|
|
// 导入视频设备
|
|
|
|
|
this.$refs.importVideo.open();
|
|
|
|
|
} else if (num === "4") {
|
|
|
|
|
// 导出视频设备
|
|
|
|
|
this.$refs.exportVideo.open();
|
|
|
|
|
} else if (num === "5") {
|
|
|
|
|
// 修改视频设备
|
|
|
|
|
this.$refs.videoForm.open(num, row);
|
|
|
|
|
} else if (num === "6") {
|
|
|
|
|
// 详情视频设备
|
|
|
|
|
this.$refs.videoForm.open(num, row);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 智能感应增删改导
|
|
|
|
|
open_perception_dialog(num, row) {
|
|
|
|
|
if (num === "1") {
|
|
|
|
|
// 新增智能感知
|
|
|
|
|
this.$refs.perceptionForm.open(num);
|
|
|
|
|
} else if (num === "2") {
|
|
|
|
|
// 删除智能设备
|
|
|
|
|
if (this.handle_perception.length != 1) {
|
|
|
|
|
this.$message.warning("请选择一条表格数据");
|
|
|
|
|
} else {
|
|
|
|
|
this.$refs.deletePerception.open(this.handle_perception);
|
|
|
|
|
// 编辑弹窗
|
|
|
|
|
console.log("rowww", row);
|
|
|
|
|
if (this.table_title === "视频监控设备列表") {
|
|
|
|
|
this.$refs.addVideoDialog.open(num, row);
|
|
|
|
|
} else if (this.table_title === "智能感知设备列表") {
|
|
|
|
|
this.$refs.addPerceptionDialog.open(num, row);
|
|
|
|
|
}
|
|
|
|
|
} else if (num === "3") {
|
|
|
|
|
// 导入智能设备
|
|
|
|
|
this.$refs.importPerception.open();
|
|
|
|
|
// 导入弹窗
|
|
|
|
|
this.$refs.uploadDialog.open();
|
|
|
|
|
} else if (num === "4") {
|
|
|
|
|
// 导出智能设备
|
|
|
|
|
this.$refs.exportPerception.open();
|
|
|
|
|
// 导出弹窗
|
|
|
|
|
this.$refs.deriveDialog.open();
|
|
|
|
|
} else if (num === "5") {
|
|
|
|
|
// 修改智能设备
|
|
|
|
|
this.$refs.perceptionForm.open(num, row);
|
|
|
|
|
} else if (num === "6") {
|
|
|
|
|
// 详情视频设备
|
|
|
|
|
this.$refs.perceptionForm.open(num, row);
|
|
|
|
|
// 编辑弹窗
|
|
|
|
|
console.log("rowww", row);
|
|
|
|
|
if (this.table_title === "视频监控设备列表") {
|
|
|
|
|
this.$refs.addVideoDialog.open(num, row);
|
|
|
|
|
} else if (this.table_title === "智能感知设备列表") {
|
|
|
|
|
this.$refs.addPerceptionDialog.open(num, row);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 选择视频表格数据
|
|
|
|
|
handle_video_change(val) {
|
|
|
|
|
console.log("val_handle", val);
|
|
|
|
|
this.handle_video = val;
|
|
|
|
|
},
|
|
|
|
|
// 选择智能表格数据
|
|
|
|
|
handle_perception_change(val) {
|
|
|
|
|
this.handle_perception = val;
|
|
|
|
|
},
|
|
|
|
|
table_header({ row, rowIndex }) {
|
|
|
|
|
console.log(row);
|
|
|
|
|
@ -392,53 +263,42 @@ export default {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 视频表格分页
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
|
this.only_params.pageNum = val;
|
|
|
|
|
this.only_params.pageNum = val
|
|
|
|
|
console.log('this.only_params', this.only_params);
|
|
|
|
|
if (this.table_title === "视频监控设备列表") {
|
|
|
|
|
getVideoList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
this.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 智能表格分页
|
|
|
|
|
handleCurrentChangePerception(val) {
|
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
|
this.only_params.pageNum = val;
|
|
|
|
|
} else if (this.table_title === "智能感知设备列表") {
|
|
|
|
|
getPerceptionList(this.only_params).then((res) => {
|
|
|
|
|
this.table_data = res.rows;
|
|
|
|
|
this.pushTableData = res.rows;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.equipment_table_video,
|
|
|
|
|
.equipment_table_perception {
|
|
|
|
|
.table_title {
|
|
|
|
|
.equipment_data {
|
|
|
|
|
p {
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
}
|
|
|
|
|
.table_search {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
width: 64vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
.table_search_form {
|
|
|
|
|
display: flex;
|
|
|
|
|
.el-form-item {
|
|
|
|
|
margin-left: 0.5vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipment_data_search {
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
|
|
|
|
|
/deep/.el-input__inner {
|
|
|
|
|
border-radius: 0px 0px 0px 0px;
|
|
|
|
|
background: #3c4b4a;
|
|
|
|
|
color: #fff;
|
|
|
|
|
width: 10vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 4vw;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 1px solid #4a6072;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 0px !important;
|
|
|
|
|
@ -452,9 +312,10 @@ export default {
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.table_btn_list {
|
|
|
|
|
width: 64vw;
|
|
|
|
|
height: 5vh;
|
|
|
|
|
|
|
|
|
|
.equipment_data_btn {
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 90px;
|
|
|
|
|
height: 5vh;
|
|
|
|
|
@ -464,30 +325,39 @@ export default {
|
|
|
|
|
background: url("~@/assets/companyFile/btn1.png") no-repeat !important;
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.table_video {
|
|
|
|
|
width: 64vw;
|
|
|
|
|
height: 34vh;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
|
|
.equipment_data_table {
|
|
|
|
|
width: calc(100% - 30px);
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
height: 27vh;
|
|
|
|
|
|
|
|
|
|
.el-table,
|
|
|
|
|
.el-table__expanded-cell {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-table {
|
|
|
|
|
width: 98.2%;
|
|
|
|
|
.el-table__body-wrapper {
|
|
|
|
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
background: #233438;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
width: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 滚动条里面默认的小方块,自定义样式
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
|
background: #4cf993;
|
|
|
|
|
background: #4CF993;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -495,18 +365,17 @@ export default {
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
thead {
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
to right,
|
|
|
|
|
background: linear-gradient(to right,
|
|
|
|
|
#284f49,
|
|
|
|
|
#2f6363,
|
|
|
|
|
#233b38
|
|
|
|
|
) !important;
|
|
|
|
|
#233b38) !important;
|
|
|
|
|
|
|
|
|
|
& th {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
@ -521,29 +390,36 @@ export default {
|
|
|
|
|
background: #233438;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-table::before {
|
|
|
|
|
//去除底部白线
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-button.operation {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: rgb(35 52 56);
|
|
|
|
|
border: 0px;
|
|
|
|
|
color: #2fabdc;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-button.operation:hover,
|
|
|
|
|
.el-button.operation:focus {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: rgb(35 52 56 0);
|
|
|
|
|
background-color: rgb(35 52 56);
|
|
|
|
|
border: 0px;
|
|
|
|
|
color: #2fabdc;
|
|
|
|
|
color: #fff;
|
|
|
|
|
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;
|
|
|
|
|
@ -581,5 +457,4 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
lukeyan
2 years ago