@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" />
98 lines (95 loc) • 3.42 kB
JavaScript
import { defineComponent, shallowRef, onMounted, watch, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, toDisplayString, withDirectives, normalizeStyle, vShow } from 'vue';
import { BASE_FACTOR } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import { getHexOpacityColor } from '../../utils/tools.mjs';
import { getAirQualityStatis } from './api/index.mjs';
const _hoisted_1 = { class: "progress-box" };
const _hoisted_2 = { class: "name" };
const _hoisted_3 = { class: "bar" };
const clsfix = "dv-aims-main-pollution-year-ratio-list";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
apiParams: { default: () => ({
time: dayjs().subtract(1, "h").valueOf(),
code: "0101000000",
codeType: "grid"
}) }
},
setup(__props) {
const props = __props;
const showList = shallowRef([]);
const fetchData = () => {
const colors = [
"#0062FF",
"#0AAEFF",
"#2AC94F",
"#FF792E",
"#F84439",
"#FFB443",
"rgb(154, 154, 154)"
];
getAirQualityStatis(props.apiParams).then((res) => {
if (res.data && res.data.primaryPollutant.primaryYearSum) {
const data = res.data.primaryPollutant.primaryYearSum;
const rawList = BASE_FACTOR.filter((item) => item.code !== "aqi");
rawList.push({
name: "无首污",
key: "noMainPollutant",
code: "noMainPollutant",
unit: "",
key3: ""
});
const renderData = rawList.map((item, index) => {
const v = data[item.key];
const rate = (v / data.total * 100).toFixed(1);
const color = colors[index];
return {
name: item.name,
progress: rate,
color,
bgColor: `linear-gradient(270deg, ${color} 0%, ${getHexOpacityColor(color, 0.2)} 100%)`,
showBar: Number(rate) > 0
};
});
showList.value = renderData;
}
});
};
onMounted(() => {
fetchData();
});
watch(() => props.apiParams, () => {
fetchData();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("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("div", _hoisted_1, [
createElementVNode("span", _hoisted_2, toDisplayString(item.name), 1),
createElementVNode("span", _hoisted_3, [
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.progress) + "%", 5)
], 2);
}), 128))
], 2);
};
}
});
export { _sfc_main as default };