@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" />
186 lines (181 loc) • 7.97 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const flat = require('./images/flat.png.js');
const flat_white = require('./images/flat_white.png.js');
const green_down = require('./images/green_down.png.js');
const green_down_white = require('./images/green_down_white.png.js');
const red_up = require('./images/red_up.png.js');
const red_up_white = require('./images/red_up_white.png.js');
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 = {
key: 0,
class: "period"
};
const _hoisted_2 = ["src"];
const clsfix = "dv-aims-cieq-contributio-andlysis";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
isUseBuiltInApi: { type: Boolean, default: true },
apiParams: { default: () => ({
gridCode: "0101000000",
startTime: dayjs().startOf("year").valueOf(),
endTime: dayjs().endOf("year").valueOf(),
order: "currentValue",
isAsc: false,
type: "grid"
}) },
rankType: { default: "cieq" },
data: {},
areaType: { default: "city" }
},
setup(__props) {
const props = __props;
const { isDark } = utils.useThemeHook();
const listConfig = vue.computed(() => {
return [
{
name: "排名",
prop: "rank",
width: "64px"
},
{
name: props.areaType === "province" ? "城市" : "区域",
prop: "name",
width: "80px"
},
{
name: "本期",
prop: "currentValue",
width: "72px"
},
{
name: "同期",
prop: "pastValue",
width: "72px"
},
{
name: "变化率",
prop: "changeValue",
width: "88px"
}
];
});
const state = vue.reactive({
listData: [],
scrollTime: 5
});
const {
listData,
scrollTime
} = vue.toRefs(state);
const fetchData = () => {
if (props.rankType === "cieq") {
index$1.getContributionAnalyze({ ...props.apiParams, gridLevelNickName: props.areaType }).then((res) => {
if (res.data)
handlerData(res.data);
});
} else if (props.rankType === "excellent") {
index$1.getExcellentRate({ ...props.apiParams, gridLevelNickName: props.areaType }).then((res) => {
if (res.data && res.data.fineRate)
handlerData(res.data.fineRate);
});
}
};
const handlerData = (data) => {
state.listData = data.map((item) => {
const obj = {
...item
};
obj.ratioColor = obj.changeValue > 0 ? "var(--dv-color-success)" : obj.changeValue < 0 ? "var(--dv-color-danger)" : obj.changeValue === 0 ? "var(--dv-color-index)" : "var(--dv-color-text-primary)";
obj.arrowClass = obj.changeValue > 0 ? "" : obj.changeValue < 0 ? "" : "flat";
obj.arrowUrl = new URL((/* #__PURE__ */ Object.assign({"./images/flat.png": flat.default,"./images/flat_white.png": flat_white.default,"./images/green_down.png": green_down.default,"./images/green_down_white.png": green_down_white.default,"./images/red_up.png": red_up.default,"./images/red_up_white.png": red_up_white.default}))[`./images/${obj.changeValue > 0 ? "green_down" : obj.changeValue < 0 ? "red_up" : "flat"}.png`], self.location);
obj.whiteArrowUrl = new URL((/* #__PURE__ */ Object.assign({"./images/flat.png": flat.default,"./images/flat_white.png": flat_white.default,"./images/green_down.png": green_down.default,"./images/green_down_white.png": green_down_white.default,"./images/red_up.png": red_up.default,"./images/red_up_white.png": red_up_white.default}))[`./images/${obj.changeValue > 0 ? "green_down_white" : obj.changeValue < 0 ? "red_up_white" : "flat_white"}.png`], self.location);
return obj;
});
};
vue.onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch([() => props.apiParams, () => props.areaType], () => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch(() => props.data, () => {
if (!props.isUseBuiltInApi && props.data) {
Object.assign(state, props.data);
handlerData(props.data.listData);
}
}, { deep: false, immediate: true });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${clsfix}-container`)
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(`${clsfix}-list-wrap`)
}, [
vue.createElementVNode("ul", {
class: vue.normalizeClass(`${clsfix}-list-header`)
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(listConfig), (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% - 27px)" },
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) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item.id
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(listConfig), (innerItem) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: `${item.id}_${innerItem.prop}`,
style: vue.normalizeStyle({ width: innerItem.width })
}, [
innerItem.prop === "changeValue" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("span", {
class: "value",
style: vue.normalizeStyle({ color: item.ratioColor })
}, vue.toDisplayString(item.changeValue === "--" ? "--" : `${Math.abs(Number(item.changeValue))}%`), 5),
item.changeValue !== "--" ? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
class: vue.normalizeClass(item.arrowClass),
src: vue.unref(isDark) ? item.arrowUrl : item.whiteArrowUrl
}, null, 10, _hoisted_2)) : vue.createCommentVNode("", true)
])) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(innerItem.prop === "name" ? "" : "value")
}, vue.toDisplayString(item[innerItem.prop]), 3))
], 4);
}), 128))
]);
}), 128))
], 2)
]),
_: 1
}, 8, ["time"])) : (vue.openBlock(), vue.createBlock(vue.unref(index.default), { key: 1 }))
], 2)
], 2);
};
}
});
exports.default = _sfc_main;