@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" />
219 lines (214 loc) • 7.21 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 fpiTgFactorTools = require('fpi-tg-factor-tools');
const dayjs = require('dayjs');
require('../common/BasicEcharts/index.js');
const index = require('./api/index.js');
const index_vue_vue_type_script_setup_true_lang = require('../common/BasicEcharts/index.vue.js');
require('../common/BasicEcharts/index.vue2.js');
const _hoisted_1 = { class: "text" };
const clsfix = "dv-aims-factor-realtime-rank-chart";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
isUseBuiltInApi: { type: Boolean, default: true },
apiParams: { default: () => ({
time: dayjs().subtract(1, "h").valueOf(),
gridCode: "0101000000",
timeType: "hour",
siteTypeCodes: "A91230101,A91230102,A91230103",
type: "site",
isAsc: false
}) },
factorCode: { default: "aqi" },
list: { default: void 0 }
},
setup(__props) {
const props = __props;
const selectOptions = fpiTgFactorTools.BASE_FACTOR.map((item) => ({
...item
}));
const selectCode = vue.ref(props.factorCode);
const selectUnit = vue.computed(() => {
return selectOptions.find((c) => c.code === selectCode.value)?.unit;
});
const selectName = vue.computed(() => {
return selectOptions.find((c) => c.code === selectCode.value)?.name;
});
const lengendOptions = fpiTgFactorTools.FACTOR_LEVEL_TEXT.map((item) => {
return {
name: item.label.length > 1 ? `${item.label}污染` : item.label,
color: item.color
};
});
const time = vue.ref(20);
const chartWidth = vue.ref(370);
const isLoadChartWidth = vue.ref(false);
const chartsFullOptions = vue.ref({ options: null });
const generateOption = (list) => {
if (list.length)
time.value = list.length * 1.25;
return {
options: {
grid: {
left: 10,
bottom: 10,
right: 10,
top: 10,
containLabel: true
},
tooltip: {
trigger: "axis",
padding: 8,
background: "rgba(1, 11, 18, 0.6)"
},
xAxis: {
type: "category",
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: "var(--dv-color-text-primary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
},
data: list.map((item) => {
return item.name;
})
},
yAxis: {
type: "value",
name: selectUnit.value,
nameTextStyle: {
color: "var(--dv-color-text-secondary)",
padding: [0, 30, 0, 0]
},
splitNumber: 3,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: "var(--dv-color-text-secondary)",
fontFamily: "var(--dv-font-family-number)",
fontSize: "var(--dv-text-number2)"
},
splitLine: {
show: true,
lineStyle: {
color: ["var(--dv-color-border-light)"]
}
}
},
legend: {
show: false
},
series: [
{
data: list.map((item) => {
return {
value: item.value,
itemStyle: {
color: fpiTgFactorTools.factorToColor(selectCode.value, item.value, "hour")
}
};
}),
name: selectName.value,
type: "bar",
barWidth: 15
}
]
}
};
};
const fetchData = () => {
index.getSiteRank({ ...props.apiParams, factorCode: props.factorCode }).then((res) => {
if (res.data && res.data.entries) {
const list = res.data.entries.map((item) => {
let value = item[selectName.value];
value = Number(value) > 0 ? Number(value) : "--";
return {
name: item.name,
value
};
});
setChartWidth(list);
vue.nextTick(() => {
chartsFullOptions.value = generateOption(list);
});
}
});
};
const setChartWidth = (list) => {
chartWidth.value = list.length * 40 > chartWidth.value ? list.length * 40 : chartWidth.value;
isLoadChartWidth.value = true;
};
vue.onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch([() => props.apiParams, () => props.factorCode], () => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch([() => props.list, () => props.factorCode], () => {
if (!props.isUseBuiltInApi && props.list) {
setChartWidth(props.list);
vue.nextTick(() => {
props.list && (chartsFullOptions.value = generateOption(props.list));
});
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${clsfix}-container`)
}, [
isLoadChartWidth.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlusExpand.FpiElRolling), {
key: 0,
style: { "height": "calc(100% - 27px)" },
direction: "x",
"scroll-able": "",
time: time.value
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(`${clsfix}-echarts`)
}, [
vue.createVNode(vue.unref(index_vue_vue_type_script_setup_true_lang.default), {
height: "100%",
style: vue.normalizeStyle({ width: `${chartWidth.value}px`, marginRight: 16 }),
"full-options": chartsFullOptions.value,
loading: false
}, null, 8, ["style", "full-options"])
], 2)
]),
_: 1
}, 8, ["time"])) : vue.createCommentVNode("", true),
vue.createElementVNode("ul", {
class: vue.normalizeClass(`${clsfix}-lengend`)
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(lengendOptions), (item) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item.color
}, [
vue.createElementVNode("span", {
class: "border",
style: vue.normalizeStyle({ backgroundColor: item.color })
}, null, 4),
vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(item.name), 1)
]);
}), 128))
], 2)
], 2);
};
}
});
exports.default = _sfc_main;