@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" />
179 lines (174 loc) • 8.34 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const elementPlusExpand = require('@ued_fpi/element-plus-expand');
const dayjs = require('dayjs');
require('../common/BasicNoData/index.js');
const utils = require('../../../utils.js');
const index$1 = require('./api/index.js');
const index = require('../common/BasicNoData/index.vue.js');
const _hoisted_1 = ["src"];
const clsfix = "dv-aims-same-and-current-period-rank";
const _sfc_main = /* @__PURE__ */ vue.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 } = utils.useThemeHook();
const listConfig = vue.computed(() => {
return [
{
name: "区域",
prop: "groupName",
width: "110px"
},
{
name: "本期",
prop: "rank",
width: "82px"
},
{
name: "同期",
prop: "samePeriodRank",
width: "82px"
},
{
name: "改善幅度",
prop: "change",
width: "100px"
}
];
});
const state = vue.reactive({
listData: [],
scrollTime: 5
});
const {
listData,
scrollTime
} = vue.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 = () => {
index$1.getSingleCityRank(props.apiParams).then((res) => {
if (res.data) {
handlerData(res.data);
}
});
};
vue.onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch(() => props.apiParams, () => {
if (props.isUseBuiltInApi)
fetchData();
}, { deep: true });
vue.watch(() => props.data, () => {
if (props.data && !props.isUseBuiltInApi)
handlerData(props.data);
}, { deep: false, immediate: true });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${clsfix}-container`)
}, [
vue.createElementVNode("ul", {
class: vue.normalizeClass(`${clsfix}-list-header`)
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(listConfig.value, (item) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item.prop,
style: vue.normalizeStyle({ width: item.width })
}, vue.toDisplayString(item.name), 5);
}), 128))
], 2),
vue.unref(listData) && vue.unref(listData).length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlusExpand.FpiElRolling), {
key: 0,
style: { "height": "calc(100% - 32px)" },
direction: "y",
"scroll-able": "",
time: vue.unref(scrollTime)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("ul", {
class: vue.normalizeClass(`${clsfix}-list-content`)
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(listData), (item, index) => {
return vue.openBlock(), vue.createElementBlock("li", { key: index }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(listConfig.value, (innerItem) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: `${item.groupName}_${innerItem.prop}`,
style: vue.normalizeStyle({ width: innerItem.width })
}, [
innerItem.prop !== "change" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(innerItem.prop)
}, vue.toDisplayString(item[innerItem.prop]), 3)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(innerItem.prop)
}, [
vue.createElementVNode("span", {
class: "text",
style: vue.normalizeStyle({ color: item.changeColor })
}, vue.toDisplayString(item.change), 5),
item.change !== "--" ? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
src: vue.unref(isDark) ? item.changeDarkImage : item.changeWhiteImage
}, null, 8, _hoisted_1)) : vue.createCommentVNode("", true)
], 2))
], 4);
}), 128))
]);
}), 128))
], 2)
]),
_: 1
}, 8, ["time"])) : (vue.openBlock(), vue.createBlock(vue.unref(index.default), { key: 1 }))
], 2);
};
}
});
exports.default = _sfc_main;