@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" />
215 lines (212 loc) • 7.04 kB
JavaScript
import { defineComponent, ref, computed, onMounted, watch, nextTick, openBlock, createElementBlock, normalizeClass, createBlock, unref, withCtx, createElementVNode, createVNode, normalizeStyle, createCommentVNode, Fragment, renderList, toDisplayString } from 'vue';
import { FpiElRolling } from '@ued_fpi/element-plus-expand';
import { BASE_FACTOR, FACTOR_LEVEL_TEXT, factorToColor } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import '../common/BasicEcharts/index.mjs';
import { getSiteRank } from './api/index.mjs';
import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
import '../common/BasicEcharts/index.vue2.mjs';
const _hoisted_1 = { class: "text" };
const clsfix = "dv-aims-factor-realtime-rank-chart";
const _sfc_main = /* @__PURE__ */ 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 = BASE_FACTOR.map((item) => ({
...item
}));
const selectCode = ref(props.factorCode);
const selectUnit = computed(() => {
return selectOptions.find((c) => c.code === selectCode.value)?.unit;
});
const selectName = computed(() => {
return selectOptions.find((c) => c.code === selectCode.value)?.name;
});
const lengendOptions = FACTOR_LEVEL_TEXT.map((item) => {
return {
name: item.label.length > 1 ? `${item.label}污染` : item.label,
color: item.color
};
});
const time = ref(20);
const chartWidth = ref(370);
const isLoadChartWidth = ref(false);
const chartsFullOptions = 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: factorToColor(selectCode.value, item.value, "hour")
}
};
}),
name: selectName.value,
type: "bar",
barWidth: 15
}
]
}
};
};
const fetchData = () => {
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);
nextTick(() => {
chartsFullOptions.value = generateOption(list);
});
}
});
};
const setChartWidth = (list) => {
chartWidth.value = list.length * 40 > chartWidth.value ? list.length * 40 : chartWidth.value;
isLoadChartWidth.value = true;
};
onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
watch([() => props.apiParams, () => props.factorCode], () => {
if (props.isUseBuiltInApi)
fetchData();
});
watch([() => props.list, () => props.factorCode], () => {
if (!props.isUseBuiltInApi && props.list) {
setChartWidth(props.list);
nextTick(() => {
props.list && (chartsFullOptions.value = generateOption(props.list));
});
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`${clsfix}-container`)
}, [
isLoadChartWidth.value ? (openBlock(), createBlock(unref(FpiElRolling), {
key: 0,
style: { "height": "calc(100% - 27px)" },
direction: "x",
"scroll-able": "",
time: time.value
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(`${clsfix}-echarts`)
}, [
createVNode(unref(_sfc_main$1), {
height: "100%",
style: normalizeStyle({ width: `${chartWidth.value}px`, marginRight: 16 }),
"full-options": chartsFullOptions.value,
loading: false
}, null, 8, ["style", "full-options"])
], 2)
]),
_: 1
}, 8, ["time"])) : createCommentVNode("", true),
createElementVNode("ul", {
class: normalizeClass(`${clsfix}-lengend`)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(lengendOptions), (item) => {
return openBlock(), createElementBlock("li", {
key: item.color
}, [
createElementVNode("span", {
class: "border",
style: normalizeStyle({ backgroundColor: item.color })
}, null, 4),
createElementVNode("span", _hoisted_1, toDisplayString(item.name), 1)
]);
}), 128))
], 2)
], 2);
};
}
});
export { _sfc_main as default };