feat:上报和监管的项目区分

@@ -278,7 +278,7 @@ export default {
       let _this = this
       // 上报请求头修改
       try {
-        var headRes = await axios.post(urlHeader + 'edit', this.dataReport,
+        var headRes = await axios.post('/api' + urlHeader + 'edit', this.dataReport,
           {
             headers: {
               'Authorization': sessionStorage.getItem("token") || ""

+<!--
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-03-06 16:24:39
+-->
 <template>
   <div class="app-wrapper">
     <navbar />
@@ -28,8 +33,9 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/styles/mixin.scss";
+@import "~@/styles/sidebar.scss";
 
 .app-wrapper {
   @include clearfix;

@@ -8,7 +8,7 @@
         <Breadcrumb />
       </div> -->
       <div class="right-menu">
-        <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
+        <!-- <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div> -->
         <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
           <div class="avatar-wrapper">
             <span style="padding-right:10px">{{ name }}</span>
@@ -24,227 +24,227 @@
   </div>
 </template>
 <script>
-  import { mapGetters } from 'vuex'
-  import Breadcrumb from './Breadcrumb'
-  import defaultSettings from '@/settings'
-  export default {
-    components: {
-      Breadcrumb
-    },
-    computed: {
-      ...mapGetters(['sidebar', 'avatar', 'name'])
+import { mapGetters } from 'vuex'
+import Breadcrumb from './Breadcrumb'
+import defaultSettings from '@/settings'
+export default {
+  components: {
+    Breadcrumb
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'avatar', 'name'])
+  },
+  data () {
+    return {
+      title: defaultSettings.title
+    }
+  },
+  methods: {
+    handleDataView () {
+      const { href } = this.$router.resolve('/dataView');
+      window.open(href, '_blank');
     },
-    data () {
-      return {
-        title: defaultSettings.title
-      }
+    themeChange (val) {
+      this.$store.dispatch('app/updateTheme', val)
     },
-    methods: {
-      handleDataView () {
-        const { href } = this.$router.resolve('/dataView');
-        window.open(href, '_blank');
-      },
-      themeChange (val) {
-        this.$store.dispatch('app/updateTheme', val)
-      },
-      handleCommand (command) {
-        if (command == 'a') {
-        } else {
+    handleCommand (command) {
+      if (command == 'a') {
+      } else {
 
-        }
       }
     }
   }
+}
 </script>
 <style lang="scss" scoped>
-  .navbar-con {
-    position: relative;
+.navbar-con {
+  position: relative;
 
-    .logo {
-      color: #fff;
-      font-size: 26px;
-      font-weight: 700;
-    }
+  .logo {
+    color: #fff;
+    font-size: 26px;
+    font-weight: 700;
+  }
+}
+
+.dataView {
+  color: #fff;
+  width: 120px;
+  height: 32px;
+  background: url("../../image/dp.png");
+  background-size: cover;
+  margin-right: 20px;
+}
+
+.NoticeBar {
+  position: absolute;
+  bottom: 0;
+}
+
+.el-dropdown-menu {
+  padding: 0 !important;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 4px 0 0 4px 4px;
+
+  .el-dropdown-menu__item {
+    text-align: center;
+    margin-top: 0 !important;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4a4a4a;
+    width: 140px;
+    height: 36px;
+    line-height: 36px;
   }
 
-  .dataView {
-    color: #fff;
-    width: 120px;
-    height: 32px;
-    background: url("../../image/dp.png");
-    background-size: cover;
-    margin-right: 20px;
+  .el-dropdown-menu__item:nth-child(6) {
+    border-top: 1px solid #ebeef5;
   }
 
-  .NoticeBar {
-    position: absolute;
-    bottom: 0;
+  .popper__arrow {
+    top: -11px !important;
+    left: 110px !important;
+    transform: rotate(0deg) scale(2);
   }
 
-  .el-dropdown-menu {
-    padding: 0 !important;
-    border: 1px solid #ebeef5;
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 4px 0 0 4px 4px;
-
-    .el-dropdown-menu__item {
-      text-align: center;
-      margin-top: 0 !important;
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #4a4a4a;
-      width: 140px;
-      height: 36px;
-      line-height: 36px;
-    }
+  .el-dropdown-menu__item:not(.is-disabled):hover,
+  .el-dropdown-menu__item:focus {
+    background: #f6f7f9;
+    color: #4a4a4a;
+  }
+}
+
+.navbar {
+  height: $headerHeight;
+  overflow: hidden;
+  position: relative;
+  // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
+  // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
+  background: #0d1230;
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+  justify-content: space-between;
+  margin-bottom: 10px;
+
+  .header-logo {
+    width: 300px;
+  }
 
-    .el-dropdown-menu__item:nth-child(6) {
-      border-top: 1px solid #ebeef5;
-    }
+  .backdrop {
+    flex: 1;
+    width: 60%;
+    background-size: 100% 100%;
+    height: $headerHeight;
+    display: flex;
+    align-items: center;
+  }
 
-    .popper__arrow {
-      top: -11px !important;
-      left: 110px !important;
-      transform: rotate(0deg) scale(2);
-    }
+  .hamburger-container {
+    line-height: 43px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
-    .el-dropdown-menu__item:not(.is-disabled):hover,
-    .el-dropdown-menu__item:focus {
-      background: #f6f7f9;
-      color: #4a4a4a;
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
-  .navbar {
-    height: $headerHeight;
-    overflow: hidden;
-    position: relative;
-    // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
-    // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
-    background: #0d1230;
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
     display: flex;
     align-items: center;
-    padding-right: 20px;
-    justify-content: space-between;
-    margin-bottom: 10px;
 
-    .header-logo {
-      width: 300px;
+    .function {
+      margin: 0 15px;
+      cursor: pointer;
     }
 
-    .backdrop {
-      flex: 1;
-      width: 60%;
-      background-size: 100% 100%;
-      height: $headerHeight;
-      display: flex;
-      align-items: center;
+    .shutdown {
+      font-size: 20px;
+      margin-left: 15px;
+      cursor: pointer;
     }
 
-    .hamburger-container {
-      line-height: 43px;
-      height: 100%;
-      float: left;
-      cursor: pointer;
-      transition: background 0.3s;
-      -webkit-tap-highlight-color: transparent;
+    .organization-item {
+      margin-right: 40px;
+      margin-top: -40px !important;
+    }
 
-      &:hover {
-        background: rgba(0, 0, 0, 0.025);
+    .item {
+      margin-right: 40px;
+      margin-top: -20px;
+      line-height: 18.4px;
+      cursor: pointer;
+      position: relative;
+
+      .item-box {
+        position: absolute;
+        top: -5px;
+        left: 3px;
+        width: 100%;
+        min-width: 25px;
+        height: 25px;
+        cursor: pointer;
+        z-index: 100;
       }
     }
 
-    .breadcrumb-container {
-      float: left;
+    &:focus {
+      outline: none;
     }
 
-    .right-menu {
-      float: right;
+    .right-menu-item {
+      display: inline-block;
       height: 100%;
-      line-height: 50px;
-      display: flex;
-      align-items: center;
-
-      .function {
-        margin: 0 15px;
-        cursor: pointer;
-      }
+      font-size: 18px;
+      color: #fff;
+      vertical-align: text-bottom;
 
-      .shutdown {
-        font-size: 20px;
-        margin-left: 15px;
+      &.hover-effect {
         cursor: pointer;
-      }
-
-      .organization-item {
-        margin-right: 40px;
-        margin-top: -40px !important;
-      }
+        transition: background 0.3s;
+        display: flex;
+        align-items: center;
 
-      .item {
-        margin-right: 40px;
-        margin-top: -20px;
-        line-height: 18.4px;
-        cursor: pointer;
-        position: relative;
-
-        .item-box {
-          position: absolute;
-          top: -5px;
-          left: 3px;
-          width: 100%;
-          min-width: 25px;
-          height: 25px;
-          cursor: pointer;
-          z-index: 100;
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
         }
       }
+    }
 
-      &:focus {
-        outline: none;
-      }
+    .avatar-wrapper {
+      position: relative;
+      display: flex;
+      height: 40px;
+      align-items: center;
 
-      .right-menu-item {
-        display: inline-block;
-        height: 100%;
-        font-size: 18px;
-        color: #fff;
-        vertical-align: text-bottom;
-
-        &.hover-effect {
-          cursor: pointer;
-          transition: background 0.3s;
-          display: flex;
-          align-items: center;
-
-          &:hover {
-            background: rgba(0, 0, 0, 0.025);
-          }
-        }
+      .user-avatar {
+        cursor: pointer;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
       }
 
-      .avatar-wrapper {
-        position: relative;
-        display: flex;
-        height: 40px;
-        align-items: center;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 35px;
-          height: 35px;
-          border-radius: 50%;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -15px;
-          top: 17px;
-          font-size: 12px;
-        }
+      .el-icon-caret-bottom {
+        cursor: pointer;
+        position: absolute;
+        right: -15px;
+        top: 17px;
+        font-size: 12px;
       }
     }
   }
+}
 </style>

+<!--
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-03-06 16:18:21
+-->
 <template>
   <div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
         :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
         <!-- 权限菜单 -->
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in permission_routes.slice(3)" :key="route.path" :item="route"
+          :base-path="route.path" />
         <!-- 菜单全部展示 -->
         <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
       </el-menu>
@@ -13,36 +19,38 @@
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
-  import Logo from './Logo'
-  import defaultSettings from '@/settings'
-  import SidebarItem from './SidebarItem'
-  import variables from '@/styles/variables.scss'
-  import { asyncRoutes } from '@/router'
-  export default {
-    components: { SidebarItem, Logo },
-    data () {
-      return {
-        title: defaultSettings.title
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import defaultSettings from '@/settings'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+import { asyncRoutes } from '@/router'
+export default {
+  components: { SidebarItem, Logo },
+  data () {
+    return {
+      title: defaultSettings.title
+    }
+  },
+  created () {
+    console.log(this.permission_routes);
+  },
+  computed: {
+    ...mapGetters(['permission_routes', 'sidebar']),
+    activeMenu () {
+      const route = this.$route
+      const { meta, path } = route
+      if (meta.activeMenu) {
+        return meta.activeMenu
       }
+      return path
     },
-
-    computed: {
-      ...mapGetters(['permission_routes', 'sidebar']),
-      activeMenu () {
-        const route = this.$route
-        const { meta, path } = route
-        if (meta.activeMenu) {
-          return meta.activeMenu
-        }
-        return path
-      },
-      variables () {
-        return variables
-      },
-      asyncRoutes () {
-        return asyncRoutes
-      }
+    variables () {
+      return variables
+    },
+    asyncRoutes () {
+      return asyncRoutes
     }
   }
-</script>
+}
+</script>
\ No newline at end of file

+<!--
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-03-06 16:23:31
+-->
 <template>
-  <div class="app-wrapper">
+  <div class="app-wrapper scWrapper">
     <navbar />
     <div class="main-container">
       <sidebar class="sidebar-container" />
@@ -29,8 +34,9 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import "~@/styles/mixin.scss";
+@import '~@/styles/sbSidebar.scss';
 
 .app-wrapper {
   @include clearfix;

@@ -2,7 +2,7 @@
 @import './mixin.scss';
 @import './transition.scss';
 @import './element-ui.scss';
-@import './sidebar.scss';
+// @import './sidebar.scss';
 
 /* CSS 初始化 */
 html,

+.scWrapper {
+  .main-container {
+    width: 100%;
+    height: calc(100% - 84px);
+    transition: margin-left 0.28s;
+    display: flex;
+    background-color: $containerbg;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    font-size: 0px;
+    margin-right: 15px;
+
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+      margin-right: 0 !important;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 5px;
+    }
+
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+
+    .el-menu {
+      background-color: transparent !important;
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    // menu hover
+    .el-menu--collapse .el-submenu__title,
+    .el-menu--collapse .submenu-title-noDropdown {
+      margin-left: 0px !important;
+    }
+
+    // 有子级
+    .el-submenu__title {
+      padding-left: 10px !important;
+      color: $menuText;
+      height: 42px;
+      background: linear-gradient(90deg, #013874 0%, #081B56 100%);
+      margin-bottom: 8px;
+
+      &:hover {
+        color: $subMenuActiveText !important;
+        background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
+
+        .svg-icon,
+        i,
+        span {
+          color: $subMenuActiveText !important;
+        }
+      }
+    }
+
+    // 没有子级
+    .submenu-title-noDropdown {
+      color: $menuText;
+      padding-left: 20px;
+      margin-bottom: 8px;
+      background: linear-gradient(90deg, #013874 0%, #081B56 100%);
+
+      &:hover {
+        color: $menuActiveText !important;
+        background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
+
+        .svg-icon {
+          color: #1ea6f8 !important;
+        }
+
+        i {
+          color: #1ea6f8 !important;
+        }
+      }
+    }
+
+    .submenu-title-noDropdown.is-active,
+    .el-submenu__title.is-active {
+      color: $menuActiveText;
+      background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
+
+      .svg-icon {
+        color: #1ea6f8 !important;
+      }
+
+      i {
+        color: #1ea6f8 !important;
+      }
+    }
+
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      font-weight: 600;
+      font-size: $sideBarFontSize;
+
+      // margin: 0 10px;
+      >i {
+        color: $subMenuActiveText !important;
+        transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+        -moz-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+        -o-transform: rotate(90deg);
+        margin-right: 10px;
+      }
+
+      .svg-icon {
+        font-size: 18px;
+        margin-top: -5px;
+      }
+    }
+
+    .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
+      transform: rotateZ(0deg) !important;
+      -webkit-transform: rotateZ(0deg) !important;
+      -moz-transform: rotateZ(0deg) !important;
+      -ms-transform: rotateZ(0deg) !important;
+      -o-transform: rotateZ(0deg) !important;
+    }
+
+    .is-active>.el-submenu__title {
+      color: #fff !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      &.is-active {
+        background-color: $subMenuHover !important;
+        color: $menuActiveText !important;
+      }
+
+      &:hover {
+        background-color: $subMenuHover !important;
+        color: $menuActiveText !important;
+      }
+
+      min-width: 130px !important;
+      background-color: transparent !important;
+      font-weight: 600;
+      font-size: $sideBarFontSize;
+      margin: 0 10px;
+      // border-radius: 6px;
+    }
+  }
+  
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 16px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 16px;
+        }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform 0.28s;
+      width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    width: calc(100% - 12px);
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    font-weight: 600 !important;
+    font-size: 15px !important;
+    background-color: $menuHover !important;
+    color: $menuText !important;
+
+    &:hover {
+      background-color: $menuHover !important;
+      opacity: .9;
+
+      .svg-icon,
+      i,
+      span {
+        color: $menuText;
+      }
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+    background-color: #32ACFE !important;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    min-width: 140px;
+    padding: 12px 0;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}
+
+.el-submenu__title {
+  display: flex;
+  align-items: center;
+}
+
+.el-submenu__title span {
+  white-space: normal;
+  word-break: break-all;
+  line-height: 20px;
+  flex: 1;
+  padding-right: 20px;
+}
+
+.el-menu-item {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  padding-right: 20px !important;
+}
+
+.el-menu-item span {
+  white-space: normal;
+  word-break: break-all;
+  line-height: 20px;
+  flex: 1;
+}
\ No newline at end of file