2022-02-26 23:05

imcs-ui/src/api/largeScreen/index.js

@@ -25,6 +25,12 @@ const apiList = {
     	method: 'POST',
     	url: `/authority/zZone/demoLineResource/v1`
   	},
+  	
+  	// 大屏的模块内容（2D模式）-type:1
+  	yunjianResource: {  
+    	method: 'POST',
+    	url: `/authority/zZone/yunjianResource/v1`
+  	},
 }
 
 export default {
@@ -59,4 +65,12 @@ export default {
 	      	data
 	    })
   	},
+  	
+  	// 大屏的模块内容（2D模式）-type:1
+  	yunjianResource (data) {
+	    return axiosApi({
+	      	...apiList.yunjianResource,
+	      	data
+	    })
+  	}
 }

imcs-ui/src/router/index.js

@@ -1,288 +1,325 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Layout from '@/layout'
-import db from '@/utils/localstorage'
-import store from '@/store/index'
-import oauthApi from '@/api/Oauth'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-
-Vue.use(Router)
-
-const constRouter = [
-  {
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/redirect/:path*',
-        component: resolve => require(['@/views/redirect/index'], resolve)
-      }
-    ]
-  },
-  {
-    path: '/404',
-    component: resolve => require(['@/views/error-page/404'], resolve),
-    hidden: true
-  }
-  ,
-  {
-    path: '/login',
-    name: '登录页',
-    component: () => import('@/views/login/index')
-  },{
-		path: '/runManageCenter',
-		component: Layout,
-		redirect: '/runManageCenter/',
-		name: 'RunManageCenter',
-		meta: {
-			title: '运行管理中心',
-			icon: 'icon',
-		},
-		children: [{
-			path: 'lineBoardDetail',
-			component: () =>
-				import('@/views/zuihou/runManageCenter/lineBoard/components/Index'),
-			name: 'LineBoardDetail',
-			hidden: true,
-			meta: {
-				title: '产线看板详情',
-				noCache: true
-			}
-		},{
-			path: 'introductionOne',
-			name: 'IntroductionOne',
-			hidden: true,
-			component: () => import('@/views/zuihou/runManageCenter/introductionMode/components/IntroductionOne'),
-			meta: {
-				title: '舱体类加工单元',
-				noCache: true
-			}
-		},{
-			path: 'introductionTwo',
-			name: 'IntroductionTwo',
-			hidden: true,
-			component: () => import('@/views/zuihou/runManageCenter/introductionMode/components/IntroductionTwo'),
-			meta: {
-				title: '框体类加工单元',
-				noCache: true
-			}
-		},{
-			path: 'introductionThree',
-			name: 'IntroductionThree',
-			hidden: true,
-			component: () => import('@/views/zuihou/runManageCenter/introductionMode/components/IntroductionThree'),
-			meta: {
-				title: '智能生产保障系统',
-				noCache: true
-			}
-		}]
-	},{
-		path: '/resourceProductMgr',
-		component: Layout,
-		redirect: '/resourceProductMgr/',
-		name: 'ResourceProductMgr',
-		meta: {
-			title: '生产资源中心',
-			icon: 'icon',
-		},
-		children: [{
-			path: 'attributeData',
-			component: () =>
-				import('@/views/zuihou/resourceProductMgr/attributeData/Index'),
-			name: 'AttributeData',
-			meta: {
-				title: '属性数据',
-				noCache: true
-			}
-		},{
-			path: 'eventData',
-			component: () =>
-				import('@/views/zuihou/resourceProductMgr/eventData/Index'),
-			name: 'EventData',
-			meta: {
-				title: '事件数据',
-				noCache: true
-			}
-		}]
-	},{
-		path: '/prepareProductMgr',
-		component: Layout,
-		redirect: '/prepareProductMgr/',
-		name: 'PrepareProductMgr',
-		meta: {
-			title: '生产准备中心',
-			icon: 'icon',
-		},
-		children: [{
-			path: 'technologyVersion',
-			component: () =>
-				import('@/views/zuihou/prepareProductMgr/technologyVersion/Index'),
-			name: 'TechnologyVersion',
-			meta: {
-				title: '工艺版本管理',
-				noCache: true
-			}
-		}]
-	},{
-    path: '/',
-    component: Layout,
-    redirect: '/dashboard',
-    children: [
-      {
-        path: 'dashboard',
-        component: resolve => require(['@/views/dashboard/index'], resolve),
-        name: 'Dashboard',
-        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/profile',
-    component: Layout,
-    redirect: '/profile/index',
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: resolve => require(['@/views/profile/index'], resolve),
-        name: 'Profile',
-        meta: { title: 'profile', icon: 'user', noCache: true }
-      },
-      {
-        hidden: true,
-        path: '/sms/manage/edit',
-        component: resolve => require(['@/views/zuihou/sms/manage/Edit'], resolve),
-        name: 'smsEdit',
-        meta: {
-          title: '发送短信', icon: '', noCache: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/error',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
-    meta: {
-      title: 'errorPages',
-      icon: '404'
-    },
-    children: [
-      {
-        path: '404',
-        component: resolve => require(['@/views/error-page/404'], resolve),
-        name: 'Page404',
-        meta: { title: 'page404', noCache: true }
-      }
-    ]
-  },
-  // 为什么写在这里 就会出错？
-  // {
-  //   path: "*",
-  //   // redirect: '/404',
-  //   component: () => import('@/views/error-page/404'),
-  //   name: "all_404",
-  //   hidden: false,
-  //   alwaysShow: false
-  // }
-]
-
-const router = new Router({
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constRouter
-})
-
-const whiteList = ['/login']
-
-// 加载的路由信息
-let asyncRouter
-
-// 导航守卫，渲染动态路由
-router.beforeEach((to, from, next) => {
-  NProgress.start()
-  if (whiteList.indexOf(to.path) !== -1) {
-    next()
-  } else {
-    const token = db.get('TOKEN', '')
-    const user = db.get('USER')
-    const userRouter = db.get('USER_ROUTER', '') //缓存中的路由
-    if (token && token.length && user) {
-      if (!asyncRouter) {
-        if (!userRouter) {
-          oauthApi.getRouter({}).then((response) => {
-              const res = response.data
-              asyncRouter = res.data
-							//console.log("菜单数据：", asyncRouter)
-              if (!(asyncRouter && asyncRouter.length > 0)) {
-                asyncRouter = []
-              }
-              asyncRouter.push({
-                alwaysShow: false,
-                component: "error-page/404",
-                hidden: false,
-                name: "404",
-                path: "*"
-              });
-
-              store.commit('account/setRoutes', asyncRouter)
-
-              go(to, next)
-           })
-        } else {
-          asyncRouter = userRouter
-          go(to, next)
-        }
-      } else {
-        next()
-      }
-    } else {
-      if (to.path === '/login') {
-        next()
-      } else {
-        next('/login')
-      }
-    }
-  }
-})
-
-router.afterEach(() => {
-  NProgress.done()
-})
-
-function go (to, next) {
-  asyncRouter = filterAsyncRouter(asyncRouter)
-  router.addRoutes(asyncRouter)
-  next({ ...to, replace: true })
-}
-
-function filterAsyncRouter (routes) {
-  return routes.filter((route) => {
-    const component = route.component
-    if (component) {
-      if (route.component === 'Layout') {
-        route.component = Layout
-      } else {
-        route.component = view(component)
-      }
-      if (route.children && route.children.length) {
-        route.children = filterAsyncRouter(route.children)
-      }
-      return true
-    }
-  })
-}
-
-function view (path) {
-  return function (resolve) {
-    // 这段代码莫名奇妙就开始报错了，之前是好的
-    // import(`@/views/${path}.vue`).then(mod => {
-    //   resolve(mod)
-    // })
-    require([`@/views/${path}.vue`], resolve)
-  }
-}
-
-export default router
+import Vue from 'vue'
+import Router from 'vue-router'
+import Layout from '@/layout'
+import db from '@/utils/localstorage'
+import store from '@/store/index'
+import oauthApi from '@/api/Oauth'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+Vue.use(Router)
+
+const constRouter = [
+  {
+    path: '/redirect',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path*',
+        component: resolve => require(['@/views/redirect/index'], resolve)
+      }
+    ]
+  },
+  {
+    path: '/404',
+    component: resolve => require(['@/views/error-page/404'], resolve),
+    hidden: true
+  }
+  ,
+  {
+    path: '/login',
+    name: '登录页',
+    component: () => import('@/views/login/index')
+  },{
+		path: '/largeScreen',
+		component: Layout,
+		redirect: '/largeScreen/',
+		name: 'LargeScreen',
+		meta: {
+			title: '可视化面板',
+			icon: 'icon',
+		},
+		children: [{
+			path: 'supportCenter',
+			name: 'SupportCenter',
+			hidden: true,
+			component: () => import('@/views/zuihou/largeScreen/supportCenter'),
+			meta: {
+				title: '保障中心',
+				noCache: true
+			}
+		},{
+			path: 'cabinLine',
+			name: 'CabinLine',
+			hidden: true,
+			component: () => import('@/views/zuihou/largeScreen/cabinLine'),
+			meta: {
+				title: '框体线',
+				noCache: true
+			}
+		},{
+			path: 'frameLine',
+			name: 'FrameLine',
+			hidden: true,
+			component: () => import('@/views/zuihou/largeScreen/frameLine'),
+			meta: {
+				title: '舱体线',
+				noCache: true
+			}
+		}]
+	},{
+		path: '/runManageCenter',
+		component: Layout,
+		redirect: '/runManageCenter/',
+		name: 'RunManageCenter',
+		meta: {
+			title: '运行管理中心',
+			icon: 'icon',
+		},
+		children: [{
+			path: 'lineBoardDetail',
+			component: () =>
+				import('@/views/zuihou/runManageCenter/lineBoard/components/Index'),
+			name: 'LineBoardDetail',
+			hidden: true,
+			meta: {
+				title: '产线看板详情',
+				noCache: true
+			}
+		},{
+			path: 'introductionOne',
+			name: 'IntroductionOne',
+			hidden: true,
+			component: () => import('@/views/zuihou/runManageCenter/introductionMode/components/IntroductionOne'),
+			meta: {
+				title: '舱体类加工单元',
+				noCache: true
+			}
+		},{
+			path: 'introductionTwo',
+			name: 'IntroductionTwo',
+			hidden: true,
+			component: () => import('@/views/zuihou/runManageCenter/introductionMode/components/IntroductionTwo'),
+			meta: {
+				title: '框体类加工单元',
+				noCache: true
+			}
+		},{
+			path: 'introductionThree',
+			name: 'IntroductionThree',
+			hidden: true,
+			component: () => import('@/views/zuihou/runManageCenter/introductionMode/components/IntroductionThree'),
+			meta: {
+				title: '智能生产保障系统',
+				noCache: true
+			}
+		}]
+	},{
+		path: '/resourceProductMgr',
+		component: Layout,
+		redirect: '/resourceProductMgr/',
+		name: 'ResourceProductMgr',
+		meta: {
+			title: '生产资源中心',
+			icon: 'icon',
+		},
+		children: [{
+			path: 'attributeData',
+			component: () =>
+				import('@/views/zuihou/resourceProductMgr/attributeData/Index'),
+			name: 'AttributeData',
+			meta: {
+				title: '属性数据',
+				noCache: true
+			}
+		},{
+			path: 'eventData',
+			component: () =>
+				import('@/views/zuihou/resourceProductMgr/eventData/Index'),
+			name: 'EventData',
+			meta: {
+				title: '事件数据',
+				noCache: true
+			}
+		}]
+	},{
+		path: '/prepareProductMgr',
+		component: Layout,
+		redirect: '/prepareProductMgr/',
+		name: 'PrepareProductMgr',
+		meta: {
+			title: '生产准备中心',
+			icon: 'icon',
+		},
+		children: [{
+			path: 'technologyVersion',
+			component: () =>
+				import('@/views/zuihou/prepareProductMgr/technologyVersion/Index'),
+			name: 'TechnologyVersion',
+			meta: {
+				title: '工艺版本管理',
+				noCache: true
+			}
+		}]
+	},{
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        component: resolve => require(['@/views/dashboard/index'], resolve),
+        name: 'Dashboard',
+        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/profile',
+    component: Layout,
+    redirect: '/profile/index',
+    hidden: true,
+    children: [
+      {
+        path: 'index',
+        component: resolve => require(['@/views/profile/index'], resolve),
+        name: 'Profile',
+        meta: { title: 'profile', icon: 'user', noCache: true }
+      },
+      {
+        hidden: true,
+        path: '/sms/manage/edit',
+        component: resolve => require(['@/views/zuihou/sms/manage/Edit'], resolve),
+        name: 'smsEdit',
+        meta: {
+          title: '发送短信', icon: '', noCache: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'ErrorPages',
+    meta: {
+      title: 'errorPages',
+      icon: '404'
+    },
+    children: [
+      {
+        path: '404',
+        component: resolve => require(['@/views/error-page/404'], resolve),
+        name: 'Page404',
+        meta: { title: 'page404', noCache: true }
+      }
+    ]
+  },
+  // 为什么写在这里 就会出错？
+  // {
+  //   path: "*",
+  //   // redirect: '/404',
+  //   component: () => import('@/views/error-page/404'),
+  //   name: "all_404",
+  //   hidden: false,
+  //   alwaysShow: false
+  // }
+]
+
+const router = new Router({
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constRouter
+})
+
+const whiteList = ['/login']
+
+// 加载的路由信息
+let asyncRouter
+
+// 导航守卫，渲染动态路由
+router.beforeEach((to, from, next) => {
+  NProgress.start()
+  if (whiteList.indexOf(to.path) !== -1) {
+    next()
+  } else {
+    const token = db.get('TOKEN', '')
+    const user = db.get('USER')
+    const userRouter = db.get('USER_ROUTER', '') //缓存中的路由
+    if (token && token.length && user) {
+      if (!asyncRouter) {
+        if (!userRouter) {
+          oauthApi.getRouter({}).then((response) => {
+              const res = response.data
+              asyncRouter = res.data
+							//console.log("菜单数据：", asyncRouter)
+              if (!(asyncRouter && asyncRouter.length > 0)) {
+                asyncRouter = []
+              }
+              asyncRouter.push({
+                alwaysShow: false,
+                component: "error-page/404",
+                hidden: false,
+                name: "404",
+                path: "*"
+              });
+
+              store.commit('account/setRoutes', asyncRouter)
+
+              go(to, next)
+           })
+        } else {
+          asyncRouter = userRouter
+          go(to, next)
+        }
+      } else {
+        next()
+      }
+    } else {
+      if (to.path === '/login') {
+        next()
+      } else {
+        next('/login')
+      }
+    }
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done()
+})
+
+function go (to, next) {
+  asyncRouter = filterAsyncRouter(asyncRouter)
+  router.addRoutes(asyncRouter)
+  next({ ...to, replace: true })
+}
+
+function filterAsyncRouter (routes) {
+  return routes.filter((route) => {
+    const component = route.component
+    if (component) {
+      if (route.component === 'Layout') {
+        route.component = Layout
+      } else {
+        route.component = view(component)
+      }
+      if (route.children && route.children.length) {
+        route.children = filterAsyncRouter(route.children)
+      }
+      return true
+    }
+  })
+}
+
+function view (path) {
+  return function (resolve) {
+    // 这段代码莫名奇妙就开始报错了，之前是好的
+    // import(`@/views/${path}.vue`).then(mod => {
+    //   resolve(mod)
+    // })
+    require([`@/views/${path}.vue`], resolve)
+  }
+}
+
+export default router

imcs-ui/src/utils/utils.js

@@ -1,111 +1,116 @@
-/**
- * 判断终端以及浏览器
- * userAgent string User-Agent信息
- */
-export const readUserAgent = ua => {
-  let data = {
-    terminal: '',
-    browser: '',
-    terminalType: {}
-  }
-  data.terminalType = {
-    trident: ua.indexOf('Trident') > -1, // IE内核
-    presto: ua.indexOf('Presto') > -1, // opera内核
-    webKit: ua.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
-    gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1, // 火狐内核
-    mobile: !!ua.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
-    ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
-    android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1, // android终端
-    iPhone: ua.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
-    iPad: ua.indexOf('iPad') > -1, // 是否iPad
-    webApp: ua.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
-    weixin: ua.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
-    qq: ua.match(/\sQQ/i) === ' qq' // 是否QQ
-  }
-  if (
-    data.terminalType.ios ||
-    data.terminalType.iPhone ||
-    data.terminalType.iPad
-  ) {
-    data.terminal = '苹果'
-  } else if (data.terminalType.android) {
-    data.terminal = '安卓'
-  } else {
-    data.terminal = 'PC'
-  }
-  if (/msie/i.test(ua) && !/opera/.test(ua)) {
-    data.browser = 'IE'
-  } else if (/firefox/i.test(ua)) {
-    data.browser = 'Firefox'
-  } else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {
-    data.browser = 'Chrome'
-  } else if (/opera/i.test(ua)) {
-    data.browser = 'Opera'
-  } else if (/iPad/i.test(ua)) {
-    data.browser = 'iPad'
-  } else if (
-    /webkit/i.test(ua) &&
-    !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))
-  ) {
-    data.browser = 'Safari'
-  } else {
-    data.browser = '未知'
-  }
-  return data
-}
-
-// 格式化文件大小 单位：B、KB、MB、GB
-const renderSize = value => {
-  if (null == value || value == '') {
-    return "0 B"
-  }
-  var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB")
-  var index = 0
-  var srcsize = parseFloat(value)
-  index = Math.floor(Math.log(srcsize) / Math.log(1024))
-  var size = srcsize / Math.pow(1024, index)
-  size = size.toFixed(2)
-  if (unitArr[index]) {
-    return size + unitArr[index]
-  }
-  return '文件太大'
-}
-
-const convertEnum = obj => {
-  const list = []
-  if (obj) {
-    for (let key in obj) {
-      list.push({
-        text: obj[key],
-        value: key
-      })
-    }
-  }
-  return list
-}
-
-const copy = msg => {
-  if(msg){
-    let oInput = document.createElement('input');     //创建一个隐藏input（重要！）
-    oInput.value = msg;    //赋值
-    document.body.appendChild(oInput);
-    oInput.select(); // 选择对象
-    document.execCommand("Copy"); // 执行浏览器复制命令
-    oInput.className = 'oInput';
-    oInput.style.display = 'none';
-  }
-}
-/**
- * 根据list的数据，生产TreeData数据结构 *
- */
-const createTreeData = (cloneData) => {
-  return cloneData.filter(father => {
-    // 循环所有项，并添加children属性
-    let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
-    branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
-    return father.parentId == 0; //返回第一层
-  })
-}
-
-
-export { renderSize, convertEnum, copy, createTreeData }
+/**
+ * 判断终端以及浏览器
+ * userAgent string User-Agent信息
+ */
+export const readUserAgent = ua => {
+  let data = {
+    terminal: '',
+    browser: '',
+    terminalType: {}
+  }
+  data.terminalType = {
+    trident: ua.indexOf('Trident') > -1, // IE内核
+    presto: ua.indexOf('Presto') > -1, // opera内核
+    webKit: ua.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
+    gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1, // 火狐内核
+    mobile: !!ua.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
+    ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
+    android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1, // android终端
+    iPhone: ua.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
+    iPad: ua.indexOf('iPad') > -1, // 是否iPad
+    webApp: ua.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
+    weixin: ua.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
+    qq: ua.match(/\sQQ/i) === ' qq' // 是否QQ
+  }
+  if (
+    data.terminalType.ios ||
+    data.terminalType.iPhone ||
+    data.terminalType.iPad
+  ) {
+    data.terminal = '苹果'
+  } else if (data.terminalType.android) {
+    data.terminal = '安卓'
+  } else {
+    data.terminal = 'PC'
+  }
+  if (/msie/i.test(ua) && !/opera/.test(ua)) {
+    data.browser = 'IE'
+  } else if (/firefox/i.test(ua)) {
+    data.browser = 'Firefox'
+  } else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {
+    data.browser = 'Chrome'
+  } else if (/opera/i.test(ua)) {
+    data.browser = 'Opera'
+  } else if (/iPad/i.test(ua)) {
+    data.browser = 'iPad'
+  } else if (
+    /webkit/i.test(ua) &&
+    !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))
+  ) {
+    data.browser = 'Safari'
+  } else {
+    data.browser = '未知'
+  }
+  return data
+}
+
+// 格式化文件大小 单位：B、KB、MB、GB
+const renderSize = value => {
+  if (null == value || value == '') {
+    return "0 B"
+  }
+  var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB")
+  var index = 0
+  var srcsize = parseFloat(value)
+  index = Math.floor(Math.log(srcsize) / Math.log(1024))
+  var size = srcsize / Math.pow(1024, index)
+  size = size.toFixed(2)
+  if (unitArr[index]) {
+    return size + unitArr[index]
+  }
+  return '文件太大'
+}
+
+const convertEnum = obj => {
+  const list = []
+  if (obj) {
+    for (let key in obj) {
+      list.push({
+        text: obj[key],
+        value: key
+      })
+    }
+  }
+  return list
+}
+
+const copy = msg => {
+  if(msg){
+    let oInput = document.createElement('input');     //创建一个隐藏input（重要！）
+    oInput.value = msg;    //赋值
+    document.body.appendChild(oInput);
+    oInput.select(); // 选择对象
+    document.execCommand("Copy"); // 执行浏览器复制命令
+    oInput.className = 'oInput';
+    oInput.style.display = 'none';
+  }
+}
+/**
+ * 根据list的数据，生产TreeData数据结构 *
+ */
+const createTreeData = (cloneData) => {
+  return cloneData.filter(father => {
+    // 循环所有项，并添加children属性
+    let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
+    branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
+    return father.parentId == 0; //返回第一层
+  })
+}
+
+// 随机生成随机整数
+const randomFloor = (min, max) => {
+	return Math.floor(Math.random() * (max - min)) + min
+}
+
+
+export { renderSize, convertEnum, copy, createTreeData, randomFloor }

