二次封装的天气时间日历选择组件

在这里插入图片描述

这个接口没调通 没有数据展示~
userStore.badgeDate是VUEX全部存的日历数据

<template><!-- 日历组件 --><el-date-pickerref="elPicker":size="size"v-model="dateTimeValue":type="dateType":range-separator="rangeSeparator":placeholder="placeholder":start-placeholder="startPlaceholder":end-placeholder="endPlaceholder"@change="changeDate":clearable="delClearable":popper-class="popperClass":default-time="defaultTime":format="format":value-format="valueFormat":shortcuts="shortcuts"><template #default="cell"><div class="el-date-table-cell" :class="{ current: cell.isCurrent }"><div class="day">{{ cell.text }}</div><div class="holiday"><div class="onename">{{ filtrationTimeShow(cell.date) }}</div><div class="twoname">{{ filtrationTimeShowtwo(cell.date) }}</div></div></div></template></el-date-picker>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
const { proxy } = getCurrentInstance();
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();const props = defineProps({dateType: {type: String,default: "datetimerange",},size: {type: String,default: "default",},//时间组dateTime: {type: [Array, String],},//时间格式化类型valueFormat: {type: String,default: "YYYY-MM-DD HH:mm:ss",},format: {type: String,default: "YYYY-MM-DD HH:mm:ss",},placeholder: {type: String,default: "请选择时间",},startPlaceholder: {type: String,default: "开始时间",},endPlaceholder: {type: String,default: "结束时间",},rangeSeparator: {type: String,default: "-",},//   样式classpopperClass: {type: String,default: "timePickerPopper",},//   默认开始结束时分秒defaultTime: {// type: [Array, String],// default: [new Date(2024, 1, 1, 12, 0, 0), new Date(2024, 2, 1, 8, 0, 0)],},//   是否显示清除delClearable: {type: Boolean,default: true,},// 默认搜索日历年份datesYear: {type: [String, Number],default: new Date().getFullYear(),},
});
const shortcuts = computed(() => {return [{text: "最近一周",value: () => {return [proxy.moment().subtract(7, "day").format(props.valueFormat),proxy.moment(new Date()).format(props.valueFormat),];},},{text: "最近一月",value: () => {return [proxy.moment().subtract(1, "months").format(props.valueFormat),proxy.moment(new Date()).format(props.valueFormat),];},},{text: "最近半年",value: () => {return [proxy.moment().subtract(6, "months").format(props.valueFormat),proxy.moment(new Date()).format(props.valueFormat),];},},{text: "最近一年",value: () => {return [proxy.moment().subtract(1, "years").format(props.valueFormat),proxy.moment(new Date()).format(props.valueFormat),];},},{text: "今年",value: () => {return [proxy.moment(proxy.moment().year(proxy.moment().year()).startOf("year").valueOf()).format(props.valueFormat),proxy.moment(proxy.moment().year(proxy.moment().year()).endOf("year").valueOf()).format(props.valueFormat),];},},{text: "去年",value: () => {return [proxy.moment(proxy.moment().year(proxy.moment().year() - 1).startOf("year").valueOf()).format(props.valueFormat),proxy.moment(proxy.moment().year(proxy.moment().year() - 1).endOf("year").valueOf()).format(props.valueFormat),];},},];
});const badgeDate = ref(userStore.badgeDate);const dateTimeValue = ref(null);
const emit = defineEmits();watch(() => props.dateTime,(val) => {dateTimeValue.value = val;},{ immediate: true }
);
watch(() => props.datesYear,(val) => {if (val) {// props.datesYear不传默认当前年份// 传入之前年份可以查询年区间之内的天气;userStore.GetweatherDayList(props.datesYear);}},{ immediate: true }
);const changeDate = () => {console.log();emit("update:dateTime", dateTimeValue.value);
};const filtrationTimeShow = (Date) => {let array = badgeDate.value;let getdate = proxy.moment(Date).format("YYYY-MM-DD");// console.log('Date', getdate, array[0].time);for (let index = 0; index < array.length; index++) {if (array[index].time.includes(getdate)) {if (array[index].rain == 0) {return "";} else {return array[index].rain;}}}
};const filtrationTimeShowtwo = (Date) => {let array = badgeDate.value;let getdate = proxy.moment(Date).format("YYYY-MM-DD");// console.log('Date', getdate, array[0].time);for (let index = 0; index < array.length; index++) {if (array[index].time.includes(getdate)) {if (array[index].rainLevel.includes("无雨")) {return "";} else {return array[index].rainLevel;}}}
};onMounted(() => {});
</script>
<style lang="scss">
.timePickerPopper {.available {// line-height: 30;// padding: 5px;}.holiday {position: absolute;// height: 20px;line-height: 12px;color: #409eff;top: 30px;left: 50%;transform: translateX(-50%);width: 100%;z-index: 999;.onename {font-size: 12px !important;}.twoname {font-size: 10px !important;}}.el-date-table td .el-date-table-cell {height: 0.26rem !important;margin: 0 !important;}.el-date-table td.start-date .el-date-table-cell {background: rgb(203, 213, 228);}.el-date-table td.end-date .el-date-table-cell {background: rgba(203, 225, 228, 1);}.current {color: #409eff !important;}
}
</style>

vuex示例 是在获取了用户信息之后 调取日历的接口数据

import { login, logout, getInfo } from "@/api/login";
import { weatherDayList } from '@/components/DateSelect/DateSelectApi';
import { getToken, setToken, removeToken } from "@/utils/auth";
import defAva from "@/assets/images/profile.jpg";
import Cookies from "js-cookie";
const useUserStore = defineStore("user", {state: () => ({token: getToken(),name: "",avatar: "",roles: [],userInfo: {},permissions: [],badgeDate: [],}),actions: {// 登录login(userInfo) {const username = userInfo.username.trim();const password = userInfo.password;const code = userInfo.code;const uuid = userInfo.uuid;return new Promise((resolve, reject) => {login(username, password, code, uuid).then((res) => {let data = res.data;setToken(data.access_token);this.token = data.access_token;resolve();}).catch((error) => {reject(error);});});},// 获取用户信息getInfo() {return new Promise((resolve, reject) => {getInfo().then((res) => {const data = res.data;data.user.posts = data.posts;this.userInfo = data.user;const avatar =data.user.avatar == "" || data.user.avatar == null? defAva: data.user.avatar;if (data.roleIds && data.roleIds.length > 0) {// 验证返回的roles是否是一个非空数组this.roles = data.roleIds;this.permissions = data.permissions;} else {this.roles = ["ROLE_DEFAULT"];}this.name = data.user.userName;this.avatar = avatar;this.GetweatherDayList()resolve(res);}).catch((error) => {reject(error);});});},// 退出系统logOut() {return new Promise((resolve, reject) => {logout(this.token).then(() => {this.token = "";this.roles = [];Cookies.remove("showFlag");this.permissions = [];removeToken();resolve();}).catch((error) => {reject(error);});});},// 获取日历天气GetweatherDayList(datesYear) {// datesYear 传入年份 默认时间为当前年 传入之前年份可以查询年区间的天气datesYear = datesYear ? Number(datesYear) : new Date().getFullYear();let data = {start: datesYear - 1 + '-01-01',end: new Date().getFullYear() + '-12-31',};return new Promise((resolve, reject) => {weatherDayList(data).then(res => {console.log('res', res);this.badgeDate = res.data;resolve();}).catch(error => {reject(error);});});},},
});export default useUserStore;
    <!-- 全局公共dateselect日历选择组件示例 --><DateSelect v-model:dateTime="dateTimeone" :dateType="'datetime'" :valueFormat="'YYYY-MM-DD HH:mm:ss'" /><div></div><DateSelect v-model:dateTime="nodate" :dateType="'datetime'" :valueFormat="'YYYY-MM-DD HH:mm:ss'" /><div></div><DateSelect v-model:dateTime="nodatearr" :dateType="'datetimerange'" /><div></div><DateSelect v-model:dateTime="dateTimetwo" :dateType="'date'" :valueFormat="'YYYY-MM-DD'" /><div></div><DateSelect v-model:dateTime="dateTimearr" /><div></div><DateSelect v-model:dateTime="dateTimearr" :dateType="'daterange'" :valueFormat="'YYYY-MM-DD'" />

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/61597.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

当你项目服务器磁盘报警

当你项目服务器磁盘报警

当你们公司运维收到这样的邮件&#xff0c;大概率日志文件过大引起的 在Linux下如何不停止服务,清空nohup.out文件呢&#xff1f; nohup.out会一直一直自己增长下去&#xff0c;如果你的服务器硬盘不给力的话&#xff0c;很容易把应用也挂掉&#xff08;硬盘没空间 &#xff0…
阅读更多...
如何理解 TypeScript 中命名空间与模块？两者都有那些区别？如何更好的应用？

如何理解 TypeScript 中命名空间与模块？两者都有那些区别？如何更好的应用？

在 TypeScript 中&#xff0c;命名空间&#xff08;Namespace&#xff09;和模块&#xff08;Module&#xff09;是两种不同的代码组织方式&#xff0c;用于组织和管理代码结构&#xff0c;避免命名冲突和提高可维护性。虽然它们都可以将代码划分为不同的逻辑单元&#xff0c;但…
阅读更多...
基于Qwen-Agent框架的Function Call及ReAct方式调用自定义工具

基于Qwen-Agent框架的Function Call及ReAct方式调用自定义工具

本文主要基于ollama加载的qwen2.5模型以及Qwen-Agent框架，实现对工具的自主定义和准确调用。调用方式上尝试了Function Call及ReAct这两种大的方向，并探索了流式与非流式生成方式、串行与并行的函数调用、以及中英语言的提示词模版的效果比较。 文章目录 准备工作工具定义模型…
阅读更多...
低速接口项目之串口Uart开发(四)——UART串口实现FPGA内部AXILITE寄存器的读写控制

低速接口项目之串口Uart开发(四)——UART串口实现FPGA内部AXILITE寄存器的读写控制

本节目录 一、设计背景 二、设计思路 三、逻辑设计框架 四、仿真验证 五、上板验证 六、往期文章链接本节内容 一、设计背景 通常&#xff0c;芯片手册或者IP都会提供一系列的用户寄存器以及相关的定义&#xff0c;用于软件开发人员进行控制底层硬件来调试&#xff0c;或封装…
阅读更多...
git branch -d 删除分支

git branch -d 删除分支

Git进行版本控制时&#xff0c;删除分支是常见的操作。特别是当特定的功能开发完成或者分支不再需要时&#xff0c;删除分支可以帮助保持仓库的整洁。删除本地分支和删除远端分支是两个独立的操作。如果需要同时删除本地和远端的分支&#xff0c;需要分别执行以下两个命令。 一…
阅读更多...
Linux环境开启MongoDB的安全认证

Linux环境开启MongoDB的安全认证

文章目录 1. MongoDB安全认证简介1.1 访问控制1.2 角色1.3 权限 2. MongoDB中的常见角色3. MongoDB Shell3.1 下载MongoDB Shell3.2 通过MongoDB Shell连接MongoDB 4. 创建管理员用户5. 为具体的数据库创建用户6. 开启权限认证7. 重启MongoDB服务8. 连接MongoDB9. MongoDB数据库…
阅读更多...
Flutter封装Coap

Flutter封装Coap

前言 我们根据Coap数据通信流程写一个公共组件&#xff0c;用户只要在原本的组件外嵌套这个公共组件就可以使用Coap的功能&#xff0c;这样做更加的方便便捷。 具体步骤 封装一个udp函数 创建一个工厂函数&#xff0c;工厂函数初始化时监听广播数据发送广播函数&#xff1a…
阅读更多...
探索 Vue.js：构建交互式前端的强大工具

探索 Vue.js：构建交互式前端的强大工具

在当今的 web 开发领域&#xff0c;前端技术日新月异&#xff0c;而 Vue.js 作为一款备受瞩目的 JavaScript 框架&#xff0c;以其简洁易用、高效灵活的特点&#xff0c;赢得了众多开发者的青睐。今天&#xff0c;就让我们深入了解一下 Vue.js 的相关知识&#xff0c;同时也探讨…
阅读更多...
Java方法中的可变参数列表

Java方法中的可变参数列表

在Java中&#xff0c;可变参数列表&#xff08;Variable Argument List&#xff09;允许方法接受不定数量的参数。可变参数列表通过在方法参数类型后加上三个点&#xff08;...&#xff09;来定义。可变参数列表实际上是一个数组&#xff0c;因此可以在方法内部像操作数组一样操…
阅读更多...
PVE的优化与温度监控（二）—无法识别移动硬盘S.M.A.R.T信息的思考并解决

PVE的优化与温度监控（二）—无法识别移动硬盘S.M.A.R.T信息的思考并解决

前情提要&#xff1a;空闲2.5英寸机械硬盘&#xff0c;直接放到PVE上测试NAS 使用&#xff0c;通过SATA线的方式让小主机不太美观&#xff0c;并且失去了前期调试的安全性。购入移动硬盘盒&#xff0c;缺点&#xff0c;USB 连接&#xff0c;会失去一些特性。比如本文中遇到的问…
阅读更多...
嵌入式硬件实战基础篇(二)-稳定输出3.3V的太阳能电池-无限充放电

嵌入式硬件实战基础篇(二)-稳定输出3.3V的太阳能电池-无限充放电

引言&#xff1a;本内容主要用作于学习巩固嵌入式硬件内容知识&#xff0c;用于想提升下述能力&#xff0c;针对学习稳压芯片和电容以及电池之间的运用&#xff0c;对于硬件PCB以及原理图的练习和前面硬件篇的实际运用&#xff1b;太阳能是一种清洁、可再生的能源&#xff0c;广…
阅读更多...
Word和Excel使用有感

Word和Excel使用有感

1.画图 折线图&#xff1a;适用于多个y值的画图 散点图&#xff1a;适合需要对x轴进行自定义时使用 2.word和excel的联动 1&#xff09;excel中的数据导入word直接复制即可 若是表格中的数据要导入word 则先将表格中的数据拆分出来&#xff0c;再直接复制到word中 2&#…
阅读更多...
OpenCV相机标定与3D重建(3)校正鱼眼镜头畸变的函数calibrate()的使用

OpenCV相机标定与3D重建(3)校正鱼眼镜头畸变的函数calibrate()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::calibrate 函数是 OpenCV 中用于校正鱼眼镜头畸变的一个重要函数。该函数通过一系列棋盘格标定板的图像来计算相机的内参矩阵和畸变…
阅读更多...
【过程控制系统】第6章 串级控制系统

【过程控制系统】第6章 串级控制系统

目录 6. l 串级控制系统的概念 6.1.2 串级控制系统的组成 6.l.3 串级控制系统的工作过程 6.2 串级控制系统的分析 6.2.1 增强系统的抗干扰能力 6.2.2 改善对象的动态特性 6.2.3 对负荷变化有一定的自适应能力 6.3 串级控制系统的设计 6.3.1 副回路的选择 2.串级系…
阅读更多...
24/11/22 项目拆解 艺术风格转移

24/11/22 项目拆解 艺术风格转移

我们有时候想把两种艺术风格整合&#xff0c;创造更具艺术特色的艺术品&#xff0c;人很难办到&#xff0c;但是人工智能可以,比如下面将艺术画的风格转移到照片上。 我们先来初步了解一下实现上述功能的数学原理 所谓艺术风格&#xff0c;其实就是边缘&#xff0c;颜色&#…
阅读更多...
中断的详细流程

中断的详细流程

一、中断请求 中断请求是中断过程的起始阶段&#xff0c;由需要CPU服务的外设&#xff08;中断源&#xff09;向CPU发出请求信号。这个信号可以是电平信号或边沿信号&#xff0c;具体取决于中断系统的设计和中断源的类型。 二、中断判优 当系统中存在多个中断源时&#xff0…
阅读更多...
Unity图形学之CubeMap立方体贴图

Unity图形学之CubeMap立方体贴图

1.CubeMap&#xff1a;有六个面的贴图组成 2. 假反射&#xff1a;反射天空盒子 &#xff08;1&#xff09;正常UV采样&#xff1a; &#xff08;2&#xff09;Cube的采样&#xff1a;利用反射角采样&#xff0c;反射角X和Cube的交点采样 Shader "Custom/TestReflect"…
阅读更多...
LLM Inference Unveiled

LLM Inference Unveiled

题目&#xff1a;LLM Inference Unveiled: Survey and Roofline Model Insights 链接&#xff1a;https://arxiv.org/abs/2402.16363 这也是一篇推理加速的综述&#xff0c;重点关注一下它的组织结构吧&#xff0c;也就是它对推理加速方法的分类 论文给的全文结构图&#xff…
阅读更多...
Cesium的ClearCommand的流程

Cesium的ClearCommand的流程

ClearCommand是在每帧渲染前可以将显存的一些状态置为初始值&#xff0c;就如同把擦黑板。当然也包括在绘制过程中擦掉部分的数据&#xff0c;就如同画家在开始绘制的时候会画导览线&#xff08;如透视线&#xff09;&#xff0c;轮廓出来后这些导览线就会被擦除。 我画了一个…
阅读更多...
【系统架构设计师】真题论文: 论企业应用系统的分层架构风格 （包括解题思路和素材）

【系统架构设计师】真题论文: 论企业应用系统的分层架构风格 （包括解题思路和素材）

更多内容请见： 备考系统架构设计师-专栏介绍和目录 文章目录 真题题目（2013年 试题1）解题思路论文素材参考常见分层架构模式分层架构风格的优势分层架构风格在企业应用系统中的应用案例真题题目（2013年 试题1） 软件架构风格是描述一类特定应用领域中系统组织方式的惯用模…
阅读更多...
最新文章

Copyright @ 2022~2023