<template>
|
<div class="outer-container">
|
<div class="left-container">
|
<a-card title="技术状态">
|
<a-spin class="spinning-container" :spinning="spinning1">
|
<div id="tech_condition_chart" style="width:100%;height: 100%;"></div>
|
</a-spin>
|
</a-card>
|
|
<a-card title="设备报修故障">
|
<a-spin class="spinning-container" :spinning="spinning2">
|
<div id="warranty_malfunction_chart" style="width:100%;height: 100%;"></div>
|
</a-spin>
|
</a-card>
|
</div>
|
|
|
<div class="right-container">
|
<div class="right-top-container">
|
<a-card title="三保计划">
|
<div class="support-plan-container">
|
<div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
|
<div>{{item.planTime}}</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{$data.thirdMaintenanceParams[item.planValueLabel]}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
</div>
|
</a-card>
|
<a-card title="二保计划">
|
<div class="support-plan-container">
|
<div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
|
<div>{{item.planTime}}</div>
|
<div class="plan-value-container">
|
<div class="plan-value">{{$data.secondMaintenanceParams[item.planValueLabel]}}</div>
|
<div>台</div>
|
</div>
|
</div>
|
</div>
|
</a-card>
|
</div>
|
|
<a-card title="我的待办" class="right-bottom-container">
|
<a slot="extra" href="#" @click="$router.push('/flowable/workflow/FlowTodo')">更多</a>
|
|
<todo-list ref="todoList"
|
:defaultCategories="['equipment_transfer','equipment_scrap','spare_part_apply','equipment_seal_up','equipment_unseal','equipment_return','sbdjApproval','eam_repair','equipment_lean_out','second_maintenance','third_maintenance']"
|
/>
|
</a-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import TodoList from '../TodoList'
|
import signageApi from '@/api/signage'
|
|
export default {
|
name: 'EamManagerSignage',
|
components: { TodoList },
|
data() {
|
return {
|
spinning1: false,
|
spinning2: false,
|
techConditionChart: '',
|
warrantyMalfunctionChart: '',
|
thirdMaintenanceParams: {
|
thisMonthMaintenancePlanNum: 0,
|
thisMonthMaintenanceRealNum: 0,
|
nextMonthMaintenancePlanNum: 0,
|
maintenanceOverdueNum: 0
|
},
|
secondMaintenanceParams: {
|
thisMonthMaintenancePlanNum: 0,
|
thisMonthMaintenanceRealNum: 0,
|
nextMonthMaintenancePlanNum: 0,
|
maintenanceOverdueNum: 0
|
},
|
maintenanceEleList: [
|
{
|
planTime: '本月计划',
|
planValueLabel: 'thisMonthMaintenancePlanNum',
|
backgroundColor: '#719D8E',
|
code: 'bysbzs'
|
},
|
{
|
planTime: '本月完成',
|
planValueLabel: 'thisMonthMaintenanceRealNum',
|
backgroundColor: '#409EFF',
|
code: 'bwc'
|
},
|
{
|
planTime: '下月计划',
|
planValueLabel: 'nextMonthMaintenancePlanNum',
|
backgroundColor: '#A8985D',
|
code: 'xysb'
|
},
|
{
|
planTime: '超期',
|
planValueLabel: 'maintenanceOverdueNum',
|
backgroundColor: '#E86A6A',
|
code: ''
|
}
|
]
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
this.getChartDataByApi()
|
this.$refs.todoList.loadData(1)
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleWindowResize)
|
},
|
methods: {
|
/* 调用接口获取图表数据汇总方法 */
|
getChartDataByApi() {
|
this.getTechConditionDataByApi()
|
this.getWarrantyMalfunctionDataByApi()
|
this.getThirdMaintenanceConditionByApi()
|
this.getSecondMaintenanceConditionByApi()
|
},
|
|
/* 调用接口获取技术状态 */
|
getTechConditionDataByApi() {
|
this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
|
this.spinning1 = true
|
signageApi.getEquipmentTechnologyStatusApi()
|
.then(res => {
|
if (res.success && res.result) {
|
this.techConditionData = [
|
{
|
value: res.result.length > 0 ? res.result[0].qualifiedCount : 0,
|
name: '合格'
|
},
|
{
|
value: res.result.length > 0 ? res.result[0].limitedUseCount : 0,
|
name: '限用'
|
},
|
{
|
value: res.result.length > 0 ? res.result[0].disabledCount : 0,
|
name: '禁用'
|
}
|
]
|
this.drawTechConditionChart()
|
}
|
})
|
},
|
|
/* 调用接口获取故障报修 */
|
getWarrantyMalfunctionDataByApi() {
|
this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
|
this.spinning2 = true
|
signageApi.getReportRepairEquipmentApi()
|
.then(res => {
|
if (res.success && res.result) {
|
this.warrantyMalfunctionData = [
|
{
|
value: res.result.length > 0 ? res.result[0].noStopCount : 0,
|
name: '运行'
|
},
|
{
|
value: res.result.length > 0 ? res.result[0].failurTotalCount : 0,
|
name: '报修'
|
},
|
{
|
value: res.result.length > 0 ? res.result[0].stopCount : 0,
|
name: '停机'
|
}
|
]
|
this.drawWarrantyMalfunctionChart()
|
}
|
})
|
},
|
|
/* 调用接口获取三保情况 */
|
getThirdMaintenanceConditionByApi() {
|
signageApi.getThirdMaintenancePlanApi()
|
.then(res => {
|
if (res.success && res.result) {
|
this.thirdMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
|
this.thirdMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
|
this.thirdMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
|
this.thirdMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
|
}
|
})
|
},
|
|
/* 调用接口获取二保情况 */
|
getSecondMaintenanceConditionByApi() {
|
signageApi.getSecondMaintenancePlanApi()
|
.then(res => {
|
if (res.success && res.result) {
|
this.secondMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
|
this.secondMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
|
this.secondMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
|
this.secondMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
|
}
|
})
|
},
|
|
/* 绘制技术状态饼图 */
|
drawTechConditionChart() {
|
const option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: function(params) {
|
return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
|
'<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
|
}
|
},
|
legend: {
|
bottom: 0,
|
right: 'center',
|
itemWidth: 14,
|
itemHeight: 14,
|
itemGap: 15,
|
textStyle: {
|
color: 'inherit',
|
fontSize: 14
|
},
|
data: ['合格', '限用', '禁用']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: ['40%', '55%'],
|
center: ['50%', '40%'],
|
color: [
|
'#4DC794',
|
'#3DB1F6',
|
'#F76E6D'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'inherit',
|
fontSize: 16,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 15,
|
length: 15,
|
lineStyle: {
|
color: 'rgba(0,0,0,.45)'
|
}
|
},
|
data: this.techConditionData
|
}
|
]
|
}
|
this.techConditionChart.setOption(option, true)
|
this.spinning1 = false
|
},
|
|
/* 绘制设备报修故障饼图 */
|
drawWarrantyMalfunctionChart() {
|
const option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: function(params) {
|
return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
|
'<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
|
}
|
},
|
legend: {
|
bottom: 0,
|
right: 'center',
|
itemWidth: 14,
|
itemHeight: 14,
|
itemGap: 15,
|
textStyle: {
|
color: 'inherit',
|
fontSize: 14
|
},
|
data: ['运行', '报修', '停机']
|
},
|
grid: {
|
containLabel: true
|
},
|
series: {
|
type: 'pie',
|
radius: ['40%', '55%'],
|
center: ['50%', '40%'],
|
color: [
|
'#4DC794',
|
'#3DB1F6',
|
'#F76E6D'
|
],
|
label: {
|
position: 'outside',
|
show: true,
|
color: 'inherit',
|
fontSize: 16,
|
formatter: function(params) {
|
if (params.name !== '') {
|
return `${params.name}:${params.value}`
|
}
|
}
|
},
|
labelLine: {
|
show: true,
|
length2: 15,
|
length: 15
|
},
|
data: this.warrantyMalfunctionData
|
}
|
}
|
this.warrantyMalfunctionChart.setOption(option, true)
|
this.spinning2 = false
|
},
|
|
/**
|
* 窗口尺寸变化时触发
|
* 调整图表尺寸以适应分辨率
|
*/
|
handleWindowResize() {
|
if (this.techConditionChart) this.techConditionChart.resize()
|
if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
@container-margin: 10px;
|
|
.outer-container {
|
display: flex;
|
justify-content: space-between;
|
height: 100vh;
|
|
.left-container {
|
width: 30%;
|
height: 100%;
|
margin-right: @container-margin;
|
|
& > div:first-child {
|
margin-bottom: @container-margin;
|
}
|
|
/deep/ .ant-card {
|
height: calc(100% / 2 - (@container-margin / 2));
|
display: flex;
|
flex-direction: column;
|
|
.ant-card-body {
|
flex: 1;
|
}
|
}
|
}
|
|
.right-container {
|
width: 70%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.right-top-container {
|
display: flex;
|
margin-bottom: @container-margin;
|
|
/deep/ .ant-card {
|
flex: 1;
|
|
&:first-child {
|
margin-right: @container-margin;
|
}
|
.ant-card-body {
|
padding: 0;
|
}
|
}
|
|
.support-plan-container {
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
|
.support-plan-item {
|
border-radius: 3px;
|
width: calc(100% / 2);
|
padding: 25px;
|
text-align: center;
|
border-left: 1px solid #e8e8e8;
|
border-bottom: 1px solid #e8e8e8;
|
|
.plan-value-container {
|
margin-top: 5px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.plan-value {
|
margin-right: 10px;
|
font-size: 30px;
|
}
|
}
|
}
|
}
|
}
|
|
.right-bottom-container {
|
flex: 1;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
& ::-webkit-scrollbar {
|
width: 6px; /* 滚动条宽度 */
|
}
|
|
/deep/ .ant-card-body {
|
padding: 6px 24px 12px;
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
}
|
}
|
|
.spinning-container {
|
height: 100%;
|
/deep/ .ant-spin-container {
|
height: 100%;
|
}
|
}
|
</style>
|
