@ued_fpi/data-visual/dist/lib/aims/src/AirQualityRealTimeAndDay/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 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 实时AQI ", -1);
const _hoisted_2 = { class: "aqi-container" };
const _hoisted_3 = { class: "aqiInfo" };
const _hoisted_4 = { class: "main" };
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "首污", -1);
const _hoisted_6 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, " 今日AQI ", -1);
const _hoisted_7 = { class: "aqi-container" };
const _hoisted_8 = { class: "aqiInfo" };
const _hoisted_9 = { class: "main" };
const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "首污", -1);
const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode("span", null, "污染物浓度", -1);
const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("span", null, "（ 单位：μg/m³, CO：mg/m³ ）", -1);
const _hoisted_13 = [
  _hoisted_11,
  _hoisted_12
];
const _hoisted_14 = /* @__PURE__ */ vue.createElementVNode("li", { class: "bottom-left-title" }, [
  /* @__PURE__ */ vue.createElementVNode("span", null, "实时"),
  /* @__PURE__ */ vue.createElementVNode("span", null, "今日")
], -1);
const _hoisted_15 = { class: "name" };
const clsfix = "dv-aims-air-quality-realtime-and-day";
const noDataColor = "var(--dv-color-text-secondary)";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(2, "h").valueOf(),
      gridCode: "0101000000"
    }) }
  },
  setup(__props) {
    const props = __props;
    const realtimeData = vue.reactive({
      hourV: "--",
      hourColor: noDataColor,
      hourPollutionZh: "--",
      hourMainPollutants: "--",
      dayV: "--",
      dayColor: noDataColor,
      dayPollutionZh: "--",
      dayMainPollutants: "--",
      factorList: fpiTgFactorTools.BASE_FACTOR.filter((item) => item.code !== "aqi").map(
        (item) => {
          return {
            name: item.name,
            code: item.code,
            key: item.key,
            hourV: "--",
            hourColor: noDataColor,
            dayV: "--",
            dayColor: noDataColor
          };
        }
      )
    });
    const fetchData = () => {
      const p1 = index.getAirQuality({ ...props.apiParams, timeType: "hour" });
      const p2 = index.getAirQuality({ ...props.apiParams, timeType: "day" });
      Promise.all([p1, p2]).then((res) => {
        let hourData = null;
        let dayData = null;
        let factorList = realtimeData.factorList;
        if (res[0] && res[0].data) {
          const data = res[0].data;
          const level = fpiTgFactorTools.factorToLevel("aqi", data.aqi, "hour");
          hourData = {
            hourV: data.aqi,
            hourColor: level >= 0 ? fpiTgFactorTools.factorToColor("aqi", data.aqi, "hour") : noDataColor,
            hourPollutionZh: data.airQuality,
            hourMainPollutants: data.mainPollutants
          };
          factorList = factorList.map((item) => {
            const obj = data.commonFactors.find(
              (c) => c.key === item.key
            );
            return {
              ...item,
              hourV: obj?.value ? obj.value : "--",
              hourColor: obj && obj.value && obj.value !== "--" ? fpiTgFactorTools.factorToColor(item.code, obj.value, "hour") : noDataColor
            };
          });
        }
        if (res[1] && res[1].data) {
          const data = res[1].data;
          const level = fpiTgFactorTools.factorToLevel("aqi", data.aqi, "day");
          dayData = {
            dayV: data.aqi,
            dayColor: level >= 0 ? fpiTgFactorTools.factorToColor("aqi", data.aqi, "day") : noDataColor,
            dayPollutionZh: data.airQuality,
            dayMainPollutants: data.mainPollutants
          };
          factorList = factorList.map((item) => {
            const obj = data.commonFactors.find(
              (c) => c.key === item.key
            );
            return {
              ...item,
              dayV: obj?.value ? obj.value : "--",
              dayColor: obj && obj.value && obj.value !== "--" ? fpiTgFactorTools.factorToColor(item.code, obj.value, "day") : noDataColor
            };
          });
        }
        Object.assign(realtimeData, hourData, dayData, { factorList });
      });
    };
    vue.onMounted(() => {
      fetchData();
    });
    vue.watch(
      () => props.apiParams,
      () => {
        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-item`)
          }, [
            _hoisted_1,
            vue.createElementVNode("div", _hoisted_2, [
              vue.createElementVNode("div", {
                class: "aqiValue",
                style: vue.normalizeStyle({ color: realtimeData.hourColor })
              }, vue.toDisplayString(realtimeData.hourV), 5),
              vue.createElementVNode("div", _hoisted_3, [
                vue.createElementVNode("span", {
                  class: "pollution-zh",
                  style: vue.normalizeStyle({ color: realtimeData.hourColor })
                }, vue.toDisplayString(realtimeData.hourPollutionZh), 5),
                vue.createElementVNode("div", _hoisted_4, [
                  _hoisted_5,
                  vue.createElementVNode("span", {
                    class: "value",
                    style: vue.normalizeStyle({
                      color: realtimeData.hourMainPollutants === "--" ? noDataColor : void 0
                    })
                  }, vue.toDisplayString(realtimeData.hourMainPollutants), 5)
                ])
              ])
            ])
          ], 2),
          vue.createElementVNode("div", {
            class: vue.normalizeClass(`${clsfix}-top-item`)
          }, [
            _hoisted_6,
            vue.createElementVNode("div", _hoisted_7, [
              vue.createElementVNode("div", {
                class: "aqiValue",
                style: vue.normalizeStyle({ color: realtimeData.dayColor })
              }, vue.toDisplayString(realtimeData.dayV), 5),
              vue.createElementVNode("div", _hoisted_8, [
                vue.createElementVNode("span", {
                  class: "pollution-zh",
                  style: vue.normalizeStyle({ color: realtimeData.dayColor })
                }, vue.toDisplayString(realtimeData.dayPollutionZh), 5),
                vue.createElementVNode("div", _hoisted_9, [
                  _hoisted_10,
                  vue.createElementVNode("span", {
                    class: "value",
                    style: vue.normalizeStyle({
                      color: realtimeData.dayMainPollutants === "--" ? noDataColor : void 0
                    })
                  }, vue.toDisplayString(realtimeData.dayMainPollutants), 5)
                ])
              ])
            ])
          ], 2)
        ], 2),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`${clsfix}-center`)
        }, _hoisted_13, 2),
        vue.createElementVNode("ul", {
          class: vue.normalizeClass(`${clsfix}-bottom`)
        }, [
          _hoisted_14,
          (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", _hoisted_15, vue.toDisplayString(item.name), 1),
              vue.createElementVNode("span", {
                class: "value",
                style: vue.normalizeStyle({ color: item.hourColor })
              }, vue.toDisplayString(item.hourV), 5),
              vue.createElementVNode("span", {
                class: "line",
                style: vue.normalizeStyle({ backgroundColor: item.hourColor })
              }, null, 4),
              vue.createElementVNode("span", {
                class: "value",
                style: vue.normalizeStyle({ color: item.dayColor })
              }, vue.toDisplayString(item.dayV), 5),
              vue.createElementVNode("span", {
                class: "line",
                style: vue.normalizeStyle({ backgroundColor: item.dayColor, marginBottom: 0 })
              }, null, 4)
            ], 2);
          }), 128))
        ], 2)
      ], 2);
    };
  }
});

exports.default = _sfc_main;