Merge branch 'master' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb
xuhaoyun
2 years ago
commit
0f5ed005e3
|
After Width: | Height: | Size: 488 KiB |
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<!-- 企业名单 -->
|
||||
<div>456</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "companyList",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<!-- 系统管理左侧导航菜单 -->
|
||||
<el-menu
|
||||
default-active="this.$route.path"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
:collapse="isCollapse"
|
||||
>
|
||||
<!-- background-color="#f5f2e9"
|
||||
text-color="#5aa4ae" -->
|
||||
<!-- 一级导航 -->
|
||||
<el-menu-item
|
||||
@click="clickMenu(item)"
|
||||
v-for="item in menuList"
|
||||
:key="item.name"
|
||||
:index="item.name"
|
||||
>
|
||||
<i :class="`el-icon-${item.icon}`"></i>
|
||||
<span slot="title">{{ item.label }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "LeftNav",
|
||||
data() {
|
||||
return {
|
||||
isCollapse: false,
|
||||
menu: [
|
||||
// 导航数组
|
||||
{
|
||||
path: "/safeIndex",
|
||||
name: "safeIndex",
|
||||
label: "平安指数",
|
||||
icon: "folder-checked",
|
||||
},
|
||||
{
|
||||
path: "/companyScore",
|
||||
name: "companyScore",
|
||||
label: "企业赋分",
|
||||
icon: "folder-checked",
|
||||
},
|
||||
{
|
||||
path: "/companyList",
|
||||
name: "companyList",
|
||||
label: "企业名单",
|
||||
icon: "folder-checked",
|
||||
},
|
||||
{
|
||||
path: "/correlationEquipment",
|
||||
name: "correlationEquipment",
|
||||
label: "关联设备",
|
||||
icon: "folder-checked",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
menuList() {
|
||||
// 一级菜单导航
|
||||
return this.menu.filter((item) => !item.children);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 点击跳转路由
|
||||
clickMenu(val) {
|
||||
this.$router.push({
|
||||
name: val.name,
|
||||
});
|
||||
},
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 100%; /* 保持和大的aside同宽 */
|
||||
min-height: 98%; /* 固定侧边导航栏高度 */
|
||||
background: url("~@/assets/companyFile/导航背景.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.el-menu-vertical-demo.el-menu {
|
||||
.el-menu-item {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.el-menu-item:focus,
|
||||
.el-menu-item:hover {
|
||||
/* 导航选项点击触碰效果 */
|
||||
background: #daf4f6;
|
||||
color: #5a5e66;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<!-- 新建或者修改 -->
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
:title="dialogTitle"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
width="970px"
|
||||
>
|
||||
<div class="form_body">
|
||||
<!-- 设备基础信息表单 -->
|
||||
<div class="equipment_form">
|
||||
<p>设备基础信息</p>
|
||||
<el-form ref="equipmentForm" :model="equipmentForm">
|
||||
<el-form-item label="企业名称">
|
||||
<el-select
|
||||
v-model="equipmentForm.company.villageName"
|
||||
placeholder="请选择企业"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in equipmentForm.company"
|
||||
:key="item.villageCode"
|
||||
:label="item.villageName"
|
||||
:value="item.villageCode"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称">
|
||||
<el-input v-model="equipmentForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备IP">
|
||||
<el-input v-model="equipmentForm.ip"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备大类">
|
||||
<el-input v-model="equipmentForm.big"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备小类">
|
||||
<el-input v-model="equipmentForm.small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号">
|
||||
<el-input v-model="equipmentForm.passUser"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码">
|
||||
<el-input v-model="equipmentForm.passNum"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<!-- 视频通道信息表单 -->
|
||||
<div class="video_form">
|
||||
<p>视频通道信息</p>
|
||||
<el-form ref="videoForm" :model="videoForm">
|
||||
<el-form-item label="通道编码">
|
||||
<el-input v-model="videoForm.channelCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="NVR编码">
|
||||
<el-input v-model="videoForm.NVRCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="通道号">
|
||||
<el-input v-model="videoForm.channelNum"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="RTSP流地址">
|
||||
<el-input v-model="videoForm.address"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<!-- 设备位置信息表单 -->
|
||||
<div class="equipment_address_form">
|
||||
<p>设备位置信息</p>
|
||||
<el-form ref="addressForm" :model="addressForm">
|
||||
<el-form-item label="设备经度">
|
||||
<el-input v-model="addressForm.longitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备纬度">
|
||||
<el-input v-model="addressForm.latitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="U3D经度">
|
||||
<el-input v-model="addressForm.U3D_longitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="U3D纬度">
|
||||
<el-input v-model="addressForm.U3D_latitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备高度">
|
||||
<el-input v-model="addressForm.equipemnt_hight"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="U3D高度">
|
||||
<el-input v-model="addressForm.U3D_hight"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备方位">
|
||||
<el-select
|
||||
v-model="addressForm.equipment_orientation.orientationCode"
|
||||
placeholder="请选择设备方位"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in addressForm.equipment_orientation"
|
||||
:key="item.orientationCode"
|
||||
:label="item.orientation"
|
||||
:value="item.orientationCode"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="安装位置">
|
||||
<el-input v-model="addressForm.equipment_position"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<!-- 设备其他信息表单 -->
|
||||
<div class="other_form">
|
||||
<p>设备其他信息</p>
|
||||
<el-form ref="otherForm" :model="otherForm">
|
||||
<el-form-item label="设备品牌">
|
||||
<el-input v-model="otherForm.brand"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备厂家">
|
||||
<el-input v-model="otherForm.manufacturer"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="厂家联系电话">
|
||||
<el-input v-model="otherForm.manufacturer_phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN号">
|
||||
<el-input v-model="otherForm.SN_num"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备MAC">
|
||||
<el-input v-model="otherForm.MAC"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备端口">
|
||||
<el-input v-model="otherForm.port"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="saveFormData">保 存</el-button>
|
||||
<el-button>取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {debounce} from '@/utils/publicMethod_lxy/debounce.js'
|
||||
export default {
|
||||
name: "AddDialog",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dialogTitle: "新建",
|
||||
equipmentForm: {
|
||||
// 设备基础信息表单
|
||||
company: [],
|
||||
},
|
||||
// 视频通道信息表单
|
||||
videoForm: {
|
||||
channelCode: "",
|
||||
NVRCode: "",
|
||||
channelNum: "",
|
||||
address: "",
|
||||
},
|
||||
// 设备位置信息表单
|
||||
addressForm: {
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
U3D_longitude: "",
|
||||
U3D_latitude: "",
|
||||
equipemnt_hight: "",
|
||||
U3D_hight: "",
|
||||
equipment_orientation: [],
|
||||
equipment_position: "",
|
||||
},
|
||||
// 设备其他信息表单
|
||||
otherForm: {
|
||||
brand: "",
|
||||
manufacturer: "",
|
||||
manufacturer_phone: "",
|
||||
SN_num: "",
|
||||
MAC: "",
|
||||
port: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.visible = true;
|
||||
},
|
||||
saveFormData:debounce(function() {
|
||||
this.$message.success('232324234')
|
||||
},300)
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-dialog {
|
||||
.el-dialog__title {
|
||||
color: #fff;
|
||||
}
|
||||
background-image: url("~@/assets/companyFile/22136.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 720px;
|
||||
/* 关闭弹窗叉号 */
|
||||
.el-dialog__headerbtn {
|
||||
.el-dialog__close {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
width: 70px;
|
||||
border: 1px solid #4a6072;
|
||||
color: #fff;
|
||||
border-radius: 0px !important;
|
||||
background: #323f43;
|
||||
}
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
color: #34e1b3;
|
||||
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.form_body {
|
||||
height: 600px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.form_body::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #5e666a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.form_body::-webkit-scrollbar-thumb {
|
||||
width: 9px;
|
||||
background-color: #3c4b4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-form {
|
||||
/* 表单内容浮动布局，多行多列表单 */
|
||||
width: 900px !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.el-form-item {
|
||||
/* 表单域名跟input浮动布局 */
|
||||
display: flex;
|
||||
width: 30%;
|
||||
.el-form-item__label {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input__inner {
|
||||
width: 170px;
|
||||
border-radius: 0px;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
/* 查询框点击颜色变化 */
|
||||
.el-input__inner:focus,
|
||||
.el-input__inner:hover {
|
||||
border-color: #1b3736;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<!-- 设备表格 -->
|
||||
<div class="equipment_data">
|
||||
<p>智能感知设备列表</p>
|
||||
<!-- 查询表 -->
|
||||
<div class="equipment_data_search">
|
||||
<el-form :inline="true" :model="search" class="search">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="search.equipemnt"
|
||||
placeholder="输入设备名称搜索"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="search.ip"
|
||||
placeholder="输入IP名称搜索"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSubmit">搜索</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSubmit">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 增删按钮 -->
|
||||
<div class="equipment_data_btn">
|
||||
<el-button
|
||||
v-for="item in btnList"
|
||||
:key="item.value"
|
||||
@click="openDialog(item.value)"
|
||||
>
|
||||
{{ item.label }}</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="equipment_data_table">
|
||||
<el-table
|
||||
:cell-style="{ background: 'revert', 'text-align': 'center' }"
|
||||
:header-cell-style="table_header"
|
||||
:data="tableData"
|
||||
height="305"
|
||||
:highlight-current-row="true"
|
||||
>
|
||||
<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"
|
||||
></el-table-column>
|
||||
<el-table-column prop="operation" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="equipment_data_pagination"></div>
|
||||
<AddDialog ref="addDialog"></AddDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AddDialog from './addDialog';
|
||||
export default {
|
||||
name: "EquipmentTable",
|
||||
components: {
|
||||
AddDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
equipment: "",
|
||||
ip: "",
|
||||
},
|
||||
btnList: [
|
||||
{ value: "1", label: "新增" },
|
||||
{ value: "2", label: "删除" },
|
||||
{ value: "3", label: "导入" },
|
||||
{ value: "4", label: "导出" },
|
||||
],
|
||||
tableColumn: [
|
||||
{ prop: "villageName", label: "设备名称" },
|
||||
{ prop: "passTimeCn", label: "设备类型" },
|
||||
{ prop: "deviceAddress", label: "设备IP" },
|
||||
{ prop: "cameraIp", label: "设备经度" },
|
||||
{ prop: "imageTypeCn", label: "设备维度" },
|
||||
{ prop: "imageTypeC", label: "进出方向" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDialog(num) {
|
||||
console.log(num,'num');
|
||||
if (num === "1") {
|
||||
console.log(num,'num');
|
||||
this.$refs.addDialog.open();
|
||||
}
|
||||
},
|
||||
table_header({ row, rowIndex }) {
|
||||
console.log(row);
|
||||
console.log(rowIndex);
|
||||
return {
|
||||
"text-align": "center",
|
||||
color: "#fff",
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.equipment_data {
|
||||
p {
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.equipment_data_search {
|
||||
margin-left: 12px;
|
||||
/deep/.el-input__inner {
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.el-button {
|
||||
width: 100%;
|
||||
border: 1px solid #4a6072;
|
||||
color: #fff;
|
||||
border-radius: 0px !important;
|
||||
background: #323f43;
|
||||
}
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
border: 1px solid#34e1b3;
|
||||
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.equipment_data_btn {
|
||||
margin-left: 12px;
|
||||
.el-button {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
border: 1px solid #4a6072;
|
||||
color: #fff;
|
||||
border-radius: 0px !important;
|
||||
background: #323f43;
|
||||
}
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
border: 1px solid#34e1b3;
|
||||
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.equipment_data_table {
|
||||
width: calc(100% - 30px);
|
||||
margin-top: 12px;
|
||||
margin-left: 12px;
|
||||
height: 100%;
|
||||
.el-table,
|
||||
.el-table__expanded-cell {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/.el-table {
|
||||
thead {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#284f49,
|
||||
#2f6363,
|
||||
#233b38
|
||||
) !important;
|
||||
& th {
|
||||
background-color: transparent;
|
||||
}
|
||||
& tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
//去除底部白线
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<!-- 关联设备的右侧查询盒子 -->
|
||||
<div class="searchBox_body">
|
||||
<div class="searchBox_img">
|
||||
<div class="searchBox_img_top">
|
||||
<img :src="searchBoxData.src" alt="" />
|
||||
</div>
|
||||
<span>视频监控系统</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="searchBox_btn"
|
||||
v-for="item in searchBoxData.btnList"
|
||||
:key="item.value"
|
||||
>
|
||||
<el-button> {{ item.name }} </el-button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "searchBox",
|
||||
props: {
|
||||
searchBoxData: {},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.searchBox_body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.searchBox_img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 19.8%;
|
||||
height: 53%;
|
||||
padding-top: 8%;
|
||||
padding-left: 3%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
.searchBox_img_top {
|
||||
width: 78%;
|
||||
height: 100%;
|
||||
margin: 0px auto;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-top: 7%;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
width: 70%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
.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;
|
||||
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<!-- 关联设备 -->
|
||||
<div>
|
||||
<div class="main">
|
||||
<!-- 卡片标题 -->
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>关联设备</span>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="cardBody">
|
||||
<!-- 左侧 -->
|
||||
<div class="cardBodyLeft">
|
||||
<!-- 左侧搜索框 -->
|
||||
<div class="cardBodyLeft_search">
|
||||
<el-input
|
||||
class="cardBodyLeft_search_input"
|
||||
placeholder="输入企业名称搜索"
|
||||
v-model="searchCompany"
|
||||
>
|
||||
</el-input>
|
||||
<div class="cardBodyLeft_search_button">
|
||||
<i class="el-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<!-- 公司树数据 -->
|
||||
<div class="cardBodyLeft_footer">
|
||||
<el-tree :data="companyTreeData">
|
||||
<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"
|
||||
></SearchBox>
|
||||
</div>
|
||||
<div class="intelligence">
|
||||
<SearchBox
|
||||
ref="searchBox"
|
||||
:searchBoxData="searchBox_right_text"
|
||||
></SearchBox>
|
||||
</div>
|
||||
</div>
|
||||
<EquipmentTable ref="equipmentTable"></EquipmentTable>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SearchBox from "./components/searchBox.vue";
|
||||
import EquipmentTable from "./components/equipmentTable.vue";
|
||||
export default {
|
||||
name: "correlationEquipment",
|
||||
components: {
|
||||
SearchBox,
|
||||
EquipmentTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchCompany: "", // 公司搜索
|
||||
companyTreeData: [], // 公司单位树
|
||||
searchBox_left_text: {}, // 给子查询盒子传递字符和图片地址
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 给子查询盒子传递字符和图片地址
|
||||
// 左边盒子
|
||||
this.searchBox_left_text = {
|
||||
src: require("@/assets/companyFile/camera.png"),
|
||||
img_text: "视频监控系统",
|
||||
btnList: [
|
||||
{ value: "1", name: "公共区域" },
|
||||
{ value: "2", name: "地下车库" },
|
||||
{ value: "3", name: "全景监控" },
|
||||
{ value: "4", name: "人脸抓拍" },
|
||||
{ value: "5", name: "电梯监控" },
|
||||
{ value: "6", name: "人体测温" },
|
||||
{ value: "7", name: "车辆抓拍" },
|
||||
{ value: "8", name: "人脸门禁" },
|
||||
{ value: "9", name: "高空抛物" },
|
||||
],
|
||||
};
|
||||
// 右边盒子
|
||||
this.searchBox_right_text = {
|
||||
src: require("@/assets/companyFile/intelligence.png"),
|
||||
img_text: "智能感知系统",
|
||||
btnList: [
|
||||
{ value: "1", name: "车辆抓拍" },
|
||||
{ value: "2", name: "人脸抓拍" },
|
||||
{ value: "3", name: "门禁设备" },
|
||||
{ value: "4", name: "高抛抓拍" },
|
||||
{ value: "5", name: "全结构化" },
|
||||
{ value: "6", name: "智能烟感" },
|
||||
{ value: "7", name: "访客机" },
|
||||
{ value: "8", name: "多为设备" },
|
||||
{ value: "9", name: "WIFI设备" },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/* card统一样式 */
|
||||
.el-card.box-card.is-always-shadow {
|
||||
height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */
|
||||
}
|
||||
/* card统一样式 */
|
||||
/deep/.el-card__header {
|
||||
border-bottom: 1px solid #a1a1a1 !important;
|
||||
.clearfix {
|
||||
span {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
height: 100%;
|
||||
.el-card.box-card.is-always-shadow {
|
||||
background: url("~@/assets/companyFile/22136.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
border: 0px;
|
||||
}
|
||||
.cardBody {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: calc(100vh - 215px);
|
||||
/* 左侧 */
|
||||
.cardBodyLeft {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
.cardBodyLeft_search {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
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%;
|
||||
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_search_button:focus,
|
||||
.cardBodyLeft_search_button:hover {
|
||||
/* 放大镜点击特效 */
|
||||
background: #126a58;
|
||||
}
|
||||
}
|
||||
.cardBodyLeft_footer {
|
||||
height: 88%;
|
||||
.el-tree {
|
||||
/* 树形数据过长添加滚动条 */
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
box-shadow: 5px 5px 10px #126a58;
|
||||
border-radius: 4px;
|
||||
background: #293738;
|
||||
color: #fff;
|
||||
.node-label {
|
||||
/* 树形数据横向过长添加展开 */
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* hover节点时的背景颜色 */
|
||||
::v-deep .el-tree-node__content:hover {
|
||||
background: #126a58;
|
||||
color: #fff;
|
||||
}
|
||||
/* 节点选中的背景颜色 */
|
||||
::v-deep .el-tree-node:focus > .el-tree-node__content {
|
||||
background: #1b3736;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 竖分割线 */
|
||||
.el-divider.el-divider--vertical {
|
||||
margin-left: 13px;
|
||||
height: 100%;
|
||||
}
|
||||
/* 右侧 */
|
||||
.cardBodyRight {
|
||||
p {
|
||||
margin-left: 10px;
|
||||
height: 18px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
box-shadow: 5px 5px 10px #126a58;
|
||||
.cardBodyRight_search {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
.video {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
background: #3b5153;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.intelligence {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
background: #2c4046;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<!-- 系统管理 -->
|
||||
<div>
|
||||
<el-container>
|
||||
<el-aside>
|
||||
<LeftNav></LeftNav>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<router-view></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftNav from "./components/leftNav.vue";
|
||||
export default {
|
||||
name: "systemManagement",
|
||||
components: {
|
||||
LeftNav,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-container {
|
||||
height: calc(100vh - 95px); /* 控制整体布局高度,用于适配 */
|
||||
.el-aside {
|
||||
margin-top: 15px; /* 给左上角logo留空间 -> 后面固定都给15px */
|
||||
margin-left: 15px;
|
||||
width: 13% !important; /* 控制侧边导航栏宽度 */
|
||||
height: 100%;
|
||||
}
|
||||
.el-main {
|
||||
margin: 16px 15px 0px 15px; /* 固定都给15px */
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue