代码优化

sgzb-ui/package.json

@@ -62,6 +62,7 @@
         "vue-count-to": "1.0.13",
         "vue-cropper": "0.5.5",
         "vue-easy-print": "0.0.8",
+        "vue-grid-layout": "^2.4.0",
         "vue-json-excel": "^0.3.0",
         "vue-meta": "2.4.0",
         "vue-router": "3.4.9",

sgzb-ui/src/App.vue

@@ -78,4 +78,3 @@ export default {
     display: none;
 }
 </style>
-

sgzb-ui/src/permission.js

@@ -8,7 +8,12 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/auth/sendCode', '/qrCode/qrCodePage']
+const whiteList = [
+    '/login',
+    '/register',
+    '/auth/sendCode',
+    '/qrCode/qrCodePage',
+]
 
 router.beforeEach((to, from, next) => {
     NProgress.start()
@@ -22,14 +27,19 @@ router.beforeEach((to, from, next) => {
             if (store.getters.roles.length === 0) {
                 isRelogin.show = true
                 // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
+                store
+                    .dispatch('GetInfo')
+                    .then(() => {
                         isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+                        store
+                            .dispatch('GenerateRoutes')
+                            .then((accessRoutes) => {
                                 // 根据roles权限生成可访问的路由表
                                 router.addRoutes(accessRoutes) // 动态添加可访问路由表
                                 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
                             })
-        }).catch(err => {
+                    })
+                    .catch((err) => {
                         store.dispatch('LogOut').then(() => {
                             Message.error(err)
                             next({ path: '/login' })

sgzb-ui/src/router/index.js

@@ -37,34 +37,34 @@ export const constantRoutes = [
         children: [
             {
                 path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
+                component: () => import('@/views/redirect'),
-      }
+            },
-    ]
+        ],
     },
     {
         path: '/login',
         component: () => import('@/views/newLogin.vue'),
-    hidden: true
+        hidden: true,
     },
     {
         path: '/register',
         component: () => import('@/views/register'),
-    hidden: true
+        hidden: true,
     },
     {
         path: '/404',
         component: () => import('@/views/error/404'),
-    hidden: true
+        hidden: true,
     },
     {
         path: '/401',
         component: () => import('@/views/error/401'),
-    hidden: true
+        hidden: true,
     },
     {
-    path: '/demo',
+        path: '/screen',
-    component: () => import('@/views/demo.vue'),
+        component: () => import('@/views/screen'),
-    hidden: true
+        hidden: true,
     },
     {
         path: '',
@@ -75,9 +75,9 @@ export const constantRoutes = [
                 path: 'index',
                 component: () => import('@/views/index'),
                 name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+                meta: { title: '首页', icon: 'dashboard', affix: true },
-      }
+            },
-    ]
+        ],
     },
     {
         path: '/dashboard',
@@ -88,9 +88,13 @@ export const constantRoutes = [
                 path: 'dashboard',
                 component: () => import('@/views/dashboard'),
                 name: 'Dashboard',
-        meta: { title: '数据大屏', icon: 'dashboard', breadcrumb: false }
+                meta: {
-      }
+                    title: '数据大屏',
-    ]
+                    icon: 'dashboard',
+                    breadcrumb: false,
+                },
+            },
+        ],
     },
     {
         path: '/user',
@@ -102,19 +106,19 @@ export const constantRoutes = [
                 path: 'profile',
                 component: () => import('@/views/system/user/profile/index'),
                 name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
+                meta: { title: '个人中心', icon: 'user' },
-      }
+            },
-    ]
+        ],
     },
     {
         path: '/qrCode/qrCodePage',
         component: () => import('@/views/qrCode/qrCode'),
-    hidden: true
+        hidden: true,
     },
     {
         path: '/resetPassword',
         component: () => import('@/views/resetPassword'),
-    hidden: true
+        hidden: true,
     },
 ]
 
@@ -130,9 +134,9 @@ export const dynamicRoutes = [
                 path: 'role/:userId(\\d+)',
                 component: () => import('@/views/system/user/authRole'),
                 name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
+                meta: { title: '分配角色', activeMenu: '/system/user' },
-      }
+            },
-    ]
+        ],
     },
     {
         path: '/system/role-auth',
@@ -144,9 +148,9 @@ export const dynamicRoutes = [
                 path: 'user/:roleId(\\d+)',
                 component: () => import('@/views/system/role/authUser'),
                 name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
+                meta: { title: '分配用户', activeMenu: '/system/role' },
-      }
+            },
-    ]
+        ],
     },
     {
         path: '/system/dict-data',
@@ -158,9 +162,9 @@ export const dynamicRoutes = [
                 path: 'index/:dictId(\\d+)',
                 component: () => import('@/views/system/dict/data'),
                 name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
+                meta: { title: '字典数据', activeMenu: '/system/dict' },
-      }
+            },
-    ]
+        ],
     },
     {
         path: '/monitor/job-log',
@@ -172,9 +176,9 @@ export const dynamicRoutes = [
                 path: 'index/:jobId(\\d+)',
                 component: () => import('@/views/monitor/job/log'),
                 name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
+                meta: { title: '调度日志', activeMenu: '/monitor/job' },
-      }
+            },
-    ]
+        ],
     },
     {
         path: '/tool/gen-edit',
@@ -186,22 +190,22 @@ export const dynamicRoutes = [
                 path: 'index/:tableId(\\d+)',
                 component: () => import('@/views/tool/gen/editTable'),
                 name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
+                meta: { title: '修改生成配置', activeMenu: '/tool/gen' },
-      }
+            },
-    ]
+        ],
-  }
+    },
 ]
 
 // 防止连续点击多次路由报错
