实现首页公司级与分厂级看板布局及相关功能

zhuzhuanzhuan

2024-03-20 7036cc397adccb4907b80a30143f7751b4e68db8

实现首页公司级与分厂级看板布局及相关功能

 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 })
}

 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页，供子页面调用 ->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
    provide(){
      return{
        closeCurrent:this.closeCurrent
    provide() {
      return {
        closeCurrent: this.closeCurrent
      }
    },
    /* update_end author:wuxianquan date:20190828 for: å…³é—­å½“前tab页，供子页面调用->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #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:【新版】online报错 JT-100
         setTimeout(()=>{
           //省市区组件里面给window绑定了个resize事件 å¯¼è‡´åˆ‡æ¢é¡µé¢çš„时候触发了他的resize，但是切换页面，省市区组件还没被销毁前就触发了该事件，导致控制台报错，加个延迟
           triggerWindowResizeEvent()
         },20)
          setTimeout(() => {
            //省市区组件里面给window绑定了个resize事件 å¯¼è‡´åˆ‡æ¢é¡µé¢çš„时候触发了他的resize，但是切换页面，省市区组件还没被销毁前就触发了该事件，导致控制台报错，加个延迟
            triggerWindowResizeEvent()
          }, 20)
          //update-end-author:taoyan date: 20201211 for:【新版】online报错 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页，供子页面调用->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
      closeCurrent(){
        this.remove(this.activePage);
      closeCurrent() {
        this.remove(this.activePage)
      },
      /* update_end author:wuxianquan date:20190828 for: å…³é—­å½“前tab页，供子页面调用->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #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:动态路由title显示配置的菜单title而不是其对应路由的title
      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:动态路由title显示配置的菜单title而不是其对应路由的title

      //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;
    }
  }


 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>


 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 -编译主题颜色已生效，但还一直转圈，显示主题 æ­£åœ¨ç¼–译 ------
      // // 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:动态路由title显示配置的菜单title而不是其对应路由的title
      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: ä¿®å¤åŠ¨æ€åŠŸèƒ½æµ‹è¯•èœå•ã€å¸¦å‚数菜单标题错误、展开错误的问题

    }

 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('子组件value', 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>

 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è½´name与横坐标轴线的间距
            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è½´name与横坐标轴线的间距
            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>

 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è½´name与横坐标轴线的间距
            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è½´name与横坐标轴线的间距
            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>