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/Main/index.vue | 424 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 420 insertions(+), 4 deletions(-) diff --git a/src/views/layout/components/Main/index.vue b/src/views/layout/components/Main/index.vue index ac1c48f..1ccf301 100644 --- a/src/views/layout/components/Main/index.vue +++ b/src/views/layout/components/Main/index.vue @@ -1,16 +1,432 @@ <template> <el-main> - <NavBar/> - <router-view></router-view> + <!-- <NavBar /> --> + <div class="content"> + <!-- 椤甸潰瀵艰埅鍖哄煙 --> + <div class="page-nav" v-if="navFlag"> + <div class="nav-item" v-for="item in navList" :key="item.id"> + <div class="nav-title"> <svg-icon :icon-class="item.icon" class="color-main"></svg-icon>{{ item.title }}</div> + <div class="nav-child" v-if="item.children && item.children.length!==0"> + <el-link :underline="false" class="child-item" v-for="child in item.children" + @click="handleJump(child.link)" :key="child.id"> + <svg-icon :icon-class="child.icon" class="color-main-child"></svg-icon> + {{ child.label }} + </el-link> + </div> + </div> + </div> + <router-view v-else :key="$route.fullpath"></router-view> + <!-- 搴曢儴鍖哄煙 --> + <!-- <MyFooter/> --> + </div> </el-main> </template> <script> +// import MyFooter from "../Footer" import NavBar from "../NavBar" + export default { name: "Main", - components:{ + components: { + // MyFooter, NavBar + }, + data() { + return { + navFlag: true, + navList: [ + { + id: 13, + title: '杩愯惀绠$悊', + icon:'icon_yunyingguanli', + children: [ + { + id: 14, + label: '杩濊浜嬮」璁剧疆', + link: '/operate/baseSetting/violation', + icon: 'icon_weiguishixiangshezhi' + }, + { + id: 15, + label: '杩濆缓浜嬮」璁剧疆', + link: '/operate/baseSetting/illegalBuild', + icon: 'icon_weijianshixiangshezhi' + }, + { + id: 16, + label: '鎴戠殑寰呭姙', + link: '/operate/myWait', + icon: 'icon_wodedaiban' + }, + { + id: 17, + label: '妗堜欢鏌ヨ', + link: '/operate/viewEvent', + icon: 'icon_anjianchaxun' + }, + { + id: 18, + label: '闂ㄥ墠涓夊寘', + link: '/operate/fivepack/threepackage', + icon: 'icon_menqiansanbao' + }, + { + id: 19, + label: '搴楅摵绠$悊', + link: '/operate/fivepack/shop', + icon: 'icon_dianpuguanli' + }, + { + id: 20, + label: '杞﹁締绠$悊', + link: '/operate/car/carIndex', + icon: 'icon_cheliangguanli' + }, + { + id: 21, + label: '杞ㄨ抗鍒嗘瀽(鎵ф硶杞�)', + link: '/operate/car/lawTrajectory', + icon: 'icon_zhifache' + }, + { + id: 22, + label: '杞ㄨ抗鍒嗘瀽(娓e湡杞�)', + link: '/operate/car/soilTrajectory', + icon: 'icon_zhatuche' + }, + { + id: 23, + label: '鍥剧墖绠$悊', + link: '/operate/images', + icon: 'icon_tupianguanli' + }, + { + id: 24, + label: '瑙嗛绠$悊', + link: '/operate/videoControl', + icon: 'icon_shipinguanli' + }, + { + id: 25, + label: '鏂囦功绠$悊', + link: '/operate/writManagement/writ', + icon: 'icon_wenshuguanli' + }, + { + id: 26, + label: '鏂囦功妯℃澘绠$悊', + link: '/operate/writManagement/writTemplate', + icon: 'icon_wenshumobanguanli' + }, + { + id: 27, + label: '娑堟伅绠$悊', + link: '/operate/message/messageIndex', + icon: 'icon_xiaoxiguanli' + }, { + id: 28, + label: '鏍忕洰绠$悊', + link: '/operate/message/mycontrol', + icon: 'icon_lanmuguanli' + }, + { + id: 29, + label: '鐭俊绠$悊', + link: '/operate/sms/smsIndex', + icon: 'icon_duanxinguanli' + }, { + id: 30, + label: '鐭俊妯℃澘绠$悊', + link: '/operate/sms/smsTemplate', + icon: 'icon_duanxinmobanguanli' + }, + { + id: 31, + label: '鏃ュ織绠$悊', + link: '/operate/log', + icon: 'icon_rizhiguanli' + }, + ] + }, + { + id: 32, + title: '浜嬮」澶勭疆绠$悊', + icon: 'icon_shixiangchuzhiguanli', + children: [ + { + id: 33, + label: '妗堜欢姹�', + link: '/operate/casepool/pool', + icon: 'icon_anjianchi' + }, { + id: 34, + label: '宸蹭笂鎶ュ埌甯�', + link: '/operate/casepool/escalation', + icon: 'icon_yishangbaodaoshi' + }, { + id: 35, + label: '璋冨害绠$悊', + link: '/operate/casepool/dispatch', + icon: 'icon_diaoduguanli' + }, { + id: 36, + label: '鍦ㄥ涔犵鐞�', + link: '/operate/casepool/learn', + icon: 'icon_zaixuexiguanli' + }, { + id: 37, + label: '鏆備笉澶勭悊', + link: '/operate/casepool/notDeal', + icon: 'icon_zanbuchuli' + }, + ] + }, + { + id: 41, + title: '瑙嗛宸℃煡', + icon: 'icon_shipingxuncha', + children: [ + { + id: 42, + label: '瑙嗛宸℃煡', + link: '/video_0', + icon: 'icon_shipinxuncha' + }, + { + id: 80, + label: '100璺棰戝贰鏌�', + link: '/video_1', + icon: 'icon_shipinxuncha' + }, + ] + }, + { + id: 43, + title: '鏅鸿兘宸℃煡', + icon: 'icon_zhinengxuncha', + children: [ + { + id: 44, + label: '棰勮鐮斿垽', + link: '/studyJudge_0', + icon: 'icon_yujingyanpan' + }, + { + id: 81, + label: '100璺璀︾爺鍒�', + link: '/studyJudge_1', + icon: 'icon_yujingyanpan' + }, + { + id: 45, + label: '杩濊妫�绱�', + link: '/illegalSearch', + icon: 'icon_weiguijiansuo' + }, + { + id: 46, + label: '瓒嬪娍鍒嗘瀽', + link: '/trendAnalysis', + icon: 'icon_qushifenxi' + }, + { + id: 47, + label: '杩濈珷缁熻', + link: '/trendAnalysis', + icon: 'icon_weizhangtongji' + }, + { + id: 48, + label: '杩濇硶缁熻', + link: '/typeStatistics', + icon: 'icon_weifatongji' + }, + ] + }, + { + id: 38, + title: '瀹℃牳绠$悊', + icon: 'icon_shenheguanli', + children: [ + { + id: 39, + label: '瀹℃牳绠$悊', + link: '/operate/management/myIndex', + icon: 'icon_shenheguanlileft' + }, + { + id: 40, + label: '鐭俊瀹℃牳绠$悊', + link: '/operate/management/managementMessage', + icon: 'icon_duanxinshenheguanli' + }, + ] + }, + { + id: 1, + title: '绯荤粺璁剧疆', + icon:'icon_xitongshezhi', + children: [ + { + id: 2, + label: '鐢ㄦ埛绠$悊', + link: '/system/userSetting/user', + icon:'icon_yonghuguanli' + }, + { + id: 3, + label: '瑙掕壊绠$悊', + link: '/system/userSetting/role', + icon: 'icon_jiaoseguanli' + }, + { + id: 4, + label: '閮ㄩ棬绠$悊', + link: '/system/userSetting/department', + icon: 'icon_bumenguanli' + }, + { + id: 5, + label: '鑷畾涔夎彍鍗�', + link: '/system/platform/mySetting', + icon: 'icon_zidinyicaidan' + }, + { + id: 6, + label: 'logo绠$悊', + link: '/system/platform/portalSetting', + icon: 'icon_logoguanli' + }, + { + id: 7, + label: '椹鹃┒鑸辩鐞�', + link: '/system/platform/cockpitManage', + icon: 'icon_jiashicangguanli' + }, + { + id: 8, + label: '鍗″彛璁惧绠$悊', + link: '/system/device/bayonet', + icon: 'icon_kakoushebeiguanli' + }, + { + id: 9, + label: '鐐逛綅绠$悊', + link: '/system/device/point', + icon: 'icon_dianweiguanli' + }, + { + id: 10, + label: '缃戞牸绠$悊', + link: '/system/device/grid', + icon: 'icon_wanggeguanli' + }, + { + id: 11, + label: '闊虫煴璁惧绠$悊', + link: '/system/device/loudspeaker', + icon: 'icon_yinzhushebeiguanli' + }, + { + id: 12, + label: '鎵嬫寔璁惧绠$悊', + link: '/system/device/handheldTerminal', + icon: 'icon_shouchishebeiguanli' + }, + ] + } + ] + } + }, + watch: { + '$route.path'(newPath, oldPath) { + newPath === '/home' ? this.navFlag = true : this.navFlag = false + } + }, + created() { + this.$route.path === '/home' ? this.navFlag = true : this.navFlag = false + }, + methods: { + handleJump(url) { + const baseURL = '/home' + // 璺敱璺宠浆 + this.$router.push({path: baseURL + url}) + } } }; -</script> \ No newline at end of file +</script> +<style lang="scss"> +.el-main { + min-width: 1024px; + padding: 0; + .content { + padding: 5px; + height: 100%; + background-color: #F5F9FA; + overflow: auto; + .page-nav { + padding: 40px 100px; + text-align: left; + .nav-item { + line-height: 60px; + .nav-title { + color: #4178FE; + display: flex; + align-items: center; + .color-main{ + width: 30px; + height: 30px; + } + } + .nav-child :hover{ + box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); + transform: translateY(-.08rem); + } + .nav-child { + display: flex; + // justify-content: space-between; + flex-wrap: wrap; + .el-link { + justify-content: flex-start; + padding-left: 30px; + } + .child-item { + .el-link--inner{ + display: flex; + align-items: center; + } + background-color: #fff; + width: 24%; + text-align: left; + margin-bottom: 22px; + margin-right: 1%; + //border: 1px solid #17324c; + color: #4b9bb7; + position: relative; + .color-main-child{ + height: 36px; + width: 36px; + margin-right: 10px; + } + &::after { + //content: ''; + //display: block; + //position: absolute; + //left: 15px; + //height: 8px; + //width: 8px; + //border-radius: 50%; + //background-color: #4b9bb7; + } + } + .child-item :hover{ + box-shadow: none; + transform: none; + } + } + } + } + } +} +</style> -- Gitblit v1.8.0