From 714762dad1c3822ae31058d2d9bd8b4de9cc077d Mon Sep 17 00:00:00 2001 From: caill <815519168@qq.com> Date: Fri, 9 Sep 2022 15:52:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/DeviceManage.vue | 162 ++++++++++++++++++++++++------------- 1 file changed, 107 insertions(+), 55 deletions(-) diff --git a/src/pages/DeviceManage.vue b/src/pages/DeviceManage.vue index 537cb62..64d345e 100644 --- a/src/pages/DeviceManage.vue +++ b/src/pages/DeviceManage.vue @@ -21,10 +21,10 @@
@@ -49,10 +49,10 @@
  • 事业部
    • -
  • 需保养台数
    • -
  • 已保养台数
    • -
  • 在保养台数
    • -
  • 未保养台数
    • +
  • 需保养(台)
    • +
  • 已保养(台)
    • +
  • 在保养(台)
    • +
  • 未保养(台)
  • 完成率(%)
@@ -89,14 +89,16 @@
-
-
-

总设备台数

-

{{num1}}

-
-
-

在用台数

-

{{num2}}

+
+
+
+

总设备台数

+

{{num1}}

+
+
+

在用台数

+

{{num2}}

+
@@ -174,16 +176,16 @@
-
    +
    • 班组
    • MTBF(h)
    • MTTR(h)
      • -
    • 平均OEE（%）
      • +
    • 平均OEE(%)
    • 总维修时间(h)
    -
      +
      • {{e.group_name}}
        {{e.device_mtbf}}
        @@ -307,7 +309,7 @@ export default { async _getDeviceTime () { let res = await getDeviceTime() if (res.code === '1') { - this.echartArr1 = [...res.device_time_arr] + this.echartArr1 = [...res.srb.device_time_arr] this.setEchart1() } else { this.Dialog(res.desc) @@ -318,7 +320,7 @@ export default { grid: { top: 60, left: 0, - right: 54, + right: 58, bottom: 0, containLabel: true }, @@ -563,13 +565,23 @@ export default { async _getDeviceFault () { let res = await getDeviceFault() if (res.code === '1') { - this.echartArr2 = [...res.device_fault_arr] + let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94'] + res.srb.device_fault_arr.map((e, i) => { + this.$set(e, 'color', colors[i]) + }) + this.echartArr2 = [...res.srb.device_fault_arr] this.setEchart2() } else { this.Dialog(res.desc) } }, setEchart2 () { + let max = 0 + this.echartArr2.map(el => { + if (Number(el.device_fault_num) >= Number(max)) { + max = Number(el.device_fault_num) + } + }) let option = { grid: { top: 0, @@ -589,7 +601,7 @@ export default { xAxis: { type: 'value', min: 0, - max: 250, + max: max, boundaryGap: false, axisTick: { show: false @@ -640,7 +652,8 @@ export default { series: [ { type: 'bar', - barWidth: '30', + barWidth: '16', + zlevel: 1, label: { show: true, position: 'right', // 位置 @@ -651,7 +664,16 @@ export default { }, itemStyle: { normal: { - color: '#33CCCC' + color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: '#2DB796' + }, + { + offset: 1, + color: '#6BBBA8' + } + ], false) } }, data: this.echartArr2.map((it) => it.device_fault_num) @@ -670,13 +692,13 @@ export default { async _getDeviceNumber () { let res = await getDeviceNumber() if (res.code === '1') { - this.num1 = res.device_all_num - this.num2 = res.device_use_num + this.num1 = res.srb.device_all_num + this.num2 = res.srb.device_use_num let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94'] - res.device_all_arr.map((e, i) => { + res.srb.device_all_arr.map((e, i) => { this.$set(e, 'color', colors[i]) }) - this.echartArr3 = [...res.device_all_arr] + this.echartArr3 = [...res.srb.device_all_arr] this.setEchart3() } else { this.Dialog(res.desc) @@ -724,7 +746,7 @@ export default { async _getDeviceRunStatus () { let res = await getDeviceRunStatus() if (res.code === '1') { - this.gridArr1 = [...res.device_run_arr] + this.gridArr1 = [...res.srb.device_run_arr] } else { this.Dialog(res.desc) } @@ -733,7 +755,7 @@ export default { async _getDeviceYearStatus () { let res = await getDeviceYearStatus() if (res.code === '1') { - this.gridArr2 = [...res.device_year_arr] + this.gridArr2 = [...res.srb.device_year_arr] } else { this.Dialog(res.desc) } @@ -742,7 +764,7 @@ export default { async _getDeviceYearMainPlan () { let res = await getDeviceYearMainPlan() if (res.code === '1') { - this.gridArr3 = [...res.device_year_arr] + this.gridArr3 = [...res.srb.device_year_arr] } else { this.Dialog(res.desc) } @@ -751,7 +773,7 @@ export default { async _getDeviceGroupStatus () { let res = await getDeviceGroupStatus() if (res.code === '1') { - this.gridArr4 = [...res.device_group_arr] + this.gridArr4 = [...res.srb.device_group_arr] } else { this.Dialog(res.desc) } @@ -771,13 +793,13 @@ export default { clear both .content_left float left - _wh(28%, 100%) + _wh(24%, 100%) border-top .03rem solid #0092df background linear-gradient(rgba(15, 44, 84, 0.6) 0%, rgb(0, 24, 57) 100%) overflow hidden .content_center float left - _wh(calc(44% - .4rem), 100%) + _wh(calc(52% - .4rem), 100%) margin 0 .2rem padding .32rem .2rem .2rem .2rem overflow hidden @@ -834,20 +856,33 @@ export default { border-bottom .01rem solid rgba(8,205,248,0.3) li float left - width 20% - _font(.14rem,.4rem,#78B1DE,,center) + width 17% + _font(.12rem,.4rem,#78B1DE,,center) word-wrap break-word word-break break-all white-space nowrap - padding 0 .02rem + padding 0 .04rem overflow hidden box-sizing border-box + &:nth-child(1) + width 32% .scroll_container_1 overflow hidden .scroll_tab_2 li - width calc(100% / 6) + width 15% !important +.scroll_tab_2 li:nth-child(1) + width 25% !important .scroll_tab_3 li - width calc(100% / 10) + width 10% !important +.scroll_tab_3 li:nth-child(1) + width 10% !important +.scroll_tab_4 li + &:nth-child(1) + width 30% !important + &:nth-child(2), &:nth-child(3) + width 15% !important + &:nth-child(4), &:nth-child(5) + width 20% !important .content-block-scroll-ul_1 li _wh(100%, .44rem) @@ -861,14 +896,16 @@ export default { li .scroll-ul_1_div float left - _wh(20%, .44rem) + _wh(17%, .44rem) _fj(center) - _font(.14rem, .44rem, #fff,,center) + _font(.12rem, .44rem, #fff,,center) word-wrap break-word word-break break-all white-space nowrap - padding 0 .02rem + padding 0 .04rem overflow hidden + &:nth-child(1) + width 32% .progress_line_wrap position relative _wh(1.35rem, .03rem) @@ -885,35 +922,50 @@ export default { _wh(.15rem, .15rem) background center center / 100% 100% url(../assets/images/dot_1.png) no-repeat .content-block-scroll-ul_2 li .scroll-ul_1_div - width calc(100% / 6) + width 15% !important +.content-block-scroll-ul_2 li .scroll-ul_1_div:nth-child(1) + width 25% !important .content-block-scroll-ul_3 li .scroll-ul_1_div - width calc(100% / 10) + width 10% !important +.content-block-scroll-ul_3 li .scroll-ul_1_div:nth-child(1) + width 10% !important +.content-block-scroll-ul_4 li .scroll-ul_1_div + &:nth-child(1) + width 30% !important + &:nth-child(2), &:nth-child(3) + width 15% !important + &:nth-child(4), &:nth-child(5) + width 20% !important .num_items - _wh(100%, .6rem) - _fj() + _wh(100%, 100%) + _fj(space-evenly) + flex-direction: column .right_1_up_right_item - _wh(1.7rem, .6rem) + _wh(100%, .8rem) background center bottom / 100% 100% url(../assets/images/item_3.png) no-repeat _fj(space-evenly) flex-direction column &:nth-child(2) - margin-left .2rem + margin-top .2rem .right_1_up_p1 - font-family "SourceHanSansCN" - _font(.14rem, .14rem, #78B1DE, 700, center) + display block + _font(.2rem, .4rem, #78B1DE, 700, center) .right_1_up_p2 - font-family "SourceHanSansCN" - _font(.18rem, .18rem, #fff, 700, center) + display block + _font(.22rem, .4rem, #fff, 700, center) span _font(.12rem, .18rem, #fff, 700, center) padding-left .1rem .echart_wrap_l + _fj() _wh(60%, 100%) padding-right .4rem background right center / .02rem 100% url(../assets/images/item_4.png) no-repeat +.echart_wrap_l_l + _wh(50%, 100%) + padding-right .4rem .echart_wrap_l_wrap - _wh(100%, calc(100% - .6rem)) - padding-top .2rem + _wh(50%, 100%) .echart_wrap_r _wh(40%, 100%) padding-left .2rem