-let routerPush = Router.prototype.push;
+let routerPush = Router.prototype.push
-let routerReplace = Router.prototype.replace;
+let routerReplace = Router.prototype.replace
 // push
 Router.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(err => err)
+    return routerPush.call(this, location).catch((err) => err)
 }
 // replace
 Router.prototype.replace = function push(location) {
-  return routerReplace.call(this, location).catch(err => err)
+    return routerReplace.call(this, location).catch((err) => err)
 }
 
 export default new Router({
@@ -210,4 +214,3 @@ export default new Router({
     scrollBehavior: () => ({ y: 0 }),
     routes: constantRoutes,
 })
-

sgzb-ui/src/views/screen/components/item-one.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="item-one">
+        <div class="title"> 领料数据 </div>
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped lang="scss">
+.item-one {
+    width: 100%;
+    height: 100%;
+    // background-color: pink;
+
+    .title {
+        background: url('../../../assets/images/title_left.png') no-repeat;
+        background-size: 100% 100%;
+        height: 38px;
+        line-height: 38px;
+        padding-left: 28px;
+        font-size: 20px;
+        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+        font-weight: blod;
+        color: #ffffff;
+    }
+}
+</style>

sgzb-ui/src/views/screen/index.vue

@@ -0,0 +1,93 @@
+<template>
+    <!-- 大屏 -->
+    <div class="screen-container">
+        <div class="screen-content" ref="screenContentRef">
+            <GridLayout
+                :layout.sync="layout"
+                :col-num="24"
+                :row-height="rowHeigh"
+                :is-draggable="false"
+                :is-resizable="false"
+                :is-mirrored="false"
+                :vertical-compact="true"
+                :margin="[5, 5]"
+                :use-css-transforms="true"
+            >
+                <GridItem
+                    v-for="item in layout"
+                    :x="item.x"
+                    :y="item.y"
+                    :w="item.w"
+                    :h="item.h"
+                    :i="item.i"
+                    :key="item.i"
+                    class="grid-item"
+                >
+                    <component :is="item.componentsName" />
+                </GridItem>
+            </GridLayout>
+        </div>
+    </div>
+</template>
+
+<script>
+import VueGridLayout from 'vue-grid-layout'
+import ItemOne from './components/item-one'
+export default {
+    components: {
+        GridItem: VueGridLayout.GridItem,
+        GridLayout: VueGridLayout.GridLayout,
+        ItemOne,
+    },
+    data() {
+        return {
+            layout: [
+                // 第一行
+                { x: 0, y: 0, w: 5, h: 8, i: 1, componentsName: 'ItemOne' },
+                { x: 5, y: 0, w: 14, h: 14, i: 2 },
+                { x: 19, y: 0, w: 5, h: 6, i: 3 },
+
+                // 第二行
+                { x: 0, y: 1, w: 5, h: 8, i: 4 },
+                { x: 5, y: 1, w: 14, h: 2, i: 5 },
+                { x: 19, y: 1, w: 5, h: 5, i: 6 },
+
+                // 第三行
+                { x: 0, y: 2, w: 5, h: 8, i: 7 },
+                { x: 5, y: 2, w: 14, h: 8, i: 8 },
+                { x: 19, y: 2, w: 5, h: 5, i: 9 },
+
+                // 第四行
+                { x: 19, y: 3, w: 5, h: 8, i: 10 },
+            ],
+
+            rowHeigh: 0,
+        }
+    },
+
+    mounted() {
+        this.rowHeigh = (this.$refs['screenContentRef'].clientHeight - 125) / 24
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-container {
+    width: 100%;
+    height: 100%;
+    // background-color: #ccc;
+    background: url('../../assets/images/screenBg.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+
+    .screen-content {
+        width: calc(100% - 20px);
+        height: calc(100% - 65px);
+        margin: 65px auto 0;
+    }
+
+    .grid-item {
+        border: 1px dashed #000;
+    }
+}
+</style>