@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" />
147 lines (142 loc) • 6.29 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const flat = require('./images/flat.png.js');
const green_down = require('./images/green_down.png.js');
const red_up = require('./images/red_up.png.js');
const vue = require('vue');
const elementPlusExpand = require('@ued_fpi/element-plus-expand');
const fpiTgFactorTools = require('fpi-tg-factor-tools');
const dayjs = require('dayjs');
const index = require('./api/index.js');
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__ */ vue.createElementVNode("span", { class: "name" }, "目标", -1);
const _hoisted_6 = { class: "value" };
const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", { class: "unit" }, "%", -1);
const _hoisted_8 = { class: "period" };
const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("span", { class: "name" }, "同比", -1);
const _hoisted_10 = ["src"];
const clsfix = "dv-aims-factor-target-year-period";
const _sfc_main = /* @__PURE__ */ vue.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 = vue.computed(() => (itemWidth2) => `${itemWidth2}px`);
const cardWidth = vue.ref(400);
const listWidth = vue.ref(0);
const itemWidth = vue.ref(0);
const factorList = vue.ref([]);
const fetchData = async () => {
index.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": flat.default,"./images/green_down.png": green_down.default,"./images/red_up.png": red_up.default}))[`./images/${obj.ratio > 0 ? "green_down" : obj.ratio < 0 ? "red_up" : "flat"}.png`], self.location);
} else {
obj.color = fpiTgFactorTools.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": flat.default,"./images/green_down.png": green_down.default,"./images/red_up.png": red_up.default}))[`./images/${obj.ratio > 0 ? "red_up" : obj.ratio < 0 ? "green_down" : "flat"}.png`], self.location);
}
return obj;
});
vue.nextTick(() => {
itemWidth.value = (cardWidth.value - 12 * 2) / 4;
listWidth.value = itemWidth.value * factorList.value.length;
});
}
});
};
vue.onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch([() => props.apiParams], () => {
if (props.isUseBuiltInApi)
fetchData();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${clsfix}-container`)
}, [
vue.createVNode(vue.unref(elementPlusExpand.FpiElRolling), {
style: {},
direction: "x",
"scroll-able": "",
time: 15
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: "flex list",
style: vue.normalizeStyle({ width: `${listWidth.value}px` })
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(factorList.value, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "flex item",
style: vue.normalizeStyle({ width: vue.unref(width)(itemWidth.value) })
}, [
vue.createElementVNode("div", _hoisted_1, vue.toDisplayString(item.factorName), 1),
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("span", {
class: "value",
style: vue.normalizeStyle({ color: item.color })
}, vue.toDisplayString(item.value), 5),
vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(item.unit), 1)
]),
item.target || item.target === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
_hoisted_5,
vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(item.target), 1),
_hoisted_7
])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", _hoisted_8, [
_hoisted_9,
vue.createElementVNode("span", {
class: "value",
style: vue.normalizeStyle({ color: item.ratioColor })
}, vue.toDisplayString(Math.abs(item.ratio)) + "%", 5),
vue.createElementVNode("img", {
src: item.arrowUrl,
style: vue.normalizeStyle({
transform: item.factorCode === "fineRate" ? "rotate(180deg)" : "none"
})
}, null, 12, _hoisted_10)
])
], 4);
}), 128))
], 4)
]),
_: 1
})
], 2);
};
}
});
exports.default = _sfc_main;