imcs-ui/src/views/zuihou/largeScreen/cabinLine/index.vue

@@ -0,0 +1,1317 @@
+<!-- 【框体线】模块 -->
+<template>
+  <div id="playerMap" ref="playerMap" class="app-container lineBoard platformDiv">
+  	<!-- 统计数据区域 -->
+    <el-row :gutter="20" class="rowCls">
+    	<div class="headerBg">
+	    	<!--<div class="headerTitle">智能化柔性制造单元</div>-->
+	    	<!-- tab切换回 -->
+    		<div class="tabsDiv">
+    			<!-- 3D孪生展示 -->
+    			<span>{{$t("largeScreen.common.data3d")}}</span>
+    			<!-- 2D简洁模式 -->
+    			<span class="tabsActive">{{$t("largeScreen.common.data2d")}}</span>
+    			<!-- 2D数据模式 -->
+    			<span @click="boxCardClk()">{{$t("largeScreen.common.data2shu")}}</span>
+    		</div>
+    		<!-- 全屏 -->
+	    	<div class="battonDiv">
+	    		<el-tooltip v-if="!isFullSreen" class="item" effect="dark" :content="$t('largeScreen.common.screening')" placement="top-start">
+	    			<a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
+	    		</el-tooltip>
+	    		<el-tooltip v-else class="item" effect="dark" :content="$t('largeScreen.common.cancel')" placement="top-start">
+	    			<a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
+	    		</el-tooltip>
+	    	</div>
+	    	<!-- 返回产线 -->
+	    	<span class="rebackLine" @click="rebackLine()">{{$t('largeScreen.common.returns')}}</span>
+    	</div>
+    </el-row>
+    
+  	<!-- 区域模块 -->
+  	<div class="areaDiv">
+  		<!-- 搜索-部分 -->
+	  	<div class="defaultRow noBorder">
+		  		<el-select v-model="opValue" @change="selectChange" :placeholder='$t("common.pleaseSelect")'>
+				    <el-option
+				      v-for="item in options"
+				      :key="item.value"
+				      :label="item.label"
+				      :value="item.value">
+				    </el-option>
+				  </el-select>
+	  	</div>
+	  	
+	  	<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed;">
+	  		<tr>
+	  			<td width="250">
+	  				<!-- 上-部分 -->
+			  		<el-row class="topRow alignLeft">
+			  			<div class="bottomDiv2">
+					  		<!-- AGV接驳位 -->
+					  		<div>
+						  		<template v-for="item in moduleList">
+							  		<el-card v-if="item.code == 'KT_123'" :key="item.id" class="box-card" style="vertical-align: top;">
+							  			<!-- 内容区域(格式一) -->
+							  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+							  				<tr>
+							  					<td align="center">
+							  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+							  							<div class="eqTitle">{{ item.name }}</div>
+							  						</el-tooltip>
+							  						<div :class="reJisuanCls(item.positionList[0])">
+							  							<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+															<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+														</el-tooltip>
+							  						</div>
+							  					</td>
+							  				</tr>
+							  			</table>
+											<!-- 状态 -->
+											<div class="statusDiv">
+												<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+												<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+												<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+											</div>
+							  		</el-card>
+						  		</template>
+					  		</div>
+			  			</div>
+			  		</el-row>
+	  			</td>
+	  			<td>
+	  				
+				  	<!-- 上-部分 -->
+			  		<el-row class="topRow alignLeft">
+			  			<div class="bottomDiv2" style="width: 100%;overflow-x: auto;">
+			  				<!-- 方块 -->
+				  			<el-card class="box-card" style="margin-right: 20px;">
+					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
+					  				<tr v-for="(item, index) in sideList" :key="index">
+					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
+					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
+					  					</td>
+					  				</tr>
+					  			</table>
+				  				<div class="linTitle">边线库</div>
+				  			</el-card>
+			  				
+				  			<!-- 打标机 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'KT_121'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'KT_122'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'KT_127'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			
+			  				<!-- 打标机 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'KT_128'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'KT_129'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'KT_130'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			</div>
+			  		</el-row>
+			  	
+			  		<!-- 中-部分 -->
+			  		<el-row class="topRow">
+			  			<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin: 30px auto;">
+			  				<tr>
+			  					<td class="guiDaoTd" width="700px">
+			  						<div class="guiDao"></div>
+			  						<!-- 六轴机器人 -->
+			  						<template v-for="item in moduleList">
+											<el-card v-if="item.code == 'KT_jqr'" class="box-card guiDao-card">
+								  			<!-- 内容区域(格式一) -->
+								  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+								  				<tr>
+									  				<td align="center">
+									  					<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+								  							<div class="eqTitle">{{item.name}}</div>
+								  						</el-tooltip>
+					  									<template v-for="obj in item.positionList">
+					  										<el-tooltip :key="obj.id" class="item" effect="dark" :content="obj.name" placement="top-start">
+					  											<div :class="reJisuanCls(obj, true)">
+					  												<div class="ellipsisCom">{{obj.name}}</div>
+					  											</div>
+					  										</el-tooltip>
+					  									</template>
+								  						<!--<div class="contentView">0001</div>
+								  						<div class="contentView">0002</div>
+								  						<div class="contentView">0003</div>-->
+								  					</td>
+							  					</tr>
+								  			</table>
+												<!-- 状态 -->
+					  						<div class="statusDiv">
+													<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+													<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+													<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+												</div>
+											</el-card>
+										</template>	
+			  					</td>
+			  				</tr>
+			  			</table>
+			  			
+							
+			  		</el-row>
+			  		
+			  		<!-- 下-部分 -->
+			  		<el-row class="topRow" style="text-align: left;">
+			  			<div class="bottomDiv2">
+			  				<!-- 方块 -->
+				  			<el-card class="box-card" style="margin-right: 20px;">
+					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
+					  				<tr v-for="(item, index) in sideList" :key="index">
+					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
+					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
+					  					</td>
+					  				</tr>
+					  			</table>
+				  				<div class="linTitle">边线库</div>
+				  			</el-card>
+				  			
+				  			<!-- 打标机 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'KT_131'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'KT_132'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'KT_133'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			
+			  			</div>
+			  		</el-row>
+			  		
+  				</td>
+  				
+	  		</tr>
+	  	</table>
+  		
+  	</div>
+  </div>
+</template>
+
+<script>
+	// 【区域管理】-API
+	import lineBoardAPI from "@/api/runManageCenter/lineBoard"
+	// 【示范线大屏】-API
+	import LargeScreenAPI from "@/api/largeScreen"
+	// 共通保存本地
+	import db from '@/utils/localstorage'
+	import elDragDialog from '@/directive/el-drag-dialog'
+	import { downloadFile, initEnums, initDicts, initQueryParams, fullScreen, exitFullScreen } from '@/utils/commons'
+	import axios from 'axios'
+	// 加载动态数字组件
+	import countTo from 'vue-count-to'
+	export default {
+	  name: "IntellectMachining",
+	  directives: { elDragDialog },
+	  components: { countTo },
+	  props: {
+	  },
+	  data () {
+	    return {
+	    	resourceId: '',
+	    	url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+	    	toolsImg: 'tools.png',
+	    	programImg: 'program.png',
+	    	srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ],
+	    	topTongjiData: {"allCount": 0, "onlineCount": 0,"offlineCount": 0,"supervisionCount": 0,"independentCount": 0,"workCount": 0,"freeCount": 0,"waitCount": 0,"exceptionCount": 0},
+	    	tabOneData: {},  // 按区域-数据，
+	    	tabDownData: {    // 下部分-数据
+	    		list: []
+	    	},
+	    	sideList: {}, // 边线库
+	    	isFullSreen: false, // 默认不全屏
+	      queryParams: initQueryParams({}),
+	      moduleList: [], // 模块信息
+	      options: [{
+          value: 'A',
+          label: '保障中心'
+        }, {
+          value: 'B',
+          label: '舱体线'
+        }, {
+          value: 'C',
+          label: '框体线'
+        }],
+        opValue: 'C',
+	    }
+	  },
+	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
+	  created() {
+	  	// 加载生产资源
+	  	//this.getTabList();
+	  	// 边线库
+	  	this.getQualitySide();
+	  	// 加载-模块信息
+	  	this.demoLineResource();
+		},
+		watch: {
+			/*$route(){
+				// 如果是【产线看板详情页面】
+  	  	if(this.$route.fullPath.indexOf("/runManageCenter/lineBoard") > -1){
+  	  		// 是否显示大屏
+  	  		// this.setMaxScreen()
+  	  	}
+      },
+	  	websocketMsg(curVal, oldVal) {
+	      let obj = JSON.parse(curVal)
+	      this.openMessageTips(obj)
+	    }*/
+	  },
+	  computed: {
+	    currentUser () {
+	      return this.$store.state.account.user
+	    },
+	    nationList() {
+        return convertEnum(this.dicts.NATION)
+      },
+      // 接收信息
+      /*websocketMsg() {
+	      return this.$store.getters.STAFF_UPDATE.msg
+	    }*/
+	  },
+	  mounted () {
+	    /*// 判断长连接，是否已经开启
+	  	if(this.$store.state.websocket.websock == null){
+	  		// 页面刚进入时开启长连接
+    		this.$store.dispatch('STAFF_WEBSOCKET')
+	  	}*/
+	  },
+	  // 销毁
+		destroyed() {
+	    // this.websocketClose()
+	  },
+	  methods: {
+	  	// 加载-仓储区模块信息
+	  	demoLineResource(){
+	  		LargeScreenAPI.yunjianResource({ type:3 }).then(res => {
+	  			res =  res.data;
+	  			if(res.isSuccess){
+	  				console.log("2D模式-模块信息: ",res.data);
+	  				this.moduleList = res.data.list;
+	  			}
+	  			
+	  		})
+	  	},
+	  	
+	  	// [选择单元]的值变化-事件
+	  	selectChange(val){
+	  		console.log("[选择单元]的值变化: ", val);
+	  		let paths = "";
+	  		if(val == "A"){  // 框体线
+	  			paths = "/largeScreen/cabinLine";
+	  		}
+	  		if(val == "B"){  // 舱体线
+	  			paths = "/largeScreen/frameLine";
+	  		}
+	  		if(val == "C"){  // 保障中心
+	  			paths = "/largeScreen/supportCenter";
+	  		}
+	  		
+	  		if(paths){
+	  			this.toRouter(paths);
+	  		}
+	  	},
+	  	
+	  	// 根据路由，跳转页面
+	  	toRouter(paths){
+	  		// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: {resourceId: this.tabDownData.list.length > 0 ? this.tabDownData.list[0].id : '' }}) //带参跳转
+				})
+	  	},
+	  	
+	  	// 是否设置大屏
+	  	setMaxScreen(){
+	  		let isCurrScreen = db.get("isCurrScreen");
+	  		console.log("是否全屏22222：",isCurrScreen)
+	  		if(isCurrScreen == true){
+	  			this.fullPing();
+	  		}
+	  	},
+	  	// 推送接收到的数据
+	  	openMessageTips(data){
+	  		// 如果是【产线看板】
+  	  	if(this.$route.fullPath.indexOf("/largeScreen/intellectMachining") > -1){
+		  		//console.log("接收websocket的推送信息22222 == ",data)
+		  		// 如果是【线边库】信息
+		  		if(data.type == 'PUSH_TYPE_STORGE'){
+		  			this.sideList = data.data.Rxianbianku;
+		  		}
+		  		// 如果是【生产资源】信息
+		  		if(data.type == 'PUSH_TYPE_RESOURCE') {
+		  			this.moduleList = data.data.list;
+		  			//console.log("接收websocket的推送信息--【柔性智能加工区】 == ",data.data.list);
+		  			// this.moduleList = data.data['4'];
+		  		}
+		  		//  如果是【生产资源】信息
+		  		/*if(data.type == 'PUSH_TYPE_RESOURCE_STATUS'){
+		  			if(data[this.resourceId]){
+		  				// 生产资源的状态和进度
+		  				if(this.tabDownData.list[0].linkStatus){
+		  					this.tabDownData.list[0].linkStatus = data[this.resourceId].linkStatus
+		  				}
+		  				if(this.tabDownData.list[0].controlStatus){
+		  					this.tabDownData.list[0].controlStatus = data[this.resourceId].controlStatus
+		  				}
+		  				if(this.tabDownData.list[0].productionStatus){
+		  					this.tabDownData.list[0].productionStatus = data[this.resourceId].productionStatus
+		  				}
+		  				this.tabDownData.list[0].todoTaskPercent = data[this.resourceId].todoTaskPercent
+		  			}
+		  		}*/
+		  	}
+	  	},
+	  	// 组件销毁的时候，关闭websocket连接
+	  	websocketClose() {
+	      this.$store.getters.STAFF_UPDATE.lockReconnect = true
+	      this.$store.getters.STAFF_UPDATE.websock.close() // 离开路由之后断开websocket连接
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.reconnectData) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.timeoutObj) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.serverTimeoutObj) // 离开清除 timeout
+	    },
+	  	// websocket信息变更
+	  	onmessage() {
+	      this.$store.getters.STAFF_UPDATE.websock.onmessage = function(evt) {
+	        //console.log(evt)
+	      }
+	    },
+	    
+	  	// 【SUM50】点击-事件
+	  	boxCardClk(){
+	  		let paths = "/largeScreen/twoDatasModel";
+				// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: {}}) //带参跳转
+				})
+				// this.$router.push('/runManageCenter/lineBoardDetail')
+	  		// console.log("弹出详情页面！", paths)
+	  	},
+	  	
+	  	// 全屏
+	  	fullPing(){
+	  		this.$nextTick(() => {
+	  			// 显示【退出全屏】
+	  			this.isFullSreen = true
+	  			// 如果是退出全屏
+	  			db.save("isCurrScreen", this.isFullSreen)
+	  			let $playerMap = this.$refs.playerMap
+	  			if($playerMap){
+	  				fullScreen($playerMap)
+	  				// fullScreen(document.getElementById('playerMap'))
+	  			}
+	  		})
+	  	},
+	  	// 退出全屏
+	  	exitFullPing(){
+	  		this.$nextTick(() => {
+	  			// 显示【全屏】
+	  			this.isFullSreen = false
+	  			// 如果是全屏
+	  			db.save("isCurrScreen", this.isFullSreen)
+	  			exitFullScreen(document.getElementById('playerMap'))
+	  		})
+	  	},
+	  	
+	  	// 【返回产线】按钮-事件
+	  	rebackLine(){
+	  		this.$router.go(-1);
+	  	},
+	  	
+	  	// 【SUM50】点击-事件
+	  	boxCardClkCard(id){
+	  		let paths = "/runManageCenter/lineBoardDetail";
+				// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: { resourceId: id }}) //带参跳转
+				})
+	  	},
+	  	
+	  	// 加载背景颜色
+	  	setBackground(color){
+	  		return "background: "+ color +";"
+	  	},
+	  	
+	  	// 生产资源，计算返回class
+	  	reJisuanCls(obj, flag) {
+	  		let str = "contentView hebingDiv";
+	  		if(flag){
+	  			str = "contentView";
+	  		}
+	  		if(obj.lockStatus == "0"){
+	  			str += " borderBottom8";
+	  		}
+	  		if(obj.haveGoods == '1'){
+	  			str += " haveGoodsCls";
+	  		}
+	  		return str;
+	  	},
+	  	
+	  	// 加载【本地图片】
+	  	resolveLogo(logo) {
+        return require(`@/assets/icon/${logo}`);
+      },
+      
+	    // 获取列表数据
+	    getTabList(){
+	    	lineBoardAPI.getBigScreenList({}).then(res => {
+	    		res = res.data 
+	    		console.log("神抽狗资源：", res)
+	    		if(res.isSuccess){
+	    			this.tabDownData.list = res.data.list
+	    			// 给资源赋值id
+	    			if(this.tabDownData.list && this.tabDownData.list.length > 0){
+	    				this.resourceId = this.tabDownData.list[0].id;
+	    			}
+	    		}
+	    	})
+	    },
+	    
+	    // 边线库
+	    getQualitySide() {
+	    	this.sideList = [
+	    		[
+	    			{no: '1', haveGoods: '1', lockStatus: '0', name: '1'},
+	    			{no: '2', haveGoods: '0', lockStatus: '0', name: '2'},
+	    			{no: '3', haveGoods: '0', lockStatus: '0', name: '3'},
+	    			{no: '4', haveGoods: '1', lockStatus: '0', name: '4'},
+	    			{no: '5', haveGoods: '1', lockStatus: '1', name: '5'}
+	    		],
+	    		[
+	    			{no: '10', haveGoods: '0', lockStatus: '1', name: '7'},
+	    			{no: '21', haveGoods: '0', lockStatus: '0', name: '8'},
+	    			{no: '22', haveGoods: '1', lockStatus: '0', name: '9'},
+	    			{no: '23', haveGoods: '0', lockStatus: '1', name: '10'},
+	    			{no: '24', haveGoods: '0', lockStatus: '0', name: '11'}
+	    		]
+	    	];
+	    	/*LargeScreenAPI.getIntellect({}).then(res => {
+	    		res = res.data 
+	    		console.log("【边线库】5：", res)
+	    		if(res.isSuccess){
+	    			this.sideList = res.data;
+	    		}
+	    	})*/
+	    }
+	  }
+	}
+</script>
+
+<!-- 全局样式-通过定义父DOM的calss，来只影响本组件 -->
+<style type="text/css" lang="scss">
+	.bottomDiv2::-webkit-scrollbar-thumb {
+			background: #EEEEEE20;
+	}
+</style>
+<!-- 本组件样式 -->
+<style lang="scss" scoped>
+	.bottomDiv2 {
+		text-align: left;
+		.el-card {
+			vertical-align: top;
+		}
+	}
+	.linTitle {
+		display: inline-block;
+		width: 100%;
+		text-align: left;
+		color: #FFFFFF;
+		margin-top: 5px;
+		font-size: 14px;
+	}
+	.defaultRow{
+		text-align: left;
+		margin-left: 20px;
+		margin-bottom: 0;
+		.el-input__inner {
+			background: none;
+			color: #FFFFFF;
+		}
+	}
+	.headerBg{
+		.tabsDiv{
+			position: absolute;
+			font-size: 17px;
+			font-weight: bold;
+			color: #28BDE0;
+			bottom: 20px;
+			left: 0;
+			span {
+				cursor: pointer;
+				margin-right: 20px;
+			}
+			span:hover{
+				opacity: 0.7;
+			}
+			.tabsActive{
+				color: #FFFFFF;
+			}
+		}
+		.rebackLine{
+			position: absolute;
+			right: 60px;
+			top: 45px;
+			display: inline-block;
+			padding: 5px 10px;
+			color: #28BDE0;
+			cursor: pointer;
+			&:hover{
+				opacity: 0.7;
+			}
+		}
+	}
+	.battonDiv{
+		right: 20px;
+	}
+	.topRow{
+		margin: 20px 20px;
+		.alignLeft{
+			text-align: left;
+		}
+		.bottomDiv2{
+			width: 100%;
+			min-height: 202px;
+			white-space: nowrap;
+			overflow-x: auto;
+			/*&::-webkit-scrollbar-thumb {
+				background: rgb(238 233 233 / 20%);
+			}*/
+		}
+	}
+	.headerTitle{
+		position: relative;
+		top: 20px;
+		left: -13px;
+		font-family: "微软雅黑";
+		font-size: 32px;
+		text-shadow: 1px 2px 3px #ece9e9;
+		letter-spacing: 3px;
+	}
+	.blokTable{
+		display: inline-block;
+		border-left: 1px solid #096A94;
+		border-top: 1px solid #096A94;
+		vertical-align: top;
+		text-align: center;
+	}
+	.blokTable td{
+		position: relative;
+		border-right: 1px solid #096A94;
+		border-bottom: 1px solid #096A94;
+		color: white;
+		padding: 9px 12px;
+		font-size: 14px;
+	}
+	.blokTable td:hover{
+		cursor: pointer;
+		opacity: 0.7;
+	}
+	.blokTable .selectTd{
+		background: #04d3f4;
+	}
+	.guiDao-card{
+		position: relative;
+		z-index: 2;
+	}
+	.guiDaoTd{
+		position: relative;
+	}
+	.guiDao{
+		position: absolute;
+		top: 32%;
+		background: #457f968c;
+		width: 100%;
+		height: 50px;
+		z-index: 1;
+	}
+	.boxCardCls:hover{
+		cursor: pointer;
+		opacity: 0.7;
+	}
+	.blockDiv{
+		position: relative;
+		border: 1px solid #EEEEEE;
+		padding-left: 15px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		text-align: center;
+		color: white;
+		-moz-box-shadow: 1px 5px 5px #c0b7b7;
+		webkit-box-shadow: 1px 5px 5px #c0b7b7;
+		box-shadow: 1px 5px 5px #c0b7b7;
+		h1{
+			margin: 20px;
+			font-size: 45px;
+		}
+		p{
+			color: #000000;
+		}
+	}
+	.danweiSpan{
+		display: inline-block;
+		font-size: 16px;
+		color: black;
+	}
+	.blockBg1{
+		background: #0F79DC;
+		border: 1px solid #0F79DC;
+	}
+	.blockBg2{
+		background: #8E66E4;
+		border: 1px solid #8E66E4;
+	}
+	.blockBg3{
+		background: #3EB64B;
+		border: 1px solid #3EB64B;
+	}
+	.blockBg4{
+		background: #0BA6D5;
+		border: 1px solid #0BA6D5;
+	}
+	.blockBg5{
+		background: #E57878;
+		border: 1px solid #E57878;
+	}
+	.blockBg6{
+		background: #E37B3D;
+		border: 1px solid #E37B3D;
+	}
+	.rowCls{
+		box-sizing: border-box;
+	}
+	.rowCls .el-col{
+		margin-bottom: 20px;
+	}
+	.doubleTable{
+		width: 100%;
+	}
+	.doubleTable h1{
+		margin: 17px 0;
+	}
+	.el-card{
+		display: inline-block;
+		min-width: 200px;
+		margin: 0 5px 5px 0;
+	}
+	.areaTitle{
+		margin-bottom: 15px;
+	}
+	.areaTitle span{
+		position: relative;
+		display: inline-block;
+		padding-right: 20px;
+		font-weight: bold;
+	}
+	.areaTitle span:before{
+		position: absolute;
+		content: '';
+		background: #42d885;
+		top: 0px;
+		right: 0px;
+		width: 10px;
+		height: 100%;
+	}
+	.contentView{
+		font-size: 14px;
+		color: white;
+		text-align: center;
+		max-width: 126px;
+		padding: 3px 5px;
+		margin-bottom: 5px;
+	}
+	.borderBottom4{
+		border-bottom: 4px solid red;
+	}
+	.hebingDiv{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		min-height: 60px;
+		word-break: break-all;
+	}
+	.lineBianku{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #CCCCCC;
+		text-align: center;
+		padding: 3px 5px;
+		min-height: 60px;
+		max-width: 190px;
+		word-break: break-all;
+	}
+	.eqTitle{
+		position: relative;
+		width: 100%;
+		box-sizing: border-box;
+		padding-left: 25px;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 14px;
+		color: #FFFFFF;
+		margin: 20px 0 5px;
+	}
+	.eqTitle:before{
+		content: 'M';
+		position: absolute;
+		top: 0;
+		left: 0;
+		background: #1890ff;
+		color: white;
+		padding: 0 2px 1px;
+	}
+	.eqTitle2{
+		width: 100%;
+		max-width: 70px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 12px;
+	}
+	.recordSpan{
+		display: inline-block;
+		background: #0F79DC;
+		font-size: 12px;
+		padding: 2px 10px;
+		color: white;
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius: 3px;
+	}
+	.jinduTiao{
+		margin: 5px 0;
+	}
+	.statusDiv{
+		position: absolute;
+		top: 5px;
+		right: 15px;
+		text-align: right;
+	}
+	.statusDiv span{
+		display: inline-block;
+		font-size: 12px;
+		padding: 2px 10px;
+		color: white;
+		-moz-border-radius: 2px;
+		-webkit-border-radius: 2px;
+		border-radius: 2px;
+	}
+	.footerDiv{
+		width: 100%;
+		padding: 7px 0 3px;
+		border-top: 1px solid #CCCCCC;
+	}
+	.footerDiv a{
+		display: inline-block;
+		background: #0F79DC;
+		font-size: 12px;
+		padding: 5px 15px;
+		color: white;
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius: 3px;
+	}
+	.footerDiv a:hover{
+		opacity: 0.7;
+	}
+</style>

