| | |
| | | <template> |
| | | <div style="flex:1;display: flex;"> |
| | | <div class="chart-container" :id="chartContainerId"></div> |
| | | <!--<div style="height: 100%">--> |
| | | <!--<div class="chart-container" :id="chartContainerId"></div>--> |
| | | |
| | | <!--</div>--> |
| | | <div style="flex: 1;display: flex;flex-direction: column"> |
| | | <div class="chart-container" :id="chartContainerId" style="flex: 1"></div> |
| | | <div class="pie-value-container"> |
| | | <div> |
| | | <span class="color-square" style="background-color: #00923f"></span>完成量 {{equipmentStatusCountObj.qualifiedQty}} |
| | | </div> |
| | | <div> |
| | | <span class="color-square" style="background-color: #e67817"></span>任务量 {{equipmentStatusCountObj.planQty}} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="equipment-state-container"> |
| | | <div>设备总数:{{equipmentStatusCountObj.equipmentCount}}台</div> |
| | | <div>大修、项修数量:{{equipmentStatusCountObj.repairCount}}台</div> |
| | |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <SignageModal ref="signageModalRef" :modalTitle="modalTitle" :productionId="currentProductionId"/> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import signageApi from '@/api/signage' |
| | | import SignageModal from './SignageModal' |
| | | |
| | | export default { |
| | | name: 'WorkshopDeviceOverview', |
| | | components: {}, |
| | | components: { SignageModal }, |
| | | props: { |
| | | workshopName: { |
| | | type: String |
| | | }, |
| | | currentProductionId: { |
| | | type: String |
| | | }, |
| | |
| | | return { |
| | | chartContainer: null, |
| | | chartContainerId: 'left-col-chart1', |
| | | equipmentStatusCountObj: {} |
| | | equipmentStatusCountObj: {}, |
| | | modalTitle: '' |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | { |
| | | name: '类目', |
| | | type: 'pie', |
| | | radius: '60%', |
| | | radius: '90%', |
| | | center: ['50%', '50%'], |
| | | hoverAnimation: false, |
| | | data: [ |
| | |
| | | } |
| | | option.series[0].data[0].value = yAxisData1 |
| | | option.series[0].data[1].value = yAxisData2 |
| | | |
| | | this.chartContainer.on('click', () => { |
| | | this.modalTitle = this.workshopName + '当月任务完成百分比' |
| | | this.$refs.signageModalRef.visible = true |
| | | }) |
| | | |
| | | this.chartContainer.setOption(option, true) |
| | | }, |
| | | |
| | |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | .pie-value-container { |
| | | > div { |
| | | text-align: center; |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .color-square { |
| | | display: inline-block; |
| | | width: 0.625vw; |
| | | height: 0.45vw; |
| | | border-radius: 0.1vw; |
| | | background-color: #00ff80; |
| | | margin-right: 0.4vw; |
| | | } |
| | | } |
| | | |
| | | .equipment-state-container { |
| | | display: flex; |
| | | flex-direction: column; |