@ued_fpi/data-visual
Version:
<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" />
182 lines (177 loc) • 6.3 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const es = require('element-plus/es');
require('element-plus/es/components/base/style/css');
require('element-plus/es/components/tooltip/style/css');
const vue = require('vue');
const percentBgDark = require('./images/percent-bg-dark.png.js');
const percentBgLight = require('./images/percent-bg-light.png.js');
const dayjs = require('dayjs');
const selectPanel_vue_vue_type_script_setup_true_name_SelectPanel_lang = require('../common/select-panel.vue.js');
require('../common/select-panel.vue2.js');
const utils = require('../../../utils.js');
const index = require('./api/index.js');
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: percentBgDark.default
};
const _hoisted_9 = {
key: 1,
class: "dv-wgms-fator-pie",
src: percentBgLight.default
};
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__ */ vue.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 } = utils.useThemeHook();
vue.watch(() => [props.beginTime, props.endTime, props.treeId, props.factorGroupId], () => {
getData();
});
const data = vue.reactive({
currCheck: 0,
list: [],
currLevel: "001"
});
vue.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" ? index.month : props.type === "factor" ? index.factor : index.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 } = vue.toRefs(data);
return (_ctx, _cache) => {
const _component_ElTooltip = es.ElTooltip;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", _hoisted_4, vue.toDisplayString(__props.title), 1),
vue.createElementVNode("div", _hoisted_5, [
vue.createVNode(selectPanel_vue_vue_type_script_setup_true_name_SelectPanel_lang.default, {
option: __props.selectList,
"label-style": { fontSize: "14px" },
"default-select": 0,
onChange: keyFactorsOrMonthCheck
}, null, 8, ["option"])
])
]),
vue.createElementVNode("div", _hoisted_6, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.name,
class: "dv-wgms-factor-body-item"
}, [
vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(typeof item.rate === "number" ? `${item.rate}%` : "--"), 1),
vue.unref(isDark) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_8)) : vue.createCommentVNode("", true),
!vue.unref(isDark) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_9)) : vue.createCommentVNode("", true),
item.name.length < 5 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, vue.toDisplayString(item.name), 1)) : (vue.openBlock(), vue.createBlock(_component_ElTooltip, {
key: 3,
content: item.name,
placement: "top",
effect: "dark"
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(item.name), 1)
]),
_: 2
}, 1032, ["content"]))
]);
}), 128)),
!vue.unref(list).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, " 暂无数据 ")) : vue.createCommentVNode("", true)
])
])
]);
};
}
});
exports.default = _sfc_main;