@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" />
274 lines (271 loc) • 10.1 kB
JavaScript
import { ElIcon, ElDatePicker } from 'element-plus/es';
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/date-picker/style/css';
import 'element-plus/es/components/icon/style/css';
import { defineComponent, ref, reactive, onMounted, watch, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, unref, isRef, Fragment, renderList, toDisplayString, withDirectives, normalizeStyle, vShow } from 'vue';
import dayjs from 'dayjs';
import { DArrowLeft, ArrowLeft, ArrowRight, DArrowRight } from '@element-plus/icons-vue';
import { factorToColor } from 'fpi-tg-factor-tools';
import '../common/BasicNoData/index.mjs';
import { getEnvFeatureCalendar } from './api/index.mjs';
import _BasicNoData from '../common/BasicNoData/index.vue.mjs';
const _hoisted_1 = { class: "dv-aims-air-quality-calendar-container" };
const _hoisted_2 = { class: "flex date-time" };
const _hoisted_3 = { class: "flex img-left" };
const _hoisted_4 = { class: "flex img-right" };
const _hoisted_5 = { class: "flex weeks" };
const _hoisted_6 = { class: "calendar-content" };
const _hoisted_7 = { class: "day" };
const _hoisted_8 = { class: "num" };
const _hoisted_9 = { class: "suff-null-day" };
const _hoisted_10 = { class: "flex legends" };
const _hoisted_11 = { class: "level" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
apiParams: { default: () => ({
codeType: "grid",
code: "0101000000",
factorCode: "aqi"
}) }
},
setup(__props) {
const props = __props;
const dateTime = ref(dayjs().startOf("month").valueOf());
const pickerOptions = (time) => {
return time.getTime() > Date.now();
};
const changeDatePicker = (val) => {
dateTime.value = val.getTime();
getAirQualityCalendar();
};
const changeTime = (num, type) => {
const time = dayjs(dateTime.value)[num > 0 ? "add" : "subtract"](Math.abs(num), type).startOf("month").valueOf();
if (time < Date.now()) {
dateTime.value = time;
getAirQualityCalendar();
}
};
const weeks = ["一", "二", "三", "四", "五", "六", "日"];
const calendarData = reactive({
preNullList: [],
suffNullList: [],
// 最新月份补全剩余日子方格
list: [],
legends: [
{
level: "优",
key: "veryGood",
color: "#30D385",
bgColor: "rgba(48, 211, 133, 0.2)"
},
{
level: "良",
key: "good",
color: "#DFBE00",
bgColor: "rgba(255, 217, 2, 0.2)"
},
{
level: "轻度",
key: "mild",
color: "#F7C212",
bgColor: "rgba(255, 153, 2, 0.2)"
},
{
level: "中度",
key: "medium",
color: "#FF0200",
bgColor: "rgba(255, 2, 0, 0.2)"
},
{
level: "重度",
key: "serious",
color: "#F97D1C",
bgColor: "rgba(153, 0, 153, 0.2)"
},
{
level: "严重",
key: "verySerious",
color: "#990000",
bgColor: "rgba(153, 0, 0, 0.2)"
},
{
level: "无数据",
key: "noData",
color: "#FFFFFF",
bgColor: "#909399"
}
]
});
const getDayBgColor = (item) => {
return Number(item.value) && Number(item.value) > 0 ? factorToColor(props.apiParams.factorCode, item.value, "day") : "#909399";
};
const getDayValue = (item) => {
return !item.value && item.value !== 0 ? "-" : String(item.value).includes(".") ? item.value.toFixed(2) : item.value;
};
const getAirQualityCalendar = async () => {
const params = {
time: dateTime.value,
...props.apiParams
};
getEnvFeatureCalendar(params).then((res) => {
if (res.data) {
const data = res.data;
const time = dateTime.value;
const month = dayjs(time).month();
const monthSumItem = data.monthSum[month] || {};
calendarData.legends.map(
(item) => Object.assign(item, { num: monthSumItem[item.key] })
);
const nullDay = dayjs(time).day() - 1;
calendarData.preNullList = Array.from(
{ length: nullDay },
() => ({})
);
const endTime = dayjs(time).endOf("month").valueOf();
calendarData.list = data.values.filter(
(item) => item.time >= time && item.time <= endTime
);
const days = dayjs(time).daysInMonth();
calendarData.suffNullList = [];
if (time === dayjs().startOf("month").valueOf()) {
calendarData.suffNullList = Array.from(
{ length: days - calendarData.list.length },
() => ({})
);
}
}
});
};
onMounted(() => {
getAirQualityCalendar();
});
watch(
() => props.apiParams,
() => {
getAirQualityCalendar();
}
);
return (_ctx, _cache) => {
const _component_ElIcon = ElIcon;
const _component_ElDatePicker = ElDatePicker;
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", {
class: "arrow left-arrow-double",
onClick: _cache[0] || (_cache[0] = ($event) => changeTime(-1, "year"))
}, [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
createVNode(unref(DArrowLeft))
]),
_: 1
})
]),
createElementVNode("div", {
class: "arrow left-arrow",
onClick: _cache[1] || (_cache[1] = ($event) => changeTime(-1, "month"))
}, [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
createVNode(unref(ArrowLeft))
]),
_: 1
})
])
]),
createVNode(_component_ElDatePicker, {
modelValue: unref(dateTime),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(dateTime) ? dateTime.value = $event : null),
class: "reset-date-picker",
teleported: false,
type: "month",
clearable: false,
"disabled-date": pickerOptions,
format: "YYYY年 M月",
onChange: changeDatePicker
}, null, 8, ["modelValue"]),
createElementVNode("div", _hoisted_4, [
createElementVNode("div", {
class: "arrow right-arrow",
onClick: _cache[3] || (_cache[3] = ($event) => changeTime(1, "month"))
}, [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
createVNode(unref(ArrowRight))
]),
_: 1
})
]),
createElementVNode("div", {
class: "arrow right-arrow-double",
onClick: _cache[4] || (_cache[4] = ($event) => changeTime(1, "year"))
}, [
createVNode(_component_ElIcon, null, {
default: withCtx(() => [
createVNode(unref(DArrowRight))
]),
_: 1
})
])
])
]),
createElementVNode("div", _hoisted_5, [
(openBlock(), createElementBlock(Fragment, null, renderList(weeks, (item, index) => {
return createElementVNode("div", {
key: index,
class: "item"
}, toDisplayString(item), 1);
}), 64))
]),
withDirectives(createElementVNode("div", _hoisted_6, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(calendarData).preNullList, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item pre-null"
});
}), 128)),
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(calendarData).list, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item",
style: normalizeStyle({ background: getDayBgColor(item) })
}, [
createElementVNode("div", _hoisted_7, toDisplayString(index + 1), 1),
createElementVNode("div", _hoisted_8, toDisplayString(getDayValue(item)), 1)
], 4);
}), 128)),
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(calendarData).suffNullList, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item flex suff-null"
}, [
createElementVNode("div", _hoisted_9, toDisplayString(index + 1 + unref(calendarData).list.length), 1)
]);
}), 128))
], 512), [
[vShow, unref(calendarData).list.length]
]),
withDirectives(createVNode(unref(_BasicNoData), null, null, 512), [
[vShow, !unref(calendarData).list.length]
]),
createElementVNode("div", _hoisted_10, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(calendarData).legends, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item"
}, [
createElementVNode("div", _hoisted_11, toDisplayString(item.level), 1),
createElementVNode("div", {
class: "flex num",
style: normalizeStyle({ color: item.color, background: item.bgColor })
}, toDisplayString(item.num), 5)
]);
}), 128))
])
]);
};
}
});
export { _sfc_main as default };