@ued_fpi/data-visual/dist/es/wgms/src/SubordinateRanking/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 { ElTooltip, ElScrollbar } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import 'element-plus/es/components/tooltip/style/css';
import { defineComponent, reactive, watch, onMounted, toRefs, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, unref, createElementVNode, toDisplayString, createBlock } from 'vue';
import dayjs from 'dayjs';
import _sfc_main$1 from '../common/ProgressBar.vue.mjs';
import '../common/ProgressBar.vue2.mjs';
import { waterSubordinateRanking } from './api/index.mjs';

const _hoisted_1 = { class: "dv-wgms-subordinate-ranking-table" };
const _hoisted_2 = { class: "dv-wgms-subordinate-ranking-sort" };
const _hoisted_3 = {
  key: 0,
  class: "dv-wgms-subordinate-ranking-name"
};
const _hoisted_4 = { class: "dv-wgms-subordinate-ranking-name" };
const _hoisted_5 = { class: "dv-wgms-subordinate-ranking-percent" };
const _hoisted_6 = { class: "dv-wgms-ranking-percent-progress" };
const _hoisted_7 = { class: "dv-wgms-ranking-percent-num" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "DvWgmsSubordinateRanking",
    title: "下级排名"
  },
  __name: "index",
  props: {
    treeId: {
      type: [Number, String],
      default: 3302
    },
    beginTime: {
      type: Number,
      default: dayjs().startOf("year").valueOf()
    },
    endTime: {
      type: Number,
      default: dayjs().subtract(-1, "y").startOf("year").valueOf()
    },
    timeType: {
      type: String,
      default: "year"
    },
    controlLevel: {
      type: String,
      default: "001,002,003"
    },
    isLazy: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const data = reactive({
      isLoading: false,
      curYear: dayjs().format("YYYY"),
      countyData: props.data,
      controlLevel: ""
    });
    watch(() => props.data, (val) => {
      data.countyData = val;
    });
    watch(() => [props.timeType, props.controlLevel, props.beginTime, props.endTime, props.treeId], () => {
      getRankData();
    });
    onMounted(() => {
      !props.isLazy && getRankData();
    });
    const reload = () => {
      getRankData();
    };
    const getRankData = async () => {
      data.isLoading = true;
      const params = {
        controlLevel: props.controlLevel,
        treeId: props.treeId,
        startTime: props.beginTime,
        endTime: props.endTime,
        timeType: props.timeType
      };
      const res = await waterSubordinateRanking(params);
      data.countyData = res?.data || [];
    };
    const { countyData } = toRefs(data);
    __expose({
      reload
    });
    return (_ctx, _cache) => {
      const _component_ElTooltip = ElTooltip;
      const _component_el_scrollbar = ElScrollbar;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_el_scrollbar, { class: "dv-wgms-sub-scroll-table" }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(countyData), (item, index) => {
              return openBlock(), createElementBlock("div", {
                key: index,
                class: "dv-wgms-subordinate-ranking-list"
              }, [
                createElementVNode("span", _hoisted_2, toDisplayString(item.rankNo ? `TOP${item.rankNo}` : "--"), 1),
                item.regionName.length < 6 ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(item.regionName), 1)) : (openBlock(), createBlock(_component_ElTooltip, {
                  key: 1,
                  content: item.regionName,
                  placement: "top",
                  effect: "dark"
                }, {
                  default: withCtx(() => [
                    createElementVNode("div", _hoisted_4, toDisplayString(item.regionName), 1)
                  ]),
                  _: 2
                }, 1032, ["content"])),
                createElementVNode("div", _hoisted_5, [
                  createElementVNode("div", _hoisted_6, [
                    createVNode(_sfc_main$1, {
                      "active-color": "linear-gradient(270deg, var(--dv-color-index) 0%, var(--dv-color-index-30) 100%)",
                      "handle-style": {
                        background: "var(--dv-color-index)",
                        width: "2px",
                        height: "12px"
                      },
                      percentage: Number(item.percent)
                    }, null, 8, ["handle-style", "percentage"])
                  ]),
                  createElementVNode("span", _hoisted_7, toDisplayString(item.percent ?? "--") + "%", 1)
                ])
              ]);
            }), 128))
          ]),
          _: 1
        })
      ]);
    };
  }
});

export { _sfc_main as default };