修改看板

package.json

@@ -51,6 +51,8 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "less": "^4.3.0",
+    "less-loader": "5.0.0",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

src/permission.js

@@ -1,15 +1,15 @@
 import router from './router'
 import store from './store'
-import { Message } from 'element-ui'
+import {Message} from 'element-ui'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
-import { isRelogin } from '@/utils/request'
+import {getToken} from '@/utils/auth'
+import {isRelogin} from '@/utils/request'
 import defaultSettings from '@/settings'
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({showSpinner: false})
 
-const whiteList = ['/login', '/register','/AirportModel']
+const whiteList = ['/login', '/register', '/AirportModel', '/modelBoard']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -17,7 +17,7 @@ router.beforeEach((to, from, next) => {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
     /* has token*/
     if (to.path === '/login') {
-      next({ path: '/' })
+      next({path: '/'})
       NProgress.done()
     } else if (whiteList.indexOf(to.path) !== -1) {
       next()
@@ -30,12 +30,12 @@ router.beforeEach((to, from, next) => {
           store.dispatch('GenerateRoutes').then(accessRoutes => {
             // 根据roles权限生成可访问的路由表
             router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            next({...to, replace: true}) // hack方法 确保addRoutes已完成
           })
         }).catch(err => {
           store.dispatch('LogOut').then(() => {
             Message.error(err)
-              next({ path: '/' })
+            next({path: '/'})
           })
         })
       } else {

src/router/index.js

@@ -30,71 +30,41 @@ import plainView from '@/plainView'
  */
 
 // 公共路由
-export const constantRoutes = [
-  {
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
-  },
-  {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
-  },
-  {
-    path: '/AirportModel',
-    component: () => import('@/views/board/model/AirportModel'),
-    hidden: true
-  },
-  {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true
-  },
-  {
-    path: '/404',
-    component: () => import('@/views/error/404'),
-    hidden: true
-  },
-  {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
-  },
-  {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [
-      {
+export const constantRoutes = [{
+  path: '/redirect', component: Layout, hidden: true, children: [{
+    path: '/redirect/:path(.*)', component: () => import('@/views/redirect')
+  }]
+}, {
+  path: '/login', component: () => import('@/views/login'), hidden: true
+}, {
+  path: '/modelBoard', component: () => import('@/views/board/index.vue'), hidden: true
+}, {
+  path: '/AirportModel', component: () => import('@/views/board/model/AirportModel'), hidden: true
+}, {
+  path: '/register', component: () => import('@/views/register'), hidden: true
+}, {
+  path: '/404', component: () => import('@/views/error/404'), hidden: true
+}, {
+  path: '/401', component: () => import('@/views/error/401'), hidden: true
+}, {
+  path: '', component: Layout, redirect: 'index', children: [{
     path: 'index',
     component: () => import('@/views/index'),
     name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
-  {
+    meta: {title: '首页', icon: 'dashboard', affix: true}
+  }]
+}, {
   path: "/production/bom-info",
   component: Layout,
   hidden: true,
   permissions: ["mes/prod:prodBomInfo:list"],
-    children: [
-      {
+  children: [{
     path: "index/:materialCode(\\d+)",
     component: () => import("@/views/mes/prod/prodBomInfo/childIndex"),
     name: "childBom",
     meta: {title: "查看生产BOM信息", activeMenu: "/prod/prodBomInfo"},
-      },
-    ],
-  },
-  // {
+  },],
+}, // {
   //   path: '/nestRoutes',
   //   meta: {
   //     title: '多级路由嵌套(缓存测试)',
@@ -145,107 +115,62 @@ export const constantRoutes = [
   //   ]
   // },
   {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
+    path: '/user', component: Layout, hidden: true, redirect: 'noredirect', children: [{
       path: 'profile',
       component: () => import('@/views/system/user/profile/index'),
       name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  }
-]
+      meta: {title: '个人中心', icon: 'user'}
+    }]
+  }]
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes = [
-  {
-    path: '/system/user-auth',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:user:edit'],
-    children: [
-      {
+export const dynamicRoutes = [{
+  path: '/system/user-auth', component: Layout, hidden: true, permissions: ['system:user:edit'], children: [{
     path: 'role/:userId(\\d+)',
     component: () => import('@/views/system/user/authRole'),
     name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
-      }
-    ]
-  },
-  {
-    path: '/system/role-auth',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:role:edit'],
-    children: [
-      {
+    meta: {title: '分配角色', activeMenu: '/system/user'}
+  }]
+}, {
+  path: '/system/role-auth', component: Layout, hidden: true, permissions: ['system:role:edit'], children: [{
     path: 'user/:roleId(\\d+)',
     component: () => import('@/views/system/role/authUser'),
     name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
-      }
-    ]
-  },
-  {
-    path: '/system/dict-data',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:dict:list'],
-    children: [
-      {
+    meta: {title: '分配用户', activeMenu: '/system/role'}
+  }]
+}, {
+  path: '/system/dict-data', component: Layout, hidden: true, permissions: ['system:dict:list'], children: [{
     path: 'index/:dictId(\\d+)',
     component: () => import('@/views/system/dict/data'),
     name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
-      }
-    ]
-  },
-  {
-    path: '/monitor/job-log',
-    component: Layout,
-    hidden: true,
-    permissions: ['monitor:job:list'],
-    children: [
-      {
+    meta: {title: '字典数据', activeMenu: '/system/dict'}
+  }]
+}, {
+  path: '/monitor/job-log', component: Layout, hidden: true, permissions: ['monitor:job:list'], children: [{
     path: 'index/:jobId(\\d+)',
     component: () => import('@/views/monitor/job/log'),
     name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
-      }
-    ]
-  },
-  {
-    path: '/tool/gen-edit',
-    component: Layout,
-    hidden: true,
-    permissions: ['tool:gen:edit'],
-    children: [
-      {
+    meta: {title: '调度日志', activeMenu: '/monitor/job'}
+  }]
+}, {
+  path: '/tool/gen-edit', component: Layout, hidden: true, permissions: ['tool:gen:edit'], children: [{
     path: 'index/:tableId(\\d+)',
     component: () => import('@/views/tool/gen/editTable'),
     name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
-      }
-    ]
-  },
-  {
+    meta: {title: '修改生成配置', activeMenu: '/tool/gen'}
+  }]
+}, {
   path: '/mes/release-order',
   component: Layout,
   hidden: true,
   permissions: ['mes/prod:prodOrderInfo:edit'],
-    children: [
-      {
+  children: [{
     path: 'index/:objId(\\d+)',
     component: () => import('@/views/mes/prod/prodOrderInfo/releasePlan'),
     name: 'releaseOrder',
-        meta: { title: '订单下达', activeMenu: '/mes/releasePlan' }
-      }
-    ]
-  },
+    meta: {title: '订单下达', activeMenu: '/mes/releasePlan'}
+  }]
+},
 
 ]
 
@@ -263,6 +188,5 @@ Router.prototype.replace = function push(location) {
 
 export default new Router({
   mode: 'history', // 去掉url中的#
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
+  scrollBehavior: () => ({y: 0}), routes: constantRoutes
 })

src/views/board/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div style="height: 100vh;width: 100vw;overflow: hidden;position: relative;">
+    <div
+        :style="`width:100%;height:100%;background-image:url(${bg});background-repeat: no-repeat;background-size: 100% 100%;`">
+      <!--      <img :src="model" alt="">-->
+    </div>
+    <div style="position:absolute;top: 10%;left: 1%;width: 98%;height: 88%"
+         :style="`background-image:url(${bg1});background-repeat: no-repeat;background-size: 100% 100%;`">
+    </div>
+    <div style="position:absolute;top: 65%;left: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);"
+         :style="`background-image:url(${model});background-repeat: no-repeat;background-size: 100% 100%;`">
+    </div>
+    <div class="title">青岛胶东机场行李输送线</div>
+    <div class="item1">
+      <div class="line"></div>
+      <!--      <div style="display: inline-block">-->
+      <!--        <div v-for="i in Object.keys(deviceData.E0013)">-->
+      <!--          <div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">-->
+      <!--            <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0013[i][ii] }}</div>-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <div style="display: inline-block">
+        <div v-for="i in Object.keys(deviceData.E0014)">
+          <div v-for="ii in Object.keys(deviceData.E0014[i])" v-if="deviceData.E0014[i][ii]>0">
+            <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0014[i][ii] }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import model from '@/assets/images/model.jpg'
+import bg from '@/assets/images/bg.jpg'
+import bg1 from '@/assets/images/modelbg1.jpg'
+
+export default {
+  data() {
+    return {
+      model,
+      bg1,
+      bg,
+      deviceData: {
+        'E0001': {},
+        'E0002': {},
+        'E0003': {},
+        'E0004': {},
+        'E0005': {},
+        'E0006': {},
+        'E0013': {},
+        'E0014': {},
+      },
+      deviceMap: {
+        temperature: '温度',
+        humidity: '湿度',
+        illuminance: '照度',
+        noise: '噪音',
+        concentration: '气体浓度',
+        vibrationSpeed: '振动-速度',
+        vibrationDisplacement: '振动-位移',
+        vibrationAcceleration: '振动-加速度',
+        vibrationTemp: '振动-温度',
+      }
+    }
+  },
+  mounted() {
+    this.$bus.$on('websocket-device-data', (e) => {
+          let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0]
+          if (Object.keys(this.deviceData).includes(deviceID)) {
+            this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, {
+              temperature: e.deviceParam.temperature || 0,
+              humidity: e.deviceParam.humidity || 0,
+              illuminance: e.deviceParam.illuminance || 0,
+              noise: e.deviceParam.noise || 0,
+              concentration: e.deviceParam.concentration || 0,
+              vibrationSpeed: e.deviceParam.vibrationSpeed || 0,
+              vibrationDisplacement: e.deviceParam.vibrationDisplacement || 0,
+              vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0,
+              vibrationTemp: e.deviceParam.vibrationTemp || 0,
+            })
+          }
+          console.log(this.deviceData.E0014)
+        }
+    )
+  },
+  methods:
+      {}
+}
+</script>
+<style lang="less" scoped>
+.title {
+  position: absolute;
+  top: 1%;
+  left: 50%;
+  transform: translateX(-50%);
+  letter-spacing: 0.2vw;
+  font-size: 1.8vw;
+  font-weight: 800;
+  color: white;
+}
+
+.item1 {
+  position: absolute;
+  right: 4%;
+  width: 20vw;
+  bottom: 25%;
+  border: 1px solid white;
+
+  .line {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1px;
+    height: 3vh;
+    background-color: #fff;
+  }
+
+  .data {
+  }
+}
+</style>