imcs-ui/src/views/zuihou/largeScreen/frameLine/index.vue

@@ -0,0 +1,1146 @@
+<!-- 【舱体线】模块 -->
+<template>
+  <div id="playerMap" ref="playerMap" class="app-container lineBoard platformDiv">
+  	<!-- 统计数据区域 -->
+    <el-row :gutter="20" class="rowCls">
+    	<div class="headerBg">
+	    	<!--<div class="headerTitle">智能化柔性制造单元</div>-->
+	    	<!-- tab切换回 -->
+    		<div class="tabsDiv">
+    			<!-- 3D孪生展示 -->
+    			<span>{{$t("largeScreen.common.data3d")}}</span>
+    			<!-- 2D简洁模式 -->
+    			<span class="tabsActive">{{$t("largeScreen.common.data2d")}}</span>
+    			<!-- 2D数据模式 -->
+    			<span @click="boxCardClk()">{{$t("largeScreen.common.data2shu")}}</span>
+    		</div>
+    		<!-- 全屏 -->
+	    	<div class="battonDiv">
+	    		<el-tooltip v-if="!isFullSreen" class="item" effect="dark" :content="$t('largeScreen.common.screening')" placement="top-start">
+	    			<a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
+	    		</el-tooltip>
+	    		<el-tooltip v-else class="item" effect="dark" :content="$t('largeScreen.common.cancel')" placement="top-start">
+	    			<a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
+	    		</el-tooltip>
+	    	</div>
+	    	<!-- 返回产线 -->
+	    	<span class="rebackLine" @click="rebackLine()">{{$t('largeScreen.common.returns')}}</span>
+    	</div>
+    </el-row>
+    
+  	<!-- 区域模块 -->
+  	<div class="areaDiv">
+  		<!-- 搜索-部分 -->
+	  	<div class="defaultRow noBorder">
+		  		<el-select v-model="opValue" @change="selectChange" :placeholder='$t("common.pleaseSelect")'>
+				    <el-option
+				      v-for="item in options"
+				      :key="item.value"
+				      :label="item.label"
+				      :value="item.value">
+				    </el-option>
+				  </el-select>
+	  	</div>
+	  	
+	  	<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
+	  		<tr>
+	  			<td>
+	  				
+				  	<!-- 上-部分 -->
+			  		<el-row class="topRow alignLeft">
+			  			<div class="bottomDiv2">
+				  			<!-- 打标机 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'CT_127'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'CT_121'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'CT_122'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			
+			  				<!-- 方块 -->
+				  			<el-card class="box-card" style="margin-left: 100px;">
+					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
+					  				<tr v-for="(item, index) in sideList" :key="index">
+					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
+					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
+					  					</td>
+					  				</tr>
+					  			</table>
+				  				<div class="linTitle">边线库</div>
+				  			</el-card>
+			  			</div>
+			  		</el-row>
+			  	
+			  		<!-- 中-部分 -->
+			  		<el-row class="topRow">
+			  			<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin: 30px auto;">
+			  				<tr>
+			  					<td class="guiDaoTd" width="700px">
+			  						<div class="guiDao"></div>
+			  						<!-- 六轴机器人 -->
+			  						<template v-for="item in moduleList">
+											<el-card v-if="item.code == 'CT_jqr'" class="box-card guiDao-card">
+								  			<!-- 内容区域(格式一) -->
+								  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+								  				<tr>
+									  				<td align="center">
+									  					<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+								  							<div class="eqTitle">{{item.name}}</div>
+								  						</el-tooltip>
+					  									<template v-for="obj in item.positionList">
+					  										<el-tooltip :key="obj.id" class="item" effect="dark" :content="obj.name" placement="top-start">
+					  											<div :class="reJisuanCls(obj, true)">
+					  												<div class="ellipsisCom">{{obj.name}}</div>
+					  											</div>
+					  										</el-tooltip>
+					  									</template>
+								  						<!--<div class="contentView">0001</div>
+								  						<div class="contentView">0002</div>
+								  						<div class="contentView">0003</div>-->
+								  					</td>
+							  					</tr>
+								  			</table>
+												<!-- 状态 -->
+					  						<div class="statusDiv">
+													<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+													<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+													<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+												</div>
+											</el-card>
+										</template>	
+			  					</td>
+			  				</tr>
+			  			</table>
+			  			
+							
+			  		</el-row>
+			  		
+			  		<!-- 下-部分 -->
+			  		<el-row class="topRow" style="text-align: left;">
+			  			<div class="bottomDiv2">
+				  			<!-- 打标机 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'CT_129'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'CT_130'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'CT_131'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			
+				  			<!-- 方块 -->
+				  			<el-card class="box-card" style="margin-left: 100px;">
+					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
+					  				<tr v-for="(item, index) in sideList" :key="index">
+					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
+					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
+					  					</td>
+					  				</tr>
+					  			</table>
+				  				<div class="linTitle">边线库</div>
+				  			</el-card>
+			  			</div>
+			  		</el-row>
+			  		
+  				</td>
+  				<td>
+	  				<!-- 上-部分 -->
+			  		<el-row class="topRow alignLeft">
+			  			<div class="bottomDiv2">
+					  		<!-- AGV接驳位 -->
+					  		<div>
+						  		<template v-for="item in moduleList">
+							  		<el-card v-if="item.code == 'CT_123'" :key="item.id" class="box-card" style="vertical-align: top;">
+							  			<!-- 内容区域(格式一) -->
+							  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+							  				<tr>
+							  					<td align="center">
+							  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+							  							<div class="eqTitle">{{ item.name }}</div>
+							  						</el-tooltip>
+							  						<div :class="reJisuanCls(item.positionList[0])">
+							  							<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+															<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+														</el-tooltip>
+							  						</div>
+							  					</td>
+							  				</tr>
+							  			</table>
+											<!-- 状态 -->
+											<div class="statusDiv">
+												<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+												<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+												<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+											</div>
+							  		</el-card>
+						  		</template>
+					  		</div>
+			  			</div>
+			  		</el-row>
+	  			</td>
+	  		</tr>
+	  	</table>
+  		
+  	</div>
+  </div>
+</template>
+
+<script>
+	// 【区域管理】-API
+	import lineBoardAPI from "@/api/runManageCenter/lineBoard"
+	// 【示范线大屏】-API
+	import LargeScreenAPI from "@/api/largeScreen"
+	// 共通保存本地
+	import db from '@/utils/localstorage'
+	import elDragDialog from '@/directive/el-drag-dialog'
+	import { downloadFile, initEnums, initDicts, initQueryParams, fullScreen, exitFullScreen } from '@/utils/commons'
+	import axios from 'axios'
+	// 加载动态数字组件
+	import countTo from 'vue-count-to'
+	export default {
+	  name: "IntellectMachining",
+	  directives: { elDragDialog },
+	  components: { countTo },
+	  props: {
+	  },
+	  data () {
+	    return {
+	    	resourceId: '',
+	    	url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+	    	toolsImg: 'tools.png',
+	    	programImg: 'program.png',
+	    	srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ],
+	    	topTongjiData: {"allCount": 0, "onlineCount": 0,"offlineCount": 0,"supervisionCount": 0,"independentCount": 0,"workCount": 0,"freeCount": 0,"waitCount": 0,"exceptionCount": 0},
+	    	tabOneData: {},  // 按区域-数据，
+	    	tabDownData: {    // 下部分-数据
+	    		list: []
+	    	},
+	    	sideList: {}, // 边线库
+	    	isFullSreen: false, // 默认不全屏
+	      queryParams: initQueryParams({}),
+	      moduleList: [], // 模块信息
+	      options: [{
+          value: 'A',
+          label: '保障中心'
+        }, {
+          value: 'B',
+          label: '舱体线'
+        }, {
+          value: 'C',
+          label: '框体线'
+        }],
+        opValue: 'B',
+	    }
+	  },
+	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
+	  created() {
+	  	// 加载生产资源
+	  	//this.getTabList();
+	  	// 边线库
+	  	this.getQualitySide();
+	  	// 加载-模块信息
+	  	this.demoLineResource();
+		},
+		watch: {
+			/*$route(){
+				// 如果是【产线看板详情页面】
+  	  	if(this.$route.fullPath.indexOf("/runManageCenter/lineBoard") > -1){
+  	  		// 是否显示大屏
+  	  		// this.setMaxScreen()
+  	  	}
+      },
+	  	websocketMsg(curVal, oldVal) {
+	      let obj = JSON.parse(curVal)
+	      this.openMessageTips(obj)
+	    }*/
+	  },
+	  computed: {
+	    currentUser () {
+	      return this.$store.state.account.user
+	    },
+	    nationList() {
+        return convertEnum(this.dicts.NATION)
+      },
+      // 接收信息
+      /*websocketMsg() {
+	      return this.$store.getters.STAFF_UPDATE.msg
+	    }*/
+	  },
+	  mounted () {
+	    /*// 判断长连接，是否已经开启
+	  	if(this.$store.state.websocket.websock == null){
+	  		// 页面刚进入时开启长连接
+    		this.$store.dispatch('STAFF_WEBSOCKET')
+	  	}*/
+	  },
+	  // 销毁
+		destroyed() {
+	    // this.websocketClose()
+	  },
+	  methods: {
+	  	// 加载-仓储区模块信息
+	  	demoLineResource(){
+	  		LargeScreenAPI.yunjianResource({ type:2 }).then(res => {
+	  			res =  res.data;
+	  			if(res.isSuccess){
+	  				console.log("2D模式-模块信息: ",res.data);
+	  				this.moduleList = res.data.list;
+	  			}
+	  			
+	  		})
+	  	},
+	  	
+	  	// [选择单元]的值变化-事件
+	  	selectChange(val){
+	  		// console.log("[选择单元]的值变化: ", val);
+	  		let paths = "";
+	  		if(val == "A"){  // 框体线
+	  			paths = "/largeScreen/cabinLine";
+	  		}
+	  		if(val == "B"){  // 舱体线
+	  			paths = "/largeScreen/frameLine";
+	  		}
+	  		if(val == "C"){  // 保障中心
+	  			paths = "/largeScreen/supportCenter";
+	  		}
+	  		
+	  		if(paths){
+	  			this.toRouter(paths);
+	  		}
+	  	},
+	  	
+	  	// 根据路由，跳转页面
+	  	toRouter(paths){
+	  		// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: {resourceId: this.tabDownData.list.length > 0 ? this.tabDownData.list[0].id : '' }}) //带参跳转
+				})
+	  	},
+	  	
+	  	// 是否设置大屏
+	  	setMaxScreen(){
+	  		let isCurrScreen = db.get("isCurrScreen");
+	  		console.log("是否全屏22222：",isCurrScreen)
+	  		if(isCurrScreen == true){
+	  			this.fullPing();
+	  		}
+	  	},
+	  	// 推送接收到的数据
+	  	openMessageTips(data){
+	  		// 如果是【产线看板】
+  	  	if(this.$route.fullPath.indexOf("/largeScreen/intellectMachining") > -1){
+		  		//console.log("接收websocket的推送信息22222 == ",data)
+		  		// 如果是【线边库】信息
+		  		if(data.type == 'PUSH_TYPE_STORGE'){
+		  			this.sideList = data.data.Rxianbianku;
+		  		}
+		  		// 如果是【生产资源】信息
+		  		if(data.type == 'PUSH_TYPE_RESOURCE') {
+		  			this.moduleList = data.data.list;
+		  			//console.log("接收websocket的推送信息--【柔性智能加工区】 == ",data.data.list);
+		  			// this.moduleList = data.data['4'];
+		  		}
+		  		//  如果是【生产资源】信息
+		  		/*if(data.type == 'PUSH_TYPE_RESOURCE_STATUS'){
+		  			if(data[this.resourceId]){
+		  				// 生产资源的状态和进度
+		  				if(this.tabDownData.list[0].linkStatus){
+		  					this.tabDownData.list[0].linkStatus = data[this.resourceId].linkStatus
+		  				}
+		  				if(this.tabDownData.list[0].controlStatus){
+		  					this.tabDownData.list[0].controlStatus = data[this.resourceId].controlStatus
+		  				}
+		  				if(this.tabDownData.list[0].productionStatus){
+		  					this.tabDownData.list[0].productionStatus = data[this.resourceId].productionStatus
+		  				}
+		  				this.tabDownData.list[0].todoTaskPercent = data[this.resourceId].todoTaskPercent
+		  			}
+		  		}*/
+		  	}
+	  	},
+	  	// 组件销毁的时候，关闭websocket连接
+	  	websocketClose() {
+	      this.$store.getters.STAFF_UPDATE.lockReconnect = true
+	      this.$store.getters.STAFF_UPDATE.websock.close() // 离开路由之后断开websocket连接
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.reconnectData) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.timeoutObj) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.serverTimeoutObj) // 离开清除 timeout
+	    },
+	  	// websocket信息变更
+	  	onmessage() {
+	      this.$store.getters.STAFF_UPDATE.websock.onmessage = function(evt) {
+	        //console.log(evt)
+	      }
+	    },
+	    
+	  	// 【SUM50】点击-事件
+	  	boxCardClk(){
+	  		let paths = "/largeScreen/twoDatasModel";
+				// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: {}}) //带参跳转
+				})
+				// this.$router.push('/runManageCenter/lineBoardDetail')
+	  		// console.log("弹出详情页面！", paths)
+	  	},
+	  	
+	  	// 全屏
+	  	fullPing(){
+	  		this.$nextTick(() => {
+	  			// 显示【退出全屏】
+	  			this.isFullSreen = true
+	  			// 如果是退出全屏
+	  			db.save("isCurrScreen", this.isFullSreen)
+	  			let $playerMap = this.$refs.playerMap
+	  			if($playerMap){
+	  				fullScreen($playerMap)
+	  				// fullScreen(document.getElementById('playerMap'))
+	  			}
+	  		})
+	  	},
+	  	// 退出全屏
+	  	exitFullPing(){
+	  		this.$nextTick(() => {
+	  			// 显示【全屏】
+	  			this.isFullSreen = false
+	  			// 如果是全屏
+	  			db.save("isCurrScreen", this.isFullSreen)
+	  			exitFullScreen(document.getElementById('playerMap'))
+	  		})
+	  	},
+	  	
+	  	// 【返回产线】按钮-事件
+	  	rebackLine(){
+	  		this.$router.go(-1);
+	  	},
+	  	
+	  	// 【SUM50】点击-事件
+	  	boxCardClkCard(id){
+	  		let paths = "/runManageCenter/lineBoardDetail";
+				// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: { resourceId: id }}) //带参跳转
+				})
+	  	},
+	  	
+	  	// 加载背景颜色
+	  	setBackground(color){
+	  		return "background: "+ color +";"
+	  	},
+	  	
+	  	// 生产资源，计算返回class
+	  	reJisuanCls(obj, flag) {
+	  		let str = "contentView hebingDiv";
+	  		if(flag){
+	  			str = "contentView";
+	  		}
+	  		if(obj.lockStatus == "0"){
+	  			str += " borderBottom8";
+	  		}
+	  		if(obj.haveGoods == '1'){
+	  			str += " haveGoodsCls";
+	  		}
+	  		return str;
+	  	},
+	  	
+	  	// 加载【本地图片】
+	  	resolveLogo(logo) {
+        return require(`@/assets/icon/${logo}`);
+      },
+      
+	    // 获取列表数据
+	    getTabList(){
+	    	lineBoardAPI.getBigScreenList({}).then(res => {
+	    		res = res.data 
+	    		console.log("神抽狗资源：", res)
+	    		if(res.isSuccess){
+	    			this.tabDownData.list = res.data.list
+	    			// 给资源赋值id
+	    			if(this.tabDownData.list && this.tabDownData.list.length > 0){
+	    				this.resourceId = this.tabDownData.list[0].id;
+	    			}
+	    		}
+	    	})
+	    },
+	    
+	    // 边线库
+	    getQualitySide() {
+	    	this.sideList = [
+	    		[
+	    			{no: '1', haveGoods: '1', lockStatus: '0', name: '1'},
+	    			{no: '2', haveGoods: '0', lockStatus: '0', name: '2'},
+	    			{no: '3', haveGoods: '0', lockStatus: '0', name: '3'},
+	    			{no: '4', haveGoods: '1', lockStatus: '0', name: '4'},
+	    			{no: '5', haveGoods: '1', lockStatus: '1', name: '5'},
+	    			{no: '6', haveGoods: '0', lockStatus: '0', name: '6'}
+	    		],
+	    		[
+	    			{no: '10', haveGoods: '0', lockStatus: '1', name: '7'},
+	    			{no: '21', haveGoods: '0', lockStatus: '0', name: '8'},
+	    			{no: '22', haveGoods: '1', lockStatus: '0', name: '9'},
+	    			{no: '23', haveGoods: '0', lockStatus: '1', name: '10'},
+	    			{no: '24', haveGoods: '0', lockStatus: '0', name: '11'},
+	    			{no: '25', haveGoods: '0', lockStatus: '0', name: '12'}
+	    		]
+	    	];
+	    	/*LargeScreenAPI.getIntellect({}).then(res => {
+	    		res = res.data 
+	    		console.log("【边线库】5：", res)
+	    		if(res.isSuccess){
+	    			this.sideList = res.data;
+	    		}
+	    	})*/
+	    }
+	  }
+	}
+</script>
+
+<!-- 全局样式-通过定义父DOM的calss，来只影响本组件 -->
+<style type="text/css" lang="scss">
+	.bottomDiv2::-webkit-scrollbar-thumb {
+			background: #EEEEEE20;
+	}
+</style>
+<!-- 本组件样式 -->
+<style lang="scss" scoped>
+	.bottomDiv2 {
+		text-align: left;
+		.el-card {
+			vertical-align: top;
+		}
+	}
+	.linTitle {
+		display: inline-block;
+		width: 100%;
+		text-align: left;
+		color: #FFFFFF;
+		margin-top: 5px;
+		font-size: 14px;
+	}
+	.defaultRow{
+		text-align: left;
+		margin-left: 20px;
+		margin-bottom: 0;
+		.el-input__inner {
+			background: none;
+			color: #FFFFFF;
+		}
+	}
+	.headerBg{
+		.tabsDiv{
+			position: absolute;
+			font-size: 17px;
+			font-weight: bold;
+			color: #28BDE0;
+			bottom: 20px;
+			left: 0;
+			span {
+				cursor: pointer;
+				margin-right: 20px;
+			}
+			span:hover{
+				opacity: 0.7;
+			}
+			.tabsActive{
+				color: #FFFFFF;
+			}
+		}
+		.rebackLine{
+			position: absolute;
+			right: 60px;
+			top: 45px;
+			display: inline-block;
+			padding: 5px 10px;
+			color: #28BDE0;
+			cursor: pointer;
+			&:hover{
+				opacity: 0.7;
+			}
+		}
+	}
+	.battonDiv{
+		right: 20px;
+	}
+	.topRow{
+		margin: 20px 20px;
+		.alignLeft{
+			text-align: left;
+		}
+		.bottomDiv2{
+			width: 100%;
+			min-height: 202px;
+			white-space: nowrap;
+			overflow-x: auto;
+			/*&::-webkit-scrollbar-thumb {
+				background: rgb(238 233 233 / 20%);
+			}*/
+		}
+	}
+	.headerTitle{
+		position: relative;
+		top: 20px;
+		left: -13px;
+		font-family: "微软雅黑";
+		font-size: 32px;
+		text-shadow: 1px 2px 3px #ece9e9;
+		letter-spacing: 3px;
+	}
+	.blokTable{
+		display: inline-block;
+		border-left: 1px solid #096A94;
+		border-top: 1px solid #096A94;
+		vertical-align: top;
+		text-align: center;
+	}
+	.blokTable td{
+		position: relative;
+		border-right: 1px solid #096A94;
+		border-bottom: 1px solid #096A94;
+		color: white;
+		padding: 9px 12px;
+		font-size: 14px;
+	}
+	.blokTable td:hover{
+		cursor: pointer;
+		opacity: 0.7;
+	}
+	.blokTable .selectTd{
+		background: #04d3f4;
+	}
+	.guiDao-card{
+		position: relative;
+		z-index: 2;
+	}
+	.guiDaoTd{
+		position: relative;
+	}
+	.guiDao{
+		position: absolute;
+		top: 32%;
+		background: #457f968c;
+		width: 100%;
+		height: 50px;
+		z-index: 1;
+	}
+	.boxCardCls:hover{
+		cursor: pointer;
+		opacity: 0.7;
+	}
+	.blockDiv{
+		position: relative;
+		border: 1px solid #EEEEEE;
+		padding-left: 15px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		text-align: center;
+		color: white;
+		-moz-box-shadow: 1px 5px 5px #c0b7b7;
+		webkit-box-shadow: 1px 5px 5px #c0b7b7;
+		box-shadow: 1px 5px 5px #c0b7b7;
+		h1{
+			margin: 20px;
+			font-size: 45px;
+		}
+		p{
+			color: #000000;
+		}
+	}
+	.danweiSpan{
+		display: inline-block;
+		font-size: 16px;
+		color: black;
+	}
+	.blockBg1{
+		background: #0F79DC;
+		border: 1px solid #0F79DC;
+	}
+	.blockBg2{
+		background: #8E66E4;
+		border: 1px solid #8E66E4;
+	}
+	.blockBg3{
+		background: #3EB64B;
+		border: 1px solid #3EB64B;
+	}
+	.blockBg4{
+		background: #0BA6D5;
+		border: 1px solid #0BA6D5;
+	}
+	.blockBg5{
+		background: #E57878;
+		border: 1px solid #E57878;
+	}
+	.blockBg6{
+		background: #E37B3D;
+		border: 1px solid #E37B3D;
+	}
+	.rowCls{
+		box-sizing: border-box;
+	}
+	.rowCls .el-col{
+		margin-bottom: 20px;
+	}
+	.doubleTable{
+		width: 100%;
+	}
+	.doubleTable h1{
+		margin: 17px 0;
+	}
+	.el-card{
+		display: inline-block;
+		min-width: 200px;
+		margin: 0 5px 5px 0;
+	}
+	.areaTitle{
+		margin-bottom: 15px;
+	}
+	.areaTitle span{
+		position: relative;
+		display: inline-block;
+		padding-right: 20px;
+		font-weight: bold;
+	}
+	.areaTitle span:before{
+		position: absolute;
+		content: '';
+		background: #42d885;
+		top: 0px;
+		right: 0px;
+		width: 10px;
+		height: 100%;
+	}
+	.contentView{
+		font-size: 14px;
+		color: white;
+		text-align: center;
+		max-width: 126px;
+		padding: 3px 5px;
+		margin-bottom: 5px;
+	}
+	.borderBottom4{
+		border-bottom: 4px solid red;
+	}
+	.hebingDiv{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		min-height: 60px;
+		word-break: break-all;
+	}
+	.lineBianku{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #CCCCCC;
+		text-align: center;
+		padding: 3px 5px;
+		min-height: 60px;
+		max-width: 190px;
+		word-break: break-all;
+	}
+	.eqTitle{
+		position: relative;
+		width: 100%;
+		box-sizing: border-box;
+		padding-left: 25px;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 14px;
+		color: #FFFFFF;
+		margin: 20px 0 5px;
+	}
+	.eqTitle:before{
+		content: 'M';
+		position: absolute;
+		top: 0;
+		left: 0;
+		background: #1890ff;
+		color: white;
+		padding: 0 2px 1px;
+	}
+	.eqTitle2{
+		width: 100%;
+		max-width: 70px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 12px;
+	}
+	.recordSpan{
+		display: inline-block;
+		background: #0F79DC;
+		font-size: 12px;
+		padding: 2px 10px;
+		color: white;
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius: 3px;
+	}
+	.jinduTiao{
+		margin: 5px 0;
+	}
+	.statusDiv{
+		position: absolute;
+		top: 5px;
+		right: 15px;
+		text-align: right;
+	}
+	.statusDiv span{
+		display: inline-block;
+		font-size: 12px;
+		padding: 2px 10px;
+		color: white;
+		-moz-border-radius: 2px;
+		-webkit-border-radius: 2px;
+		border-radius: 2px;
+	}
+	.footerDiv{
+		width: 100%;
+		padding: 7px 0 3px;
+		border-top: 1px solid #CCCCCC;
+	}
+	.footerDiv a{
+		display: inline-block;
+		background: #0F79DC;
+		font-size: 12px;
+		padding: 5px 15px;
+		color: white;
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius: 3px;
+	}
+	.footerDiv a:hover{
+		opacity: 0.7;
+	}
+</style>

