From 28189102d735bfc2c41720d1ef292bd9024b49f2 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 18 四月 2024 11:21:01 +0800
Subject: [PATCH] 1、首页 （1）设备级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 （2）设备级看板点击设备班次按钮跳转至工作日历页面并根据设备编号筛选页面对应数据 （3）增加所有层级看板图表数据加载动画 （4）公司级以及分厂级看板利用率胶囊以及上月OEE车间单柱图表轴线刻度最大值采用动态设置方式而非固定100% （5）工段级看板上月OEE单柱图表轴线刻度最大值采用动态设置方式而非固定100% （6）工段级看板单击前7天利用率图表跳转至统计分析页面并根据唯一编号筛选页面对应数据 （7）工段级看板单击上月OEE图表跳转至设备综合效率分析页面并根据唯一编号筛选页面对应数据 2、调整全局导航栏页签间距，以便能在不超出导航栏的情况下同时放置更多页面页签
---
src/views/dashboard/EquipmentSignage.vue | 255 +++++++++-----
src/views/dashboard/BranchFactorySignage.vue | 113 ++++--
src/views/dashboard/IndexSignage.vue | 126 ++++---
src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue | 216 ++++++------
src/views/dashboard/Analysis.vue | 1
src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 10
src/components/layouts/TabLayout.vue | 2
src/views/dashboard/WorkshopSectionSignage.vue | 228 ++++++++++---
src/api/signage.js | 10
9 files changed, 615 insertions(+), 346 deletions(-)
diff --git a/src/api/signage.js b/src/api/signage.js
index 4b20d10..5d7a7d6 100644
--- a/src/api/signage.js
+++ b/src/api/signage.js
@@ -29,6 +29,12 @@
getEquipmentDayUtilizationStatisticsApi: productionCode => getAction('/mdc/home/equipmentDayUtilizationStatistics', { productionCode }),
// 涓婁釜鏈堝悇璁惧OEE缁熻
getEquipmentOEEMonthStatisticsApi: productionCode => getAction('/mdc/home/equipmentOEEMonthStatistics', { productionCode }),
- // 璁惧鏁堢巼浠〃鐩�
- getEquipmentEfficiencyStatisticsApi: productionCode => getAction('/mdc/home/equipmentEfficiencyStatistics', { productionCode })
+ // 宸ユ绾ц澶囨晥鐜囦华琛ㄧ洏
+ getEquipmentEfficiencyStatisticsApi: productionCode => getAction('/mdc/home/equipmentEfficiencyStatistics', { productionCode }),
+ // 璁惧绾ф暣骞村害鍒╃敤鐜囨姌绾垮浘
+ getEquipmentAnnualEfficiencyStatisticsApi: equipmentId => getAction('/mdc/home/equipmentAnnualEfficiencyStatistics', { equipmentId }),
+ // 宸ユ绾ц澶囨晥鐜囦华琛ㄧ洏
+ getEquipmentLevelEfficiencyStatisticsApi: equipmentId => getAction('/mdc/home/equipmentLevelEfficiencyStatistics', { equipmentId }),
+ // 璁惧绾ц澶囧垪琛�
+ getEquipmentListApi: productionCode => getAction('/mdc/home/equipmentList', { productionCode })
}
\ No newline at end of file
diff --git a/src/components/layouts/TabLayout.vue b/src/components/layouts/TabLayout.vue
index 2e79947..c4fc0f0 100644
--- a/src/components/layouts/TabLayout.vue
+++ b/src/components/layouts/TabLayout.vue
@@ -433,7 +433,7 @@
&.ant-tabs-card .ant-tabs-tab {
- padding: 0 24px !important;
+ padding: 0 20px 0 12px !important;
background-color: white !important;
margin-right: 10px !important;
diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 3570efe..6dd7c52 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -1,5 +1,6 @@
<template>
<Component :is="currentSignage" :userType="userType" :productionCode="productionCode"
+ :workshopSectionProductionCode="workshopSectionProductionCode"
@switchToNextSignage="switchToNextSignage" @backToLastSignage="backToLastSignage">
</Component>
</template>
diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue
index fa20fd7..d560385 100644
--- a/src/views/dashboard/BranchFactorySignage.vue
+++ b/src/views/dashboard/BranchFactorySignage.vue
@@ -110,20 +110,7 @@
nextNextMonthMaintenancePlanNum: 0,
twoMaintenanceChartData: [['-', '-', '-']],
barChart: '',
- barChartData: [
- {
- 'value': '34',
- 'name': '401涓�宸ユ',
- 'productionCode': '4215215621',
- 'productionId': '1729761410329280513'
- },
- {
- 'value': '77',
- 'name': '401浜屽伐娈�',
- 'productionCode': '8563354643',
- 'productionId': '1729783206308302849'
- }
- ],
+ barChartData: [],
doubleBarChart: '',
doubleBarChartData: {},
maintenanceConfig: {},
@@ -132,13 +119,14 @@
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
this.getChartDataByApi()
+ this.drawProblemChart()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
+ /* 璋冪敤鎺ュ彛鑾峰彇鍥捐〃鏁版嵁姹囨�绘柟娉� */
getChartDataByApi() {
this.getRunningStateDataByApi()
this.getEfficiencyDataByApi()
@@ -146,12 +134,19 @@
this.getWarrantyMalfunctionDataByApi()
this.getMonthMaintenanceNumByApi()
this.getTwoMaintenanceChartDataByApi()
- // this.getBarChartDataByApi()
+ this.getBarChartDataByApi()
this.getDoubleBarChartDataByApi()
},
/* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
getRunningStateDataByApi() {
+ this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
+ this.runningStateChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
.then(res => {
if (res.success) this.runningStateData = res.result.list
@@ -161,6 +156,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鍒╃敤鐜� */
getEfficiencyDataByApi() {
+ this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
+ this.efficiencyChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentUtilizationStatisticsApi(this.productionCode)
.then(res => {
if (res.success) this.efficiencyData = res.result
@@ -170,9 +172,16 @@
/* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
getTechConditionDataByApi() {
+ this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+ this.techConditionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.techConditionData = [
{ value: res.result[0].qualifiedCount, name: '鍚堟牸' },
{ value: res.result[0].disabledCount, name: '绂佺敤' },
@@ -185,9 +194,16 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鎶ヤ慨鏁呴殰 */
getWarrantyMalfunctionDataByApi() {
+ this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+ this.warrantyMalfunctionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getReportRepairEquipmentListApi(this.productionCode)
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.warrantyMalfunctionData = [
{ value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
{ value: res.result[0].stopCount, name: '鍋滄満' },
@@ -229,6 +245,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE缁熻 */
getBarChartDataByApi() {
+ this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+ this.barChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentOEEStatistics(this.productionCode)
.then(res => {
if (res.success) this.barChartData = res.result
@@ -238,6 +261,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE鍜屽埄鐢ㄧ巼瀵规瘮 */
getDoubleBarChartDataByApi() {
+ this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
+ this.doubleBarChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentMonthStatisticsApi(this.productionCode)
.then(res => {
if (res.success) this.doubleBarChartData = res.result
@@ -245,21 +275,8 @@
})
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawRunningStateChart()
- this.drawEfficiencyChart()
- this.drawTechConditionChart()
- this.drawWarrantyMalfunctionChart()
- this.drawMaintenanceChart()
- this.drawBarChart()
- this.drawDoubleBarChart()
- this.drawProblemChart()
- },
-
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
drawRunningStateChart(productionId) {
- this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -336,6 +353,7 @@
]
}
this.runningStateChart.setOption(option, true)
+ this.runningStateChart.hideLoading()
this.runningStateChart.on('click', params => {
console.log('params', params)
@@ -348,7 +366,6 @@
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
drawEfficiencyChart() {
- this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
const data = this.efficiencyData
const colorArray = [
{
@@ -379,7 +396,13 @@
bottom: '#F7B7A0'
}
]
- const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
+ const defaultData = []
+ const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
+ let yAxisMax
+ if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1
+ else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛�
+ const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠�
+ data.forEach(item => defaultData.push(yAxisMax))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -422,6 +445,9 @@
}
},
show: true,
+ min: 0,
+ max: 'dataMax',
+ interval: yAxisInterval,
type: 'value',
axisTick: {
show: false
@@ -537,6 +563,7 @@
}
option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸
this.efficiencyChart.setOption(option, true)
+ this.efficiencyChart.hideLoading()
this.efficiencyChart.on('click', params => {
// 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
@@ -565,7 +592,6 @@
/* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
drawTechConditionChart() {
- this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
const option = {
height: 300,
title: {
@@ -640,11 +666,11 @@
]
}
this.techConditionChart.setOption(option, true)
+ this.techConditionChart.hideLoading()
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
drawWarrantyMalfunctionChart() {
- this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
const option = {
height: 300,
title: {
@@ -719,6 +745,7 @@
]
}
this.warrantyMalfunctionChart.setOption(option, true)
+ this.warrantyMalfunctionChart.hideLoading()
},
/* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
@@ -739,8 +766,13 @@
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
- const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
+ const defaultData = []
+ const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value
+ let yAxisMax
+ if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1
+ else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛�
+ const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠�
+ this.barChartData.forEach(item => defaultData.push(yAxisMax))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -801,7 +833,9 @@
}],
yAxis: [{
name: '%',
- max: 100,
+ min: 0,
+ max: yAxisMax,
+ interval: yAxisInterval,
axisLabel: {
formatter: '{value}',
color: '#e2e9ff'
@@ -857,6 +891,7 @@
}
option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE杞﹂棿`
this.barChart.setOption(option, true)
+ this.barChart.hideLoading()
this.barChart.on('click', params => {
console.log('params', params)
@@ -874,7 +909,6 @@
/* 缁樺埗鍙屾煴鍥� */
drawDoubleBarChart() {
- this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
const option = {
color: ['#409EFF', '#0FC61A'],
tooltip: {
@@ -1017,6 +1051,7 @@
]
}
this.doubleBarChart.setOption(option, true)
+ this.doubleBarChart.hideLoading()
},
/* 缁樺埗闂婊氬姩琛� */
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 6c954df..9c24579 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -21,9 +21,10 @@
<th>璁惧缂栧彿</th>
<th>鍨嬪彿</th>
</tr>
- <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
+ <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)"
+ :style="{backgroundColor:equipmentId===item.equipmentId?'#1D94D4':''}">
<td>{{item.equipmentId}}</td>
- <td>{{item.equipmentType}}</td>
+ <td>{{item.equipmentModel}}</td>
</tr>
</table>
</div>
@@ -122,7 +123,7 @@
</div>
<div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
- <div v-for="(item,index) in buttonList" :key="index" @click="click(item)"
+ <div v-for="(item,index) in buttonList" :key="index" @click="navigateToPage(item)"
style="width: 200px;height: 70px;margin: 0 10px;cursor: pointer">
<dv-decoration-11>{{item.label}}</dv-decoration-11>
</div>
@@ -186,63 +187,18 @@
type: String,
default: ''
},
+ workshopSectionProductionCode: {
+ type: String,
+ default: ''
+ },
userType: {
type: Number
}
},
data() {
return {
- equipmentId: '2140223',
- equipmentList: [
- {
- equipmentId: '2140223',
- equipmentType: 'CV4160'
- },
- {
- equipmentId: '2140224',
- equipmentType: 'CV4161'
- },
- {
- equipmentId: '2140225',
- equipmentType: 'CV4162'
- },
- {
- equipmentId: '2140226',
- equipmentType: 'CV4163'
- },
- {
- equipmentId: '2140227',
- equipmentType: 'CV4164'
- },
- {
- equipmentId: '2140227',
- equipmentType: 'CV4165'
- },
- {
- equipmentId: '2140228',
- equipmentType: 'CV4166'
- },
- {
- equipmentId: '2140229',
- equipmentType: 'CV4167'
- },
- {
- equipmentId: '2140230',
- equipmentType: 'CV4168'
- },
- {
- equipmentId: '2140231',
- equipmentType: 'CV4169'
- },
- {
- equipmentId: '2140232',
- equipmentType: 'CV4170'
- },
- {
- equipmentId: '2140233',
- equipmentType: 'CV4171'
- }
- ],
+ equipmentId: '',
+ equipmentList: [],
equipmentInfo: {
equipmentId: '2511563154',
ABCSymbol: '3312321421',
@@ -268,7 +224,8 @@
label: '鎶ヤ慨'
},
{
- label: '璁惧鐝'
+ label: '璁惧鐝',
+ pageName: 'mdc-base-DeviceCalendar'
}
],
lineChart: '',
@@ -277,41 +234,114 @@
gaugeChart2: '',
gaugeChart3: '',
gaugeChart4: '',
- gaugeChartData1: [],
- gaugeChartData2: [],
- gaugeChartData3: [],
- gaugeChartData4: []
+ gaugeChartData: {
+ utilizationRate: 0,
+ startRate: 0,
+ openRate: 0,
+ overallEquipmentEfficiency: 0
+ },
+ hideLoadingDelayTime: 500
}
},
created() {
- console.log('瑙﹀彂閲嶆柊鍒涘缓')
this.equipmentId = this.productionCode
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
- this.getChartDataByApi()
+ this.getEquipmentListByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
- selectEquipment(record) {
- this.equipmentId = record.equipmentId
- },
-
- click(record) {
- window.alert(record.label)
+ getEquipmentListByApi() {
+ // 棣栭〉涓�杩涘叆鍗宠澶囩骇鎴栧伐娈电骇鏃讹紝workshopSectionProductionCode涓虹┖锛岄粯璁ゆ煡璇㈢涓�涓溅闂翠腑绗竴涓伐娈典笅鐨勮澶囧垪琛�
+ signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
+ .then(res => {
+ if (res.success) {
+ this.equipmentList = res.result
+ if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
+ }
+ })
+ .finally(() => {
+ // 姝ゅ涓轰繚璇乪quipmentId姝ｅ父璧嬪�煎悗鍐嶈皟鐢ㄦ帴鍙ｈ幏鍙栧浘琛ㄦ暟鎹紙寮傛锛�
+ this.getChartDataByApi()
+ })
},
getChartDataByApi() {
-
+ this.getGaugeChartDataByApi()
+ this.getLineChartDataByApi()
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawGaugeChart()
- this.drawLineChart()
+ selectEquipment(record) {
+ if (record.equipmentId === this.equipmentId) return
+ this.equipmentId = record.equipmentId
+ this.getChartDataByApi()
+ },
+
+ navigateToPage(record) {
+ if (record.pageName) {
+ this.$router.push({
+ name: record.pageName,
+ params: { equipmentId: this.equipmentId }
+ })
+ }
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇璁惧鏁堢巼缁熻 */
+ getGaugeChartDataByApi() {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ this.gaugeChart1.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart2.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart3.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart4.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+
+ signageApi.getEquipmentLevelEfficiencyStatisticsApi(this.equipmentId)
+ .then(res => {
+ if (res.success) this.gaugeChartData = res.result
+ this.drawGaugeChart()
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇鏁村勾搴﹀埄鐢ㄧ巼 */
+ getLineChartDataByApi() {
+ this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ this.lineChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+
+ signageApi.getEquipmentAnnualEfficiencyStatisticsApi(this.equipmentId)
+ .then(res => {
+ if (res.success) this.lineChartData = res.result
+ this.drawLineChart()
+ })
},
/* 缁樺埗浠〃鐩樺浘琛� */
@@ -408,61 +438,112 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
drawGaugeChart1(opt) {
- this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
const option = Object.assign({}, opt)
option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '鍒╃敤鐜�'
option.series[0].name = '鍒╃敤鐜�'
- option.series[0].data = [56]
+ option.series[0].data = [this.gaugeChartData.utilizationRate]
this.gaugeChart1.setOption(option, true)
+ setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
+
+ this.gaugeChart1.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
drawGaugeChart2(opt) {
- this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
const option = Object.assign({}, opt)
option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鍔ㄧ巼'
option.series[0].name = '寮�鍔ㄧ巼'
- option.series[0].data = [23]
+ option.series[0].data = [this.gaugeChartData.startRate]
this.gaugeChart2.setOption(option, true)
+ setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
+
+ this.gaugeChart2.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
drawGaugeChart3(opt) {
- this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
const option = Object.assign({}, opt)
option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鏈虹巼'
option.series[0].name = '寮�鏈虹巼'
- option.series[0].data = [44]
+ option.series[0].data = [this.gaugeChartData.openRate]
this.gaugeChart3.setOption(option, true)
+ setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
+
+ this.gaugeChart3.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: this.equipmentId,
+ tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
+ }
+ })
+ }
+ })
},
/* 缁樺埗OEE浠〃鐩樺浘琛� */
drawGaugeChart4(opt) {
- this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
const option = Object.assign({}, opt)
option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
option.series[0].name = 'OEE'
- option.series[0].data = [78]
+ option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
this.gaugeChart4.setOption(option, true)
+ setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
+
+ this.gaugeChart4.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: true, productionId: this.equipmentId }
+ })
+ }
+ })
},
/* 缁樺埗鎶樼嚎鍥� */
drawLineChart() {
- this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
const newData = {
- xAxis: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ xAxis: this.lineChartData.dateList,
yAxis: [
{
name: '鍒╃敤鐜�',
- value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
+ value: this.lineChartData.dataList.map(item => item.utilizationRate)
},
{
name: '寮�鍔ㄧ巼',
- value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
+ value: this.lineChartData.dataList.map(item => item.startRate)
},
{
name: 'OEE',
- value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
+ value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
}
],
yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼(%)'
@@ -574,6 +655,7 @@
type: 'value',
position: 'right',
splitNumber: 5,
+ max: 100,
axisLabel: {
show: true,
color: '#fff'
@@ -598,6 +680,7 @@
series: seriesData
}
this.lineChart.setOption(option, true)
+ setTimeout(() => this.lineChart.hideLoading(), this.hideLoadingDelayTime)
},
/**
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index ff2faab..85ce0bd 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -106,32 +106,7 @@
nextNextMonthMaintenancePlanNum: 0,
twoMaintenanceChartData: [['-', '-', '-']],
barChart: '',
- barChartData: [
- {
- 'value': '32',
- 'name': '401',
- 'productionCode': '125487318',
- 'productionId': '1729419336207761409'
- },
- {
- 'value': '23',
- 'name': '406',
- 'productionCode': '4212152142',
- 'productionId': '1729419361201618945'
- },
- {
- 'value': '11',
- 'name': '407',
- 'productionCode': '321321345',
- 'productionId': '1729419381665628161'
- },
- {
- 'value': '44',
- 'name': '408',
- 'productionCode': '536341343',
- 'productionId': '1729670118396067842'
- }
- ],
+ barChartData: [],
doubleBarChart: '',
doubleBarChartData: {},
efficiencyChartConfig: {},
@@ -141,13 +116,14 @@
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
this.getChartDataByApi()
+ this.drawProblemChart()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
+ /* 璋冪敤鎺ュ彛鑾峰彇鍥捐〃鏁版嵁姹囨�绘柟娉� */
getChartDataByApi() {
this.getRunningStateDataByApi()
this.getEfficiencyDataByApi()
@@ -155,12 +131,19 @@
this.getWarrantyMalfunctionDataByApi()
this.getMonthMaintenanceNumByApi()
this.getTwoMaintenanceChartDataByApi()
- // this.getBarChartDataByApi()
+ this.getBarChartDataByApi()
this.getDoubleBarChartDataByApi()
},
/* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
getRunningStateDataByApi() {
+ this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
+ this.runningStateChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentStatusStatisticsApi()
.then(res => {
if (res.success) this.runningStateData = res.result.list
@@ -170,6 +153,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鍒╃敤鐜� */
getEfficiencyDataByApi() {
+ this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
+ this.efficiencyChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentUtilizationStatisticsApi()
.then(res => {
if (res.success) this.efficiencyData = res.result
@@ -179,9 +169,16 @@
/* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
getTechConditionDataByApi() {
+ this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+ this.techConditionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentTechnologyStatusListApi()
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.techConditionData = [
{ value: res.result[0].qualifiedCount, name: '鍚堟牸' },
{ value: res.result[0].disabledCount, name: '绂佺敤' },
@@ -194,9 +191,16 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鎶ヤ慨鏁呴殰 */
getWarrantyMalfunctionDataByApi() {
+ this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+ this.warrantyMalfunctionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getReportRepairEquipmentListApi()
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.warrantyMalfunctionData = [
{ value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
{ value: res.result[0].stopCount, name: '鍋滄満' },
@@ -238,6 +242,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE缁熻 */
getBarChartDataByApi() {
+ this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+ this.barChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentOEEStatistics()
.then(res => {
if (res.success) this.barChartData = res.result
@@ -247,6 +258,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE鍜屽埄鐢ㄧ巼瀵规瘮 */
getDoubleBarChartDataByApi() {
+ this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
+ this.doubleBarChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentMonthStatisticsApi()
.then(res => {
if (res.success) this.doubleBarChartData = res.result
@@ -254,21 +272,8 @@
})
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawRunningStateChart()
- this.drawEfficiencyChart()
- this.drawTechConditionChart()
- this.drawWarrantyMalfunctionChart()
- this.drawMaintenanceChart()
- this.drawBarChart()
- this.drawDoubleBarChart()
- this.drawProblemChart()
- },
-
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
drawRunningStateChart(productionId) {
- this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
height: 300,
title: {
@@ -346,6 +351,7 @@
]
}
this.runningStateChart.setOption(option, true)
+ this.runningStateChart.hideLoading()
this.runningStateChart.on('click', params => {
this.$router.push({
@@ -357,7 +363,6 @@
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
drawEfficiencyChart() {
- this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
const data = this.efficiencyData
const colorArray = [
{
@@ -388,7 +393,13 @@
bottom: '#F7B7A0'
}
]
- const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
+ const defaultData = []
+ const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
+ let yAxisMax
+ if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1
+ else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛�
+ const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠�
+ data.forEach(item => defaultData.push(yAxisMax))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -431,6 +442,9 @@
}
},
show: true,
+ min: 0,
+ max: 'dataMax',
+ interval: yAxisInterval,
type: 'value',
axisTick: {
show: false
@@ -546,7 +560,7 @@
}
option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸
this.efficiencyChart.setOption(option, true)
-
+ this.efficiencyChart.hideLoading()
this.efficiencyChart.on('click', params => {
// 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
if (params.componentType === 'series') {
@@ -576,7 +590,6 @@
/* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
drawTechConditionChart() {
- this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
const option = {
height: 300,
title: {
@@ -651,11 +664,11 @@
]
}
this.techConditionChart.setOption(option, true)
+ this.techConditionChart.hideLoading()
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
drawWarrantyMalfunctionChart() {
- this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
const option = {
height: 300,
title: {
@@ -730,6 +743,7 @@
]
}
this.warrantyMalfunctionChart.setOption(option, true)
+ this.warrantyMalfunctionChart.hideLoading()
},
/* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
@@ -749,8 +763,13 @@
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
- const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
+ const defaultData = []
+ const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value
+ let yAxisMax
+ if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1
+ else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛�
+ const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠�
+ this.barChartData.forEach(item => defaultData.push(yAxisMax))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -812,7 +831,9 @@
}],
yAxis: [{
name: '%',
- max: 100,
+ min: 0,
+ max: yAxisMax,
+ interval: yAxisInterval,
axisLabel: {
formatter: '{value}',
color: '#e2e9ff'
@@ -868,6 +889,7 @@
}
option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE杞﹂棿`
this.barChart.setOption(option, true)
+ this.barChart.hideLoading()
this.barChart.on('click', params => {
console.log('params', params)
@@ -886,7 +908,6 @@
/* 缁樺埗鍙屾煴鍥� */
drawDoubleBarChart() {
- this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
const option = {
color: ['#409EFF', '#0FC61A'],
tooltip: {
@@ -1032,6 +1053,7 @@
]
}
this.doubleBarChart.setOption(option, true)
+ this.doubleBarChart.hideLoading()
},
/* 缁樺埗闂婊氬姩琛� */
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index 3a76eb1..83d0428 100644
--- a/src/views/dashboard/WorkshopSectionSignage.vue
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -73,19 +73,21 @@
<div style="width: 38%" class="middle-col">
<dv-border-box-9 style="padding: 15px">
<div id="running_state_chart" style="width:100%;height: 400px;"></div>
- <div id="line_chart" style="width:100%;height: 400px;"></div>
+ <div id="first7DaysEfficiency_chart" style="width:100%;height: 400px;"></div>
</dv-border-box-9>
</div>
<div style="width: 30%" class="right-col">
<dv-border-box-9 style="padding: 15px">
<a-form layout="inline"
- @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
+ @keyup.enter.native="switchToEquipmentSignage">
<a-form-item label="璁惧缂栧彿">
<a-auto-complete
- v-model="equipmentId"
+ @select="handleSelectChange"
placeholder="鍥炶溅閿煡璇�"
:allowClear="true"
+ :filter-option="filterOption"
+ :dataSource="first7DaysEfficiencyData.mdcEquipmentList.map(item=>item.equipmentId)"
size="large"
/>
</a-form-item>
@@ -145,8 +147,11 @@
maintenanceOverdueNum: 0,
nextMonthMaintenancePlanNum: 0,
nextNextMonthMaintenancePlanNum: 0,
- lineChart: '',
- lineChartData: {},
+ first7DaysEfficiencyChart: '',
+ first7DaysEfficiencyData: {
+ dataList: [],
+ mdcEquipmentList: []
+ },
gaugeChart1: '',
gaugeChart2: '',
gaugeChart3: '',
@@ -164,30 +169,37 @@
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
this.getChartDataByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
- if (this.lineChartCarouselTime) clearInterval(this.lineChartCarouselTime)
+ if (this.first7DaysEfficiencyChartCarouselTime) clearInterval(this.first7DaysEfficiencyChartCarouselTime)
},
methods: {
+ /* 璋冪敤鎺ュ彛鑾峰彇鍥捐〃鏁版嵁姹囨�绘柟娉� */
getChartDataByApi() {
this.getTechConditionDataByApi()
this.getWarrantyMalfunctionDataByApi()
this.getRunningStateDataByApi()
this.getMonthMaintenanceNumByApi()
- this.getLineChartDataByApi()
+ this.getFirst7DaysEfficiencyDataByApi()
this.getGaugeChartDataByApi()
this.getBarChartDataByApi()
},
/* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
getTechConditionDataByApi() {
+ this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+ this.techConditionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.techConditionData = [
{ value: res.result[0].qualifiedCount, name: '鍚堟牸' },
{ value: res.result[0].disabledCount, name: '绂佺敤' },
@@ -200,9 +212,16 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鎶ヤ慨鏁呴殰 */
getWarrantyMalfunctionDataByApi() {
+ this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+ this.warrantyMalfunctionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getReportRepairEquipmentListApi(this.productionCode)
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.warrantyMalfunctionData = [
{ value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
{ value: res.result[0].stopCount, name: '鍋滄満' },
@@ -235,6 +254,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
getRunningStateDataByApi() {
+ this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
+ this.runningStateChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
.then(res => {
if (res.success) this.runningStateData = res.result.list
@@ -243,26 +269,67 @@
},
/* 璋冪敤鎺ュ彛鑾峰彇鍓�7澶╁埄鐢ㄧ巼 */
- getLineChartDataByApi() {
+ getFirst7DaysEfficiencyDataByApi() {
+ this.first7DaysEfficiencyChart = this.$echarts.init(document.getElementById('first7DaysEfficiency_chart'))
+ this.first7DaysEfficiencyChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentDayUtilizationStatisticsApi(this.productionCode)
.then(res => {
- if (res.success) this.lineChartData = res.result
- this.drawLineChart()
+ if (res.success) this.first7DaysEfficiencyData = res.result
+ this.drawFirst7DaysEfficiencyDataChart()
})
},
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鏁堢巼缁熻 */
getGaugeChartDataByApi() {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ this.gaugeChart1.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart2.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart3.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart4.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentEfficiencyStatisticsApi(this.productionCode)
.then(res => {
- console.log('res=', res)
if (res.success) this.gaugeChartData = res.result
- this.drawGaugeChart(res.result.productionId)
+ this.drawGaugeChart()
})
},
/* 璋冪敤鎺ュ彛鑾峰彇涓婃湀OEE */
getBarChartDataByApi() {
+ this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+ this.barChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentOEEMonthStatisticsApi(this.productionCode)
.then(res => {
if (res.success) {
@@ -277,18 +344,8 @@
})
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawRunningStateChart()
- this.drawTechConditionChart()
- this.drawWarrantyMalfunctionChart()
- this.drawGaugeChart()
- this.drawBarChart()
- },
-
/* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
drawTechConditionChart() {
- this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -362,11 +419,11 @@
]
}
this.techConditionChart.setOption(option, true)
+ this.techConditionChart.hideLoading()
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
drawWarrantyMalfunctionChart() {
- this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -440,11 +497,11 @@
]
}
this.warrantyMalfunctionChart.setOption(option, true)
+ this.warrantyMalfunctionChart.hideLoading()
},
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
drawRunningStateChart(productionId) {
- this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -520,6 +577,7 @@
]
}
this.runningStateChart.setOption(option, true)
+ this.runningStateChart.hideLoading()
this.runningStateChart.on('click', params => {
this.$router.push({
@@ -529,35 +587,35 @@
})
},
- /* 缁樺埗鎶樼嚎鍥� */
- drawLineChart() {
- this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
- this.lineChartData.equipmentIdList.forEach(item => {
- if (!this.lineChartData.dataList.map(item => item.equipmentId).includes(item)) {
+ /* 缁樺埗鍓�7澶╁埄鐢ㄧ巼鏌卞浘 */
+ drawFirst7DaysEfficiencyDataChart() {
+ this.first7DaysEfficiencyData.mdcEquipmentList.forEach(item => {
+ if (!this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId).includes(item)) {
const equipmentIdObj = {
- equipmentId: item,
+ equipmentId: item.equipmentId,
+ equipmentName: item.equipmentName,
openRate: 0,
startRate: 0,
utilizationRate: 0
}
- this.lineChartData.dataList.push(equipmentIdObj)
+ this.first7DaysEfficiencyData.dataList.push(equipmentIdObj)
}
})
- const equipmentIdList = this.lineChartData.dataList.map(item => item.equipmentId)
+ const equipmentIdList = this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId)
const newData = {
xAxis: equipmentIdList,
yAxis: [
{
name: '鍒╃敤鐜�',
- value: this.lineChartData.dataList.map(item => item.utilizationRate)
+ value: this.first7DaysEfficiencyData.dataList.map(item => item.utilizationRate)
},
{
name: '寮�鍔ㄧ巼',
- value: this.lineChartData.dataList.map(item => item.startRate)
+ value: this.first7DaysEfficiencyData.dataList.map(item => item.startRate)
},
{
name: '寮�鏈虹巼',
- value: this.lineChartData.dataList.map(item => item.openRate)
+ value: this.first7DaysEfficiencyData.dataList.map(item => item.openRate)
}
],
yAxisName: '鍓�7澶╁埄鐢ㄧ巼(%)'
@@ -569,7 +627,7 @@
seriesData = newData.yAxis.map((item1, index1) => {
return {
name: item1.name,
- type: 'line',
+ type: 'bar',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
@@ -577,6 +635,9 @@
},
lineStyle: {
width: 2
+ },
+ markPoint: {
+ show: true
},
yAxisIndex: 1,
data: item1.value // 鎶樼嚎鍥剧殑鏁版嵁
@@ -618,7 +679,6 @@
}
},
xAxis: {
- triggerEvent: true,
data: newData.xAxis || [],
axisLabel: {
interval: 0,
@@ -669,6 +729,7 @@
type: 'value',
position: 'right',
splitNumber: 5,
+ max: 100,
axisLabel: {
show: true,
color: '#fff'
@@ -696,17 +757,40 @@
startValue: 0, // 浠庡ご寮�濮嬨��
endValue: 6 // 涓�娆℃�у睍绀哄嚑涓�
}
+ // toolbox: {
+ // show: true,
+ // feature: {
+ // mark: { show: true },
+ // magicType: { show: true, type: ['line', 'bar'] },
+ // restore: { show: true },
+ // saveAsImage: { show: true, name: '鍓�7澶╁埄鐢ㄧ巼缁熻鍥�', pixelRatio: 1 }
+ // }
+ // }
}
- this.lineChart.setOption(option, true)
+ this.first7DaysEfficiencyChart.setOption(option, true)
+ this.first7DaysEfficiencyChart.hideLoading()
- if (this.lineChartData.equipmentIdList.length <= 7) return
- this.lineChartCarouselTime = setInterval(() => {
+ this.first7DaysEfficiencyChart.on('click', params => {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: params.name,
+ tierName: this.first7DaysEfficiencyData.dataList.find(item => item.equipmentId === params.name).equipmentName
+ }
+ })
+ })
+
+
+ // 璁惧鍒楄〃澶т簬7涓椂寮�鍚嚜鍔ㄨ疆鎾�
+ if (this.first7DaysEfficiencyData.mdcEquipmentList.length <= 7) return
+ this.first7DaysEfficiencyChartCarouselTime = setInterval(() => {
newData.xAxis.push(newData.xAxis.shift())
newData.yAxis.forEach(item => item.value.push(item.value.shift()))
this.$nextTick(() => {
- this.lineChart.setOption(option, true)
+ this.first7DaysEfficiencyChart.setOption(option, true)
})
- }, 3000)
+ }, 30000)
},
/* 缁樺埗浠〃鐩樺浘琛� */
@@ -804,12 +888,12 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
drawGaugeChart1(opt) {
- this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
const option = Object.assign({}, opt)
option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + `鍒╃敤鐜嘸
option.series[0].name = '鍒╃敤鐜�'
option.series[0].data = [this.gaugeChartData.utilizationRate]
this.gaugeChart1.setOption(option, true)
+ this.gaugeChart1.hideLoading()
this.gaugeChart1.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -834,6 +918,7 @@
option.series[0].name = '寮�鍔ㄧ巼'
option.series[0].data = [this.gaugeChartData.startRate]
this.gaugeChart2.setOption(option, true)
+ this.gaugeChart2.hideLoading()
this.gaugeChart2.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -858,6 +943,7 @@
option.series[0].name = '寮�鏈虹巼'
option.series[0].data = [this.gaugeChartData.openRate]
this.gaugeChart3.setOption(option, true)
+ this.gaugeChart3.hideLoading()
this.gaugeChart3.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
@@ -882,17 +968,14 @@
option.series[0].name = 'OEE'
option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
this.gaugeChart4.setOption(option, true)
+ this.gaugeChart4.hideLoading()
this.gaugeChart4.getZr().on('click', params => {
// 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
this.$router.push({
- name: 'mdc-base-StatisticsChart',
- params: {
- isEquipment: false,
- productionId: this.gaugeChartData.productionId,
- tierName: this.gaugeChartData.productionName
- }
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: false, productionId: this.gaugeChartData.productionId }
})
}
})
@@ -900,7 +983,6 @@
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
const xAisData = this.barChartData.map(item => item.name)
const option = {
height: 260,
@@ -960,7 +1042,7 @@
}],
yAxis: [
{
- // name: '鏁伴噺',
+ name: '%',
// nameLocation: 'middle',
// nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
position: 'left',
@@ -1024,7 +1106,17 @@
}
option.title.text = `${moment().subtract(1, 'months').format('M')}鏈圤EE`
this.barChart.setOption(option, true)
+ this.barChart.hideLoading()
+ this.barChart.on('click', params => {
+ const productionId = params.name
+ this.$router.push({
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: true, productionId }
+ })
+ })
+
+ // 璁惧鍒楄〃澶т簬6涓椂寮�鍚嚜鍔ㄨ疆鎾�
if (this.barChartData.length <= 6) return
this.barChartCarouselTime = setInterval(() => {
this.barChartData.push(this.barChartData.shift())
@@ -1035,15 +1127,31 @@
}, 3000)
},
+ handleSelectChange(value) {
+ this.equipmentId = value
+ },
+
+ filterOption(input, option) {
+ return (
+ option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+ )
+ },
+
+ switchToEquipmentSignage() {
+ if (this.equipmentId) {
+ this.$emit('switchToNextSignage', {
+ signageName: 'Equipment',
+ productionCode: this.equipmentId
+ })
+ }
+ },
+
/**
* 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
* 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
*/
handleWindowResize() {
- if (this.techConditionChart) this.techConditionChart.resize()
- if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
- if (this.runningStateChart) this.runningStateChart.resize()
- if (this.lineChart) this.lineChart.resize()
+ if (this.first7DaysEfficiencyChart) this.first7DaysEfficiencyChart.resize()
if (this.gaugeChart1) this.gaugeChart1.resize()
if (this.gaugeChart2) this.gaugeChart2.resize()
if (this.gaugeChart3) this.gaugeChart3.resize()
@@ -1128,6 +1236,10 @@
color: #fff;
}
+ /deep/ .ant-select {
+ color: #fff;
+ }
+
/deep/ .ant-input {
border: 1px solid #689ACA;
color: #fff;
diff --git a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
index 90fddfd..7cb1658 100644
--- a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
+++ b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
@@ -609,10 +609,14 @@
const { isEquipment, productionId, tierName } = this.$route.params
// 鍒ゆ柇鏄惁鏄粠鐪嬫澘璺宠浆杩囨潵锛宲roductionId 瀛樺湪鍒欎负浠庣湅鏉胯烦杞�
if (productionId) {
- _this.$set(this.queryParam, 'tierName', tierName)
// 鍒ゆ柇鏄惁鐐瑰嚮鐨勬槸璁惧灞傜骇
- if (!isEquipment) _this.$set(this.queryParams, 'parentId', productionId)
- else _this.$set(this.queryParams, 'equipmentId', productionId)
+ if (!isEquipment) {
+ _this.$set(this.queryParams, 'parentId', productionId)
+ _this.$set(this.queryParam, 'tierName', tierName)
+ } else {
+ _this.$set(this.queryParams, 'equipmentId', productionId)
+ _this.$set(this.queryParam, 'tierName', productionId + '/' + tierName)
+ }
} else {
if (res.result[0]) {
_this.$set(this.queryParam, 'tierName', res.result[0].title)
diff --git a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue
index 6e3e8fe..250d167 100644
--- a/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue
+++ b/src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue
@@ -1,43 +1,43 @@
<template>
<div class="deviceCalendar_list">
- <!-- 鏌ヨ鍖哄煙 -->
- <div>
- <div class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="searchQuery">
- <a-row :gutter="24" style="width: 100%">
- <a-col :md="6" :sm="6">
- <a-form-item label="鏃堕棿">
- <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
- </a-form-item>
- </a-col>
- <a-col :md="2" :sm="2" :xs="2">
- <a-space>
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
- <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>
- </a-space>
- </a-col>
- <!--<a-col :md="2" :sm="2" :xs="2">-->
- <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>-->
- <!--</a-col>-->
- <!--<a-col :md="2" :sm="2">-->
- <!--<!–//娌堥–>-->
- <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>-->
+ <!-- 鏌ヨ鍖哄煙 -->
+ <div>
+ <div class="table-page-search-wrapper">
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-row :gutter="24" style="width: 100%">
+ <a-col :md="6" :sm="6">
+ <a-form-item label="鏃堕棿">
+ <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="2" :sm="2" :xs="2">
+ <a-space>
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>
+ </a-space>
+ </a-col>
+ <!--<a-col :md="2" :sm="2" :xs="2">-->
+ <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>-->
+ <!--</a-col>-->
+ <!--<a-col :md="2" :sm="2">-->
+ <!--<!–//娌堥–>-->
+ <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>-->
- <!--<!–<a-button type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>–>-->
- <!--</a-col>-->
+ <!--<!–<a-button type="primary" @click="handleAdd" icon="plus">閰嶇疆</a-button>–>-->
+ <!--</a-col>-->
- </a-row>
- </a-form>
- </div>
+ </a-row>
+ </a-form>
</div>
+ </div>
- <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
- <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
- size="middle" rowKey="id" :columns="columns"
- @change="handleTableChange" class="ant-table-striped"
- :dataSource="dataSource" :pagination="ipagination"
- :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
+ <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
+ <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
+ size="middle" rowKey="id" :columns="columns"
+ @change="handleTableChange" class="ant-table-striped"
+ :dataSource="dataSource" :pagination="ipagination"
+ :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
<span slot="action"
slot-scope="text, record">
<a-popconfirm
@@ -47,19 +47,19 @@
<a>鍒犻櫎</a>
</a-popconfirm>
</span>
- <span slot="isDaySpan" slot-scope="text, record">
+ <span slot="isDaySpan" slot-scope="text, record">
<span v-if="text == 'true'">鏄�</span>
<span v-if="text == 'false'">鍚�</span>
</span>
- </a-table>
- </div>
- <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
+ </a-table>
+ </div>
+ <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
</div>
</template>
<script>
import moment from 'moment'
- import { filterObj } from '@/utils/util';
+ import { filterObj } from '@/utils/util'
import { putAction, getAction } from '@/api/manage'
import DeviceCalendarModel from './DeviceCalendarModel'
import DeviceCalendarAdd from './DeviceCalendarAdd'
@@ -70,23 +70,23 @@
export default {
name: 'DeviceCalendarList',
- components: { DeviceCalendarModel,DeviceCalendarAdd ,DeviceCalendarListModel},
+ components: { DeviceCalendarModel, DeviceCalendarAdd, DeviceCalendarListModel },
mixins: [JeecgListMixin],
data() {
return {
- dates:[],
+ dates: [],
yearAndMonth: {},
identifying: [],
queryParam: {},
disableMixinCreated: true,
- scrollY:465,
+ scrollY: 465,
/* 鍒嗛〉鍙傛暟 */
- ipagination:{
+ ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
- return range[0] + "-" + range[1] + " 鍏�" + total + "鏉�"
+ return range[0] + '-' + range[1] + ' 鍏�' + total + '鏉�'
},
showQuickJumper: true,
showSizeChanger: true,
@@ -97,98 +97,101 @@
title: '鏃ユ湡',
align: 'center',
dataIndex: 'effectiveDate',
- width:100,
+ width: 100
},
{
title: '璁惧缂栧彿',
align: 'center',
dataIndex: 'equipmentId',
- width:150
+ width: 150
},
{
title: '璁惧鍚嶇О',
align: 'center',
dataIndex: 'equipmentName',
- width:150
+ width: 150
},
{
title: '鐝埗',
align: 'center',
dataIndex: 'shiftName',
- width:150
+ width: 150
},
{
title: '鐝',
align: 'center',
dataIndex: 'shiftSubName',
- width:150
+ width: 150
},
{
title: '寮�濮嬫椂闂�',
align: 'center',
dataIndex: 'startDate',
- width:140
+ width: 140
},
{
title: '缁撴潫鏃堕棿',
align: 'center',
dataIndex: 'endDate',
- width:140
+ width: 140
},
{
title: '鏄惁璺ㄥぉ',
align: 'center',
dataIndex: 'isDaySpan',
scopedSlots: { customRender: 'isDaySpan' },
- width:100
+ width: 100
},
{
title: '寮�濮嬩紤鎭椂闂�',
align: 'center',
dataIndex: 'sleepStartDate',
- width:140
+ width: 140
},
{
title: '缁撴潫浼戞伅鏃堕棿',
align: 'center',
dataIndex: 'sleepEndDate',
- width:140
+ width: 140
},
{
title: '鎿嶄綔',
dataIndex: 'action',
- align: "center",
+ align: 'center',
width: 100,
scopedSlots: { customRender: 'action' },
- fixed:'right'
+ fixed: 'right'
}
],
checkedList: ['lyl'],
dataList: [],
url: {
list: '/mdc/mdcDeviceCalendar/list',
- delete:'/mdc/mdcDeviceCalendar/delete'
+ delete: '/mdc/mdcDeviceCalendar/delete'
}
}
},
- props: { node: {}, Type:'' },
+ props: { node: {}, Type: '' },
created() {
+ const { equipmentId } = this.$route.params
+ if (equipmentId) this.queryParam.equipmentId = equipmentId
+
this.dates = [moment().subtract('days', 0), moment().subtract('days', 0)]
this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
- this.queryParam.typeTree = "1"
+ this.queryParam.typeTree = '1'
this.loadData()
},
- mounted(){
- window.addEventListener('resize',this.handleWindowResize)
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
this.handleWindowResize()
},
- beforeDestroy(){
- window.removeEventListener('resize',this.handleWindowResize)
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleWindowResize)
},
watch: {
- Type(valmath){
- this.dataList = [];
+ Type(valmath) {
+ this.dataList = []
this.queryParam.typeTree = valmath
// console.log(this.queryParams.typeTree)
},
@@ -196,7 +199,7 @@
if (JSON.stringify(val) != '{}') {
if (val.equipmentId != null) {
this.queryParam.equipmentId = val.equipmentId
- this.queryParam.parentId = " "
+ this.queryParam.parentId = ' '
this.ipagination.current = 1
this.loadData()
} else {
@@ -221,41 +224,40 @@
this.loadData()
},
loadData(arg) {
- this.dataSource = [];
- if(!this.url.list){
- this.$message.error("璇疯缃畊rl.list灞炴��!")
+ this.dataSource = []
+ if (!this.url.list) {
+ this.$message.error('璇疯缃畊rl.list灞炴��!')
return
}
//鍔犺浇鏁版嵁 鑻ヤ紶鍏ュ弬鏁�1鍒欏姞杞界涓�椤电殑鍐呭
if (arg === 1) {
- this.ipagination.current = 1;
+ this.ipagination.current = 1
}
- var params = this.getQueryParams();//鏌ヨ鏉′欢
+ var params = this.getQueryParams()//鏌ヨ鏉′欢
- if(!params){
- return false;
+ if (!params) {
+ return false
}
- params.startTime = this.queryParam.startTime;
- params.endTime = this.queryParam.endTime;
- params.parentId = this.queryParam.parentId;
- params.equipmentId = this.queryParam.equipmentId;
- params.orderByName = "ascend";
- this.loading = true;
+ params.startTime = this.queryParam.startTime
+ params.endTime = this.queryParam.endTime
+ params.parentId = this.queryParam.parentId
+ params.equipmentId = this.queryParam.equipmentId
+ params.orderByName = 'ascend'
+ this.loading = true
getAction(this.url.list, params).then((res) => {
if (res.success) {
// console.log(res)
//update-begin---author:zhangyafei Date:20201118 for锛氶�傞厤涓嶅垎椤电殑鏁版嵁鍒楄〃------------
- this.dataSource = res.result.records||res.result;
- if(res.result.total)
- {
- this.ipagination.total = res.result.total;
- }else{
- this.ipagination.total = 0;
+ this.dataSource = res.result.records || res.result
+ if (res.result.total) {
+ this.ipagination.total = res.result.total
+ } else {
+ this.ipagination.total = 0
}
//update-end---author:zhangyafei Date:20201118 for锛氶�傞厤涓嶅垎椤电殑鏁版嵁鍒楄〃------------
- }else{
+ } else {
this.$message.warning(res.message)
}
}).finally(() => {
@@ -265,51 +267,55 @@
handleAdd() {
let record = {}
if (JSON.stringify(this.node) != '{}') {
- record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName }
+ record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName }
}
this.$refs.modalForm.add(record)
this.$refs.modalForm.title = '璁惧宸ヤ綔鏃ュ巻閰嶇疆'
this.$refs.modalForm.disableSubmit = false
},
- handleWindowResize(){
- const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
- const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
+ handleWindowResize() {
+ const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
+ const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
this.scrollY = boxHeight - tableHeadHeight - 50
}
}
}
</script>
<style scoped>
- .deviceCalendar_list{
+ .deviceCalendar_list {
overflow: hidden;
display: flex;
flex-direction: column;
}
- @media screen and (min-width: 1920px){
- .deviceCalendar_list{
- height: 812px!important;
+ @media screen and (min-width: 1920px) {
+ .deviceCalendar_list {
+ height: 812px !important;
}
}
- @media screen and (min-width: 1680px) and (max-width: 1920px){
- .deviceCalendar_list{
- height: 812px!important;
+
+ @media screen and (min-width: 1680px) and (max-width: 1920px) {
+ .deviceCalendar_list {
+ height: 812px !important;
}
}
- @media screen and (min-width: 1400px) and (max-width: 1680px){
- .deviceCalendar_list{
- height: 664px!important;
+
+ @media screen and (min-width: 1400px) and (max-width: 1680px) {
+ .deviceCalendar_list {
+ height: 664px !important;
}
}
- @media screen and (min-width: 1280px) and (max-width: 1400px){
- .deviceCalendar_list{
- height: 565px!important;
+
+ @media screen and (min-width: 1280px) and (max-width: 1400px) {
+ .deviceCalendar_list {
+ height: 565px !important;
}
}
- @media screen and (max-width: 1280px){
- .deviceCalendar_list{
- height: 565px!important;
+
+ @media screen and (max-width: 1280px) {
+ .deviceCalendar_list {
+ height: 565px !important;
}
}
--
Gitblit v1.9.3