From 547aab154e85a9a89f1e320f92bd43854d10faeb Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 14 十二月 2023 14:12:45 +0800
Subject: [PATCH] 1、调整车间看板页面详情弹窗描述列表内容字段 2、报警分析页面在原有表格中为每个报警号增加子表格，内容为出现此报警号的设备ID以及报警时间等 3、报警分析页面表格请求数据设置加载中动画 4、调整设备参数阈值管理页面添加或编辑阈值上下限输入框为数字输入框，避免上下限数字比较大小时出现问题
---
src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 252 ++++++++++++++++++++++++++------------------------
1 files changed, 131 insertions(+), 121 deletions(-)
diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
index dfbbc21..7150831 100644
--- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
+++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
@@ -56,25 +56,27 @@
<!--</table>-->
<!--</div>-->
<!--</div>-->
- <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:168}"
+ <!--<a-spin :spinning=""></a-spin>-->
+ <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:210}"
:customRow="customRow"
- rowKey="alarmCode"
+ rowKey="alarmCode" @expand="handleExpandChange" :loading="outerDataLoading"
>
- <span slot="timeCount" slot-scope="text">{{getFormattedTime(text)}}</span>
- <!--<a-table-->
- <!--slot="expandedRowRender"-->
- <!--slot-scope="row"-->
- <!--:columns="innerColumns"-->
- <!--:data-source="row.innerDataList"-->
- <!--:pagination="false"-->
- <!--rowKey="equipmentId"-->
- <!-->-->
- <!--<span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span>-->
- <!--</a-table>-->
+ <span slot="timeCount" slot-scope="text">{{text | getFormattedTime}}</span>
+ <a-table
+ slot="expandedRowRender"
+ slot-scope="row"
+ :columns="innerColumns"
+ :data-source="row.innerDataList"
+ :pagination="false"
+ rowKey="rowIndex"
+ :loading="innerDataLoading"
+ >
+ <span slot="duration" slot-scope="text">{{text | getFormattedTime}}</span>
+ </a-table>
</a-table>
</div>
- <a-spin :spinning="spinning">
+ <a-spin :spinning="echartLoading">
<div style="width: 100%;height: 100%;display: flex;">
<div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
<div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
@@ -97,21 +99,32 @@
const columns = [
{ title: '鎶ヨ鍙�', dataIndex: 'alarmCode', key: 'alarmCode', align: 'center' },
- { title: '鍑虹幇娆℃暟', dataIndex: 'count', key: 'count', align: 'center' },
+ { title: '鍑虹幇娆℃暟', dataIndex: 'count', key: 'count', align: 'center', sorter: (a, b) => b.count - a.count },
{
title: '鍚堣鎸佺画鏃堕棿',
dataIndex: 'timeCount',
key: 'timeCount',
scopedSlots: { customRender: 'timeCount' },
- align: 'center'
+ align: 'center',
+ sorter: (a, b) => b.timeCount - a.timeCount
},
- { title: '鎶ヨ淇℃伅', dataIndex: 'alarmContent', key: 'alarmContent', align: 'center' }
+ { title: '鎶ヨ淇℃伅', dataIndex: 'alarmContent', key: 'alarmContent', align: 'center', ellipsis: true }
]
const innerColumns = [
+ {
+ title: '',
+ dataIndex: 'rowIndex',
+ key: 'rowIndex',
+ width: 60,
+ align: 'center',
+ customRender: function(t, r, index) {
+ return parseInt(index) + 1
+ }
+ },
{ title: '璁惧缂栧彿', dataIndex: 'equipmentId', key: 'equipmentId', align: 'center' },
{ title: '璁惧鍚嶇О', dataIndex: 'equipmentName', key: 'equipmentName', align: 'center' },
- { title: '鎶ヨ鏃堕棿', dataIndex: 'alarmTime', key: 'alarmTime', align: 'center' },
+ { title: '鎶ヨ鏃堕棿', dataIndex: 'startTime', key: 'startTime', align: 'center' },
{ title: '缁撴潫鏃堕棿', dataIndex: 'endTime', key: 'endTime', align: 'center' },
{
title: '鎸佺画鏃堕棿',
@@ -130,8 +143,9 @@
return {
dataSource: [],
/* table鍔犺浇鐘舵�� */
- loading: false,
- spinning:false,
+ outerDataLoading: false,
+ innerDataLoading: false,
+ echartLoading: false,
typeTree: '',
typeParent: 1,
typeEquipment: 1,
@@ -157,14 +171,16 @@
url: {
efficiencyList: '/mdc/alarmAnalyze/alarmList',
listByType: '/mdc/MdcUtilizationRate/getByType',
- alarmTrend: '/mdc/alarmAnalyze/alarmTrend'
+ alarmTrend: '/mdc/alarmAnalyze/alarmTrend',
+ equipmentAlarmList: '/mdc/alarmAnalyze/equipmentAlarmList'
},
tableHeads: [],
pieDate: [0],
XData: [0],
YData: [0],
columns,
- innerColumns
+ innerColumns,
+ hasRequsetAlarmCodeList: []
}
},
props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -220,6 +236,35 @@
} else {
return '0'
}
+ },
+
+ /**
+ * 鏍煎紡鍖栨椂闂�
+ * @param seconds 绉掓暟
+ * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓�
+ */
+ getFormattedTime(seconds) {
+ var hours = Math.floor(seconds / 3600)
+ var minutes = Math.floor((seconds % 3600) / 60)
+ var secs = seconds % 60
+
+ if (hours === 0) {
+ if (minutes === 0) {
+ return secs === 0 ? 0 : `${secs}绉抈
+ } else {
+ if (secs === 0) {
+ return `${minutes}鍒哷
+ }
+ return `${minutes}鍒� ${secs}绉抈
+ }
+ } else {
+ if (minutes === 0 && secs === 0) {
+ return `${hours}灏忔椂`
+ } else if (minutes !== 0 && secs === 0) {
+ return `${hours}灏忔椂 ${minutes}鍒哷
+ }
+ }
+ return `${hours}灏忔椂 ${minutes}鍒� ${secs}绉抈
}
},
methods: {
@@ -232,34 +277,34 @@
},
TableDraw(key, val) {
let that = this
- that.spinning=true
+ that.echartLoading = true
that.queryParam.alarmCode = val.alarmCode
console.log(this.queryParam)
getAction(that.url.alarmTrend, that.queryParam)
.then(res => {
- if (res.success) {
- that.pieDate=res.result.equipmentCountList.map(item=>{
- return {
- name:item.key,
- value:item.count
- }
- })
- that.XData=res.result.dateCountList.map(item=>item.key)
- that.YData=res.result.dateCountList.map(item=>item.count)
+ if (res.success) {
+ that.pieDate = res.result.equipmentCountList.map(item => {
+ return {
+ name: item.key,
+ value: item.count
+ }
+ })
+ that.XData = res.result.dateCountList.map(item => item.key)
+ that.YData = res.result.dateCountList.map(item => item.count)
- // this.tableHeads = res.result.dates
- // this.dataList = res.result
- // this.draw()
- // this.checkSameData(this.dataList)
- // this.checkSameData1(this.dataList)
- // this.checkSameData2(this.dataList)
- // this.combineCell();
- // this.initDeviceType(this.dataList)
- that.drawWrin()
- }
- })
- .finally(()=>{
- that.spinning=false
+ // this.tableHeads = res.result.dates
+ // this.dataList = res.result
+ // this.draw()
+ // this.checkSameData(this.dataList)
+ // this.checkSameData1(this.dataList)
+ // this.checkSameData2(this.dataList)
+ // this.combineCell();
+ // this.initDeviceType(this.dataList)
+ that.drawWrin()
+ }
+ })
+ .finally(() => {
+ that.echartLoading = false
})
console.log(this.YData)
@@ -388,37 +433,14 @@
// }
// }
loadData1() {
+ this.outerDataLoading = true
this.tableHeads = []
this.dataList = []
getAction(this.url.efficiencyList, this.queryParam).then(res => {
if (res.success) {
// this.tableHeads = res.result.dates
this.dataList = res.result
- this.dataList[0].innerDataList=[
- {
- equipmentId: '11234',
- equipmentName: '绔嬩綋鏈哄簥',
- alarmTime: 20,
- endTime: 20,
- duration: 123
- },
- {
- equipmentId: '4213',
- equipmentName: '鍗у鏈哄簥',
- alarmTime: 312,
- endTime: 31,
- duration: 421
- }
- ]
- this.dataList[1].innerDataList=[
- {
- equipmentId: '4213',
- equipmentName: '鍗у鏈哄簥',
- alarmTime: 312,
- endTime: 31,
- duration: 421
- }
- ]
+ this.hasRequsetAlarmCodeList = []
// this.draw()
// this.checkSameData(this.dataList)
// this.checkSameData1(this.dataList)
@@ -427,6 +449,8 @@
// this.initDeviceType(this.dataList)
}
+ }).finally(() => {
+ this.outerDataLoading = false
})
},
drawWrin() {
@@ -542,35 +566,6 @@
},
/**
- * 鏍煎紡鍖栨椂闂�
- * @param seconds 绉掓暟
- * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓�
- */
- getFormattedTime(seconds) {
- var hours = Math.floor(seconds / 3600)
- var minutes = Math.floor((seconds % 3600) / 60)
- var secs = seconds % 60
-
- if (hours === 0) {
- if (minutes === 0 ) {
- return secs === 0 ? 0 : `${secs}绉抈
- } else {
- if(secs=== 0 ){
- return `${minutes}鍒哷
- }
- return `${minutes}鍒� ${secs}绉抈
- }
- } else {
- if (minutes === 0 && secs === 0) {
- return `${hours}灏忔椂`
- } else if (minutes !== 0 && secs === 0) {
- return `${hours}灏忔椂 ${minutes}鍒哷
- }
- }
- return `${hours}灏忔椂 ${minutes}鍒� ${secs}绉抈
- },
-
- /**
* 鑷畾涔夎〃鏍艰瑙﹀彂
* @param record 褰撳墠琛屼俊鎭�
* @param index 褰撳墠琛屼笅鏍�
@@ -581,10 +576,10 @@
on: {
click: (event) => {
// 濡傛灉鐐瑰嚮鐨勪笉鏄睍寮�鍥炬爣鍖哄煙鍒欐覆鏌撳浘琛紝鐩稿弽鍒欑浉褰撲簬鐐瑰嚮灞曞紑鍥炬爣
- if(event.target.className !== 'ant-table-row-expand-icon-cell'){
+ if (event.target.className !== 'ant-table-row-expand-icon-cell') {
this.TableDraw(index, record)
- }else{
- if(event.target.children && event.target.children.length>0) event.target.children[0].click()
+ } else {
+ if (event.target.children && event.target.children.length > 0) event.target.children[0].click()
}
}
}
@@ -592,24 +587,29 @@
},
/**
- * 鑷畾涔夊睍寮�琛ㄦ牸鍥炬爣
- * @param props 鍥炬爣灞炴��
- * @returns {null} 鑻ヤ富琛ㄦ暟鎹笅鏃犳暟鎹垯涓嶆樉绀哄浘鏍�
+ * 鑷畾涔夎〃鏍艰瑙﹀彂
+ * @param expanded 褰撳墠琛屾槸鍚︿负灞曞紑鐘舵��
+ * @param record 褰撳墠琛屼俊鎭�
*/
- expandIcon(props){
- console.log('props',props)
- if (props.record.innerDataList&&props.record.innerDataList.length>0){
- if (props.expanded) {
- return <a style="margin-right:0px;color:#999" onClick={e=> {
- props.onExpand(props.record, e);
- }}><a-icon type="minus" /></a>
- } else{
- return <a style="margin-right:0px;color:#999" onClick={e => {
- props.onExpand(props.record, e);
- }}><a-icon type="plus"/></a>
- }
- }else{
- return null
+ handleExpandChange(expanded, record) {
+ let _this = this
+ // 褰撳睍寮�鏃惰嫢璇ヨ鏈灞曞紑杩囨墠浼氳姹傚悗鍙版暟鎹紝灞曞紑杩囩殑鏁版嵁浼氳缂撳瓨鏃犻渶閲嶅璇锋眰
+ const param = Object.assign({ alarmCode: record.alarmCode }, this.queryParam)
+ if (expanded && !this.hasRequsetAlarmCodeList.includes(record.alarmCode)) {
+ this.innerDataLoading = true
+ getAction(this.url.equipmentAlarmList, param).then(res => {
+ if (res.success) {
+ _this.dataList.forEach(item => {
+ if (item.alarmCode === record.alarmCode) {
+ item.innerDataList = res.result
+ }
+ })
+ _this.hasRequsetAlarmCodeList.push(record.alarmCode)
+ }
+ })
+ .finally(() => {
+ _this.innerDataLoading = false
+ })
}
}
}
@@ -832,15 +832,25 @@
/deep/ .ant-table-body .ant-table-row td {
padding-top: 10px;
padding-bottom: 10px;
+ }
+
+ /deep/ .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > .ant-table-row td {
cursor: pointer;
}
- /deep/ .ant-spin-nested-loading{
+ /deep/ .ant-spin-nested-loading {
height: 55%;
}
- /deep/ .ant-spin-container{
+ /deep/ .ant-spin-container {
height: 100%;
}
+ /deep/ .ant-table.ant-table-bordered {
+ height: 265px;
+ }
+
+ /deep/ .ant-table-scroll > .ant-table-placeholder {
+ height: 210px;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3