@ued_fpi/data-visual/dist/es/aims/src/AirQualityPresentSituation/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, toDisplayString, normalizeStyle, Fragment, renderList } from 'vue';
import { BASE_FACTOR, factorToColor } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import { getCityDetail } from './api/index.mjs';

const _hoisted_1 = /* @__PURE__ */ createElementVNode("span", { class: "title" }, "综合指数", -1);
const _hoisted_2 = { class: "content" };
const _hoisted_3 = { class: "value" };
const _hoisted_4 = { class: "main" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "主要污染物", -1);
const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", { class: "title" }, "优良率", -1);
const _hoisted_7 = { class: "content" };
const _hoisted_8 = { class: "value" };
const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "per" }, "%", -1);
const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", null, "污染物浓度", -1);
const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", null, "（ 单位：μg/m³, CO：mg/m³ ）", -1);
const _hoisted_12 = [
  _hoisted_10,
  _hoisted_11
];
const _hoisted_13 = { class: "name" };
const clsfix = "dv-aims-air-quality-present-situation";
const noDataColor = "var(--dv-color-text-secondary)";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(1, "h").valueOf(),
      gridCode: "0101000000",
      timeType: "year"
    }) }
  },
  setup(__props) {
    const props = __props;
    const realtimeData = reactive({
      cieqVal: "--",
      firstPollution: "--",
      fineRate: "--",
      factorList: BASE_FACTOR.filter((item) => item.code !== "aqi").map(
        (item) => {
          return {
            ...item,
            name: item.name,
            code: item.code,
            value: "--",
            color: noDataColor
          };
        }
      )
    });
    const fetchData = () => {
      getCityDetail(props.apiParams).then((res) => {
        if (res.data) {
          realtimeData.cieqVal = Number.isNaN(Number(res.data.cieq)) ? "--" : Number(res.data.cieq).toFixed(2);
          realtimeData.firstPollution = res.data.mainPollutants;
          realtimeData.factorList = realtimeData.factorList.map((item) => {
            const obj = res.data?.commonFactorData.find((c) => c.code === item.code);
            return {
              ...item,
              value: obj ? obj.value : "--",
              color: obj && obj.value !== "--" ? factorToColor(item.code, obj.value, "day") : noDataColor
            };
          });
        }
      });
    };
    onMounted(() => {
      fetchData();
    });
    watch(() => props.apiParams, () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`${clsfix}-container`)
      }, [
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-top`)
        }, [
          createElementVNode("div", {
            class: normalizeClass(`${clsfix}-top-item`)
          }, [
            _hoisted_1,
            createElementVNode("div", _hoisted_2, [
              createElementVNode("span", _hoisted_3, toDisplayString(realtimeData.cieqVal), 1),
              createElementVNode("div", _hoisted_4, [
                _hoisted_5,
                createElementVNode("span", {
                  class: "factor",
                  style: normalizeStyle({
                    color: realtimeData.firstPollution === "--" ? noDataColor : void 0
                  })
                }, toDisplayString(realtimeData.firstPollution), 5)
              ])
            ])
          ], 2),
          createElementVNode("div", {
            class: normalizeClass(`${clsfix}-top-item`)
          }, [
            _hoisted_6,
            createElementVNode("div", _hoisted_7, [
              createElementVNode("span", _hoisted_8, toDisplayString(realtimeData.fineRate), 1),
              _hoisted_9
            ])
          ], 2)
        ], 2),
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-center`)
        }, _hoisted_12, 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_13, toDisplayString(item.name), 1)
            ], 2);
          }), 128))
        ], 2)
      ], 2);
    };
  }
});

export { _sfc_main as default };