From f3bb7fe75f594f77ff6c169da7b04c523b49c607 Mon Sep 17 00:00:00 2001 From: Lius <Lius2225@163.com> Date: 星期三, 13 十二月 2023 15:46:56 +0800 Subject: [PATCH] 弹窗调整 --- src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 120 +++++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 91 insertions(+), 29 deletions(-) diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue index 479b163..dfbbc21 100644 --- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue +++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue @@ -58,7 +58,8 @@ <!--</div>--> <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:168}" :customRow="customRow" - rowKey="alarmCode"> + rowKey="alarmCode" + > <span slot="timeCount" slot-scope="text">{{getFormattedTime(text)}}</span> <!--<a-table--> <!--slot="expandedRowRender"--> @@ -66,15 +67,19 @@ <!--:columns="innerColumns"--> <!--:data-source="row.innerDataList"--> <!--:pagination="false"--> + <!--rowKey="equipmentId"--> <!-->--> <!--<span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span>--> <!--</a-table>--> </a-table> </div> - <div style="width: 100%;height: 55%;display: flex;"> - <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div> - <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div> - </div> + + <a-spin :spinning="spinning"> + <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> + </div> + </a-spin> </div> </div> </div> @@ -126,6 +131,7 @@ dataSource: [], /* table鍔犺浇鐘舵�� */ loading: false, + spinning:false, typeTree: '', typeParent: 1, typeEquipment: 1, @@ -226,23 +232,21 @@ }, TableDraw(key, val) { let that = this + that.spinning=true that.queryParam.alarmCode = val.alarmCode console.log(this.queryParam) - that.pieDate = [] - that.XData = [] - that.YData = [] - getAction(that.url.alarmTrend, that.queryParam).then(res => { + getAction(that.url.alarmTrend, that.queryParam) + .then(res => { if (res.success) { - for (var i = 0; i < res.result.equipmentCountList.length; i++) { - that.pieDate.push({ - name: res.result.equipmentCountList[i].key, - value: res.result.equipmentCountList[i].count - }) - } - for (var j = 0; j < res.result.dateCountList.length; j++) { - that.XData.push(res.result.dateCountList[j].key) - that.YData.push(res.result.dateCountList[j].count) - } + 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() @@ -254,6 +258,9 @@ that.drawWrin() } }) + .finally(()=>{ + that.spinning=false + }) console.log(this.YData) }, @@ -387,15 +394,31 @@ if (res.success) { // this.tableHeads = res.result.dates this.dataList = res.result - this.dataList.forEach(item => item.innerDataList = [ + 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.draw() // this.checkSameData(this.dataList) // this.checkSameData1(this.dataList) @@ -521,23 +544,26 @@ /** * 鏍煎紡鍖栨椂闂� * @param seconds 绉掓暟 - * @returns 鏍煎紡鍖栧悗鏃堕棿瀛楃涓� + * @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}绉抈 + 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) { + if (minutes === 0 && secs === 0) { return `${hours}灏忔椂` - } else if (minutes != 0 && secs == 0) { + } else if (minutes !== 0 && secs === 0) { return `${hours}灏忔椂 ${minutes}鍒哷 } } @@ -553,10 +579,37 @@ customRow(record, index) { return { on: { - click: () => { - this.TableDraw(index, record) + click: (event) => { + // 濡傛灉鐐瑰嚮鐨勪笉鏄睍寮�鍥炬爣鍖哄煙鍒欐覆鏌撳浘琛紝鐩稿弽鍒欑浉褰撲簬鐐瑰嚮灞曞紑鍥炬爣 + 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() + } } } + } + }, + + /** + * 鑷畾涔夊睍寮�琛ㄦ牸鍥炬爣 + * @param props 鍥炬爣灞炴�� + * @returns {null} 鑻ヤ富琛ㄦ暟鎹笅鏃犳暟鎹垯涓嶆樉绀哄浘鏍� + */ + 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 } } } @@ -781,4 +834,13 @@ padding-bottom: 10px; cursor: pointer; } + + /deep/ .ant-spin-nested-loading{ + height: 55%; + } + + /deep/ .ant-spin-container{ + height: 100%; + } + </style> \ No newline at end of file -- Gitblit v1.9.3