@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" />
175 lines (172 loc) • 8.18 kB
JavaScript
import { defineComponent, computed, reactive, toRefs, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, unref, createBlock, withCtx, createCommentVNode } from 'vue';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import dayjs from 'dayjs';
import '../common/BasicNoData/index.mjs';
import { useThemeHook } from '../../../utils.mjs';
import { getSingleCityRank } from './api/index.mjs';
import _BasicNoData from '../common/BasicNoData/index.vue.mjs';
const _hoisted_1 = ["src"];
const clsfix = "dv-aims-same-and-current-period-rank";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
isUseBuiltInApi: { type: Boolean, default: true },
apiParams: { default: () => ({
gridCode: "0101000000",
factorCode: "cieq",
time: dayjs().subtract(1, "hour").valueOf(),
timeType: "year"
}) },
data: {}
},
setup(__props) {
const props = __props;
const { isDark } = useThemeHook();
const listConfig = computed(() => {
return [
{
name: "区域",
prop: "groupName",
width: "110px"
},
{
name: "本期",
prop: "rank",
width: "82px"
},
{
name: "同期",
prop: "samePeriodRank",
width: "82px"
},
{
name: "改善幅度",
prop: "change",
width: "100px"
}
];
});
const state = reactive({
listData: [],
scrollTime: 5
});
const {
listData,
scrollTime
} = toRefs(state);
const handlerData = (data) => {
state.listData = data.map((item) => {
let change = "";
let changeColor = "";
let changeDarkImage = "";
let changeWhiteImage = "";
const changeNum = -Number(item.change);
if (changeNum > 0) {
change = `+${changeNum}`;
changeColor = "var(--dv-color-success)";
changeDarkImage = new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAB5SURBVBiV1YuxDcIwAATPVkrKWErpEcg8DEFGIRNEikXtUcgelLaUJuEpUIKRYAC++j/dQ5E6j12dx65kZisuX4/ocXtR294PpwnAAjTz4A2K75diMw9+F9alipL8Jkjy61JFAONSuABnvqf/WC4FuRRUMvvj+V/CE6VdJmKJmjaAAAAAAElFTkSuQmCC", self.location);
changeWhiteImage = new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAB3SURBVBiV1YyxDcIwFETf/4gdQtx4BKhZwngRMkqYxGyQAlPDEqzB0RBkpCyQq05P7w6a5BqGXMPQMptLuoe9Sw+At9nhenw9ARwgTV10qcyySyVNXfwJm60XIDbP8cuw0203mtmZhUi6/IFce+Xaq2W+tFyd8AFP/x8OvLmx7gAAAABJRU5ErkJggg==", self.location);
} else if (changeNum < 0) {
change = `${changeNum}`;
changeColor = "var(--dv-color-danger)";
changeDarkImage = new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAABySURBVBiV1Y2xDcJAEATnPrAoxw7PKUcBrgSXYuqBGEK7BJdxQhZLhPQCJGI2nNnVQpUMV4arZoUf+YuC5d4njONXK04GkOEz0L7pZXe5dQVAmwbEWi1XbRoA7MXuh759SDNAMeua83X5uMzwMcPHmj0BB1ckHJ5rzGwAAAAASUVORK5CYII=", self.location);
changeWhiteImage = new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAABpSURBVBiV1Y3LDYJAAETfQEPQBnHZpRIoRTsRD7YBJdAIGQ4askYSzszxzQ8yOUQ7ROes4ESXCMi3dEfuD13rIQC3ccJUv1Vmvcb6c1GoA5bMXr4M7WtNqig9AbCq1vs5/1+GNDikIWcb5Ogd8ZoL+YoAAAAASUVORK5CYII=", self.location);
} else if (changeNum === 0) {
change = "持平";
changeColor = "var(--dv-color-index)";
changeDarkImage = new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAACgSURBVCiRnZIxCgJBDEVflsHKRrGw9AZewGtYWAraexPtLfQIllrZCB7D7bSZ2QsI32JYBdliZj6kScjLJ3xIkdeGpyZdoyoJUDGlx52gWRkAwBgDV7xWZYAoh7HHa4vkIjfokbA4Avp/vTPGwghSpoufjJMD6iIH4oKxTLvU6ECQvuW1a3/gsizDG2PN0I5tIwfwAuYM7JZ5lJjEpjuJH86IMvlu3i5sAAAAAElFTkSuQmCC", self.location);
changeWhiteImage = new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAACvSURBVDiNtZTBDcIwEATnLEogvCkhLVBCOsEPSAtAHklHlIBL8BMpqcHHA4QAJSiK7X2eVzvyrWVYqKLWdo5PlgI2tSrgjFDdT+KnfGYp4KUyKNfioGUuAMBWDLf1Ufe5AM8goR3rJbaDMX31In+MMfIaqPpGXC4AAEGxyTqY0ipTrtdANTTispec9AYKXX8W+zlLBgiKHS7S/c5TAN77HjuMfUXOCLt+IjxKc7/rBwpoQ7p80+S+AAAAAElFTkSuQmCC", self.location);
} else {
change = "--";
changeColor = "var(--dv-color-text-primary)";
}
return {
...item,
change,
changeColor,
changeDarkImage,
changeWhiteImage
};
});
state.scrollTime = state.listData.length * 1.25;
};
const fetchData = () => {
getSingleCityRank(props.apiParams).then((res) => {
if (res.data) {
handlerData(res.data);
}
});
};
onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
watch(() => props.apiParams, () => {
if (props.isUseBuiltInApi)
fetchData();
}, { deep: true });
watch(() => props.data, () => {
if (props.data && !props.isUseBuiltInApi)
handlerData(props.data);
}, { deep: false, immediate: true });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`${clsfix}-container`)
}, [
createElementVNode("ul", {
class: normalizeClass(`${clsfix}-list-header`)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(listConfig.value, (item) => {
return openBlock(), createElementBlock("li", {
key: item.prop,
style: normalizeStyle({ width: item.width })
}, toDisplayString(item.name), 5);
}), 128))
], 2),
unref(listData) && unref(listData).length ? (openBlock(), createBlock(unref(FpiElRolling), {
key: 0,
style: { "height": "calc(100% - 32px)" },
direction: "y",
"scroll-able": "",
time: unref(scrollTime)
}, {
default: withCtx(() => [
createElementVNode("ul", {
class: normalizeClass(`${clsfix}-list-content`)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(listData), (item, index) => {
return openBlock(), createElementBlock("li", { key: index }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(listConfig.value, (innerItem) => {
return openBlock(), createElementBlock("div", {
key: `${item.groupName}_${innerItem.prop}`,
style: normalizeStyle({ width: innerItem.width })
}, [
innerItem.prop !== "change" ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(innerItem.prop)
}, toDisplayString(item[innerItem.prop]), 3)) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(innerItem.prop)
}, [
createElementVNode("span", {
class: "text",
style: normalizeStyle({ color: item.changeColor })
}, toDisplayString(item.change), 5),
item.change !== "--" ? (openBlock(), createElementBlock("img", {
key: 0,
src: unref(isDark) ? item.changeDarkImage : item.changeWhiteImage
}, null, 8, _hoisted_1)) : createCommentVNode("", true)
], 2))
], 4);
}), 128))
]);
}), 128))
], 2)
]),
_: 1
}, 8, ["time"])) : (openBlock(), createBlock(unref(_BasicNoData), { key: 1 }))
], 2);
};
}
});
export { _sfc_main as default };