@ued_fpi/data-visual/dist/lib/aims/src/AirQualityRealTime/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 fpiTgFactorTools = require('fpi-tg-factor-tools');
const dayjs = require('dayjs');
const index = require('./api/index.js');

const _hoisted_1 = { class: "aqiInfo" };
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("span", null, "AQI", -1);
const _hoisted_3 = { class: "data-time" };
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "首要污染物", -1);
const _hoisted_5 = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().valueOf(),
      gridCode: "01010000",
      gridLevelNickName: "city"
    }) },
    timeType: { default: "hour" }
  },
  setup(__props) {
    const props = __props;
    const realtimeData = vue.reactive({
      aqiVal: "--",
      aqiColor: noDataColor,
      aqiPollutionZh: "--",
      firstPollution: "--",
      dataTime: "--",
      factorList: fpiTgFactorTools.BASE_FACTOR.filter((item) => item.code !== "aqi").map(
        (item) => {
          return {
            name: item.name,
            code: item.code,
            key: item.key,
            value: "--",
            color: noDataColor
          };
        }
      )
    });
    const fetchData = () => {
      index.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 = fpiTgFactorTools.factorToLevel("aqi", realtimeData.aqiVal, props.timeType);
            realtimeData.aqiColor = level >= 0 ? fpiTgFactorTools.factorToColor("aqi", realtimeData.aqiVal, props.timeType) : noDataColor;
            realtimeData.aqiPollutionZh = level >= 0 ? fpiTgFactorTools.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 !== "--" ? fpiTgFactorTools.factorToColor(item.code, value, props.timeType) : noDataColor
              };
            });
          }
        }
      });
    };
    vue.onMounted(() => {
      fetchData();
    });
    vue.watch([() => props.apiParams, () => props.timeType], () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(`${clsfix}-container`)
      }, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`${clsfix}-top`)
        }, [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(`${clsfix}-top-left`)
          }, [
            vue.createElementVNode("div", {
              class: "aqiValue",
              style: vue.normalizeStyle({ color: realtimeData.aqiColor })
            }, vue.toDisplayString(realtimeData.aqiVal), 5),
            vue.createElementVNode("div", _hoisted_1, [
              _hoisted_2,
              vue.createElementVNode("span", {
                style: vue.normalizeStyle({ color: realtimeData.aqiColor })
              }, vue.toDisplayString(realtimeData.aqiPollutionZh), 5)
            ])
          ], 2),
          vue.createElementVNode("div", {
            class: vue.normalizeClass(`${clsfix}-top-right`)
          }, [
            vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(realtimeData.dataTime), 1),
            _hoisted_4,
            vue.createElementVNode("span", {
              class: "value",
              style: vue.normalizeStyle({ color: realtimeData.firstPollution === "--" ? noDataColor : void 0 })
            }, vue.toDisplayString(realtimeData.firstPollution), 5)
          ], 2)
        ], 2),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`${clsfix}-center`)
        }, [
          vue.createElementVNode("span", null, vue.toDisplayString(props.timeType === "hour" ? "实时" : "今日") + "浓度", 1),
          _hoisted_5
        ], 2),
        vue.createElementVNode("ul", {
          class: vue.normalizeClass(`${clsfix}-bottom`)
        }, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(realtimeData.factorList, (item) => {
            return vue.openBlock(), vue.createElementBlock("li", {
              key: item.code,
              class: vue.normalizeClass(`${clsfix}-bottom-item`)
            }, [
              vue.createElementVNode("span", {
                class: "value",
                style: vue.normalizeStyle({ color: item.color })
              }, vue.toDisplayString(item.value), 5),
              vue.createElementVNode("span", {
                class: "line",
                style: vue.normalizeStyle({ backgroundColor: item.color })
              }, null, 4),
              vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(item.name), 1)
            ], 2);
          }), 128))
        ], 2)
      ], 2);
    };
  }
});

exports.default = _sfc_main;