slibra-module-web/src/views/data/config.js

import dayjs from "dayjs";
export const formatTofixed = val => val != 0 && !val ? '' : val.toFixed(2);
// const formatTofixed = val => val

export const columns = [
  {
    title: "检测日期",
    key: "vdateTime",
    width: 80,
    fixed: "left",
    render: ({ vdateTime }) => dayjs(vdateTime).format("YYYY-MM-DD")
  },
  {
    title: "检测小时",
    key: "testHour",
    width: 60,
    render: ({ testHour }) => dayjs(testHour).format("HH")
  },
  // {
  //   title: "进水流量",
  //   key: "jsll",
  //   width: 100,
  //   render: ({ jsll }) => formatTofixed(jsll)
  // },
  {
    title: "#1好氧池硝酸盐",
    key: "no3Hlj1Jqr",
    width: 100,
    render: ({ no3Hlj1Jqr }) => formatTofixed(no3Hlj1Jqr)
  },
  {
    title: "#2好氧池硝酸盐",
    key: "no3Hlj2Jqr",
    width: 100,
    render: ({ no3Hlj2Jqr }) => formatTofixed(no3Hlj2Jqr)
  },
  {
    title: "#1缺氧氨氮",
    key: "nh31Jqr",
    width: 100,
    render: ({ nh31Jqr }) => formatTofixed(nh31Jqr)
  },
  {
    title: "#2缺氧氨氮",
    key: "nh32Jqr",
    width: 100,
    render: ({ nh32Jqr }) => formatTofixed(nh32Jqr)
  },
  {
    title: "#1缺氧硝酸盐",
    key: "qyckxsyAll1",
    width: 100,
    render: ({ qyckxsyAll }) => {
      let num = ''
      if ( qyckxsyAll ) {
        const n  = JSON.parse(qyckxsyAll)[0];
        num = formatTofixed(n);
      }
      return num;
    }
  },
  {
    title: "#2缺氧硝酸盐",
    key: "qyckxsyAll2",
    width: 100,
    render: ({ qyckxsyAll }) =>{
      let num = ''
      if ( qyckxsyAll ) {
        const n  = JSON.parse(qyckxsyAll)[1];
        num = formatTofixed(n);
      }
      return num;
    }
  },
  // {
  //   title: "好氧池正磷酸盐",
  //   key: "hyzlsyAll",
  //   width: 120,
  //   render: ({ hyzlsyAll }) => formatTofixed(hyzlsyAll)
  // },
  {
    title: "二沉池正鳞酸盐",
    key: "tpRccJqr",
    width: 100,
    render: ({ tpRccJqr }) => formatTofixed(tpRccJqr)
  },
];

export const ForecastColumns = [
  {
    title: "时间",
    key: "remark",
    width: 140,
    fixed: "left",
  },
  {
    title: "预测类型",
    key: "category",
    width: 120,
  },
  {
    title: "预测1时间",
    key: "forecastTimeOne",
    width: 130,
  },
  {
    title: "实际1小时值",
    key: "realOne",
    width: 100,
    render: ({ realOne }) => formatTofixed(realOne)
  },
  {
    title: "预测1小时值",
    key: "hsForecastOne",
    width: 100,
    render: ({ hsForecastOne }) => formatTofixed(hsForecastOne)
  },
  {
    title: "预测1小时误差值",
    key: "hsOneSubtract",
    width: 130,
    render: ({ hsOneSubtract }) => formatTofixed(hsOneSubtract)
  },
  {
    title: "预测1小时百分比误差",
    key: "hsErrorRateOneStr",
    width: 160,
  },
  {
    title: "机理模型1小时值",
    key: "jlForecastOne",
    width: 140,
    render: ({ jlForecastOne }) => formatTofixed(jlForecastOne)
  },
  {
    title: "机理模型1小时误差值",
    key: "jlOneSubtract",
    width: 150,
    render: ({ jlOneSubtract }) => formatTofixed(jlOneSubtract)
  },
  {
    title: "机理模型1小时百分比误差",
    key: "jlErrorRateOneStr",
    width: 180,
  },
  {
    title: "预测2时间",
    key: "forecastTimeTwo",
    width: 130,
  },
  {
    title: "实际2小时值",
    key: "realTwo",
    width: 100,
    render: ({ realTwo }) => formatTofixed(realTwo)
  },
  {
    title: "预测2小时值",
    key: "hsForecastTwo",
    width: 100,
    render: ({ hsForecastTwo }) => formatTofixed(hsForecastTwo)
  },
  {
    title: "预测2误差值",
    key: "hsTwoSubtract",
    width: 100,
    render: ({ hsTwoSubtract }) => formatTofixed(hsTwoSubtract)
  },
  {
    title: "预测2小时百分比误差",
    key: "hsErrorRateTwoStr",
    width: 160,
  },
  {
    title: "机理模型2小时值",
    key: "jlForecastTwo",
    width: 140,
    render: ({ jlForecastTwo }) => formatTofixed(jlForecastTwo)
  },
  {
    title: "机理模型2小时差值",
    key: "jlTwoSubtract",
    width: 150,
    render: ({ jlTwoSubtract }) => formatTofixed(jlTwoSubtract)
  },
  {
    title: "机理模型2小时百分比误差",
    key: "jlErrorRateTwoStr",
    width: 180,
  },
  
  {
    title: "预测3时间",
    key: "forecastTimeThree",
    width: 130,
  },
  {
    title: "实际3小时值",
    key: "realThree",
    width: 100,
    render: ({ realThree }) => formatTofixed(realThree)
  },
  {
    title: "预测3小时值",
    key: "hsForecastThree",
    width: 100,
    render: ({ hsForecastThree }) => formatTofixed(hsForecastThree)
  },
  {
    title: "预测3误差值",
    key: "hsThreeSubtract",
    width: 160,
    render: ({ hsThreeSubtract }) => formatTofixed(hsThreeSubtract)
  },
  {
    title: "预测3小时百分比误差",
    key: "hsErrorRateThreeStr",
    width: 160,
  },

  {
    title: "机理模型3小时值",
    key: "jlForecastThree",
    width: 140,
    render: ({ jlForecastThree }) => formatTofixed(jlForecastThree)
  },
  {
    title: "机理模型3小时差值",
    key: "jlThreeSubtract",
    width: 150,
    render: ({ jlThreeSubtract }) => formatTofixed(jlThreeSubtract)
  },
  {
    title: "机理模型3小时百分比误差",
    key: "jlErrorRateThreeStr",
    width: 180,
  },
];

