@ued_fpi/data-visual/dist/es/aims/src/AirQualityRealTime/index.vue.mjs

<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" />

import { defineComponent, reactive, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, Fragment, renderList } from 'vue';
import { BASE_FACTOR, factorToLevel, factorToColor, FACTOR_LEVEL_TEXT } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import { getAirQuality } from './api/index.mjs';

const _hoisted_1 = { class: "aqiInfo" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", null, "AQI", -1);
const _hoisted_3 = { class: "data-time" };
const _hoisted_4 = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "首要污染物", -1);
const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", null, "（ 单位：μg/m³, CO：mg/m³ ）", -1);
const _hoisted_6 = { class: "name" };
const clsfix = "dv-aims-air-quality-realtime";
const noDataColor = "var(--dv-color-text-secondary)";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().valueOf(),
      gridCode: "01010000",
      gridLevelNickName: "city"
    }) },
    timeType: { default: "hour" }
  },
  setup(__props) {
    const props = __props;
    const realtimeData = reactive({
      aqiVal: "--",
      aqiColor: noDataColor,
      aqiPollutionZh: "--",
      firstPollution: "--",
      dataTime: "--",
      factorList: BASE_FACTOR.filter((item) => item.code !== "aqi").map(
        (item) => {
          return {
            name: item.name,
            code: item.code,
            key: item.key,
            value: "--",
            color: noDataColor
          };
        }
      )
    });
    const fetchData = () => {
      getAirQuality(props.apiParams).then((res) => {
        if (res.data) {
          realtimeData.dataTime = res.data.time;
          const rawData = res.data.list && res.data.list[0] ? res.data.list[0] : null;
          if (rawData) {
            realtimeData.aqiVal = String(props.timeType === "hour" ? rawData.realAQI : rawData.dayAQI);
            const level = factorToLevel("aqi", realtimeData.aqiVal, props.timeType);
            realtimeData.aqiColor = level >= 0 ? factorToColor("aqi", realtimeData.aqiVal, props.timeType) : noDataColor;
            realtimeData.aqiPollutionZh = level >= 0 ? FACTOR_LEVEL_TEXT[level].label : "--";
            if (realtimeData.aqiPollutionZh !== "--" && realtimeData.aqiPollutionZh.length > 1)
              realtimeData.aqiPollutionZh = `${realtimeData.aqiPollutionZh}污染`;
            realtimeData.firstPollution = props.timeType === "hour" ? rawData.realPollution : rawData.dayPollution;
            realtimeData.factorList = realtimeData.factorList.map((item) => {
              const obj = rawData.concTrend.find((c) => c.factorCode === item.code);
              const value = props.timeType === "hour" ? obj?.realFactorValue : obj?.dayFactorValue;
              return {
                ...item,
                value: value || "--",
                color: value && value !== "--" ? factorToColor(item.code, value, props.timeType) : noDataColor
              };
            });
          }
        }
      });
    };
    onMounted(() => {
      fetchData();
    });
    watch([() => props.apiParams, () => props.timeType], () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`${clsfix}-container`)
      }, [
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-top`)
        }, [
          createElementVNode("div", {
            class: normalizeClass(`${clsfix}-top-left`)
          }, [
            createElementVNode("div", {
              class: "aqiValue",
              style: normalizeStyle({ color: realtimeData.aqiColor })
            }, toDisplayString(realtimeData.aqiVal), 5),
            createElementVNode("div", _hoisted_1, [
              _hoisted_2,
              createElementVNode("span", {
                style: normalizeStyle({ color: realtimeData.aqiColor })
              }, toDisplayString(realtimeData.aqiPollutionZh), 5)
            ])
          ], 2),
          createElementVNode("div", {
            class: normalizeClass(`${clsfix}-top-right`)
          }, [
            createElementVNode("span", _hoisted_3, toDisplayString(realtimeData.dataTime), 1),
            _hoisted_4,
            createElementVNode("span", {
              class: "value",
              style: normalizeStyle({ color: realtimeData.firstPollution === "--" ? noDataColor : void 0 })
            }, toDisplayString(realtimeData.firstPollution), 5)
          ], 2)
        ], 2),
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-center`)
        }, [
          createElementVNode("span", null, toDisplayString(props.timeType === "hour" ? "实时" : "今日") + "浓度", 1),
          _hoisted_5
        ], 2),
        createElementVNode("ul", {
          class: normalizeClass(`${clsfix}-bottom`)
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(realtimeData.factorList, (item) => {
            return openBlock(), createElementBlock("li", {
              key: item.code,
              class: normalizeClass(`${clsfix}-bottom-item`)
            }, [
              createElementVNode("span", {
                class: "value",
                style: normalizeStyle({ color: item.color })
              }, toDisplayString(item.value), 5),
              createElementVNode("span", {
                class: "line",
                style: normalizeStyle({ backgroundColor: item.color })
              }, null, 4),
              createElementVNode("span", _hoisted_6, toDisplayString(item.name), 1)
            ], 2);
          }), 128))
        ], 2)
      ], 2);
    };
  }
});

export { _sfc_main as default };