From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 16 七月 2025 22:39:23 +0800 Subject: [PATCH] 添加时间筛选 --- src/views/layout/components/Menu/index.vue | 542 ++++++++++++++++++++++++----------------------------- 1 files changed, 243 insertions(+), 299 deletions(-) diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue index 7a0c60f..5302c98 100644 --- a/src/views/layout/components/Menu/index.vue +++ b/src/views/layout/components/Menu/index.vue @@ -1,317 +1,261 @@ <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">绗笁鏂规帴鍙g鐞�</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-submenu index="/home/operate/management" class="secondMenu"> - <template slot="title"> - <span class="secondSpan">瀹℃牳绠$悊</span> - </template> - <el-menu-item index="/home/operate/management">瀹℃牳绠$悊</el-menu-item> - <el-menu-item index="/home/operate/management/managementMessage">鐭俊瀹℃牳绠$悊</el-menu-item> - <!-- <el-menu-item index="/home/operate/baseSetting/threepack">闂ㄥ墠涓夊寘璁剧疆</el-menu-item> --> - </el-submenu> - <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">杞ㄨ抗鍒嗘瀽(娓e湡杞�)</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> \ No newline at end of file +</style> -- Gitblit v1.8.0