添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/views/layout/components/Main/index.vue

@@ -1,15 +1,432 @@
<template>
  <el-main>
    <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: '轨迹分析(渣土车)',
              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>
</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>