From 86fe08ff297b2f92e927a90bea7cd6906da61bea Mon Sep 17 00:00:00 2001
From: qushaowei <qushaowei@163.com>
Date: 星期五, 22 三月 2024 10:02:30 +0800
Subject: [PATCH] Merge branch 'master' of http://117.34.109.166:18448/r/vue_mdc_430 into develop
---
src/views/dashboard/IndexSignage.vue | 1063 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,063 insertions(+), 0 deletions(-)
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
new file mode 100644
index 0000000..ef25529
--- /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: 'angle', // 鐜懓鍥�
+ // selectedMode: "single",
+ radius: ['40%', '55%'],
+ center: ['50%', '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