大数据展示页面

src/components/BigDataPopup/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-dialog :fullscreen="true" :append-to-body="true" :visible.sync="show" :show-close="false" top="0"
+             custom-class="big-data-dialog">
+    <img src="@/assets/images/ems/bigData.png" alt="">
+    <div class="close-btn" @click="show=false">
+      <i class="el-icon-close"></i>
+    </div>
+  </el-dialog>
+</template>
+<style lang="scss" scoped>
+.close-btn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  font-size: 23px;
+  line-height: 20px;
+  color: rgba(176, 228, 255, 0.7);
+  cursor: pointer;
+}
+
+img {
+  height: 100vh;
+  width: 100vw;
+  display: block;
+  margin: 0;
+}
+</style>
+<style lang="scss">
+.big-data-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding: 0;
+    margin: 0;
+    position: relative;
+  }
+}
+</style>
+<script>
+export default {
+  data() {
+    return {
+      show: false
+    }
+  }
+}
+</script>

src/layout/components/Navbar.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+               @toggleClick="toggleSideBar"/>
 
     <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container"/>
     <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container"/>
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+        <div class="big-data-container">
+          <i class="el-icon-s-marketing big-data-icon" @click.stop="showBigDataImg"></i>
+        </div>
+
         <search id="header-search" class="right-menu-item"/>
 
 
@@ -32,11 +37,11 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-
       <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
         <svg-icon icon-class="more-up"/>
       </div>
     </div>
+    <BigDataPopup ref="bigDataPopup"/>
   </div>
 </template>
 
@@ -48,6 +53,7 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
+import BigDataPopup from '@/components/BigDataPopup'
 
 export default {
   emits: ['setLayout'],
@@ -57,7 +63,8 @@ export default {
     Hamburger,
     Screenfull,
     SizeSelect,
-    Search
+    Search,
+    BigDataPopup
   },
   computed: {
     ...mapGetters([
@@ -78,6 +85,9 @@ export default {
     }
   },
   methods: {
+    showBigDataImg() {
+      this.$refs.bigDataPopup.show = true
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -93,7 +103,8 @@ export default {
         this.$store.dispatch('LogOut').then(() => {
           location.href = '/index'
         })
-      }).catch(() => {})
+      }).catch(() => {
+      })
     }
   }
 }
@@ -139,6 +150,17 @@ export default {
     height: 100%;
     line-height: 50px;
 
+    .big-data-container {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 24px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+      cursor: pointer;
+    }
+
+
     &:focus {
       outline: none;
     }