imcs-ui/src/views/zuihou/largeScreen/modeSummary/Index.vue

@@ -29,25 +29,13 @@
   		<el-row class="topRow">
   			<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin: 0 auto;position: relative;z-index: 1;">
   				<tr>
-  					<td class="noBottomCard" align="left">
-							<!-- 质量中心  -->
+  					<td class="noBottomCard" align="right" colspan="2">
+							<!-- 保障中心  -->
   						<el-card class="box-card">
 								<div class="boxDiv" @click="boxCardClk('three')">
 									<div class="titleCard">
 										<span class="runStatus">运行中</span>
-										<span class="runTitle">质量中心</span>
-									</div>
-									<img class="suolieImg" :src="urls[2]"/>
-								</div>
-							</el-card>
-  					</td>
-  					<td class="noBottomCard" align="right">
-							<!-- 智能生产单元 -->
-							<el-card class="box-card">
-								<div class="boxDiv" @click="boxCardClk('one')">
-									<div class="titleCard">
-										<span class="runStatus">运行中</span>
-										<span class="runTitle">智能生产单元</span>
+										<span class="runTitle">保障中心</span>
 									</div>
 									<img class="suolieImg" :src="urls[0]"/>
 								</div>
@@ -59,24 +47,26 @@
   					</td>
   				</tr>
   				<tr>
