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/EquipmentSignage.vue | 109 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 98 insertions(+), 11 deletions(-)
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 9345f9f..82d1682 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -189,15 +189,22 @@
</dv-border-box-12>
</div>
</div>
+
+ <SignageModal ref="modalRef" :modalVisible="modalVisible" :modalWidth="modalWidth" :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: 'EquipmentSignage',
+ components: { SignageModal },
props: {
productionCode: {
type: String,
@@ -220,18 +227,24 @@
equipmentDetails: {},
buttonList: [
{
- label: '澶囦欢淇℃伅'
+ label: '澶囦欢淇℃伅',
+ pageName: '',
+ modalDataApiUrl: ''
},
{
- label: '淇濆吇璁″垝'
+ label: '淇濆吇璁″垝',
+ pageName: '',
+ modalDataApiUrl: '/eam/equipment/list'
},
{
label: '鎶ヤ慨',
- pageName: 'eam-MalfunctionRepair'
+ pageName: 'eam-MalfunctionRepair',
+ modalDataApiUrl: ''
},
{
label: '璁惧鐝',
- pageName: 'mdc-base-DeviceCalendar'
+ pageName: 'mdc-base-DeviceCalendar',
+ modalDataApiUrl: ''
}
],
lineChart: '',
@@ -249,7 +262,13 @@
},
hideLoadingDelayTime: 500,
isDisplayEquipmentDetails: false,
- isBelongToMdc: true// 鏄惁鍦╩dc璁惧琛ㄤ腑
+ isBelongToMdc: true,// 鏄惁鍦╩dc璁惧琛ㄤ腑
+ modalVisible: false,
+ modalWidth: 1048,
+ modalTitle: '',
+ modalDataApiUrl: '',
+ modalTableColumns: [],
+ modalDataApiParams: {}
}
},
created() {
@@ -276,9 +295,10 @@
if (newVal) this.lineChartWidth = '40%'
else this.lineChartWidth = '65%'
this.$nextTick(() => {
- this.lineChart.resize()
+ if (this.lineChart) this.lineChart.resize()
})
- }
+ },
+ immediate: true
}
},
methods: {
@@ -374,6 +394,66 @@
name: record.pageName,
params: { equipmentId: this.equipmentId }
})
+ } else {
+ this.$refs.modalRef.modalTableColumns = [
+ {
+ title: '#',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 60,
+ align: 'center',
+ customRender: function(t, r, index) {
+ return parseInt(index) + 1
+ }
+ },
+ {
+ width: 150,
+ align: 'center',
+ title: '璁惧缂栧彿',
+ dataIndex: 'num',
+ key: 'num'
+ },
+ {
+ width: 200,
+ align: 'center',
+ title: '璁惧鍚嶇О',
+ dataIndex: 'name',
+ key: 'name'
+ },
+ {
+ width: 200,
+ align: 'center',
+ title: '璁惧鍨嬪彿',
+ dataIndex: 'model',
+ key: 'model'
+ },
+ {
+ width: 250,
+ align: 'center',
+ title: '瑙勬牸',
+ key: 'specification',
+ dataIndex: 'specification'
+ },
+ {
+ width: 170,
+ align: 'center',
+ title: '涓嬫浜屼繚鏃堕棿',
+ key: 'nextSecondMaintenanceTime',
+ dataIndex: 'nextSecondMaintenanceTime'
+ },
+ {
+ width: 170,
+ align: 'center',
+ title: '涓嬫涓変繚鏃堕棿',
+ key: 'nextThirdMaintenanceTime',
+ dataIndex: 'nextThirdMaintenanceTime'
+ }
+ ]
+ this.modalWidth = 1248
+ this.modalTitle = record.label
+ this.modalDataApiParams = { num: this.equipmentId }
+ this.modalDataApiUrl = record.modalDataApiUrl
+ this.modalVisible = true
}
},
@@ -569,7 +649,7 @@
drawGaugeChart2(opt) {
const option = Object.assign({}, opt)
- signageApi.getGaugeColorByTypeApi('lyl')
+ signageApi.getGaugeColorByTypeApi('kdl')
.then(res => {
if (res.success) {
const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
@@ -603,7 +683,7 @@
drawGaugeChart3(opt) {
const option = Object.assign({}, opt)
- signageApi.getGaugeColorByTypeApi('lyl')
+ signageApi.getGaugeColorByTypeApi('kdl')
.then(res => {
if (res.success) {
const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
@@ -696,6 +776,13 @@
itemStyle: {
color: colorArr[index1]
},
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: 'inherit'
+ }
+ },
lineStyle: {
width: 2
},
@@ -765,7 +852,7 @@
nameTextStyle: {
color: '#1AD8DE',
fontSize: 18,
- padding: [0, 0, 0, 110]
+ padding: [0, 0, 0, 120]
},
nameGap: 25,
type: 'value',
@@ -788,7 +875,7 @@
},
{
type: 'value',
- position: 'right',
+ position: 'left',
splitNumber: 5,
max: 100,
axisLabel: {
--
Gitblit v1.9.3