From 72085226bc9f82a9129b8fbcd17fab1edf9ef270 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期五, 05 一月 2024 15:08:19 +0800 Subject: [PATCH] 1. 修复飞行巡检模块中有效率异常详情弹出框无法正常显示的bug; 2.优化各异常类型的折线图配置项生成逻辑; --- src/views/exception/components/CompDialogDetail.vue | 101 ++++++++++++++++++++++++-------------------------- 1 files changed, 49 insertions(+), 52 deletions(-) diff --git a/src/views/exception/components/CompDialogDetail.vue b/src/views/exception/components/CompDialogDetail.vue index 67ef2a0..78782c1 100644 --- a/src/views/exception/components/CompDialogDetail.vue +++ b/src/views/exception/components/CompDialogDetail.vue @@ -6,16 +6,19 @@ import index from '@/utils/exception_common_function/index.js' import DustLineChart from '@/views/exception/components/DustLineChart.vue' import historyApi from '@/api/historyApi.js' +import exceptionProxy from '../exceptionProxy' export default { props: { // 琛ㄦ牸鐨勪竴琛屾暟鎹� row: { type: Object, - default: {} + default: () => { + return {} + } }, // 瀵硅瘽妗嗘槸鍚︽樉绀� - dialogTableVisible: { + visible: { type: Boolean, default: false } @@ -23,21 +26,11 @@ components: { DustLineChart }, - emits: ['update:dialogTableVisible'], - computed: { - dialogTableVisible: { - get() { - return this.dialogTableVisible - }, - set(value) { - this.$emit('update:dialogTableVisible', value) - } - } - }, + emits: ['update:visible'], watch: { row: { handler(newValue) { - this.display() + this.display(newValue) }, deep: true } @@ -57,27 +50,30 @@ lineChart: false }, - // 鏍囪浣� flag: { // 鏁版嵁鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮 - banTouch: 0, + banTouch: 0 }, - isPreCantouch:false, - isNextCantouch:false - + isPreCantouch: false, + isNextCantouch: false } }, mounted() {}, methods: { - display() { + dialogChange(value) { + this.$emit('update:visible', value) + }, + async display(row) { + // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 + this.loading.lineChart = true // 琛ㄦ牸鏁版嵁 - this.getExceptionTableDataByCurrenrRow(this.row) + await this.getExceptionTableDataByCurrenrRow(row) // 鎶樼嚎鍥炬暟鎹� - this.setLineChart(this.row) + await this.setLineChart(row) }, /** @@ -115,15 +111,11 @@ // 璁$畻寮傚父鍖洪棿鐨勫墠鍚�45鍒嗛挓 const beforeAndAfterTime = index.before45AndAfter45(beginTime, endTime) // 璇锋眰鏁存鏃堕棿娈电殑棰楃矑鐗╂祿搴︽暟鎹� - // 瀵硅姹傚洖鐨勬暟鎹繘琛屽垝鍒� const chartParams = await this.organizeLineChartsOptionParams(beforeAndAfterTime, this.row) - this.lineChartOption = exceptionOption.setExceptionChartOption(chartParams) - + this.lineChartOption = exceptionOption.setExceptionChartOption2(chartParams) }, - - /** * 鏋勫缓鎶樼嚎鍥剧殑閰嶇疆椤圭殑鍙傛暟 @@ -134,9 +126,6 @@ time_point, { name, beginTime, endTime, exception, exceptionType } ) { - // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 - this.loading.lineChart = true - // 璇锋眰鏁存棰楃矑鐗╂祿搴︾殑鏁版嵁 const response = await historyApi.queryHistoryData({ siteName: name, @@ -162,9 +151,12 @@ xData = timeAndValue['xAxis'] yData = timeAndValue['yAxis'] - // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩 - let beginIndex = xData.findIndex((item) => item === beginTime) - let endIndex = xData.findIndex((item) => item === endTime) + const exceptionArea = exceptionProxy.getExceptionArea( + beginTime, + endTime, + this.historyData, + exceptionType + ) this.flag.banTouch = 0 this.loading.lineChart = false @@ -173,13 +165,8 @@ return { xData, yData, - exceptionBeginTime: beginTime, - exceptionEndTime: endTime, - beginIndex, - endIndex, + exceptionArea, exceptionName: exception, - areaObj: '', - lineColor: '', exceptionType } }, @@ -199,9 +186,12 @@ mnCode: mnCode, dutyCompany: dutyCompany, lst: abnormalTimeTenMinute[i], - yData: '' + dustValue: '' }) } + }, + tableRowClassName({ row }) { + return row.flag == 'N' ? 'normal-row' : 'abnormal-row' } } } @@ -210,14 +200,14 @@ <template> <el-dialog class="exception-dialog" - v-model="dialogTableVisible" + :model-value="visible" + @open="dialogChange(true)" + @close="dialogChange(false)" draggable align-center height="700px" width="700px" > - - <!-- 澶� --> <template #header> <div class="diag-head"> @@ -231,7 +221,6 @@ </div> </div> </div> - <!-- <div class="chart-jump-button"> <el-button @@ -249,17 +238,20 @@ >涓嬫潯寮傚父</el-button > </div> --> - - </template> - <!-- 鍥惧舰 --> <DustLineChart :option="lineChartOption" v-loading="loading.lineChart"></DustLineChart> <!-- 琛ㄦ牸 --> <div> - <el-table :data="historyData" size="default" height="200" border> + <el-table + :data="historyData" + size="default" + height="200" + border + :row-class-name="tableRowClassName" + > <el-table-column type="index" label="搴忓彿" @@ -269,7 +261,7 @@ ></el-table-column> <el-table-column prop="lst" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip /> - <el-table-column prop="yData" label="TSP(mg/m鲁)" align="center" show-overflow-tooltip /> + <el-table-column prop="dustValue" label="TSP(mg/m鲁)" align="center" show-overflow-tooltip /> <el-table-column prop="flag" label="鏁版嵁鏍囪瘑" align="center" show-overflow-tooltip /> </el-table> </div> @@ -299,13 +291,18 @@ > </div> </template> - - </el-dialog> </template> -<style scoped> +<style> /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */ +.el-table .normal-row { +} + +.el-table .abnormal-row { + /* background-color: var(--el-color-danger-light-5); */ + color: var(--el-color-danger); +} .diag-head { /* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */ -- Gitblit v1.9.3