| | |
| | | <!--</div>--> |
| | | <div class="content-container"> |
| | | <div style="width: 25%" class="left-col"> |
| | | <div class="back-nav" @click="$emit('backToLastSignage','Index')" v-if="userType===4"> |
| | | <dv-decoration-7>上一级</dv-decoration-7> |
| | | </div> |
| | | <dv-border-box-9 style="padding: 40px 20px 0"> |
| | | <!--<div class="first-title">M D C 入 网 总 数 : 6 0 3 台</div>--> |
| | | <div id="running_state_chart" style="width:100%;height: 400px;"></div> |
| | |
| | | productionCode: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | userType: { |
| | | type: Number |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | 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('switchToBranchFactory', params.value) |
| | | this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', 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 |
| | |
| | | justify-content: space-between; |
| | | |
| | | .left-col { |
| | | .back-nav { |
| | | width: 100px; |
| | | height: 30px; |
| | | color: #eee; |
| | | position: absolute; |
| | | top: 25px; |
| | | left: 25px; |
| | | cursor: pointer; |
| | | z-index: 9999 |
| | | } |
| | | |
| | | .first-title { |
| | | color: #00A8AC; |
| | | font-size: 20px; |