菜单引导页

.postcssrc.js

@@ -6,28 +6,28 @@ module.exports = {
     "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
     "autoprefixer": {},
-    'postcss-px-to-viewport': {
+    // 'postcss-px-to-viewport': {
-      // options
+    //   // options
-      unitToConvert: 'px',//(String) 需要转换的单位，默认为"px"
+    //   unitToConvert: 'px',//(String) 需要转换的单位，默认为"px"
-      viewportWidth: 1920, // (Number) 设计稿的视口宽度，一般是750
+    //   viewportWidth: 1920, // (Number) 设计稿的视口宽度，一般是750
-      unitPrecision: 3, //  (Number) 单位转换后保留的精度（很多时候无法整除）
+    //   unitPrecision: 3, //  (Number) 单位转换后保留的精度（很多时候无法整除）
-      viewportUnit: 'vw', // (String) 希望使用的视口单位
+    //   viewportUnit: 'vw', // (String) 希望使用的视口单位
-      selectorBlackList: ['.ignore', '.hairlines'],
+    //   selectorBlackList: ['.ignore', '.hairlines'],
-      /*(Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
+    //   /*(Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
-      如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配
+    //   如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配
-          例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
+    //       例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
-      如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则
+    //   如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则
-          例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会*/
+    //       例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会*/
-      minPixelValue: 1, // (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+    //   minPixelValue: 1, // (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
-      mediaQuery: false, // (Boolean) 媒体查询里的单位是否需要转换单位
+    //   mediaQuery: false, // (Boolean) 媒体查询里的单位是否需要转换单位
-      exclude: [/^node_modules$/],// (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+    //   exclude: [/^node_modules$/],// (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
-      include: [/BI/],
+    //   include: [/BI/],
-      /*(Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件
+    //   /*(Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件
-      如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
+    //   如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
-      如果传入的值是一个数组，那么数组里的值必须为正则
+    //   如果传入的值是一个数组，那么数组里的值必须为正则
-      注意：exclude和include是可以一起设置的，将取两者规则的交集*/
+    //   注意：exclude和include是可以一起设置的，将取两者规则的交集*/
-      landscapeUnit: 'vw', //横屏时使用的单位
+    //   landscapeUnit: 'vw', //横屏时使用的单位
-      landscapeWidth: 750,// 横屏时使用的视口宽度
+    //   landscapeWidth: 750,// 横屏时使用的视口宽度
-    }
+    // }
   }
 }

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.0.29",
+    "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",
@@ -17,6 +17,7 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "^0.4.0",
+    "autofit.js": "^3.1.1",
     "axios": "^0.21.1",
     "dayjs": "^1.11.10",
     "echarts": "^5.3.1",
@@ -26,11 +27,11 @@
     "jspdf": "^2.5.1",
     "moment": "^2.29.3",
     "motion": "^10.16.4",
-    "throttle-debounce": "^5.0.0",
     "mqtt": "4.2.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "relation-graph": "^1.1.0",
+    "throttle-debounce": "^5.0.0",
     "video.js": "^7.19.2",
     "vue": "^2.5.2",
     "vue-baidu-map": "^0.21.22",

src/layout/components/Navbar.vue

@@ -11,38 +11,56 @@
       <div class="right-menu-item hover-effect">
         <span style="font-weight: bold">姓名：{{ userForm.NAME }}</span>
       </div>
-      <div class="right-menu-item hover-effect" @click="gotoBI()">
+      <!--      <div class="right-menu-item hover-effect" @click="gotoBI()">-->
-        <svg-icon icon-class="dashboard" />
+      <!--        <svg-icon icon-class="dashboard" />-->
-        <span>可视化</span>
+      <!--        <span>可视化</span>-->
-      </div>
+      <!--      </div>-->
-      <div class="right-menu-item hover-effect" @click="gotoMap()">
+      <!--      <div class="right-menu-item hover-effect" @click="gotoMap()">-->
-        <svg-icon icon-class="dashboard" />
+      <!--        <svg-icon icon-class="dashboard" />-->
-        <span>地图</span>
+      <!--        <span>地图</span>-->
-      </div>
+      <!--      </div>-->
-      <div class="right-menu-item hover-effect" @click="setShowModel('prevention')">
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('prevention')">-->
-        <svg-icon icon-class="dashboard" />
+      <!--        <svg-icon icon-class="dashboard" />-->
-        <span>双重预防</span>
+      <!--        <span>双重预防</span>-->
-      </div>
+      <!--      </div>-->
-      <div class="right-menu-item hover-effect" @click="setShowModel('relatedParties')">
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('relatedParties')">-->
-        <svg-icon icon-class="dashboard" />
+      <!--        <svg-icon icon-class="dashboard" />-->
-        <span>相关方</span>
+      <!--        <span>相关方</span>-->
-      </div>
+      <!--      </div>-->
-      <div class="right-menu-item hover-effect" @click="setShowModel('educationAndTraining')">
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('educationAndTraining')">-->
+      <!--        <svg-icon icon-class="example" />-->
+      <!--        <span>教育培训</span>-->
+      <!--      </div>-->
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('highRisk')">-->
+      <!--        <svg-icon icon-class="example" />-->
+      <!--        <span>高危作业管理</span>-->
+      <!--      </div>-->
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('monitor')">-->
+      <!--        <svg-icon icon-class="example" />-->
+      <!--        <span>监测预警</span>-->
+      <!--      </div>-->
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('comprehensive')">-->
+      <!--        <svg-icon icon-class="example" />-->
+      <!--        <span>综合管理</span>-->
+      <!--      </div>-->
+      <div class="right-menu-item hover-effect" @click="$router.push({path:'/guide'})">
         <svg-icon icon-class="example" />
