| | |
| | | |
| | | <style scoped lang="scss"> |
| | | .layout-navbars-breadcrumb { |
| | | flex: 1; |
| | | height: inherit; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }"> |
| | | <div class="logo"> |
| | | <img @click="toHome" src="../../../assets/menu/companyLogo.png" /> |
| | | <span style="font-size: 32px; color: #409eff; font-weight: bolder; border-left: 2px solid #409eff; padding-left: 10px">{{ systemName }}</span> |
| | | <span>{{ systemName }}</span> |
| | | </div> |
| | | <div style="display: flex; align-items: center; padding-right: 5px"> |
| | | <div @click="backToMenu()" class="backBtn">返回首页</div> |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .layout-navbars-breadcrumb-user { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .logo { |
| | | height: 75%; |
| | | padding: 5px 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | overflow: hidden; |
| | | box-sizing: border-box; |
| | | img { |
| | | height: 100%; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | &-link { |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | white-space: nowrap; |
| | | &-photo { |
| | | width: 25px; |
| | | height: 25px; |
| | | border-radius: 100%; |
| | | } |
| | | } |
| | | &-icon { |
| | | padding: 0 10px; |
| | | cursor: pointer; |
| | | color: var(--next-bg-topBarColor); |
| | | height: 80px; |
| | | line-height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | &:hover { |
| | | background: var(--next-color-user-hover); |
| | | i { |
| | | display: inline-block; |
| | | animation: logoAnimation 0.3s ease-in-out; |
| | | @media screen and (min-width: 1400px) { |
| | | .logo{ |
| | | img { |
| | | height: 100%; |
| | | cursor: pointer; |
| | | } |
| | | span{ |
| | | font-size: 32px; |
| | | color: #409eff; |
| | | font-weight: bolder; |
| | | border-left: 2px solid #409eff; |
| | | padding-left: 10px |
| | | } |
| | | } |
| | | } |
| | | ::v-deep(.el-dropdown) { |
| | | color: var(--next-bg-topBarColor); |
| | | } |
| | | ::v-deep(.el-badge) { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | ::v-deep(.el-badge__content.is-fixed) { |
| | | top: 12px; |
| | | } |
| | | .backBtn { |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | margin-right: 20px; |
| | | |
| | | &:hover { |
| | | color: #409eff; |
| | | font-weight: bolder; |
| | | @media screen and (min-width: 1200px) and (max-width: 1400px) { |
| | | .logo{ |
| | | img { |
| | | height: 90%; |
| | | cursor: pointer; |
| | | } |
| | | span{ |
| | | font-size: 28px; |
| | | color: #409eff; |
| | | font-weight: bolder; |
| | | border-left: 2px solid #409eff; |
| | | padding-left: 10px |
| | | } |
| | | } |
| | | } |
| | | } |
| | | @media screen and (max-width: 1024px) { |
| | | .logo{ |
| | | img { |
| | | width: 60%; |
| | | height: auto; |
| | | cursor: pointer; |
| | | } |
| | | span{ |
| | | font-size: 22px; |
| | | color: #409eff; |
| | | font-weight: bolder; |
| | | border-left: 2px solid #409eff; |
| | | padding-left: 10px |
| | | } |
| | | } |
| | | } |
| | | .layout-navbars-breadcrumb-user { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .logo { |
| | | height: 75%; |
| | | padding: 5px 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | overflow: hidden; |
| | | box-sizing: border-box; |
| | | } |
| | | &-link { |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | white-space: nowrap; |
| | | &-photo { |
| | | width: 25px; |
| | | height: 25px; |
| | | border-radius: 100%; |
| | | } |
| | | } |
| | | &-icon { |
| | | padding: 0 10px; |
| | | cursor: pointer; |
| | | color: var(--next-bg-topBarColor); |
| | | height: 80px; |
| | | line-height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | &:hover { |
| | | background: var(--next-color-user-hover); |
| | | i { |
| | | display: inline-block; |
| | | animation: logoAnimation 0.3s ease-in-out; |
| | | } |
| | | } |
| | | } |
| | | ::v-deep(.el-dropdown) { |
| | | color: var(--next-bg-topBarColor); |
| | | } |
| | | ::v-deep(.el-badge) { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | ::v-deep(.el-badge__content.is-fixed) { |
| | | top: 12px; |
| | | } |
| | | .backBtn { |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | margin-right: 20px; |
| | | |
| | | &:hover { |
| | | color: #409eff; |
| | | font-weight: bolder; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <div class="system-menu-container"> |
| | | <el-card shadow="hover"> |
| | | <div class="system-menu-search mb15"> |
| | | <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()"> |
| | | <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="min-width: 350px" @change="getMenuList()"> |
| | | <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option> |
| | | </el-select> |
| | | <el-button size="default" type="primary" class="ml10" @click="getMenuList"> |
| | |
| | | menuTableData: [], |
| | | projectList: [ |
| | | { id: '1', name: '安全基础信息系统', key: 0 }, |
| | | { id: '2', name: '双重预防系统', key: 1 }, |
| | | { id: '3', name: '特殊作业系统', key: 2 }, |
| | | { id: '4', name: '智能巡检系统', key: 3 }, |
| | | { id: '5', name: '安全风险综合预警预报平台', key: 4 }, |
| | | { id: '2', name: '智能安全双重预防系统', key: 1 }, |
| | | { id: '3', name: '智能安全特殊作业系统', key: 2 }, |
| | | { id: '4', name: '智能安全巡检系统', key: 3 }, |
| | | { id: '5', name: '智能安全风险综合预警预报平台', key: 4 }, |
| | | { id: '6', name: '应急管理系统', key: 5 }, |
| | | { id: '7', name: '目标责任管理系统', key: 6 }, |
| | | { id: '8', name: '事故管理系统', key: 7 }, |
| | | { id: '7', name: '安全目标责任管理系统', key: 6 }, |
| | | { id: '8', name: '安全事故管理系统', key: 7 }, |
| | | { id: '9', name: '设备综合管控系统', key: 8 }, |
| | | { id: '10', name: '安全知识图谱系统', key: 9 }, |
| | | { id: '11', name: '危险化学品全生命周期安全', key: 10 } |
| | | { id: '11', name: '智能安全危险化学品全生命周期管控系统', key: 10 } |
| | | ] |
| | | }); |
| | | // // 获取 vuex 中的路由 |