diff --git a/.postcssrc.js b/.postcssrc.js
index c7018ae..29dd825 100644
--- a/.postcssrc.js
+++ b/.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' 下的文件
       如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
diff --git a/package.json b/package.json
index 5b8832d..226d213 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/assets/share/back.png b/src/assets/share/back.png
new file mode 100644
index 0000000..01dfa42
Binary files /dev/null and b/src/assets/share/back.png differ
diff --git a/src/assets/share/bg.jpg b/src/assets/share/bg.jpg
new file mode 100644
index 0000000..552e622
Binary files /dev/null and b/src/assets/share/bg.jpg differ
diff --git a/src/assets/share/bg2.jpg b/src/assets/share/bg2.jpg
new file mode 100644
index 0000000..ddc8992
Binary files /dev/null and b/src/assets/share/bg2.jpg differ
diff --git a/src/assets/share/bg3.jpg b/src/assets/share/bg3.jpg
new file mode 100644
index 0000000..a27ae96
Binary files /dev/null and b/src/assets/share/bg3.jpg differ
diff --git a/src/assets/share/centerbg.png b/src/assets/share/centerbg.png
new file mode 100644
index 0000000..fdbd5c7
Binary files /dev/null and b/src/assets/share/centerbg.png differ
diff --git a/src/assets/share/i1.png b/src/assets/share/i1.png
new file mode 100644
index 0000000..54aac6d
Binary files /dev/null and b/src/assets/share/i1.png differ
diff --git a/src/assets/share/i10.png b/src/assets/share/i10.png
new file mode 100644
index 0000000..eaa6462
Binary files /dev/null and b/src/assets/share/i10.png differ
diff --git a/src/assets/share/i11.png b/src/assets/share/i11.png
new file mode 100644
index 0000000..32195c5
Binary files /dev/null and b/src/assets/share/i11.png differ
diff --git a/src/assets/share/i12.png b/src/assets/share/i12.png
new file mode 100644
index 0000000..c8dde62
Binary files /dev/null and b/src/assets/share/i12.png differ
diff --git a/src/assets/share/i13.png b/src/assets/share/i13.png
new file mode 100644
index 0000000..b096f2b
Binary files /dev/null and b/src/assets/share/i13.png differ
diff --git a/src/assets/share/i14.png b/src/assets/share/i14.png
new file mode 100644
index 0000000..9c322cd
Binary files /dev/null and b/src/assets/share/i14.png differ
diff --git a/src/assets/share/i15.png b/src/assets/share/i15.png
new file mode 100644
index 0000000..d9c3c80
Binary files /dev/null and b/src/assets/share/i15.png differ
diff --git a/src/assets/share/i16.png b/src/assets/share/i16.png
new file mode 100644
index 0000000..bec6910
Binary files /dev/null and b/src/assets/share/i16.png differ
diff --git a/src/assets/share/i1bg.png b/src/assets/share/i1bg.png
new file mode 100644
index 0000000..0e4b7b6
Binary files /dev/null and b/src/assets/share/i1bg.png differ
diff --git a/src/assets/share/i2.png b/src/assets/share/i2.png
new file mode 100644
index 0000000..2131845
Binary files /dev/null and b/src/assets/share/i2.png differ
diff --git a/src/assets/share/i3.png b/src/assets/share/i3.png
new file mode 100644
index 0000000..109b59f
Binary files /dev/null and b/src/assets/share/i3.png differ
diff --git a/src/assets/share/i4.png b/src/assets/share/i4.png
new file mode 100644
index 0000000..3d51be9
Binary files /dev/null and b/src/assets/share/i4.png differ
diff --git a/src/assets/share/i5.png b/src/assets/share/i5.png
new file mode 100644
index 0000000..6588eac
Binary files /dev/null and b/src/assets/share/i5.png differ
diff --git a/src/assets/share/i6.png b/src/assets/share/i6.png
new file mode 100644
index 0000000..5fc8838
Binary files /dev/null and b/src/assets/share/i6.png differ
diff --git a/src/assets/share/i7.png b/src/assets/share/i7.png
new file mode 100644
index 0000000..40e8964
Binary files /dev/null and b/src/assets/share/i7.png differ
diff --git a/src/assets/share/i8.png b/src/assets/share/i8.png
new file mode 100644
index 0000000..2a43831
Binary files /dev/null and b/src/assets/share/i8.png differ
diff --git a/src/assets/share/i9.png b/src/assets/share/i9.png
new file mode 100644
index 0000000..368bd3b
Binary files /dev/null and b/src/assets/share/i9.png differ
diff --git a/src/assets/share/ibg1.png b/src/assets/share/ibg1.png
new file mode 100644
index 0000000..25ad1f1
Binary files /dev/null and b/src/assets/share/ibg1.png differ
diff --git a/src/assets/share/ibg2.png b/src/assets/share/ibg2.png
new file mode 100644
index 0000000..df404c5
Binary files /dev/null and b/src/assets/share/ibg2.png differ
diff --git a/src/assets/share/ibg3.png b/src/assets/share/ibg3.png
new file mode 100644
index 0000000..a9d3527
Binary files /dev/null and b/src/assets/share/ibg3.png differ
diff --git a/src/assets/share/ibg4.png b/src/assets/share/ibg4.png
new file mode 100644
index 0000000..3666e85
Binary files /dev/null and b/src/assets/share/ibg4.png differ
diff --git a/src/assets/share/ibg5.png b/src/assets/share/ibg5.png
new file mode 100644
index 0000000..dc02da2
Binary files /dev/null and b/src/assets/share/ibg5.png differ
diff --git a/src/assets/share/ibg6.png b/src/assets/share/ibg6.png
new file mode 100644
index 0000000..f034927
Binary files /dev/null and b/src/assets/share/ibg6.png differ
diff --git a/src/assets/share/ibg7.png b/src/assets/share/ibg7.png
new file mode 100644
index 0000000..6a9181e
Binary files /dev/null and b/src/assets/share/ibg7.png differ
diff --git a/src/assets/share/ico1.png b/src/assets/share/ico1.png
new file mode 100644
index 0000000..22489a2
Binary files /dev/null and b/src/assets/share/ico1.png differ
diff --git a/src/assets/share/ico10.png b/src/assets/share/ico10.png
new file mode 100644
index 0000000..ac6f52c
Binary files /dev/null and b/src/assets/share/ico10.png differ
diff --git a/src/assets/share/ico11.png b/src/assets/share/ico11.png
new file mode 100644
index 0000000..7cf150b
Binary files /dev/null and b/src/assets/share/ico11.png differ
diff --git a/src/assets/share/ico12.png b/src/assets/share/ico12.png
new file mode 100644
index 0000000..5658334
Binary files /dev/null and b/src/assets/share/ico12.png differ
diff --git a/src/assets/share/ico13.png b/src/assets/share/ico13.png
new file mode 100644
index 0000000..60ea7ed
Binary files /dev/null and b/src/assets/share/ico13.png differ
diff --git a/src/assets/share/ico14.png b/src/assets/share/ico14.png
new file mode 100644
index 0000000..8c56260
Binary files /dev/null and b/src/assets/share/ico14.png differ
diff --git a/src/assets/share/ico15.png b/src/assets/share/ico15.png
new file mode 100644
index 0000000..7d5cc50
Binary files /dev/null and b/src/assets/share/ico15.png differ
diff --git a/src/assets/share/ico16.png b/src/assets/share/ico16.png
new file mode 100644
index 0000000..d84ee15
Binary files /dev/null and b/src/assets/share/ico16.png differ
diff --git a/src/assets/share/ico17.png b/src/assets/share/ico17.png
new file mode 100644
index 0000000..b6f11b2
Binary files /dev/null and b/src/assets/share/ico17.png differ
diff --git a/src/assets/share/ico18.png b/src/assets/share/ico18.png
new file mode 100644
index 0000000..9f89579
Binary files /dev/null and b/src/assets/share/ico18.png differ
diff --git a/src/assets/share/ico19.png b/src/assets/share/ico19.png
new file mode 100644
index 0000000..bae0de3
Binary files /dev/null and b/src/assets/share/ico19.png differ
diff --git a/src/assets/share/ico2.png b/src/assets/share/ico2.png
new file mode 100644
index 0000000..187b250
Binary files /dev/null and b/src/assets/share/ico2.png differ
diff --git a/src/assets/share/ico3.png b/src/assets/share/ico3.png
new file mode 100644
index 0000000..2373101
Binary files /dev/null and b/src/assets/share/ico3.png differ
diff --git a/src/assets/share/ico4.png b/src/assets/share/ico4.png
new file mode 100644
index 0000000..6c9e60b
Binary files /dev/null and b/src/assets/share/ico4.png differ
diff --git a/src/assets/share/ico5.png b/src/assets/share/ico5.png
new file mode 100644
index 0000000..4a969a7
Binary files /dev/null and b/src/assets/share/ico5.png differ
diff --git a/src/assets/share/ico6.png b/src/assets/share/ico6.png
new file mode 100644
index 0000000..306f1fd
Binary files /dev/null and b/src/assets/share/ico6.png differ
diff --git a/src/assets/share/ico7.png b/src/assets/share/ico7.png
new file mode 100644
index 0000000..e624451
Binary files /dev/null and b/src/assets/share/ico7.png differ
diff --git a/src/assets/share/ico8.png b/src/assets/share/ico8.png
new file mode 100644
index 0000000..a4b699e
Binary files /dev/null and b/src/assets/share/ico8.png differ
diff --git a/src/assets/share/ico9.png b/src/assets/share/ico9.png
new file mode 100644
index 0000000..9356ed8
Binary files /dev/null and b/src/assets/share/ico9.png differ
diff --git a/src/assets/share/menubg.png b/src/assets/share/menubg.png
new file mode 100644
index 0000000..95f480a
Binary files /dev/null and b/src/assets/share/menubg.png differ
diff --git a/src/assets/share/midtitlebg.png b/src/assets/share/midtitlebg.png
new file mode 100644
index 0000000..630c34c
Binary files /dev/null and b/src/assets/share/midtitlebg.png differ
diff --git a/src/assets/share/qiu.png b/src/assets/share/qiu.png
new file mode 100644
index 0000000..06c9f36
Binary files /dev/null and b/src/assets/share/qiu.png differ
diff --git a/src/assets/share/smalltitbg.jpg b/src/assets/share/smalltitbg.jpg
new file mode 100644
index 0000000..0719cb0
Binary files /dev/null and b/src/assets/share/smalltitbg.jpg differ
diff --git a/src/assets/share/smalltitbg1.png b/src/assets/share/smalltitbg1.png
new file mode 100644
index 0000000..7388a37
Binary files /dev/null and b/src/assets/share/smalltitbg1.png differ
diff --git a/src/assets/share/titbg.png b/src/assets/share/titbg.png
new file mode 100644
index 0000000..7798282
Binary files /dev/null and b/src/assets/share/titbg.png differ
diff --git a/src/assets/share/title.png b/src/assets/share/title.png
new file mode 100644
index 0000000..2d714a8
Binary files /dev/null and b/src/assets/share/title.png differ
diff --git a/src/assets/share/title1.png b/src/assets/share/title1.png
new file mode 100644
index 0000000..231b994
Binary files /dev/null and b/src/assets/share/title1.png differ
diff --git a/src/assets/share/title2.png b/src/assets/share/title2.png
new file mode 100644
index 0000000..3b76b72
Binary files /dev/null and b/src/assets/share/title2.png differ
diff --git a/src/assets/share/title3.png b/src/assets/share/title3.png
new file mode 100644
index 0000000..810b618
Binary files /dev/null and b/src/assets/share/title3.png differ
diff --git a/src/assets/share/yuan1.png b/src/assets/share/yuan1.png
new file mode 100644
index 0000000..4433ec2
Binary files /dev/null and b/src/assets/share/yuan1.png differ
diff --git a/src/assets/share/yuan2.png b/src/assets/share/yuan2.png
new file mode 100644
index 0000000..ad74791
Binary files /dev/null and b/src/assets/share/yuan2.png differ
diff --git a/src/assets/share/yuan3.png b/src/assets/share/yuan3.png
new file mode 100644
index 0000000..fa5529d
Binary files /dev/null and b/src/assets/share/yuan3.png differ
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 2946a5b..e8a3aec 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/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() {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 4c07761..45f6c4c 100644
--- a/src/layout/components/Navbar.vue
+++ b/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()">
-        <svg-icon icon-class="dashboard" />
-        <span>地图</span>
-      </div>
-      <div class="right-menu-item hover-effect" @click="gotoBI()">
-        <svg-icon icon-class="dashboard" />
-        <span>驾驶舱</span>
-      </div>
-      <div class="right-menu-item hover-effect" @click="setShowModel('other')">
-        <svg-icon icon-class="dashboard" />
-        <span>安全监管</span>
-      </div>
-      <div class="right-menu-item hover-effect" @click="setShowModel('relatedParties')">
-        <svg-icon icon-class="dashboard" />
-        <span>相关方</span>
-      </div>
-      <div class="right-menu-item hover-effect" @click="setShowModel('detection')">
-        <svg-icon icon-class="dashboard" />
-        <span>在线监测</span>
+      <!--      <div class="right-menu-item hover-effect" @click="gotoMap()">-->
+      <!--        <svg-icon icon-class="dashboard" />-->
+      <!--        <span>地图</span>-->
+      <!--      </div>-->
+      <!--      <div class="right-menu-item hover-effect" @click="gotoBI()">-->
+      <!--        <svg-icon icon-class="dashboard" />-->
+      <!--        <span>驾驶舱</span>-->
+      <!--      </div>-->
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('other')">-->
+      <!--        <svg-icon icon-class="dashboard" />-->
+      <!--        <span>安全监管</span>-->
+      <!--      </div>-->
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('relatedParties')">-->
+      <!--        <svg-icon icon-class="dashboard" />-->
+      <!--        <span>相关方</span>-->
+      <!--      </div>-->
+      <!--      <div class="right-menu-item hover-effect" @click="setShowModel('detection')">-->
+      <!--        <svg-icon icon-class="dashboard" />-->
+      <!--        <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: {
diff --git a/src/router/index.js b/src/router/index.js
index 2e0a0a0..ed89dab 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 97eb2a5..3ddc334 100644
--- a/src/views/login/index.vue
+++ b/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)
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index 5f017d6..a27fd94 100644
--- a/src/views/map/index.vue
+++ b/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">
-          <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-select>
-          <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
-          <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
-        </div>
+          <div v-if="isPeopleTrajectory" class="people_trajectory">
+            <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-select>
+            <el-button class="search_btn" @click="addTrajectory">搜索</el-button>
+            <el-button class="reset_btn" @click="()=>{removeTrajectory();peopleTrajectoryValue = ''}">重置</el-button>
+          </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,
-      peopleTrajectoryValue:''
+      isPeopleTrajectory: false,
+      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].check){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peopleTrajectory') {
+              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].check){
+            if (this.bottomOptionsList[pindex].list[i].type === 'peoplePosition') {
+              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)
diff --git a/src/views/newBI/components/block_title1.vue b/src/views/newBI/components/block_title1.vue
new file mode 100644
index 0000000..2ea9b9c
--- /dev/null
+++ b/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>
diff --git a/src/views/newBI/components/block_title2.vue b/src/views/newBI/components/block_title2.vue
new file mode 100644
index 0000000..3c2d8af
--- /dev/null
+++ b/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>
diff --git a/src/views/newBI/components/block_title3.vue b/src/views/newBI/components/block_title3.vue
new file mode 100644
index 0000000..9d66317
--- /dev/null
+++ b/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>
diff --git a/src/views/newBI/data_center.vue b/src/views/newBI/data_center.vue
new file mode 100644
index 0000000..fb7e109
--- /dev/null
+++ b/src/views/newBI/data_center.vue
@@ -0,0 +1,1265 @@
+<template>
+  <div id="data_center">
+    <div class="header">
+      <div class="title"/>
+    </div>
+    <div class="menu">
+      <div class="item" @click="$router.push({path:'/guide/double_prevention'})">双重预防管理</div>
+      <div class="item" @click="$router.push({path:'/guide/related_parties'})">相关方管理</div>
+    </div>
+    <div class="qiu">
+      <div class="qiu_placeholder" @click="$router.push({path:'/map'})"/>
+      <div class="stars">
+        <div v-for="item in 3" :key="item" :class="['star' + item]"/>
+      </div>
+      <div class="left">
+        <div class="item" style="--y:240px;">
+          <div class="text">视频监控</div>
+          <img src="../../assets/share/i7.png" alt="">
+        </div>
+        <div class="item" style="--y:420px;">
+          <div class="text">气象监测</div>
+          <img src="../../assets/share/i8.png" alt="">
+        </div>
+      </div>
+      <div class="right">
+        <div class="item" style="--y:240px;">
+          <img src="../../assets/share/i9.png" alt="">
+          <div class="text">人员定位</div>
+        </div>
+        <div class="item" style="--y:420px;">
+          <img src="../../assets/share/i10.png" alt="">
+          <div class="text">口门门禁</div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="left">
+        <div class="block1">
+          <block-title1 title="双重预防机制建设"/>
+          <div class="items">
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i1.png" alt="">
+              </div>
+              <div class="label">开展风险辨识企业数</div>
+              <div class="value">
+                <count-to :end-val="1414"/>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i2.png" alt="">
+              </div>
+              <div class="label">编制检查清单企业数</div>
+              <div class="value">
+                <count-to :end-val="1414"/>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i3.png" alt="">
+              </div>
+              <div class="label">股份安全、环境检查数</div>
+              <div class="value">
+                <count-to :end-val="1414"/>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="block2">
+          <block-title1 title="消防安全管理统计"/>
+          <div id="main1"/>
+        </div>
+        <div class="block3">
+          <block-title1 title="安全作业统计"/>
+          <div class="table">
+            <div class="tr">
+              <div class="td">公司名称</div>
+              <div class="td">申请数</div>
+              <div class="td">进行数</div>
+              <div class="td">作废数</div>
+              <div class="td">完成数</div>
+            </div>
+            <vue-seamless-scroll
+              :data="homeworkStatisticsList"
+              :class-option="{
+                step: 0.5,
+                limitMoveNum: 5,
+                hoverStop: true,
+                direction: 1,
+                openWatch: true,
+                singleHeight: 0,
+                singleWidth: 0,
+                waitTime: 1000
+              }"
+              style="height:370px; overflow: hidden;">
+              <div v-for="(item,index) in homeworkStatisticsList" :key="index" class="tr">
+                <div class="td">{{ item.name }}</div>
+                <div class="td">{{ item.apply }}</div>
+                <div class="td">{{ item.doing }}</div>
+                <div class="td">{{ item.cancel }}</div>
+                <div class="td">{{ item.finish }}</div>
+              </div>
+            </vue-seamless-scroll>
+          </div>
+        </div>
+      </div>
+      <div class="center">
+        <div class="block4">
+          <div class="items">
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i4.png" alt="">
+              </div>
+              <div>
+                <div>
+                  <span class="label">股份部门数：</span>
+                  <span class="value">
+                    <count-to :end-val="1414"/>
+                  </span>
+                </div>
+                <div style="margin-top: 15px;">
+                  <span class="label">股份公司用户数：</span>
+                  <span class="value">
+                    <count-to :end-val="1414"/>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i5.png" alt="">
+              </div>
+              <div>
+                <div>
+                  <span class="label">分公司数：</span>
+                  <span class="value">
+                    <count-to :end-val="1414"/>
+                  </span>
+                </div>
+                <div style="margin-top: 15px;">
+                  <span class="label">分公司用户数：</span>
+                  <span class="value">
+                    <count-to :end-val="1414"/>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i6.png" alt="">
+              </div>
+              <div>
+                <div>
+                  <span class="label">相关方单位数：</span>
+                  <span class="value">
+                    <count-to :end-val="1414"/>
+                  </span>
+                </div>
+                <div style="margin-top: 15px;">
+                  <span class="label">相关方单位用户数：</span>
+                  <span class="value">
+                    <count-to :end-val="1414"/>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="block5">
+          <block-title1 title="重点工程统计"/>
+          <div id="main2"/>
+        </div>
+        <div class="block6">
+          <block-title1 title="相关方单位"/>
+          <div class="tabs">
+            <div
+              v-for="(item,index) in tabsList"
+              :key="index"
+              :class="['tab',{active: index === tabIndex}]"
+              @click="changeTabs(index)"
+            >
+              {{ item }}
+            </div>
+          </div>
+          <div v-if="tabIndex === 0" id="main3"/>
+          <div v-if="tabIndex === 1" id="main4"/>
+        </div>
+        <div class="block7">
+          <block-title1 title="安全承诺情况统计"/>
+          <div class="search">
+            <el-date-picker v-model="homeworkDate" type="year" placeholder="选择年" style="width: 150px;"/>
+          </div>
+          <div class="table">
+            <div class="tr">
+              <div class="td">序号</div>
+              <div class="td">公司名称</div>
+              <div class="td">年份</div>
+              <div class="td">安全承诺书数</div>
+              <div class="td">应签署人数</div>
+              <div class="td">已签署人数</div>
+            </div>
+            <vue-seamless-scroll
+              :data="homeworkStatisticsList"
+              :class-option="{
+                step: 0.5,
+                limitMoveNum: 5,
+                hoverStop: true,
+                direction: 1,
+                openWatch: true,
+                singleHeight: 0,
+                singleWidth: 0,
+                waitTime: 1000
+              }"
+              style="height:300px; overflow: hidden;">
+              <div v-for="(item,index) in promiseStatisticsList" :key="index" class="tr">
+                <div class="td">{{ index + 1 }}</div>
+                <div class="td">{{ item.name }}</div>
+                <div class="td">{{ item.year }}</div>
+                <div class="td">{{ item.count }}</div>
+                <div class="td">{{ item.total_people }}</div>
+                <div class="td">{{ item.signed_people }}</div>
+              </div>
+            </vue-seamless-scroll>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import autofit from 'autofit.js'
+import BlockTitle1 from './components/block_title1.vue'
+import * as echarts from 'echarts'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import CountTo from 'vue-count-to'
+
+let myChart1 = null
+let myChart2 = null
+let myChart3 = null
+let myChart4 = null
+export default {
+  components: {
+    BlockTitle1,
+    vueSeamlessScroll,
+    CountTo
+  },
+  data() {
+    return {
+      homeworkDate: '',
+      homeworkStatisticsList: [
+        { name: '公司1', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司2', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司3', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司4', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司5', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司6', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司7', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司8', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司9', apply: 10, doing: 20, cancel: 30, finish: 40 },
+        { name: '公司10', apply: 10, doing: 20, cancel: 30, finish: 40 }
+      ],
+      tabsList: ['集团单位', '用工类型'],
+      tabIndex: 0,
+      promiseStatisticsList: [
+        { name: '集团单位1', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位2', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位3', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位4', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位5', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位6', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位7', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位8', year: '2020', count: 10, total_people: 20, signed_people: 30 },
+        { name: '集团单位9', year: '2020', count: 10, total_people: 20, signed_people: 30 }
+      ]
+    }
+  },
+  mounted() {
+    autofit.init({
+      dh: 1080,
+      dw: 1920,
+      el: '#data_center',
+      resize: true
+    })
+    this.initEcharts1()
+    this.initEcharts2()
+    this.initEcharts3()
+    window.onresize = function() {
+      myChart1 && myChart1.resize()
+      myChart2 && myChart2.resize()
+      myChart3 && myChart3.resize()
+      myChart4 && myChart4.resize()
+    }
+  },
+  beforeDestroy() {
+    autofit.off()
+    myChart1 && myChart1.dispose()
+    myChart1 = null
+    myChart2 && myChart2.dispose()
+    myChart2 = null
+    myChart3 && myChart3.dispose()
+    myChart3 = null
+    myChart4 && myChart4.dispose()
+    myChart4 = null
+  },
+  methods: {
+    initEcharts1() {
+      const data = []
+      for (let i = 0; i < 30; i++) {
+        data.push({
+          name: `卓云企业${i + 1}`,
+          count1: Math.floor(Math.random() * 100),
+          count2: Math.floor(Math.random() * 100),
+          count3: Math.floor(Math.random() * 100)
+        })
+      }
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      const seriesData3 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+        seriesData3.push(data[i].count3)
+      }
+      myChart1 = echarts.init(document.querySelector('#main1'))
+      const option = {
+        legend: {
+          type: 'plain',
+          icon: 'rect',
+          top: 0,
+          right: 0,
+          itemWidth: 20,
+          itemHeight: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          left: 0,
+          top: 40,
+          bottom: 20,
+          right: 0,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 20,
+            color: '#fff',
+            rotate: 20
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          padding: [12, 17, 20, 23],
+          textStyle: {
+            color: '#424242'
+          }
+        },
+        dataZoom: [
+          {
+            start: 0,
+            end: 20,
+            type: 'slider',
+            show: true,
+            xAxisIndex: [0],
+            handleSize: 8,
+            height: 8,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            handleColor: '#094177',
+            handleStyle: {
+              borderColor: '#094177',
+              borderWidth: '1',
+              shadowBlur: 2,
+              background: '#0a1e48',
+              shadowColor: '#094177'
+            },
+            fillerColor: '#094177',
+            backgroundColor: '#0a1e48',
+            showDataShadow: false,
+            showDetail: false,
+            handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            filterMode: 'filter'
+          },
+          {
+            type: 'inside',
+            show: true,
+            xAxisIndex: [0],
+            start: 0,
+            end: 20
+          }
+        ],
+        series: [
+          {
+            name: '消防区域数',
+            type: 'line',
+            data: seriesData1,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#3dddfb'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#3dddfb'
+            },
+            areaStyle: {
+              color: 'rgba(61,221,251,0.15)'
+            }
+          },
+          {
+            name: '消防点位数',
+            type: 'line',
+            data: seriesData2,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#f8b001'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#f8b001'
+            },
+            areaStyle: {
+              color: 'rgba(248,176,1,0.15)'
+            }
+          },
+          {
+            name: '消防设备数',
+            type: 'line',
+            data: seriesData3,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#ff0600'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#ff0600'
+            },
+            areaStyle: {
+              color: 'rgba(255,6,0,0.15)'
+            }
+          }
+        ]
+      }
+      myChart1.setOption(option)
+    },
+    initEcharts2() {
+      // 建议10个,太多右侧展示不开
+      const color = ['#0592ef', '#056de9', '#35dc87', '#ebea60', '#ffbe2d', '#bd46ff', '#00d2ff', '#00ffe4', '#00ff78', '#ff0000']
+      const data = []
+      for (let i = 0; i < 10; i++) {
+        data.push({
+          name: `卓云企业${i + 1}`,
+          count1: Math.floor(Math.random() * 100),
+          color: color[i]
+        })
+      }
+      const seriesData = []
+      for (let i = 0; i < data.length; i++) {
+        seriesData.push({
+          value: data[i].count1,
+          name: data[i].name,
+          itemStyle: {
+            color: data[i].color,
+            borderColor: data[i].color
+          }
+        })
+      }
+      myChart2 = echarts.init(document.querySelector('#main2'))
+      const option = {
+        legend: {
+          orient: 'vertical',
+          top: 'center',
+          right: 5,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['20%', '80%'],
+            center: ['20%', '50%'],
+            roseType: 'radius',
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: seriesData
+          }
+        ]
+      }
+      myChart2.setOption(option)
+    },
+    changeTabs(index) {
+      this.tabIndex = index
+      this.$nextTick(() => {
+        if (index === 0) {
+          myChart4 && myChart4.dispose()
+          myChart4 = null
+          this.initEcharts3()
+        } else {
+          myChart3 && myChart3.dispose()
+          myChart3 = null
+          this.initEcharts4()
+        }
+      })
+    },
+    initEcharts3() {
+      const data = [
+        { name: '河港机械', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '河港港工', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '河港检测', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '方宇物业', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '集采中心', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '沧州矿石', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '曹妃甸实业', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        {
+          name: '河北港口集团数联科技（雄安）有限公司',
+          count1: Math.floor(Math.random() * 100),
+          count2: Math.floor(Math.random() * 100)
+        },
+        { name: '曹妃甸煤炭', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '其它', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) }
+      ]
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+      }
+      myChart3 = echarts.init(document.querySelector('#main3'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          right: '0%',
+          itemWidth: 20,
+          itemHeight: 10,
+          top: '5%',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        grid: {
+          left: 0,
+          top: 40,
+          bottom: 20,
+          right: 0,
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          splitNumber: 7,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            margin: 20,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            margin: 20,
+            rotate: 20,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          },
+          data: xAxisData
+        },
+        dataZoom: [
+          {
+            start: 0,
+            end: 50,
+            type: 'slider',
+            show: true,
+            xAxisIndex: [0],
+            handleSize: 8,
+            height: 8,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            handleColor: '#094177',
+            handleStyle: {
+              borderColor: '#094177',
+              borderWidth: '1',
+              shadowBlur: 2,
+              background: '#0a1e48',
+              shadowColor: '#094177'
+            },
+            fillerColor: '#094177',
+            backgroundColor: '#0a1e48',
+            showDataShadow: false,
+            showDetail: false,
+            handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            filterMode: 'filter'
+          },
+          {
+            type: 'inside',
+            show: true,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50
+          }
+        ],
+        series: [
+          {
+            name: '企业数',
+            type: 'bar',
+            data: seriesData1,
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0,254,180,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,254,180,0)'
+              }
+              ], false)
+            }
+          },
+          {
+            name: '人员数',
+            type: 'bar',
+            data: seriesData2,
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(206,254,253,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(206,254,253,0)'
+              }
+              ], false)
+            }
+          }
+        ]
+      }
+      myChart3.setOption(option)
+    },
+    initEcharts4() {
+      const data = [
+        { name: '劳务物业服务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '客户雇佣劳务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '设备安装维修类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '工程项目施工类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '设备设施租赁类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '环保绿化消杀类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '物资供应类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '船舶服务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '流机服务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '检验检测类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '煤炭采制样类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '集疏港作业类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '船舶代理类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '货主客户类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) }
+      ]
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+      }
+      myChart4 = echarts.init(document.querySelector('#main4'))
+      const option = {
+        legend: {
+          right: '5%',
+          itemWidth: 8,
+          itemHeight: 8,
+          top: '5%',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        grid: {
+          left: 0,
+          top: 40,
+          bottom: 20,
+          right: 0,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            length: 3
+          },
+          axisLabel: {
+            color: '#fff',
+            rotate: 20
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          padding: [12, 17, 20, 23],
+          textStyle: {
+            color: '#424242'
+          }
+        },
+        dataZoom: [
+          {
+            start: 0,
+            end: 50,
+            type: 'slider',
+            show: true,
+            xAxisIndex: [0],
+            handleSize: 8,
+            height: 8,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            handleColor: '#094177',
+            handleStyle: {
+              borderColor: '#094177',
+              borderWidth: '1',
+              shadowBlur: 2,
+              background: '#0a1e48',
+              shadowColor: '#094177'
+            },
+            fillerColor: '#094177',
+            backgroundColor: '#0a1e48',
+            showDataShadow: false,
+            showDetail: true,
+            handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            filterMode: 'filter'
+          },
+          {
+            type: 'inside',
+            show: true,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50
+          }
+        ],
+        series: [
+          {
+            name: '企业数',
+            type: 'line',
+            data: seriesData1,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#3dddfb'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#3dddfb'
+            },
+            areaStyle: {
+              color: 'rgba(61,221,251,0.15)'
+            }
+          },
+          {
+            name: '人员数',
+            type: 'line',
+            data: seriesData2,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#f8b001'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#f8b001'
+            },
+            areaStyle: {
+              color: 'rgba(248,176,1,0.15)'
+            }
+          }
+        ]
+      }
+      myChart4.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#data_center {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../../assets/share/bg2.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  color: #fff;
+
+  .menu {
+    position: absolute;
+    right: 20px;
+    top: 40px;
+    display: flex;
+
+    .item {
+      width: 135px;
+      height: 35px;
+      background-image: url("../../assets/share/ibg3.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-left: 12px;
+      font-size: 14px;
+      text-align: center;
+      line-height: 35px;
+      cursor: pointer;
+    }
+  }
+
+  .qiu {
+    width: 1000px;
+    height: 855px;
+    background-image: url("../../assets/share/qiu.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .qiu_placeholder {
+      width: 400px;
+      height: 400px;
+      position: absolute;
+      top: 174px;
+      left: 275px;
+      cursor: pointer;
+      z-index: 9;
+    }
+
+    .stars {
+      width: 400px;
+      height: 400px;
+      position: absolute;
+      bottom: 250px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+      @function createShadow($count) {
+        $boxShadow: 0 0 0 0 #fff;
+
+        @for $i from 0 through $count {
+          $boxShadow: "#{$boxShadow}, #{random(400)}px #{random(400)}px 0 0 #fff";
+        }
+
+        @return unquote($boxShadow);
+      }
+      $count: 50;
+      $duration: 10;
+      @for $i from 1 through 3 {
+        $currentCount: floor($count / $i);
+        $currentDuration: floor($duration / $i);
+        .star#{$i} {
+          $size: #{$i * 2}px;
+          width: $size;
+          height: $size;
+          position: fixed;
+          background-color: #fff;
+          border-radius: 50%;
+          box-shadow: createShadow($currentCount);
+          transform-origin: center bottom;
+          animation: moveUp #{$currentDuration}s linear infinite;
+
+          &::after {
+            content: "";
+            position: fixed;
+            left: 0;
+            top: 400px;
+            width: inherit;
+            height: inherit;
+            border-radius: inherit;
+            box-shadow: inherit;
+          }
+        }
+      }
+
+      @keyframes moveUp {
+        100% {
+          transform: translateY(-400px);
+        }
+      }
+    }
+
+    img {
+      width: 46px;
+      height: 46px;
+    }
+
+    .text {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    .item {
+      width: 151px;
+      height: 66px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: var(--y);
+    }
+
+    .left {
+      position: relative;
+
+      .item {
+        background-image: url("../../assets/share/ibg1.png");
+        left: 50px;
+      }
+    }
+
+    .right {
+      position: relative;
+
+      .item {
+        background-image: url("../../assets/share/ibg2.png");
+        right: 50px;
+      }
+    }
+  }
+
+  .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: 264px;
+      height: 43px;
+      background-image: url("../../assets/share/title1.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .container {
+    padding: 96px 20px 0;
+    display: flex;
+
+    .left {
+      flex-basis: 440px;
+
+      .block1 {
+        .items {
+          padding: 20px 0;
+          display: flex;
+          justify-content: space-between;
+
+          .item {
+            text-align: center;
+
+            .img {
+              width: 77px;
+              height: 82px;
+              margin: auto;
+              background-image: url("../../assets/share/i1bg.png");
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              position: relative;
+
+              img {
+                width: 35px;
+                height: 40px;
+                position: absolute;
+                top: 15px;
+                left: 50%;
+                transform: translateX(-50%);
+              }
+            }
+
+            .label {
+              margin-top: 8px;
+              font-size: 12px;
+            }
+
+            .value {
+              margin-top: 8px;
+              font-size: 18px;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+
+      .block2 {
+        margin-top: 25px;
+
+        #main1 {
+          margin-top: 20px;
+          width: 100%;
+          height: 225px;
+        }
+      }
+
+      .block3 {
+        margin-top: 25px;
+
+        .table {
+          margin-top: 15px;
+          text-align: center;
+          font-size: 12px;
+
+          .tr {
+            display: grid;
+            grid-template-columns: 40% repeat(4, 1fr);
+            background-color: #08163d;
+            margin-top: 5px;
+
+            .td {
+              padding: 8px 0;
+            }
+          }
+        }
+      }
+    }
+
+    .center {
+      flex: 1;
+
+      .block4 {
+        width: 944px;
+        height: 199px;
+        background-image: url("../../assets/share/centerbg.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        margin: auto;
+        position: relative;
+
+        .items {
+          width: 100%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          display: flex;
+          justify-content: space-evenly;
+
+          .item {
+            flex-basis: 29%;
+            display: flex;
+            align-items: center;
+
+            .img {
+              margin-right: 10px;
+            }
+
+            .label {
+              font-size: 14px;
+            }
+
+            .value {
+              font-size: 16px;
+              font-weight: bold;
+              background-image: linear-gradient(to bottom, #ffffff, #95e0ff);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+          }
+        }
+      }
+    }
+
+    .right {
+      flex-basis: 440px;
+
+      .block5 {
+        #main2 {
+          width: 100%;
+          height: 225px;
+        }
+      }
+
+      .block6 {
+        margin-top: 25px;
+
+        .tabs {
+          display: flex;
+          justify-content: flex-end;
+          font-size: 12px;
+
+          .tab {
+            background-color: rgba(29, 78, 140, 0.61);
+            border: 1px solid #01e7ff;
+            padding: 5px 8px;
+            cursor: pointer;
+
+            &:nth-child(1) {
+              border-right: none;
+              border-top-left-radius: 4px;
+              border-bottom-left-radius: 4px;
+            }
+
+            &:nth-child(2) {
+              border-left: none;
+              border-top-right-radius: 4px;
+              border-bottom-right-radius: 4px;
+            }
+
+            &.active {
+              background-image: linear-gradient(to bottom, #0884fb, #0ed0f9);
+            }
+          }
+        }
+
+        #main3, #main4 {
+          width: 100%;
+          height: 210px;
+        }
+      }
+
+      .block7 {
+        margin-top: 25px;
+
+        .search {
+          display: flex;
+          justify-content: end;
+        }
+
+        .table {
+          margin-top: 15px;
+          text-align: center;
+          font-size: 12px;
+
+          .tr {
+            display: grid;
+            grid-template-columns: 50px 20% repeat(4, 1fr);
+            background-color: #08163d;
+            margin-top: 5px;
+
+            .td {
+              padding: 8px 0;
+
+              &:nth-child(1) {
+                background-color: #0f214f;
+                clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style scoped>
+.search >>> .el-input__inner {
+  background-color: #0e3770 !important;
+  color: #fff !important;
+  border: 1px solid #0e3770 !important;
+}
+</style>
diff --git a/src/views/newBI/double_prevention.vue b/src/views/newBI/double_prevention.vue
new file mode 100644
index 0000000..24d4c20
--- /dev/null
+++ b/src/views/newBI/double_prevention.vue
@@ -0,0 +1,1325 @@
+<template>
+  <div id="double_prevention">
+    <div class="header">
+      <div class="back" @click="$router.back()"/>
+      <div class="title"/>
+    </div>
+    <div class="container">
+      <div class="left">
+        <div class="block1">
+          <block-title2 title="重点工程情况统计"/>
+          <div class="content">
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/ico13.png" alt="">
+              </div>
+              <div>
+                <div class="label">涉及重点工程公司数</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/ico14.png" alt="">
+              </div>
+              <div>
+                <div class="label">重点工程数</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/ico15.png" alt="">
+              </div>
+              <div>
+                <div class="label">发现隐患数</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/ico16.png" alt="">
+              </div>
+              <div>
+                <div class="label">涉及相关方单位数</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="block2">
+          <block-title2 title="各分公司一般隐患统计"/>
+          <div class="content">
+            <div id="main1"/>
+          </div>
+        </div>
+        <div class="block3">
+          <block-title2 title="分公司用户统计"/>
+          <div class="content">
+            <div class="tabs">
+              <div
+                v-for="(item,index) in tabsList"
+                :key="index"
+                :class="['tab',{active: index === tabIndex}]"
+                @click="tabIndex = index"
+              >
+                {{ item }}
+              </div>
+            </div>
+            <div v-if="tabIndex === 0" class="table">
+              <div class="tr">
+                <div class="td">名次</div>
+                <div class="td">企业名称</div>
+                <div class="td">人员数</div>
+              </div>
+              <vue-seamless-scroll
+                :data="staffUsageList"
+                :class-option="{
+                  step: 0.5,
+                  limitMoveNum: 5,
+                  hoverStop: true,
+                  direction: 1,
+                  openWatch: true,
+                  singleHeight: 0,
+                  singleWidth: 0,
+                  waitTime: 1000
+                }"
+                style="height:360px; overflow: hidden;">
+                <div v-for="(item,index) in staffUsageList" :key="index" class="tr">
+                  <div class="td">{{ index + 1 }}</div>
+                  <div class="td">{{ item.name }}</div>
+                  <div class="td">{{ item.count }}</div>
+                </div>
+              </vue-seamless-scroll>
+            </div>
+            <div v-if="tabIndex === 1" class="table">
+              <div class="tr">
+                <div class="td">企业名称</div>
+                <div class="td">部门数</div>
+                <div class="td">班组数</div>
+              </div>
+              <vue-seamless-scroll
+                :data="departmentUsageList"
+                :class-option="{
+                  step: 0.5,
+                  limitMoveNum: 5,
+                  hoverStop: true,
+                  direction: 1,
+                  openWatch: true,
+                  singleHeight: 0,
+                  singleWidth: 0,
+                  waitTime: 1000
+                }"
+                style="height:360px; overflow: hidden;">
+                <div v-for="(item,index) in departmentUsageList" :key="index" class="tr">
+                  <div class="td">{{ item.corpName }}</div>
+                  <div class="td">{{ item.deptCount }}</div>
+                  <div class="td">{{ item.baozuCount }}</div>
+                </div>
+              </vue-seamless-scroll>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="center">
+        <div class="block4">
+          <div class="main_title">本质安全:通过消除隐患减少并杜绝事故</div>
+          <div class="content">
+            <div id="main2"/>
+            <div class="title">海因里希法则 1000∶300∶29∶1法则</div>
+            <div class="subtext">每1起严重事故背后都存在着29次轻微事故，300次未遂事故征兆(事故险情)和1000次事故隐患</div>
+          </div>
+        </div>
+        <div class="block5">
+          <block-title3 title="秦港股份统计"/>
+          <div class="content">
+            <div class="tip">
+              <span>安全环保检查次数：23654</span>
+              <span>发现隐患数：23654</span>
+            </div>
+            <div style="margin-top: 12px;display: flex">
+              <div class="block5_1">
+                <div class="main_title">安全隐患</div>
+                <div id="main3"/>
+              </div>
+              <div class="block5_2">
+                <div class="main_title">秦港股份检查记录</div>
+                <div class="table">
+                  <div class="tr">
+                    <div class="td">检查名称</div>
+                    <div class="td">检查时间</div>
+                  </div>
+                  <vue-seamless-scroll
+                    :data="safetyEnvironmentalInspectionList"
+                    :class-option="{
+                      step: 0.5,
+                      limitMoveNum: 5,
+                      hoverStop: true,
+                      direction: 1,
+                      openWatch: true,
+                      singleHeight: 0,
+                      singleWidth: 0,
+                      waitTime: 1000
+                    }"
+                    style="height:266px; overflow: hidden;">
+                    <div v-for="(item,index) in safetyEnvironmentalInspectionList" :key="index" class="tr">
+                      <div class="td">{{ item.INSPECTION_PLACE }}</div>
+                      <div class="td">{{ item.INSPECTION_TIME_START.substring(0, 10) }}</div>
+                    </div>
+                  </vue-seamless-scroll>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="block6">
+          <block-title2 title="隐患来源"/>
+          <div class="content">
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/ico17.png" alt="">
+              </div>
+              <div class="label">隐患排查</div>
+              <div class="value">
+                <count-to :end-val="1414"/>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/ico18.png" alt="">
+              </div>
+              <div class="label">安全环保检查</div>
+              <div class="value">
+                <count-to :end-val="1414"/>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/ico19.png" alt="">
+              </div>
+              <div class="label">隐患快报</div>
+              <div class="value">
+                <count-to :end-val="1414"/>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="block7">
+          <block-title2 title="隐患处置情况统计"/>
+          <div class="content">
+            <div id="main4"/>
+          </div>
+        </div>
+        <div class="block8">
+          <block-title2 title="隐患检查类型统计"/>
+          <div class="content">
+            <div id="main5"/>
+          </div>
+        </div>
+        <div class="block9">
+          <block-title2 title="危险作业占比"/>
+          <div class="content">
+            <div id="main6"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import autofit from 'autofit.js'
+import BlockTitle2 from './components/block_title2.vue'
+import BlockTitle3 from './components/block_title3.vue'
+import * as echarts from 'echarts'
+import { requestFN } from '@/utils/request'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import CountTo from 'vue-count-to'
+
+let myChart1 = null
+let myChart2 = null
+let myChart3 = null
+let myChart4 = null
+let myChart5 = null
+let myChart6 = null
+export default {
+  components: {
+    BlockTitle2,
+    BlockTitle3,
+    vueSeamlessScroll,
+    CountTo
+  },
+  data() {
+    return {
+      tabsList: ['人员使用情况', '部门使用情况'],
+      tabIndex: -1,
+      staffUsageList: [],
+      departmentUsageList: [],
+      safetyEnvironmentalInspectionList: []
+    }
+  },
+  mounted() {
+    autofit.init({
+      dh: 1080,
+      dw: 1920,
+      el: '#double_prevention',
+      resize: true
+    })
+    this.initEcharts1()
+    this.initEcharts4()
+    this.initEcharts5()
+    this.initEcharts6()
+    window.onresize = function() {
+      myChart1 && myChart1.resize()
+      myChart2 && myChart2.resize()
+      myChart3 && myChart3.resize()
+      myChart4 && myChart4.resize()
+      myChart5 && myChart5.resize()
+      myChart6 && myChart6.resize()
+    }
+    this.getHeinrichData()
+    this.getUserCountBuCorpinfo()
+    this.getCorpDeptCountTop10()
+    this.getSuperInsBySubjectAndTop()
+    this.getHiddenCountByHiddenType()
+  },
+  beforeDestroy() {
+    autofit.off()
+    myChart1 && myChart1.dispose()
+    myChart1 = null
+    myChart2 && myChart2.dispose()
+    myChart2 = null
+    myChart3 && myChart3.dispose()
+    myChart3 = null
+    myChart4 && myChart4.dispose()
+    myChart4 = null
+    myChart5 && myChart5.dispose()
+    myChart5 = null
+    myChart6 && myChart6.dispose()
+    myChart6 = null
+  },
+  methods: {
+    getSuperInsBySubjectAndTop() {
+      requestFN(
+        '/biTongji/getSuperInsBySubjectAndTop',
+        {}
+      ).then((data) => {
+        this.safetyEnvironmentalInspectionList = data.insList
+      })
+    },
+    getUserCountBuCorpinfo() {
+      requestFN(
+        '/biTongji/getCorpUserCountTop10',
+        {}
+      ).then((data) => {
+        data.corpUserCountTop10.forEach((item, index) => {
+          const map = {}
+          map.name = item.CORP_NAME
+          map.count = item.count
+          this.staffUsageList.push(map)
+          this.tabIndex = 0
+        })
+      })
+    },
+    getCorpDeptCountTop10() {
+      requestFN(
+        '/biTongji/getCorpDeptCount',
+        {}
+      ).then((data) => {
+        data.valList.forEach((item, index) => {
+          const map = {}
+          map.corpName = item.corpName
+          map.deptCount = (item.departmentLevel0002 - 0) + (item.departmentLevel0001 - 0)
+          map.baozuCount = item.departmentLevel0003
+          this.departmentUsageList.push(map)
+        })
+      })
+    },
+    getHeinrichData() {
+      requestFN(
+        '/biTongji/getHiddenCountByHeinrich',
+        {}
+      ).then((data) => {
+        const hiddenAllCount = data.pd.HIDDEN_COUNT
+        const hiddenAllCount4 = hiddenAllCount
+        const hiddenAllCount3 = (hiddenAllCount / 3).toFixed(0)
+        const hiddenAllCount2 = Math.floor(hiddenAllCount * (29 / 1000))
+        const hiddenAllCount1 = Math.floor(hiddenAllCount * (1 / 1000))
+        this.initEcharts2(hiddenAllCount1, hiddenAllCount2, hiddenAllCount3, hiddenAllCount4)
+      }).catch((e) => {
+      })
+    },
+    getHiddenCountByHiddenType() {
+      requestFN(
+        '/api/biTongji/getHiddenCountByHiddenType',
+        { }
+      ).then((data) => {
+        this.initEcharts3(data.varList)
+      })
+    },
+    initEcharts1() {
+      const data = []
+      for (let i = 0; i < 12; i++) {
+        data.push({
+          name: `${i + 1}月`,
+          count1: Math.floor(Math.random() * 100),
+          count2: Math.floor(Math.random() * 100)
+        })
+      }
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+      }
+      myChart1 = echarts.init(document.querySelector('#main1'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          right: '0%',
+          itemWidth: 20,
+          itemHeight: 10,
+          top: '5%',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        grid: {
+          left: 0,
+          top: 40,
+          bottom: 0,
+          right: 0,
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          splitNumber: 7,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            margin: 20,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            margin: 20,
+            rotate: 40,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          },
+          data: xAxisData
+        },
+        series: [
+          {
+            name: '重点工程数',
+            type: 'bar',
+            data: seriesData1,
+            barWidth: 10,
+            itemStyle: {
+              barBorderRadius: [10, 10, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0,159,251,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,159,251,0.3)'
+              }
+              ], false)
+            }
+          },
+          {
+            name: '发现隐患数',
+            type: 'bar',
+            data: seriesData2,
+            barWidth: 10,
+            itemStyle: {
+              barBorderRadius: [10, 10, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(69,214,239,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(69,214,239,0.3)'
+              }
+              ], false)
+            }
+          }
+        ]
+      }
+      myChart1.setOption(option)
+    },
+    initEcharts2(hiddenAllCount1, hiddenAllCount2, hiddenAllCount3, hiddenAllCount4) {
+      myChart2 = echarts.init(document.querySelector('#main2'))
+      const option = {
+        color: ['#ef4545', '#f97a1d', '#fac858', '#416aea'],
+        legend: {
+          orient: 'vertical',
+          left: '15%',
+          itemWidth: 20,
+          itemHeight: 10,
+          top: '5%',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        series: [
+          {
+            zlevel: 1,
+            name: '漏斗图',
+            type: 'funnel',
+            left: '10%',
+            top: 20,
+            bottom: 0,
+            width: '80%',
+            min: 0,
+            max: 120,
+            minSize: '0%',
+            maxSize: '100%',
+            sort: 'ascending',
+            gap: 8,
+            label: {
+              show: true,
+              position: 'right',
+              align: 'right',
+              color: '#fff',
+              fontSize: 14,
+              formatter: function(params) {
+                return params.data.name1 + params.data.value1 + params.data.name2
+              }
+            },
+            labelLine: {
+              length: 50,
+              lineStyle: {
+                width: 1,
+                type: 'solid'
+              }
+            },
+            itemStyle: {
+              borderWidth: 0
+            },
+            emphasis: {
+              label: {
+                fontSize: 20
+              }
+            },
+            data: [
+              { value: 10 * 1.5, value1: hiddenAllCount1, name: '严重事故', name1: '消除', name2: '起严重事故' },
+              { value: 20 * 1.5, value1: hiddenAllCount2, name: '轻微事故', name1: '避免', name2: '次轻微事故' },
+              { value: 30 * 1.5, value1: hiddenAllCount3, name: '未遂事故征兆', name1: '避免', name2: '次未遂事故征兆' },
+              { value: 40 * 1.5, value1: hiddenAllCount4, name: '安全隐患', name1: '消除', name2: '次安全隐患' }
+            ]
+          }
+        ]
+      }
+      myChart2.setOption(option)
+    },
+    initEcharts3(data) {
+      const color = ['#0eccf7', '#056ee9', '#63cd97', '#e8e879', '#0eccf7']
+      const seriesData = []
+      for (let i = 0; i < data.length; i++) {
+        seriesData.push({
+          value: data[i].HIDDEN_COUNT,
+          name: data[i].LABEL,
+          itemStyle: {
+            color: color[i],
+            borderColor: color[i]
+          }
+        })
+      }
+      myChart3 = echarts.init(document.querySelector('#main3'))
+      const option = {
+        legend: {
+          bottom: '0',
+          left: 'center',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['20%', '80%'],
+            center: ['50%', '40%'],
+            roseType: 'radius',
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: seriesData
+          }
+        ]
+      }
+      myChart3.setOption(option)
+    },
+    initEcharts4() {
+      const color = ['rgba(119,203,241,1)', 'rgba(248,156,227,1)', 'rgba(253,163,163,1)', 'rgba(255,215,101,1)', 'rgba(36,228,174,1)']
+      const data = [
+        { name: '忽略', count1: Math.floor(Math.random() * 100) },
+        { name: '一般', count1: Math.floor(Math.random() * 100) },
+        { name: '特殊处置', count1: Math.floor(Math.random() * 100) },
+        { name: '较大隐患', count1: Math.floor(Math.random() * 100) },
+        { name: '重大隐患', count1: Math.floor(Math.random() * 100) }
+      ]
+      const seriesData = []
+      for (let i = 0; i < data.length; i++) {
+        seriesData.push({
+          value: data[i].count1,
+          name: data[i].name
+        })
+      }
+      myChart4 = echarts.init(document.querySelector('#main4'))
+      const option = {
+        legend: {
+          orient: 'vertical',
+          top: 'center',
+          right: '0',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          },
+          itemStyle: {
+            borderWidth: 0
+          }
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['35%', '75%'],
+            center: ['30%', '50%'],
+            clockwise: true,
+            avoidLabelOverlap: true,
+            label: {
+              show: false
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return color[params.dataIndex]
+                },
+                borderColor: '#fff',
+                borderWidth: 1
+              }
+            },
+            data: seriesData
+          },
+          {
+            type: 'pie',
+            radius: ['45%', '90%'],
+            center: ['30%', '50%'],
+            clockwise: true,
+            avoidLabelOverlap: true,
+            hoverOffset: 30,
+            label: {
+              show: false
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return color[params.dataIndex].replaceAll(',1)', ',0.2)')
+                }
+              }
+            },
+            data: seriesData
+          }
+        ]
+      }
+      myChart4.setOption(option)
+    },
+    initEcharts5() {
+      const data = []
+      for (let i = 0; i < 12; i++) {
+        data.push({
+          name: `${i + 1}月`,
+          count1: Math.floor(Math.random() * 100),
+          count2: Math.floor(Math.random() * 100),
+          count3: Math.floor(Math.random() * 100)
+        })
+      }
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      const seriesData3 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+        seriesData3.push(data[i].count3)
+      }
+      myChart5 = echarts.init(document.querySelector('#main5'))
+      const option = {
+        legend: {
+          type: 'plain',
+          icon: 'rect',
+          top: 0,
+          right: 0,
+          itemWidth: 20,
+          itemHeight: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          left: 0,
+          top: 40,
+          bottom: 20,
+          right: 0,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            margin: 20,
+            color: '#fff',
+            rotate: 20
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          padding: [12, 17, 20, 23],
+          textStyle: {
+            color: '#424242'
+          }
+        },
+        series: [
+          {
+            name: '安全',
+            type: 'line',
+            data: seriesData1,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#05dcf3'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#05dcf3'
+            },
+            areaStyle: {
+              color: 'rgba(5,220,243,0.15)'
+            }
+          },
+          {
+            name: '环保',
+            type: 'line',
+            data: seriesData2,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#18dba2'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#18dba2'
+            },
+            areaStyle: {
+              color: 'rgba(24,219,162,0.15)'
+            }
+          },
+          {
+            name: '综合',
+            type: 'line',
+            data: seriesData3,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#f7e40f'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#f7e40f'
+            },
+            areaStyle: {
+              color: 'rgba(247,228,15,0.15)'
+            }
+          }
+        ]
+      }
+      myChart5.setOption(option)
+    },
+    initEcharts6() {
+      const data = [
+        { name: '动火作业', value: Math.floor(Math.random() * 100) },
+        { name: '受限空间作业', value: Math.floor(Math.random() * 100) },
+        { name: '吊装作业', value: Math.floor(Math.random() * 100) },
+        { name: '盲板抽堵作业', value: Math.floor(Math.random() * 100) },
+        { name: '动土作业', value: Math.floor(Math.random() * 100) },
+        { name: '断路作业', value: Math.floor(Math.random() * 100) },
+        { name: '高处作业', value: Math.floor(Math.random() * 100) },
+        { name: '设备检维修作业', value: Math.floor(Math.random() * 100) }
+      ]
+      const yAxisData = []
+      const seriesData = []
+      for (let i = 0; i < data.length; i++) {
+        yAxisData.push(data[i].name)
+        seriesData.push(data[i].value)
+      }
+      myChart6 = echarts.init(document.querySelector('#main6'))
+      const colorArray = [
+        {
+          top: '#ff0202',
+          bottom: '#d45305'
+        },
+        {
+          top: '#0078ff',
+          bottom: '#0018ff'
+        },
+        {
+          top: '#ffd765',
+          bottom: '#ffbd00'
+        },
+        {
+          top: '#6bd39f',
+          bottom: '#00ff7d'
+        },
+        {
+          top: '#b246eb',
+          bottom: '#6002a4'
+        },
+        {
+          top: '#f97a1d',
+          bottom: '#bc4f00'
+        },
+        {
+          top: '#0078ff',
+          bottom: '#0018ff'
+        },
+        {
+          top: '#ff7e7e',
+          bottom: '#ff0000'
+        }
+      ]
+      const option = {
+        grid: {
+          top: '0%',
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          containLabel: true
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none'
+          },
+          formatter: '{b} : {c}'
+        },
+        xAxis: {
+          show: true,
+          type: 'value',
+          name: '',
+          nameTextStyle: {
+            color: '#B3CFFF',
+            fontSize: 12
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        yAxis: [{
+          type: 'category',
+          inverse: false,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#B3CFFF'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          data: yAxisData
+        }],
+        series: [{
+          name: '',
+          type: 'bar',
+          barWidth: 14,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [0, 10, 10, 0],
+              color(params) {
+                const num = colorArray.length
+                return {
+                  colorStops: [{
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }]
+                }
+              }
+            }
+          },
+          data: seriesData
+        }]
+      }
+      myChart6.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#double_prevention {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../../assets/share/bg3.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  color: #fff;
+
+  .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;
+
+    .back {
+      width: 77px;
+      height: 34px;
+      background-image: url("../../assets/share/back.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+
+    .title {
+      width: 264px;
+      height: 44px;
+      background-image: url("../../assets/share/title3.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .container {
+    padding: 110px 30px 0;
+    display: flex;
+
+    .left {
+      flex-basis: 500px;
+
+      .block1 {
+        .content {
+          padding: 0 22px 20px 22px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+          display: flex;
+          flex-wrap: wrap;
+
+          .item {
+            margin-top: 20px;
+            flex-basis: 50%;
+            display: flex;
+            align-items: center;
+
+            .img {
+              margin-right: 14px;
+
+              img {
+                width: 52px;
+                height: 46px;
+              }
+            }
+
+            .label {
+              font-size: 12px;
+            }
+
+            .value {
+              margin-top: 8px;
+              font-size: 20px;
+              color: #edb131;
+            }
+          }
+        }
+      }
+
+      .block2 {
+        margin-top: 15px;
+
+        .content {
+          padding: 0 35px 20px 10px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main1 {
+            width: 100%;
+            height: 215px;
+          }
+        }
+      }
+
+      .block3 {
+        margin-top: 15px;
+
+        .content {
+          padding: 8px 13px 8px 8px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          .tabs {
+            display: flex;
+            justify-content: flex-end;
+            font-size: 12px;
+
+            .tab {
+              background-color: #193672;
+              border: 1px solid #2e4a93;
+              padding: 5px 8px;
+              cursor: pointer;
+
+              &:nth-child(1) {
+                border-right: none;
+                border-top-left-radius: 4px;
+                border-bottom-left-radius: 4px;
+              }
+
+              &:nth-child(2) {
+                border-left: none;
+                border-top-right-radius: 4px;
+                border-bottom-right-radius: 4px;
+              }
+
+              &.active {
+                background-image: linear-gradient(to bottom, #07378b, #00a1ff);
+              }
+            }
+          }
+
+          .table {
+            margin-top: 10px;
+            text-align: center;
+            font-size: 12px;
+
+            .tr {
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              background-color: #0d1c43;
+              margin-top: 5px;
+
+              .td {
+                padding: 8px 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .center {
+      flex: 1;
+      padding: 0 20px;
+
+      .block4 {
+        .main_title {
+          width: 609px;
+          height: 58px;
+          background-image: url("../../assets/share/ibg7.png");
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          text-align: center;
+          font-size: 18px;
+          font-weight: bold;
+          line-height: 58px;
+          margin: auto;
+        }
+
+        #main2 {
+          width: 100%;
+          height: 375px;
+        }
+
+        .title {
+          font-weight: bold;
+          font-size: 14px;
+          padding-top: 10px;
+          text-align: center;
+        }
+
+        .subtext {
+          font-size: 14px;
+          text-align: center;
+          padding-top: 15px;
+        }
+      }
+
+      .block5 {
+        margin-top: 25px;
+
+        .content {
+          padding: 20px 15px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          .tip {
+            font-size: 12px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid rgba(53, 82, 144, 0.79);
+
+            &:nth-child(2) {
+              margin-left: 20px;
+            }
+          }
+
+          .block5_1 {
+            flex-basis: 360px;
+
+            .main_title {
+              font-size: 14px;
+              font-weight: bold;
+              margin-bottom: 14px;
+
+              &::before {
+                content: '';
+                background-color: #0eccf7;
+                border-radius: 4px;
+                display: inline-block;
+                width: 6px;
+                height: 13px;
+                margin-right: 9px;
+              }
+            }
+
+            #main3 {
+              width: 100%;
+              height: 288px;
+            }
+          }
+
+          .block5_2 {
+            margin-left: 20px;
+            flex: 1;
+
+            .main_title {
+              font-size: 14px;
+              font-weight: bold;
+
+              &::before {
+                content: '';
+                background-color: #0eccf7;
+                border-radius: 4px;
+                display: inline-block;
+                width: 6px;
+                height: 13px;
+                margin-right: 9px;
+              }
+            }
+
+            .table {
+              margin-top: 10px;
+              text-align: center;
+              font-size: 12px;
+
+              .tr {
+                display: grid;
+                grid-template-columns: 70% 1fr;
+                background-color: rgba(11, 35, 75, 0.55);
+                margin-top: 5px;
+
+                .td {
+                  padding: 8px 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .right {
+      flex-basis: 500px;
+
+      .block6 {
+        .content {
+          padding: 23px 60px 18px 60px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+          display: flex;
+          justify-content: space-between;
+          text-align: center;
+
+          .item {
+            .img {
+              width: 56px;
+              height: 48px;
+              margin: auto;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .label {
+              margin-top: 6px;
+              font-size: 12px;
+            }
+
+            .value {
+              font-size: 20px;
+              color: #fac858;
+            }
+          }
+        }
+      }
+
+      .block7 {
+        margin-top: 15px;
+
+        .content {
+          padding: 20px 60px 16px 60px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main4 {
+            width: 100%;
+            height: 170px;
+          }
+        }
+      }
+
+      .block8 {
+        margin-top: 15px;
+
+        .content {
+          padding: 10px 10px 0 10px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main5 {
+            width: 100%;
+            height: 160px;
+          }
+        }
+      }
+
+      .block9 {
+        margin-top: 15px;
+
+        .content {
+          padding: 20px 10px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main6 {
+            width: 100%;
+            height: 247px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/newBI/guide.vue b/src/views/newBI/guide.vue
new file mode 100644
index 0000000..0e4b02a
--- /dev/null
+++ b/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>
diff --git a/src/views/newBI/index.vue b/src/views/newBI/index.vue
new file mode 100644
index 0000000..2956c13
--- /dev/null
+++ b/src/views/newBI/index.vue
@@ -0,0 +1,12 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+  <router-view/>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/newBI/menuList.js b/src/views/newBI/menuList.js
new file mode 100644
index 0000000..33f1399
--- /dev/null
+++ b/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' })
+    }
+  }
+]
diff --git a/src/views/newBI/related_parties.vue b/src/views/newBI/related_parties.vue
new file mode 100644
index 0000000..dc57c3c
--- /dev/null
+++ b/src/views/newBI/related_parties.vue
@@ -0,0 +1,1232 @@
+<template>
+  <div id="related_parties">
+    <div class="header">
+      <div class="back" @click="$router.back()"/>
+      <div class="title"/>
+    </div>
+    <div class="container">
+      <div class="left">
+        <div class="block1">
+          <block-title2 title="相关服务单位统计"/>
+          <div class="content">
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i11.png" alt="">
+              </div>
+              <div>
+                <div class="label">特种作业</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i12.png" alt="">
+              </div>
+              <div>
+                <div class="label">企业主要负责人</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i13.png" alt="">
+              </div>
+              <div>
+                <div class="label">安全负责人</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="img">
+                <img src="../../assets/share/i14.png" alt="">
+              </div>
+              <div>
+                <div class="label">安全负责人</div>
+                <div class="value">
+                  <count-to :end-val="1414"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="block2">
+          <block-title2 title="相关方单位危险作业数"/>
+          <div class="content">
+            <div id="main1"/>
+          </div>
+        </div>
+        <div class="block3">
+          <block-title2 title="选取形式统计"/>
+          <div class="content">
+            <div id="main2"/>
+          </div>
+        </div>
+      </div>
+      <div class="center">
+        <div class="block4">
+          <div class="img">
+            <img src="../../assets/share/i16.png" alt="">
+          </div>
+          <div class="label">培训总人数</div>
+          <div class="value">
+            <count-to :end-val="141123124"/>
+          </div>
+        </div>
+        <div class="block5">
+          <div>
+            <div class="label">培训通过人数</div>
+            <div class="value">
+              <count-to :end-val="141123124"/>
+            </div>
+          </div>
+          <div class="img">
+            <img src="../../assets/share/i15.png" alt="">
+          </div>
+          <div>
+            <div class="label">培训未通过人数</div>
+            <div class="value">
+              <count-to :end-val="141123124"/>
+            </div>
+          </div>
+        </div>
+        <div class="block6">
+          <block-title3 title="相关方单位保险情况统计"/>
+          <div class="content">
+            <div id="main3"/>
+          </div>
+        </div>
+        <div class="block7">
+          <block-title3 title="培训申请情况统计"/>
+          <div class="content">
+            <div class="search">
+              <el-date-picker v-model="trainDate" type="year" placeholder="选择年" style="width: 150px;"/>
+            </div>
+            <div id="main4"/>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="block8">
+          <block-title2 title="隐患整改情况统计"/>
+          <div class="content">
+            <div id="main5"/>
+          </div>
+        </div>
+        <div class="block9">
+          <block-title2 title="用工类型统计"/>
+          <div class="content">
+            <div id="main6"/>
+          </div>
+        </div>
+        <div class="block10">
+          <block-title2 title="各相关方单位培训数"/>
+          <div class="content">
+            <div class="search">
+              <el-date-picker v-model="trainListDate" type="year" placeholder="选择年" style="width: 150px;"/>
+            </div>
+            <div class="table">
+              <div class="tr">
+                <div class="td">企业名称</div>
+                <div class="td">培训人数</div>
+                <div class="td">通过培训人数</div>
+              </div>
+              <vue-seamless-scroll
+                :data="trainStatisticsList"
+                :class-option="{
+                  step: 0.5,
+                  limitMoveNum: 5,
+                  hoverStop: true,
+                  direction: 1,
+                  openWatch: true,
+                  singleHeight: 0,
+                  singleWidth: 0,
+                  waitTime: 1000
+                }"
+                style="height:220px; overflow: hidden;">
+                <div v-for="(item,index) in trainStatisticsList" :key="index" class="tr">
+                  <div class="td">{{ item.name }}</div>
+                  <div class="td">{{ item.count }}</div>
+                  <div class="td">{{ item.pass_count }}</div>
+                </div>
+              </vue-seamless-scroll>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import autofit from 'autofit.js'
+import BlockTitle2 from './components/block_title2.vue'
+import BlockTitle3 from './components/block_title3.vue'
+import * as echarts from 'echarts'
+import CountTo from 'vue-count-to'
+import BlockTitle1 from './components/block_title1.vue'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
+let myChart1 = null
+let myChart2 = null
+let myChart3 = null
+let myChart4 = null
+let myChart5 = null
+let myChart6 = null
+export default {
+  components: {
+    BlockTitle1,
+    BlockTitle2,
+    BlockTitle3,
+    CountTo,
+    vueSeamlessScroll
+  },
+  data() {
+    return {
+      trainDate: '',
+      trainListDate: '',
+      trainStatisticsList: [
+        { name: '企业1', count: 100, pass_count: 50 },
+        { name: '企业2', count: 100, pass_count: 50 },
+        { name: '企业3', count: 100, pass_count: 50 },
+        { name: '企业4', count: 100, pass_count: 50 },
+        { name: '企业5', count: 100, pass_count: 50 },
+        { name: '企业6', count: 100, pass_count: 50 },
+        { name: '企业7', count: 100, pass_count: 50 },
+        { name: '企业8', count: 100, pass_count: 50 },
+        { name: '企业9', count: 100, pass_count: 50 },
+        { name: '企业10', count: 100, pass_count: 50 }
+      ]
+    }
+  },
+  mounted() {
+    autofit.init({
+      dh: 1080,
+      dw: 1920,
+      el: '#related_parties',
+      resize: true
+    })
+    this.initEcharts1()
+    this.initEcharts2()
+    this.initEcharts3()
+    this.initEcharts4()
+    this.initEcharts5()
+    this.initEcharts6()
+    window.onresize = function() {
+      myChart1 && myChart1.resize()
+      myChart2 && myChart2.resize()
+      myChart3 && myChart3.resize()
+      myChart4 && myChart4.resize()
+      myChart5 && myChart5.resize()
+      myChart6 && myChart6.resize()
+    }
+  },
+  beforeDestroy() {
+    autofit.off()
+    myChart1 && myChart1.dispose()
+    myChart1 = null
+    myChart2 && myChart2.dispose()
+    myChart2 = null
+    myChart3 && myChart3.dispose()
+    myChart3 = null
+    myChart4 && myChart4.dispose()
+    myChart4 = null
+    myChart5 && myChart5.dispose()
+    myChart5 = null
+    myChart6 && myChart6.dispose()
+    myChart6 = null
+  },
+  methods: {
+    initEcharts1() {
+      const data = [
+        { name: '动火作业', value: Math.floor(Math.random() * 100) },
+        { name: '受限空间作业', value: Math.floor(Math.random() * 100) },
+        { name: '吊装作业', value: Math.floor(Math.random() * 100) },
+        { name: '盲板抽堵作业', value: Math.floor(Math.random() * 100) },
+        { name: '动土作业', value: Math.floor(Math.random() * 100) },
+        { name: '断路作业', value: Math.floor(Math.random() * 100) },
+        { name: '高处作业', value: Math.floor(Math.random() * 100) },
+        { name: '设备检维修作业', value: Math.floor(Math.random() * 100) }
+      ]
+      const yAxisData = []
+      const seriesData = []
+      for (let i = 0; i < data.length; i++) {
+        yAxisData.push(data[i].name)
+        seriesData.push(data[i].value)
+      }
+      myChart1 = echarts.init(document.querySelector('#main1'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b} : {c}'
+        },
+        grid: {
+          top: '5%',
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: yAxisData,
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              color: '#fff'
+            },
+            margin: 20,
+            rotate: 20,
+            formatter: function(value) {
+              return value.replaceAll('作业', '')
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          min: 0,
+          name: '',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 12,
+              color: '#fff'
+            }
+          }
+        },
+        series: [{
+          name: '',
+          type: 'pictorialBar',
+          barWidth: 40,
+          symbol: 'path://M-0.000,431.000 C59.528,394.477 61.000,-0.000 61.000,-0.000 C61.000,-0.000 62.472,394.477 122.000,431.000 L-0.000,431.000 Z',
+          symbolClip: false,
+          data: seriesData,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: 'rgba(37,124,255,0.5)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(145,202,255,0.5)'
+            }
+            ], false)
+          }
+        }]
+      }
+      myChart1.setOption(option)
+    },
+    initEcharts2() {
+      const color = ['#0eccf7', '#056ee9']
+      const data = [
+        { name: '招标', value: '123' },
+        { name: '竞争性谈判', value: '112' }
+      ]
+      const seriesData = []
+      for (let i = 0; i < data.length; i++) {
+        seriesData.push({
+          value: data[i].value,
+          name: data[i].name,
+          itemStyle: {
+            color: color[i],
+            borderColor: color[i]
+          }
+        })
+      }
+      myChart2 = echarts.init(document.querySelector('#main2'))
+      const option = {
+        legend: {
+          orient: 'vertical',
+          right: '0',
+          top: 'center',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['20%', '80%'],
+            center: ['40%', '50%'],
+            roseType: 'radius',
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: seriesData
+          }
+        ]
+      }
+      myChart2.setOption(option)
+    },
+    initEcharts3() {
+      const data = [
+        { name: '河港机械', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '河港港工', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '河港检测', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '方宇物业', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '集采中心', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '沧州矿石', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '曹妃甸实业', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        {
+          name: '河北港口集团数联科技（雄安）有限公司',
+          count1: Math.floor(Math.random() * 100),
+          count2: Math.floor(Math.random() * 100)
+        },
+        { name: '曹妃甸煤炭', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '其它', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) }
+      ]
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+      }
+      myChart3 = echarts.init(document.querySelector('#main3'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          right: '0%',
+          itemWidth: 20,
+          itemHeight: 10,
+          top: '5%',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        grid: {
+          left: 0,
+          top: 40,
+          bottom: 20,
+          right: 0,
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          splitNumber: 7,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            margin: 20,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            margin: 20,
+            rotate: 20,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          },
+          data: xAxisData
+        },
+        dataZoom: [
+          {
+            start: 0,
+            end: 50,
+            type: 'slider',
+            show: true,
+            xAxisIndex: [0],
+            handleSize: 8,
+            height: 8,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            handleColor: '#094177',
+            handleStyle: {
+              borderColor: '#094177',
+              borderWidth: '1',
+              shadowBlur: 2,
+              background: '#0a1e48',
+              shadowColor: '#094177'
+            },
+            fillerColor: '#094177',
+            backgroundColor: '#0a1e48',
+            showDataShadow: false,
+            showDetail: false,
+            handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            filterMode: 'filter'
+          },
+          {
+            type: 'inside',
+            show: true,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50
+          }
+        ],
+        series: [
+          {
+            name: '总人数',
+            type: 'bar',
+            data: seriesData1,
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0,254,180,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,254,180,0)'
+              }
+              ], false)
+            }
+          },
+          {
+            name: '缴纳社保人数',
+            type: 'bar',
+            data: seriesData2,
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(206,254,253,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(206,254,253,0)'
+              }
+              ], false)
+            }
+          }
+        ]
+      }
+      myChart3.setOption(option)
+    },
+    initEcharts4() {
+      const data = []
+      for (let i = 0; i < 12; i++) {
+        data.push({
+          name: `${i + 1}月`,
+          count1: Math.floor(Math.random() * 100),
+          count2: Math.floor(Math.random() * 100),
+          count3: Math.floor(Math.random() * 100)
+        })
+      }
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      const seriesData3 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+        seriesData3.push(data[i].count3)
+      }
+      myChart4 = echarts.init(document.querySelector('#main4'))
+      const option = {
+        legend: {
+          type: 'plain',
+          icon: 'rect',
+          top: 0,
+          right: 0,
+          itemWidth: 20,
+          itemHeight: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+            fontWeight: 'normal'
+          }
+        },
+        grid: {
+          left: 0,
+          top: 40,
+          bottom: 20,
+          right: 0,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 20,
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          padding: [12, 17, 20, 23],
+          textStyle: {
+            color: '#424242'
+          }
+        },
+        series: [
+          {
+            name: '申请人数',
+            type: 'line',
+            data: seriesData1,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#05e3fb'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#05e3fb'
+            },
+            areaStyle: {
+              color: 'rgba(61,221,251,0.15)'
+            }
+          },
+          {
+            name: '通过人数',
+            type: 'line',
+            data: seriesData2,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#00ff95'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#00ff95'
+            },
+            areaStyle: {
+              color: 'rgba(248,176,1,0.15)'
+            }
+          },
+          {
+            name: '未通过人数',
+            type: 'line',
+            data: seriesData3,
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#ff0000'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#ff0000'
+            },
+            areaStyle: {
+              color: 'rgba(255,6,0,0.15)'
+            }
+          }
+        ]
+      }
+      myChart4.setOption(option)
+    },
+    initEcharts5() {
+      const seriesData = [
+        { value: 1048, name: '水田' },
+        { value: 735, name: '水浇地' },
+        { value: 580, name: '旱地' }
+      ]
+      myChart5 = echarts.init(document.querySelector('#main5'))
+      const option = {
+        legend: {
+          orient: 'vertical',
+          right: '50px',
+          top: 'center',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            color: ['#8084d8', '#efc158', '#e86064'],
+            radius: '80%',
+            center: ['40%', '50%'],
+            labelLine: {
+              show: false
+            },
+            label: {
+              show: false
+            },
+            data: seriesData
+          }
+        ]
+      }
+      myChart5.setOption(option)
+    },
+    initEcharts6() {
+      const data = [
+        { name: '劳务物业服务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '客户雇佣劳务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '设备安装维修类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '工程项目施工类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '设备设施租赁类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '环保绿化消杀类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '物资供应类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '船舶服务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '流机服务类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '检验检测类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '煤炭采制样类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '集疏港作业类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '船舶代理类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) },
+        { name: '货主客户类', count1: Math.floor(Math.random() * 100), count2: Math.floor(Math.random() * 100) }
+      ]
+      const xAxisData = []
+      const seriesData1 = []
+      const seriesData2 = []
+      for (let i = 0; i < data.length; i++) {
+        xAxisData.push(data[i].name)
+        seriesData1.push(data[i].count1)
+        seriesData2.push(data[i].count2)
+      }
+      myChart6 = echarts.init(document.querySelector('#main6'))
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          right: '0%',
+          itemWidth: 20,
+          itemHeight: 10,
+          top: '5%',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        grid: {
+          left: '20px',
+          top: 40,
+          bottom: 20,
+          right: 0,
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          splitNumber: 7,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(53, 65, 77, 1)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            margin: 20,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            margin: 20,
+            rotate: 20,
+            textStyle: {
+              color: 'rgba(180, 192, 204, 1)'
+            }
+          },
+          data: xAxisData
+        },
+        dataZoom: [
+          {
+            start: 0,
+            end: 50,
+            type: 'slider',
+            show: true,
+            xAxisIndex: [0],
+            handleSize: 8,
+            height: 8,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            handleColor: '#094177',
+            handleStyle: {
+              borderColor: '#094177',
+              borderWidth: '1',
+              shadowBlur: 2,
+              background: '#0a1e48',
+              shadowColor: '#094177'
+            },
+            fillerColor: '#094177',
+            backgroundColor: '#0a1e48',
+            showDataShadow: false,
+            showDetail: false,
+            handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            filterMode: 'filter'
+          },
+          {
+            type: 'inside',
+            show: true,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50
+          }
+        ],
+        series: [
+          {
+            name: '企业数',
+            type: 'bar',
+            data: seriesData1,
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0,250,177,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,250,177,0)'
+              }
+              ], false)
+            }
+          },
+          {
+            name: '人员数',
+            type: 'bar',
+            data: seriesData2,
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(1,158,250,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(1,158,250,0)'
+              }
+              ], false)
+            }
+          }
+        ]
+      }
+      myChart6.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#related_parties {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../../assets/share/bg3.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  color: #fff;
+
+  .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;
+
+    .back {
+      width: 77px;
+      height: 34px;
+      background-image: url("../../assets/share/back.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+
+    .title {
+      width: 220px;
+      height: 43px;
+      background-image: url("../../assets/share/title2.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .container {
+    padding: 110px 30px 0;
+    display: flex;
+
+    .left {
+      flex-basis: 500px;
+
+      .block1 {
+        .content {
+          padding: 0 22px 20px 22px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+          display: flex;
+          flex-wrap: wrap;
+
+          .item {
+            margin-top: 20px;
+            flex-basis: 50%;
+            display: flex;
+            align-items: center;
+
+            .img {
+              margin-right: 14px;
+              width: 52px;
+              height: 45px;
+              background-image: url("../../assets/share/ibg6.png");
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+              position: relative;
+
+              img {
+                width: 28px;
+                height: 28px;
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+              }
+            }
+
+            .label {
+              font-size: 12px;
+            }
+
+            .value {
+              margin-top: 8px;
+              font-size: 20px;
+              color: #edb131;
+            }
+          }
+        }
+      }
+
+      .block2 {
+        margin-top: 15px;
+
+        .content {
+          padding: 35px 40px 22px 10px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main1 {
+            width: 100%;
+            height: 280px;
+          }
+        }
+      }
+
+      .block3 {
+        margin-top: 15px;
+
+        .content {
+          padding: 35px 40px 22px 10px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main2 {
+            width: 100%;
+            height: 280px;
+          }
+        }
+      }
+    }
+
+    .center {
+      flex: 1;
+      padding: 0 20px;
+      min-width: calc(1000px / 1920);
+
+      .block4 {
+        margin: 30px auto auto;
+        padding-bottom: 20px;
+        width: 754px;
+        height: 90px;
+        background-image: url("../../assets/share/ibg4.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .img {
+          width: 39px;
+          height: 43px;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .label {
+          margin-left: 15px;
+          font-size: 20px;
+        }
+
+        .value {
+          margin-left: 20px;
+          font-size: 60px;
+          font-weight: bold;
+          background-image: linear-gradient(to bottom, #ffffff, #95e0ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+
+      .block5 {
+        margin: 10px auto auto;
+        width: 789px;
+        height: 82px;
+        background-image: url("../../assets/share/ibg5.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .img {
+          width: 73px;
+          height: 84px;
+          margin: 10px 30px 0 30px;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .label {
+          font-size: 15px;
+        }
+
+        .value {
+          font-size: 25px;
+          font-weight: bold;
+          background-image: linear-gradient(to bottom, #ff6e6e, #ff0000);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+
+        > div:nth-child(1) {
+          text-align: right;
+
+          .value {
+            background-image: linear-gradient(to bottom, #c3ffe1, #16ff89);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+        }
+      }
+
+      .block6 {
+        margin-top: 20px;
+
+        .content {
+          padding: 30px 20px 20px 20px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main3 {
+            width: 100%;
+            height: 255px;
+          }
+        }
+      }
+
+      .block7 {
+        margin-top: 20px;
+
+        .content {
+          padding: 0 20px 20px 20px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          .search {
+            margin-top: 10px;
+            display: flex;
+            justify-content: end;
+          }
+
+          #main4 {
+            margin-top: 15px;
+            width: 100%;
+            height: 245px;
+          }
+        }
+      }
+    }
+
+    .right {
+      flex-basis: 500px;
+
+      .block8 {
+        .content {
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main5 {
+            margin-top: 15px;
+            width: 100%;
+            height: 200px;
+          }
+        }
+      }
+
+      .block9 {
+        margin-top: 20px;
+
+        .content {
+          padding: 20px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          #main6 {
+            width: 100%;
+            height: 240px;
+          }
+        }
+      }
+
+      .block10 {
+        margin-top: 20px;
+
+        .content {
+          padding: 10px 20px 20px 20px;
+          border: 1px solid #1f3a88;
+          background-image: linear-gradient(to bottom, rgba(0, 17, 53, 0), #001135);
+
+          .search {
+            display: flex;
+            justify-content: end;
+          }
+
+          .table {
+            margin-top: 15px;
+            text-align: center;
+            font-size: 12px;
+
+            .tr {
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              background-color: #08163d;
+              margin-top: 5px;
+
+              .td {
+                padding: 8px 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style scoped>
+.search >>> .el-input__inner {
+  background-color: #0e3770 !important;
+  color: #fff !important;
+  border: 1px solid #0e3770 !important;
+}
+</style>
diff --git a/static/login/images/bg1.png b/static/login/images/bg1.png
new file mode 100644
index 0000000..be49a77
Binary files /dev/null and b/static/login/images/bg1.png differ
diff --git a/static/login/images/bg2.png b/static/login/images/bg2.png
new file mode 100644
index 0000000..858d759
Binary files /dev/null and b/static/login/images/bg2.png differ
diff --git a/static/login/images/logo.png b/static/login/images/logo.png
new file mode 100644
index 0000000..ca2496a
Binary files /dev/null and b/static/login/images/logo.png differ
diff --git a/static/login/index.html b/static/login/index.html
new file mode 100644
index 0000000..6c4dd03
--- /dev/null
+++ b/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>