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/utils/chartFunction/exceptionOption.js | 781 +++++++++---------------------------------------------
1 files changed, 139 insertions(+), 642 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
}
}
--
Gitblit v1.9.3