diff --git a/sgzb-ui/package.json b/sgzb-ui/package.json
index 2ab89879..6a071e28 100644
--- a/sgzb-ui/package.json
+++ b/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",
diff --git a/sgzb-ui/src/App.vue b/sgzb-ui/src/App.vue
index 48a3f517..ba8416e6 100644
--- a/sgzb-ui/src/App.vue
+++ b/sgzb-ui/src/App.vue
@@ -73,9 +73,8 @@ export default {
     },
 }
 </script>
-<style scoped >
+<style scoped>
 #app .theme-picker {
     display: none;
 }
 </style>
-
diff --git a/sgzb-ui/src/assets/images/screenBg.png b/sgzb-ui/src/assets/images/screenBg.png
new file mode 100644
index 00000000..700ed9fc
Binary files /dev/null and b/sgzb-ui/src/assets/images/screenBg.png differ
diff --git a/sgzb-ui/src/assets/images/title_left.png b/sgzb-ui/src/assets/images/title_left.png
new file mode 100644
index 00000000..0c8788b7
Binary files /dev/null and b/sgzb-ui/src/assets/images/title_left.png differ
diff --git a/sgzb-ui/src/permission.js b/sgzb-ui/src/permission.js
index fbc55f9c..f5177583 100644
--- a/sgzb-ui/src/permission.js
+++ b/sgzb-ui/src/permission.js
@@ -8,49 +8,59 @@ 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()
-  if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
-    /* has token*/
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done()
+    NProgress.start()
+    if (getToken()) {
+        to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+        /* has token*/
+        if (to.path === '/login') {
+            next({ path: '/' })
+            NProgress.done()
+        } else {
+            if (store.getters.roles.length === 0) {
+                isRelogin.show = true
+                // 判断当前用户是否已拉取完user_info信息
+                store
+                    .dispatch('GetInfo')
+                    .then(() => {
+                        isRelogin.show = false
+                        store
+                            .dispatch('GenerateRoutes')
+                            .then((accessRoutes) => {
+                                // 根据roles权限生成可访问的路由表
+                                router.addRoutes(accessRoutes) // 动态添加可访问路由表
+                                next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+                            })
+                    })
+                    .catch((err) => {
+                        store.dispatch('LogOut').then(() => {
+                            Message.error(err)
+                            next({ path: '/login' })
+                        })
+                    })
+            } else {
+                next()
+            }
+        }
     } else {
-      if (store.getters.roles.length === 0) {
-        isRelogin.show = true
-        // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
-        }).catch(err => {
-          store.dispatch('LogOut').then(() => {
-            Message.error(err)
-            next({ path: '/login' })
-          })
-        })
-      } else {
-        next()
-      }
+        // 没有token
+        if (whiteList.indexOf(to.path) !== -1) {
+            // 在免登录白名单，直接进入
+            next()
+        } else {
+            next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
+            NProgress.done()
+        }
     }
-  } else {
-    // 没有token
-    if (whiteList.indexOf(to.path) !== -1) {
-      // 在免登录白名单，直接进入
-      next()
-    } else {
-      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
-      NProgress.done()
-    }
-  }
 })
 
 router.afterEach(() => {
-  NProgress.done()
+    NProgress.done()
 })
