@ued_fpi/data-visual/dist/lib/aims/src/TargetAssessment/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 elementPlusExpand = require('@ued_fpi/element-plus-expand');
const dayjs = require('dayjs');
require('../common/BasicNoData/index.js');
const index$1 = require('./api/index.js');
const index = require('../common/BasicNoData/index.vue.js');

const clsfix = "dv-aims-target-assessment";
const _sfc_main = /* @__PURE__ */ vue.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 = vue.reactive({
      upToStandardNum: "--",
      notUpToStandardNum: "--",
      listData: [],
      scrollTime: 10
    });
    const { upToStandardNum, notUpToStandardNum, listData, scrollTime } = vue.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 = () => {
      index$1.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;
        }
      });
    };
    vue.onMounted(() => {
      if (props.isUseBuiltInApi)
        fetchData();
    });
    vue.watch(() => props.apiParams, () => {
      if (props.isUseBuiltInApi)
        fetchData();
    });
    vue.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 vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(`${clsfix}-container`)
      }, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`${clsfix}-header`)
        }, [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(`${clsfix}-header-item`)
          }, " 达标城市：" + vue.toDisplayString(vue.unref(upToStandardNum)), 3),
          vue.createElementVNode("div", {
            class: vue.normalizeClass(`${clsfix}-header-item`)
          }, " 未达标城市：" + vue.toDisplayString(vue.unref(notUpToStandardNum)), 3)
        ], 2),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`${clsfix}-list-wrap`)
        }, [
          vue.createElementVNode("ul", {
            class: vue.normalizeClass(`${clsfix}-list-header`)
          }, [
            (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(listConfig, (item) => {
              return vue.createElementVNode("li", {
                key: item.prop,
                style: vue.normalizeStyle({ width: item.width })
              }, vue.toDisplayString(item.name), 5);
            }), 64))
          ], 2),
          vue.unref(listData) && vue.unref(listData).length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlusExpand.FpiElRolling), {
            key: 0,
            style: { "height": "calc(100% - 27px)" },
            direction: "y",
            "scroll-able": "",
            time: vue.unref(scrollTime)
          }, {
            default: vue.withCtx(() => [
              vue.createElementVNode("ul", {
                class: vue.normalizeClass(`${clsfix}-list-content`)
              }, [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(listData), (item) => {
                  return vue.openBlock(), vue.createElementBlock("li", {
                    key: item.id
                  }, [
                    (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(listConfig, (innerItem) => {
                      return vue.createElementVNode("span", {
                        key: `${item.id}_${innerItem.prop}`,
                        style: vue.normalizeStyle({ width: innerItem.width, color: innerItem.prop === "targetStatusName" ? item.targetStatusColor : void 0 })
                      }, vue.toDisplayString(item[innerItem.prop]) + vue.toDisplayString(innerItem.prop.includes("Value") ? "%" : ""), 5);
                    }), 64))
                  ]);
                }), 128))
              ], 2)
            ]),
            _: 1
          }, 8, ["time"])) : (vue.openBlock(), vue.createBlock(vue.unref(index.default), { key: 1 }))
        ], 2)
      ], 2);
    };
  }
});

exports.default = _sfc_main;