PolluteCalendar 污染日历

ued

此组件用于展示污染等级的日历。

基本使用

• 通过theme参数控制适老化。
• 通过nodeOptions 参数为节点的配置。配置文件见下方代码。level 可以自定义配置字段名,color 必传。
• 通过prop 自定义 nodeOptions 中的 level 和 color 字段，默认为 level 和 color，非必传。
• 通过monthTitle参数控制日历的范围。格式为2021-04
• 通过pollutionData参数日历组件每个月的数据。[['2022-03-01', 1, 1],['2022-03-02', 2, 2],['2022-03-03', 3, 3]]第一个值对应是日期,第二个值对应是value,第三个值对应是level

警告

nodeOptions 中的 level 对应了pollutionData中的第三个参数(level)，显示日历的颜色。

<template>
    <scroll-view scroll-y="true" style="height: 100%">
        <u-pollute-calendar
            v-for="(item, index) in pollutionData"
            :key="index"
            :theme="theme"
            :nodeOptions="nodeOptions"
            :prop="prop"
            :monthTitle="item.monthTitle"
            :pollutionData="item.pollutionData"
            @calendarClick="calendarClick"
        ></u-pollute-calendar>
    </scroll-view>
</template>
<script>
import moment from "moment";
import _reverse from "lodash/reverse";
/**
 * 模拟数据
 * 格式为:
 * {
		dates: [
			"2021-04-01",
			"2021-04-02",
			"2021-04-03"
			],
		values:[
			5,
			4,
			null
		]
	}
 */
import polluteData from './data'
// 节点的配置,level可以自定义配置字段名,color必填，目前只用到 level和color。
const nodeOptions = [
	{
		qualityState: "优",
		level: 1,
		color: "#03a9f3",
		description: "Ⅰ～Ⅲ类水质比例≥90%"
	},
	{
		qualityState: "良好",
		level: 2,
		color: "#84c941",
		description: "75％≤Ⅰ～Ⅲ类水质比例＜90％"
	},
	{
		qualityState: "轻度污染",
		level: 3,
		color: "#E8DD3E",
		description: "Ⅰ～Ⅲ类水质比例＜75％，且劣Ⅴ类比例＜20％"
	},
	{
		qualityState: "中度污染",
		level: 4,
		color: "#d9cc4b",
		description: "Ⅰ～Ⅲ类水质比例＜75％，且 20％≤劣Ⅴ类比例＜40％"
	},
	{
		qualityState: "重度污染",
		level: 5,
		color: "#e02134",
		description: "Ⅰ～Ⅲ类水质比例＜60％，且劣Ⅴ类比例≥40％"
	}
];
export default {
    name: "polluteCalendar",
    data() {
        return {
            theme: 'normal',
            pollutionData: [],
            level: 'level',
            nodeOptions: nodeOptions, //节点参数
            storeConditionQuery: {
                calendarYearSelected: [
                    moment()
                        .subtract(11, "months")
                        .startOf("month")
                        .toDate(),
                    moment()
                        .endOf("month")
                        .toDate()
                ]
            }
        }
    },
    methods: {
        /**
         * 获取日历数据
         */
        async getData() {
            this.pollutionData = this.dealData(polluteData);
        },
        /**
         * 日历数据处理
         * @param resp
         * @return {*}
         */
        dealData(resp) {
            const date = this.storeConditionQuery.calendarYearSelected;
			if (!resp || !resp.dates || !resp.dates.length) {
				return;
			}
			const monthCount =
				moment(date[1]).diff(moment(date[0]), "months") + 1;
			let dateList = resp.dates;
			let valueList = resp.values;
			const lunarData = [];
			for (let i = 0; i < monthCount; i++) {
				let obj = {};
				const data = [];
				for (let j = 0; j < dateList.length; j++) {
					if (
						j === 0 ||
						(moment(dateList[j]).year() ===
							moment(dateList[j - 1]).year() &&
							moment(dateList[j]).month() ===
								moment(dateList[j - 1]).month())
					) {
						const value =
							valueList && valueList[j] != null
								? valueList[j]
								: null;
						const level =
							valueList && valueList[j]
								? parseInt(valueList[j])
								: 0;
						data.push([dateList[j], value, level]);
					} else {
						dateList = dateList.slice(j);
						if (valueList) {
							valueList = valueList.slice(j);
						}
						break;
					}
				}
				obj.monthTitle = moment(data[0][0], "YYYY-MM-DD").format(
					"YYYY-MM"
				);
				obj.pollutionData = data;
				lunarData.push(obj);
			}
			return _reverse(lunarData);
        },
        // 日历点击
		// 日历点击
		calendarClick(item) {
			console.log("日历点击Item：", item);
		}
    },
    mounted() {
        this.getData();
    }
}
</script>

API

Props

参数	说明	类型	默认值	可选值
theme	主题模式，普通模式normal，关怀模式care	String	normal	care
nodeOptions	污染等级的配置选项	Array	[]	-
props	自定义节点属性	Object	{ level: 'level', color: 'color' }	-
monthTitle	日历的范围，格式为2021-04	String	-	-
pollutionData	日历数据,第一个值对应是日期,第二个值对应是value,第三个值对应是level	Array	[['2022-03-01', 1, 1],['2022-03-02', 2, 2],['2022-03-03', 3, 3]]	-

Event

事件名	说明	回调参数
calendarClick	点击日期	日期相关的返回参数