diff --git a/sgzb-ui/src/router/index.js b/sgzb-ui/src/router/index.js
index a7dc6a88..1c95eea1 100644
--- a/sgzb-ui/src/router/index.js
+++ b/sgzb-ui/src/router/index.js
@@ -30,184 +30,187 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [
-  {
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
-  },
-  {
-    path: '/login',
-    component: () => import('@/views/newLogin.vue'),
-    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: '/demo',
-    component: () => import('@/views/demo.vue'),
-    hidden: true
-  },
-  {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/dashboard',
-    component: Layout,
-    redirect: 'dashboard',
-    children: [
-      {
-        path: 'dashboard',
-        component: () => import('@/views/dashboard'),
-        name: 'Dashboard',
-        meta: { title: '数据大屏', icon: 'dashboard', breadcrumb: false }
-      }
-    ]
-  },
-  {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'profile',
-        component: () => import('@/views/system/user/profile/index'),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  },
-  {
-    path: '/qrCode/qrCodePage',
-    component: () => import('@/views/qrCode/qrCode'),
-    hidden: true
-  },
-  {
-    path: '/resetPassword',
-    component: () => import('@/views/resetPassword'),
-    hidden: true
-  },
+    {
+        path: '/redirect',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: '/redirect/:path(.*)',
+                component: () => import('@/views/redirect'),
+            },
+        ],
+    },
+    {
+        path: '/login',
+        component: () => import('@/views/newLogin.vue'),
+        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: '/screen',
+        component: () => import('@/views/screen'),
+        hidden: true,
+    },
+    {
+        path: '',
+        component: Layout,
+        redirect: 'index',
+        children: [
+            {
+                path: 'index',
+                component: () => import('@/views/index'),
+                name: 'Index',
+                meta: { title: '首页', icon: 'dashboard', affix: true },
+            },
+        ],
+    },
+    {
+        path: '/dashboard',
+        component: Layout,
+        redirect: 'dashboard',
+        children: [
+            {
+                path: 'dashboard',
+                component: () => import('@/views/dashboard'),
+                name: 'Dashboard',
+                meta: {
+                    title: '数据大屏',
+                    icon: 'dashboard',
+                    breadcrumb: false,
+                },
+            },
+        ],
+    },
+    {
+        path: '/user',
+        component: Layout,
+        hidden: true,
+        redirect: 'noredirect',
+        children: [
+            {
+                path: 'profile',
+                component: () => import('@/views/system/user/profile/index'),
+                name: 'Profile',
+                meta: { title: '个人中心', icon: 'user' },
+            },
+        ],
+    },
+    {
+        path: '/qrCode/qrCodePage',
+        component: () => import('@/views/qrCode/qrCode'),
+        hidden: true,
+    },
+    {
+        path: '/resetPassword',
+        component: () => import('@/views/resetPassword'),
+        hidden: true,
+    },
 ]
 
 // 动态路由，基于用户权限动态去加载
 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: [
-      {
-        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: [
-      {
-        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: [
-      {
-        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: [
-      {
-        path: 'index/:tableId(\\d+)',
-        component: () => import('@/views/tool/gen/editTable'),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
-      }
-    ]
-  }
+    {
+        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: [
+            {
+                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: [
+            {
+                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: [
+            {
+                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: [
+            {
+                path: 'index/:tableId(\\d+)',
+                component: () => import('@/views/tool/gen/editTable'),
+                name: 'GenEdit',
+                meta: { title: '修改生成配置', activeMenu: '/tool/gen' },
+            },
+        ],
+    },
 ]
 
 // 防止连续点击多次路由报错
-let routerPush = Router.prototype.push;
-let routerReplace = Router.prototype.replace;
+let routerPush = Router.prototype.push
+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({
-  // base:'/gl/',
-  mode: 'history', // 去掉url中的#
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes,
+    // base:'/gl/',
+    mode: 'history', // 去掉url中的#
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes,
 })
-
diff --git a/sgzb-ui/src/views/scrapManage/forecastWaste/listing/index.vue b/sgzb-ui/src/views/scrapManage/forecastWaste/listing/index.vue
index a5f2fc41..f934ddba 100644
--- a/sgzb-ui/src/views/scrapManage/forecastWaste/listing/index.vue
+++ b/sgzb-ui/src/views/scrapManage/forecastWaste/listing/index.vue
@@ -271,7 +271,7 @@ export default {
 
         /* 确定或取消按钮触发的自定义事件 */
         async closeDepartSel(val, list) {
-            // val === 0 取消  ===1 为确定
+            // val === 0 取消  === 1 为确定
             if (val === 0) {
                 this.dialogConfig.outerVisible = false
                 this.$refs.listingTbRef.getList()
diff --git a/sgzb-ui/src/views/screen/components/item-one.vue b/sgzb-ui/src/views/screen/components/item-one.vue
new file mode 100644
index 00000000..2c9d7735
--- /dev/null
+++ b/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>
diff --git a/sgzb-ui/src/views/screen/index.vue b/sgzb-ui/src/views/screen/index.vue
new file mode 100644
index 00000000..60518bc5
--- /dev/null
+++ b/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>