tj

src/App - 副本.vue

-<template>
-  <div id="app">
-    <router-view />
-
-  </div>
-</template>
-
-<script>
-import util from '@/libs/util.js'
-import util from '@/libs/util.js'
-export default {
-  name: 'app',
-  data () {
-    return {
-      LogTimeout: null
-    }
-  },
-  mounted () {
-    //let token = util.cookies.get('token')
-    //this.initWebSocket()
-    // this.setTimeout()
-
-  },
-  destroyed: function () {
-    this.websocketclose()
-  },
-  methods: {
-    //初始化weosocket
-    initWebSocket () {
-      if (typeof WebSocket === 'undefined') {
-        alert('您的浏览器不支持WebSocket')
-        return false
-      }
-      // websocket地址
-      const wsuri = this.$http.adornUrl('').slice(5)
-      const webpath =
-        'ws:' + wsuri.substring(0, wsuri.indexOf(':')) + ':8091/websocket/1001'
-      this.websock = new WebSocket(webpath)
-      this.websock.onopen = this.websocketonopen
-      this.websock.onmessage = this.websocketonmessage
-      this.websock.onerror = this.websocketonerror
-      this.websock.onclose = this.websocketclose
-
-      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-      window.onbeforeunload = this.onbeforeunload
-    },
-    //连接成功
-    websocketonopen () {
-      console.log('WebSocket连接成功')
-    },
-    //接收后端返回的数据
-    websocketonmessage (e) {
-      console.log(e + '*****')
-      let dataJson = e.data
-      console.log(dataJson + '*****')
-      // 在这里使用后端返回的数据，对数据进行处理渲染
-    },
-    //连接建立失败重连
-    websocketonerror (e) {
-      console.log(`连接失败的信息：`, e)
-      this.initWebSocket() // 连接失败后尝试重新连接
-    },
-    //关闭连接
-    websocketclose (e) {
-      console.log('断开连接', e)
-    },
-    //设置定时器
-    setTimeout () {
-      if (this.LogTimeout) {
-        this.closeTimeout()
-      }
-      this.LogTimeout = setInterval(this.getDateList, 5000)
-    },
-    // 关闭定时器
-    closeTimeout () {
-      if (this.LogTimeout) {
-        clearInterval(this.LogTimeout)
-      }
-    },
-    getDateList () {
-      console.log('开始定时循环')
-      if (util.cookies.get('token') && util.cookies.get('token') != undefined) {
-        this.$http({
-          url: this.$http.adornUrlAlarm('/alarmsInfo/queryList'),
-          method: 'post',
-          params: this.$http.adornParams({
-            status: 1,
-            stationId: localStorage.getItem('stationId')
-          })
-        }).then(data => {
-          if (data && data.code === 0) {
-            this.dataList = data.list
-
-            console.log('报警弹框')
-            for (var i = 0; i < data.list.length; i++) {
-              if (i === 4) {
-                break
-              }
-              this.$toast({
-                tip: 'tip' + (i + 1),
-                id: data.list[i].id,
-                stationName: '', //站点名
-                tierName: data.list[i].tierName, //站层名
-                resourceName: data.list[i].resourceName, //资源点名
-                occurrenceSite: data.list[i].occurrenceSite, //发生地点
-                level: data.list[i].eventLevel, // 等级
-                times: data.list[i].occurrenceTime, //时间
-                type: data.list[i].eventName, // 类型
-                // explain: data.list[i].explain, //说明
-                // url: data.list[i].url, //图片地址
-                duration: '4900',
-                router: this.$router
-              })
-            }
-            // this.closeTimeout()
-          }
-        })
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-@import "~@/assets/style/public-class.scss";
-.d2-layout-header-aside-group
-  .d2-layout-header-aside-content
-  .d2-theme-container
-  .d2-theme-container-main
-  .d2-theme-container-main-body
-  .container-component
-  .d2-container-full
-  .d2-container-full__body {
-  margin-bottom: 50px;
-}
-
-//-- 公共样式--//
-//  page页背景色
-.d2-container-full__body {
-  background-color: #b9c9e3 !important;
-}
-
-// 状态-点
-// .danger,
-// .success,
-// .warning {
-//   width: 5px;
-//   height: 5px;
-//   border-radius: 100%;
-//   background: #ff3723;
-//   display: inline-block;
-//   vertical-align: middle;
-// }
-// .success {
-//   background: #42cd00;
-// }
-// .warning {
-//   background: #ffa101;
-// }
-
-// 弹出框
-.el-dialog__title {
-  line-height: 24px;
-  font-size: 18px;
-  color: #303133;
-  padding-left: 10px;
-}
-.el-dialog__header {
-  border-top: 3px solid #21acfc;
-  padding: 14px 20px 10px !important;
-  background-color: #edeef1;
-  border-bottom: 1px solid #e9e9e9;
-}
-
-// 自定义===============
-// 标题加粗
-.title-bold {
-  font-weight: bold;
-  font-size: 17px;
-}
-// 标题左侧颜色
-.title-left-color {
-  border-left: 5px solid #21acfc;
-  padding-left: 10px;
-}
-
-.treeCard .el-card__header {
-  height: 42px;
-  line-height: 42px;
-  background: #e1edf4;
-  padding: 0 0 0 10px !important;
-}
-.tableCard .el-card__header {
-  height: 42px;
-  line-height: 42px;
-  background: #edeef1;
-  padding: 0 0 0 10px !important;
-}
-
-.tableHeader .el-table__header-wrapper {
-  height: 42px;
-  line-height: 42px;
-  background: #edeef1;
-  padding: 0 0 0 0 !important;
-  transform: translateY(0px);
-}
-.tableHeader .has-gutter {
-  transform: translateY(-12px);
-}
-
-// .elTree{
-// background:#f4f4f4!important;
-// }
-
-// 二级菜单
-.monitor_menu {
-  .menu_item {
-    width: 120px;
-    height: 46px;
-    line-height: 46px;
-    text-align: center;
-    color: #ccc;
-    box-shadow: 0px 0 2px #000 !important;
-    background-image: linear-gradient(to top, #335274, #4d759a) !important;
-    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3) !important;
-  }
-  .is-active {
-    color: #fff !important;
-    background: linear-gradient(
-      0deg,
-      rgba(33, 172, 252, 1),
-      rgba(48, 136, 193, 1)
-    ) !important;
-  }
-  ul {
-    a:nth-child(1) {
-      li {
-        border-radius: 9px 0 0 9px !important;
-      }
-    }
-    a:last-child {
-      li {
-        border-radius: 0 9px 9px 0 !important;
-      }
-    }
-  }
-}
-
-//-- 公共样式--//
-</style>

src/layout/header-aside/layout.vue

@@ -93,6 +93,7 @@
           <!-- 内容 -->
           <transition name="fade-scale">
             <div class="d2-theme-container-main-layer" flex="dir:top">
+              <home v-if="$route.matched[0].name == 'ol'"></home>
               <sys v-if="$route.matched[0].name == 'sys'"></sys>
               <monitor v-if="$route.matched[0].name == 'monitor'"></monitor>
               <access v-if="$route.matched[0].name == 'access'"></access>
@@ -158,12 +159,13 @@ export default {
     'd2-menu-header': () => import('./components/menu-header'),
     'd2-header-theme': () => import('./components/header-theme'),
     'd2-header-user': () => import('./components/header-user'),
+    home: () => import('../../pages/ol/index.vue'),
     sys: () => import('../../pages/sys/index.vue'),
     monitor: () => import('../../pages/monitor/index.vue'),
     patrol: () => import('../../pages/patrol/index.vue'),
     eq: () => import('../../pages/eq/index.vue'),
     alarms: () => import('../../pages/alarms/index.vue'),
-    bim: () => import('./components/bim'),
+    bim: () => import('./components/bim')
   },
   data() {
     return {
@@ -176,7 +178,7 @@ export default {
       timer: null,
       logTimeout: null,
       countNum: 0,
-      station: '',
+      station: ''
     }
   },
   mounted() {
@@ -207,7 +209,7 @@ export default {
       let getWeek = '星期' + weeks[week]
       // return `${y}/${MM}/${d} ${getWeek} `
       return `${MM}/${d} ${getWeek} `
-    },
+    }
   },
 
   computed: {
@@ -215,12 +217,12 @@ export default {
       keepAlive: (state) => state.page.keepAlive,
       grayActive: (state) => state.gray.active,
       transitionActive: (state) => state.transition.active,
-      asideCollapse: (state) => state.menu.asideCollapse,
+      asideCollapse: (state) => state.menu.asideCollapse
     }),
     ...mapState('d2admin/menu', ['header']),
     ...mapState('d2admin/toast', ['size']),
     ...mapGetters('d2admin', {
-      themeActiveSetting: 'theme/activeSetting',
+      themeActiveSetting: 'theme/activeSetting'
     }),
     /**
      * @description 最外层容器的背景图片样式
@@ -233,12 +235,12 @@ export default {
         //     }
         //   : {})
       }
-    },
+    }
   },
   watch: {
     size(val) {
       this.countNum = val
-    },
+    }
   },
   methods: {
     ...mapActions('d2admin/account', ['logout']),
@@ -248,7 +250,7 @@ export default {
     logOff() {
       this.logout({
         vm: this,
-        confirm: true,
+        confirm: true
       })
     },
     getDate() {
@@ -273,8 +275,8 @@ export default {
       if (!this.station || this.station == 'undefined') {
         setTimeout(this.getStation, 3000)
       }
-    },
-  },
+    }
+  }
 }
 </script>
 

src/pages/ol/index.vue

+<template>
+  <div>
+    <menu-component class="monitor_menu" :menuList="list" :active="active"></menu-component>
+  </div>
+</template>
+<script>
+import menuComponent from '../components/menu-component'
+import { mapState } from 'vuex'
+export default {
+  data() {
+    return {
+        list: [],
+        active: ''
+    }
+  },
+  components: {
+    menuComponent
+  },
+  computed: {
+    ...mapState('d2admin/menu', [
+      'header'
+    ])
+  },
+     watch: {
+    '$route.matched': {
+      handler (val) {
+        this.$nextTick(() => {
+          this.active = ''
+          this.active = val[1].path
+        })
+      },
+      immediate: true
+    }
+  },
+  created () {
+    this.header.forEach(res => {
+      if (res.path === '/ol') {
+        this.list = res.list
+        this.active = this.$route.path
+        // this.active = res.list[0].path
+        // this.$router.push({
+        //   path: res.list[0].path,
+        // })
+      }
+    })
+  }
+}
+</script>

src/pages/ol/kanban/index.vue

+<template>
+    <div>
+            看板
+    </div>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/routes.js

@@ -31,10 +31,11 @@ const frameIn = [
   path: '/ol',
   name: 'ol',
   meta,
-  redirect: { name: 'ol-demo' },
+  // redirect: { name: 'ol-demo' },
   component: layoutHeaderAside,
   children: (pre => [
-    { path: 'demo', name: `${pre}demo`, component: () => import('@/pages/ol/demo'), meta: { ...meta, title: '电子地图' } }
+    { path: 'demo', name: `${pre}demo`, component: () => import('@/pages/ol/demo'), meta: { ...meta, title: '电子地图' } },
+    { path: 'kanban', name: `${pre}kanban`, component: () => import('@/pages/ol/kanban'), meta: { ...meta, title: '数据看板' } }
   ])('ol-')
 },