@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" />
220 lines (215 loc) • 7.39 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const vue = require('vue');
const dayjs = require('dayjs');
const fpiTgFactorTools = require('fpi-tg-factor-tools');
require('../common/BasicEcharts/index.js');
require('../common/BasicNoData/index.js');
const index$1 = 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 index = require('../common/BasicNoData/index.vue.js');
const _hoisted_1 = { class: "text" };
const clsfix = "dv-aims-env-change-trends";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "index",
props: {
isUseBuiltInApi: { type: Boolean, default: true },
apiParams: { default: () => ({
startTime: dayjs().subtract(24, "hour").valueOf(),
endTime: dayjs().subtract(1, "hour").valueOf(),
codeType: "grid",
codes: "0101000000"
// 只允许传一个code
}) },
dataType: { default: "hour" },
factorCode: { default: "aqi" },
data: {}
},
setup(__props) {
const props = __props;
const timeFormat = vue.computed(() => {
switch (props.dataType) {
case "hour":
return "HH:mm";
case "day":
return "DD";
default:
return "YYYY-MM-DD HH:mm";
}
});
const selectName = vue.computed(() => {
return fpiTgFactorTools.BASE_FACTOR.find((c) => c.code === props.factorCode)?.name;
});
const lengendOptions = fpiTgFactorTools.FACTOR_LEVEL_TEXT.map((item) => {
return {
name: item.label.length > 1 ? `${item.label}污染` : item.label,
color: item.color
};
});
const chartsFullOptions = vue.reactive({ options: null });
const generateOption = (xAxisData, seriesData) => {
return {
options: {
grid: {
left: 10,
bottom: 0,
right: 10,
top: 10,
containLabel: true
},
tooltip: {
trigger: "axis",
padding: 8,
background: "rgba(1, 11, 18, 0.6)",
formatter: (params) => {
const data = params[0] ? params[0] : {};
const title = selectName.value;
const time = data.data.rawTime;
const marker = data.marker;
const value = data.data.value;
return `
<div>${time}</div>
<div>
<span>${marker}</span>
<span style="margin-right: 10px">${title}</span>
<span>${value}</span>
</div>`;
}
},
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: xAxisData
},
yAxis: {
type: "value",
nameTextStyle: {
color: "var(--dv-color-text-secondary)",
padding: [0, 30, 0, 0]
},
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: seriesData,
type: "bar",
barWidth: 10
}
]
}
};
};
const fetchData = () => {
index$1.getTimeAnalyzeData({
...props.apiParams,
factorCodes: props.factorCode,
dataType: props.dataType
}).then((res) => {
if (res.data) {
const xAxisData = res.data.times.map((c) => dayjs(c).format(timeFormat.value));
const seriesData = res.data.factorsOrSites[0] ? res.data.factorsOrSites[0].values.map((c, index) => {
return {
value: Number(c) > 0 ? Number(c) : "--",
itemStyle: {
color: Number(c) > 0 ? fpiTgFactorTools.factorToColor(props.factorCode, c, props.dataType) : "rgb(154, 154, 154)"
},
rawTime: res.data?.times[index]
};
}) : [];
const options = generateOption(xAxisData, seriesData);
Object.assign(chartsFullOptions, options);
}
});
};
vue.onMounted(() => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch(() => props.apiParams, () => {
if (props.isUseBuiltInApi)
fetchData();
});
vue.watch(() => props.data, () => {
if (!props.isUseBuiltInApi && props.data) {
const xAxisData = [];
const seriesData = [];
props.data.forEach((c) => {
xAxisData.push(dayjs(c.time).format(timeFormat.value));
seriesData.push({
value: Number(c.value) > 0 ? Number(c.value) : "--",
itemStyle: {
color: Number(c.value) > 0 ? fpiTgFactorTools.factorToColor(props.factorCode, c.value, props.dataType) : "rgb(154, 154, 154)"
},
rawTime: c.time
});
});
const options = generateOption(xAxisData, seriesData);
Object.assign(chartsFullOptions, options);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${clsfix}-container`)
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(`${clsfix}-echarts`),
style: { "height": "calc(100% - 27px)" }
}, [
Boolean(chartsFullOptions.options) ? (vue.openBlock(), vue.createBlock(vue.unref(index_vue_vue_type_script_setup_true_lang.default), {
key: 0,
height: "100%",
"full-options": chartsFullOptions,
loading: false
}, null, 8, ["full-options"])) : (vue.openBlock(), vue.createBlock(vue.unref(index.default), { key: 1 }))
], 2),
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;