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/DustLineChart.vue | 4
src/views/exception/FlightInspection.vue | 29 -
src/utils/exception_common_function/index.js | 5
src/utils/chartFunction/exceptionOption.js | 781 ++++++++-------------------------------------
src/views/exception/components/CompDialogDetail.vue | 101 ++---
src/views/exception/exceptionProxy.js | 87 +++++
6 files changed, 279 insertions(+), 728 deletions(-)
diff --git a/src/utils/chartFunction/exceptionOption.js b/src/utils/chartFunction/exceptionOption.js
index bc7133f..7626474 100644
--- a/src/utils/chartFunction/exceptionOption.js
+++ b/src/utils/chartFunction/exceptionOption.js
@@ -1,652 +1,149 @@
/** 寮傚父鏁版嵁鐨勬姌绾垮浘 */
+function baseOption(title, xData) {
+ return {
+ title: {
+ text: title,
+ left: '1%',
+ textStyle: {
+ fontSize: 14
+ }
+ },
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xData,
+ name: '鏃堕棿',
+ axisLabel: {
+ formatter: function (value) {
+ return value.slice(11, -3)
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'mg/m鲁'
+ }
+ }
+}
+
+function baseSeries(yData) {
+ return {
+ name: '棰楃矑鐗╂祿搴�',
+ type: 'line',
+ data: yData
+ }
+}
+
+function baseMarkArea(area) {
+ const _data = []
+ area.forEach((v) => {
+ _data.push([{ xAxis: v[0] }, { xAxis: v[1] }])
+ })
+ return {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: _data
+ }
+}
+
+function baseVisualMap(area) {
+ const _pieces = []
+ area.forEach((v, i) => {
+ if (i == 0) {
+ _pieces.push({
+ lt: v[0],
+ color: 'green'
+ })
+ }
+ _pieces.push({
+ gte: v[0],
+ lte: v[1],
+ color: 'red'
+ })
+ })
+ const lastOne = area[area.length - 1]
+ _pieces.push({
+ gt: lastOne[1],
+ color: 'green'
+ })
+ return {
+ show: false,
+ dimension: 0,
+ pieces: _pieces
+ }
+}
+
+function baseMarkLine() {
+ return {
+ symbol: 'none',
+ itemStyle: {
+ // 鍩虹嚎鍏叡鏍峰紡
+ normal: {
+ lineStyle: {
+ type: 'dashed'
+ },
+ label: {
+ show: true,
+ position: 'end',
+ formatter: '{b}'
+ }
+ }
+ },
+ data: [
+ {
+ name: '瓒呮爣',
+ type: 'max',
+ yAxis: 1,
+ lineStyle: {
+ color: 'red'
+ }
+ },
+ {
+ name: '鏁版嵁瓒呬綆',
+ type: 'min',
+ yAxis: 0.02,
+ lineStyle: {
+ color: 'red'
+ }
+ }
+ ]
+ }
+}
+
export default {
/**
- * 璁剧疆9绉嶅紓甯告姌绾垮浘
- * @param锛歺杞存椂闂达紝 y杞存补鐑熸祿搴�
- * @param锛氬紓甯稿紑濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣锛岄鑹茶儗鏅殑鍖洪棿瀵硅薄缁撴瀯
- * @param锛氬紓甯哥被鍨�
- * @returns锛�
+ * 鑾峰彇鍚勭被寮傚父鐨勬姌绾垮浘閰嶇疆椤�
+ * @param {*} param0
+ * @returns
*/
- setExceptionChartOption({
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex,
- exceptionName,
- areaObj,
- lineColor,
- exceptionType
- }
- ) {
- switch (exceptionType) {
- case '0':
- return this.missingDataOption(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- exceptionName
- )
- case '1':
- return this.ultraLowOption(xData, yData, beginIndex, endIndex, exceptionName)
- case '2':
- return this.exceedingOption(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex,
- exceptionName
- )
-
- case '3':
- return this.longtimeUnchangedOption(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex,
- exceptionName
- )
- case '4':
- case '5':
- case '6':
- case '7':
- return this.exception4567TypeOption(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex,
- exceptionName
- )
- case '8':
- console.log('浼犺繘鏉�',lineColor)
- return this.validOption(xData, yData, exceptionName, areaObj,lineColor)
+ setExceptionChartOption2({ xData, yData, exceptionArea, exceptionName, exceptionType }) {
+ const indexArea = []
+ exceptionArea.forEach((e) => {
+ const i1 = xData.indexOf(e[0])
+ const i2 = xData.indexOf(e[1])
+ indexArea.push([i1, i2])
+ })
+ const option = baseOption(exceptionName, xData)
+ const series = baseSeries(yData)
+ series.markArea = baseMarkArea(exceptionArea)
+ // 鏁版嵁瓒呬綆鎴栬秴鏍�
+ if (exceptionType == '1' || exceptionType == '2') {
+ series.markLine = baseMarkLine()
}
- },
+ const visualMap = baseVisualMap(indexArea)
- /**
- * 鏁版嵁缂哄け
- * @param锛�
- * @returns锛�
- */
- missingDataOption(xData, yData, exceptionBeginTime, exceptionEndTime, exceptionName) {
- return {
- title: {
- text: exceptionName,
- left: '1%',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- data: xData,
- name: '鏃堕棿',
- axisLabel: {
- formatter: function (value) {
- return value.slice(11, -3)
- }
- }
- },
- yAxis: {
- type: 'value',
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: yData,
- markLine: {
- silent: true,
- data: [
- // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹�
- {
- name: '鏃犳暟鎹�',
- xAxis: exceptionBeginTime
- },
- {
- xAxis: exceptionEndTime
- }
- ],
- lineStyle: {
- color: 'red'
- }
- }
- }
- ]
- }
- },
+ option.series = [series]
+ option.visualMap = visualMap
- /**
- * 瓒呮爣
- * @param锛�
- * @returns锛�
- */
- exceedingOption(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex,
- exceptionName
- ) {
- return {
- title: {
- text: exceptionName,
- left: '1%',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- data: xData,
- name: '鏃堕棿',
- axisLabel: {
- formatter: function (value) {
- return value.slice(11, -3)
- }
- }
- },
- yAxis: {
- type: 'value',
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: yData.map((item) => {
- if (item >= 1) {
- return {
- value: item,
- itemStyle: {
- color: 'red'
- }
- }
- }
- return item
- }),
- // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
- markArea: {
- itemStyle: {
- color: 'rgba(255, 173, 177, 0.4)'
- },
- data: [
- [
- {
- name: '寮傚父鏃堕棿娈�',
- xAxis: exceptionBeginTime
- },
- {
- xAxis: exceptionEndTime
- }
- ]
- ]
- },
- markLine: {
- symbol: 'none',
- itemStyle: {
- // 鍩虹嚎鍏叡鏍峰紡
- normal: {
- lineStyle: {
- type: 'dashed'
- },
- label: {
- show: true,
- position: 'end',
- formatter: '{b}'
- }
- }
- },
- data: [
- {
- name: '瓒呮爣',
- type: 'average',
- yAxis: 1,
- lineStyle: {
- // color: '#ff0000'
- color: 'red'
- }
- }
- ]
- }
- }
- ],
- // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
- visualMap: {
- show: false,
- dimension: 0,
- pieces: [
- {
- lte: beginIndex,
- color: 'green'
- },
- {
- gt: beginIndex,
- lte: endIndex,
- color: 'red'
- },
- {
- gt: endIndex,
- lte: xData.length - 1,
- color: 'green'
- }
- ]
- }
- }
- },
-
- /**
- * 鏁版嵁瓒呬綆
- * @param锛�
- * @returns锛�
- */
- ultraLowOption(xData, yData, beginIndex, endIndex, exceptionName) {
- return {
- title: {
- text: exceptionName,
- left: '1%',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- data: xData,
- name: '鏃堕棿',
- axisLabel: {
- formatter: function (value) {
- return value.slice(11, -3)
- }
- }
- },
- yAxis: {
- type: 'value',
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: yData.map((item) => {
- if (item <= 0.02) {
- return {
- value: item,
- itemStyle: {
- color: 'red'
- }
- }
- }
- return item
- }),
-
- markLine: {
- symbol: 'none',
- itemStyle: {
- // 鍩虹嚎鍏叡鏍峰紡
- normal: {
- lineStyle: {
- type: 'dashed'
- },
- label: {
- show: true,
- position: 'end',
- formatter: '{b}'
- }
- }
- },
- data: [
- {
- name: '鏁版嵁瓒呬綆',
- type: 'average',
- yAxis: 0.02,
- lineStyle: {
- color: 'red'
- }
- }
- ]
- }
- }
- ],
- // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
- visualMap: {
- show: false,
- dimension: 0,
- pieces: [
- {
- lte: beginIndex,
- color: 'green'
- },
- {
- gt: beginIndex,
- lte: endIndex,
- color: 'red'
- },
- {
- gt: endIndex,
- lte: xData.length - 1,
- color: 'green'
- }
- ]
- }
- }
- },
-
- /**
- * 闀挎椂闂存棤娉㈠姩
- * @param锛�
- * @returns锛�
- */
- longtimeUnchangedOption(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex,
- exceptionName
- ) {
- return {
- title: {
- text: exceptionName,
- left: '1%',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- data: xData,
- name: '鏃堕棿',
- axisLabel: {
- formatter: function (value) {
- return value.slice(11, -3)
- }
- }
- },
- yAxis: {
- type: 'value',
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: yData.map((item) => {
- if (item >= 1) {
- return {
- value: item,
- itemStyle: {
- color: 'red'
- }
- }
- }
- return item
- }),
- // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
- markArea: {
- itemStyle: {
- color: 'rgba(255, 173, 177, 0.4)'
- },
- data: [
- [
- {
- name: '寮傚父鏃堕棿娈�',
- xAxis: exceptionBeginTime
- },
- {
- xAxis: exceptionEndTime
- }
- ]
- ]
- }
- }
- ],
- // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
- visualMap: {
- show: false,
- dimension: 0,
- pieces: [
- {
- lte: beginIndex,
- color: 'green'
- },
- {
- gt: beginIndex,
- lte: endIndex,
- color: 'red'
- },
- {
- gt: endIndex,
- lte: xData.length - 1,
- color: 'green'
- }
- ]
- }
- }
- },
-
- /**
- * 閲忕骇绐佸彉 涓磋繎瓒呮爣寮傚父 鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父 鍙樺寲瓒嬪娍寮傚父
- * @param锛�
- * @returns锛�
- */
- exception4567TypeOption(
- xData,
- yData,
- exceptionBeginTime,
- exceptionEndTime,
- beginIndex,
- endIndex,
- exceptionName
- ) {
- return {
- title: {
- text: exceptionName,
- left: '1%',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- data: xData,
- name: '鏃堕棿',
- axisLabel: {
- formatter: function (value) {
- return value.slice(11, -3)
- }
- }
- },
- yAxis: {
- type: 'value',
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: yData,
- // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
- markArea: {
- itemStyle: {
- color: 'rgba(255, 173, 177, 0.4)'
- },
- data: [
- [
- {
- name: '寮傚父鏃堕棿娈�',
- xAxis: exceptionBeginTime
- },
- {
- xAxis: exceptionEndTime
- }
- ]
- ]
- }
- }
- ],
- // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
- visualMap: {
- show: false,
- dimension: 0,
- pieces: [
- {
- lte: beginIndex,
- color: 'green'
- },
- {
- gt: beginIndex,
- lte: endIndex,
- color: 'red'
- },
- {
- gt: endIndex,
- lte: xData.length - 1,
- color: 'green'
- }
- ]
- }
- }
- },
-
- /**
- * 鏈夋晥鐜�
- * @param锛�
- * @returns锛�
- */
- validOption(xData, yData, exceptionName, areaObj,lineColor) {
- return {
- title: {
- text: exceptionName,
- left: '1%',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'category',
- data: xData,
- name: '鏃堕棿',
- axisLabel: {
- formatter: function (value) {
- return value.slice(11, -3)
- }
- }
- },
- yAxis: {
- type: 'value',
- name: 'mg/m鲁'
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: yData,
- // yData.map((item) => {
- // if (item >= 1) {
- // return {
- // value: item,
- // itemStyle: {
- // color: 'red'
- // }
- // }
- // }
- // return item
- // }),
- // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
- markArea: {
- itemStyle: {
- color: 'rgba(255, 173, 177, 0.4)'
- },
- data: areaObj
- }
- }
- ],
- // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
- // visualMap: {
- // show: false,
- // dimension: 0,
-
- // // pieces: [
- // // {
- // // lte: beginIndex,
- // // color: 'green'
- // // },
- // // {
- // // gt: beginIndex,
- // // lte: endIndex,
- // // color: 'red'
- // // },
- // // {
- // // gt: endIndex,
- // // lte: xData.length - 1,
- // // color: 'green'
- // // }
- // // ],
-
- // pieces: lineColor
-
- // }
- }
+ return option
}
}
diff --git a/src/utils/exception_common_function/index.js b/src/utils/exception_common_function/index.js
index 3e40bbb..dfb6dca 100644
--- a/src/utils/exception_common_function/index.js
+++ b/src/utils/exception_common_function/index.js
@@ -77,7 +77,7 @@
*/
diffFiftyMinutesNum(beginNormal, endNormal) {
// 灏嗗紑濮嬫椂闂村拰缁撴潫鏃堕棿杞崲涓篸ayjs瀵硅薄
- const start = dayjs(beginNormal).subtract(15, 'minute');
+ const start = dayjs(beginNormal)
const end = dayjs(endNormal);
// 璁＄畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
@@ -116,9 +116,8 @@
let obj = {};
let current = intervalStarTime;
let tail = dayjs(intervalEndTime)
- .add(15, 'minute')
.format('YYYY-MM-DD HH:mm:ss');
- while (current != tail) {
+ while (current <= tail) {
let value = this.findTimeInExceptionData(
headAndTailExceptionData,
current
diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue
index b10b218..b4def6a 100644
--- a/src/views/exception/FlightInspection.vue
+++ b/src/views/exception/FlightInspection.vue
@@ -873,35 +873,6 @@
// 淇濆瓨褰撳墠琛屾暟鎹�
this.tableCurrentRowData = row
-
- // // 鑾峰彇褰撳墠琛岀殑绱㈠紩
- // this.selectedRowIndex = this.displayData.indexOf(row)
-
- // //鏍规嵁褰撳墠琛岀殑缂栧彿锛岃捣濮嬫椂闂存潵 璇锋眰寮傚父鏁版嵁
- // // 瀵硅姹傚埌鐨勬暟鎹繘琛岄灏炬嫾鎺�
- // // 寰楀埌鍓嶅悗瀹屾暣鏁版嵁杩涜缁樺埗鍥惧舰
-
- // historyApi
- // .queryHistoryData({
- // siteName: row.name,
- // beginTime: row.beginTime,
- // endTime: row.endTime
- // })
- // .then((response) => {
- // // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
- // this.dialog.historyData = response.data.data
- // this.dialog.exceptionTotal = response.data.data.length
- // // 閫昏緫澶勭悊
-
- // if (this.tableCurrentRowData.exceptionType != '8') {
- // this.timeAndDataProcessed()
- // } else {
- // this.loading.lineChart = true
- // this.validProcess()
- // this.loading.lineChart = false
- // this.flag.banTouch = 0
- // }
- // })
},
/**
* description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁
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 {
/* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */
diff --git a/src/views/exception/components/DustLineChart.vue b/src/views/exception/components/DustLineChart.vue
index 66f55fd..6db079b 100644
--- a/src/views/exception/components/DustLineChart.vue
+++ b/src/views/exception/components/DustLineChart.vue
@@ -33,10 +33,10 @@
window.addEventListener('resize', this.resizeChart)
},
watch: {
- option() {
+ option(nV) {
// this.chart.clear
// 涓嶄笌涔嬪墠鐨刼ption杩涜鍚堝苟
- this.chart.setOption(this.option, true)
+ this.chart.setOption(nV, true)
}
},
diff --git a/src/views/exception/exceptionProxy.js b/src/views/exception/exceptionProxy.js
new file mode 100644
index 0000000..7b04ca0
--- /dev/null
+++ b/src/views/exception/exceptionProxy.js
@@ -0,0 +1,87 @@
+/**
+ * 寮傚父鏁版嵁鐩稿叧閫昏緫浠ｇ悊
+ */
+import index from '@/utils/exception_common_function/index.js'
+
+function findPeriod(dataList, exceptionCheck, specilOption) {
+ let start,
+ last = undefined
+ let isException = false
+ const res = []
+ dataList.forEach((e) => {
+ // 鍒ゆ柇鍓嶅悗鐩搁偦涓や釜鏁版嵁鐨勬椂闂寸偣鏄惁瓒呰繃15鍒嗛挓
+ if (last && !isException) {
+ if (typeof specilOption === 'function' && specilOption(last, e)) {
+ res.push([last.lst, e.lst])
+ }
+ }
+
+ if (typeof exceptionCheck === 'function' && exceptionCheck(e)) {
+ if (!isException) {
+ start = e
+ isException = true
+ }
+ } else {
+ if (isException) {
+ res.push([start.lst, last.lst])
+ isException = false
+ }
+ }
+
+ last = e
+ })
+ return res
+}
+
+export default {
+ /**
+ * 鑾峰彇鏁版嵁鐨勫紓甯告椂娈垫暟缁�
+ * @param {*} beginTime
+ * @param {*} endTime
+ * @param {*} dataList
+ * @param {*} exceptionType
+ * @returns
+ */
+ getExceptionArea(beginTime, endTime, dataList, exceptionType) {
+ if (dataList.length == 0) {
+ return []
+ }
+ const d1 = dataList[0].lst
+ const d2 = dataList[dataList.length - 1].lst
+ switch (exceptionType) {
+ // 鏈夋晥鐜囧紓甯�
+ case '8':
+ // 缁熻鏁版嵁缂哄け鏃舵鍜屾暟鎹爣璇嗕笉涓篘鐨勬椂娈�
+ return findPeriod(
+ dataList,
+ (data) => {
+ return data.flag != 'N'
+ },
+ (last, data) => {
+ return index.diffFiftyMinutesNum(last.lst, data.lst) > 1
+ }
+ )
+ //鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父
+ case '6':
+ return findPeriod(dataList, (data) => {
+ return data.dustValue > 1
+ })
+ //鏁版嵁瓒呬綆
+ //瓒呮爣
+ //鏁版嵁闀挎椂娈垫棤娉㈠姩
+ //閲忕骇绐佸彉
+ //涓磋繎瓒呮爣寮傚父
+ //鍙樺寲瓒嬪娍寮傚父
+ case '1':
+ case '2':
+ case '3':
+ case '4':
+ case '5':
+ case '7':
+ return [[d1, d2]]
+ //鏁版嵁缂哄け寮傚父
+ case '0':
+ return [[beginTime, endTime]]
+ }
+ }
+}
--
Gitblit v1.9.3