| | |
|---|
| | | nextNextMonthMaintenancePlanNum: 0, |
|---|
| | | twoMaintenanceChartData: [['-', '-', '-']], |
|---|
| | | barChart: '', |
|---|
| | | barChartData: [], |
|---|
| | | barChartData: [ |
|---|
| | | { |
|---|
| | | 'value': '34', |
|---|
| | | 'name': '401一工段', |
|---|
| | | 'productionCode': '4215215621', |
|---|
| | | 'productionId': '1729761410329280513' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | 'value': '77', |
|---|
| | | 'name': '401二工段', |
|---|
| | | 'productionCode': '8563354643', |
|---|
| | | 'productionId': '1729783206308302849' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | doubleBarChart: '', |
|---|
| | | doubleBarChartData: {}, |
|---|
| | | maintenanceConfig: {}, |
|---|
| | |
|---|
| | | this.getWarrantyMalfunctionDataByApi() |
|---|
| | | this.getMonthMaintenanceNumByApi() |
|---|
| | | this.getTwoMaintenanceChartDataByApi() |
|---|
| | | this.getBarChartDataByApi() |
|---|
| | | // this.getBarChartDataByApi() |
|---|
| | | this.getDoubleBarChartDataByApi() |
|---|
| | | }, |
|---|
| | | |
|---|
| | |
|---|
| | | /* 绘制单柱图 */ |
|---|
| | | drawBarChart() { |
|---|
| | | this.barChart = this.$echarts.init(document.getElementById('bar_chart')) |
|---|
| | | const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100] |
|---|
| | | const option = { |
|---|
| | | title: { |
|---|
| | | show: true, // 是否显示标题，默认为true |
|---|
| | | text: 'OEE车间', // 主标题文本 |
|---|
| | | text: '', // 主标题文本 |
|---|
| | | x: 'center', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值 |
|---|
| | | y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值 |
|---|
| | | textStyle: { |
|---|
| | |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | }, |
|---|
| | | 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 + '"></span>' + ' OEE: ' + params[0].value + '%' |
|---|
| | | }, |
|---|
| | | // backgroundColor: 'rgba(9, 24, 48, 0.5)', |
|---|
| | | borderColor: 'rgba(75, 253, 238, 0.4)', |
|---|
| | |
|---|
| | | nameLocation: 'middle', |
|---|
| | | nameGap: 40, // x轴name与横坐标轴线的间距 |
|---|
| | | type: 'category', |
|---|
| | | data: this.barChartData.map(item => item.name), |
|---|
| | | data: this.barChartData.map(item => item.productionId), |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#FFFFFF' |
|---|
| | |
|---|
| | | interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。 |
|---|
| | | rotate: this.barChartData.length >= 5 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度 |
|---|
| | | inside: false, // 刻度标签是否朝内，默认朝外 |
|---|
| | | margin: 6 // 刻度标签与轴线之间的距离 |
|---|
| | | formatter: value => { |
|---|
| | | return `${this.barChartData.find(item => item.productionId === value).name}` |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: true, |
|---|
| | |
|---|
| | | } |
|---|
| | | }], |
|---|
| | | yAxis: [{ |
|---|
| | | name: '数量', |
|---|
| | | nameLocation: 'middle', |
|---|
| | | nameGap: 30, // x轴name与横坐标轴线的间距 |
|---|
| | | name: '%', |
|---|
| | | max: 100, |
|---|
| | | axisLabel: { |
|---|
| | | formatter: '{value}', |
|---|
| | | color: '#e2e9ff' |
|---|
| | |
|---|
| | | itemStyle: { |
|---|
| | | color: '#55D6A5' |
|---|
| | | }, |
|---|
| | | showBackground: true, |
|---|
| | | zlevel: 1, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | lineHeight: 10, |
|---|
| | |
|---|
| | | fontSize: 18 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '背景', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '15%', |
|---|
| | | barGap: '-100%', |
|---|
| | | data: defaultData, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#11294d' |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | option.title.text = moment().subtract(1, 'months').format('M月') + `OEE车间` |
|---|
| | | this.barChart.setOption(option, true) |
|---|
| | | |
|---|
| | | this.barChart.on('click', params => { |
|---|
| | | console.log('params', params) |
|---|
| | | let productionId |
|---|
| | | // 点击的是柱体的值，否则点击的为柱体背景阴影 |
|---|
| | | if (params.seriesIndex === 0) productionId = params.data.productionId |
|---|
| | | else productionId = params.name |
|---|
| | | |
|---|
| | | this.$router.push({ |
|---|
| | | name: 'mdc-base-OEEAnalysis', |
|---|
| | | params: { isEquipment: false, productionId } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /* 绘制双柱图 */ |
|---|
