@ued_fpi/data-visual/dist/es/wgms/src/EnvironmentalAnalysis/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 } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/tooltip/style/css';
import { defineComponent, watch, reactive, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, Fragment, renderList, unref, createCommentVNode, createBlock, withCtx } from 'vue';
import _imports_0 from './images/percent-bg-dark.png.mjs';
import _imports_1 from './images/percent-bg-light.png.mjs';
import dayjs from 'dayjs';
import _sfc_main$1 from '../common/select-panel.vue.mjs';
import '../common/select-panel.vue2.mjs';
import { useThemeHook } from '../../../utils.mjs';
import { month, factor, getKeyArea } from './api/index.mjs';

const _hoisted_1 = { class: "dv-wgms-environmental-analysis" };
const _hoisted_2 = { class: "dv-wgms-factor-box" };
const _hoisted_3 = { class: "dv-wgms-factor-top" };
const _hoisted_4 = { class: "dv-wgms-factor-top-name" };
const _hoisted_5 = { class: "dv-wgms-right-select" };
const _hoisted_6 = { class: "dv-wgms-factor-body" };
const _hoisted_7 = { class: "dv-wgms-factor-value" };
const _hoisted_8 = {
  key: 0,
  class: "dv-wgms-fator-pie",
  src: _imports_0
};
const _hoisted_9 = {
  key: 1,
  class: "dv-wgms-fator-pie",
  src: _imports_1
};
const _hoisted_10 = {
  key: 2,
  class: "dv-wgms-factor-name"
};
const _hoisted_11 = { class: "dv-wgms-factor-name" };
const _hoisted_12 = {
  key: 0,
  class: "dv-wgms-environmental-no-data"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "DvWgmsEnvironmentalAnalysis",
    title: "重点因子、月份、区域、时段"
  },
  __name: "index",
  props: {
    beginTime: {
      type: Number,
      default: dayjs().startOf("year").valueOf()
    },
    endTime: {
      type: Number,
      default: dayjs().endOf("year").valueOf()
    },
    factorGroupId: {
      type: [Number, String],
      default: 8
    },
    treeId: {
      type: [Number, String],
      default: 3301
    },
    treeType: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: "断面达标率后三名"
    },
    type: {
      type: String,
      default: "factor"
    },
    limitType: {
      type: String,
      default: "top"
    },
    limitNum: {
      type: Number,
      default: 3
    },
    selectList: {
      type: Array,
      default: () => [
        { label: "国控", value: "001" },
        { label: "省控", value: "001,002" },
        { label: "市控", value: "001,002,003" },
        { label: "县控以上", value: "001,002,003,004" }
      ]
    },
    url: {
      type: String
    }
  },
  emits: ["selectChange"],
  setup(__props, { emit }) {
    const props = __props;
    const { isDark } = useThemeHook();
    watch(() => [props.beginTime, props.endTime, props.treeId, props.factorGroupId], () => {
      getData();
    });
    const data = reactive({
      currCheck: 0,
      list: [],
      currLevel: "001"
    });
    onMounted(async () => {
      getData();
    });
    const getData = async (controlLevel = "001") => {
      const params = {
        treeId: props.treeId,
        treeType: props.treeType,
        beginTime: props.beginTime,
        endTime: props.endTime,
        queryTimeType: "year",
        factorFlag: true,
        factor: props.factorGroupId,
        controlLevel,
        childFlag: 0
      };
      const res = await (props.type === "month" ? month : props.type === "factor" ? factor : getKeyArea)(params, { url: props.url });
      const resData = res.data || [];
      data.list = props.limitType === "top" ? resData.slice(0, props.limitNum) : resData.slice(-props.limitNum);
    };
    const keyFactorsOrMonthCheck = (item, index) => {
      data.currLevel = item.value;
      getData(data.currLevel);
      emit("selectChange", item, index);
    };
    const { list } = toRefs(data);
    return (_ctx, _cache) => {
      const _component_ElTooltip = ElTooltip;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", _hoisted_3, [
            createElementVNode("div", _hoisted_4, toDisplayString(__props.title), 1),
            createElementVNode("div", _hoisted_5, [
              createVNode(_sfc_main$1, {
                option: __props.selectList,
                "label-style": { fontSize: "14px" },
                "default-select": 0,
                onChange: keyFactorsOrMonthCheck
              }, null, 8, ["option"])
            ])
          ]),
          createElementVNode("div", _hoisted_6, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (item) => {
              return openBlock(), createElementBlock("div", {
                key: item.name,
                class: "dv-wgms-factor-body-item"
              }, [
                createElementVNode("div", _hoisted_7, toDisplayString(typeof item.rate === "number" ? `${item.rate}%` : "--"), 1),
                unref(isDark) ? (openBlock(), createElementBlock("img", _hoisted_8)) : createCommentVNode("", true),
                !unref(isDark) ? (openBlock(), createElementBlock("img", _hoisted_9)) : createCommentVNode("", true),
                item.name.length < 5 ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(item.name), 1)) : (openBlock(), createBlock(_component_ElTooltip, {
                  key: 3,
                  content: item.name,
                  placement: "top",
                  effect: "dark"
                }, {
                  default: withCtx(() => [
                    createElementVNode("div", _hoisted_11, toDisplayString(item.name), 1)
                  ]),
                  _: 2
                }, 1032, ["content"]))
              ]);
            }), 128)),
            !unref(list).length ? (openBlock(), createElementBlock("div", _hoisted_12, " 暂无数据 ")) : createCommentVNode("", true)
          ])
        ])
      ]);
    };
  }
});

export { _sfc_main as default };