From bb654cea7b1666d5b3c04dbd81a074a5a502cc67 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 31 五月 2024 09:36:40 +0800
Subject: [PATCH] 1、登录页实现登录窗口响应式布局，同时限制最大最小宽高 2、除设备级看板其余看板中点击技术状态以及报修故障图表后打开对应弹窗，并实现与接口联动 3、设备级看板点击保养计划按钮后打开对应弹窗并实现与后端数据联调 4、优化设备级看板折线图样式，将Y轴移至左侧，删除右侧Y轴，设置数据值在图标上的显示
---
src/views/dashboard/IndexSignage.vue | 169 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 101 insertions(+), 68 deletions(-)
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index 85ce0bd..6785b75 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -15,39 +15,11 @@
<div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div>
</div>
<div class="support-plan-container">
- <!--<div v-for="item in supportPlanList" class="support-plan-item"-->
- <!--:style="{background:item.background}">-->
- <!--<div>{{item.label}}</div>-->
- <!--<div class="plan-value-container">-->
- <!--<div class="plan-value">{{item.value}}</div>-->
- <!--<div>鍙�</div>-->
- <!--</div>-->
- <!--</div>-->
- <div class="support-plan-item" style="background:#5FE0AF">
- <div>鏈湀涓変繚璁″垝</div>
+ <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item"
+ :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)">
+ <div>{{item.planTime}}</div>
<div class="plan-value-container">
- <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
- <div>鍙�</div>
- </div>
- </div>
- <div class="support-plan-item" style="background:#409EFF">
- <div>鏈湀瀹屾垚</div>
- <div class="plan-value-container">
- <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
- <div>鍙�</div>
- </div>
- </div>
- <div class="support-plan-item" style="background:#D6BC52">
- <div>涓嬫湀涓変繚璁″垝</div>
- <div class="plan-value-container">
- <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
- <div>鍙�</div>
- </div>
- </div>
- <div class="support-plan-item" style="background:#58D9F9">
- <div>涓嬩笅鏈堜笁淇濊鍒�</div>
- <div class="plan-value-container">
- <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
+ <div class="plan-value">{{$data[item.planValueLabel]}}</div>
<div>鍙�</div>
</div>
</div>
@@ -68,15 +40,21 @@
</dv-border-box-9>
</div>
</div>
+
+ <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
+ :modalDataApiParams="modalDataApiParams"
+ @closeModal="modalVisible=false"/>
</div>
</template>
<script>
import signageApi from '@/api/signage'
import moment from 'moment'
+ import SignageModal from './modules/SignageModal'
export default {
name: 'IndexSignage',
+ components: { SignageModal },
data() {
return {
runningStateChart: '',
@@ -100,24 +78,55 @@
{ value: '10', name: '鍋滄満' },
{ value: '8', name: '杩愯' }
],
+ supportPlanList: [
+ {
+ planTime: '鏈湀涓変繚璁″垝',
+ planValueLabel: 'thisMonthMaintenancePlanNum',
+ backgroundColor: '#5FE0AF',
+ apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
+ },
+ {
+ planTime: '鏈湀瀹屾垚',
+ planValueLabel: 'thisMonthMaintenanceRealNum',
+ backgroundColor: '#409EFF',
+ apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
+ },
+ {
+ planTime: '涓嬫湀涓変繚璁″垝',
+ planValueLabel: 'nextMonthMaintenancePlanNum',
+ backgroundColor: '#D6BC52',
+ apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
+ },
+ {
+ planTime: '涓嬩笅鏈堜笁淇濊鍒�',
+ planValueLabel: 'nextNextMonthMaintenancePlanNum',
+ backgroundColor: '#58D9F9',
+ apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
+ }
+ ],
thisMonthMaintenancePlanNum: 0,
thisMonthMaintenanceRealNum: 0,
nextMonthMaintenancePlanNum: 0,
nextNextMonthMaintenancePlanNum: 0,
- twoMaintenanceChartData: [['-', '-', '-']],
+ twoMaintenanceChartData: [],
barChart: '',
barChartData: [],
doubleBarChart: '',
doubleBarChartData: {},
+ workshopProblemChartData: [],
efficiencyChartConfig: {},
maintenanceConfig: {},
- problemConfig: {}
+ problemConfig: {},
+ modalVisible: false,
+ modalTitle: '',
+ modalDataApiUrl: '',
+ modalTableColumns: [],
+ modalDataApiParams: {}
}
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
this.getChartDataByApi()
- this.drawProblemChart()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
@@ -133,6 +142,7 @@
this.getTwoMaintenanceChartDataByApi()
this.getBarChartDataByApi()
this.getDoubleBarChartDataByApi()
+ this.getWorkshopProblemChartDataByApi()
},
/* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
@@ -147,7 +157,7 @@
signageApi.getEquipmentStatusStatisticsApi()
.then(res => {
if (res.success) this.runningStateData = res.result.list
- this.drawRunningStateChart(res.result.producitonId)
+ this.drawRunningStateChart(res.result.productionId)
})
},
@@ -180,9 +190,9 @@
.then(res => {
if (res.success && res.result) {
this.techConditionData = [
- { value: res.result[0].qualifiedCount, name: '鍚堟牸' },
- { value: res.result[0].disabledCount, name: '绂佺敤' },
- { value: res.result[0].limitedUseCount, name: '闄愮敤' }
+ { value: res.result[0].qualifiedCount, name: '鍚堟牸', technologyStatus: 'qualified' },
+ { value: res.result[0].disabledCount, name: '绂佺敤', technologyStatus: 'disabled' },
+ { value: res.result[0].limitedUseCount, name: '闄愮敤', technologyStatus: 'limitedUse' }
]
}
this.drawTechConditionChart()
@@ -202,9 +212,9 @@
.then(res => {
if (res.success && res.result) {
this.warrantyMalfunctionData = [
- { value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
- { value: res.result[0].stopCount, name: '鍋滄満' },
- { value: res.result[0].noStopCount, name: '杩愯' }
+ { value: res.result[0].failurTotalCount, name: '鎶ヤ慨', isStop: '' },
+ { value: res.result[0].stopCount, name: '鍋滄満', isStop: '2' },
+ { value: res.result[0].noStopCount, name: '杩愯', isStop: '1' }
]
}
this.drawWarrantyMalfunctionChart()
@@ -235,7 +245,7 @@
getTwoMaintenanceChartDataByApi() {
signageApi.getTwoMaintenancePlanListApi()
.then(res => {
- if (res.success && res.result) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
+ if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
this.drawMaintenanceChart()
})
},
@@ -271,6 +281,16 @@
this.drawDoubleBarChart()
})
},
+
+ /* 璋冪敤鎺ュ彛鑾峰彇杞﹂棿闂鍒楄〃*/
+ getWorkshopProblemChartDataByApi() {
+ signageApi.getWorkshopProblemListApi()
+ .then(res => {
+ if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime])
+ this.drawWorkshopProblemChart()
+ })
+ },
+
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
drawRunningStateChart(productionId) {
@@ -431,7 +451,7 @@
}
},
xAxis: {
- name: '鍗曚綅',
+ name: '',
nameTextStyle: {
color: '#fff'
},
@@ -558,14 +578,13 @@
}
]
}
- option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸
+ option.title.text = `${moment().subtract(1, 'days').format('M鏈圖鏃�')}鍒╃敤鐜嘸
this.efficiencyChart.setOption(option, true)
this.efficiencyChart.hideLoading()
this.efficiencyChart.on('click', params => {
// 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
if (params.componentType === 'series') {
// 鏌辩姸浣撹烦杞粺璁″垎鏋愰〉闈㈠睍绀哄搴斿眰绾ф暟鎹�
- console.log('seriesParams===========', params)
let productionId
let tierName
// 鐐瑰嚮鐨勬槸鏌变綋鐨勫�硷紝鍚﹀垯鐐瑰嚮鐨勪负鏌变綋鑳屾櫙闃村奖
@@ -576,13 +595,11 @@
productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
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('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value })
}
})
@@ -638,7 +655,7 @@
center: ['45%', '60%'],
color: [
'#0FC61A',
- '#0DAF15',
+ '#F56436',
'#8B8B8B'
],
label: {
@@ -665,6 +682,15 @@
}
this.techConditionChart.setOption(option, true)
this.techConditionChart.hideLoading()
+
+ this.techConditionChart.on('click', params => {
+ this.modalTitle = `鎶�鏈姸鎬侊紙${params.name}锛塦
+ this.modalDataApiParams = {
+ technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus
+ }
+ this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
+ this.modalVisible = true
+ })
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
@@ -744,6 +770,15 @@
}
this.warrantyMalfunctionChart.setOption(option, true)
this.warrantyMalfunctionChart.hideLoading()
+
+ this.warrantyMalfunctionChart.on('click', params => {
+ this.modalTitle = `鎶ヤ慨鏁呴殰锛�${params.name}锛塦
+ this.modalDataApiParams = {
+ isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop
+ }
+ this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair'
+ this.modalVisible = true
+ })
},
/* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
@@ -756,7 +791,7 @@
evenRowBGC: '#295562',
data: this.twoMaintenanceChartData,
index: true,
- columnWidth: [100],
+ columnWidth: [100, 300, 300, 300],
align: ['center', 'center', 'center', 'center']
}
},
@@ -836,7 +871,7 @@
interval: yAxisInterval,
axisLabel: {
formatter: '{value}',
- color: '#e2e9ff'
+ color: '#fff'
},
axisTick: {
show: false
@@ -892,13 +927,11 @@
this.barChart.hideLoading()
this.barChart.on('click', params => {
- console.log('params', params)
let productionId
// 鐐瑰嚮鐨勬槸鏌变綋鐨勫�硷紝鍚﹀垯鐐瑰嚮鐨勪负鏌变綋鑳屾櫙闃村奖
if (params.seriesIndex === 0) productionId = params.data.productionId
else productionId = params.name
- console.log('productionId', productionId)
this.$router.push({
name: 'mdc-base-OEEAnalysis',
params: { isEquipment: false, productionId }
@@ -1057,29 +1090,28 @@
},
/* 缁樺埗闂婊氬姩琛� */
- drawProblemChart() {
+ drawWorkshopProblemChart() {
this.problemConfig = {
indexHeader: '搴忓彿',
- header: ['鏃堕棿', '闂鍐呭'],
+ header: ['闂鍐呭', '鏃堕棿'],
headerBGC: '#86D186',
oddRowBGC: '#7CBF7C',
evenRowBGC: '#7CBF7C',
- data: [
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'],
- // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂']
- ],
+ data: this.workshopProblemChartData,
index: true,
- columnWidth: [100, 300, 300],
+ columnWidth: [100, 300, 150],
align: ['center']
}
+ },
+
+ /**
+ * 鐐瑰嚮涓変繚灞曠ず鏍忓悗鎵撳紑寮圭獥
+ * @param record 鐐瑰嚮褰撳墠涓変繚淇℃伅
+ */
+ openMaintenanceModal(record) {
+ this.modalTitle = record.planTime
+ this.modalDataApiUrl = record.apiUrl
+ this.modalVisible = true
},
/**
@@ -1127,6 +1159,7 @@
padding: 5px 20px;
font-size: 20px;
margin-bottom: 10px;
+ cursor: pointer;
.plan-value-container {
display: flex;
--
Gitblit v1.9.3