From 7036cc397adccb4907b80a30143f7751b4e68db8 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 20 三月 2024 11:21:54 +0800
Subject: [PATCH] 实现首页公司级与分厂级看板布局及相关功能

---
 src/views/dashboard/BranchFactorySignage.vue | 1080 ++++++++++++++++++++++++++
 src/views/dashboard/IndexSignage.vue         | 1063 +++++++++++++++++++++++++
 src/components/page/GlobalFooter.vue         |   17 
 src/views/dashboard/Analysis.vue             |  117 +-
 src/components/layouts/TabLayout.vue         |   81 +
 src/components/page/GlobalLayout.vue         |   29 
 src/api/signage.js                           |   28 
 7 files changed, 2,288 insertions(+), 127 deletions(-)

diff --git a/src/api/signage.js b/src/api/signage.js
new file mode 100644
index 0000000..a62b28a
--- /dev/null
+++ b/src/api/signage.js
@@ -0,0 +1,28 @@
+import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'
+
+export default {
+  // 鏍规嵁鐢ㄦ埛ID鑾峰彇鐢ㄦ埛淇℃伅
+  getUserByIdApi: id => getAction('sys/api/getUserById', { id }),
+  // 璁惧杩愯鐘舵��
+  getEquipmentStatusStatisticsApi: productionCode => getAction('/mdc/home/equipmentStatusStatistics', { productionCode }),
+  // 璁惧鍒╃敤鐜�
+  getEquipmentUtilizationStatisticsApi: productionCode => getAction('/mdc/home/equipmentUtilizationStatistics', { productionCode }),
+  // 鎶�鏈姸鎬�
+  getEquipmentTechnologyStatusListApi: productionCode => getAction('/eam/calibrationOrder/getEquipmentTechnologyStatusList', { productionCode }),
+  // 璁惧鎶ヤ慨鏁呴殰
+  getReportRepairEquipmentListApi: productionCode => getAction('/eam/calibrationOrder/getReportRepairEquipmentList', { productionCode }),
+  // 鏈湀涓変繚璁″垝
+  getThisMonthMaintenanceListApi: productionCode => getAction('/eam/calibrationOrder/getThisMonthMaintenanceList', { productionCode }),
+  // 鏈湀瀹屾垚涓変繚璁″垝
+  getThisMonthMaintenanceFinishListApi: productionCode => getAction('/eam/calibrationOrder/getThisMonthMaintenanceFinishList', { productionCode }),
+  // 涓嬫湀涓変繚璁″垝
+  getNextMonthMaintenanceList: productionCode => getAction('/eam/calibrationOrder/getNextMonthMaintenanceList', { productionCode }),
+  // 涓嬩笅鏈堜笁淇濊鍒�
+  getNextNextMonthMaintenanceListApi: productionCode => getAction('/eam/calibrationOrder/getNextNextMonthMaintenanceList', { productionCode }),
+  // 浜屼繚璁″垝
+  getTwoMaintenancePlanListApi: productionCode => getAction('/eam/calibrationOrder/getTwoMaintenancePlanList', { productionCode }),
+  // 璁惧OEE缁熻
+  getEquipmentOEEStatistics: productionCode => getAction('/mdc/home/equipmentOEEStatistics', { productionCode }),
+  // 璁惧OEE鍜屽埄鐢ㄧ巼瀵规瘮
+  getEquipmentMonthStatisticsApi: productionCode => getAction('/mdc/home/equipmentMonthStatistics', { productionCode })
+}
\ No newline at end of file
diff --git a/src/components/layouts/TabLayout.vue b/src/components/layouts/TabLayout.vue
index 9f619a5..0340721 100644
--- a/src/components/layouts/TabLayout.vue
+++ b/src/components/layouts/TabLayout.vue
@@ -4,8 +4,8 @@
     <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
     <!-- update-end- author:sunjianlei --- date:20191009 --- for: 鎻愬崌鍙抽敭鑿滃崟鐨勫眰绾� -->
     <a-tabs
+      v-if="$route.meta.title!=='棣栭〉'&&multipage"
       @contextmenu.native="e => onContextmenu(e)"
-      v-if="multipage"
       :active-key="activePage"
       class="tab-layout-tabs"
       style="height:52px"
@@ -14,11 +14,12 @@
       @change="changePage"
       @tabClick="tabCallBack"
       @edit="editPage">
-      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList" :closable="!(page.meta.title=='棣栭〉')">
+      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"
+                  :closable="!(page.meta.title=='棣栭〉')">
         <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
       </a-tab-pane>
     </a-tabs>
-    <div style="margin: 12px 12px 0;">
+    <div>
       <!-- update-begin-author:taoyan date:20201221 for:姝ゅ鍒犳帀transition鏍囩 涓嶇煡閬撲负浠�涔堝姞涓婂悗 椤甸潰璺敱鍒囨崲鐨勬椂鍊欏嵆1鍙婅彍鍗曞垏鍒�2鍙婅彍鍗曠殑鏃跺�� 涓や釜鑿滃崟椤甸潰浼氬悓鏃跺嚭鐜�300-500绉掑乏鍙� -->
       <keep-alive v-if="multipage">
         <router-view v-if="reloadFlag"/>
@@ -60,13 +61,13 @@
           { key: '2', icon: 'arrow-right', text: '鍏抽棴鍙充晶' },
           { key: '3', icon: 'close', text: '鍏抽棴鍏跺畠' }
         ],
