| | |
|---|
| | | this.drawCharts() |
|---|
| | | this.getChartDataByApi() |
|---|
| | | }, |
|---|
| | | activated() { |
|---|
| | | console.log('触发activated') |
|---|
| | | this.handleWindowResize() |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | window.removeEventListener('resize', this.handleWindowResize) |
|---|
| | | }, |
|---|
| | |
|---|
| | | getRunningStateDataByApi() { |
|---|
| | | signageApi.getEquipmentStatusStatisticsApi() |
|---|
| | | .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 => { |
|---|
| | | 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 |
|---|
| | | console.log('productionId', productionId) |
|---|
| | | this.$router.push({ |
|---|
| | | name: 'mdc-base-StatisticsChart', |
|---|
| | | params: { isEquipment: false, productionId, tierName } |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | console.log('yAxisParams===========', params) |
|---|
| | | this.$emit('switchToBranchFactory', params.value) |
|---|
| | | this.$emit('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | |
|---|
| | | xAxis: [{ |
|---|
| | | name: 'OEE车间', |
|---|
| | | nameLocation: 'middle', |
|---|
| | | nameGap: 30, // x轴name与横坐标轴线的间距 |
|---|
| | | nameGap: 40, // x轴name与横坐标轴线的间距 |
|---|
| | | type: 'category', |
|---|
| | | data: this.barChartData.map(item => item.name), |
|---|
| | | axisLine: { |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | margin: 10, |
|---|
| | | color: '#e2e9ff', |
|---|
| | | textStyle: { |
|---|
| | | fontSize: 12 |
|---|
| | | } |
|---|
| | | show: true, // 是否显示刻度标签，默认显示 |
|---|
| | | interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。 |
|---|
| | | rotate: this.barChartData.length >= 5 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度 |
|---|
| | | inside: false, // 刻度标签是否朝内，默认朝外 |
|---|
| | | margin: 6 // 刻度标签与轴线之间的距离 |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | |
|---|
| | | // ['-', '-'] |
|---|
| | | ], |
|---|
| | | index: true, |
|---|
| | | columnWidth: [100,300,300], |
|---|
| | | columnWidth: [100, 300, 300], |
|---|
| | | align: ['center'] |
|---|
| | | } |
|---|
| | | }, |
|---|
