| | |
| | | <template> |
| | | <div> |
| | | <!-- 侧边导航栏 --> |
| | | <el-aside width="200px"> |
| | | <h2 class="siderbar-title">遂昌执法平台</h2> |
| | | <el-scrollbar> |
| | | <!-- 路由 --> |
| | | <el-menu router class="el-menu-vertical" :default-active="$route.path" > |
| | | <!-- 系统设置模块 --> |
| | | <el-submenu index="/home/system" class="firstMenu"> |
| | | <template slot="title"> |
| | | <!-- <i class="el-icon-reading"></i> --> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon icon-class="system"></svg-icon> |
| | | </span> |
| | | <span class="fisrtSpan">系统设置</span> |
| | | </template> |
| | | <!-- 基本设置 --> |
| | | <el-submenu index="/home/system/userSetting" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">基本设置</span> |
| | | </template> |
| | | <!-- 用户管理 --> |
| | | <el-menu-item index="/home/system/userSetting/user">用户管理</el-menu-item> |
| | | <!-- 角色管理 --> |
| | | <el-menu-item index="/home/system/userSetting/role">角色管理</el-menu-item> |
| | | <!-- 部门管理 --> |
| | | <el-menu-item index="/home/system/userSetting/department">部门管理</el-menu-item> |
| | | </el-submenu> |
| | | <!-- 平台设置 --> |
| | | <el-submenu index="/home/system/platform" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">门户管理</span> |
| | | </template> |
| | | <el-menu-item index="/home/system/platform/mySetting">自定义菜单</el-menu-item> |
| | | <el-menu-item index="/home/system/platform/portalSetting">logo管理</el-menu-item> |
| | | <el-menu-item index="/home/system/platform/otherInterface">第三方接口管理</el-menu-item> |
| | | </el-submenu> |
| | | <!-- 设备管理 --> |
| | | <el-submenu index="/home/system/device" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">设备管理</span> |
| | | </template> |
| | | <el-menu-item index="/home/system/device/bayonet">卡口设备管理</el-menu-item> |
| | | <el-menu-item index="/home/system/device/point">点位管理</el-menu-item> |
| | | <el-menu-item index="/home/system/device/grid">网格管理</el-menu-item> |
| | | </el-submenu> |
| | | </el-submenu> |
| | | <!-- 运营管理模块 --> |
| | | <el-submenu index="/home/operate" class="firstMenu"> |
| | | <template slot="title"> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon icon-class="operate"></svg-icon> |
| | | </span> |
| | | <span class="fisrtSpan">运营管理</span> |
| | | </template> |
| | | <el-submenu index="/home/operate/baseSetting" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">基础设置</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/baseSetting/violation">违规事项设置</el-menu-item> |
| | | <el-menu-item index="/home/operate/baseSetting/illegalBuild">违建事项设置</el-menu-item> |
| | | <!-- <el-menu-item index="/home/operate/baseSetting/threepack">门前三包设置</el-menu-item> --> |
| | | </el-submenu> |
| | | <el-submenu index="/home/operate/disposal" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">事项处理管理</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/casepool/pool">案件池</el-menu-item> |
| | | <el-menu-item index="/home/operate/casepool/escalation">上报管理</el-menu-item> |
| | | <el-menu-item index="/home/operate/casepool/dispatch">调度管理</el-menu-item> |
| | | <el-menu-item index="/home/operate/casepool/learn">再学习管理</el-menu-item> |
| | | <el-menu-item index="/home/operate/casepool/notDeal">暂不处理</el-menu-item> |
| | | </el-submenu> |
| | | <el-menu-item index="/home/operate/management">审核管理</el-menu-item> |
| | | <el-menu-item index="/home/operate/myWait">我的待办</el-menu-item> |
| | | <el-submenu index="/home/operate/rectification" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">专项整治</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/rectification/taskList">任务列表</el-menu-item> |
| | | <el-menu-item index="/home/operate/rectification/surveyList">普查列表</el-menu-item> |
| | | <el-menu-item index="/home/operate/rectification/renovationList">整治列表</el-menu-item> |
| | | </el-submenu> |
| | | <el-menu-item index="/home/operate/lawEnforcement">巡查执法</el-menu-item> |
| | | <el-menu-item index="/home/operate/dasds">案卷查询</el-menu-item> |
| | | <el-submenu index="/home/operate/fivepack" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">门前五包处置管理</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/fivepack/threepackage">门前三包</el-menu-item> |
| | | <el-menu-item index="/home/operate/fivepack/shop">店铺管理</el-menu-item> |
| | | </el-submenu> |
| | | <el-menu-item index="/home/operate/dasdas">算法模型管理</el-menu-item> |
| | | <el-submenu index="/home/operate/car" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">车辆管理</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/car/carIndex">车辆管理</el-menu-item> |
| | | <el-menu-item index="/home/operate/car/lawTrajectory">轨迹分析(执法车)</el-menu-item> |
| | | <el-menu-item index="/home/operate/car/soilTrajectory">轨迹分析(渣土车)</el-menu-item> |
| | | </el-submenu> |
| | | <el-menu-item index="/home/operate">图片管理</el-menu-item> |
| | | <el-menu-item index="/home/operate">视频管理</el-menu-item> |
| | | <el-submenu index="/home/operate/message" class="secondMenu"> |
| | | <template slot="title"> |
| | | <span class="secondSpan">消息管理</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/message/messageIndex">消息管理</el-menu-item> |
| | | <el-menu-item index="/home/operate/message/mycontrol">栏目管理</el-menu-item> |
| | | </el-submenu> |
| | | <el-menu-item index="/home/operate">短信管理</el-menu-item> |
| | | <el-menu-item index="/home/operate/log">日志管理</el-menu-item> |
| | | </el-submenu> |
| | | <!-- 视频巡查模块 --> |
| | | <el-submenu index="/home/video" class="firstMenu"> |
| | | <template slot="title"> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon icon-class="video"></svg-icon> |
| | | </span> |
| | | <span slot="title" class="fisrtSpan">视频巡查</span> |
| | | </template> |
| | | <el-menu-item index="/home/video">视频巡查</el-menu-item> |
| | | </el-submenu> |
| | | <!-- 油烟信息查询模块 --> |
| | | <el-submenu index="/home/lampblack" class="firstMenu"> |
| | | <template slot="title"> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon icon-class="intelligence"></svg-icon> |
| | | </span> |
| | | <span class="fisrtSpan">油烟信息查询</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/add">预警研判</el-menu-item> |
| | | <el-menu-item index="/home/operate">违规检索</el-menu-item> |
| | | <el-menu-item index="/home/operate">趋势分析</el-menu-item> |
| | | <el-menu-item index="/home/operate">数据统计</el-menu-item> |
| | | <el-menu-item index="/home/operate">运行报告</el-menu-item> |
| | | </el-submenu> |
| | | <!-- 执法管理模块 --> |
| | | <el-submenu index="/home/law" class="firstMenu"> |
| | | <template slot="title"> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon icon-class="intelligence"></svg-icon> |
| | | </span> |
| | | <span class="fisrtSpan">执法管理</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/add">预警研判</el-menu-item> |
| | | <el-menu-item index="/home/operate">违规检索</el-menu-item> |
| | | <el-menu-item index="/home/operate">趋势分析</el-menu-item> |
| | | <el-menu-item index="/home/operate">数据统计</el-menu-item> |
| | | <el-menu-item index="/home/operate">运行报告</el-menu-item> |
| | | </el-submenu> |
| | | <!-- 智能巡查模块 --> |
| | | <el-submenu index="/home/intellect" class="firstMenu"> |
| | | <template slot="title"> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon icon-class="intelligence"></svg-icon> |
| | | </span> |
| | | <span class="fisrtSpan">智能巡查</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/add">预警研判</el-menu-item> |
| | | <el-menu-item index="/home/operate">违规检索</el-menu-item> |
| | | <el-menu-item index="/home/operate">趋势分析</el-menu-item> |
| | | <el-menu-item index="/home/operate">数据统计</el-menu-item> |
| | | <el-menu-item index="/home/operate">运行报告</el-menu-item> |
| | | </el-submenu> |
| | | <!-- 平台基本信息 --> |
| | | <el-submenu index="/home/info" class="firstMenu"> |
| | | <template slot="title"> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon icon-class="intelligence"></svg-icon> |
| | | </span> |
| | | <span class="fisrtSpan">平台基本信息</span> |
| | | </template> |
| | | <el-menu-item index="/home/operate/add">预警研判</el-menu-item> |
| | | <el-menu-item index="/home/operate">违规检索</el-menu-item> |
| | | <el-menu-item index="/home/operate">趋势分析</el-menu-item> |
| | | <el-menu-item index="/home/operate">数据统计</el-menu-item> |
| | | <el-menu-item index="/home/operate">运行报告</el-menu-item> |
| | | </el-submenu> |
| | | </el-menu> |
| | | </el-scrollbar> |
| | | </el-aside> |
| | | </div> |
| | | <div> |
| | | <!-- 侧边导航栏 --> |
| | | <el-aside width="200px"> |
| | | <h2 class="siderbar-title" @click="toHome()">遂昌执法平台</h2> |
| | | <el-scrollbar> |
| | | <!-- 路由 --> |
| | | <el-menu |
| | | router |
| | | class="el-menu-vertical" |
| | | :default-active="$route.path.name" |
| | | @select="handleSelect" |
| | | > |
| | | <el-submenu |
| | | :index="String(menu.id)" |
| | | v-for="menu in menuList" |
| | | :key="menu.id" |
| | | class="firstMenu" |
| | | > |
| | | <template slot="title"> |
| | | <span slot="prefix" class="icon-padding fisrtSpan"> |
| | | <svg-icon |
| | | class="icon-title" |
| | | v-bind:class="menu.icon" |
| | | :icon-class="menu.icon" |
| | | ></svg-icon> |
| | | </span> |
| | | <span class="fisrtSpan">{{ menu.title }}</span> |
| | | </template> |
| | | <template v-if="menu.menuVoArrayList.length > 0"> |
| | | <template |
| | | v-for="secondMenu in menu.menuVoArrayList" |
| | | > |
| | | <el-submenu |
| | | :key="secondMenu.id" |
| | | v-if="secondMenu.menuVoArrayList.length > 0" |
| | | :index=" |
| | | secondMenu.url |
| | | ? secondMenu.url |
| | | : secondMenu.id.toString() |
| | | " |
| | | class="secondMenu" |
| | | :class=" |
| | | secondMenu.menuVoArrayList.length > 0 |
| | | ? 'is-Active' |
| | | : 'none-Active' |
| | | " |
| | | > |
| | | <template slot="title"> |
| | | <span class="secondSpan">{{ |
| | | secondMenu.title |
| | | }}</span> |
| | | </template> |
| | | <el-menu-item |
| | | v-for="thirdMenu in secondMenu.menuVoArrayList" |
| | | :key="thirdMenu.id" |
| | | :index="`${thirdMenu.id}`" |
| | | :route="{ name: thirdMenu.url }" |
| | | v-if="thirdMenu.id != '65'" |
| | | > |
| | | <template> |
| | | {{ thirdMenu.title }} |
| | | </template></el-menu-item |
| | | > |
| | | </el-submenu> |
| | | <el-menu-item |
| | | v-else |
| | | :index="`${secondMenu.id}`" |
| | | :route="{ name: secondMenu.url }" |
| | | >{{ secondMenu.title }}</el-menu-item |
| | | > |
| | | </template> |
| | | </template> |
| | | <el-menu-item |
| | | v-else |
| | | :key="menu.id" |
| | | :index="`${menu.id}`" |
| | | :route="{ name: menu.url }" |
| | | >{{ menu.title }}</el-menu-item |
| | | > |
| | | </el-submenu> |
| | | </el-menu> |
| | | </el-scrollbar> |
| | | </el-aside> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data(){ |
| | | return{ |
| | | import users from "@/api/users"; |
| | | import router from "@/router"; |
| | | |
| | | } |
| | | }, |
| | | created(){ |
| | | // this.getMenuList(); |
| | | }, |
| | | methods:{ |
| | | // 获取菜单列表 |
| | | getMenuList(){ |
| | | let arr; |
| | | this.$axios({ |
| | | method:'get', |
| | | url:'sccg/system/portal/menu/search_myself' |
| | | }) |
| | | .then(res=>{ |
| | | console.log(res); |
| | | }) |
| | | } |
| | | } |
| | | export default { |
| | | data() { |
| | | return { |
| | | menuList: [], |
| | | isActive: '' |
| | | }; |
| | | }, |
| | | created() { |
| | | this.loadMenu(); |
| | | }, |
| | | watch: { |
| | | $route() { |
| | | this.handleSelect(this.$route.fullPath) |
| | | }, |
| | | '$route.path'(toPath, fromPath) { |
| | | this.handleSelect(toPath) |
| | | this.$router.push({ path: toPath }) |
| | | }, |
| | | }, |
| | | |
| | | methods: { |
| | | handleSelect(path) { |
| | | this.isActive = path |
| | | }, |
| | | loadMenu() { |
| | | const userName = sessionStorage.getItem('name'); |
| | | users.getMenu({ name: userName }) |
| | | .then(res => { |
| | | this.menuList = res.menus; |
| | | sessionStorage.setItem('user', JSON.stringify(res)); |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | }, |
| | | toHome() { |
| | | router.push("/home") |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scpoed> |
| | | .icon-padding { |
| | | padding-right: 10px; |
| | | padding-right: 10px; |
| | | .icon-title { |
| | | width: 36px; |
| | | height: 36px; |
| | | } |
| | | } |
| | | |
| | | .smoke { |
| | | padding: 5px; |
| | | } |
| | | .el-aside { |
| | | background: #07162e; |
| | | color: #e9eef3; |
| | | text-align: center; |
| | | box-sizing: border-box; |
| | | position: relative; |
| | | |
| | | // 固定标题 |
| | | .siderbar-title { |
| | | position: fixed; |
| | | background: #313350; |
| | | color: #e9eef3; |
| | | text-align: center; |
| | | margin: 0; |
| | | font-size: 26px; |
| | | width: 200px; |
| | | line-height: 66px; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 999; |
| | | } |
| | | |
| | | .el-scrollbar { |
| | | height: calc(100vh - 66px); |
| | | margin-top: 66px; |
| | | box-sizing: border-box; |
| | | |
| | | .el-menu { |
| | | background: linear-gradient(#07162e, #0f2b56); |
| | | border: 0; |
| | | |
| | | .firstMenu { |
| | | background: #07162e; |
| | | text-align: left; |
| | | |
| | | &:hover>.el-submenu__title { |
| | | background-color: #092c4a; |
| | | } |
| | | |
| | | &:hover .fisrtSpan { |
| | | color: #22d3eb; |
| | | } |
| | | |
| | | span, |
| | | span { |
| | | color: #e9eef3; |
| | | } |
| | | |
| | | .el-menu-item { |
| | | color: #e9eef3; |
| | | background-color: #07162e; |
| | | } |
| | | |
| | | .el-menu-item:hover { |
| | | background-color: #092c4a; |
| | | color: #22d3eb; |
| | | } |
| | | |
| | | .is-active { |
| | | background-color: #07162e; |
| | | color: #22d3eb; |
| | | } |
| | | } |
| | | |
| | | .secondMenu { |
| | | &:hover>.el-submenu__title { |
| | | background-color: #092c4a; |
| | | } |
| | | |
| | | &:hover .secondSpan { |
| | | color: #22d3eb; |
| | | } |
| | | } |
| | | |
| | | .thirdMenu { |
| | | &:hover>.el-submenu__title { |
| | | background-color: #092c4a; |
| | | } |
| | | |
| | | &:hover .thirdSpan { |
| | | color: #22d3eb; |
| | | } |
| | | } |
| | | |
| | | .is-active { |
| | | background-color: #092c4a; |
| | | } |
| | | position: relative; |
| | | // 固定标题 |
| | | .siderbar-title { |
| | | position: fixed; |
| | | text-align: center; |
| | | margin: 0; |
| | | font-size: 26px; |
| | | width: 200px; |
| | | line-height: 66px; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 999; |
| | | cursor: pointer; |
| | | } |
| | | .el-scrollbar { |
| | | height: calc(100vh - 66px); |
| | | margin-top: 66px; |
| | | box-sizing: border-box; |
| | | .el-menu { |
| | | background: linear-gradient(#313350, #0f2b56); |
| | | border: 0; |
| | | font-size: 16px; |
| | | .is-opened { |
| | | .fisrtSpan { |
| | | color: #22d3eb; |
| | | } |
| | | } |
| | | .firstMenu { |
| | | background: #313350; |
| | | text-align: left; |
| | | //border-bottom:1px solid #ccc ; |
| | | &:hover > .el-submenu__title { |
| | | background-color: #092c4a; |
| | | } |
| | | &:hover .fisrtSpan { |
| | | color: #22d3eb; |
| | | } |
| | | span, |
| | | span { |
| | | color: #e9eef3; |
| | | font-size: 16px; |
| | | } |
| | | .el-menu { |
| | | .is-active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | .is-Active { |
| | | background-color: #092c4a; |
| | | color: #fff; |
| | | } |
| | | } |
| | | .el-menu-item { |
| | | color: #e9eef3; |
| | | background-color: #313350; |
| | | font-size: 16px; |
| | | // border-bottom: 0.5px solid #7c7979; |
| | | } |
| | | .el-menu-item:hover { |
| | | background-color: #409eff; |
| | | color: #22d3eb; |
| | | } |
| | | .is-opened { |
| | | .secondSpan { |
| | | color: #22d3eb; |
| | | } |
| | | } |
| | | .secondMenu { |
| | | //border-bottom:1px solid #ccc ; |
| | | .is-active { |
| | | background-color: #409eff; |
| | | color: #22d3eb; |
| | | } |
| | | } |
| | | } |
| | | .secondMenu { |
| | | &:hover > .el-submenu__title { |
| | | background-color: #092c4a; |
| | | } |
| | | .secondSpan { |
| | | } |
| | | &:hover .secondSpan { |
| | | color: #22d3eb; |
| | | } |
| | | .is-opened { |
| | | .el-submenu__title { |
| | | background-color: #fff; |
| | | } |
| | | } |
| | | .is-active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | .thirdMenu { |
| | | &:hover > .el-submenu__title { |
| | | background-color: #092c4a; |
| | | } |
| | | |
| | | .el-scrollbar__wrap { |
| | | overflow-x: hidden; |
| | | &:hover .thirdSpan { |
| | | color: #22d3eb; |
| | | } |
| | | } |
| | | |
| | | .is-active { |
| | | background-color: #092c4a; |
| | | } |
| | | } |
| | | .el-scrollbar__wrap { |
| | | overflow-x: hidden; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |