@ued_fpi/data-visual/dist/lib/aims/src/AirQualityPresentSituation/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("span", { class: "title" }, "综合指数", -1);
const _hoisted_2 = { class: "content" };
const _hoisted_3 = { class: "value" };
const _hoisted_4 = { class: "main" };
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "主要污染物", -1);
const _hoisted_6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "title" }, "优良率", -1);
const _hoisted_7 = { class: "content" };
const _hoisted_8 = { class: "value" };
const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("span", { class: "per" }, "%", -1);
const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("span", null, "污染物浓度", -1);
const _hoisted_11 = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(1, "h").valueOf(),
      gridCode: "0101000000",
      timeType: "year"
    }) }
  },
  setup(__props) {
    const props = __props;
    const realtimeData = vue.reactive({
      cieqVal: "--",
      firstPollution: "--",
      fineRate: "--",
      factorList: fpiTgFactorTools.BASE_FACTOR.filter((item) => item.code !== "aqi").map(
        (item) => {
          return {
            ...item,
            name: item.name,
            code: item.code,
            value: "--",
            color: noDataColor
          };
        }
      )
    });
    const fetchData = () => {
      index.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 !== "--" ? fpiTgFactorTools.factorToColor(item.code, obj.value, "day") : noDataColor
            };
          });
        }
      });
    };
    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("span", _hoisted_3, vue.toDisplayString(realtimeData.cieqVal), 1),
              vue.createElementVNode("div", _hoisted_4, [
                _hoisted_5,
                vue.createElementVNode("span", {
                  class: "factor",
                  style: vue.normalizeStyle({
                    color: realtimeData.firstPollution === "--" ? noDataColor : void 0
                  })
                }, vue.toDisplayString(realtimeData.firstPollution), 5)
              ])
            ])
          ], 2),
          vue.createElementVNode("div", {
            class: vue.normalizeClass(`${clsfix}-top-item`)
          }, [
            _hoisted_6,
            vue.createElementVNode("div", _hoisted_7, [
              vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(realtimeData.fineRate), 1),
              _hoisted_9
            ])
          ], 2)
        ], 2),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`${clsfix}-center`)
        }, _hoisted_12, 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_13, vue.toDisplayString(item.name), 1)
            ], 2);
          }), 128))
        ], 2)
      ], 2);
    };
  }
});

exports.default = _sfc_main;