lukeyan
2 years ago
parent
9b3d2b197b
commit
941b7cbe57
@ -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