@ued_fpi/data-visual/dist/es/aims/src/CieqContributionAnalysis/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 __vite_glob_1_0 from './images/flat.png.mjs';
import __vite_glob_1_1 from './images/flat_white.png.mjs';
import __vite_glob_1_2 from './images/green_down.png.mjs';
import __vite_glob_1_3 from './images/green_down_white.png.mjs';
import __vite_glob_1_4 from './images/red_up.png.mjs';
import __vite_glob_1_5 from './images/red_up_white.png.mjs';
import { defineComponent, computed, reactive, toRefs, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, unref, normalizeStyle, toDisplayString, createBlock, withCtx, createCommentVNode } from 'vue';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import dayjs from 'dayjs';
import '../common/BasicNoData/index.mjs';
import { useThemeHook } from '../../../utils.mjs';
import { getContributionAnalyze, getExcellentRate } from './api/index.mjs';
import _BasicNoData from '../common/BasicNoData/index.vue.mjs';

const _hoisted_1 = {
  key: 0,
  class: "period"
};
const _hoisted_2 = ["src"];
const clsfix = "dv-aims-cieq-contributio-andlysis";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    isUseBuiltInApi: { type: Boolean, default: true },
    apiParams: { default: () => ({
      gridCode: "0101000000",
      startTime: dayjs().startOf("year").valueOf(),
      endTime: dayjs().endOf("year").valueOf(),
      order: "currentValue",
      isAsc: false,
      type: "grid"
    }) },
    rankType: { default: "cieq" },
    data: {},
    areaType: { default: "city" }
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useThemeHook();
    const listConfig = computed(() => {
      return [
        {
          name: "排名",
          prop: "rank",
          width: "64px"
        },
        {
          name: props.areaType === "province" ? "城市" : "区域",
          prop: "name",
          width: "80px"
        },
        {
          name: "本期",
          prop: "currentValue",
          width: "72px"
        },
        {
          name: "同期",
          prop: "pastValue",
          width: "72px"
        },
        {
          name: "变化率",
          prop: "changeValue",
          width: "88px"
        }
      ];
    });
    const state = reactive({
      listData: [],
      scrollTime: 5
    });
    const {
      listData,
      scrollTime
    } = toRefs(state);
    const fetchData = () => {
      if (props.rankType === "cieq") {
        getContributionAnalyze({ ...props.apiParams, gridLevelNickName: props.areaType }).then((res) => {
          if (res.data)
            handlerData(res.data);
        });
      } else if (props.rankType === "excellent") {
        getExcellentRate({ ...props.apiParams, gridLevelNickName: props.areaType }).then((res) => {
          if (res.data && res.data.fineRate)
            handlerData(res.data.fineRate);
        });
      }
    };
    const handlerData = (data) => {
      state.listData = data.map((item) => {
        const obj = {
          ...item
        };
        obj.ratioColor = obj.changeValue > 0 ? "var(--dv-color-success)" : obj.changeValue < 0 ? "var(--dv-color-danger)" : obj.changeValue === 0 ? "var(--dv-color-index)" : "var(--dv-color-text-primary)";
        obj.arrowClass = obj.changeValue > 0 ? "" : obj.changeValue < 0 ? "" : "flat";
        obj.arrowUrl = new URL((/* #__PURE__ */ Object.assign({"./images/flat.png": __vite_glob_1_0,"./images/flat_white.png": __vite_glob_1_1,"./images/green_down.png": __vite_glob_1_2,"./images/green_down_white.png": __vite_glob_1_3,"./images/red_up.png": __vite_glob_1_4,"./images/red_up_white.png": __vite_glob_1_5}))[`./images/${obj.changeValue > 0 ? "green_down" : obj.changeValue < 0 ? "red_up" : "flat"}.png`], self.location);
        obj.whiteArrowUrl = new URL((/* #__PURE__ */ Object.assign({"./images/flat.png": __vite_glob_1_0,"./images/flat_white.png": __vite_glob_1_1,"./images/green_down.png": __vite_glob_1_2,"./images/green_down_white.png": __vite_glob_1_3,"./images/red_up.png": __vite_glob_1_4,"./images/red_up_white.png": __vite_glob_1_5}))[`./images/${obj.changeValue > 0 ? "green_down_white" : obj.changeValue < 0 ? "red_up_white" : "flat_white"}.png`], self.location);
        return obj;
      });
    };
    onMounted(() => {
      if (props.isUseBuiltInApi)
        fetchData();
    });
    watch([() => props.apiParams, () => props.areaType], () => {
      if (props.isUseBuiltInApi)
        fetchData();
    });
    watch(() => props.data, () => {
      if (!props.isUseBuiltInApi && props.data) {
        Object.assign(state, props.data);
        handlerData(props.data.listData);
      }
    }, { deep: false, immediate: true });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`${clsfix}-container`)
      }, [
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-list-wrap`)
        }, [
          createElementVNode("ul", {
            class: normalizeClass(`${clsfix}-list-header`)
          }, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(listConfig), (item) => {
              return openBlock(), createElementBlock("li", {
                key: item.prop,
                style: normalizeStyle({ width: item.width })
              }, toDisplayString(item.name), 5);
            }), 128))
          ], 2),
          unref(listData) && unref(listData).length ? (openBlock(), createBlock(unref(FpiElRolling), {
            key: 0,
            style: { "height": "calc(100% - 27px)" },
            direction: "y",
            "scroll-able": "",
            time: unref(scrollTime)
          }, {
            default: withCtx(() => [
              createElementVNode("ul", {
                class: normalizeClass(`${clsfix}-list-content`)
              }, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(listData), (item) => {
                  return openBlock(), createElementBlock("li", {
                    key: item.id
                  }, [
                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(listConfig), (innerItem) => {
                      return openBlock(), createElementBlock("div", {
                        key: `${item.id}_${innerItem.prop}`,
                        style: normalizeStyle({ width: innerItem.width })
                      }, [
                        innerItem.prop === "changeValue" ? (openBlock(), createElementBlock("div", _hoisted_1, [
                          createElementVNode("span", {
                            class: "value",
                            style: normalizeStyle({ color: item.ratioColor })
                          }, toDisplayString(item.changeValue === "--" ? "--" : `${Math.abs(Number(item.changeValue))}%`), 5),
                          item.changeValue !== "--" ? (openBlock(), createElementBlock("img", {
                            key: 0,
                            class: normalizeClass(item.arrowClass),
                            src: unref(isDark) ? item.arrowUrl : item.whiteArrowUrl
                          }, null, 10, _hoisted_2)) : createCommentVNode("", true)
                        ])) : (openBlock(), createElementBlock("div", {
                          key: 1,
                          class: normalizeClass(innerItem.prop === "name" ? "" : "value")
                        }, toDisplayString(item[innerItem.prop]), 3))
                      ], 4);
                    }), 128))
                  ]);
                }), 128))
              ], 2)
            ]),
            _: 1
          }, 8, ["time"])) : (openBlock(), createBlock(unref(_BasicNoData), { key: 1 }))
        ], 2)
      ], 2);
    };
  }
});

export { _sfc_main as default };