@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" />
161 lines (156 loc) • 6.37 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const elementPlusExpand = require('@ued_fpi/element-plus-expand');
const fpiTgFactorTools = require('fpi-tg-factor-tools');
const dayjs = require('dayjs');
require('../common/BasicNoData/index.js');
const tools = require('../../utils/tools.js');
const index$1 = require('./api/index.js');
const index = require('../common/BasicNoData/index.vue.js');
const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("li", null, null, -1);
const _hoisted_2 = { class: "rank" };
const _hoisted_3 = { class: "progress-box" };
const _hoisted_4 = { class: "name" };
const _hoisted_5 = { class: "bar" };
const clsfix = "dv-aims-factor-realtime-rank-list";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
isUseBuiltInApi: { type: Boolean, default: true },
apiParams: { default: () => ({
time: dayjs().subtract(1, "h").valueOf(),
gridCode: "0101000000",
timeType: "hour",
siteTypeCodes: "A91230101,A91230102,A91230103",
type: "site",
isAsc: false
}) },
factorCode: { default: "aqi" },
columnNames: { default: () => ["站点", "AQI"] },
list: { default: void 0 }
},
setup(__props) {
const props = __props;
const time = vue.ref(10);
const showList = vue.shallowRef([]);
const isLoaded = vue.ref(false);
const findMaxValue = (list) => {
let maxValue = 0;
list.forEach((item) => {
if (item.value > maxValue)
maxValue = item.value;
});
maxValue = maxValue / 0.8;
return maxValue;
};
const fetchData = () => {
index$1.getSiteRank({ ...props.apiParams, factorCode: props.factorCode }).then((res) => {
if (res.data && res.data.entries) {
const key = fpiTgFactorTools.BASE_FACTOR.find((c) => c.code === props.factorCode)?.name;
const list = res.data.entries.map((item) => {
let value = item[key];
value = Number(value) > 0 ? Number(value) : "--";
return {
rank: item.rank,
name: item.name,
value
};
});
const maxValue = findMaxValue(list);
showList.value = list.map((item) => {
const color = fpiTgFactorTools.factorToColor(props.factorCode, item.value, "hour");
return {
...item,
progress: item.value / maxValue * 100,
color,
bgColor: `linear-gradient(270deg, ${color} 0%, ${tools.getHexOpacityColor(color, 0.2)} 100%)`,
showBar: Number(item.value) > 0
};
});
time.value = showList.value.length * 1.2;
isLoaded.value = true;
}
});
};
vue.onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch([() => props.apiParams, () => props.factorCode], () => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch([() => props.list, () => props.factorCode], () => {
if (!props.isUseBuiltInApi && props.list) {
const maxValue = findMaxValue(props.list);
showList.value = props.list.map((item) => {
return {
...item,
progress: item.value / maxValue * 100,
color: fpiTgFactorTools.factorToColor(props.factorCode, item.value, "hour"),
showBar: Number(item.value) > 0
};
});
time.value = showList.value.length * 1.2;
isLoaded.value = true;
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${clsfix}-container`)
}, [
isLoaded.value && showList.value.length ? (vue.openBlock(), vue.createElementBlock("ul", {
key: 0,
class: vue.normalizeClass(`${clsfix}-header`)
}, [
_hoisted_1,
vue.createElementVNode("li", null, [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.columnNames[0]), 1)
]),
vue.createElementVNode("li", null, vue.toDisplayString(_ctx.columnNames[1]), 1)
], 2)) : vue.createCommentVNode("", true),
isLoaded.value && showList.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlusExpand.FpiElRolling), {
key: 1,
style: { "height": "calc(100% - 26px)" },
direction: "y",
"scroll-able": "",
time: time.value
}, {
default: vue.withCtx(() => [
vue.createElementVNode("ul", {
class: vue.normalizeClass(`${clsfix}-list-wrap`)
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(showList.value, (item) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item.name,
class: vue.normalizeClass(`${clsfix}-list-item`)
}, [
vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(item.rank), 1),
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(item.name), 1),
vue.createElementVNode("span", _hoisted_5, [
vue.withDirectives(vue.createElementVNode("span", {
class: "progress-bar",
style: vue.normalizeStyle({ width: `${item.progress}%`, background: item.bgColor })
}, null, 4), [
[vue.vShow, item.showBar]
])
])
]),
vue.createElementVNode("span", {
class: "value",
style: vue.normalizeStyle({ color: item.color })
}, vue.toDisplayString(item.value), 5)
], 2);
}), 128))
], 2)
]),
_: 1
}, 8, ["time"])) : vue.createCommentVNode("", true),
!isLoaded.value || !showList.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(index.default), { key: 2 })) : vue.createCommentVNode("", true)
], 2);
};
}
});
exports.default = _sfc_main;