@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" />
157 lines (154 loc) • 6.21 kB
JavaScript
import { defineComponent, ref, shallowRef, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, createBlock, unref, withCtx, Fragment, renderList, withDirectives, normalizeStyle, vShow } from 'vue';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import { factorToColor, BASE_FACTOR } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import '../common/BasicNoData/index.mjs';
import { getHexOpacityColor } from '../../utils/tools.mjs';
import { getSiteRank } from './api/index.mjs';
import _BasicNoData from '../common/BasicNoData/index.vue.mjs';
const _hoisted_1 = /* @__PURE__ */ 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__ */ 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 = ref(10);
const showList = shallowRef([]);
const isLoaded = 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 = () => {
getSiteRank({ ...props.apiParams, factorCode: props.factorCode }).then((res) => {
if (res.data && res.data.entries) {
const key = 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 = factorToColor(props.factorCode, item.value, "hour");
return {
...item,
progress: item.value / maxValue * 100,
color,
bgColor: `linear-gradient(270deg, ${color} 0%, ${getHexOpacityColor(color, 0.2)} 100%)`,
showBar: Number(item.value) > 0
};
});
time.value = showList.value.length * 1.2;
isLoaded.value = true;
}
});
};
onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
watch([() => props.apiParams, () => props.factorCode], () => {
if (props.isUseBuiltInApi)
fetchData();
});
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: 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 openBlock(), createElementBlock("div", {
class: normalizeClass(`${clsfix}-container`)
}, [
isLoaded.value && showList.value.length ? (openBlock(), createElementBlock("ul", {
key: 0,
class: normalizeClass(`${clsfix}-header`)
}, [
_hoisted_1,
createElementVNode("li", null, [
createElementVNode("span", null, toDisplayString(_ctx.columnNames[0]), 1)
]),
createElementVNode("li", null, toDisplayString(_ctx.columnNames[1]), 1)
], 2)) : createCommentVNode("", true),
isLoaded.value && showList.value.length ? (openBlock(), createBlock(unref(FpiElRolling), {
key: 1,
style: { "height": "calc(100% - 26px)" },
direction: "y",
"scroll-able": "",
time: time.value
}, {
default: withCtx(() => [
createElementVNode("ul", {
class: normalizeClass(`${clsfix}-list-wrap`)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(showList.value, (item) => {
return openBlock(), createElementBlock("li", {
key: item.name,
class: normalizeClass(`${clsfix}-list-item`)
}, [
createElementVNode("span", _hoisted_2, toDisplayString(item.rank), 1),
createElementVNode("div", _hoisted_3, [
createElementVNode("span", _hoisted_4, toDisplayString(item.name), 1),
createElementVNode("span", _hoisted_5, [
withDirectives(createElementVNode("span", {
class: "progress-bar",
style: normalizeStyle({ width: `${item.progress}%`, background: item.bgColor })
}, null, 4), [
[vShow, item.showBar]
])
])
]),
createElementVNode("span", {
class: "value",
style: normalizeStyle({ color: item.color })
}, toDisplayString(item.value), 5)
], 2);
}), 128))
], 2)
]),
_: 1
}, 8, ["time"])) : createCommentVNode("", true),
!isLoaded.value || !showList.value.length ? (openBlock(), createBlock(unref(_BasicNoData), { key: 2 })) : createCommentVNode("", true)
], 2);
};
}
});
export { _sfc_main as default };