-  					<td align="left">
+  					<td align="left" width="40%">
+  						<!-- 舱体线 -->
 							<el-card class="box-card">
-								<div class="boxDiv" @click="boxCardClk('four')">
-									<img class="suolieImg" :src="urls[3]"/>
+								<div class="boxDiv" @click="boxCardClk('two')">
+									<img class="suolieImg" :src="urls[1]"/>
 									<div class="titleCard">
 										<span class="runStatus">运行中</span>
-										<span class="runTitle">智能仓储区</span>
+										<span class="runTitle">舱体线</span>
 									</div>
 								</div>
 							</el-card>
   					</td>
-  					<td align="right">
+  					<td align="left">
+							<!-- 框体线 -->
 							<el-card class="box-card">
-								<div class="boxDiv" @click="boxCardClk('two')">
-									<img class="suolieImg" :src="urls[1]"/>
+								<div class="boxDiv" @click="boxCardClk('one')">
+									<img class="suolieImg" :src="urls[2]"/>
 									<div class="titleCard">
 										<span class="runStatus">运行中</span>
-										<span class="runTitle">柔性智能加工区</span>
+										<span class="runTitle">框体线</span>
 									</div>
 								</div>
 							</el-card>
@@ -85,7 +75,7 @@
   			</table>
   			
   			<div class="guiDaoDiv">
