@ -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,184 @@
|
||||
<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">
|
||||
<span>设备列表</span>
|
||||
<div class="cardBodyRight_search">
|
||||
<div class="video"></div>
|
||||
<div class="intelligence"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "correlationEquipment",
|
||||
data() {
|
||||
return {
|
||||
searchCompany: "", // 公司搜索
|
||||
companyTreeData: [], // 公司单位树
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/* card统一样式 */
|
||||
.el-card.box-card.is-always-shadow {
|
||||
height: calc(100vh - 158px); /* 控制card布局高度,用于适配 */
|
||||
}
|
||||
/* card统一样式 */
|
||||
/deep/.el-card__header {
|
||||
border-bottom: 1px solid #a1a1a1 !important;
|
||||
.clearfix {
|
||||
span {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
.cardBody {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: calc(100vh - 260px);
|
||||
/* 左侧 */
|
||||
.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;
|
||||
}
|
||||
/* 查询框点击颜色变化 */
|
||||
.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: #1b3736;
|
||||
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: 85%;
|
||||
.el-tree {
|
||||
/* 树形数据过长添加滚动条 */
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
box-shadow: 5px 5px 10px #126a58;
|
||||
border-radius: 4px;
|
||||
.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 {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
background: rgb(230, 223, 236);
|
||||
.cardBodyRight_search {
|
||||
display: flex;
|
||||
justify-content:space-around;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: #1b3736;
|
||||
.video {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
background: #a1a1a1;
|
||||
box-shadow: 5px 5px 10px #126a58;
|
||||
}
|
||||
.intelligence {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
background: #a1a1a1;
|
||||
box-shadow: 5px 5px 10px #126a58;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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: 15% !important; /* 控制侧边导航栏宽度 */
|
||||
height: 100%;
|
||||
}
|
||||
.el-main {
|
||||
margin: 16px 15px 5px 15px; /* 固定都给15px */
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue