@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" />
219 lines (216 loc) • 8.66 kB
JavaScript
import { defineComponent, reactive, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, Fragment, renderList } from 'vue';
import { BASE_FACTOR, factorToLevel, factorToColor } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import { getAirQuality } from './api/index.mjs';
const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 实时AQI ", -1);
const _hoisted_2 = { class: "aqi-container" };
const _hoisted_3 = { class: "aqiInfo" };
const _hoisted_4 = { class: "main" };
const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "首污", -1);
const _hoisted_6 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, " 今日AQI ", -1);
const _hoisted_7 = { class: "aqi-container" };
const _hoisted_8 = { class: "aqiInfo" };
const _hoisted_9 = { class: "main" };
const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "首污", -1);
const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", null, "污染物浓度", -1);
const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", null, "（ 单位：μg/m³, CO：mg/m³ ）", -1);
const _hoisted_13 = [
_hoisted_11,
_hoisted_12
];
const _hoisted_14 = /* @__PURE__ */ createElementVNode("li", { class: "bottom-left-title" }, [
/* @__PURE__ */ createElementVNode("span", null, "实时"),
/* @__PURE__ */ createElementVNode("span", null, "今日")
], -1);
const _hoisted_15 = { class: "name" };
const clsfix = "dv-aims-air-quality-realtime-and-day";
const noDataColor = "var(--dv-color-text-secondary)";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
apiParams: { default: () => ({
time: dayjs().subtract(2, "h").valueOf(),
gridCode: "0101000000"
}) }
},
setup(__props) {
const props = __props;
const realtimeData = reactive({
hourV: "--",
hourColor: noDataColor,
hourPollutionZh: "--",
hourMainPollutants: "--",
dayV: "--",
dayColor: noDataColor,
dayPollutionZh: "--",
dayMainPollutants: "--",
factorList: BASE_FACTOR.filter((item) => item.code !== "aqi").map(
(item) => {
return {
name: item.name,
code: item.code,
key: item.key,
hourV: "--",
hourColor: noDataColor,
dayV: "--",
dayColor: noDataColor
};
}
)
});
const fetchData = () => {
const p1 = getAirQuality({ ...props.apiParams, timeType: "hour" });
const p2 = getAirQuality({ ...props.apiParams, timeType: "day" });
Promise.all([p1, p2]).then((res) => {
let hourData = null;
let dayData = null;
let factorList = realtimeData.factorList;
if (res[0] && res[0].data) {
const data = res[0].data;
const level = factorToLevel("aqi", data.aqi, "hour");
hourData = {
hourV: data.aqi,
hourColor: level >= 0 ? factorToColor("aqi", data.aqi, "hour") : noDataColor,
hourPollutionZh: data.airQuality,
hourMainPollutants: data.mainPollutants
};
factorList = factorList.map((item) => {
const obj = data.commonFactors.find(
(c) => c.key === item.key
);
return {
...item,
hourV: obj?.value ? obj.value : "--",
hourColor: obj && obj.value && obj.value !== "--" ? factorToColor(item.code, obj.value, "hour") : noDataColor
};
});
}
if (res[1] && res[1].data) {
const data = res[1].data;
const level = factorToLevel("aqi", data.aqi, "day");
dayData = {
dayV: data.aqi,
dayColor: level >= 0 ? factorToColor("aqi", data.aqi, "day") : noDataColor,
dayPollutionZh: data.airQuality,
dayMainPollutants: data.mainPollutants
};
factorList = factorList.map((item) => {
const obj = data.commonFactors.find(
(c) => c.key === item.key
);
return {
...item,
dayV: obj?.value ? obj.value : "--",
dayColor: obj && obj.value && obj.value !== "--" ? factorToColor(item.code, obj.value, "day") : noDataColor
};
});
}
Object.assign(realtimeData, hourData, dayData, { factorList });
});
};
onMounted(() => {
fetchData();
});
watch(
() => props.apiParams,
() => {
fetchData();
}
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`${clsfix}-container`)
}, [
createElementVNode("div", {
class: normalizeClass(`${clsfix}-top`)
}, [
createElementVNode("div", {
class: normalizeClass(`${clsfix}-top-item`)
}, [
_hoisted_1,
createElementVNode("div", _hoisted_2, [
createElementVNode("div", {
class: "aqiValue",
style: normalizeStyle({ color: realtimeData.hourColor })
}, toDisplayString(realtimeData.hourV), 5),
createElementVNode("div", _hoisted_3, [
createElementVNode("span", {
class: "pollution-zh",
style: normalizeStyle({ color: realtimeData.hourColor })
}, toDisplayString(realtimeData.hourPollutionZh), 5),
createElementVNode("div", _hoisted_4, [
_hoisted_5,
createElementVNode("span", {
class: "value",
style: normalizeStyle({
color: realtimeData.hourMainPollutants === "--" ? noDataColor : void 0
})
}, toDisplayString(realtimeData.hourMainPollutants), 5)
])
])
])
], 2),
createElementVNode("div", {
class: normalizeClass(`${clsfix}-top-item`)
}, [
_hoisted_6,
createElementVNode("div", _hoisted_7, [
createElementVNode("div", {
class: "aqiValue",
style: normalizeStyle({ color: realtimeData.dayColor })
}, toDisplayString(realtimeData.dayV), 5),
createElementVNode("div", _hoisted_8, [
createElementVNode("span", {
class: "pollution-zh",
style: normalizeStyle({ color: realtimeData.dayColor })
}, toDisplayString(realtimeData.dayPollutionZh), 5),
createElementVNode("div", _hoisted_9, [
_hoisted_10,
createElementVNode("span", {
class: "value",
style: normalizeStyle({
color: realtimeData.dayMainPollutants === "--" ? noDataColor : void 0
})
}, toDisplayString(realtimeData.dayMainPollutants), 5)
])
])
])
], 2)
], 2),
createElementVNode("div", {
class: normalizeClass(`${clsfix}-center`)
}, _hoisted_13, 2),
createElementVNode("ul", {
class: normalizeClass(`${clsfix}-bottom`)
}, [
_hoisted_14,
(openBlock(true), createElementBlock(Fragment, null, renderList(realtimeData.factorList, (item) => {
return openBlock(), createElementBlock("li", {
key: item.code,
class: normalizeClass(`${clsfix}-bottom-item`)
}, [
createElementVNode("span", _hoisted_15, toDisplayString(item.name), 1),
createElementVNode("span", {
class: "value",
style: normalizeStyle({ color: item.hourColor })
}, toDisplayString(item.hourV), 5),
createElementVNode("span", {
class: "line",
style: normalizeStyle({ backgroundColor: item.hourColor })
}, null, 4),
createElementVNode("span", {
class: "value",
style: normalizeStyle({ color: item.dayColor })
}, toDisplayString(item.dayV), 5),
createElementVNode("span", {
class: "line",
style: normalizeStyle({ backgroundColor: item.dayColor, marginBottom: 0 })
}, null, 4)
], 2);
}), 128))
], 2)
], 2);
};
}
});
export { _sfc_main as default };