1. 修复飞行巡检模块中有效率异常详情弹出框无法正常显示的bug； 2.优化各异常类型的折线图配置项生成逻辑；

riku

2024-01-05 72085226bc9f82a9129b8fbcd17fab1edf9ef270

 src/utils/chartFunction/exceptionOption.js

@@ -1,628 +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：x轴时间， y轴油烟浓度
   * @param：异常开始时间，异常结束时间，异常开始时间在整个区间的索引下标，异常结束时间在整个区间的索引下标，颜色背景的区间对象结构
   * @param：异常类型
   * @returns：
   * 获取各类异常的折线图配置项
   * @param {*} param0
   * @returns
   */
  setExceptionChartOption(
    xData,
    yData,
    exceptionBeginTime,
    exceptionEndTime,
    beginIndex,
    endIndex,
    exceptionName,
    areaObj,
    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':
        return this.validOption(xData, yData, exceptionName, areaObj)
  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.01) {
              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.01,
                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：
   */
  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) {
    return {
      title: {
        text: exceptionName,
        left: '1%',
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {},
      toolbox: {
        // 工具栏
        feature: {
          // dataZoom: {
          //   yAxisIndex: 'none'
          // },
          // 保存为图片
          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
          }
        }
      ]
    }
    return option
  }
}