@ued_fpi/data-visual/dist/lib/aims/src/MainPollutionYearRatioList/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 tools = require('../../utils/tools.js');
const index = require('./api/index.js');

const _hoisted_1 = { class: "progress-box" };
const _hoisted_2 = { class: "name" };
const _hoisted_3 = { class: "bar" };
const clsfix = "dv-aims-main-pollution-year-ratio-list";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(1, "h").valueOf(),
      code: "0101000000",
      codeType: "grid"
    }) }
  },
  setup(__props) {
    const props = __props;
    const showList = vue.shallowRef([]);
    const fetchData = () => {
      const colors = [
        "#0062FF",
        "#0AAEFF",
        "#2AC94F",
        "#FF792E",
        "#F84439",
        "#FFB443",
        "rgb(154, 154, 154)"
      ];
      index.getAirQualityStatis(props.apiParams).then((res) => {
        if (res.data && res.data.primaryPollutant.primaryYearSum) {
          const data = res.data.primaryPollutant.primaryYearSum;
          const rawList = fpiTgFactorTools.BASE_FACTOR.filter((item) => item.code !== "aqi");
          rawList.push({
            name: "无首污",
            key: "noMainPollutant",
            code: "noMainPollutant",
            unit: "",
            key3: ""
          });
          const renderData = rawList.map((item, index) => {
            const v = data[item.key];
            const rate = (v / data.total * 100).toFixed(1);
            const color = colors[index];
            return {
              name: item.name,
              progress: rate,
              color,
              bgColor: `linear-gradient(270deg, ${color} 0%, ${tools.getHexOpacityColor(color, 0.2)} 100%)`,
              showBar: Number(rate) > 0
            };
          });
          showList.value = renderData;
        }
      });
    };
    vue.onMounted(() => {
      fetchData();
    });
    vue.watch(() => props.apiParams, () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("ul", {
        class: vue.normalizeClass(`${clsfix}-list-wrap`)
      }, [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(showList.value, (item) => {
          return vue.openBlock(), vue.createElementBlock("li", {
            key: item.name,
            class: vue.normalizeClass(`${clsfix}-list-item`)
          }, [
            vue.createElementVNode("div", _hoisted_1, [
              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(item.name), 1),
              vue.createElementVNode("span", _hoisted_3, [
                vue.withDirectives(vue.createElementVNode("span", {
                  class: "progress-bar",
                  style: vue.normalizeStyle({ width: `${item.progress}%`, background: item.bgColor })
                }, null, 4), [
                  [vue.vShow, item.showBar]
                ])
              ])
            ]),
            vue.createElementVNode("span", {
              class: "value",
              style: vue.normalizeStyle({ color: item.color })
            }, vue.toDisplayString(item.progress) + "%", 5)
          ], 2);
        }), 128))
      ], 2);
    };
  }
});

exports.default = _sfc_main;