export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
  const colorList = [
    "#FF6737",
    "#00AB84",
    "#85E822",
    "#21CCFF",
    "#FFE122",
    "#313CA9",
    "#F023FF",
    "#FFD22E",
    "#2181FF",
    "#F22",
    "#37DDE0",
  ];

  const series = seriesData.map((item, index) => {
    return {
      name: item.name,
      type: "line",
      smooth: true,
      showSymbol: false,
      itemStyle: {
        opacity: 0.8,
        color: colorList[index],
      },
      // tooltip: {
      //   valueFormatter: function (value) {
      //     return value;
      //   },
      // },
      data: item.data,
    };
  });

  const option = {
    grid: {
      top: 80,
      bottom: 50,
      left: 40,
      right: 30,
    },
    tooltip: {
      trigger: "axis",
      // confine: true,
      appendToBody: true,
    },
    title: {
      show: !xAxisData.length,
      text: '暂无数据',
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: 14,
        fontWeight: 'normal',
      }
    },
    legend: [
      {
        show: !!xAxisData.length,
        data: ["进水流量", "#1好氧池硝酸盐", "#1缺氧氨氮", "#1缺氧硝酸盐"],
        top: 10,
        left: 10,
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(0,0,0,0.65)",
        },
        selected: {
          '进水流量':false
        }
      },
      {
        show: !!xAxisData.length,
        data: ["二沉池正鳞酸盐", "#2好氧池硝酸盐", "#2缺氧氨氮", "#2缺氧硝酸盐"],
        top: 35,
        left: 10,
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(0,0,0,0.65)",
        },
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisData || [],
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#DAE0E1",
          },
        },
        axisLabel: {
          align: "center",
          color: "#828282",
          margin: 10,
        },
      },
    ],
    yAxis: [
      {
        scale: false,
        minInterval: 1,
        backgroundColor: "#FFFFFF",
        splitLine: {
          lineStyle: {
            color: ["#DAE0E1"],
            shadowColor: "#DAE0E1",
            shadowBlur: 1,
            opacity: 1,
            width: 1,
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          align: "center",
          color: "#828282",
          margin: 20,
        },
      },
    ],
    series
  };
  return option;
};

export const getEchartMultiLineOption = ({ xAxisData, echartData, specificData }) => {
  const colors = ["#5B8FF9", "#82c370", "#ffbf59"];
  const series = echartData.map(({ name, val: data }, index) => ({
    name,
    data,
    type: "line",
    showSymbol: false,
    lineStyle: {
      width: 2,
      color: colors[index],
    },
    smooth: true,
    xAxisIndex: 0,
  }));

  series.push({
    name: '预测值',
    tooltip: {
      show: false
    },
    type: "line",
    symbolSize: 8,
    itemStyle: {
      color: "red",
    },
    itemStyle: {
      color: colors[0],
    },
    xAxisIndex: 0,
    data: specificData,
  });

  const option = {
    dataZoom: [{
      bottom: 10,
      height: 20,
      show: true,
      start: 0,
      end: 100,
      xAxisIndex: [0],
    }],
    color: colors,
    grid: {
      left: "5%",
      top: "10%",
      right: "12%",
      bottom: '18%',
      containLabel: true,
    },
    legend: {
      left: "left",
      icon: "circle",
      orient: "vertical",
      left: "88%",
      top: "center",
      itemWidth: 8,
      itemHeight: 8,
      padding: [0, 30]
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: xAxisData,
      },
    ],
    yAxis: {
      type: "value",
    },
    series,
  };
  return option;
};