更换文件夹

pull/58/head
lukeyan 2 years ago
parent a6e5e1756e
commit e9b4615a36

@ -1,261 +1,390 @@
<template> <template>
<!-- 设备表格 --> <div>
<div class="equipment_data"> <div v-if="table_flag" class="equipment_table_video">
<p>{{ table_title }}</p> <div class="table_title">视频监控设备列表</div>
<!-- 查询表 --> <div class="table_search">
<div v-if="display_search" class="equipment_data_search"> <el-form :model="search" class="table_search_form">
<el-form :inline="true" :model="search" class="search_data">
<el-form-item>
<el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
</el-form-item>
<el-form-item>
<el-form-item> <el-form-item>
<el-input v-model="search.channel_code" placeholder="输入通道国际编码搜索"></el-input> <el-input
v-model="search.deviceName"
placeholder="输入设备名称搜索"
></el-input>
</el-form-item> </el-form-item>
</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="onSubmitVideo"></el-button>
</el-form-item>
<el-form-item>
<el-button @click="resetVideo"></el-button>
</el-form-item>
</el-form>
</div>
<div v-else class="equipment_data_search">
<el-form :inline="true" :model="search" class="search_data">
<el-form-item>
<el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
</el-form-item>
<el-form-item>
<el-form-item> <el-form-item>
<el-input v-model="search.ip" placeholder="输入IP名称搜索"></el-input> <el-input
v-model="search.gbsChannelNo"
placeholder="输入通道国际编码搜索"
></el-input>
</el-form-item> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-input
<el-button @click="onSubmit"></el-button> v-model="search.deviceIp"
</el-form-item> placeholder="输入设备IP搜索"
<el-form-item> ></el-input>
<el-button @click="reset"></el-button> </el-form-item>
</el-form-item> <el-form-item>
</el-form> <el-button @click="video_search"></el-button>
</div> </el-form-item>
<!-- 增删按钮 --> <el-form-item>
<div class="equipment_data_btn"> <el-button @click="video_reset"></el-button>
<el-button v-for="item in btnList" :key="item.value" @click="openDialog(item.value)"> </el-form-item>
<i :class="`el-icon-${item.icon}`" /> </el-form>
{{ item.label }}</el-button> </div>
</div> <div class="table_btn_list">
<!-- 表格 --> <el-button
<div class="equipment_data_table"> v-for="item in btn_list"
<el-table :cell-style="{ background: 'revert' }" :header-cell-style="table_header" :data="pushTableData" :key="item.value"
:highlight-current-row="true" height="250"> @click="open_video_dialog(item.value)"
<el-table-column type="selection" width="55"> </el-table-column> >
<el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label" <i :class="`el-icon-${item.icon}`" />
:width="item.width"></el-table-column> {{ item.label }}</el-button
<el-table-column prop="operation" label="操作"> >
<template slot-scope="scope"> </div>
<el-button size="small" class="operation" @click="openDialog('2', scope.row)">编辑 <div class="table_video">
</el-button> <el-table
<el-button size="small" class="operation" @click="openDialog('5', scope.row)">详情 :cell-style="{ background: 'revert' }"
</el-button> :header-cell-style="table_header"
</template> :data="table_data"
</el-table-column> :highlight-current-row="true"
</el-table> @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>
<div class="equipment_data_pagination"> <div v-else class="equipment_table_perception">
<el-pagination :background="true" @current-change="handleCurrentChange" :page-sizes="[4]" :page-size="PageSize" <div class="table_title">智能感知设备列表</div>
:current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pushTableData.length"> <div class="table_search">
</el-pagination> <el-form :model="search" class="table_search_form">
<el-form-item>
<el-input
v-model="search_p.deviceName"
placeholder="输入设备名称搜索"
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="search_p.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"
@click="open_perception_dialog(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"
@selection-change="handle_perception_change"
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="open_perception_dialog('5', scope.row)"
>编辑
</el-button>
<el-button
size="small"
class="operation"
@click="open_perception_dialog('6', 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"
>
</el-pagination>
</div>
</div> </div>
<AddVideoDialog ref="addVideoDialog"></AddVideoDialog> <!-- 视频设备表单弹窗 -->
<AddPerceptionDialog ref="addPerceptionDialog"></AddPerceptionDialog> <VideoForm ref="videoForm" @refresh_video="refresh_video"></VideoForm>
<UploadDialog ref="uploadDialog"></UploadDialog> <!-- 删除视频设备表单弹窗 -->
<DeriveDialog ref="deriveDialog" :table_title="table_title"></DeriveDialog> <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>
</div> </div>
</template> </template>
<script> <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 { 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 { export default {
name: "EquipmentTable", name:'EquipmentTable',
components: { components: {
AddPerceptionDialog, VideoForm,
AddVideoDialog, DeleteVideo,
UploadDialog, ImportVideo,
DeriveDialog, ExportVideo,
}, PerceptionForm,
props: { DeletePerception,
pushTableData: [], ImportPerception,
only_params: {}, ExportPerception,
}, },
data() { data() {
return { return {
table_title: "视频监控设备列表", // table_flag: true,
display_search: true, // //
search_params_table: {}, //
search: { search: {
equipment: "", deviceName: "",
ip: "", gbsChannelNo: "",
channel_code: "", deviceIp: "",
equipemnt_ip: "", },
//
search_p: {
deviceName: "",
deviceIp: "",
}, },
btnList: [ btn_list: [
{ value: "1", label: "新增", icon: "plus" }, { value: "1", label: "新增", icon: "plus" },
{ value: "2", label: "删除", icon: "delete" }, { value: "2", label: "删除", icon: "delete" },
{ value: "3", label: "导入", icon: "bottom-right" }, { value: "3", label: "导入", icon: "bottom-right" },
{ value: "4", label: "导出", icon: "top-left" }, { value: "4", label: "导出", icon: "top-left" },
], ],
tableColumn: [], table_data: [],
tableData: [], table_column_video: [
//
tableColumn_video: [
{ prop: "gbsChannelNo", label: "通道国际编码", width: "200" }, { prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
{ prop: "gbsNvrNo", label: "NVR设备编码", width: "200" }, { prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
{ prop: "deviceName", label: "设备名称", width: "270" }, { prop: "deviceName", label: "设备名称", width: "270" },
{ prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" }, { prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
{ prop: "deviceIp", label: "设备IP" }, { prop: "deviceIp", label: "设备IP" },
// { prop: "deviceBrand", label: "" },
// { prop: "longitude", label: "" },
// { prop: "latitude", label: "" },
], ],
// table_column_perception: [
tableColumn_preception: [
{ prop: "deviceName", label: "设备名称", width: "270" }, { prop: "deviceName", label: "设备名称", width: "270" },
{ prop: "devicePerceptionSubTypeCn", label: "设备类型" }, { prop: "devicePerceptionSubTypeCn", label: "设备类型" },
{ prop: "deviceIp", label: "设备IP" }, { prop: "deviceIp", label: "设备IP" },
// { prop: "longitude", label: "" },
// { prop: "latitude", label: "" },
{ prop: "orientationCn", label: "进出方向" }, { prop: "orientationCn", label: "进出方向" },
], ],
table_params: {}, // handle_video: "", //
pageSize: 4, handle_perception: "", //
pageNum: 1, pageSize: 0,
total: 0, // pageNum: 0,
only_params: {},
total: 0,
}; };
}, },
created() { created() {
this.tableColumn = this.tableColumn_video; // this.table_column = this.table_column_video;
},
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;
});
}, },
methods: { methods: {
// obtain_table_data(data, params, flag) {
onSubmit() { this.table_flag = flag;
this.only_params = { console.log("data_1", data);
pageSize: this.pageSize, this.table_data = data.rows;
pageNum: this.pageNum, this.total = data.total;
deviceIp: this.search.ip, this.pageSize = params.pageSize;
deviceName: this.search.equipment, this.pageNum = params.pageNum;
}; this.only_params = params;
Object.assign(this.only_params, this.search_params_table); console.log("params_1", params);
getPerceptionList(this.only_params).then((res) => { },
// res.row //
this.pushTableData = res.rows; refresh_video() {
getVideoList(this.only_params).then((res) => {
this.table_data = res.rows;
this.total = res.total;
}); });
}, },
// refresh_perception() {
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) => { getPerceptionList(this.only_params).then((res) => {
// res.row this.table_data = res.rows;
this.pushTableData = res.rows; this.total = res.total;
}); });
}, },
// //
onSubmitVideo() { video_search() {
this.only_params = { this.only_params = Object.assign(this.only_params, this.search);
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) => { getVideoList(this.only_params).then((res) => {
// res.row this.table_data = res.rows;
this.pushTableData = res.rows; this.total = res.total;
}); });
}, },
// //
resetVideo() { video_reset() {
(this.search.channel_code = ""), //
(this.search.equipemnt_ip = ""), this.search.gbsChannelNo = "";
(this.search.equipment = ""); this.search.deviceName = "";
this.only_params = { this.search.deviceIp = "";
pageSize: this.pageSize, this.only_params = Object.assign(this.only_params, this.search);
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) => { getVideoList(this.only_params).then((res) => {
// res.row this.table_data = res.rows;
this.pushTableData = res.rows; this.total = res.total;
});
},
//
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;
}); });
}, },
openDialog(num, row) { //
console.log(num, "num"); open_video_dialog(num, row) {
if (num === "1") { if (num === "1") {
// //
console.log(num, "num"); this.$refs.videoForm.open(num);
if (this.table_title === "视频监控设备列表") {
this.$refs.addVideoDialog.open(num);
} else if (this.table_title === "智能感知设备列表") {
this.$refs.addPerceptionDialog.open(num);
}
} else if (num === "2") { } else if (num === "2") {
// //
console.log("rowww", row); if (this.handle_video.length != 1) {
if (this.table_title === "视频监控设备列表") { this.$message.warning("请选择一条表格数据");
this.$refs.addVideoDialog.open(num, row); } else {
} else if (this.table_title === "智能感知设备列表") { this.$refs.deleteVideo.open(this.handle_video);
this.$refs.addPerceptionDialog.open(num, row);
} }
} else if (num === "3") { } else if (num === "3") {
// //
this.$refs.uploadDialog.open(); this.$refs.importVideo.open();
} else if (num === "4") { } else if (num === "4") {
// //
this.$refs.deriveDialog.open(); this.$refs.exportVideo.open();
} else if (num === "5") { } else if (num === "5") {
// //
console.log("rowww", row); this.$refs.videoForm.open(num, row);
if (this.table_title === "视频监控设备列表") { } else if (num === "6") {
this.$refs.addVideoDialog.open(num, row); //
} else if (this.table_title === "智能感知设备列表") { this.$refs.videoForm.open(num, row);
this.$refs.addPerceptionDialog.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);
} }
} else if (num === "3") {
//
this.$refs.importPerception.open();
} else if (num === "4") {
//
this.$refs.exportPerception.open();
} else if (num === "5") {
//
this.$refs.perceptionForm.open(num, row);
} else if (num === "6") {
//
this.$refs.perceptionForm.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 }) { table_header({ row, rowIndex }) {
console.log(row); console.log(row);
console.log(rowIndex); console.log(rowIndex);
@ -263,42 +392,53 @@ export default {
color: "#fff", color: "#fff",
}; };
}, },
//
handleCurrentChange(val) { handleCurrentChange(val) {
console.log(`当前页: ${val}`); console.log(`当前页: ${val}`);
this.only_params.pageNum = val this.only_params.pageNum = val;
console.log('this.only_params', this.only_params); getVideoList(this.only_params).then((res) => {
if (this.table_title === "视频监控设备列表") { this.table_data = res.rows;
getVideoList(this.only_params).then((res) => { });
this.pushTableData = res.rows; },
}); //
} else if (this.table_title === "智能感知设备列表") { handleCurrentChangePerception(val) {
getPerceptionList(this.only_params).then((res) => { console.log(`当前页: ${val}`);
this.pushTableData = res.rows; this.only_params.pageNum = val;
}); getPerceptionList(this.only_params).then((res) => {
} this.table_data = res.rows;
});
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.equipment_data { .equipment_table_video,
p { .equipment_table_perception {
.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);
margin-left: 10px; margin-left: 10px;
font-size: 17px;
} }
.table_search {
.equipment_data_search { margin-top: 1vh;
margin-left: 12px; width: 64vw;
height: 4vh;
.table_search_form {
display: flex;
.el-form-item {
margin-left: 0.5vw;
}
}
/deep/.el-input__inner { /deep/.el-input__inner {
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
width: 10vw;
} }
.el-button { .el-button {
width: 100%; width: 4vw;
border: 1px solid #4a6072; border: 1px solid #4a6072;
color: #fff; color: #fff;
border-radius: 0px !important; border-radius: 0px !important;
@ -312,10 +452,9 @@ export default {
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
} }
.table_btn_list {
.equipment_data_btn { width: 64vw;
margin-left: 12px; height: 5vh;
.el-button { .el-button {
width: 90px; width: 90px;
height: 5vh; height: 5vh;
@ -325,134 +464,120 @@ export default {
background: url("~@/assets/companyFile/btn1.png") no-repeat !important; background: url("~@/assets/companyFile/btn1.png") no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
.el-button:focus, .el-button:focus,
.el-button:hover { .el-button:hover {
filter: brightness(200%); filter: brightness(200%);
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64); text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
} }
.table_video {
.equipment_data_table { width: 64vw;
width: calc(100% - 30px); height: 34vh;
margin-top: 12px; margin-left: 10px;
margin-left: 12px; }
height: 27vh; /deep/.el-table {
width: 98.2%;
.el-table, .el-table__body-wrapper {
.el-table__expanded-cell { overflow: auto;
background: #233438;
color: #fff; color: #fff;
background-color: transparent; &::-webkit-scrollbar {
width: 3px;
} }
/deep/.el-table {
.el-table__body-wrapper {
overflow: auto;
&::-webkit-scrollbar {
width: 3px;
}
// ,
&::-webkit-scrollbar-thumb {
background: #4CF993;
border-radius: 2px;
}
//
&::-webkit-scrollbar-track {
background: transparent;
}
// ,
&::-webkit-scrollbar-thumb {
background: #4cf993;
border-radius: 2px;
} }
thead { //
text-align: center; &::-webkit-scrollbar-track {
color: #fff; background: transparent;
font-weight: 500; }
background: linear-gradient(to right, }
#284f49,
#2f6363,
#233b38) !important;
& th { thead {
background-color: transparent; text-align: center;
} color: #fff;
font-weight: 500;
background: linear-gradient(
to right,
#284f49,
#2f6363,
#233b38
) !important;
& tr { & th {
background-color: transparent; background-color: transparent;
}
} }
tr { & tr {
background: #233438; background-color: transparent;
} }
} }
.el-table::before { tr {
//线 background: #233438;
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: #fff;
} }
}
/deep/.el-button.operation {
width: 40px;
height: 30px;
background-color: rgb(35 52 56);
border: 0px;
color: #2fabdc;
}
/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;
.el-pagination { /deep/.el-pagination__total {
margin-left: 50%; color: #fff;
}
/deep/.el-pagination__total { /deep/.el-input__inner {
color: #fff; border-radius: 0px;
} background: #3c4b4a;
color: #fff;
}
/deep/.el-input__inner { /deep/.btn-prev {
border-radius: 0px; border-radius: 0px;
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
} }
/deep/.btn-prev { /deep/ul {
border-radius: 0px; li {
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
} }
}
/deep/ul { /deep/.btn-next {
li { border-radius: 0px;
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
} }
}
/deep/.btn-next { /deep/ .el-pager {
border-radius: 0px; li {
background: #3c4b4a; background: #3c4b4a !important;
color: #fff; }
}
/deep/ .el-pager {
li {
background: #3c4b4a !important;
} }
} }
} }

@ -1,252 +1,332 @@
<template> <template>
<!-- 关联设备的右侧查询盒子 --> <!-- 视频设备智能设备查询 -->
<div class="searchBox_body"> <div class="search_box">
<div class="searchBox_img"> <div class="box_title">设备列表</div>
<el-button <div class="search_check">
class="searchBox_img_top" <!-- 视频设备查询条件 -->
@click="change_types(searchBoxData.typesAll)" <div class="video_check">
> <div class="video_btn">
<img :src="searchBoxData.src" alt="" /> <el-button class="video_button" @click="video_all_check">
</el-button> <img :src="video_btn_img_src" alt="" />
<span>{{ searchBoxData.img_text }}</span> </el-button>
<div class="video_text">{{ video_text }}</div>
</div>
<el-checkbox-group v-model="video_checkgroup">
<el-checkbox
class="video_checks"
v-for="item in video_btn_list"
: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>
<el-checkbox-group v-model="perception_checkgroup">
<el-checkbox
class="perception_checks"
v-for="item in perception_btn_list"
:key="item.value"
:label="item.name"
@change="perception_check_search($event, item.value)"
>
{{ item.name }}</el-checkbox
>
</el-checkbox-group>
</div>
</div> </div>
<el-checkbox-group v-model="searchBoxData.company_types">
<el-checkbox
class="searchBox_btn"
v-for="item in searchBoxData.btnList"
:key="item.value"
@change="sendClearList($event, item.type, item.value)"
:label="item.name"
name="type"
>
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</div> </div>
</template> </template>
<script> <script>
import bus from "@/assets/js/eventBus.js";
import { getVideoList, getPerceptionList } from "@/api/correlationEquipment"; import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
export default { export default {
name: "searchBox", name: "SearchBox",
props: { props: {
searchBoxData: {}, only_params: {}, //
}, },
data() { data() {
return { return {
pushValue: { video_checkgroup: [], //
title: "", deviceVideoSubTypes: [], //
pushTableData: [], video_btn_list: [
search_params:{}, // { value: 1, name: "公共区域", type: "1" },
}, { value: 2, name: "地下车库", type: "1" },
types_params_list: [], // id { value: 3, name: "全景监控", type: "1" },
per_types_params_list: [], // id { value: 5, name: "人脸抓拍", type: "1" },
back_types:'', // { value: 6, name: "电梯监控", type: "1" },
{ value: 7, name: "人体测温", type: "1" },
{ value: 8, name: "车辆抓拍", type: "1" },
{ value: 9, name: "人脸门禁", type: "1" },
{ value: 4, name: "高空抛物", type: "1" },
],
video_btn_img_src: require("@/assets/companyFile/camera03.png"),
video_text: "视频监控设备",
perception_checkgroup: [], //
devicePerceptionSubTypes: [], //
perception_btn_list: [
{ value: 2, name: "车辆抓拍", type: "2" },
{ value: 1, name: "人脸抓拍", type: "2" },
{ value: 3, name: "门禁设备", type: "2" },
{ 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: {}, //
flag: true,
}; };
}, },
created() {},
methods: { methods: {
async sendClearList(e, item, value) { clear_search_list() {
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 = []; //
this.deviceVideoSubTypes = []
this.devicePerceptionSubTypes = [];
delete this.only_params.devicePerceptionSubTypes; //
this.only_params.deviceVideoSubTypes = ""; //
this.flag = true;
getVideoList(this.only_params).then((res) => {
console.log("res_video", res);
this.check_push_table_data = res;
this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // Table
});
},
//
perception_all_check() {
this.perception_checkgroup = []; //
this.video_checkgroup = []; //
this.deviceVideoSubTypes = []
this.devicePerceptionSubTypes = [];
delete this.only_params.deviceVideoSubTypes; //
this.only_params.devicePerceptionSubTypes = ""; //
this.flag = false;
getPerceptionList(this.only_params).then((res) => {
console.log("res_video", res);
this.check_push_table_data = res;
this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // Table
});
},
//
video_check_search(e, value) {
if (e) { if (e) {
// //
// delete this.only_params.devicePerceptionSubTypes; //
this.$emit("clearList"); // this.perception_checkgroup = []; //
// this.devicePerceptionSubTypes = []; //
console.log("item123", item); this.deviceVideoSubTypes.push(value); //
if (item === "1") { this.only_params.deviceVideoSubTypes =
this.back_types = item this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); //
this.$emit('backTypes', this.back_types) // this.flag = true;
this.types_params_list.push(value); getVideoList(this.only_params).then((res) => {
this.pushValue.title = "视频监控设备列表"; console.log("res_video", res);
// this.check_push_table_data = res;
this.pushValue.search_params = { this.$emit(
pageSize: 4, "push_data_to_table",
pageNum: 1, this.check_push_table_data,
deviceVideoSubTypes: "", this.only_params,
}; this.flag
this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString(); ); // Table
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.back_types = item
this.$emit('backTypes', this.back_types) //
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 { } else {
// //
console.log("e1111", e); delete this.only_params.devicePerceptionSubTypes; //
this.$emit("clearList"); // this.perception_checkgroup = []; //
// this.devicePerceptionSubTypes = []; //
console.log("item123", item); this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
if (item === "1") { (item) => item != value
this.back_types = item ); //
this.$emit('backTypes', this.back_types) // this.only_params.deviceVideoSubTypes =
console.log("this.types_params_list2", this.types_params_list); this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); //
console.log("value", value); this.flag = true;
this.types_params_list = this.types_params_list.filter( getVideoList(this.only_params).then((res) => {
(val) => val != value console.log("res_video", res);
); // this.check_push_table_data = res;
console.log("this.types_params_list3", this.types_params_list); this.$emit(
this.pushValue.title = "视频监控设备列表"; "push_data_to_table",
// this.check_push_table_data,
this.pushValue.search_params = { this.only_params,
pageSize: 4, this.flag
pageNum: 1, ); // Table
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.back_types = item
this.$emit('backTypes', this.back_types) //
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) { //
// perception_check_search(e, value) {
this.$emit("clearList"); // if (e) {
this.types_params_list = []; // //
this.per_types_params_list = []; delete this.only_params.deviceVideoSubTypes; //
this.searchBoxData.company_types = []; this.video_checkgroup = []; //
if (num === "1") { this.deviceVideoSubTypes = []; //
// this.devicePerceptionSubTypes.push(value); //
this.back_types = num this.only_params.devicePerceptionSubTypes =
this.$emit('backTypes', this.back_types) // this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); //
this.pushValue.title = "视频监控设备列表"; this.flag = false;
this.pushValue.search_params = { getPerceptionList(this.only_params).then((res) => {
pageSize: 4, this.check_push_table_data = res;
pageNum: 1, this.$emit(
// deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9", "push_data_to_table",
}; this.check_push_table_data,
await getVideoList(this.pushValue.search_params).then((res) => { this.only_params,
console.log("resVideoList1", res.rows); this.flag
// res.row ); // Table
this.pushValue.pushTableData = res.rows;
}); });
} else if (num === "2") { } else {
console.log("num123", num); //
this.back_types = num delete this.only_params.deviceVideoSubTypes; //
this.$emit('backTypes', this.back_types) // this.video_checkgroup = []; //
// this.deviceVideoSubTypes = []; //
this.pushValue.title = "智能感知设备列表"; this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
this.pushValue.search_params = { (item) => item != value
pageSize: 4, ); //
pageNum: 1, this.only_params.devicePerceptionSubTypes =
// devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11", this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); //
}; this.flag = false;
await getPerceptionList(this.pushValue.search_params).then((res) => { getPerceptionList(this.only_params).then((res) => {
// res.row this.check_push_table_data = res;
this.pushValue.pushTableData = res.rows; this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // Table
}); });
} }
bus.$emit("send", this.pushValue);
// 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; //
// }
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.searchBox_body { .search_box {
width: 100%; margin: 0 auto;
height: 100%; margin-top: 1vh;
display: flex; width: 63vw;
.searchBox_img { height: 24vh;
display: flex; // border: 0.1px solid #485f6c;
justify-content: center; .box_title {
flex-direction: column; width: 63vw;
width: 22%; height: 2vh;
height: 100%;
color: #fff; color: #fff;
text-align: center; text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
font-size: 15px; }
.searchBox_img_top { .search_check {
background: url("~@/assets/companyFile/btn08.png") no-repeat !important; margin-top: 1vh;
background-size: 100% 100% !important; width: 63vw;
width: 5vw; height: 20vh;
height: 10vh; // border: 0.1px solid #485f6c;
margin: 0px auto; display: flex;
justify-content: space-between;
//
.video_check {
width: 31vw;
height: 20vh;
border: 0.1px solid #485f6c;
display: flex; display: flex;
justify-content: center; color: #fff;
align-items: center; text-align: center;
border: 0px; //
img { .video_btn {
width: 1.8vw; width: 7vw;
height: 3.6vh; 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;
justify-content: center;
align-items: center;
border: 0px;
img {
width: 1.8vw;
height: 3.6vh;
}
}
.video_button:focus,
.video_button:hover {
filter: brightness(170%);
}
} }
} }
.searchBox_img_top:focus, //
.searchBox_img_top:hover { .perception_check {
filter: brightness(170%); width: 31vw;
} height: 20vh;
span { border: 0.1px solid #485f6c;
margin-top: 7%; display: flex;
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;
img {
width: 1.8vw;
height: 3.6vh;
}
}
.perception_button:focus,
.perception_button:hover {
filter: brightness(170%);
}
}
} }
} }
/deep/.el-checkbox-group { /deep/.el-checkbox-group {
width: 70%; width: 24vw;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-flow: wrap; flex-flow: wrap;
padding: 15px 0px 0px 10px; padding: 20px 5px 0px 5px;
.el-checkbox { .el-checkbox {
width: 30%; width: 30%;
height: 4vh; height: 4vh;
@ -271,24 +351,6 @@ export default {
.el-checkbox__inner { .el-checkbox__inner {
display: none; display: none;
} }
// .searchBox_btn {
// list-style: none;
// width: 30%;
// .el-button {
// width: 100%;
// border: 1px solid #4a6072;
// color: #fff;
// border-radius: 0px !important;
// background: #323f43;
// }
// .el-button:focus,
// .el-button:hover {
// color: #34e1b3;
// text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
// background: url("~@/assets/companyFile/891771.png") no-repeat !important;
// background-size: 100% 100% !important;
// }
// }
} }
} }
</style> </style>

@ -1,244 +1,157 @@
<template> <template>
<!-- 关联设备 --> <!-- 关联设备 -->
<div> <el-card class="box-card">
<div class="main"> <div class="topZS"></div>
<!-- 卡片标题 --> <div class="bottomZS"></div>
<el-card class="box-card"> <div slot="header" class="clearfix">
<div class="topZS"></div> <span>关联设备</span>
<div class="bottomZS"></div> </div>
<div slot="header" class="clearfix"> <div class="cardBody">
<span>关联设备</span> <div class="left_tree">
</div> <div class="left_search">
<!-- 内容 --> <el-input
<div class="cardBody"> class="left_search_input"
<!-- 左侧 --> placeholder="输入企业名称搜索"
<div class="cardBodyLeft"> v-model="search_company"
<!-- 左侧搜索框 --> >
<div class="cardBodyLeft_search"> </el-input>
<el-input <div class="left_search_button" @click="search_com()">
class="cardBodyLeft_search_input" <i class="el-icon-search"></i>
placeholder="输入企业名称搜索"
v-model="searchCompany"
>
</el-input>
<div class="cardBodyLeft_search_button" @click="searchCom()">
<i class="el-icon-search"></i>
</div>
</div>
<!-- 公司树数据 -->
<div class="cardBodyLeft_footer">
<el-tree
ref="company_tree"
:data="companyTreeData"
:props="defaultProps"
@node-click="handleNodeClick"
node-key="subAreaCode"
:default-expand-all="defaultExpandAll"
>
<span
slot-scope="{ node }"
:title="node.label"
class="el-tree-node__label node-label"
>
{{ node.label }}
</span>
</el-tree>
</div>
</div>
<el-divider direction="vertical"></el-divider>
<!-- 右侧 -->
<div class="cardBodyRight">
<p>设备列表</p>
<div class="cardBodyRight_search">
<div class="video">
<SearchBox
ref="searchBox"
:searchBoxData="searchBox_left_text"
@clearList="clearList('1')"
@backTypes="backTypes"
></SearchBox>
</div>
<div class="intelligence">
<SearchBox
ref="searchBox"
:searchBoxData="searchBox_right_text"
@clearList="clearList('2')"
@backTypes="backTypes"
></SearchBox>
</div>
</div>
<EquipmentTable
ref="equipmentTable"
:pushTableData="pushTableData"
:only_params="only_params"
></EquipmentTable>
</div> </div>
</div> </div>
</el-card> <!-- 公司树数据 -->
<div class="cardBodyLeft_footer">
<el-tree
ref="company_tree"
:data="company_tree_data"
:props="defaultProps"
@node-click="handle_node_click"
node-key="subAreaCode"
:default-expand-all="defaultExpandAll"
>
<span
slot-scope="{ node }"
:title="node.label"
class="el-tree-node__label node-label"
>
{{ node.label }}
</span>
</el-tree>
</div>
</div>
<div class="right">
<SearchBox
ref="searchBox"
:only_params="only_params"
@push_data_to_table="push_data_to_table"
></SearchBox>
<!-- 右下方表格区域 -->
<div class="right_table">
<EquipmentTable
ref="equipmentTable"
:push_table_data="push_table_data"
></EquipmentTable>
</div>
</div>
</div> </div>
</div> </el-card>
</template> </template>
<script> <script>
import SearchBox from "./components/searchBox.vue"; import { getAllData, getVideoList } from "@/api/correlationEquipment";
import EquipmentTable from "./components/equipmentTable.vue"; import SearchBox from "./components/searchBox";
import { import EquipmentTable from "./components/equipmentTable";
getAllData,
getVideoList,
getPerceptionList,
} from "@/api/correlationEquipment";
export default { export default {
name: "correlationEquipment", name: "correlationEquipment2",
components: { components: {
SearchBox, SearchBox,
EquipmentTable, EquipmentTable,
}, },
data() { data() {
return { return {
searchCompany: "", // search_company: "",
companyTreeData: [], // company_tree_data: [], //
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "areaName", label: "areaName",
}, },
searchBox_left_text: {}, //
searchBox_right_text: {},
pushTableData: [],
defaultExpandAll: true, // defaultExpandAll: true, //
obtain_types: "", // only_params: {}, //
only_params:{}, // push_table_data: {}, //
}; };
}, },
created() { created() {
//
this.only_params = { this.only_params = {
areaName: "宁波", pageSize: 5,
pageNum: 1,
}; };
getAllData(this.only_params).then((res) => { //
if (res.code === 200) { getAllData({ areaName: "宁波" }).then((res) => {
console.log("resning", res); console.log("resning", res);
// //
this.companyTreeData = res.data; this.company_tree_data = res.data;
console.log("this.companyTreeData1", this.companyTreeData); console.log("this.company_tree_data", this.company_tree_data);
// //
this.only_params = { //
pageSize: 4, getVideoList(this.only_params).then((res) => {
pageNum: 1, console.log("resVideoList", res.rows); //res.rows res.total
deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9", //
}; this.push_table_data = res;
getVideoList(this.only_params).then((res) => { this.push_data_to_table(this.push_table_data,this.only_params,true);
console.log("resVideoList", res.rows); });
// res.row
this.pushTableData = res.rows;
});
} else {
this.$message.warning("企业名称查询失败");
}
}); });
//
//
this.searchBox_left_text = {
src: require("@/assets/companyFile/camera03.png"),
img_text: "视频监控设备",
btnList: [
{ value: 1, name: "公共区域", type: "1" },
{ value: 2, name: "地下车库", type: "1" },
{ value: 3, name: "全景监控", type: "1" },
{ value: 5, name: "人脸抓拍", type: "1" },
{ value: 6, name: "电梯监控", type: "1" },
{ value: 7, name: "人体测温", type: "1" },
{ value: 8, name: "车辆抓拍", type: "1" },
{ value: 9, name: "人脸门禁", type: "1" },
{ value: 4, name: "高空抛物", type: "1" },
],
company_types: [],
typesAll: "1",
};
//
this.searchBox_right_text = {
src: require("@/assets/companyFile/intelligence02.png"),
img_text: "智能感知设备",
btnList: [
{ value: 2, name: "车辆抓拍", type: "2" },
{ value: 1, name: "人脸抓拍", type: "2" },
{ value: 3, name: "门禁设备", type: "2" },
{ 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" },
],
company_types: [],
typesAll: "2",
};
}, },
methods: { methods: {
// //
searchCom() { //
this.only_params = { search_com() {
areaName: this.searchCompany, getAllData({
}; areaName: this.search_company === "" ? "宁波" : this.search_company,
getAllData(this.only_params).then((res) => { })
// .then((res) => {
this.companyTreeData = res.data; //
console.log("this.companyTreeData", this.companyTreeData); this.company_tree_data = res.data;
}); console.log("this.company_tree_data", this.company_tree_data);
})
.catch((err) => {
console.log("err", err);
this.$message.warning("查询失败,请输入正确查询条件");
this.company_tree_data = ""; //
});
}, },
handleNodeClick(data) { handle_node_click(data) {
console.log("data123", data); console.log("data123", data);
// List // List
this.searchBox_right_text.company_types = []; // //
this.searchBox_left_text.company_types = []; // this.searchBox_right_text.company_types = [];
if (this.obtain_types === "" || this.obtain_types === "1") { // this.searchBox_left_text.company_types = [];
// //
this.only_params = { this.only_params = {
pageSize: 4, pageSize: 5,
pageNum: 1, pageNum: 1,
company_id: data.subAreaCode, // companyId: data.subAreaCode, //
deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9", // deviceVideoSubType: "1,2,3,4,5,6,7,8,9",
}; };
getVideoList(this.only_params).then((res) => { this.$refs.searchBox.clear_search_list();
console.log("resVideoList", res.rows); getVideoList(this.only_params).then((res) => {
// res.row console.log("resVideoList", res.rows);
this.pushTableData = res.rows; this.push_table_data = res;
}); this.push_data_to_table(this.push_table_data,this.only_params,true);
} else if (this.obtain_types === "2") { });
//
this.only_params = {
pageSize: 4,
pageNum: 1,
company_id: data.subAreaCode, //
devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
};
getPerceptionList(this.only_params).then((res) => {
if (res.code === 200) {
console.log("resVideoList", res.rows);
// res.row
this.pushTableData = res.rows;
}
});
}
},
clearList(num) {
console.log("num", num);
if (num === "1") {
this.searchBox_right_text.company_types = [];
} else if (num === "2") {
this.searchBox_left_text.company_types = [];
}
}, },
backTypes(num) { push_data_to_table(data,params,flag) {
console.log("num0000", num); this.$refs.equipmentTable.obtain_table_data(data,params,flag);
this.obtain_types = num;
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* card统一样式 */ /* card统一样式 */
.el-card.box-card.is-always-shadow { .el-card.box-card.is-always-shadow {
height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */ border: 0px;
height: 88.5vh; /* 控制card布局高度,用于适配 */
position: relative; position: relative;
background: url("~@/assets/companyFile/22136.png") no-repeat !important;
background-size: 100% 100% !important;
} }
/* card统一样式 */ /* card统一样式 */
/deep/.el-card__header { /deep/.el-card__header {
@ -252,189 +165,152 @@ export default {
} }
} }
} }
.main { .cardBody {
height: 100%; display: flex;
.el-card.box-card.is-always-shadow { justify-content: space-between;
background: url("~@/assets/companyFile/22136.png") no-repeat !important; .left_tree {
background-size: 100% 100% !important; width: 20vw;
border: 0px; height: 78vh;
} border: 0.1px solid #485f6c;
.cardBody { background: linear-gradient(#314241, #1b2929, #121e1d);
width: 100%; .left_search {
display: flex; display: flex;
height: 80vh; margin-top: 5%;
/* 左侧 */ margin-left: 5%;
.cardBodyLeft { width: 90%;
width: 25%; height: 40px;
height: 75vh; .left_search_input ::v-deep {
background: rgba(23, 36, 36, 0.4); /* 查询框 */
border: 0.5px solid #485f6c; width: 87%;
border-radius: 4px; .el-input__inner {
.cardBodyLeft_search { border-radius: 4px 0px 0px 4px;
display: flex; background: #3c4b4a;
margin-top: 5%; color: #fff;
margin-left: 5%;
width: 90%;
height: 40px;
.cardBodyLeft_search_input ::v-deep {
/* 查询框 */
width: 90%;
.el-input__inner {
border-radius: 4px 0px 0px 4px;
background: #3c4b4a;
color: #fff;
}
/* 查询框点击颜色变化 */
.el-input__inner:focus,
.el-input__inner:hover {
border-color: #1b3736;
}
} }
.cardBodyLeft_search_button { /* 查询框点击颜色变化 */
width: 10%; .el-input__inner:focus,
height: 100%; .el-input__inner:hover {
border-radius: 0px 4px 4px 0px; border-color: #1b3736;
background: #0e3936;
text-align: center;
font-size: 28px;
cursor: pointer;
.el-icon-search {
color: #fff;
padding: 12% 0;
}
} }
.cardBodyLeft_search_button:focus, }
.cardBodyLeft_search_button:hover { .left_search_button {
/* 放大镜点击特效 */ width: 13%;
background: #126a58; height: 100%;
border-radius: 0px 4px 4px 0px;
background: #0e3936;
text-align: center;
font-size: 28px;
cursor: pointer;
.el-icon-search {
color: #fff;
padding: 12% 0;
} }
} }
.cardBodyLeft_footer { .left_search_button:focus,
width: 90%; .left_search_button:hover {
margin-left: 5%; /* 放大镜点击特效 */
margin-top: 3vh; background: #126a58;
height: 69vh; }
.el-tree { }
/* 树形数据过长添加滚动条 */ .cardBodyLeft_footer {
height: 65vh; width: 90%;
overflow: auto; margin-left: 5%;
// box-shadow: 5px 5px 10px #126a58; margin-top: 3vh;
border-radius: 4px; height: 69vh;
background: #293738; .el-tree {
color: #fff !important; /* 树形数据过长添加滚动条 */
/deep/.el-tree-node__content { height: 65vh;
height: 50px; overflow: auto;
} // box-shadow: 5px 5px 10px #126a58;
.el-tree-node__label.node-label { border-radius: 4px;
display: flex; // background: #293738;
font-size: 18px; background: rgba(0, 0, 0, 0);
} border: 0.1px solid #485f6c;
/* 去掉树形数据前面的三角形 */ color: #fff !important;
/deep/.el-icon-caret-right:before { /deep/.el-tree-node__content {
content: ""; height: 50px;
}
.node-label {
/* 树形数据横向过长添加展开 */
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* hover节点时的背景颜色 */
::v-deep .el-tree-node__content:hover {
background: #495461;
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
/* 节点选中的背景颜色 */
::v-deep .el-tree-node:focus > .el-tree-node__content {
background: #495461;
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
} }
// .el-tree-node__label.node-label {
.el-tree /deep/ .el-icon-caret-right:before { display: flex;
background: url("~@/assets/companyFile/add.png") no-repeat; font-size: 16px;
content: "";
display: block;
width: 23px;
height: 23px;
font-size: 23px;
background-size: 23px;
} }
// /* 去掉树形数据前面的三角形 */
.el-tree /deep/.el-icon-caret-right:before {
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/companyFile/add.png") no-repeat;
content: ""; content: "";
display: block;
width: 23px;
height: 23px;
font-size: 23px;
background-size: 23px;
} }
// minus .node-label {
.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before { /* 树形数据横向过长添加展开 */
background: url("~@/assets/companyFile/minus.png") no-repeat; width: 100%;
content: ""; overflow: hidden;
display: block; text-overflow: ellipsis;
width: 23px; white-space: nowrap;
height: 23px;
font-size: 23px;
background-size: 23px;
} }
.el-tree::-webkit-scrollbar { /* hover节点时的背景颜色 */
width: 9px; ::v-deep .el-tree-node__content:hover {
background-color: #5e666a; background: #495461;
border-radius: 4px; color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
.el-tree::-webkit-scrollbar-thumb { /* 节点选中的背景颜色 */
width: 8px; ::v-deep .el-tree-node:focus > .el-tree-node__content {
background-color: #3c4b4a; background: #495461;
border-radius: 4px; color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
} }
} //
/* 竖分割线 */ .el-tree /deep/ .el-icon-caret-right:before {
.el-divider.el-divider--vertical { background: url("~@/assets/companyFile/add.png") no-repeat;
opacity: 0; content: "";
margin-left: 13px; display: block;
height: 100%; width: 23px;
} height: 23px;
/* 右侧 */ font-size: 23px;
.cardBodyRight { background-size: 23px;
p {
margin-left: 10px;
height: 18px;
color: #fff;
font-size: 18px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
width: 74%; //
height: 75vh; .el-tree
border-radius: 4px; /deep/
background: rgba(31, 45, 49, 0.4); .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
border: 0.5px solid #485f6c; background: url("~@/assets/companyFile/add.png") no-repeat;
.cardBodyRight_search { content: "";
display: flex; display: block;
justify-content: space-evenly; width: 23px;
width: 63vw; height: 23px;
height: 20vh; font-size: 23px;
.video { background-size: 23px;
width: 48%; }
height: 100%; // minus
background: #3b5153; .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
border-radius: 4px; background: url("~@/assets/companyFile/minus.png") no-repeat;
} content: "";
.intelligence { display: block;
width: 48%; width: 23px;
height: 100%; height: 23px;
background: #3b5153; font-size: 23px;
border-radius: 4px; background-size: 23px;
}
} }
.el-tree::-webkit-scrollbar {
width: 9px;
background-color: #5e666a;
border-radius: 4px;
}
.el-tree::-webkit-scrollbar-thumb {
width: 8px;
background-color: #3c4b4a;
border-radius: 4px;
}
}
}
.right {
width: 64vw;
height: 78vh;
// border: 0.1px solid #485f6c;
.right_table {
margin-top: 1vh;
width: 64vw;
height: 52vh;
// border: 0.1px solid #485f6c;
} }
} }
} }

@ -1,390 +1,261 @@
<template> <template>
<div> <!-- 设备表格 -->
<div v-if="table_flag" class="equipment_table_video"> <div class="equipment_data">
<div class="table_title">视频监控设备列表</div> <p>{{ table_title }}</p>
<div class="table_search"> <!-- 查询表 -->
<el-form :model="search" class="table_search_form"> <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.equipment" placeholder="输入设备名称搜索"></el-input>
</el-form-item>
<el-form-item>
<el-form-item> <el-form-item>
<el-input <el-input v-model="search.channel_code" placeholder="输入通道国际编码搜索"></el-input>
v-model="search.deviceName"
placeholder="输入设备名称搜索"
></el-input>
</el-form-item> </el-form-item>
<el-form-item> </el-form-item>
<el-input <el-form-item>
v-model="search.gbsChannelNo" <el-input v-model="search.equipment_ip" placeholder="输入设备IP搜索"></el-input>
placeholder="输入通道国际编码搜索" </el-form-item>
></el-input> <el-form-item>
</el-form-item> <el-button @click="onSubmitVideo"></el-button>
<el-form-item> </el-form-item>
<el-input <el-form-item>
v-model="search.deviceIp" <el-button @click="resetVideo"></el-button>
placeholder="输入设备IP搜索" </el-form-item>
></el-input> </el-form>
</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 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>
<div v-else class="equipment_table_perception"> <div v-else class="equipment_data_search">
<div class="table_title">智能感知设备列表</div> <el-form :inline="true" :model="search" class="search_data">
<div class="table_search"> <el-form-item>
<el-form :model="search" class="table_search_form"> <el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
</el-form-item>
<el-form-item>
<el-form-item> <el-form-item>
<el-input <el-input v-model="search.ip" placeholder="输入IP名称搜索"></el-input>
v-model="search_p.deviceName"
placeholder="输入设备名称搜索"
></el-input>
</el-form-item> </el-form-item>
<el-form-item> </el-form-item>
<el-input <el-form-item>
v-model="search_p.deviceIp" <el-button @click="onSubmit"></el-button>
placeholder="输入设备IP搜索" </el-form-item>
></el-input> <el-form-item>
</el-form-item> <el-button @click="reset"></el-button>
<el-form-item> </el-form-item>
<el-button @click="perception_search"></el-button> </el-form>
</el-form-item> </div>
<el-form-item> <!-- 增删按钮 -->
<el-button @click="perception_reset"></el-button> <div class="equipment_data_btn">
</el-form-item> <el-button v-for="item in btnList" :key="item.value" @click="openDialog(item.value)">
</el-form> <i :class="`el-icon-${item.icon}`" />
</div> {{ item.label }}</el-button>
<div class="table_btn_list">
<el-button
v-for="item in btn_list"
:key="item.value"
@click="open_perception_dialog(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"
@selection-change="handle_perception_change"
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="open_perception_dialog('5', scope.row)"
>编辑
</el-button>
<el-button
size="small"
class="operation"
@click="open_perception_dialog('6', 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"
>
</el-pagination>
</div>
</div> </div>
<!-- 视频设备表单弹窗 --> <!-- 表格 -->
<VideoForm ref="videoForm" @refresh_video="refresh_video"></VideoForm> <div class="equipment_data_table">
<!-- 删除视频设备表单弹窗 --> <el-table :cell-style="{ background: 'revert' }" :header-cell-style="table_header" :data="pushTableData"
<DeleteVideo ref="deleteVideo" @refresh_video="refresh_video"></DeleteVideo> :highlight-current-row="true" height="250">
<!-- 导入视频设备弹窗 --> <el-table-column type="selection" width="55"> </el-table-column>
<ImportVideo ref="importVideo"></ImportVideo> <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"
<!-- 导出视频设备弹窗 --> :width="item.width"></el-table-column>
<ExportVideo ref="exportVideo"></ExportVideo> <el-table-column prop="operation" label="操作">
<!-- 智能设备表单弹窗 --> <template slot-scope="scope">
<PerceptionForm <el-button size="small" class="operation" @click="openDialog('2', scope.row)">编辑
ref="perceptionForm" </el-button>
@refresh_perception="refresh_perception" <el-button size="small" class="operation" @click="openDialog('5', scope.row)">详情
></PerceptionForm> </el-button>
<!-- 删除智能设备表单弹窗 --> </template>
<DeletePerception </el-table-column>
ref="deletePerception" </el-table>
@refresh_perception="refresh_perception" </div>
></DeletePerception> <div class="equipment_data_pagination">
<!-- 导入智能设备弹窗 --> <el-pagination :background="true" @current-change="handleCurrentChange" :page-sizes="[4]" :page-size="PageSize"
<ImportPerception ref="importPerception"></ImportPerception> :current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pushTableData.length">
<!-- 导出智能设备弹窗 --> </el-pagination>
<ExportPerception ref="exportPerception"></ExportPerception> </div>
<AddVideoDialog ref="addVideoDialog"></AddVideoDialog>
<AddPerceptionDialog ref="addPerceptionDialog"></AddPerceptionDialog>
<UploadDialog ref="uploadDialog"></UploadDialog>
<DeriveDialog ref="deriveDialog" :table_title="table_title"></DeriveDialog>
</div> </div>
</template> </template>
<script> <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 { 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 { export default {
name:'EquipmentTable', name: "EquipmentTable",
components: { components: {
VideoForm, AddPerceptionDialog,
DeleteVideo, AddVideoDialog,
ImportVideo, UploadDialog,
ExportVideo, DeriveDialog,
PerceptionForm, },
DeletePerception, props: {
ImportPerception, pushTableData: [],
ExportPerception, only_params: {},
}, },
data() { data() {
return { return {
table_flag: true, table_title: "视频监控设备列表", //
// display_search: true, //
search_params_table: {}, //
search: { search: {
deviceName: "", equipment: "",
gbsChannelNo: "", ip: "",
deviceIp: "", channel_code: "",
}, equipemnt_ip: "",
//
search_p: {
deviceName: "",
deviceIp: "",
}, },
btn_list: [ btnList: [
{ value: "1", label: "新增", icon: "plus" }, { value: "1", label: "新增", icon: "plus" },
{ value: "2", label: "删除", icon: "delete" }, { value: "2", label: "删除", icon: "delete" },
{ 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: [], tableColumn: [],
table_column_video: [ tableData: [],
//
tableColumn_video: [
{ prop: "gbsChannelNo", label: "通道国际编码", width: "200" }, { prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
{ prop: "gbsNvrNo", label: "NVR设备编码", width: "200" }, { prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
{ prop: "deviceName", label: "设备名称", width: "270" }, { prop: "deviceName", label: "设备名称", width: "270" },
{ prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" }, { prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
{ prop: "deviceIp", label: "设备IP" }, { prop: "deviceIp", label: "设备IP" },
// { prop: "deviceBrand", label: "" },
// { prop: "longitude", label: "" },
// { prop: "latitude", label: "" },
], ],
table_column_perception: [ //
tableColumn_preception: [
{ prop: "deviceName", label: "设备名称", width: "270" }, { prop: "deviceName", label: "设备名称", width: "270" },
{ prop: "devicePerceptionSubTypeCn", label: "设备类型" }, { prop: "devicePerceptionSubTypeCn", label: "设备类型" },
{ prop: "deviceIp", label: "设备IP" }, { prop: "deviceIp", label: "设备IP" },
// { prop: "longitude", label: "" },
// { prop: "latitude", label: "" },
{ prop: "orientationCn", label: "进出方向" }, { prop: "orientationCn", label: "进出方向" },
], ],
handle_video: "", // table_params: {}, //
handle_perception: "", // pageSize: 4,
pageSize: 0, pageNum: 1,
pageNum: 0, total: 0, //
only_params: {},
total: 0,
}; };
}, },
created() { created() {
this.table_column = this.table_column_video; this.tableColumn = this.tableColumn_video; //
},
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;
});
}, },
methods: { methods: {
obtain_table_data(data, params, flag) { //
this.table_flag = flag; onSubmit() {
console.log("data_1", data); this.only_params = {
this.table_data = data.rows; pageSize: this.pageSize,
this.total = data.total; pageNum: this.pageNum,
this.pageSize = params.pageSize; deviceIp: this.search.ip,
this.pageNum = params.pageNum; deviceName: this.search.equipment,
this.only_params = params; };
console.log("params_1", params); Object.assign(this.only_params, this.search_params_table);
}, getPerceptionList(this.only_params).then((res) => {
// // res.row
refresh_video() { this.pushTableData = res.rows;
getVideoList(this.only_params).then((res) => {
this.table_data = res.rows;
this.total = res.total;
}); });
}, },
refresh_perception() { //
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) => { getPerceptionList(this.only_params).then((res) => {
this.table_data = res.rows; // res.row
this.total = res.total; this.pushTableData = res.rows;
}); });
}, },
// //
video_search() { onSubmitVideo() {
this.only_params = Object.assign(this.only_params, this.search); 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) => { getVideoList(this.only_params).then((res) => {
this.table_data = res.rows; // res.row
this.total = res.total; this.pushTableData = res.rows;
}); });
}, },
// //
video_reset() { resetVideo() {
// (this.search.channel_code = ""),
this.search.gbsChannelNo = ""; (this.search.equipemnt_ip = ""),
this.search.deviceName = ""; (this.search.equipment = "");
this.search.deviceIp = ""; this.only_params = {
this.only_params = Object.assign(this.only_params, this.search); 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) => { getVideoList(this.only_params).then((res) => {
this.table_data = res.rows; // res.row
this.total = res.total; 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;
}); });
}, },
// openDialog(num, row) {
open_video_dialog(num, row) { console.log(num, "num");
if (num === "1") { if (num === "1") {
// //
this.$refs.videoForm.open(num); console.log(num, "num");
} else if (num === "2") { if (this.table_title === "视频监控设备列表") {
// this.$refs.addVideoDialog.open(num);
if (this.handle_video.length != 1) { } else if (this.table_title === "智能感知设备列表") {
this.$message.warning("请选择一条表格数据"); this.$refs.addPerceptionDialog.open(num);
} else {
this.$refs.deleteVideo.open(this.handle_video);
} }
} 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") { } else if (num === "2") {
// //
if (this.handle_perception.length != 1) { console.log("rowww", row);
this.$message.warning("请选择一条表格数据"); if (this.table_title === "视频监控设备列表") {
} else { this.$refs.addVideoDialog.open(num, row);
this.$refs.deletePerception.open(this.handle_perception); } else if (this.table_title === "智能感知设备列表") {
this.$refs.addPerceptionDialog.open(num, row);
} }
} else if (num === "3") { } else if (num === "3") {
// //
this.$refs.importPerception.open(); this.$refs.uploadDialog.open();
} else if (num === "4") { } else if (num === "4") {
// //
this.$refs.exportPerception.open(); this.$refs.deriveDialog.open();
} else if (num === "5") { } else if (num === "5") {
// //
this.$refs.perceptionForm.open(num, row); console.log("rowww", row);
} else if (num === "6") { if (this.table_title === "视频监控设备列表") {
// this.$refs.addVideoDialog.open(num, row);
this.$refs.perceptionForm.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 }) { table_header({ row, rowIndex }) {
console.log(row); console.log(row);
console.log(rowIndex); console.log(rowIndex);
@ -392,53 +263,42 @@ export default {
color: "#fff", color: "#fff",
}; };
}, },
//
handleCurrentChange(val) { handleCurrentChange(val) {
console.log(`当前页: ${val}`); console.log(`当前页: ${val}`);
this.only_params.pageNum = val; this.only_params.pageNum = val
getVideoList(this.only_params).then((res) => { console.log('this.only_params', this.only_params);
this.table_data = res.rows; if (this.table_title === "视频监控设备列表") {
}); getVideoList(this.only_params).then((res) => {
}, this.pushTableData = res.rows;
// });
handleCurrentChangePerception(val) { } else if (this.table_title === "智能感知设备列表") {
console.log(`当前页: ${val}`); getPerceptionList(this.only_params).then((res) => {
this.only_params.pageNum = val; this.pushTableData = res.rows;
getPerceptionList(this.only_params).then((res) => { });
this.table_data = res.rows; }
});
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.equipment_table_video, .equipment_data {
.equipment_table_perception { p {
.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);
margin-left: 10px; margin-left: 10px;
font-size: 17px;
} }
.table_search {
margin-top: 1vh; .equipment_data_search {
width: 64vw; margin-left: 12px;
height: 4vh;
.table_search_form {
display: flex;
.el-form-item {
margin-left: 0.5vw;
}
}
/deep/.el-input__inner { /deep/.el-input__inner {
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
width: 10vw;
} }
.el-button { .el-button {
width: 4vw; width: 100%;
border: 1px solid #4a6072; border: 1px solid #4a6072;
color: #fff; color: #fff;
border-radius: 0px !important; border-radius: 0px !important;
@ -452,9 +312,10 @@ export default {
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
} }
.table_btn_list {
width: 64vw; .equipment_data_btn {
height: 5vh; margin-left: 12px;
.el-button { .el-button {
width: 90px; width: 90px;
height: 5vh; height: 5vh;
@ -464,120 +325,134 @@ export default {
background: url("~@/assets/companyFile/btn1.png") no-repeat !important; background: url("~@/assets/companyFile/btn1.png") no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
.el-button:focus, .el-button:focus,
.el-button:hover { .el-button:hover {
filter: brightness(200%); filter: brightness(200%);
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64); text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
} }
.table_video {
width: 64vw; .equipment_data_table {
height: 34vh; width: calc(100% - 30px);
margin-left: 10px; margin-top: 12px;
} margin-left: 12px;
/deep/.el-table { height: 27vh;
width: 98.2%;
.el-table__body-wrapper { .el-table,
overflow: auto; .el-table__expanded-cell {
background: #233438;
color: #fff; color: #fff;
&::-webkit-scrollbar { background-color: transparent;
width: 3px;
}
// , }
&::-webkit-scrollbar-thumb {
background: #4cf993; /deep/.el-table {
border-radius: 2px; .el-table__body-wrapper {
}
overflow: auto;
&::-webkit-scrollbar {
width: 3px;
}
// ,
&::-webkit-scrollbar-thumb {
background: #4CF993;
border-radius: 2px;
}
//
&::-webkit-scrollbar-track {
background: transparent;
}
//
&::-webkit-scrollbar-track {
background: transparent;
} }
}
thead { thead {
text-align: center; text-align: center;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
background: linear-gradient( background: linear-gradient(to right,
to right, #284f49,
#284f49, #2f6363,
#2f6363, #233b38) !important;
#233b38
) !important;
& th { & th {
background-color: transparent; background-color: transparent;
}
& tr {
background-color: transparent;
}
} }
& tr { tr {
background-color: transparent; background: #233438;
} }
} }
tr { .el-table::before {
background: #233438; //线
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;
}
/deep/.el-button.operation:hover, /deep/.el-button.operation {
.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);
/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);
}
} }
.table_pagination {
width: 64vw;
height: 5vh;
.el-pagination {
margin-left: 50%;
margin-top: 2vh;
/deep/.el-pagination__total { .el-pagination {
color: #fff; margin-left: 50%;
}
/deep/.el-input__inner { /deep/.el-pagination__total {
border-radius: 0px; color: #fff;
background: #3c4b4a; }
color: #fff;
}
/deep/.btn-prev { /deep/.el-input__inner {
border-radius: 0px; border-radius: 0px;
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
} }
/deep/ul { /deep/.btn-prev {
li { border-radius: 0px;
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
} }
}
/deep/.btn-next { /deep/ul {
border-radius: 0px; li {
background: #3c4b4a; background: #3c4b4a;
color: #fff; color: #fff;
} }
}
/deep/ .el-pager { /deep/.btn-next {
li { border-radius: 0px;
background: #3c4b4a !important; background: #3c4b4a;
} color: #fff;
}
/deep/ .el-pager {
li {
background: #3c4b4a !important;
} }
} }
} }

@ -1,332 +1,252 @@
<template> <template>
<!-- 视频设备智能设备查询 --> <!-- 关联设备的右侧查询盒子 -->
<div class="search_box"> <div class="searchBox_body">
<div class="box_title">设备列表</div> <div class="searchBox_img">
<div class="search_check"> <el-button
<!-- 视频设备查询条件 --> class="searchBox_img_top"
<div class="video_check"> @click="change_types(searchBoxData.typesAll)"
<div class="video_btn"> >
<el-button class="video_button" @click="video_all_check"> <img :src="searchBoxData.src" alt="" />
<img :src="video_btn_img_src" alt="" /> </el-button>
</el-button> <span>{{ searchBoxData.img_text }}</span>
<div class="video_text">{{ video_text }}</div>
</div>
<el-checkbox-group v-model="video_checkgroup">
<el-checkbox
class="video_checks"
v-for="item in video_btn_list"
: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>
<el-checkbox-group v-model="perception_checkgroup">
<el-checkbox
class="perception_checks"
v-for="item in perception_btn_list"
:key="item.value"
:label="item.name"
@change="perception_check_search($event, item.value)"
>
{{ item.name }}</el-checkbox
>
</el-checkbox-group>
</div>
</div> </div>
<el-checkbox-group v-model="searchBoxData.company_types">
<el-checkbox
class="searchBox_btn"
v-for="item in searchBoxData.btnList"
:key="item.value"
@change="sendClearList($event, item.type, item.value)"
:label="item.name"
name="type"
>
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</div> </div>
</template> </template>
<script> <script>
import bus from "@/assets/js/eventBus.js";
import { getVideoList, getPerceptionList } from "@/api/correlationEquipment"; import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
export default { export default {
name: "SearchBox", name: "searchBox",
props: { props: {
only_params: {}, // searchBoxData: {},
}, },
data() { data() {
return { return {
video_checkgroup: [], // pushValue: {
deviceVideoSubTypes: [], // title: "",
video_btn_list: [ pushTableData: [],
{ value: 1, name: "公共区域", type: "1" }, search_params:{}, //
{ value: 2, name: "地下车库", type: "1" }, },
{ value: 3, name: "全景监控", type: "1" }, types_params_list: [], // id
{ value: 5, name: "人脸抓拍", type: "1" }, per_types_params_list: [], // id
{ value: 6, name: "电梯监控", type: "1" }, back_types:'', //
{ value: 7, name: "人体测温", type: "1" },
{ value: 8, name: "车辆抓拍", type: "1" },
{ value: 9, name: "人脸门禁", type: "1" },
{ value: 4, name: "高空抛物", type: "1" },
],
video_btn_img_src: require("@/assets/companyFile/camera03.png"),
video_text: "视频监控设备",
perception_checkgroup: [], //
devicePerceptionSubTypes: [], //
perception_btn_list: [
{ value: 2, name: "车辆抓拍", type: "2" },
{ value: 1, name: "人脸抓拍", type: "2" },
{ value: 3, name: "门禁设备", type: "2" },
{ 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: {}, //
flag: true,
}; };
}, },
created() {},
methods: { methods: {
clear_search_list() { async sendClearList(e, item, value) {
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 = []; //
this.deviceVideoSubTypes = []
this.devicePerceptionSubTypes = [];
delete this.only_params.devicePerceptionSubTypes; //
this.only_params.deviceVideoSubTypes = ""; //
this.flag = true;
getVideoList(this.only_params).then((res) => {
console.log("res_video", res);
this.check_push_table_data = res;
this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // Table
});
},
//
perception_all_check() {
this.perception_checkgroup = []; //
this.video_checkgroup = []; //
this.deviceVideoSubTypes = []
this.devicePerceptionSubTypes = [];
delete this.only_params.deviceVideoSubTypes; //
this.only_params.devicePerceptionSubTypes = ""; //
this.flag = false;
getPerceptionList(this.only_params).then((res) => {
console.log("res_video", res);
this.check_push_table_data = res;
this.$emit(
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // Table
});
},
//
video_check_search(e, value) {
if (e) { if (e) {
// //
delete this.only_params.devicePerceptionSubTypes; // //
this.perception_checkgroup = []; // this.$emit("clearList"); //
this.devicePerceptionSubTypes = []; // //
this.deviceVideoSubTypes.push(value); // console.log("item123", item);
this.only_params.deviceVideoSubTypes = if (item === "1") {
this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // this.back_types = item
this.flag = true; this.$emit('backTypes', this.back_types) //
getVideoList(this.only_params).then((res) => { this.types_params_list.push(value);
console.log("res_video", res); this.pushValue.title = "视频监控设备列表";
this.check_push_table_data = res; //
this.$emit( this.pushValue.search_params = {
"push_data_to_table", pageSize: 4,
this.check_push_table_data, pageNum: 1,
this.only_params, deviceVideoSubTypes: "",
this.flag };
); // Table 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.back_types = item
this.$emit('backTypes', this.back_types) //
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 { } else {
// //
delete this.only_params.devicePerceptionSubTypes; // console.log("e1111", e);
this.perception_checkgroup = []; // this.$emit("clearList"); //
this.devicePerceptionSubTypes = []; // //
this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter( console.log("item123", item);
(item) => item != value if (item === "1") {
); // this.back_types = item
this.only_params.deviceVideoSubTypes = this.$emit('backTypes', this.back_types) //
this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // console.log("this.types_params_list2", this.types_params_list);
this.flag = true; console.log("value", value);
getVideoList(this.only_params).then((res) => { this.types_params_list = this.types_params_list.filter(
console.log("res_video", res); (val) => val != value
this.check_push_table_data = res; ); //
this.$emit( console.log("this.types_params_list3", this.types_params_list);
"push_data_to_table", this.pushValue.title = "视频监控设备列表";
this.check_push_table_data, //
this.only_params, this.pushValue.search_params = {
this.flag pageSize: 4,
); // Table 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.back_types = item
this.$emit('backTypes', this.back_types) //
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) {
perception_check_search(e, value) { //
if (e) { this.$emit("clearList"); //
// this.types_params_list = []; //
delete this.only_params.deviceVideoSubTypes; // this.per_types_params_list = [];
this.video_checkgroup = []; // this.searchBoxData.company_types = [];
this.deviceVideoSubTypes = []; // if (num === "1") {
this.devicePerceptionSubTypes.push(value); // //
this.only_params.devicePerceptionSubTypes = this.back_types = num
this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // this.$emit('backTypes', this.back_types) //
this.flag = false; this.pushValue.title = "视频监控设备列表";
getPerceptionList(this.only_params).then((res) => { this.pushValue.search_params = {
this.check_push_table_data = res; pageSize: 4,
this.$emit( pageNum: 1,
"push_data_to_table", // deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
this.check_push_table_data, };
this.only_params, await getVideoList(this.pushValue.search_params).then((res) => {
this.flag console.log("resVideoList1", res.rows);
); // Table // res.row
this.pushValue.pushTableData = res.rows;
}); });
} else { } else if (num === "2") {
// console.log("num123", num);
delete this.only_params.deviceVideoSubTypes; // this.back_types = num
this.video_checkgroup = []; // this.$emit('backTypes', this.back_types) //
this.deviceVideoSubTypes = []; // //
this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter( this.pushValue.title = "智能感知设备列表";
(item) => item != value this.pushValue.search_params = {
); // pageSize: 4,
this.only_params.devicePerceptionSubTypes = pageNum: 1,
this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // // devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
this.flag = false; };
getPerceptionList(this.only_params).then((res) => { await getPerceptionList(this.pushValue.search_params).then((res) => {
this.check_push_table_data = res; // res.row
this.$emit( this.pushValue.pushTableData = res.rows;
"push_data_to_table",
this.check_push_table_data,
this.only_params,
this.flag
); // Table
}); });
} }
bus.$emit("send", this.pushValue);
// 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; //
// }
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.search_box { .searchBox_body {
margin: 0 auto; width: 100%;
margin-top: 1vh; height: 100%;
width: 63vw; display: flex;
height: 24vh; .searchBox_img {
// border: 0.1px solid #485f6c;
.box_title {
width: 63vw;
height: 2vh;
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.search_check {
margin-top: 1vh;
width: 63vw;
height: 20vh;
// border: 0.1px solid #485f6c;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
// flex-direction: column;
.video_check { width: 22%;
width: 31vw; height: 100%;
height: 20vh; color: #fff;
border: 0.1px solid #485f6c; text-align: center;
font-size: 15px;
.searchBox_img_top {
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;
color: #fff; justify-content: center;
text-align: center; align-items: center;
// border: 0px;
.video_btn { img {
width: 7vw; width: 1.8vw;
height: 20vh; height: 3.6vh;
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;
justify-content: center;
align-items: center;
border: 0px;
img {
width: 1.8vw;
height: 3.6vh;
}
}
.video_button:focus,
.video_button:hover {
filter: brightness(170%);
}
} }
} }
// .searchBox_img_top:focus,
.perception_check { .searchBox_img_top:hover {
width: 31vw; filter: brightness(170%);
height: 20vh; }
border: 0.1px solid #485f6c; span {
display: flex; margin-top: 7%;
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;
img {
width: 1.8vw;
height: 3.6vh;
}
}
.perception_button:focus,
.perception_button:hover {
filter: brightness(170%);
}
}
} }
} }
/deep/.el-checkbox-group { /deep/.el-checkbox-group {
width: 24vw; width: 70%;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-flow: wrap; flex-flow: wrap;
padding: 20px 5px 0px 5px; padding: 15px 0px 0px 10px;
.el-checkbox { .el-checkbox {
width: 30%; width: 30%;
height: 4vh; height: 4vh;
@ -351,6 +271,24 @@ export default {
.el-checkbox__inner { .el-checkbox__inner {
display: none; display: none;
} }
// .searchBox_btn {
// list-style: none;
// width: 30%;
// .el-button {
// width: 100%;
// border: 1px solid #4a6072;
// color: #fff;
// border-radius: 0px !important;
// background: #323f43;
// }
// .el-button:focus,
// .el-button:hover {
// color: #34e1b3;
// text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
// background: url("~@/assets/companyFile/891771.png") no-repeat !important;
// background-size: 100% 100% !important;
// }
// }
} }
} }
</style> </style>

@ -1,157 +1,244 @@
<template> <template>
<!-- 关联设备 --> <!-- 关联设备 -->
<el-card class="box-card"> <div>
<div class="topZS"></div> <div class="main">
<div class="bottomZS"></div> <!-- 卡片标题 -->
<div slot="header" class="clearfix"> <el-card class="box-card">
<span>关联设备</span> <div class="topZS"></div>
</div> <div class="bottomZS"></div>
<div class="cardBody"> <div slot="header" class="clearfix">
<div class="left_tree"> <span>关联设备</span>
<div class="left_search">
<el-input
class="left_search_input"
placeholder="输入企业名称搜索"
v-model="search_company"
>
</el-input>
<div class="left_search_button" @click="search_com()">
<i class="el-icon-search"></i>
</div>
</div>
<!-- 公司树数据 -->
<div class="cardBodyLeft_footer">
<el-tree
ref="company_tree"
:data="company_tree_data"
:props="defaultProps"
@node-click="handle_node_click"
node-key="subAreaCode"
:default-expand-all="defaultExpandAll"
>
<span
slot-scope="{ node }"
:title="node.label"
class="el-tree-node__label node-label"
>
{{ node.label }}
</span>
</el-tree>
</div> </div>
</div> <!-- 内容 -->
<div class="right"> <div class="cardBody">
<SearchBox <!-- 左侧 -->
ref="searchBox" <div class="cardBodyLeft">
:only_params="only_params" <!-- 左侧搜索框 -->
@push_data_to_table="push_data_to_table" <div class="cardBodyLeft_search">
></SearchBox> <el-input
<!-- 右下方表格区域 --> class="cardBodyLeft_search_input"
<div class="right_table"> placeholder="输入企业名称搜索"
<EquipmentTable v-model="searchCompany"
ref="equipmentTable" >
:push_table_data="push_table_data" </el-input>
></EquipmentTable> <div class="cardBodyLeft_search_button" @click="searchCom()">
<i class="el-icon-search"></i>
</div>
</div>
<!-- 公司树数据 -->
<div class="cardBodyLeft_footer">
<el-tree
ref="company_tree"
:data="companyTreeData"
:props="defaultProps"
@node-click="handleNodeClick"
node-key="subAreaCode"
:default-expand-all="defaultExpandAll"
>
<span
slot-scope="{ node }"
:title="node.label"
class="el-tree-node__label node-label"
>
{{ node.label }}
</span>
</el-tree>
</div>
</div>
<el-divider direction="vertical"></el-divider>
<!-- 右侧 -->
<div class="cardBodyRight">
<p>设备列表</p>
<div class="cardBodyRight_search">
<div class="video">
<SearchBox
ref="searchBox"
:searchBoxData="searchBox_left_text"
@clearList="clearList('1')"
@backTypes="backTypes"
></SearchBox>
</div>
<div class="intelligence">
<SearchBox
ref="searchBox"
:searchBoxData="searchBox_right_text"
@clearList="clearList('2')"
@backTypes="backTypes"
></SearchBox>
</div>
</div>
<EquipmentTable
ref="equipmentTable"
:pushTableData="pushTableData"
:only_params="only_params"
></EquipmentTable>
</div>
</div> </div>
</div> </el-card>
</div> </div>
</el-card> </div>
</template> </template>
<script> <script>
import { getAllData, getVideoList } from "@/api/correlationEquipment"; import SearchBox from "./components/searchBox.vue";
import SearchBox from "./components/searchBox"; import EquipmentTable from "./components/equipmentTable.vue";
import EquipmentTable from "./components/equipmentTable"; import {
getAllData,
getVideoList,
getPerceptionList,
} from "@/api/correlationEquipment";
export default { export default {
name: "correlationEquipment2", name: "correlationEquipment",
components: { components: {
SearchBox, SearchBox,
EquipmentTable, EquipmentTable,
}, },
data() { data() {
return { return {
search_company: "", searchCompany: "", //
company_tree_data: [], // companyTreeData: [], //
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "areaName", label: "areaName",
}, },
searchBox_left_text: {}, //
searchBox_right_text: {},
pushTableData: [],
defaultExpandAll: true, // defaultExpandAll: true, //
only_params: {}, // obtain_types: "", //
push_table_data: {}, // only_params:{}, //
}; };
}, },
created() { created() {
//
this.only_params = { this.only_params = {
pageSize: 5, areaName: "宁波",
pageNum: 1,
}; };
// getAllData(this.only_params).then((res) => {
getAllData({ areaName: "宁波" }).then((res) => { if (res.code === 200) {
console.log("resning", res); console.log("resning", res);
// //
this.company_tree_data = res.data; this.companyTreeData = res.data;
console.log("this.company_tree_data", this.company_tree_data); console.log("this.companyTreeData1", this.companyTreeData);
// //
// this.only_params = {
getVideoList(this.only_params).then((res) => { pageSize: 4,
console.log("resVideoList", res.rows); //res.rows res.total pageNum: 1,
// deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
this.push_table_data = res; };
this.push_data_to_table(this.push_table_data,this.only_params,true); getVideoList(this.only_params).then((res) => {
}); console.log("resVideoList", res.rows);
// res.row
this.pushTableData = res.rows;
});
} else {
this.$message.warning("企业名称查询失败");
}
}); });
//
//
this.searchBox_left_text = {
src: require("@/assets/companyFile/camera03.png"),
img_text: "视频监控设备",
btnList: [
{ value: 1, name: "公共区域", type: "1" },
{ value: 2, name: "地下车库", type: "1" },
{ value: 3, name: "全景监控", type: "1" },
{ value: 5, name: "人脸抓拍", type: "1" },
{ value: 6, name: "电梯监控", type: "1" },
{ value: 7, name: "人体测温", type: "1" },
{ value: 8, name: "车辆抓拍", type: "1" },
{ value: 9, name: "人脸门禁", type: "1" },
{ value: 4, name: "高空抛物", type: "1" },
],
company_types: [],
typesAll: "1",
};
//
this.searchBox_right_text = {
src: require("@/assets/companyFile/intelligence02.png"),
img_text: "智能感知设备",
btnList: [
{ value: 2, name: "车辆抓拍", type: "2" },
{ value: 1, name: "人脸抓拍", type: "2" },
{ value: 3, name: "门禁设备", type: "2" },
{ 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" },
],
company_types: [],
typesAll: "2",
};
}, },
methods: { methods: {
// //
// searchCom() {
search_com() {
getAllData({
areaName: this.search_company === "" ? "宁波" : this.search_company,
})
.then((res) => {
//
this.company_tree_data = res.data;
console.log("this.company_tree_data", this.company_tree_data);
})
.catch((err) => {
console.log("err", err);
this.$message.warning("查询失败,请输入正确查询条件");
this.company_tree_data = ""; //
});
},
handle_node_click(data) {
console.log("data123", data);
// List
//
// this.searchBox_right_text.company_types = [];
// this.searchBox_left_text.company_types = [];
//
this.only_params = { this.only_params = {
pageSize: 5, areaName: this.searchCompany,
pageNum: 1,
companyId: data.subAreaCode, //
// deviceVideoSubType: "1,2,3,4,5,6,7,8,9",
}; };
this.$refs.searchBox.clear_search_list(); getAllData(this.only_params).then((res) => {
getVideoList(this.only_params).then((res) => { //
console.log("resVideoList", res.rows); this.companyTreeData = res.data;
this.push_table_data = res; console.log("this.companyTreeData", this.companyTreeData);
this.push_data_to_table(this.push_table_data,this.only_params,true);
}); });
}, },
push_data_to_table(data,params,flag) { handleNodeClick(data) {
this.$refs.equipmentTable.obtain_table_data(data,params,flag); console.log("data123", data);
// List
this.searchBox_right_text.company_types = []; //
this.searchBox_left_text.company_types = [];
if (this.obtain_types === "" || this.obtain_types === "1") {
//
this.only_params = {
pageSize: 4,
pageNum: 1,
company_id: data.subAreaCode, //
deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
};
getVideoList(this.only_params).then((res) => {
console.log("resVideoList", res.rows);
// res.row
this.pushTableData = res.rows;
});
} else if (this.obtain_types === "2") {
//
this.only_params = {
pageSize: 4,
pageNum: 1,
company_id: data.subAreaCode, //
devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
};
getPerceptionList(this.only_params).then((res) => {
if (res.code === 200) {
console.log("resVideoList", res.rows);
// res.row
this.pushTableData = res.rows;
}
});
}
},
clearList(num) {
console.log("num", num);
if (num === "1") {
this.searchBox_right_text.company_types = [];
} else if (num === "2") {
this.searchBox_left_text.company_types = [];
}
},
backTypes(num) {
console.log("num0000", num);
this.obtain_types = num;
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* card统一样式 */ /* card统一样式 */
.el-card.box-card.is-always-shadow { .el-card.box-card.is-always-shadow {
border: 0px; height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */
height: 88.5vh; /* 控制card布局高度,用于适配 */
position: relative; position: relative;
background: url("~@/assets/companyFile/22136.png") no-repeat !important;
background-size: 100% 100% !important;
} }
/* card统一样式 */ /* card统一样式 */
/deep/.el-card__header { /deep/.el-card__header {
@ -165,153 +252,190 @@ export default {
} }
} }
} }
.cardBody { .main {
display: flex; height: 100%;
justify-content: space-between; .el-card.box-card.is-always-shadow {
.left_tree { background: url("~@/assets/companyFile/22136.png") no-repeat !important;
width: 20vw; background-size: 100% 100% !important;
height: 78vh; border: 0px;
border: 0.1px solid #485f6c; }
background: linear-gradient(#314241, #1b2929, #121e1d); .cardBody {
.left_search { width: 100%;
display: flex; display: flex;
margin-top: 5%; height: 80vh;
margin-left: 5%; /* 左侧 */
width: 90%; .cardBodyLeft {
height: 40px; width: 25%;
.left_search_input ::v-deep { height: 75vh;
/* 查询框 */ background: rgba(23, 36, 36, 0.4);
width: 87%; border: 0.5px solid #485f6c;
.el-input__inner { border-radius: 4px;
border-radius: 4px 0px 0px 4px; .cardBodyLeft_search {
background: #3c4b4a; display: flex;
color: #fff; margin-top: 5%;
margin-left: 5%;
width: 90%;
height: 40px;
.cardBodyLeft_search_input ::v-deep {
/* 查询框 */
width: 90%;
.el-input__inner {
border-radius: 4px 0px 0px 4px;
background: #3c4b4a;
color: #fff;
}
/* 查询框点击颜色变化 */
.el-input__inner:focus,
.el-input__inner:hover {
border-color: #1b3736;
}
} }
/* 查询框点击颜色变化 */ .cardBodyLeft_search_button {
.el-input__inner:focus, width: 10%;
.el-input__inner:hover { height: 100%;
border-color: #1b3736; border-radius: 0px 4px 4px 0px;
background: #0e3936;
text-align: center;
font-size: 28px;
cursor: pointer;
.el-icon-search {
color: #fff;
padding: 12% 0;
}
} }
} .cardBodyLeft_search_button:focus,
.left_search_button { .cardBodyLeft_search_button:hover {
width: 13%; /* 放大镜点击特效 */
height: 100%; background: #126a58;
border-radius: 0px 4px 4px 0px;
background: #0e3936;
text-align: center;
font-size: 28px;
cursor: pointer;
.el-icon-search {
color: #fff;
padding: 12% 0;
} }
} }
.left_search_button:focus, .cardBodyLeft_footer {
.left_search_button:hover { width: 90%;
/* 放大镜点击特效 */ margin-left: 5%;
background: #126a58; margin-top: 3vh;
} height: 69vh;
} .el-tree {
.cardBodyLeft_footer { /* 树形数据过长添加滚动条 */
width: 90%; height: 65vh;
margin-left: 5%; overflow: auto;
margin-top: 3vh; // box-shadow: 5px 5px 10px #126a58;
height: 69vh; border-radius: 4px;
.el-tree { background: #293738;
/* 树形数据过长添加滚动条 */ color: #fff !important;
height: 65vh; /deep/.el-tree-node__content {
overflow: auto; height: 50px;
// box-shadow: 5px 5px 10px #126a58; }
border-radius: 4px; .el-tree-node__label.node-label {
// background: #293738; display: flex;
background: rgba(0, 0, 0, 0); font-size: 18px;
border: 0.1px solid #485f6c; }
color: #fff !important; /* 去掉树形数据前面的三角形 */
/deep/.el-tree-node__content { /deep/.el-icon-caret-right:before {
height: 50px; content: "";
}
.node-label {
/* 树形数据横向过长添加展开 */
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* hover节点时的背景颜色 */
::v-deep .el-tree-node__content:hover {
background: #495461;
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
/* 节点选中的背景颜色 */
::v-deep .el-tree-node:focus > .el-tree-node__content {
background: #495461;
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
} }
.el-tree-node__label.node-label { //
display: flex; .el-tree /deep/ .el-icon-caret-right:before {
font-size: 16px; background: url("~@/assets/companyFile/add.png") no-repeat;
content: "";
display: block;
width: 23px;
height: 23px;
font-size: 23px;
background-size: 23px;
} }
/* 去掉树形数据前面的三角形 */ //
/deep/.el-icon-caret-right:before { .el-tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("~@/assets/companyFile/add.png") no-repeat;
content: ""; content: "";
display: block;
width: 23px;
height: 23px;
font-size: 23px;
background-size: 23px;
} }
.node-label { // minus
/* 树形数据横向过长添加展开 */ .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
width: 100%; background: url("~@/assets/companyFile/minus.png") no-repeat;
overflow: hidden; content: "";
text-overflow: ellipsis; display: block;
white-space: nowrap; width: 23px;
height: 23px;
font-size: 23px;
background-size: 23px;
} }
/* hover节点时的背景颜色 */ .el-tree::-webkit-scrollbar {
::v-deep .el-tree-node__content:hover { width: 9px;
background: #495461; background-color: #5e666a;
color: #fff; border-radius: 4px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
/* 节点选中的背景颜色 */ .el-tree::-webkit-scrollbar-thumb {
::v-deep .el-tree-node:focus > .el-tree-node__content { width: 8px;
background: #495461; background-color: #3c4b4a;
color: #fff; border-radius: 4px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
} }
} }
// }
.el-tree /deep/ .el-icon-caret-right:before { /* 竖分割线 */
background: url("~@/assets/companyFile/add.png") no-repeat; .el-divider.el-divider--vertical {
content: ""; opacity: 0;
display: block; margin-left: 13px;
width: 23px; height: 100%;
height: 23px; }
font-size: 23px; /* 右侧 */
background-size: 23px; .cardBodyRight {
} p {
// margin-left: 10px;
.el-tree height: 18px;
/deep/ color: #fff;
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before { font-size: 18px;
background: url("~@/assets/companyFile/add.png") no-repeat; text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
content: "";
display: block;
width: 23px;
height: 23px;
font-size: 23px;
background-size: 23px;
}
// minus
.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
background: url("~@/assets/companyFile/minus.png") no-repeat;
content: "";
display: block;
width: 23px;
height: 23px;
font-size: 23px;
background-size: 23px;
}
.el-tree::-webkit-scrollbar {
width: 9px;
background-color: #5e666a;
border-radius: 4px;
} }
.el-tree::-webkit-scrollbar-thumb { width: 74%;
width: 8px; height: 75vh;
background-color: #3c4b4a; border-radius: 4px;
border-radius: 4px; background: rgba(31, 45, 49, 0.4);
border: 0.5px solid #485f6c;
.cardBodyRight_search {
display: flex;
justify-content: space-evenly;
width: 63vw;
height: 20vh;
.video {
width: 48%;
height: 100%;
background: #3b5153;
border-radius: 4px;
}
.intelligence {
width: 48%;
height: 100%;
background: #3b5153;
border-radius: 4px;
}
} }
} }
} }
.right {
width: 64vw;
height: 78vh;
// border: 0.1px solid #485f6c;
.right_table {
margin-top: 1vh;
width: 64vw;
height: 52vh;
// border: 0.1px solid #485f6c;
}
}
} }
</style> </style>
Loading…
Cancel
Save