-        reloadFlag:true
+        reloadFlag: true
       }
     },
     /* update_begin author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤 ->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
-    provide(){
-      return{
-        closeCurrent:this.closeCurrent
+    provide() {
+      return {
+        closeCurrent: this.closeCurrent
       }
     },
     /* update_end author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
@@ -99,17 +100,17 @@
         this.activePage = newRoute.fullPath
         if (!this.multipage) {
           this.linkList = [newRoute.fullPath]
-          this.pageList = [Object.assign({},newRoute)]
-        // update-begin-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
-        } else if(indexKey==newRoute.fullPath) {
+          this.pageList = [Object.assign({}, newRoute)]
+          // update-begin-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
+        } else if (indexKey == newRoute.fullPath) {
           //棣栭〉鏃� 鍒ゆ柇鏄惁缂撳瓨 娌℃湁缂撳瓨 鍒锋柊涔�
           if (newRoute.meta.keepAlive === false) {
             this.routeReload()
           }
-        // update-end-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
-        }else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+          // update-end-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
+        } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
           this.linkList.push(newRoute.fullPath)
-          this.pageList.push(Object.assign({},newRoute))
+          this.pageList.push(Object.assign({}, newRoute))
           //// update-begin-author:sunjianlei date:20200103 for: 濡傛灉鏂板鐨勯〉闈㈤厤缃簡缂撳瓨璺敱锛岄偅涔堝氨寮哄埗鍒锋柊涓�閬� #842
           // if (newRoute.meta.keepAlive) {
           //   this.routeReload()
@@ -118,7 +119,7 @@
         } else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
           let oldIndex = this.linkList.indexOf(newRoute.fullPath)
           let oldPositionRoute = this.pageList[oldIndex]
-          this.pageList.splice(oldIndex, 1, Object.assign({},newRoute,{meta:oldPositionRoute.meta}))
+          this.pageList.splice(oldIndex, 1, Object.assign({}, newRoute, { meta: oldPositionRoute.meta }))
         }
       },
       'activePage': function(key) {
@@ -131,7 +132,7 @@
         this.changeTitle(waitRouter.meta.title)
       },
       'multipage': function(newVal) {
-        if(this.reloadFlag){
+        if (this.reloadFlag) {
           if (!newVal) {
             this.linkList = [this.$route.fullPath]
             this.pageList = [this.$route]
@@ -143,7 +144,7 @@
         if (this.multipage && this.linkList.indexOf(indexKey) === -1) {
           this.addIndexToFirst()
         }
-      },
+      }
       // update-end-author:sunjianlei date:20191223 for: 淇浠庡崟椤垫ā寮忓垏鎹㈠洖澶氶〉妯″紡鍚庨椤典笉灞呯涓�浣嶇殑 BUG
     },
     methods: {
@@ -165,7 +166,7 @@
 
       // update-begin-author:sunjianlei date:20200120 for: 鍔ㄦ�佹洿鏀归〉闈㈡爣棰�
       changeTitle(title) {
-        let projectTitle = "MDC鏅烘収杞﹂棿"
+        let projectTitle = 'MDC鏅烘収杞﹂棿'
         // 棣栭〉鐗规畩澶勭悊
         if (this.$route.path === indexKey) {
           document.title = projectTitle
@@ -181,10 +182,10 @@
       tabCallBack() {
         this.$nextTick(() => {
           //update-begin-author:taoyan date: 20201211 for:銆愭柊鐗堛�憃nline鎶ラ敊 JT-100
-         setTimeout(()=>{
-           //鐪佸競鍖虹粍浠堕噷闈㈢粰window缁戝畾浜嗕釜resize浜嬩欢 瀵艰嚧鍒囨崲椤甸潰鐨勬椂鍊欒Е鍙戜簡浠栫殑resize锛屼絾鏄垏鎹㈤〉闈紝鐪佸競鍖虹粍浠惰繕娌¤閿�姣佸墠灏辫Е鍙戜簡璇ヤ簨浠讹紝瀵艰嚧鎺у埗鍙版姤閿欙紝鍔犱釜寤惰繜
-           triggerWindowResizeEvent()
-         },20)
+          setTimeout(() => {
+            //鐪佸競鍖虹粍浠堕噷闈㈢粰window缁戝畾浜嗕釜resize浜嬩欢 瀵艰嚧鍒囨崲椤甸潰鐨勬椂鍊欒Е鍙戜簡浠栫殑resize锛屼絾鏄垏鎹㈤〉闈紝鐪佸競鍖虹粍浠惰繕娌¤閿�姣佸墠灏辫Е鍙戜簡璇ヤ簨浠讹紝瀵艰嚧鎺у埗鍙版姤閿欙紝鍔犱釜寤惰繜
+            triggerWindowResizeEvent()
+          }, 20)
           //update-end-author:taoyan date: 20201211 for:銆愭柊鐗堛�憃nline鎶ラ敊 JT-100
         })
       },
@@ -200,7 +201,7 @@
           this.$message.warning('杩欐槸鏈�鍚庝竴椤碉紝涓嶈兘鍐嶅叧闂簡鍟�')
           return
         }
-        console.log("this.pageList ",this.pageList );
+        console.log('this.pageList ', this.pageList)
         let removeRoute = this.pageList.filter(item => item.fullPath == key)
         this.pageList = this.pageList.filter(item => item.fullPath !== key)
         let index = this.linkList.indexOf(key)
@@ -213,9 +214,9 @@
         let cacheRouterArray = Vue.ls.get(CACHE_INCLUDED_ROUTES) || []
         if (removeRoute && removeRoute[0]) {
           let componentName = removeRoute[0].meta.componentName
-          console.log("key: ", key);
-          console.log("componentName: ", componentName);
-          if(cacheRouterArray.includes(componentName)){
+          console.log('key: ', key)
+          console.log('componentName: ', componentName)
+          if (cacheRouterArray.includes(componentName)) {
             cacheRouterArray.splice(cacheRouterArray.findIndex(item => item === componentName), 1)
             Vue.ls.set(CACHE_INCLUDED_ROUTES, cacheRouterArray)
           }
@@ -269,13 +270,13 @@
         }
       },
       /* update_begin author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
-      closeCurrent(){
-        this.remove(this.activePage);
+      closeCurrent() {
+        this.remove(this.activePage)
       },
       /* update_end author:wuxianquan date:20190828 for: 鍏抽棴褰撳墠tab椤碉紝渚涘瓙椤甸潰璋冪敤->鏈涜彍鍗曡兘閰嶇疆澶栭摼锛岀洿鎺ュ脊鍑烘柊椤甸潰鑰屼笉鏄祵鍏frame #428 */
       closeOthers(pageKey) {
         let index = this.linkList.indexOf(pageKey)
-        if (pageKey == indexKey || pageKey.indexOf('?ticke=')>=0) {
+        if (pageKey == indexKey || pageKey.indexOf('?ticke=') >= 0) {
           this.linkList = this.linkList.slice(index, index + 1)
           this.pageList = this.pageList.slice(index, index + 1)
           this.activePage = this.linkList[0]
@@ -312,12 +313,12 @@
         }
       },
       //update-begin-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
-      dynamicRouterShow(key,title){
+      dynamicRouterShow(key, title) {
         let keyIndex = this.linkList.indexOf(key)
-        if(keyIndex>=0){
+        if (keyIndex >= 0) {
           let currRouter = this.pageList[keyIndex]
-          let meta = Object.assign({},currRouter.meta,{title:title})
-          this.pageList.splice(keyIndex, 1, Object.assign({},currRouter,{meta:meta}))
+          let meta = Object.assign({}, currRouter.meta, { title: title })
+          this.pageList.splice(keyIndex, 1, Object.assign({}, currRouter, { meta: meta }))
           if (key === this.activePage) {
             this.changeTitle(title)
           }
@@ -326,20 +327,20 @@
       //update-end-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
 
       //update-begin-author:taoyan date:20191008 for:璺敱鍒锋柊
-      routeReload(){
+      routeReload() {
         this.reloadFlag = false
-        let ToggleMultipage = "ToggleMultipage"
-        this.$store.dispatch(ToggleMultipage,false)
-        this.$nextTick(()=>{
-          this.$store.dispatch(ToggleMultipage,true)
+        let ToggleMultipage = 'ToggleMultipage'
+        this.$store.dispatch(ToggleMultipage, false)
+        this.$nextTick(() => {
+          this.$store.dispatch(ToggleMultipage, true)
           this.reloadFlag = true
         })
       },
       //update-end-author:taoyan date:20191008 for:璺敱鍒锋柊
       //鏂板涓�涓繑鍥炴柟娉�
-      excuteCallback(callback){
+      excuteCallback(callback) {
         callback()
-      },
+      }
     }
   }
 </script>
@@ -422,7 +423,7 @@
       border-bottom: 1px solid transparent !important;
     }
     .ant-tabs-tab-active {
-      border-color: @primary-color!important;
+      border-color: @primary-color !important;
     }
   }
 
diff --git a/src/components/page/GlobalFooter.vue b/src/components/page/GlobalFooter.vue
index c2c99ac..cadd33c 100644
--- a/src/components/page/GlobalFooter.vue
+++ b/src/components/page/GlobalFooter.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="footer">
     <!--<div class="links">-->
-      <!--<a href="http://www.jeecg.com" target="_blank">JEECG 棣栭〉</a>-->
-      <!--<a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">-->
-        <!--<a-icon type="github"/>-->
-      <!--</a>-->
-      <!--<a href="https://ant.design/">Ant Design</a>-->
-      <!--<a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>-->
+    <!--<a href="http://www.jeecg.com" target="_blank">JEECG 棣栭〉</a>-->
+    <!--<a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">-->
+    <!--<a-icon type="github"/>-->
+    <!--</a>-->
+    <!--<a href="https://ant.design/">Ant Design</a>-->
+    <!--<a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>-->
     <!--</div>-->
-    <div class="copyright">
+    <div class="copyright"
+         :style="{background:$route.meta.title==='棣栭〉'?'#0F103A':'',color:$route.meta.title==='棣栭〉'?'#fff':''}">
       Copyright
       <a-icon type="copyright"/>
       2019 <span>2015-2020 鐏电鏅鸿兘</span>
@@ -18,7 +19,7 @@
 
 <script>
   export default {
-    name: "LayoutFooter"
+    name: 'LayoutFooter'
   }
 </script>
 
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index be54447..587f63d 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -69,7 +69,8 @@
       />
 
       <!-- layout content -->
-      <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
+      <a-layout-content
+        :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='棣栭〉'?'#0F103A':''}">
         <slot></slot>
       </a-layout-content>
 
@@ -102,7 +103,7 @@
     components: {
       SideMenu,
       GlobalHeader,
-      GlobalFooter,
+      GlobalFooter
       // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -缂栬瘧涓婚棰滆壊宸茬敓鏁堬紝浣嗚繕涓�鐩磋浆鍦堬紝鏄剧ず涓婚 姝e湪缂栬瘧 ------
       // // SettingDrawer
       // 娉ㄩ噴杩欎釜鍥犱负鍦ㄤ釜浜鸿缃ā鍧楀凡缁忓姞杞戒簡SettingDrawer椤甸潰
@@ -113,7 +114,7 @@
     data() {
       return {
         collapsed: false,
-        activeMenu:{},
+        activeMenu: {},
         menus: []
       }
     },
@@ -136,7 +137,7 @@
       this.menus = this.permissionMenuList
 
       //--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
-      this.collapsed=!this.sidebarOpened;
+      this.collapsed = !this.sidebarOpened
       //--update-begin----author:liusq---date:20210223------for:鍏充簬娴嬭竟鑿滃崟閬尅鍐呭闂璇︾粏璇存槑 #2255
 
       // 鏍规嵁鍚庡彴閰嶇疆鑿滃崟锛岄噸鏂版帓搴忓姞杞借矾鐢变俊鎭�
@@ -159,17 +160,17 @@
         }
       },
       //update-begin-author:taoyan date:20190430 for:鍔ㄦ�佽矾鐢眛itle鏄剧ず閰嶇疆鐨勮彍鍗晅itle鑰屼笉鏄叾瀵瑰簲璺敱鐨則itle
-      myMenuSelect(value){
+      myMenuSelect(value) {
         //姝ゅ瑙﹀彂鍔ㄦ�佽矾鐢辫鐐瑰嚮浜嬩欢
-        this.findMenuBykey(this.menus,value.key)
-        this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
+        this.findMenuBykey(this.menus, value.key)
+        this.$emit('dynamicRouterShow', value.key, this.activeMenu.meta.title)
       },
-      findMenuBykey(menus,key){
-        for(let i of menus){
-          if(i.path==key){
-            this.activeMenu = {...i}
-          }else if(i.children && i.children.length>0){
-            this.findMenuBykey(i.children,key)
+      findMenuBykey(menus, key) {
+        for (let i of menus) {
+          if (i.path == key) {
+            this.activeMenu = { ...i }
+          } else if (i.children && i.children.length > 0) {
+            this.findMenuBykey(i.children, key)
           }
         }
       },
@@ -180,7 +181,7 @@
         this.findMenuBykey(this.menus, value.path)
         this.activeMenu.meta.title = value.meta.title
         this.$emit('dynamicRouterShow', value.path, this.activeMenu.meta.title)
-      },
+      }
       // update-end-author:sunjianlei date:20210409 for: 淇鍔ㄦ�佸姛鑳芥祴璇曡彍鍗曘�佸甫鍙傛暟鑿滃崟鏍囬閿欒銆佸睍寮�閿欒鐨勯棶棰�
 
     }
diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 209c1ab..59b71a3 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -1,90 +1,77 @@
 <template>
-  <div class="page-container">
-    <!--<index-chart v-if="indexStyle==1"></index-chart>-->
-    <!--<index-bdc v-if="indexStyle==2"></index-bdc>-->
-    <!--<index-task v-if="indexStyle==3"></index-task>-->
-    <!--<div style="width: 100%;text-align: right;margin-top: 20px">-->
-    <!--璇烽�夋嫨棣栭〉鏍峰紡锛�-->
-    <!--&lt;!&ndash;<a-radio-group v-model="indexStyle">&ndash;&gt;-->
-    <!--&lt;!&ndash;<a-radio :value="1">缁熻鍥捐〃</a-radio>&ndash;&gt;-->
-    <!--&lt;!&ndash;<a-radio :value="2">缁熻鍥捐〃2</a-radio>&ndash;&gt;-->
-    <!--&lt;!&ndash;<a-radio :value="3">浠诲姟琛ㄦ牸</a-radio>&ndash;&gt;-->
-    <!--&lt;!&ndash;</a-radio-group>&ndash;&gt;-->
-    <!--</div>-->
-
-    <a-list
-      :grid="{ gutter: [{xs: 0, sm: 24, md: 24, lg: 56, xl: 64, xxl: 80},20], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }"
-      :data-source="workshopList">
-      <a-list-item slot="renderItem" slot-scope="item, index">
-        <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
-      </a-list-item>
-    </a-list>
-
-  </div>
+  <Component :is="currentSignage" :productionCode="productionCode" @switchToBranchFactory="switchToBranchFactory">
+    <template #back_nav>
+      <dv-decoration-11 class="back-nav" v-if="userType===4">
+        <div @click="backToLastSignage">杩斿洖涓婁竴绾�</div>
+      </dv-decoration-11>
+    </template>
+  </Component>
 </template>
 
 <script>
-  import IndexChart from './IndexChart'
-  import IndexTask from './IndexTask'
-  import IndexBdc from './IndexBdc'
-  import api from '@/api/mdc'
+  import signageApi from '@/api/signage'
+  import IndexSignage from './IndexSignage.vue'
+  import BranchFactorySignage from './BranchFactorySignage.vue'
 
   export default {
     name: 'Analysis',
     components: {
-      IndexChart,
-      IndexTask,
-      IndexBdc
+      IndexSignage,
+      BranchFactorySignage
     },
     data() {
       return {
-        indexStyle: 1,
-        workshopList: []
+        currentSignage: '',
+        productionCode: '',
+        userType: ''
       }
     },
     created() {
-      this.getWorkshopListByApi()
+      this.showModuleByUserInfo()
+    },
+    mounted() {
     },
     methods: {
-      /**
-       * 閫氳繃杞﹂棿Id璺宠浆鑷崇浉搴旇溅闂村ぇ灞忕湅鏉�
-       * @param id 杞﹂棿Id
-       */
-      navigateToWorkshopSignage(id) {
-        const url = this.$router.resolve(`/workshopSignage/${id}`).href
-        window.open(url, '_blank')
+      showModuleByUserInfo() {
+        const id = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
+        signageApi.getUserByIdApi(id)
+          .then(res => {
+            this.userType = res.userType
+            console.log('瑙﹀彂鍒ゆ柇', this.userType)
+            switch (this.userType) {
+              case 1:
+                this.currentSignage = ''
+                break
+              case 2:
+                this.currentSignage = 'BranchFactorySignage'
+                break
+              case 3:
+                this.currentSignage = 'BranchFactorySignage'
+                break
+              case 4:
+                this.currentSignage = 'IndexSignage'
+                break
+              default:
+                this.currentSignage = ''
+                break
+            }
+          })
+
       },
-      /**
-       * 鑾峰彇杞﹂棿鍒楄〃
-       */
-      getWorkshopListByApi() {
-        api.getWorkshopListInHomePageApi().then(res => {
-          console.log('res', res)
-          if (res.result && res.result.length > 0) {
-            this.workshopList = res.result
-          }
-        })
+
+      backToLastSignage() {
+        this.currentSignage = 'IndexSignage'
+      },
+
+      switchToBranchFactory(value) {
+        console.log('瀛愮粍浠秜alue', value)
+        this.currentSignage = 'BranchFactorySignage'
+        this.productionCode = value
       }
     }
   }
 </script>
 
 <style lang="less" scoped>
-  .page-container {
-    padding: 30px 30px 0;
-
-    .workshop-name {
-      width: 100%;
-      background: #fff;
-      padding: 55px 0;
-      border-radius: 20px;
-      text-align: center;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-size: 30px;
-      cursor: pointer;
-    }
-  }
 
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue
new file mode 100644
index 0000000..614b2e2
--- /dev/null
+++ b/src/views/dashboard/BranchFactorySignage.vue
@@ -0,0 +1,1080 @@
+<template>
+  <div class="page-container">
+    <!--<div class="page-title">-->
+    <!--<slot name="index_signage_nav"></slot>-->
+    <!--&lt;!&ndash;<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">&ndash;&gt;-->
+    <!--&lt;!&ndash;{{item.workshopName}}&ndash;&gt;-->
+    <!--&lt;!&ndash;</dv-decoration-11>&ndash;&gt;-->
+    <!--</div>-->
+    <div class="content-container">
+      <div style="width: 25%" class="left-col">
+        <dv-border-box-9 style="padding: 40px 20px 0">
+          <!--<div class="first-title">M D C 鍏� 缃� 鎬� 鏁� : 6 0 3 鍙�</div>-->
+          <div id="running_state_chart" style="width:100%;height: 400px;"></div>
+          <div id="efficiency_chart" style="width: 100%;height: 350px"></div>
+        </dv-border-box-9>
+      </div>
+      <div style="width: 42%" class="middle-col">
+        <dv-border-box-9 style="padding: 40px 20px 0">
+          <!--<div class="first-title">璁� 澶� 鍙� 璐� 鎬� 鏁� : 1 0 2 2 鍙�</div>-->
+          <div style="display: flex">
+            <div id="tech_condition_chart" style="width:50%;height: 420px;"></div>
+            <div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div>
+          </div>
+          <div class="support-plan-container">
+            <div class="support-plan-item" style="background:#719D8E">
+              <div>鏈湀涓変繚璁″垝</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+            <div class="support-plan-item" style="background:#409EFF">
+              <div>鏈湀瀹屾垚</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+            <div class="support-plan-item" style="background:#A8985D">
+              <div>涓嬫湀涓変繚璁″垝</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+            <div class="support-plan-item" style="background:#58D9F9">
+              <div>涓嬩笅鏈堜笁淇濊鍒�</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+          </div>
+          <div style="padding: 0 55px;margin-top: 50px">
+            <dv-scroll-board :config="maintenanceConfig" style="width:100%;height:80px"/>
+          </div>
+        </dv-border-box-9>
+      </div>
+      <div style="width: 32%">
+        <dv-border-box-9 style="padding: 30px 0">
+          <div id="bar_chart" style="width:100%;height: 250px;"></div>
+          <div id="double_bar_chart" style="width:100%;height: 300px;"></div>
+          <div style="padding: 0 20px;">
+            <dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>
+          </div>
+        </dv-border-box-9>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import signageApi from '@/api/signage'
+
+  export default {
+    name: 'BranchFactorySignage',
+    props: {
+      productionCode: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        runningStateChart: '',
+        runningStateData: [
+          { value: '0', name: '鍏虫満' },
+          { value: '0', name: '鎶ヨ' },
+          { value: '0', name: '寰呮満' },
+          { value: '0', name: '杩愯' }
+        ],
+        efficiencyChart: '',
+        efficiencyData: [],
+        techConditionChart: '',
+        techConditionData: [
+          { value: '0', name: '鍚堟牸' },
+          { value: '0', name: '绂佺敤' },
+          { value: '0', name: '闄愮敤' }
+        ],
+        warrantyMalfunctionChart: '',
+        warrantyMalfunctionData: [
+          { value: '0', name: '鎶ヤ慨' },
+          { value: '0', name: '鍋滄満' },
+          { value: '0', name: '杩愯' }
+        ],
+        thisMonthMaintenancePlanNum: 0,
+        thisMonthMaintenanceRealNum: 0,
+        nextMonthMaintenancePlanNum: 0,
+        nextNextMonthMaintenancePlanNum: 0,
+        twoMaintenanceChartData: [['-', '-', '-']],
+        barChart: '',
+        barChartData: [],
+        doubleBarChart: '',
+        doubleBarChartData: {},
+        supportPlanList: [
+          {
+            label: '鏈湀涓変繚璁″垝',
+            value: 299,
+            background: '#719D8E'
+          },
+          {
+            label: '鏈湀瀹屾垚',
+            value: 229,
+            background: '#409EFF'
+          },
+          {
+            label: '涓嬫湀涓変繚璁″垝',
+            value: 319,
+            background: '#A8985D'
+          },
+          {
+            label: '涓嬩笅鏈堜笁淇濊鍒�',
+            value: 329,
+            background: '#58D9F9'
+          }
+        ],
+        maintenanceConfig: {},
+        problemConfig: {}
+      }
+    },
+    mounted() {
+      window.addEventListener('resize', this.handleWindowResize)
+      this.drawCharts()
+      this.getChartDataByApi()
+    },
+    activated() {
+      console.log('瑙﹀彂activated')
+      this.handleWindowResize()
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleWindowResize)
+    },
+    methods: {
+      getChartDataByApi() {
+        this.getRunningStateDataByApi()
+        this.getEfficiencyDataByApi()
+        this.getTechConditionDataByApi()
+        this.getWarrantyMalfunctionDataByApi()
+        this.getMonthMaintenanceNumByApi()
+        this.getTwoMaintenanceChartDataByApi()
+        this.getBarChartDataByApi()
+        this.getDoubleBarChartDataByApi()
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
+      getRunningStateDataByApi() {
+        signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
+          .then(res => {
+            if (res.success) this.runningStateData = res.result
+            this.drawRunningStateChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧鍒╃敤鐜� */
+      getEfficiencyDataByApi() {
+        signageApi.getEquipmentUtilizationStatisticsApi(this.productionCode)
+          .then(res => {
+            if (res.success) this.efficiencyData = res.result
+            this.drawEfficiencyChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
+      getTechConditionDataByApi() {
+        signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
+          .then(res => {
+            if (res.success) {
+              this.techConditionData = [
+                { value: res.result[0].qualifiedCount, name: '鍚堟牸' },
+                { value: res.result[0].disabledCount, name: '绂佺敤' },
+                { value: res.result[0].limitedUseCount, name: '闄愮敤' }
+              ]
+            }
+            this.drawTechConditionChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧鎶ヤ慨鏁呴殰 */
+      getWarrantyMalfunctionDataByApi() {
+        signageApi.getReportRepairEquipmentListApi(this.productionCode)
+          .then(res => {
+            if (res.success) {
+              this.warrantyMalfunctionData = [
+                { value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
+                { value: res.result[0].stopCount, name: '鍋滄満' },
+                { value: res.result[0].noStopCount, name: '杩愯' }
+              ]
+            }
+            this.drawWarrantyMalfunctionChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇涓変繚璁″垝 */
+      getMonthMaintenanceNumByApi() {
+        signageApi.getThisMonthMaintenanceListApi(this.productionCode)
+          .then(res => {
+            if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount
+          })
+        signageApi.getThisMonthMaintenanceFinishListApi(this.productionCode)
+          .then(res => {
+            if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount
+          })
+        signageApi.getNextMonthMaintenanceList(this.productionCode)
+          .then(res => {
+            if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount
+          })
+        signageApi.getNextNextMonthMaintenanceListApi(this.productionCode)
+          .then(res => {
+            if (res.success && res.result) this.nextNextMonthMaintenancePlanNum = res.result[0].totalCount
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇浜屼繚璁″垝 */
+      getTwoMaintenanceChartDataByApi() {
+        signageApi.getTwoMaintenancePlanListApi(this.productionCode)
+          .then(res => {
+            if (res.success && res.result) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
+            this.drawMaintenanceChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE缁熻 */
+      getBarChartDataByApi() {
+        signageApi.getEquipmentOEEStatistics(this.productionCode)
+          .then(res => {
+            if (res.success) this.barChartData = res.result
+            this.drawBarChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE鍜屽埄鐢ㄧ巼瀵规瘮 */
+      getDoubleBarChartDataByApi() {
+        signageApi.getEquipmentMonthStatisticsApi(this.productionCode)
+          .then(res => {
+            if (res.success) this.doubleBarChartData = res.result
+            this.drawDoubleBarChart()
+          })
+      },
+
+      /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
+      drawCharts() {
+        this.drawRunningStateChart()
+        this.drawEfficiencyChart()
+        this.drawTechConditionChart()
+        this.drawWarrantyMalfunctionChart()
+        this.drawMaintenanceChart()
+        this.drawBarChart()
+        this.drawDoubleBarChart()
+        this.drawProblemChart()
+      },
+
+      /* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
+      drawRunningStateChart() {
+        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
+        const option = {
+          height: 300,
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '璁惧杩愯鐘舵�佺粺璁�', // 涓绘爣棰樻枃鏈�
+            x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#00A8AC'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (params.name !== '') {
+                return `${params.name}:${params.value}(${params.percent}%)`
+              }
+            }
+          },
+          legend: {
+            top: 25,
+            left: 0,
+            orient: 'vertical',
+            right: '10%',
+            // bottom: "0",
+            itemWidth: 14,
+            itemHeight: 14,
+            icon: 'roundRect',
+            itemGap: 15,
+            textStyle: {
+              color: 'inherit',
+              fontSize: 14,
+              padding: [0, 0, 0, 0]
+            },
+            data: ['鍏虫満', '鎶ヨ', '寰呮満', '杩愯']
+          },
+          grid: {
+            containLabel: true
+          },
+          series: [
+            {
+              type: 'pie',
+              roseType: 'area', // 鐜懓鍥�
+              // selectedMode: "single",
+              radius: ['60%', '80%'],
+              center: ['55%', '60%'],
+              color: [
+                '#686869',
+                '#AA6349',
+                '#968A5E',
+                '#5D975D'
+              ],
+              label: {
+                position: 'outside',
+                show: true,
+                color: 'inherit',
+                // textBorderColor: 'inherit',
+                // textBorderWidth: 1,
+                fontSize: 16,
+                formatter: function(params) {
+                  if (params.name !== '') {
+                    return `${params.name}:${params.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: true,
+                length2: 10,
+                length: 10
+              },
+              data: this.runningStateData
+            }
+          ]
+        }
+        this.runningStateChart.setOption(option, true)
+      },
+
+      /* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
+      drawEfficiencyChart() {
+        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
+        const data = this.efficiencyData
+        const colorArray = [
+          {
+            top: '#61927F',
+            bottom: '#61927F'
+          }, {
+            top: '#629480',
+            bottom: '#629480'
+          },
+          {
+            top: '#66DFE2',
+            bottom: '#66DFE2'
+          }, {
+            top: '#9FE6B8',
+            bottom: '#9FE6B8'
+          },
+          {
+            top: '#FEDA5B',
+            bottom: '#FEDA5B'
+          },
+          {
+            top: '#FF9F7F',
+            bottom: '#FF9F7F'
+          },
+          {
+            top: '#F87091',
+            bottom: '#F87091'
+          }
+        ]
+        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
+        const option = {
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '璁惧鍒╃敤鐜�', // 涓绘爣棰樻枃鏈�
+            x: 'left', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#fff'
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '5%',
+            bottom: '0%',
+            top: '6%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'none'
+            },
+            formatter: function(params) {
+              return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
+                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color.colorStops[params[0].dataIndex].color + '"></span>' + params[0].seriesName + ' : ' + params[0].value + '%'
+            }
+          },
+          xAxis: {
+            name: '鍗曚綅',
+            nameTextStyle: {
+              color: '#fff'
+            },
+            axisLabel: {
+              margin: 20,
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            show: true,
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          },
+          yAxis: [{
+            type: 'category',
+            inverse: true,
+            triggerEvent: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#d9e7fa',
+                fontSize: '14',
+                fontWeight: 'bolder'
+              },
+              formatter: function(value) {
+                return `${data.find(item => item.productionCode === value).name}`
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            data: data.map(item => item.productionCode)
+          }, {
+            type: 'category',
+            inverse: true,
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: '#ffffff',
+                fontSize: '14'
+              },
+              formatter: function(value) {
+                return `${value}%`
+              }
+            },
+            data: data
+          }],
+          series: [{
+            name: '鍒╃敤鐜�',
+            type: 'bar',
+            zlevel: 1,
+            itemStyle: {
+              barBorderRadius: 100,
+              color: function(params) {
+                let num = colorArray.length
+                return {
+                  type: 'linear',
+                  colorStops: [{
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }]
+                }
+              }
+            },
+            barWidth: 12,
+            data: data
+          },
+            {
+              name: '鑳屾櫙',
+              type: 'bar',
+              barWidth: 12,
+              barGap: '-100%',
+              data: defaultData,
+              itemStyle: {
+                color: '#11294d',
+                barBorderRadius: 100
+              }
+            }
+          ]
+        }
+        this.efficiencyChart.setOption(option, true)
+
+        this.efficiencyChart.on('click', params => {
+
+          // 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
+          if (params.componentType === 'series') {
+            console.log('seriesParams===========', params)
+
+          } else {
+            console.log('yAxisParams===========', params)
+            this.$emit('switchToBranchFactory', params.value)
+          }
+        })
+      },
+
+      /* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
+      drawTechConditionChart() {
+        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+        const option = {
+          height: 300,
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '鎶�鏈姸鎬�', // 涓绘爣棰樻枃鏈�
+            x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#00A8AC'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (params.name !== '') {
+                return `${params.name}:${params.value}(${params.percent}%)`
+              }
+            }
+          },
+          legend: {
+            top: 25,
+            orient: 'vertical',
+            right: 0,
+            // bottom: "0",
+            itemWidth: 14,
+            itemHeight: 14,
+            icon: 'roundRect',
+            itemGap: 15,
+            textStyle: {
+              color: 'inherit',
+              fontSize: 14,
+              padding: [0, 0, 0, 0]
+            },
+            data: ['鍚堟牸', '绂佺敤', '闄愮敤']
+          },
+          grid: {
+            containLabel: true
+          },
+          series: [
+            {
+              type: 'pie',
+              // selectedMode: "single",
+              radius: ['40%', '60%'],
+              center: ['50%', '60%'],
+              color: [
+                '#0AA012',
+                '#237E48',
+                '#757160'
+              ],
+              label: {
+                position: 'outside',
+                show: true,
+                color: 'inherit',
+                // textBorderColor: 'inherit',
+                // textBorderWidth: 1,
+                fontSize: 16,
+                formatter: function(params) {
+                  if (params.name !== '') {
+                    return `${params.name}:${params.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: true,
+                length2: 15,
+                length: 15
+              },
+              data: this.techConditionData
+            }
+          ]
+        }
+        this.techConditionChart.setOption(option, true)
+      },
+
+      /* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
+      drawWarrantyMalfunctionChart() {
+        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+        const option = {
+          height: 300,
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '璁惧鎶ヤ慨鏁呴殰', // 涓绘爣棰樻枃鏈�
+            x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#00A8AC'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (params.name !== '') {
+                return `${params.name}:${params.value}(${params.percent}%)`
+              }
+            }
+          },
+          legend: {
+            top: 25,
+            orient: 'vertical',
+            right: 0,
+            // bottom: "0",
+            itemWidth: 14,
+            itemHeight: 14,
+            icon: 'roundRect',
+            itemGap: 15,
+            textStyle: {
+              color: 'inherit',
+              fontSize: 14,
+              padding: [0, 0, 0, 0]
+            },
+            data: ['鎶ヤ慨', '鍋滄満', '杩愯']
+          },
+          grid: {
+            containLabel: true
+          },
+          series: [
+            {
+              type: 'pie',
+              // selectedMode: "single",
+              radius: ['40%', '60%'],
+              center: ['50%', '60%'],
+              color: [
+                '#00CED1',
+                '#B85B38',
+                '#A8985D'
+              ],
+              label: {
+                position: 'outside',
+                show: true,
+                color: 'inherit',
+                // textBorderColor: 'inherit',
+                // textBorderWidth: 1,
+                fontSize: 16,
+                formatter: function(params) {
+                  if (params.name !== '') {
+                    return `${params.name}:${params.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: true,
+                length2: 15,
+                length: 15
+              },
+              data: this.warrantyMalfunctionData
+            }
+          ]
+        }
+        this.warrantyMalfunctionChart.setOption(option, true)
+      },
+
+      /* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
+      drawMaintenanceChart() {
+        this.maintenanceConfig = {
+          indexHeader: '搴忓彿',
+          header: ['杞﹂棿', '鏃ユ湡', '鍐呭'],
+          headerBGC: '#266C86',
+          rowNum: 1,
+          data: this.twoMaintenanceChartData,
+          index: true,
+          columnWidth: [100],
+          align: ['center', 'center', 'center', 'center']
+        }
+      },
+
+      /* 缁樺埗鍗曟煴鍥� */
+      drawBarChart() {
+        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            // backgroundColor: 'rgba(9, 24, 48, 0.5)',
+            borderColor: 'rgba(75, 253, 238, 0.4)',
+            textStyle: {
+              // color: '#CFE3FC'
+            },
+            borderWidth: 1
+          },
+          grid: {
+            top: '15%',
+            left: '10%'
+          },
+          xAxis: [{
+            name: 'OEE杞﹂棿',
+            nameLocation: 'middle',
+            nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+            type: 'category',
+            data: this.barChartData.map(item => item.name),
+            axisLine: {
+              lineStyle: {
+                color: '#FFFFFF'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              color: '#e2e9ff',
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          }],
+          yAxis: [{
+            name: '鏁伴噺',
+            nameLocation: 'middle',
+            nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+            axisLabel: {
+              formatter: '{value}',
+              color: '#e2e9ff'
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#FFFFFF'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,0.12)'
+              }
+            }
+          }],
+          series: [{
+            type: 'bar',
+            data: this.barChartData,
+            barWidth: '15%',
+            itemStyle: {
+              color: '#7DB17F'
+            },
+            label: {
+              show: true,
+              lineHeight: 10,
+              formatter: params => {
+                if (+params.value === 0) return ''
+                else return params.value
+              },
+              position: 'inside',
+              textStyle: {
+                color: '#fff',
+                fontSize: 18
+              }
+            }
+          }]
+        }
+        this.barChart.setOption(option, true)
+      },
+
+      /* 缁樺埗鍙屾煴鍥� */
+      drawDoubleBarChart() {
+        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
+        const option = {
+          color: ['#4992FF', '#4DC0B1'],
+          tooltip: {
+            confine: true,
+            formatter: function(params) {
+              return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
+                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%'
+            }
+          },
+          grid: {
+            left: '5%',
+            right: '4%',
+            bottom: '10%',
+            top: '20%',
+            containLabel: true
+          },
+          legend: {
+            icon: 'roundRect',
+            orient: 'horizontal',
+            left: 'center',
+            itemWidth: 14,
+            itemHeight: 14,
+            formatter: ['{a|{name}}'].join('\n'),
+            textStyle: {
+              fontSize: 14,
+              color: '#6A93B9',
+              height: 8,
+              rich: {
+                a: {
+                  verticalAlign: 'bottom'
+                }
+              }
+            },
+            data: ['OEE', '鍒╃敤鐜�']
+          },
+          xAxis: {
+            type: 'category',
+            data: this.doubleBarChartData.dateList,
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,0.45)'
+              }
+            },
+            axisLabel: {
+              fontSize: 12,
+              color: '#6A93B9'
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [{
+            name: '%',
+            type: 'value',
+            min: 0,
+            minInterval: 1,
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.15)'
+                // type: 'dashed', // dotted 铏氱嚎
+              }
+            },
+            axisLabel: {
+              fontSize: 12,
+              color: '#6A93B9',
+              fontFamily: 'Bebas'
+            }
+          }, {
+            type: 'value',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              fontSize: 12,
+              formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀�
+              fontFamily: 'Bebas',
+              color: '#6A93B9'
+            },
+            splitArea: {
+              show: false
+            }
+          }],
+          series: [{
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: { barBorderRadius: [3, 3, 0, 0] },
+            name: 'OEE',
+            data: this.doubleBarChartData.oeeList,
+            label: {
+              show: true,
+              lineHeight: 10,
+              formatter: params => {
+                if (+params.value === 0) return ''
+                else return params.value
+              },
+              position: 'inside',
+              textStyle: {
+                color: '#fff',
+                fontSize: 12
+              }
+            }
+          }, {
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: { barBorderRadius: [3, 3, 0, 0] },
+            name: '鍒╃敤鐜�',
+            data: this.doubleBarChartData.utilizationList,
+            label: {
+              show: true,
+              lineHeight: 10,
+              formatter: params => {
+                if (+params.value === 0) return ''
+                else return params.value
+              },
+              position: 'inside',
+              textStyle: {
+                color: '#fff',
+                fontSize: 12
+              }
+            }
+          }
+          ]
+        }
+        this.doubleBarChart.setOption(option, true)
+      },
+
+      /* 缁樺埗闂婊氬姩琛� */
+      drawProblemChart() {
+        this.problemConfig = {
+          indexHeader: '搴忓彿',
+          header: ['鏃堕棿', '闂鍐呭'],
+          headerBGC: '#83B883',
+          oddRowBGC: '#556955',
+          evenRowBGC: '#556955',
+          data: [
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂']
+          ],
+          index: true,
+          columnWidth: [100],
+          align: ['center']
+        }
+      },
+
+      /**
+       * 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
+       * 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
+       */
+      handleWindowResize() {
+        if (this.runningStateChart) this.runningStateChart.resize()
+        if (this.efficiencyChart) this.efficiencyChart.resize()
+        if (this.techConditionChart) this.techConditionChart.resize()
+        if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
+        if (this.barChart) this.barChart.resize()
+        if (this.doubleBarChart) this.doubleBarChart.resize()
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .page-container {
+    .page-title {
+      display: flex;
+      justify-content: space-evenly;
+      flex-wrap: wrap;
+      color: #fff;
+      margin-bottom: 10px;
+
+      .workshop-nav {
+        width: 120px;
+        height: 40px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+    }
+
+    .content-container {
+      padding-top: 5px;
+      display: flex;
+      justify-content: space-between;
+
+      .left-col {
+        .first-title {
+          color: #00A8AC;
+          font-size: 20px;
+          text-align: center;
+          font-weight: bold;
+        }
+      }
+
+      .middle-col {
+        .first-title {
+          color: #00A8AC;
+          font-size: 20px;
+          text-align: center;
+          font-weight: bold;
+        }
+
+        .support-plan-container {
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          color: #fff;
+          padding: 0 40px;
+
+          .support-plan-item {
+            border-radius: 3px;
+            width: 45%;
+            padding: 5px 20px;
+            font-size: 20px;
+            margin-bottom: 10px;
+
+            .plan-value-container {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              .plan-value {
+                font-size: 35px;
+                margin-right: 20px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /deep/ .dv-scroll-board .header {
+    height: 35px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
new file mode 100644
index 0000000..d5b47ad
--- /dev/null
+++ b/src/views/dashboard/IndexSignage.vue
@@ -0,0 +1,1063 @@
+<template>
+  <div class="page-container">
+    <!--<div class="page-title">-->
+    <!--<slot name="index_signage_nav"></slot>-->
+    <!--&lt;!&ndash;<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">&ndash;&gt;-->
+    <!--&lt;!&ndash;{{item.workshopName}}&ndash;&gt;-->
+    <!--&lt;!&ndash;</dv-decoration-11>&ndash;&gt;-->
+    <!--</div>-->
+    <div class="content-container">
+      <div style="width: 25%" class="left-col">
+        <dv-border-box-9 style="padding: 30px 20px">
+          <!--<div class="first-title">M D C 鍏� 缃� 鎬� 鏁� : 6 0 3 鍙�</div>-->
+          <div id="running_state_chart" style="width:100%;height: 300px;margin-top: 10px"></div>
+          <!--<div class="second-title">璁惧鍒╃敤鐜�</div>-->
+          <!--<dv-capsule-chart :config="efficiencyChartConfig" style="width:100%;height:460px"/>-->
+          <div id="efficiency_chart" style="width: 100%;height: 465px"></div>
+        </dv-border-box-9>
+      </div>
+      <div style="width: 42%" class="middle-col">
+        <dv-border-box-9 style="padding: 30px 20px">
+          <!--<div class="first-title">璁� 澶� 鍙� 璐� 鎬� 鏁� : 1 0 2 2 鍙�</div>-->
+          <div style="display: flex">
+            <div id="tech_condition_chart" style="width:50%;height: 330px;margin-top: 10px"></div>
+            <div id="warranty_malfunction_chart" style="width:50%;height: 330px;margin-top: 10px"></div>
+          </div>
+          <div class="support-plan-container">
+            <!--<div v-for="item in supportPlanList" class="support-plan-item"-->
+            <!--:style="{background:item.background}">-->
+            <!--<div>{{item.label}}</div>-->
+            <!--<div class="plan-value-container">-->
+            <!--<div class="plan-value">{{item.value}}</div>-->
+            <!--<div>鍙�</div>-->
+            <!--</div>-->
+            <!--</div>-->
+            <div class="support-plan-item" style="background:#719D8E">
+              <div>鏈湀涓変繚璁″垝</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+            <div class="support-plan-item" style="background:#409EFF">
+              <div>鏈湀瀹屾垚</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+            <div class="support-plan-item" style="background:#A8985D">
+              <div>涓嬫湀涓変繚璁″垝</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+            <div class="support-plan-item" style="background:#58D9F9">
+              <div>涓嬩笅鏈堜笁淇濊鍒�</div>
+              <div class="plan-value-container">
+                <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
+                <div>鍙�</div>
+              </div>
+            </div>
+          </div>
+          <div style="padding: 0 55px;margin-top: 10px">
+            <dv-scroll-board :config="maintenanceConfig" style="width:100%;height:220px"/>
+          </div>
+        </dv-border-box-9>
+      </div>
+      <div style="width: 32%">
+        <dv-border-box-9>
+          <div id="bar_chart" style="width:100%;height: 290px;"></div>
+          <div id="double_bar_chart" style="width:100%;height: 285px;"></div>
+          <div style="padding: 0 20px;margin-top: 10px">
+            <dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>
+          </div>
+        </dv-border-box-9>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import signageApi from '@/api/signage'
+
+  export default {
+    name: 'IndexSignage',
+    data() {
+      return {
+        runningStateChart: '',
+        runningStateData: [
+          { value: '0', name: '鍏虫満' },
+          { value: '0', name: '鎶ヨ' },
+          { value: '0', name: '寰呮満' },
+          { value: '0', name: '杩愯' }
+        ],
+        efficiencyChart: '',
+        efficiencyData: [],
+        techConditionChart: '',
+        techConditionData: [
+          { value: '0', name: '鍚堟牸' },
+          { value: '0', name: '绂佺敤' },
+          { value: '0', name: '闄愮敤' }
+        ],
+        warrantyMalfunctionChart: '',
+        warrantyMalfunctionData: [
+          { value: '12', name: '鎶ヤ慨' },
+          { value: '10', name: '鍋滄満' },
+          { value: '8', name: '杩愯' }
+        ],
+        thisMonthMaintenancePlanNum: 0,
+        thisMonthMaintenanceRealNum: 0,
+        nextMonthMaintenancePlanNum: 0,
+        nextNextMonthMaintenancePlanNum: 0,
+        twoMaintenanceChartData: [['-', '-', '-']],
+        barChart: '',
+        barChartData: [],
+        doubleBarChart: '',
+        doubleBarChartData: {},
+        efficiencyChartConfig: {},
+        maintenanceConfig: {},
+        problemConfig: {}
+      }
+    },
+    mounted() {
+      window.addEventListener('resize', this.handleWindowResize)
+      this.drawCharts()
+      this.getChartDataByApi()
+    },
+    activated() {
+      console.log('瑙﹀彂activated')
+      this.handleWindowResize()
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleWindowResize)
+    },
+    methods: {
+      getChartDataByApi() {
+        this.getRunningStateDataByApi()
+        this.getEfficiencyDataByApi()
+        this.getTechConditionDataByApi()
+        this.getWarrantyMalfunctionDataByApi()
+        this.getMonthMaintenanceNumByApi()
+        this.getTwoMaintenanceChartDataByApi()
+        this.getBarChartDataByApi()
+        this.getDoubleBarChartDataByApi()
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
+      getRunningStateDataByApi() {
+        signageApi.getEquipmentStatusStatisticsApi()
+          .then(res => {
+            if (res.success) this.runningStateData = res.result
+            this.drawRunningStateChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧鍒╃敤鐜� */
+      getEfficiencyDataByApi() {
+        signageApi.getEquipmentUtilizationStatisticsApi()
+          .then(res => {
+            if (res.success) this.efficiencyData = res.result
+            this.drawEfficiencyChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
+      getTechConditionDataByApi() {
+        signageApi.getEquipmentTechnologyStatusListApi()
+          .then(res => {
+            if (res.success) {
+              this.techConditionData = [
+                { value: res.result[0].qualifiedCount, name: '鍚堟牸' },
+                { value: res.result[0].disabledCount, name: '绂佺敤' },
+                { value: res.result[0].limitedUseCount, name: '闄愮敤' }
+              ]
+            }
+            this.drawTechConditionChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧鎶ヤ慨鏁呴殰 */
+      getWarrantyMalfunctionDataByApi() {
+        signageApi.getReportRepairEquipmentListApi()
+          .then(res => {
+            if (res.success) {
+              this.warrantyMalfunctionData = [
+                { value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
+                { value: res.result[0].stopCount, name: '鍋滄満' },
+                { value: res.result[0].noStopCount, name: '杩愯' }
+              ]
+            }
+            this.drawWarrantyMalfunctionChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇涓変繚璁″垝 */
+      getMonthMaintenanceNumByApi() {
+        signageApi.getThisMonthMaintenanceListApi()
+          .then(res => {
+            if (res.success && res.result) this.thisMonthMaintenancePlanNum = res.result[0].totalCount
+          })
+        signageApi.getThisMonthMaintenanceFinishListApi()
+          .then(res => {
+            if (res.success && res.result) this.thisMonthMaintenanceRealNum = res.result[0].totalCount
+          })
+        signageApi.getNextMonthMaintenanceList()
+          .then(res => {
+            if (res.success && res.result) this.nextMonthMaintenancePlanNum = res.result[0].totalCount
+          })
+        signageApi.getNextNextMonthMaintenanceListApi()
+          .then(res => {
+            if (res.success && res.result) this.nextNextMonthMaintenancePlanNum = res.result[0].totalCount
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇浜屼繚璁″垝 */
+      getTwoMaintenanceChartDataByApi() {
+        signageApi.getTwoMaintenancePlanListApi()
+          .then(res => {
+            if (res.success && res.result) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
+            this.drawMaintenanceChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE缁熻 */
+      getBarChartDataByApi() {
+        signageApi.getEquipmentOEEStatistics()
+          .then(res => {
+            if (res.success) this.barChartData = res.result
+            this.drawBarChart()
+          })
+      },
+
+      /* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE鍜屽埄鐢ㄧ巼瀵规瘮 */
+      getDoubleBarChartDataByApi() {
+        signageApi.getEquipmentMonthStatisticsApi()
+          .then(res => {
+            if (res.success) this.doubleBarChartData = res.result
+            this.drawDoubleBarChart()
+          })
+      },
+
+      /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
+      drawCharts() {
+        this.drawRunningStateChart()
+        this.drawEfficiencyChart()
+        this.drawTechConditionChart()
+        this.drawWarrantyMalfunctionChart()
+        this.drawMaintenanceChart()
+        this.drawBarChart()
+        this.drawDoubleBarChart()
+        this.drawProblemChart()
+      },
+
+      /* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
+      drawRunningStateChart() {
+        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
+        const option = {
+          height: 300,
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '璁惧杩愯鐘舵�佺粺璁�', // 涓绘爣棰樻枃鏈�
+            x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#00A8AC'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (params.name !== '') {
+                return `${params.name}:${params.value}(${params.percent}%)`
+              }
+            }
+          },
+          legend: {
+            top: 25,
+            left: 0,
+            orient: 'vertical',
+            right: '10%',
+            // bottom: "0",
+            itemWidth: 14,
+            itemHeight: 14,
+            icon: 'roundRect',
+            itemGap: 15,
+            textStyle: {
+              color: 'inherit',
+              fontSize: 14,
+              padding: [0, 0, 0, 0]
+            },
+            data: ['鍏虫満', '鎶ヨ', '寰呮満', '杩愯']
+          },
+          grid: {
+            containLabel: true
+          },
+          series: [
+            {
+              type: 'pie',
+              roseType: 'area', // 鐜懓鍥�
+              // selectedMode: "single",
+              radius: ['40%', '55%'],
+              center: ['60%', '60%'],
+              color: [
+                '#686869',
+                '#AA6349',
+                '#968A5E',
+                '#5D975D'
+              ],
+              label: {
+                position: 'outside',
+                show: true,
+                color: 'inherit',
+                // textBorderColor: 'inherit',
+                // textBorderWidth: 1,
+                fontSize: 16,
+                formatter: function(params) {
+                  if (params.name !== '') {
+                    return `${params.name}:${params.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: true,
+                length2: 10,
+                length: 10
+              },
+              data: this.runningStateData
+            }
+          ]
+        }
+        this.runningStateChart.setOption(option, true)
+      },
+
+      /* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
+      drawEfficiencyChart() {
+        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
+        const data = this.efficiencyData
+        const colorArray = [
+          {
+            top: '#61927F',
+            bottom: '#61927F'
+          }, {
+            top: '#629480',
+            bottom: '#629480'
+          },
+          {
+            top: '#66DFE2',
+            bottom: '#66DFE2'
+          }, {
+            top: '#9FE6B8',
+            bottom: '#9FE6B8'
+          },
+          {
+            top: '#FEDA5B',
+            bottom: '#FEDA5B'
+          },
+          {
+            top: '#FF9F7F',
+            bottom: '#FF9F7F'
+          },
+          {
+            top: '#F87091',
+            bottom: '#F87091'
+          }
+        ]
+        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
+        const option = {
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '璁惧鍒╃敤鐜�', // 涓绘爣棰樻枃鏈�
+            x: 'left', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#fff'
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '5%',
+            bottom: '0%',
+            top: '6%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'none'
+            },
+            formatter: function(params) {
+              return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
+                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color.colorStops[params[0].dataIndex].color + '"></span>' + params[0].seriesName + ' : ' + params[0].value + '%'
+            }
+          },
+          xAxis: {
+            name: '鍗曚綅',
+            nameTextStyle: {
+              color: '#fff'
+            },
+            axisLabel: {
+              margin: 20,
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            show: true,
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          },
+          yAxis: [{
+            type: 'category',
+            inverse: true,
+            triggerEvent: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#d9e7fa',
+                fontSize: '14',
+                fontWeight: 'bolder'
+              },
+              formatter: function(value) {
+                return `${data.find(item => item.productionCode === value).name}`
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            data: data.map(item => item.productionCode)
+          }, {
+            type: 'category',
+            inverse: true,
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: '#ffffff',
+                fontSize: '14'
+              },
+              formatter: function(value) {
+                return `${value}%`
+              }
+            },
+            data: data
+          }],
+          series: [{
+            name: '鍒╃敤鐜�',
+            type: 'bar',
+            zlevel: 1,
+            itemStyle: {
+              barBorderRadius: 100,
+              color: function(params) {
+                let num = colorArray.length
+                return {
+                  type: 'linear',
+                  colorStops: [{
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }, {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }, {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  }]
+                }
+              }
+            },
+            barWidth: 12,
+            data: data
+          },
+            {
+              name: '鑳屾櫙',
+              type: 'bar',
+              barWidth: 12,
+              barGap: '-100%',
+              data: defaultData,
+              itemStyle: {
+                color: '#11294d',
+                barBorderRadius: 100
+              }
+            }
+          ]
+        }
+        this.efficiencyChart.setOption(option, true)
+
+        this.efficiencyChart.on('click', params => {
+
+          // 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
+          if (params.componentType === 'series') {
+            console.log('seriesParams===========', params)
+          } else {
+            console.log('yAxisParams===========', params)
+            this.$emit('switchToBranchFactory', params.value)
+          }
+        })
+      },
+
+      /* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
+      drawTechConditionChart() {
+        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+        const option = {
+          height: 300,
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '鎶�鏈姸鎬�', // 涓绘爣棰樻枃鏈�
+            x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#00A8AC'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (params.name !== '') {
+                return `${params.name}:${params.value}(${params.percent}%)`
+              }
+            }
+          },
+          legend: {
+            top: 25,
+            orient: 'vertical',
+            right: 0,
+            // bottom: "0",
+            itemWidth: 14,
+            itemHeight: 14,
+            icon: 'roundRect',
+            itemGap: 15,
+            textStyle: {
+              color: 'inherit',
+              fontSize: 14,
+              padding: [0, 0, 0, 0]
+            },
+            data: ['鍚堟牸', '绂佺敤', '闄愮敤']
+          },
+          grid: {
+            containLabel: true
+          },
+          series: [
+            {
+              type: 'pie',
+              // selectedMode: "single",
+              radius: ['33%', '45%'],
+              center: ['45%', '60%'],
+              color: [
+                '#0AA012',
+                '#237E48',
+                '#757160'
+              ],
+              label: {
+                position: 'outside',
+                show: true,
+                color: 'inherit',
+                // textBorderColor: 'inherit',
+                // textBorderWidth: 1,
+                fontSize: 16,
+                formatter: function(params) {
+                  if (params.name !== '') {
+                    return `${params.name}:${params.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: true,
+                length2: 10,
+                length: 10
+              },
+              data: this.techConditionData
+            }
+          ]
+        }
+        this.techConditionChart.setOption(option, true)
+      },
+
+      /* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
+      drawWarrantyMalfunctionChart() {
+        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+        const option = {
+          height: 300,
+          title: {
+            show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+            text: '璁惧鎶ヤ慨鏁呴殰', // 涓绘爣棰樻枃鏈�
+            x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+            y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+            textStyle: {
+              // 涓绘爣棰樻枃鏈牱寮�
+              fontSize: 18,
+              fontWeight: 'normal',
+              color: '#00A8AC'
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (params.name !== '') {
+                return `${params.name}:${params.value}(${params.percent}%)`
+              }
+            }
+          },
+          legend: {
+            top: 25,
+            orient: 'vertical',
+            right: 0,
+            // bottom: "0",
+            itemWidth: 14,
+            itemHeight: 14,
+            icon: 'roundRect',
+            itemGap: 15,
+            textStyle: {
+              color: 'inherit',
+              fontSize: 14,
+              padding: [0, 0, 0, 0]
+            },
+            data: ['鎶ヤ慨', '鍋滄満', '杩愯']
+          },
+          grid: {
+            containLabel: true
+          },
+          series: [
+            {
+              type: 'pie',
+              // selectedMode: "single",
+              radius: ['33%', '45%'],
+              center: ['45%', '60%'],
+              color: [
+                '#00CED1',
+                '#B85B38',
+                '#A8985D'
+              ],
+              label: {
+                position: 'outside',
+                show: true,
+                color: 'inherit',
+                // textBorderColor: 'inherit',
+                // textBorderWidth: 1,
+                fontSize: 16,
+                formatter: function(params) {
+                  if (params.name !== '') {
+                    return `${params.name}:${params.value}`
+                  }
+                }
+              },
+              labelLine: {
+                show: true,
+                length2: 10,
+                length: 10
+              },
+              data: this.warrantyMalfunctionData
+            }
+          ]
+        }
+        this.warrantyMalfunctionChart.setOption(option, true)
+      },
+
+      /* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
+      drawMaintenanceChart() {
+        this.maintenanceConfig = {
+          indexHeader: '搴忓彿',
+          header: ['杞﹂棿', '鏃ユ湡', '鍐呭'],
+          headerBGC: '#266C86',
+          data: this.twoMaintenanceChartData,
+          index: true,
+          columnWidth: [100],
+          align: ['center', 'center', 'center', 'center']
+        }
+      },
+
+      /* 缁樺埗鍗曟煴鍥� */
+      drawBarChart() {
+        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+        const option = {
+          height: 190,
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            // backgroundColor: 'rgba(9, 24, 48, 0.5)',
+            borderColor: 'rgba(75, 253, 238, 0.4)',
+            textStyle: {
+              // color: '#CFE3FC'
+            },
+            borderWidth: 1
+          },
+          grid: {
+            top: '15%',
+            left: '10%'
+          },
+          xAxis: [{
+            name: 'OEE杞﹂棿',
+            nameLocation: 'middle',
+            nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+            type: 'category',
+            data: this.barChartData.map(item => item.name),
+            axisLine: {
+              lineStyle: {
+                color: '#FFFFFF'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              color: '#e2e9ff',
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          }],
+          yAxis: [{
+            name: '鏁伴噺',
+            nameLocation: 'middle',
+            nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+            axisLabel: {
+              formatter: '{value}',
+              color: '#e2e9ff'
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#FFFFFF'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,0.12)'
+              }
+            }
+          }],
+          series: [{
+            type: 'bar',
+            data: this.barChartData,
+            barWidth: '50%',
+            itemStyle: {
+              color: '#7DB17F'
+            },
+            label: {
+              show: true,
+              lineHeight: 10,
+              formatter: params => {
+                if (+params.value === 0) return ''
+                else return params.value
+              },
+              position: 'inside',
+              textStyle: {
+                color: '#fff',
+                fontSize: 18
+              }
+            }
+          }]
+        }
+        this.barChart.setOption(option, true)
+      },
+
+      /* 缁樺埗鍙屾煴鍥� */
+      drawDoubleBarChart() {
+        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
+        const option = {
+          height: 220,
+          color: ['#4992FF', '#4DC0B1'],
+          tooltip: {
+            confine: true,
+            formatter: function(params) {
+              return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
+                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%'
+            }
+          },
+          grid: {
+            left: '5%',
+            right: '4%',
+            bottom: '10%',
+            top: '20%',
+            containLabel: true
+          },
+          legend: {
+            icon: 'roundRect',
+            orient: 'horizontal',
+            left: 'center',
+            itemWidth: 14,
+            itemHeight: 14,
+            formatter: ['{a|{name}}'].join('\n'),
+            textStyle: {
+              fontSize: 14,
+              color: '#6A93B9',
+              height: 8,
+              rich: {
+                a: {
+                  verticalAlign: 'bottom'
+                }
+              }
+            },
+            data: ['OEE', '鍒╃敤鐜�']
+          },
+          xAxis: {
+            type: 'category',
+            data: this.doubleBarChartData.dateList,
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,0.45)'
+              }
+            },
+            axisLabel: {
+              fontSize: 12,
+              color: '#6A93B9'
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [{
+            name: '%',
+            type: 'value',
+            min: 0,
+            minInterval: 1,
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.15)'
+                // type: 'dashed', // dotted 铏氱嚎
+              }
+            },
+            axisLabel: {
+              fontSize: 12,
+              color: '#6A93B9',
+              fontFamily: 'Bebas'
+            }
+          }, {
+            type: 'value',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              fontSize: 12,
+              formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀�
+              fontFamily: 'Bebas',
+              color: '#6A93B9'
+            },
+            splitArea: {
+              show: false
+            }
+          }],
+          series: [{
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: { barBorderRadius: [3, 3, 0, 0] },
+            name: 'OEE',
+            data: this.doubleBarChartData.oeeList,
+            label: {
+              show: true,
+              lineHeight: 10,
+              formatter: params => {
+                if (+params.value === 0) return ''
+                else return params.value
+              },
+              position: 'inside',
+              textStyle: {
+                color: '#fff',
+                fontSize: 12
+              }
+            }
+          }, {
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: { barBorderRadius: [3, 3, 0, 0] },
+            name: '鍒╃敤鐜�',
+            data: this.doubleBarChartData.utilizationList,
+            label: {
+              show: true,
+              lineHeight: 10,
+              formatter: params => {
+                if (+params.value === 0) return ''
+                else return params.value
+              },
+              position: 'inside',
+              textStyle: {
+                color: '#fff',
+                fontSize: 12
+              }
+            }
+          }
+          ]
+        }
+        this.doubleBarChart.setOption(option, true)
+      },
+
+      /* 缁樺埗闂婊氬姩琛� */
+      drawProblemChart() {
+        this.problemConfig = {
+          indexHeader: '搴忓彿',
+          header: ['鏃堕棿', '闂鍐呭'],
+          headerBGC: '#83B883',
+          oddRowBGC: '#556955',
+          evenRowBGC: '#556955',
+          data: [
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
+            ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂']
+          ],
+          index: true,
+          columnWidth: [100],
+          align: ['center']
+        }
+      },
+
+      /**
+       * 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
+       * 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
+       */
+      handleWindowResize() {
+        if (this.runningStateChart) this.runningStateChart.resize()
+        if (this.efficiencyChart) this.efficiencyChart.resize()
+        if (this.techConditionChart) this.techConditionChart.resize()
+        if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
+        if (this.barChart) this.barChart.resize()
+        if (this.doubleBarChart) this.doubleBarChart.resize()
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .page-container {
+    .page-title {
+      display: flex;
+      justify-content: space-evenly;
+      flex-wrap: wrap;
+      color: #fff;
+      margin-bottom: 10px;
+
+      .workshop-nav {
+        width: 120px;
+        height: 40px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+    }
+
+    .content-container {
+      padding-top: 5px;
+      display: flex;
+      justify-content: space-between;
+
+      .left-col {
+        .first-title {
+          color: #00A8AC;
+          font-size: 20px;
+          text-align: center;
+          font-weight: bold;
+        }
+      }
+
+      .middle-col {
+        .first-title {
+          color: #00A8AC;
+          font-size: 20px;
+          text-align: center;
+          font-weight: bold;
+        }
+
+        .support-plan-container {
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          color: #fff;
+          padding: 0 40px;
+
+          .support-plan-item {
+            border-radius: 3px;
+            width: 45%;
+            padding: 5px 20px;
+            font-size: 20px;
+            margin-bottom: 10px;
+
+            .plan-value-container {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              .plan-value {
+                font-size: 35px;
+                margin-right: 20px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /deep/ .dv-scroll-board .header {
+    height: 35px;
+  }
+</style>
\ No newline at end of file

--
Gitblit v1.9.3