-  				<span class="guiDao guiDao1"></span>
+  				
   				<span class="guiDao guiDao2"></span>
   				<span class="guiDao guiDao3"></span>
   				<span class="guiDao guiDao4"></span>
@@ -114,7 +104,11 @@
 	  },
 	  data () {
 	    return {
-	    	urls: [require('@/assets/yunMap/large1.png'), require('@/assets/yunMap/large2.png'), require('@/assets/yunMap/large3.png'), require('@/assets/yunMap/large4.png')],
+	    	urls: [
+		    	require('@/assets/yunMap/bzzx_icon.png'), 
+		    	require('@/assets/yunMap/ct_icon.png'), 
+		    	require('@/assets/yunMap/kt_icon.png')
+	    	],
 	    	resourceId: '',
 	    	url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
 	    	toolsImg: 'tools.png',
@@ -157,19 +151,15 @@
 	  	
 	  	// 【SUM50】点击-事件
 	  	boxCardClk(flag){
-	  		// 智能仓储区 - 默认
-	  		let paths = "/largeScreen/intellectStorage";
-	  		// 智能生产单元
+	  		// 保障中心 - 默认
+	  		let paths = "/largeScreen/supportCenter";
+	  		// 框体线
 	  		if(flag == "one"){
-	  			paths = "/largeScreen/intellectLine";
+	  			paths = "/largeScreen/cabinLine";
 	  		}
-	  		// 柔性智能加工区
+	  		// 舱体线
 	  		if(flag == "two"){
-	  			paths = "/largeScreen/intellectMachining";
-	  		}
-	  		// 质量中心
-	  		if(flag == "three"){ 
-	  			paths = "/largeScreen/qualityCenterScreen";
+	  			paths = "/largeScreen/frameLine";
 	  		}
 	  		// 2D数据模式
 	  		if(flag == "data2"){
@@ -339,32 +329,35 @@
 		.guiDao2{
 			position: absolute;
 			top: 263px;
-			left: 50px;
-			width: 40%;
+			left: 170px;
+			width: -moz-calc(80% - 120px);
+			width: -webkit-calc(80% - 120px);
+			width: calc(80% - 120px);
 		}
 		.guiDao3{
 			position: absolute;
-			left: -moz-calc(40% + 50px);
-			left: -webkit-calc(40% + 50px);
-			left: calc(40% + 50px);
-			top: 450px;
-			width: 35%;
+			left: -moz-calc(45% + 50px);
+			left: -webkit-calc(45% + 50px);
+			left: calc(45% + 50px);
+			top: 313px;
+			width: 50px;
+			height: 100px;
 		}
 		.guiDao4{
 			position: absolute;
-			left: 0;
-			top: 200px;
+			left: 120px;
+			top: 263px;
 			width: 50px;
 			height: 200px;
 		}
 		.guiDao5{
 			position: absolute;
-			left: -moz-calc(40% + 50px);
-			left: -webkit-calc(40% + 50px);
-			left: calc(40% + 50px);
-			top: 120px;
+			left: -moz-calc(80% + 50px);
+			left: -webkit-calc(80% + 50px);
+			left: calc(80% + 50px);
+			top: 183px;
 			width: 50px;
-			height: 330px;
+			height: 130px;
 		}
 		.barSpan {
 			position: absolute;

imcs-ui/src/views/zuihou/largeScreen/supportCenter/index.vue

@@ -0,0 +1,1414 @@
+<!-- 【保障中心】模块 -->
+<template>
+  <div id="playerMap" ref="playerMap" class="app-container lineBoard platformDiv">
+  	<!-- 统计数据区域 -->
+    <el-row :gutter="20" class="rowCls">
+    	<div class="headerBg">
+	    	<!--<div class="headerTitle">智能化柔性制造单元</div>-->
+	    	<!-- tab切换回 -->
+    		<div class="tabsDiv">
+    			<!-- 3D孪生展示 -->
+    			<span>{{$t("largeScreen.common.data3d")}}</span>
+    			<!-- 2D简洁模式 -->
+    			<span class="tabsActive">{{$t("largeScreen.common.data2d")}}</span>
+    			<!-- 2D数据模式 -->
+    			<span @click="boxCardClk()">{{$t("largeScreen.common.data2shu")}}</span>
+    		</div>
+    		<!-- 全屏 -->
+	    	<div class="battonDiv">
+	    		<el-tooltip v-if="!isFullSreen" class="item" effect="dark" :content="$t('largeScreen.common.screening')" placement="top-start">
+	    			<a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
+	    		</el-tooltip>
+	    		<el-tooltip v-else class="item" effect="dark" :content="$t('largeScreen.common.cancel')" placement="top-start">
+	    			<a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
+	    		</el-tooltip>
+	    	</div>
+	    	<!-- 返回产线 -->
+	    	<span class="rebackLine" @click="rebackLine()">{{$t('largeScreen.common.returns')}}</span>
+    	</div>
+    </el-row>
+    
+  	<!-- 区域模块 -->
+  	<div class="areaDiv">
+  		<!-- 搜索-部分 -->
+	  	<div class="defaultRow noBorder">
+		  		<el-select v-model="opValue" @change="selectChange" :placeholder='$t("common.pleaseSelect")'>
+				    <el-option
+				      v-for="item in options"
+				      :key="item.value"
+				      :label="item.label"
+				      :value="item.value">
+				    </el-option>
+				  </el-select>
+	  	</div>
+	  	<div class="conntent">
+				  	<!-- 上-部分 -->
+			  		<el-row class="topRow alignLeft">
+			  			<div class="bottomDiv2">
+			  				<!-- 方块 -->
+				  			<el-card class="box-card" style="margin-right: 20px;">
+					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
+					  				<tr v-for="(item, index) in sideList0" :key="index">
+					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
+					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
+					  					</td>
+					  				</tr>
+					  			</table>
+				  				<div class="linTitle">边线库</div>
+				  			</el-card>
+			  			</div>
+			  		</el-row>
+			  	
+			  		<!-- 中-部分 -->
+			  		<el-row class="topRow">
+			  			<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin: 30px auto;">
+			  				<tr>
+			  					<td class="guiDaoTd" width="700px">
+			  						<div class="guiDao"></div>
+			  						<!-- 伺服舵机 -->
+			  						<template v-for="item in moduleList">
+											<el-card v-if="item.code == 'BZ_371'" class="box-card guiDao-card">
+								  			<!-- 内容区域(格式一) -->
+								  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+								  				<tr>
+									  				<td align="center">
+									  					<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+								  							<div class="eqTitle">{{item.name}}</div>
+								  						</el-tooltip>
+					  									<template v-for="obj in item.positionList">
+					  										<el-tooltip :key="obj.id" class="item" effect="dark" :content="obj.name" placement="top-start">
+					  											<div :class="reJisuanCls(obj, true)">
+					  												<div class="ellipsisCom">{{obj.name}}</div>
+					  											</div>
+					  										</el-tooltip>
+					  									</template>
+								  						<!--<div class="contentView">0001</div>
+								  						<div class="contentView">0002</div>
+								  						<div class="contentView">0003</div>-->
+								  					</td>
+							  					</tr>
+								  			</table>
+												<!-- 状态 -->
+					  						<div class="statusDiv">
+													<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+													<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+													<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+												</div>
+											</el-card>
+										</template>	
+			  					</td>
+			  				</tr>
+			  			</table>
+			  			
+							
+			  		</el-row>
+			  		
+			  		<!-- 下-部分 -->
+			  		<el-row class="topRow" style="text-align: left;">
+			  			<div class="bottomDiv2">
+			  				<!-- AGV上下料站-1 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'BZ_361'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'BZ_362'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'BZ_363'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			
+			  				<!-- 方块 -->
+				  			<el-card class="box-card" style="margin: 0 20px;">
+					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
+					  				<tr v-for="(item, index) in sideList" :key="index">
+					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
+					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
+					  					</td>
+					  				</tr>
+					  			</table>
+				  				<div class="linTitle">框体缓存库</div>
+				  			</el-card>
+				  			
+				  			<!-- 方块 -->
+				  			<el-card class="box-card" style="margin: 0 20px;">
+					  			<table class="blokTable" border="0" cellspacing="0" cellpadding="0">
+					  				<tr v-for="(item, index) in sideList" :key="index">
+					  					<td v-for="obj in item" :key="obj.no" :class="obj.haveGoods == '1' ? 'selectTd' : ''">
+					  						<div :class="obj.lockStatus == '0' ? 'lockStatusCls' : ''">{{ obj.name }}</div>
+					  					</td>
+					  				</tr>
+					  			</table>
+				  				<div class="linTitle">舱体缓存库</div>
+				  			</el-card>
+				  			
+				  			<!-- 三坐标 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'BZ_szb'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 打标机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'BZ_370'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'BZ_364'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			
+			  				<!-- 打标机 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'BZ_365'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'BZ_366'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+				  			<!-- SMU50-4 -->
+					  		<template v-for="item in moduleList">	
+									<el-card v-if="item.code == 'BZ_367'" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<div v-if="item.cncProgram == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+						  			<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+					  		</template>
+			  			
+			  				<!-- 打标机 -->
+					  		<template v-for="item in moduleList">		
+						  		<el-card v-if="item.code == 'BZ_368'" :key="item.id" class="box-card">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+						  		</el-card>
+								</template>	
+								
+								<!-- 清洗机 -->
+						  	<template v-for="item in moduleList">	
+									<el-card class="box-card" v-if="item.code == 'BZ_369'" :key="item.id">
+						  			<!-- 内容区域(格式一) -->
+						  			<table style="width: 100%;" @click="boxCardClkCard(item.id)">
+						  				<tr>
+						  					<td>
+						  						<!-- 名称 -->
+						  						<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+						  							<div class="eqTitle">{{ item.name }}</div>
+						  						</el-tooltip>
+						  						<!-- 进度条 -->
+						  						<div v-if="item.todoTaskPercent > 0" class="jinduTiao">
+						  							<el-progress :text-inside="true" :stroke-width="15" :percentage="parseInt(item.todoTaskPercent)"></el-progress>
+						  						</div>
+						  						<!-- 任务内容 -->
+						  						<table style="width: 100%;">
+						  							<tr>
+						  								<td>
+						  									<div :class="reJisuanCls(item.positionList[0])">
+						  										<el-tooltip class="item" effect="dark" :content="item.positionList[0].name" placement="top-start">
+						  											<div class="ellipsisCom">{{item.positionList[0].name}}</div>
+						  										</el-tooltip>
+						  									</div>
+						  								</td>
+						  								<td width="40" align="right" style="vertical-align: top;">
+						  									<!--<div class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(toolsImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>-->
+												  			<div v-if="item.toolLib == '1'" class="block">
+															    <el-image
+															      style="max-width: 40px; max-height:50px;"
+															      :src="resolveLogo(programImg)"
+															      fit="contain"
+															    >
+															    </el-image>
+												  			</div>
+						  								</td>
+						  							</tr>
+						  						</table>
+						  					</td>
+						  				</tr>
+						  			</table>
+										<!-- 状态 -->
+										<div class="statusDiv">
+											<span class="linkLine" :style="setBackground(item.linkStatus.background)">{{item.linkStatus.text}}</span>
+											<span class="jianguan" :style="setBackground(item.controlStatus.background)">{{item.controlStatus.text}}</span>
+											<span class="producting" :style="setBackground(item.productionStatus.background)">{{item.productionStatus.text}}</span>
+										</div>
+									</el-card>
+								</template>
+								
+			  			</div>
+			  		</el-row>
+  		
+	  	</div>
+  	</div>
+  </div>
+</template>
+
+<script>
+	// 【区域管理】-API
+	import lineBoardAPI from "@/api/runManageCenter/lineBoard"
+	// 【示范线大屏】-API
+	import LargeScreenAPI from "@/api/largeScreen"
+	// 共通保存本地
+	import db from '@/utils/localstorage'
+	import elDragDialog from '@/directive/el-drag-dialog'
+	import { downloadFile, initEnums, initDicts, initQueryParams, fullScreen, exitFullScreen } from '@/utils/commons'
+	import { randomFloor } from '@/utils/utils'
+	import axios from 'axios'
+	// 加载动态数字组件
+	import countTo from 'vue-count-to'
+	export default {
+	  name: "IntellectMachining",
+	  directives: { elDragDialog },
+	  components: { countTo },
+	  props: {
+	  },
+	  data () {
+	    return {
+	    	resourceId: '',
+	    	url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+	    	toolsImg: 'tools.png',
+	    	programImg: 'program.png',
+	    	srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ],
+	    	topTongjiData: {"allCount": 0, "onlineCount": 0,"offlineCount": 0,"supervisionCount": 0,"independentCount": 0,"workCount": 0,"freeCount": 0,"waitCount": 0,"exceptionCount": 0},
+	    	tabOneData: {},  // 按区域-数据，
+	    	tabDownData: {    // 下部分-数据
+	    		list: []
+	    	},
+	    	sideList0: [], // 边线库-上
+	    	sideList: {}, // 边线库
+	    	isFullSreen: false, // 默认不全屏
+	      queryParams: initQueryParams({}),
+	      moduleList: [], // 模块信息
+	      options: [{
+          value: 'A',
+          label: '保障中心'
+        }, {
+          value: 'B',
+          label: '舱体线'
+        }, {
+          value: 'C',
+          label: '框体线'
+        }],
+        opValue: 'A',
+	    }
+	  },
+	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
+	  created() {
+	  	// 加载生产资源
+	  	this.getTabList();
+	  	// 边线库
+	  	this.getQualitySide();
+	  	// 加载-模块信息
+	  	this.demoLineResource();
+		},
+		watch: {
+			/*$route(){
+				// 如果是【产线看板详情页面】
+  	  	if(this.$route.fullPath.indexOf("/runManageCenter/lineBoard") > -1){
+  	  		// 是否显示大屏
+  	  		// this.setMaxScreen()
+  	  	}
+      },
+	  	websocketMsg(curVal, oldVal) {
+	      let obj = JSON.parse(curVal)
+	      this.openMessageTips(obj)
+	    }*/
+	  },
+	  computed: {
+	    currentUser () {
+	      return this.$store.state.account.user
+	    },
+	    nationList() {
+        return convertEnum(this.dicts.NATION)
+      },
+      // 接收信息
+      /*websocketMsg() {
+	      return this.$store.getters.STAFF_UPDATE.msg
+	    }*/
+	  },
+	  mounted () {
+	    /*// 判断长连接，是否已经开启
+	  	if(this.$store.state.websocket.websock == null){
+	  		// 页面刚进入时开启长连接
+    		this.$store.dispatch('STAFF_WEBSOCKET')
+	  	}*/
+	  },
+	  // 销毁
+		destroyed() {
+	    // this.websocketClose()
+	  },
+	  methods: {
+	  	// 加载-仓储区模块信息
+	  	demoLineResource(){
+	  		LargeScreenAPI.yunjianResource({ type:1 }).then(res => {
+	  			res =  res.data;
+	  			if(res.isSuccess){
+	  				console.log("2D模式-模块信息123: ",res.data);
+	  				this.moduleList = res.data.list;
+	  			}
+	  			
+	  		})
+	  	},
+	  	
+	  	// [选择单元]的值变化-事件
+	  	selectChange(val){
+	  		console.log("[选择单元]的值变化: ", val);
+	  		let paths = "";
+	  		if(val == "A"){  // 框体线
+	  			paths = "/largeScreen/cabinLine";
+	  		}
+	  		if(val == "B"){  // 舱体线
+	  			paths = "/largeScreen/frameLine";
+	  		}
+	  		if(val == "C"){  // 保障中心
+	  			paths = "/largeScreen/supportCenter";
+	  		}
+	  		if(paths){
+	  			this.toRouter(paths);
+	  		}
+	  	},
+	  	
+	  	// 根据路由，跳转页面
+	  	toRouter(paths){
+	  		// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: {resourceId: this.tabDownData.list.length > 0 ? this.tabDownData.list[0].id : '' }}) //带参跳转
+				})
+	  	},
+	  	
+	  	// 是否设置大屏
+	  	setMaxScreen(){
+	  		let isCurrScreen = db.get("isCurrScreen");
+	  		console.log("是否全屏22222：",isCurrScreen)
+	  		if(isCurrScreen == true){
+	  			this.fullPing();
+	  		}
+	  	},
+	  	// 推送接收到的数据
+	  	openMessageTips(data){
+	  		// 如果是【产线看板】
+  	  	if(this.$route.fullPath.indexOf("/largeScreen/intellectMachining") > -1){
+		  		//console.log("接收websocket的推送信息22222 == ",data)
+		  		// 如果是【线边库】信息
+		  		if(data.type == 'PUSH_TYPE_STORGE'){
+		  			this.sideList = data.data.Rxianbianku;
+		  		}
+		  		// 如果是【生产资源】信息
+		  		if(data.type == 'PUSH_TYPE_RESOURCE') {
+		  			this.moduleList = data.data.list;
+		  			//console.log("接收websocket的推送信息--【柔性智能加工区】 == ",data.data.list);
+		  			// this.moduleList = data.data['4'];
+		  		}
+		  		//  如果是【生产资源】信息
+		  		/*if(data.type == 'PUSH_TYPE_RESOURCE_STATUS'){
+		  			if(data[this.resourceId]){
+		  				// 生产资源的状态和进度
+		  				if(this.tabDownData.list[0].linkStatus){
+		  					this.tabDownData.list[0].linkStatus = data[this.resourceId].linkStatus
+		  				}
+		  				if(this.tabDownData.list[0].controlStatus){
+		  					this.tabDownData.list[0].controlStatus = data[this.resourceId].controlStatus
+		  				}
+		  				if(this.tabDownData.list[0].productionStatus){
+		  					this.tabDownData.list[0].productionStatus = data[this.resourceId].productionStatus
+		  				}
+		  				this.tabDownData.list[0].todoTaskPercent = data[this.resourceId].todoTaskPercent
+		  			}
+		  		}*/
+		  	}
+	  	},
+	  	// 组件销毁的时候，关闭websocket连接
+	  	websocketClose() {
+	      this.$store.getters.STAFF_UPDATE.lockReconnect = true
+	      this.$store.getters.STAFF_UPDATE.websock.close() // 离开路由之后断开websocket连接
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.reconnectData) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.timeoutObj) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.serverTimeoutObj) // 离开清除 timeout
+	    },
+	  	// websocket信息变更
+	  	onmessage() {
+	      this.$store.getters.STAFF_UPDATE.websock.onmessage = function(evt) {
+	        //console.log(evt)
+	      }
+	    },
+	    
+	  	// 【SUM50】点击-事件
+	  	boxCardClk(){
+	  		let paths = "/largeScreen/twoDatasModel";
+				// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: {}}) //带参跳转
+				})
+				// this.$router.push('/runManageCenter/lineBoardDetail')
+	  		// console.log("弹出详情页面！", paths)
+	  	},
+	  	
+	  	// 全屏
+	  	fullPing(){
+	  		this.$nextTick(() => {
+	  			// 显示【退出全屏】
+	  			this.isFullSreen = true
+	  			// 如果是退出全屏
+	  			db.save("isCurrScreen", this.isFullSreen)
+	  			let $playerMap = this.$refs.playerMap
+	  			if($playerMap){
+	  				fullScreen($playerMap)
+	  				// fullScreen(document.getElementById('playerMap'))
+	  			}
+	  		})
+	  	},
+	  	// 退出全屏
+	  	exitFullPing(){
+	  		this.$nextTick(() => {
+	  			// 显示【全屏】
+	  			this.isFullSreen = false
+	  			// 如果是全屏
+	  			db.save("isCurrScreen", this.isFullSreen)
+	  			exitFullScreen(document.getElementById('playerMap'))
+	  		})
+	  	},
+	  	
+	  	// 【返回产线】按钮-事件
+	  	rebackLine(){
+	  		this.$router.go(-1);
+	  	},
+	  	
+	  	// 【SUM50】点击-事件
+	  	boxCardClkCard(id){
+	  		let paths = "/runManageCenter/lineBoardDetail";
+				// 调用全局挂载的方法
+				this.$store.dispatch('tagsView/delView', this.$route).then(res => {
+					this.$router.push({ path: paths, query: { resourceId: id }}) //带参跳转
+				})
+	  	},
+	  	
+	  	// 加载背景颜色
+	  	setBackground(color){
+	  		return "background: "+ color +";"
+	  	},
+	  	
+	  	// 生产资源，计算返回class
+	  	reJisuanCls(obj, flag) {
+	  		let str = "contentView hebingDiv";
+	  		if(flag){
+	  			str = "contentView";
+	  		}
+	  		if(obj.lockStatus == "0"){
+	  			str += " borderBottom8";
+	  		}
+	  		if(obj.haveGoods == '1'){
+	  			str += " haveGoodsCls";
+	  		}
+	  		return str;
+	  	},
+	  	
+	  	// 加载【本地图片】
+	  	resolveLogo(logo) {
+        return require(`@/assets/icon/${logo}`);
+      },
+      
+	    // 获取列表数据
+	    getTabList(){
+	    	lineBoardAPI.getBigScreenList({}).then(res => {
+	    		res = res.data 
+	    		console.log("神抽狗资源：", res)
+	    		if(res.isSuccess){
+	    			this.tabDownData.list = res.data.list
+	    			// 给资源赋值id
+	    			if(this.tabDownData.list && this.tabDownData.list.length > 0){
+	    				this.resourceId = this.tabDownData.list[0].id;
+	    			}
+	    		}
+	    	})
+	    },
+	    
+	    // 边线库
+	    getQualitySide() {
+	    	for(let i = 1; i <= 10; i++){
+	    		let arr = [];
+	    		for(let j = 1; j <= 30; j++){
+	    			arr.push({
+	    				no: 'wks'+ Math.random(), 
+	    				haveGoods: randomFloor(1,10000) > 9000 ? '1' : '0', 
+	    				lockStatus: randomFloor(1,10000) > 9000 ? '0' : '1',
+	    				name: (i-1)*30+j
+	    			});
+	    		}
+	    		this.sideList0.push(arr);
+	    	}
+	    	console.log("打印数据：", this.sideList0);
+	    	this.sideList = [
+	    		[
+	    			{no: '1', haveGoods: '1', lockStatus: '0', name: '1'},
+	    			{no: '2', haveGoods: '0', lockStatus: '0', name: '2'},
+	    			{no: '3', haveGoods: '0', lockStatus: '0', name: '3'},
+	    			{no: '4', haveGoods: '1', lockStatus: '0', name: '4'},
+	    			{no: '5', haveGoods: '1', lockStatus: '1', name: '5'}
+	    		],
+	    		[
+	    			{no: '10', haveGoods: '0', lockStatus: '1', name: '7'},
+	    			{no: '21', haveGoods: '0', lockStatus: '0', name: '8'},
+	    			{no: '22', haveGoods: '1', lockStatus: '0', name: '9'},
+	    			{no: '23', haveGoods: '0', lockStatus: '1', name: '10'},
+	    			{no: '24', haveGoods: '0', lockStatus: '0', name: '11'}
+	    		]
+	    	];
+	    	/*LargeScreenAPI.getIntellect({}).then(res => {
+	    		res = res.data 
+	    		console.log("【边线库】5：", res)
+	    		if(res.isSuccess){
+	    			this.sideList = res.data;
+	    		}
+	    	})*/
+	    }
+	  }
+	}
+</script>
+
+<!-- 全局样式-通过定义父DOM的calss，来只影响本组件 -->
+<style type="text/css" lang="scss">
+	.bottomDiv2::-webkit-scrollbar-thumb {
+			background: #EEEEEE20;
+	}
+</style>
+<!-- 本组件样式 -->
+<style lang="scss" scoped>
+	.bottomDiv2 {
+		text-align: left;
+		.el-card {
+			vertical-align: top;
+		}
+	}
+	.linTitle {
+		display: inline-block;
+		width: 100%;
+		text-align: left;
+		color: #FFFFFF;
+		margin-top: 5px;
+		font-size: 14px;
+	}
+	.defaultRow{
+		text-align: left;
+		margin-left: 20px;
+		margin-bottom: 0;
+		.el-input__inner {
+			background: none;
+			color: #FFFFFF;
+		}
+	}
+	.headerBg{
+		.tabsDiv{
+			position: absolute;
+			font-size: 17px;
+			font-weight: bold;
+			color: #28BDE0;
+			bottom: 20px;
+			left: 0;
+			span {
+				cursor: pointer;
+				margin-right: 20px;
+			}
+			span:hover{
+				opacity: 0.7;
+			}
+			.tabsActive{
+				color: #FFFFFF;
+			}
+		}
+		.rebackLine{
+			position: absolute;
+			right: 60px;
+			top: 45px;
+			display: inline-block;
+			padding: 5px 10px;
+			color: #28BDE0;
+			cursor: pointer;
+			&:hover{
+				opacity: 0.7;
+			}
+		}
+	}
+	.battonDiv{
+		right: 20px;
+	}
+	.topRow{
+		margin: 20px 20px;
+		.alignLeft{
+			text-align: left;
+		}
+		.bottomDiv2{
+			width: 100%;
+			min-height: 202px;
+			white-space: nowrap;
+			overflow-x: auto;
+			/*&::-webkit-scrollbar-thumb {
+				background: rgb(238 233 233 / 20%);
+			}*/
+		}
+	}
+	.headerTitle{
+		position: relative;
+		top: 20px;
+		left: -13px;
+		font-family: "微软雅黑";
+		font-size: 32px;
+		text-shadow: 1px 2px 3px #ece9e9;
+		letter-spacing: 3px;
+	}
+	.blokTable{
+		display: inline-block;
+		border-left: 1px solid #096A94;
+		border-top: 1px solid #096A94;
+		vertical-align: top;
+		text-align: center;
+	}
+	.blokTable td{
+		position: relative;
+		border-right: 1px solid #096A94;
+		border-bottom: 1px solid #096A94;
+		color: white;
+		padding: 9px 12px;
+		font-size: 14px;
+	}
+	.blokTable td:hover{
+		cursor: pointer;
+		opacity: 0.7;
+	}
+	.blokTable .selectTd{
+		background: #04d3f4;
+	}
+	.guiDao-card{
+		position: relative;
+		z-index: 2;
+	}
+	.guiDaoTd{
+		position: relative;
+	}
+	.guiDao{
+		position: absolute;
+		top: 32%;
+		background: #457f968c;
+		width: 100%;
+		height: 50px;
+		z-index: 1;
+	}
+	.boxCardCls:hover{
+		cursor: pointer;
+		opacity: 0.7;
+	}
+	.blockDiv{
+		position: relative;
+		border: 1px solid #EEEEEE;
+		padding-left: 15px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		text-align: center;
+		color: white;
+		-moz-box-shadow: 1px 5px 5px #c0b7b7;
+		webkit-box-shadow: 1px 5px 5px #c0b7b7;
+		box-shadow: 1px 5px 5px #c0b7b7;
+		h1{
+			margin: 20px;
+			font-size: 45px;
+		}
+		p{
+			color: #000000;
+		}
+	}
+	.danweiSpan{
+		display: inline-block;
+		font-size: 16px;
+		color: black;
+	}
+	.blockBg1{
+		background: #0F79DC;
+		border: 1px solid #0F79DC;
+	}
+	.blockBg2{
+		background: #8E66E4;
+		border: 1px solid #8E66E4;
+	}
+	.blockBg3{
+		background: #3EB64B;
+		border: 1px solid #3EB64B;
+	}
+	.blockBg4{
+		background: #0BA6D5;
+		border: 1px solid #0BA6D5;
+	}
+	.blockBg5{
+		background: #E57878;
+		border: 1px solid #E57878;
+	}
+	.blockBg6{
+		background: #E37B3D;
+		border: 1px solid #E37B3D;
+	}
+	.rowCls{
+		box-sizing: border-box;
+	}
+	.rowCls .el-col{
+		margin-bottom: 20px;
+	}
+	.doubleTable{
+		width: 100%;
+	}
+	.doubleTable h1{
+		margin: 17px 0;
+	}
+	.el-card{
+		display: inline-block;
+		min-width: 200px;
+		margin: 0 5px 5px 0;
+	}
+	.areaTitle{
+		margin-bottom: 15px;
+	}
+	.areaTitle span{
+		position: relative;
+		display: inline-block;
+		padding-right: 20px;
+		font-weight: bold;
+	}
+	.areaTitle span:before{
+		position: absolute;
+		content: '';
+		background: #42d885;
+		top: 0px;
+		right: 0px;
+		width: 10px;
+		height: 100%;
+	}
+	.contentView{
+		font-size: 14px;
+		color: white;
+		text-align: center;
+		max-width: 126px;
+		padding: 3px 5px;
+		margin-bottom: 5px;
+	}
+	.borderBottom4{
+		border-bottom: 4px solid red;
+	}
+	.hebingDiv{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		min-height: 60px;
+		word-break: break-all;
+	}
+	.lineBianku{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #CCCCCC;
+		text-align: center;
+		padding: 3px 5px;
+		min-height: 60px;
+		max-width: 190px;
+		word-break: break-all;
+	}
+	.eqTitle{
+		position: relative;
+		width: 100%;
+		box-sizing: border-box;
+		padding-left: 25px;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 14px;
+		color: #FFFFFF;
+		margin: 20px 0 5px;
+	}
+	.eqTitle:before{
+		content: 'M';
+		position: absolute;
+		top: 0;
+		left: 0;
+		background: #1890ff;
+		color: white;
+		padding: 0 2px 1px;
+	}
+	.eqTitle2{
+		width: 100%;
+		max-width: 70px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 12px;
+	}
+	.recordSpan{
+		display: inline-block;
+		background: #0F79DC;
+		font-size: 12px;
+		padding: 2px 10px;
+		color: white;
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius: 3px;
+	}
+	.jinduTiao{
+		margin: 5px 0;
+	}
+	.statusDiv{
+		position: absolute;
+		top: 5px;
+		right: 15px;
+		text-align: right;
+	}
+	.statusDiv span{
+		display: inline-block;
+		font-size: 12px;
+		padding: 2px 10px;
+		color: white;
+		-moz-border-radius: 2px;
+		-webkit-border-radius: 2px;
+		border-radius: 2px;
+	}
+	.footerDiv{
+		width: 100%;
+		padding: 7px 0 3px;
+		border-top: 1px solid #CCCCCC;
+	}
+	.footerDiv a{
+		display: inline-block;
+		background: #0F79DC;
+		font-size: 12px;
+		padding: 5px 15px;
+		color: white;
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius: 3px;
+	}
+	.footerDiv a:hover{
+		opacity: 0.7;
+	}
+</style>