@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" />
143 lines (140 loc) • 6.18 kB
JavaScript
import __vite_glob_1_0 from './images/flat.png.mjs';
import __vite_glob_1_1 from './images/green_down.png.mjs';
import __vite_glob_1_2 from './images/red_up.png.mjs';
import { defineComponent, computed, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, normalizeStyle, Fragment, renderList, toDisplayString, createCommentVNode, nextTick } from 'vue';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import { factorToColor } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import { getEnvironmentStatusV2 } from './api/index.mjs';
const _hoisted_1 = { class: "factorName" };
const _hoisted_2 = { class: "factorValue" };
const _hoisted_3 = { class: "unit" };
const _hoisted_4 = {
key: 0,
class: "target"
};
const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "name" }, "目标", -1);
const _hoisted_6 = { class: "value" };
const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "unit" }, "%", -1);
const _hoisted_8 = { class: "period" };
const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "name" }, "同比", -1);
const _hoisted_10 = ["src"];
const clsfix = "dv-aims-factor-target-year-period";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
isUseBuiltInApi: { type: Boolean, default: true },
apiParams: { default: () => ({
time: dayjs().subtract(1, "h").valueOf(),
gridCode: "0101010000",
timeType: "year",
type: "county"
}) }
},
setup(__props) {
const props = __props;
const width = computed(() => (itemWidth2) => `${itemWidth2}px`);
const cardWidth = ref(400);
const listWidth = ref(0);
const itemWidth = ref(0);
const factorList = ref([]);
const fetchData = async () => {
getEnvironmentStatusV2(props.apiParams).then((res) => {
if (res.data && res.data.entries) {
const data = res.data.entries;
factorList.value = data.map((item) => {
const obj = {
factorName: item.itemName,
factorCode: item.factorCode,
value: item.thisPeriodValue,
target: item.targetValue,
ratio: item.changeRate,
unit: item.unit
};
if (item.factorCode === "fineRate") {
obj.ratioColor = obj.ratio > 0 ? "#15F3A3" : obj.ratio < 0 ? "#F84439" : "#00DEFF";
obj.arrowUrl = new URL((/* #__PURE__ */ Object.assign({"./images/flat.png": __vite_glob_1_0,"./images/green_down.png": __vite_glob_1_1,"./images/red_up.png": __vite_glob_1_2}))[`./images/${obj.ratio > 0 ? "green_down" : obj.ratio < 0 ? "red_up" : "flat"}.png`], self.location);
} else {
obj.color = factorToColor(
item.factorCode,
obj.value,
"hour"
);
obj.ratioColor = obj.ratio > 0 ? "#F84439" : obj.ratio < 0 ? "#15F3A3" : "#00DEFF";
obj.arrowUrl = new URL((/* #__PURE__ */ Object.assign({"./images/flat.png": __vite_glob_1_0,"./images/green_down.png": __vite_glob_1_1,"./images/red_up.png": __vite_glob_1_2}))[`./images/${obj.ratio > 0 ? "red_up" : obj.ratio < 0 ? "green_down" : "flat"}.png`], self.location);
}
return obj;
});
nextTick(() => {
itemWidth.value = (cardWidth.value - 12 * 2) / 4;
listWidth.value = itemWidth.value * factorList.value.length;
});
}
});
};
onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
watch([() => props.apiParams], () => {
if (props.isUseBuiltInApi)
fetchData();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`${clsfix}-container`)
}, [
createVNode(unref(FpiElRolling), {
style: {},
direction: "x",
"scroll-able": "",
time: 15
}, {
default: withCtx(() => [
createElementVNode("div", {
class: "flex list",
style: normalizeStyle({ width: `${listWidth.value}px` })
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(factorList.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "flex item",
style: normalizeStyle({ width: unref(width)(itemWidth.value) })
}, [
createElementVNode("div", _hoisted_1, toDisplayString(item.factorName), 1),
createElementVNode("div", _hoisted_2, [
createElementVNode("span", {
class: "value",
style: normalizeStyle({ color: item.color })
}, toDisplayString(item.value), 5),
createElementVNode("span", _hoisted_3, toDisplayString(item.unit), 1)
]),
item.target || item.target === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
_hoisted_5,
createElementVNode("span", _hoisted_6, toDisplayString(item.target), 1),
_hoisted_7
])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_8, [
_hoisted_9,
createElementVNode("span", {
class: "value",
style: normalizeStyle({ color: item.ratioColor })
}, toDisplayString(Math.abs(item.ratio)) + "%", 5),
createElementVNode("img", {
src: item.arrowUrl,
style: normalizeStyle({
transform: item.factorCode === "fineRate" ? "rotate(180deg)" : "none"
})
}, null, 12, _hoisted_10)
])
], 4);
}), 128))
], 4)
]),
_: 1
})
], 2);
};
}
});
export { _sfc_main as default };