@ued_fpi/data-visual/dist/es/aims/src/TargetAssessment/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, toRefs, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, unref, Fragment, renderList, normalizeStyle, createBlock, withCtx } from 'vue';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import dayjs from 'dayjs';
import '../common/BasicNoData/index.mjs';
import { getScreenCityList } from './api/index.mjs';
import _BasicNoData from '../common/BasicNoData/index.vue.mjs';

const clsfix = "dv-aims-target-assessment";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    isUseBuiltInApi: { type: Boolean, default: true },
    apiParams: { default: () => ({
      year: dayjs().valueOf(),
      gridLevel: "city",
      gridCode: "01010000",
      itemCode: "fineRate",
      targetTypeCode: "annuallyTarget"
    }) },
    data: {}
  },
  setup(__props) {
    const props = __props;
    const listConfig = [
      {
        name: "序号",
        prop: "rank",
        width: "40px"
      },
      {
        name: "城市",
        prop: "gridName",
        width: "96px"
      },
      {
        name: "目标",
        prop: "targetValue",
        width: "80px"
      },
      {
        name: "实测",
        prop: "realValue",
        width: "80px"
      },
      {
        name: "完成情况",
        prop: "targetStatusName",
        width: "80px"
      }
    ];
    const state = reactive({
      upToStandardNum: "--",
      notUpToStandardNum: "--",
      listData: [],
      scrollTime: 10
    });
    const { upToStandardNum, notUpToStandardNum, listData, scrollTime } = toRefs(state);
    const targetStatusMap = {
      0: "var(--dv-color-text-primary)",
      1: "var(--dv-color-danger)",
      2: "var(--dv-color-success)",
      3: "var(--dv-color-danger)",
      4: "var(--dv-color-success)"
    };
    const fetchData = () => {
      getScreenCityList(props.apiParams).then((res) => {
        if (res.data) {
          state.upToStandardNum = String(res.data.compliance);
          state.notUpToStandardNum = String(res.data.notCompliance);
          state.listData = res.data.cityTargetVos.map((c, index) => ({ ...c, rank: index + 1, targetStatusColor: targetStatusMap[c.targetStatus] || "var(--dv-color-text-primary)" }));
          state.scrollTime = state.listData.length * 1.25;
        }
      });
    };
    onMounted(() => {
      if (props.isUseBuiltInApi)
        fetchData();
    });
    watch(() => props.apiParams, () => {
      if (props.isUseBuiltInApi)
        fetchData();
    });
    watch(() => props.data, () => {
      if (!props.isUseBuiltInApi && props.data) {
        state.upToStandardNum = props.data.upToStandardNum;
        state.notUpToStandardNum = props.data.notUpToStandardNum;
        state.listData = props.data.listData.map((c, index) => ({ ...c, rank: index + 1, targetStatusColor: targetStatusMap[c.targetStatus || "null"] || "var(--dv-color-text-primary)" }));
        state.scrollTime = props.data.listData.length * 1.25;
      }
      Object.assign(state, props.data);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`${clsfix}-container`)
      }, [
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-header`)
        }, [
          createElementVNode("div", {
            class: normalizeClass(`${clsfix}-header-item`)
          }, " 达标城市：" + toDisplayString(unref(upToStandardNum)), 3),
          createElementVNode("div", {
            class: normalizeClass(`${clsfix}-header-item`)
          }, " 未达标城市：" + toDisplayString(unref(notUpToStandardNum)), 3)
        ], 2),
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-list-wrap`)
        }, [
          createElementVNode("ul", {
            class: normalizeClass(`${clsfix}-list-header`)
          }, [
            (openBlock(), createElementBlock(Fragment, null, renderList(listConfig, (item) => {
              return createElementVNode("li", {
                key: item.prop,
                style: normalizeStyle({ width: item.width })
              }, toDisplayString(item.name), 5);
            }), 64))
          ], 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(), createElementBlock(Fragment, null, renderList(listConfig, (innerItem) => {
                      return createElementVNode("span", {
                        key: `${item.id}_${innerItem.prop}`,
                        style: normalizeStyle({ width: innerItem.width, color: innerItem.prop === "targetStatusName" ? item.targetStatusColor : void 0 })
                      }, toDisplayString(item[innerItem.prop]) + toDisplayString(innerItem.prop.includes("Value") ? "%" : ""), 5);
                    }), 64))
                  ]);
                }), 128))
              ], 2)
            ]),
            _: 1
          }, 8, ["time"])) : (openBlock(), createBlock(unref(_BasicNoData), { key: 1 }))
        ], 2)
      ], 2);
    };
  }
});

export { _sfc_main as default };