@ued_fpi/data-visual/dist/lib/wgms/src/WaterQualityRainfall/index.vue.js

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const vue = require('vue');
const dayjs = require('dayjs');
require('echarts/lib/component/markLine');
const BaseECharts_vue_vue_type_script_setup_true_lang = require('../../utils/echarts/BaseECharts.vue.js');
const tools = require('../../utils/tools.js');
const index = require('./api/index.js');

const _hoisted_1 = { class: "dv-wgms-water-quality-rainfall" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "DvWgmsWaterQualityRainfall",
    title: "水质-雨量-水位趋势对比图"
  },
  __name: "index",
  props: {
    params: {
      type: Object,
      default: () => {
        return {
          // 趋势图参数
          beginTime: dayjs().startOf("year").valueOf(),
          // 分析时间开始
          endTime: dayjs().endOf("year").valueOf(),
          // 分析时间结束
          latitude: 30.3992,
          longitude: 119.9681,
          queryTimeType: "hour",
          // 下面是达标线的接口参数
          factorName: "总磷(以 P 计）",
          factorCode: "w21003",
          // 监测因子
          factorUnit: "mg/L",
          factor: 27,
          siteCode: "JMSZSY0008",
          configTime: 1687536e6,
          // 报警时间
          baseLevel: -1
        };
      }
    },
    isLazy: {
      type: Boolean,
      default: false
    }
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const chartQualityRainfall = vue.ref();
    const option = vue.ref(void 0);
    const state = vue.reactive({
      factorLimitValue: {
        // 因子达标限值
        value: null
      }
    });
    const initData = async () => {
      await getFactorStandard();
      getData();
    };
    const getFactorStandard = async () => {
      const { data: resData } = await index.surfaceWaterStandard({
        accessCodeList: props?.params?.siteCode,
        baseLevel: props?.params?.baseLevel,
        factorFlag: false,
        factor: props?.params?.factor,
        configTime: props?.params?.configTime
      });
      const limit = resData && props.params?.siteCode && props.params?.factorCode && resData[props.params?.siteCode] && resData[props?.params?.siteCode][props.params?.factorCode] ? resData[props.params?.siteCode][props.params?.factorCode] : "";
      state.factorLimitValue = limit;
    };
    const getWaterQualityData = async (timeType) => {
      const params = {
        beginTime: props.params?.beginTime,
        endTime: tools.getDateEndTime(props.params?.queryTimeType, props.params?.endTime),
        queryTimeType: timeType,
        accessCode: props.params?.siteCode,
        factor: props?.params?.factor
      };
      const res = await index.waterQuality(params);
      const waterQualityData = {
        value: [],
        grade: [],
        time: []
      };
      res && res.data && res.data.forEach((item) => {
        waterQualityData.time.push(item.time);
        waterQualityData.value.push(item.value);
        waterQualityData.grade.push(item.grade);
      });
      return waterQualityData;
    };
    const getData = async () => {
      const timeType = props.params?.queryTimeType === "day" || props.params?.queryTimeType === "hour" ? "hour" : props.params?.queryTimeType === "year" ? "month" : "day";
      const params = {
        beginTime: props.params?.beginTime,
        endTime: tools.getDateEndTime(props.params?.queryTimeType, props.params?.endTime),
        latitude: props.params?.latitude,
        longitude: props.params?.longitude,
        queryTimeType: timeType
      };
      const res = await index.rainHydrologyAnalyse(params);
      const resData = res.data || [];
      const xData = [];
      const seriesData = {
        hydrology: [],
        factorValue: [],
        rain: [],
        quality: []
      };
      const { value, grade } = await getWaterQualityData(timeType);
      resData.forEach((item, index) => {
        if (timeType === "hour")
          xData.push(dayjs(item.time).format("MM-DD HH"));
        else if (timeType === "month")
          xData.push(dayjs(item.time).format("YYYY-MM"));
        else
          xData.push(dayjs(item.time).format("MM-DD"));
        seriesData.rain.push(item.rain);
        seriesData.hydrology.push(item.hydrology);
        if (value && value[index])
          seriesData.factorValue.push(value[index]);
        else
          seriesData.factorValue.push(null);
        if (grade && grade[index])
          seriesData.quality.push(grade[index]);
        else
          seriesData.quality.push(null);
      });
      option.value = await initWaterQuality(xData, seriesData, props?.params?.factorUnit, props.params?.factorName);
    };
    const initWaterQuality = async (xAxis, data, unit, factorName) => {
      const { hydrology, factorValue, rain, quality } = data;
      const res = await index.waterSurfaceListAll({});
      const gradeList = res?.entries ?? [];
      const option2 = {
        grid: {
          top: 55,
          right: 26,
          bottom: 45,
          left: 80
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          formatter: (params) => {
            let str = `<div>${params[0].axisValue}</div>`;
            params.forEach((item, index) => {
              let unit2 = "";
              if (item.seriesName === "降雨量")
                unit2 = "mm/h";
              else if (item.seriesName === "水位")
                unit2 = "m";
              else
                unit2 = props?.params?.factorUnit || "";
              str += `<div>${item.marker}${item.seriesName}：${item.value ? item.value : "--"}${unit2}</div>`;
            });
            return str;
          }
        },
        legend: {
          show: true,
          // right: 'center',
          bottom: 0,
          inactiveColor: "rgba(255,255,255,0.5)",
          textStyle: {
            color: "var(--dv-color-text-primary)"
          },
          // icon: 'rect',
          itemHeight: 2,
          itemWidth: 16,
          data: [
            {
              name: "降雨量",
              icon: "rect"
            },
            {
              name: factorName,
              icon: "rect"
            },
            {
              name: "水位",
              icon: "rect"
            }
          ]
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            show: false,
            lineStyle: {
              color: "var(--dv-color-fill-lighter)"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-number2)",
              color: "var(--dv-color-text-primary)"
            }
          },
          axisTick: {
            show: false
          },
          data: xAxis
        },
        yAxis: [
          {
            // 降雨量
            type: "value",
            name: "降雨量\n(mm/h)",
            nameLocation: "start",
            nameTextStyle: {
              align: "right",
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-body2)",
              color: "var(--dv-color-text-secondary)"
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontFamily: "var(--dv-font-family-number)",
                fontSize: "var(--dv-text-number2)",
                color: "var(--dv-color-text-secondary)"
              }
            },
            axisLine: {
              show: false
            },
            axisPointer: {
              snap: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "var(--dv-color-fill-lighter)"
              }
            },
            axisTick: { show: false },
            inverse: true
          },
          {
            // 氨氮
            type: "value",
            name: unit ? `监测值
(${unit})` : "监测值",
            nameTextStyle: {
              align: "right",
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-body2)",
              color: "var(--dv-color-text-secondary)"
            },
            position: "left",
            splitNumber: 4,
            offset: 40,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontFamily: "var(--dv-font-family-number)",
                fontSize: "var(--dv-text-number2)",
                color: "var(--dv-color-text-secondary)"
              }
            },
            axisLine: {
              show: false
            },
            axisPointer: {
              snap: true
            },
            splitArea: {
              show: false
            },
            splitLine: { show: false },
            axisTick: { show: false },
            max: (value) => {
              if (props.params?.factorCode === "w01001") {
                if (value.max > state.factorLimitValue.upValue && state.factorLimitValue.upValue)
                  return value.max;
                else
                  return state.factorLimitValue.upValue;
              } else {
                if (value.max < state.factorLimitValue.value && state.factorLimitValue.value)
                  return state.factorLimitValue.value;
                else
                  return value.max;
              }
            }
          },
          {
            // 水位
            type: "value",
            name: "水位(m)",
            nameTextStyle: {
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-body2)",
              color: "var(--dv-color-text-secondary)"
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontFamily: "var(--dv-font-family-number)",
                fontSize: "var(--dv-text-number2)",
                color: "var(--dv-color-text-secondary)"
              }
            },
            axisLine: {
              show: false
            },
            axisPointer: {
              snap: true
            },
            splitLine: { show: false },
            axisTick: { show: false }
          }
        ],
        series: [
          {
            name: "降雨量",
            type: "line",
            // smooth: true,
            showSymbol: false,
            yAxisIndex: 0,
            lineStyle: {
              color: "rgba(217, 204, 76, 1)",
              opacity: 1,
              width: 0.5
            },
            areaStyle: {
              color: "rgba(217, 204, 76, .5)"
            },
            color: "rgba(217, 204, 76, 1)",
            data: rain
          },
          {
            name: factorName,
            type: "line",
            smooth: false,
            connectNulls: true,
            yAxisIndex: 1,
            symbol: "circle",
            showSymbol: false,
            lineStyle: {
              color: "rgba(0, 221, 255, 1)",
              type: "solid"
            },
            color: "rgba(0, 221, 255, 1)",
            markPoint: {
              show: false,
              itemStyle: {
                color: ["var(--dv-color-danger)"]
              }
            },
            label: {
              show: true,
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-number2)",
              color: "var(--dv-color-text-secondary)"
            },
            // data: factorValue.map((item, index) => {
            //     return {
            //         value: item,
            //         itemStyle: {
            //             color: 'white'
            //         }
            //     }
            // })
            data: factorValue.map((item, index) => {
              const currData = gradeList.filter((item2) => item2.level === Number(quality[index]));
              return {
                value: item || "",
                itemStyle: {
                  color: currData.length ? currData[0].color : "rgba(0, 221, 255, 1)"
                }
              };
            })
          },
          {
            name: "水位",
            type: "line",
            // smooth: true,
            showSymbol: false,
            yAxisIndex: 2,
            areaStyle: {
              color: "rgba(238, 142, 0, .5)"
            },
            markPoint: {
              show: false
            },
            lineStyle: {
              color: "rgba(238, 142, 0, 1)",
              opacity: 1,
              width: 0.5
            },
            color: "rgba(238, 142, 0, 1)",
            data: hydrology
          }
        ]
      };
      if (props.params?.factorCode === "w01001") {
        if (state.factorLimitValue && state.factorLimitValue.upValue) {
          const num = tools.countDecimalPlaces(state.factorLimitValue.upValue);
          option2.series[1].markLine = {
            symbol: "none",
            data: [
              {
                yAxis: Number(state.factorLimitValue.upValue).toFixed(num),
                show: true,
                lineStyle: {
                  type: "solid",
                  color: "#FF1744"
                }
              },
              {
                yAxis: state.factorLimitValue.downValue == null ? "" : Number(state.factorLimitValue.downValue).toFixed(num),
                show: true,
                lineStyle: {
                  type: "solid",
                  color: "#FF1744"
                }
              }
            ],
            label: {
              position: "insideEndTop",
              color: "red"
            }
          };
        }
      } else {
        if (state.factorLimitValue.value != null) {
          const num = tools.countDecimalPlaces(state.factorLimitValue.value);
          option2.series[1].markLine = {
            symbol: "none",
            data: [
              {
                yAxis: Number(state.factorLimitValue.value).toFixed(num),
                show: true,
                lineStyle: {
                  type: "solid",
                  color: "#FF1744"
                }
              }
            ],
            label: {
              position: "insideEndTop",
              color: "red"
            }
          };
        }
      }
      return option2;
    };
    vue.onMounted(() => {
      !props.isLazy && initData();
    });
    vue.watch([() => props.params, () => props.isLazy], () => {
      !props.isLazy && initData();
    }, { deep: true });
    __expose({
      reload: initData
    });
    vue.toRefs(state);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", {
          ref_key: "chartQualityRainfall",
          ref: chartQualityRainfall,
          class: "chart"
        }, [
          vue.createVNode(BaseECharts_vue_vue_type_script_setup_true_lang.default, { options: option.value }, null, 8, ["options"])
        ], 512)
      ]);
    };
  }
});

exports.default = _sfc_main;