菜单引导页

package.json

@@ -5,7 +5,7 @@
   "author": "",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --host 192.168.151.43",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --open",
     "start": "npm run dev",
     "unit": "jest --config test/unit/jest.conf.js --coverage",
     "e2e": "node test/e2e/runner.js",
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
+    "autofit.js": "^3.1.1",
     "axios": "^0.21.1",
     "default-passive-events": "^2.0.0",
     "element-ui": "^2.15.1",

src/layout/components/Navbar.vue

@@ -5,10 +5,28 @@
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('system')">-->
+      <div class="right-menu-item hover-effect" @click="$router.push({path:'/guide'})">
-      <!--        <svg-icon icon-class="example" />-->
+        <svg-icon icon-class="example" />
-      <!--        <span>系统管理</span>-->
+        <span>首页</span>
-      <!--      </div>-->
+      </div>
+      <div class="right-menu-item hover-effect" @click="setShowModel('system')">
+        <svg-icon icon-class="example" />
+        <span>系统管理</span>
+      </div>
+      <el-dropdown class="right-menu-item" trigger="click">
+        <div style="cursor:pointer;">
+          <svg-icon icon-class="guide" />
+          <span>更多</span>
+          <i class="el-icon-arrow-down el-icon--right"/>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item,index) in menuList" :key="index" @click.native="item.click">
+              {{ item.text }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="imgUrl" alt="" class="user-avatar">
@@ -119,6 +137,7 @@ import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import { requestFN } from '@/utils/request'
 import { upload } from '@/utils/upload'
+import { menuList } from '@/views/newBI/menuList'
 export default {
   components: {
     Breadcrumb,
@@ -196,7 +215,7 @@ export default {
           { required: true, message: '请输入旧密码', trigger: 'blur' }
         ],
         newpwd: [
-          { required: true,message: '请输入新密码', trigger: 'blur' },
+          { required: true, message: '请输入新密码', trigger: 'blur' },
           {
             pattern: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*.{8,16}$/,
             message: '请输入长度8-16位密码，必须由大写字母，小写字母，数字，特殊符号(!#@*&.)组成'
@@ -237,7 +256,8 @@ export default {
       hideUpload: false,
       dialogImageUrl: '',
       dialogVisible: false,
-      FFILE: {}
+      FFILE: {},
+      menuList
     }
   },
   computed: {
@@ -248,7 +268,7 @@ export default {
   },
   created() {
     this.getInfo()
-    this.setShowModel('system')
+    // this.setShowModel('system')
   },
   methods: {
     gotoBI() {

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="(route,index) in permission_routes" v-show="route.meta" :key="index" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="(route,index) in permission_routes" v-show="route.meta && route.meta.showModel==showModel" :key="index" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>

src/router/index.js

@@ -45,6 +45,18 @@ export const constantRoutes = [
         meta: { title: '首页', affix: true }
       }
     ]
+  },
+  {
+    path: '/guide',
+    name: 'guide',
+    hidden: true,
+    component: () => import('@/views/newBI/index'),
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/newBI/guide')
+      },
+    ]
   }
 ]
 const createRouter = () => new Router({

src/views/login/index.vue

@@ -189,7 +189,7 @@ export default {
               }
             ).then((data) => {
               sessionStorage.setItem('user', JSON.stringify(data))
-              this.$router.push({ path: '/index' })
+              this.$router.push({ path: '/guide' })
               this.loading = false
             })
               .catch((e) => {

src/views/newBI/guide.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="guide">
+    <div class="header">
+      <div class="title"/>
+    </div>
+    <div class="container">
+      <div class="menu">
+        <div
+          v-for="(item, index) in menuList"
+          :key="index"
+          class="item"
+          @click="item.click"
+        >
+          <div class="text">{{ item.text }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import autofit from 'autofit.js'
+import { menuList } from './menuList'
+
+export default {
+  data() {
+    return {
+      menuList
+    }
+  },
+  mounted() {
+    autofit.init({
+      dh: 1080,
+      dw: 1920,
+      el: '#guide',
+      resize: true
+    })
+  },
+  beforeDestroy() {
+    autofit.off()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#guide {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../../assets/images/party/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+
+  .header {
+    width: 100%;
+    height: 125px;
+    background-image: url("../../assets/images/party/titbg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .title {
+      width: 358px;
+      height: 52px;
+      background-image: url("../../assets/images/party/title.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .container {
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    position: relative;
+
+    .menu {
+      width: max-content;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: grid;
+      grid-template-columns: repeat(5, 273px);
+      gap: 90px 25px;
+
+      .item {
+        width: 273px;
+        height: 95px;
+        background-image: url("../../assets/images/party/img1.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        font-size: 20px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 95px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/views/newBI/index.vue

@@ -0,0 +1,12 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+  <router-view/>
+</template>
+
+<style scoped>
+
+</style>

src/views/newBI/menuList.js

@@ -0,0 +1,76 @@
+import store from '@/store/index'
+import router from '@/router/index'
+export const menuList = [
+  {
+    text: '相关方单位信息管理',
+    model: 'unitInformation',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'unitInformation')
+      router.push({ path: '/corpinfo/corpinfo/insert' })
+    }
+  },
+  {
+    text: '相关方人员库管理',
+    model: 'personnelDatabase',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'personnelDatabase')
+      router.push({ path: '/PersonManager/user' })
+    }
+  },
+  {
+    text: '相关方资质管理',
+    model: 'qualifications',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'qualifications')
+    }
+  },
+  {
+    text: '相关方服务关系管理',
+    model: 'serviceRelationship',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'serviceRelationship')
+    }
+  },
+  {
+    text: '相关方人员培训管理',
+    model: 'personnelTraining',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'personnelTraining')
+    }
+  },
+  {
+    text: '相关方隐患排查管理',
+    model: 'hazardInvestigation',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'hazardInvestigation')
+    }
+  },
+  {
+    text: '相关方现场工程管理',
+    model: 'onSiteEngineering',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'onSiteEngineering')
+    }
+  },
+  {
+    text: '相关方安全',
+    model: 'security',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'security')
+    }
+  },
+  {
+    text: '环保检查管理',
+    model: 'environmentalInspection',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'environmentalInspection')
+    }
+  },
+  {
+    text: '相关方危险作业管理',
+    model: 'dangerousHomework',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'dangerousHomework')
+    }
+  }
+]