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">--> - <!--璇烽�夋嫨棣栭〉鏍峰紡锛�--> - <!--<!–<a-radio-group v-model="indexStyle">–>--> - <!--<!–<a-radio :value="1">缁熻鍥捐〃</a-radio>–>--> - <!--<!–<a-radio :value="2">缁熻鍥捐〃2</a-radio>–>--> - <!--<!–<a-radio :value="3">浠诲姟琛ㄦ牸</a-radio>–>--> - <!--<!–</a-radio-group>–>--> - <!--</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>--> + <!--<!–<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">–>--> + <!--<!–{{item.workshopName}}–>--> + <!--<!–</dv-decoration-11>–>--> + <!--</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>--> + <!--<!–<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">–>--> + <!--<!–{{item.workshopName}}–>--> + <!--<!–</dv-decoration-11>–>--> + <!--</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