From f67b4c736c68cd3d1f75e5fc6b6e23189f12b979 Mon Sep 17 00:00:00 2001 From: Lius <Lius2225@163.com> Date: 星期二, 19 十二月 2023 11:34:57 +0800 Subject: [PATCH] 设备管理增加按车间筛选条件 --- src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 240 +++++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 156 insertions(+), 84 deletions(-) diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue index 479b163..7150831 100644 --- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue +++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue @@ -56,25 +56,32 @@ <!--</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"> - <span slot="timeCount" slot-scope="text">{{getFormattedTime(text)}}</span> - <!--<a-table--> - <!--slot="expandedRowRender"--> - <!--slot-scope="row"--> - <!--:columns="innerColumns"--> - <!--:data-source="row.innerDataList"--> - <!--:pagination="false"--> - <!-->--> - <!--<span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span>--> - <!--</a-table>--> + rowKey="alarmCode" @expand="handleExpandChange" :loading="outerDataLoading" + > + <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> - <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="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> + </div> + </a-spin> </div> </div> </div> @@ -92,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: '鎸佺画鏃堕棿', @@ -125,7 +143,9 @@ return { dataSource: [], /* table鍔犺浇鐘舵�� */ - loading: false, + outerDataLoading: false, + innerDataLoading: false, + echartLoading: false, typeTree: '', typeParent: 1, typeEquipment: 1, @@ -151,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: '' }, @@ -214,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: { @@ -226,34 +277,35 @@ }, TableDraw(key, val) { let that = this + that.echartLoading = true that.queryParam.alarmCode = val.alarmCode console.log(this.queryParam) - that.pieDate = [] - that.XData = [] - that.YData = [] - 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 + 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) + + // 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() } - 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) - } - // 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) }, @@ -381,21 +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.forEach(item => item.innerDataList = [ - { - equipmentId: '11234', - equipmentName: '绔嬩綋鏈哄簥', - alarmTime: 20, - endTime: 20, - duration: 123 - } - ]) + this.hasRequsetAlarmCodeList = [] // this.draw() // this.checkSameData(this.dataList) // this.checkSameData1(this.dataList) @@ -404,6 +449,8 @@ // this.initDeviceType(this.dataList) } + }).finally(() => { + this.outerDataLoading = false }) }, drawWrin() { @@ -519,32 +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}绉抈 - } else { - 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 褰撳墠琛屼笅鏍� @@ -553,10 +574,42 @@ 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 expanded 褰撳墠琛屾槸鍚︿负灞曞紑鐘舵�� + * @param record 褰撳墠琛屼俊鎭� + */ + 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 + }) } } } @@ -779,6 +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 { + height: 55%; + } + + /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