-        <span>教育培训</span>
+        <span>首页</span>
-      </div>
-      <div class="right-menu-item hover-effect" @click="setShowModel('highRisk')">
-        <svg-icon icon-class="example" />
-        <span>高危作业管理</span>
-      </div>
-      <div class="right-menu-item hover-effect" @click="setShowModel('monitor')">
-        <svg-icon icon-class="example" />
-        <span>监测预警</span>
-      </div>
-      <div class="right-menu-item hover-effect" @click="setShowModel('comprehensive')">
-        <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>
       <!-- <template v-if="device!=='mobile'">
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
@@ -163,6 +181,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,
@@ -285,7 +304,8 @@ export default {
       dialogImageUrl: '',
       dialogVisible: false,
       DEPARTMENT_NAME: '',
-      FFILE: {}
+      FFILE: {},
+      menuList
     }
   },
   computed: {

src/router/index.js

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

src/views/bi_onecom/components/header/index.vue

@@ -15,7 +15,7 @@
       </ul>
     </menu>
     <div class="right">
-      <div class="iconfont icon-tuichu" @click="$router.push('/index')"/>
+      <div class="iconfont icon-tuichu" @click="$router.push('/guide')"/>
       <div
         :class="['iconfont', !isFullScreen ? 'icon-full-screen' : 'icon-tuichuquanping']"
         @click="handleFullScreen(undefined)"/>

src/views/bi_onecom/monitoringCenter/apiMonitoringCenter.vue

@@ -22,7 +22,7 @@
             @click="handleFullScreen(undefined)">
             <span>全屏</span>
           </div>
-          <div class="iconfont icon-tuichu color058" @click="$router.push('/index')">
+          <div class="iconfont icon-tuichu color058" @click="$router.push('/guide')">
             <span>退出</span>
           </div>
         </div>

src/views/bi_onecom/monitoringCenter/monitoringCenter.vue

@@ -22,7 +22,7 @@
             @click="handleFullScreen(undefined)">
             <span>全屏</span>
           </div>
-          <div class="iconfont icon-tuichu" @click="$router.push('/index')">
+          <div class="iconfont icon-tuichu" @click="$router.push('/guide')">
             <span>退出</span>
           </div>
         </div>

src/views/login/index.vue

@@ -278,7 +278,7 @@ export default {
               if (data.result === 'success') {
                 sessionStorage.setItem('user', JSON.stringify(data))
                 sessionStorage.setItem('loginCount', '0')
-                this.$router.push({ path: '/index' })
+                this.$router.push({ path: '/guide' })
                 this.loading = false
                 this.flag = false
                 this.getWorkTask(data.USER_ID)

src/views/map/index.vue

@@ -1582,7 +1582,7 @@ export default {
 
         this.destroyConnection()
         this.onePerLocArr = []
-        this.$router.push('/index')
+        this.$router.push('/guide')
       } else if (index === 1) {
         this.handleFullScreen(undefined)
       } else if (index === 2) {
@@ -2849,7 +2849,7 @@ export default {
     }
 
     .title {
-      background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
+      background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       font-size: 34px;

src/views/newBI/guide.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="guide">
+    <div class="header">
+      <div class="title">秦港某公司安全监管平台</div>
+    </div>
+    <div class="container">
+      <div class="menu">
+        <template v-for="(item, index) in menuList">
+          <div
+            v-if="index < 7"
+            :key="index"
+            :style="{'--x': position[index].x + 'px', '--y': position[index].y + 'px'}"
+            class="item left"
+            @click="item.click"
+          >
+            <div class="text">{{ item.text }}</div>
+            <img src="../../assets/images/enterprise/jiantou_left.png" alt="">
+          </div>
+          <div
+            v-else
+            :key="index"
+            :style="{'--x': position[index - 7].x + 'px', '--y': position[index - 7].y + 'px'}"
+            class="item right"
+            @click="item.click"
+          >
+            <img src="../../assets/images/enterprise/jiantou_right.png" alt="">
+            <div class="text">{{ item.text }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import autofit from 'autofit.js'
+import { menuList } from './menuList'
+
+export default {
+  data() {
+    return {
+      position: [
+        { x: -100, y: 92 },
+        { x: -160, y: 192 },
+        { x: -200, y: 292 },
+        { x: -240, y: 392 },
+        { x: -220, y: 492 },
+        { x: -200, y: 592 },
+        { x: -160, y: 692 }
+      ],
+      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/enterprise/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+
+  .header {
+    width: 100%;
+    height: 125px;
+    background-image: url("../../assets/images/enterprise/titbg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .title {
+      max-width: 800px;
+      height: 52px;
+      text-align: center;
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-weight: bold;
+      background-image: linear-gradient(to bottom, #00a2ff, #fff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 44px;
+    }
+  }
+
+  .container {
+    width: 991px;
+    height: 954px;
+    background-image: url("../../assets/images/enterprise/img1.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .menu {
+      font-size: 15px;
+      color: #fff;
+
+      .item {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: var(--y);
+        width: 177px;
+        height: 53px;
+        cursor: pointer;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+
+        &.left {
+          background-image: url("../../assets/images/enterprise/navbg_left.png");
+          left: var(--x);
+
+          .text {
+            margin-left: 30px;
+            margin-right: 15px;
+          }
+        }
+
+        &.right {
+          background-image: url("../../assets/images/enterprise/navbg_right.png");
+          right: var(--x);
+
+          img {
+            margin-left: 30px;
+          }
+
+          .text {
+            margin-left: 15px;
+          }
+        }
+
+        .text {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</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,112 @@
+import store from '@/store/index'
+import router from '@/router/index'
+export const menuList = [
+  {
+    text: '管理员驾驶舱',
+    click: () => {
+      router.push({ path: '/monitoringCenter' })
+    }
+  },
+  {
+    text: '物联网+地图',
+    click: () => {
+      router.push({ path: '/map' })
+    }
+  },
+  {
+    text: '企业信息管理',
+    model: 'enterpriseInformation',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'enterpriseInformation')
+      router.push({ path: '/corpInfo/information/info' })
+    }
+  },
+  {
+    text: '法律法规管理',
+    model: 'regulations',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'regulations')
+      router.push({ path: '/threeSystems/safetyOperationRegulations' })
+    }
+  },
+  {
+    text: '安全目标管理',
+    model: 'safetyObjectives',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'safetyObjectives')
+      router.push({ path: '/security_commitment/promise_book' })
+    }
+  },
+  {
+    text: '安全教育管理',
+    model: 'educationTraining',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'educationTraining')
+      router.push({ path: '/archives/user' })
+    }
+  },
+  {
+    text: '双重预防管理',
+    model: 'doublePrevention',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'doublePrevention')
+      router.push({ path: '/risk/riskunit' })
+    }
+  },
+  {
+    text: '相关方管理',
+    model: 'relatedParties',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'relatedParties')
+      router.push({ path: '/relevantunits/insert' })
+    }
+  },
+  {
+    text: '消防安全管理',
+    model: 'fireSafety',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'fireSafety')
+      router.push({ path: '/firefighting/qualifiedphotos' })
+    }
+  },
+  {
+    text: '危险作业管理',
+    model: 'dangerousOperations',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'dangerousOperations')
+      router.push({ path: '/specialType/InterestedParties' })
+    }
+  },
+  {
+    text: '作业现场管理',
+    model: 'workSiteManagement',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'workSiteManagement')
+      router.push({ path: '/keyprojects/units' })
+    }
+  },
+  {
+    text: '绩效考评管理',
+    model: 'performanceAssessment',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'performanceAssessment')
+      router.push({ path: '/statistics/branch' })
+    }
+  },
+  {
+    text: '应急管理',
+    model: 'emergency',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'emergency')
+      router.push({ path: '/emergency/plan' })
+    }
+  },
+  {
+    text: '科技创新',
+    model: 'innovation',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'innovation')
+      router.push({ path: '/oneCompany/alarmList' })
+    }
+  }
+]