| | |
|---|
| | | 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: {} |
|---|
| | | } |
|---|
| | |
|---|
| | | window.addEventListener('resize', this.handleWindowResize) |
|---|
| | | this.drawCharts() |
|---|
| | | this.getChartDataByApi() |
|---|
| | | }, |
|---|
| | | activated() { |
|---|
| | | console.log('触发activated') |
|---|
| | | this.handleWindowResize() |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | window.removeEventListener('resize', this.handleWindowResize) |
|---|
| | |
|---|
| | | getRunningStateDataByApi() { |
|---|
| | | signageApi.getEquipmentStatusStatisticsApi(this.productionCode) |
|---|
| | | .then(res => { |
|---|
| | | if (res.success) this.runningStateData = res.result |
|---|
| | | this.drawRunningStateChart() |
|---|
| | | if (res.success) this.runningStateData = res.result.list |
|---|
| | | this.drawRunningStateChart(res.result.producitonId) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /* 绘制设备运行状态玫瑰饼图 */ |
|---|
| | | drawRunningStateChart() { |
|---|
| | | drawRunningStateChart(productionId) { |
|---|
| | | this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart')) |
|---|
| | | const option = { |
|---|
| | | height: 300, |
|---|
| | |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | this.runningStateChart.setOption(option, true) |
|---|
| | | |
|---|
| | | this.runningStateChart.on('click', params => { |
|---|
| | | console.log('params', params) |
|---|
| | | this.$router.push({ |
|---|
| | | name: 'mdc-base-DeviceBaseInfo', |
|---|
| | | params: { signageData: params.data, productionId } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | /* 绘制设备利用率胶囊图 */ |
|---|
| | |
|---|
| | | this.efficiencyChart.setOption(option, true) |
|---|
| | | |
|---|
| | | this.efficiencyChart.on('click', params => { |
|---|
| | | |
|---|
| | | // 点击触发的为柱状体，除此除外是标题 |
|---|
| | | if (params.componentType === 'series') { |
|---|
| | | console.log('seriesParams===========', params) |
|---|
| | | |
|---|
| | | const productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId |
|---|
| | | const tierName = this.efficiencyData.find(item => item.productionCode === params.name).name |
|---|
| | | this.$router.push({ |
|---|
| | | name: 'mdc-base-StatisticsChart', |
|---|
| | | params: { isEquipment: false, productionId, tierName } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | console.log('yAxisParams===========', params) |
|---|
| | | this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', productionCode: params.value }) |
|---|
