<template>
|
<div style="flex:1;display: flex;">
|
<!--<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>
|
<img :src="getStatusImageAndLabel('正常运行','statusImage')"><span>{{getStatusImageAndLabel('正常运行','label')}}：{{equipmentStatusCountObj.runCount}}台</span>
|
</div>
|
<div>
|
<img :src="getStatusImageAndLabel('待机','statusImage')"><span>{{getStatusImageAndLabel('待机','label')}}：{{equipmentStatusCountObj.waitCount}}台</span>
|
</div>
|
<div>
|
<img :src="getStatusImageAndLabel('报警','statusImage')"><span>{{getStatusImageAndLabel('报警','label')}}：{{equipmentStatusCountObj.errorCount}}台</span>
|
</div>
|
<div>
|
<img :src="getStatusImageAndLabel('关机','statusImage')"><span>{{getStatusImageAndLabel('关机','label')}}：{{equipmentStatusCountObj.closeCount}}台</span>
|
|
</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: { SignageModal },
|
props: {
|
workshopName: {
|
type: String
|
},
|
currentProductionId: {
|
type: String
|
},
|
equipmentStatusList: {
|
type: Array
|
},
|
toDecimal2NoZero: {
|
type: Function
|
}
|
},
|
data() {
|
return {
|
chartContainer: null,
|
chartContainerId: 'left-col-chart1',
|
equipmentStatusCountObj: {},
|
modalTitle: ''
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
if (!this.currentProductionId) return
|
this.getDeviceStatusCountByApi()
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleWindowResize)
|
},
|
methods: {
|
getDeviceStatusCountByApi() {
|
const that = this
|
signageApi.getDeviceStatusCountApi(that.currentProductionId)
|
.then(res => {
|
if (!res.success) return
|
that.equipmentStatusCountObj = res.result
|
this.getChartDataByApi()
|
})
|
},
|
|
getChartDataByApi() {
|
this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
|
this.initChart()
|
},
|
|
initChart() {
|
const yAxisData1 = this.toDecimal2NoZero((this.equipmentStatusCountObj.qualifiedQty / this.equipmentStatusCountObj.planQty) * 100)
|
const yAxisData2 = 100 - yAxisData1
|
const finishedNum = yAxisData1
|
const option = {
|
legend: {
|
show: false
|
},
|
series: [
|
{
|
name: '类目',
|
type: 'pie',
|
radius: '90%',
|
center: ['50%', '50%'],
|
hoverAnimation: false,
|
data: [
|
{
|
value: 0,
|
name: '完成量',
|
itemStyle: { color: '#00923f' },
|
label: {
|
show: true,
|
fontSize: '70%',
|
color: '#fff',
|
position: 'inside',
|
textBorderWidth: 0,
|
formatter: function() {
|
return finishedNum + '%'
|
}
|
}
|
},
|
{
|
value: 100,
|
name: '任务量',
|
itemStyle: { color: '#e67817' },
|
label: {
|
show: false
|
}
|
}
|
],
|
labelLine: {
|
show: false
|
},
|
itemStyle: {
|
emphasis: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
}
|
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)
|
},
|
|
/**
|
* 获取对应状态的设备数量
|
* @param value 状态码集合
|
*/
|
getEquipmentStateCount(value) {
|
let stateCount = 0
|
this.equipmentList.forEach(item => {
|
if (value.includes(item.oporation)) stateCount++
|
})
|
return stateCount
|
},
|
|
getStatusImageAndLabel(label, property) {
|
return this.equipmentStatusList.find(item => item.label === label)[property]
|
},
|
|
/**
|
* 窗口尺寸变化时触发
|
* 调整图表尺寸以适应分辨率
|
*/
|
handleWindowResize() {
|
if (this.chartContainer) this.chartContainer.resize()
|
}
|
}
|
}
|
</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;
|
justify-content: space-evenly;
|
width: 50%;
|
font-size: 0.6vw;
|
|
img {
|
width: 10%;
|
margin-right: 5%;
|
}
|
}
|
</style>
|
