新BI页和导航页

.postcssrc.js

@@ -20,7 +20,7 @@ module.exports = {
           例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会*/
       minPixelValue: 1, // (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
       mediaQuery: false, // (Boolean) 媒体查询里的单位是否需要转换单位
-      exclude: [/^node_modules$/],// (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+      exclude: [/^node_modules$/,/newBI/],// (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
       include: [/BI/,/map/],
       /*(Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件
       如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件

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.105",
+    "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": {
     "@riophae/vue-treeselect": "^0.4.0",
     "animate.css": "^4.1.1",
+    "autofit.js": "^3.1.0",
     "axios": "^0.21.1",
     "dayjs": "^1.11.10",
     "element-ui": "^2.15.1",
@@ -41,6 +42,7 @@
     "vue-qr": "^2.3.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-to-pdf": "^1.0.0",
     "vue-video-player": "^5.0.2"
   },

src/components/Breadcrumb/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import pathToRegexp from 'path-to-regexp'
+import * as pathToRegexp from 'path-to-regexp'
 
 export default {
   data() {

src/layout/components/Navbar.vue

@@ -11,30 +11,48 @@
       <div class="right-menu-item hover-effect">
         <span style="font-weight: bold">姓名：{{ pd.NAME }}</span>
       </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="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="setShowModel('other')">
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('other')">-->
-        <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('detection')">
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('detection')">-->
-        <svg-icon icon-class="dashboard" />
+      <!--        <svg-icon icon-class="dashboard" />-->
-        <span>在线监测</span>
+      <!--        <span>在线监测</span>-->
+      <!--      </div>-->
+      <div class="right-menu-item hover-effect" @click="$router.push({path:'/guide'})">
+        <svg-icon icon-class="example" />
+        <span>首页</span>
       </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>
       <!-- <template v-if="device!=='mobile'">
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
@@ -102,6 +120,7 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import { requestFN } from '@/utils/request'
+import { menuList } from '@/views/newBI/menuList'
 export default {
   components: {
     Breadcrumb,
@@ -157,7 +176,8 @@ export default {
         newpassword1: [
           { required: true, validator: validatePass2, trigger: 'blur' }
         ]
-      }
+      },
+      menuList
     }
   },
   computed: {

src/router/index.js

@@ -39,6 +39,33 @@ export const constantRoutes = [
     hidden: true,
     component: () => import('@/views/login/registered/index')
   },
+  {
+    path: '/guide',
+    name: 'guide',
+    hidden: true,
+    component: () => import('@/views/newBI/index'),
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/newBI/guide')
+      },
+      {
+        path: 'data_center',
+        name: '数据中心',
+        component: () => import('@/views/newBI/data_center')
+      },
+      {
+        path: 'double_prevention',
+        name: '双重预防管理',
+        component: () => import('@/views/newBI/double_prevention')
+      },
+      {
+        path: 'related_parties',
+        name: '相关方管理',
+        component: () => import('@/views/newBI/related_parties')
+      }
+    ]
+  },
   {
     path: '/BI',
     name: 'BI',

src/views/login/index.vue

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

src/views/map/index.vue

@@ -226,13 +226,13 @@
           enter-active-class="animate__animated animate__fadeInDown"
           leave-active-class="animate__animated animate__fadeOutUp"
         >
-        <div class="people_trajectory" v-if="isPeopleTrajectory">
+          <div v-if="isPeopleTrajectory" class="people_trajectory">
-          <el-select v-model="peopleTrajectoryValue" popper-class="people_trajectory_select">
+            <el-select v-model="peopleTrajectoryValue" popper-class="people_trajectory_select">
-            <el-option v-for="item in onePerLocArr" :key="item.id" :value="item.id" :label="item.id"/>
+              <el-option v-for="item in onePerLocArr" :key="item.id" :value="item.id" :label="item.id"/>
-          </el-select>
+            </el-select>
-          <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
+            <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
-          <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
+            <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
-        </div>
+          </div>
         </transition>
       </div>
     </transition>
@@ -256,7 +256,7 @@
       :gangkou="gangkouActive"
       :infoname="dialog.infoname"
       :name="dialog.name"
-      :GATE_VIDEO_ID="dialog.GATE_VIDEO_ID"
+      :gate-video-id="dialog.GATE_VIDEO_ID"
       :person-photo="dialog.personPhoto"
       :ry-dept-name="dialog.RyDeptName"
       :ry-post-name="dialog.RyPostName"
@@ -925,7 +925,7 @@ export default {
         RyPostName: '',
         RyRealName: '',
         personTypeName: '',
-        GATE_VIDEO_ID:''
+        GATE_VIDEO_ID: ''
       },
       /* 曹妃甸使用参数开始*/
       // 人员定位
@@ -1215,8 +1215,8 @@ export default {
         VIIDPort: '8088'
       },
       trajectoryEntityCollection: {},
-      isPeopleTrajectory:false,
+      isPeopleTrajectory: false,
-      peopleTrajectoryValue:''
+      peopleTrajectoryValue: ''
     }
   },
   mounted() {
@@ -1435,7 +1435,7 @@ export default {
           }
           const point_type = pick.id._monitoItems.data.point_type
           const point_id = pick.id._monitoItems.data.id
-          if (point_type == '标记点CAMERA'){
+          if (point_type == '标记点CAMERA') {
             console.log(pick.id._monitoItems.data)
             this.dialog.GATE_VIDEO_ID = pick.id._monitoItems.data.GATE_VIDEO_ID
           }
@@ -1913,7 +1913,7 @@ export default {
 
         this.destroyConnection()
         this.onePerLocArr = []
-        this.$router.push('/index')
+        this.$router.push('/guide/data_center')
       } else if (index === 1) {
         this.handleFullScreen(undefined)
       } else if (index === 2) {
@@ -2121,7 +2121,7 @@ export default {
           }
           this.carLocArr = []
         }
-        if(urlType === 'peopleTrajectory'){
+        if (urlType === 'peopleTrajectory') {
           this.isPeopleTrajectory = false
         }
         if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
@@ -2129,8 +2129,8 @@ export default {
           this.clearMqttPoint('+/UwbBQ/')
           this.removeTrajectory()
           for (let i = 0; i < this.bottomOptionsList[pindex].list.length; i++) {
-            if(this.bottomOptionsList[pindex].list[i].type === 'peopleTrajectory'){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peopleTrajectory') {
-              if(this.bottomOptionsList[pindex].list[i].check){
+              if (this.bottomOptionsList[pindex].list[i].check) {
                 this.bottomOptionsList[pindex].list[i].check = false
                 this.isPeopleTrajectory = false
                 break
@@ -2154,20 +2154,20 @@ export default {
           }
         })
       } else {
-        if(urlType === 'peopleTrajectory'){
+        if (urlType === 'peopleTrajectory') {
           let flag = false
           for (let i = 0; i < this.bottomOptionsList[pindex].list.length; i++) {
-            if(this.bottomOptionsList[pindex].list[i].type === 'peoplePosition'){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peoplePosition') {
-              if(!this.bottomOptionsList[pindex].list[i].check){
+              if (!this.bottomOptionsList[pindex].list[i].check) {
                 flag = true
                 break
               }
             }
           }
-          if(flag){
+          if (flag) {
             this.$message.warning('请先选择人员定位！！！')
             return
-          }else{
+          } else {
             this.isPeopleTrajectory = true
           }
         }
@@ -2652,7 +2652,7 @@ export default {
                   personTypeName: item.personTypeName,
                   data_id: item.cardId + '',
                   point_type: 'peoplePositionCzks',
-                  label: item.realName,
+                  label: item.realName
 
                 }
                 czksPerLoc.push(perLoc)

src/views/newBI/components/block_title1.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="block_title">{{ title }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.block_title{
+  width: 437px;
+  height: 27px;
+  background-image: url("../../../assets/share/smalltitbg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  font-size: 14px;
+  color: #fff;
+  padding: 3px 25px;
+}
+</style>

src/views/newBI/components/block_title2.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="block_title">{{ title }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.block_title{
+  width: 500px;
+  height: 28px;
+  background-image: url("../../../assets/share/smalltitbg1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  font-size: 14px;
+  color: #fff;
+  padding: 3px 25px;
+}
+</style>

src/views/newBI/components/block_title3.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="block_title">{{ title }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.block_title {
+  width: 804px;
+  height: 35px;
+  background-image: url("../../../assets/share/midtitlebg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  font-size: 15px;
+  color: #fff;
+  padding: 8px 34px;
+}
+</style>

src/views/newBI/guide.vue

@@ -0,0 +1,179 @@
+<template>
+  <div id="guide">
+    <div class="header">
+      <div class="title"/>
+    </div>
+    <div class="container">
+      <div
+        v-for="i in 3"
+        :key="i"
+        :class="'yuan' + i"
+        @click="i === 3 ? $router.push({path:'/guide/data_center'}) : null"
+      />
+      <div class="menu">
+        <template v-for="(item, index) in menuList">
+          <div
+            v-if="index < 6"
+            :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="item.img" alt="">
+          </div>
+          <div
+            v-else
+            :key="index"
+            :style="{'--x': position[index - 6].x + 'px', '--y': position[index - 6].y + 'px'}"
+            class="item right"
+            @click="item.click"
+          >
+            <img :src="item.img" 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: 285, y: 7 },
+        { x: 235, y: 104 },
+        { x: 185, y: 202 },
+        { x: 185, y: 302 },
+        { x: 235, y: 400 },
+        { x: 285, y: 497 }
+      ],
+      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/share/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+
+  .header {
+    width: 100%;
+    height: 125px;
+    background-image: url("../../assets/share/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/share/title.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .container {
+    width: 1701px;
+    height: 580px;
+    background-image: url("../../assets/share/menubg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    @for $i from 1 through 3 {
+      .yuan#{$i} {
+        width: 582px;
+        height: 582px;
+        background-image: url("../../assets/share/yuan#{$i}.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        @if ($i == 1) {
+          animation: rotate 10s linear infinite;
+        }
+
+        @if ($i == 2) {
+          animation: rotate 10s linear infinite reverse;
+        }
+
+        @if ($i == 3) {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .menu {
+      font-size: 20px;
+      color: #fff;
+
+      .item {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: var(--y);
+        width: 250px;
+        cursor: pointer;
+
+        &.left {
+          left: var(--x);
+        }
+
+        &.right {
+          right: var(--x);
+        }
+
+        .text {
+          margin: 0 22px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+</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,110 @@
+import store from '@/store/index'
+import router from '@/router/index'
+export const menuList = [
+  {
+    img: require('../../assets/share/ico1.png'),
+    text: '企业信息管理',
+    model: 'enterpriseInformation',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'enterpriseInformation')
+      router.push({ path: '/corpInfo/info' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico2.png'),
+    text: '法规制度管理',
+    model: 'regulations',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'regulations')
+      router.push({ path: '/threeSystems/safetyOperationRegulations' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico3.png'),
+    text: '安全目标管理',
+    model: 'safetyObjectives',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'safetyObjectives')
+      router.push({ path: '/security_commitment/promise_book' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico4.png'),
+    text: '安全教育培训',
+    model: 'educationTraining',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'educationTraining')
+    }
+  },
+  {
+    img: require('../../assets/share/ico5.png'),
+    text: '双重预防管理',
+    model: 'doublePrevention',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'doublePrevention')
+      router.push({ path: '/risk/corpinfo' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico6.png'),
+    text: '相关方管理',
+    model: 'relatedParties',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'relatedParties')
+      router.push({ path: '/relevantunits/insert' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico7.png'),
+    text: '消防安全管理',
+    model: 'fireSafety',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'fireSafety')
+      router.push({ path: '/firefighting/standard' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico8.png'),
+    text: '危险作业管理',
+    model: 'dangerousOperations',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'dangerousOperations')
+      router.push({ path: '/application/supervision' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico9.png'),
+    text: '作业现场管理',
+    model: 'workSiteManagement',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'workSiteManagement')
+      router.push({ path: '/keyprojects/units' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico10.png'),
+    text: '绩效考评管理',
+    model: 'performanceAssessment',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'performanceAssessment')
+      router.push({ path: '/statistics/jointStock' })
+    }
+  },
+  {
+    img: require('../../assets/share/ico11.png'),
+    text: '应急管理',
+    model: 'emergency',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'emergency')
+    }
+  },
+  {
+    img: require('../../assets/share/ico12.png'),
+    text: '科技创新',
+    model: 'innovation',
+    click: () => {
+      store.dispatch('permission/setShowModel', 'innovation')
+      router.push({ path: '/gatemachine/gatearea' })
+    }
+  }
+]

static/login/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>秦港安全监管平台</title>
+</head>
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .login {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    position: relative;
+    color: #fff;
+
+    .bg1 {
+      width: 61.7%;
+      height: 100%;
+      background-image: url("./images/bg1.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .bg2 {
+      width: 38.3%;
+      height: 100%;
+      background-image: url("./images/bg2.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      position: relative;
+
+      .logo {
+        width: 53px;
+        height: 51px;
+        position: absolute;
+        top: 25px;
+        right: 38px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .form {
+        width: 432px;
+        margin: 300px auto;
+
+        .main_title {
+          font-size: 36px;
+          letter-spacing: 5px;
+          margin-bottom: 45px;
+        }
+
+        label {
+          display: block;
+          margin-top: 20px;
+        }
+
+        input {
+          margin-top: 20px;
+          width: 100%;
+          padding: 15px 10px;
+          outline: none;
+          border-radius: 4px;
+          border: none;
+          box-sizing: border-box;
+        }
+
+        button {
+          margin-top: 65px;
+          width: 100%;
+          background-color: #008aff;
+          color: #fff;
+          outline: none;
+          border-radius: 4px;
+          border: none;
+          box-sizing: border-box;
+          padding: 18px 0;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      bottom: 30px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 14px;
+    }
+  }
+</style>
+<body>
+<div class="login">
+  <div class="bg1"></div>
+  <div class="bg2">
+    <div class="logo">
+      <img src="./images/logo.png" alt=""/>
+    </div>
+    <div class="form">
+      <div class="main_title">欢迎登录!</div>
+      <label for="username">账号</label>
+      <input id="username" placeholder="请输入用户名"></input>
+      <label for="password">密码</label>
+      <input id="password" type="password" placeholder="请输入密码"></input>
+      <button>登录</button>
+    </div>
+  </div>
+  <div class="footer">
+    秦港股份安全监管平台 版权所有 Copy right 2013-2020-v7
+  </div>
+</div>
+</body>
+</html>