@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" />
278 lines (273 loc) • 10.4 kB
JavaScript
'use strict';
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const es = require('element-plus/es');
require('element-plus/es/components/base/style/css');
require('element-plus/es/components/date-picker/style/css');
require('element-plus/es/components/icon/style/css');
const vue = require('vue');
const dayjs = require('dayjs');
const iconsVue = require('@element-plus/icons-vue');
const fpiTgFactorTools = require('fpi-tg-factor-tools');
require('../common/BasicNoData/index.js');
const index$1 = require('./api/index.js');
const index = require('../common/BasicNoData/index.vue.js');
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__ */ vue.defineComponent({
__name: "index",
props: {
apiParams: { default: () => ({
codeType: "grid",
code: "0101000000",
factorCode: "aqi"
}) }
},
setup(__props) {
const props = __props;
const dateTime = vue.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 = vue.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 ? fpiTgFactorTools.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
};
index$1.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 },
() => ({})
);
}
}
});
};
vue.onMounted(() => {
getAirQualityCalendar();
});
vue.watch(
() => props.apiParams,
() => {
getAirQualityCalendar();
}
);
return (_ctx, _cache) => {
const _component_ElIcon = es.ElIcon;
const _component_ElDatePicker = es.ElDatePicker;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", {
class: "arrow left-arrow-double",
onClick: _cache[0] || (_cache[0] = ($event) => changeTime(-1, "year"))
}, [
vue.createVNode(_component_ElIcon, null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.DArrowLeft))
]),
_: 1
})
]),
vue.createElementVNode("div", {
class: "arrow left-arrow",
onClick: _cache[1] || (_cache[1] = ($event) => changeTime(-1, "month"))
}, [
vue.createVNode(_component_ElIcon, null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ArrowLeft))
]),
_: 1
})
])
]),
vue.createVNode(_component_ElDatePicker, {
modelValue: vue.unref(dateTime),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.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"]),
vue.createElementVNode("div", _hoisted_4, [
vue.createElementVNode("div", {
class: "arrow right-arrow",
onClick: _cache[3] || (_cache[3] = ($event) => changeTime(1, "month"))
}, [
vue.createVNode(_component_ElIcon, null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ArrowRight))
]),
_: 1
})
]),
vue.createElementVNode("div", {
class: "arrow right-arrow-double",
onClick: _cache[4] || (_cache[4] = ($event) => changeTime(1, "year"))
}, [
vue.createVNode(_component_ElIcon, null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.DArrowRight))
]),
_: 1
})
])
])
]),
vue.createElementVNode("div", _hoisted_5, [
(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(weeks, (item, index) => {
return vue.createElementVNode("div", {
key: index,
class: "item"
}, vue.toDisplayString(item), 1);
}), 64))
]),
vue.withDirectives(vue.createElementVNode("div", _hoisted_6, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(calendarData).preNullList, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "item pre-null"
});
}), 128)),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(calendarData).list, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "item",
style: vue.normalizeStyle({ background: getDayBgColor(item) })
}, [
vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(index + 1), 1),
vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(getDayValue(item)), 1)
], 4);
}), 128)),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(calendarData).suffNullList, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "item flex suff-null"
}, [
vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(index + 1 + vue.unref(calendarData).list.length), 1)
]);
}), 128))
], 512), [
[vue.vShow, vue.unref(calendarData).list.length]
]),
vue.withDirectives(vue.createVNode(vue.unref(index.default), null, null, 512), [
[vue.vShow, !vue.unref(calendarData).list.length]
]),
vue.createElementVNode("div", _hoisted_10, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(calendarData).legends, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: index,
class: "item"
}, [
vue.createElementVNode("div", _hoisted_11, vue.toDisplayString(item.level), 1),
vue.createElementVNode("div", {
class: "flex num",
style: vue.normalizeStyle({ color: item.color, background: item.bgColor })
}, vue.toDisplayString(item.num), 5)
]);
}), 128))
])
]);
};
}
});
exports.default = _sfc_main;