日期切换

组件:
<template><div class="time-picker"><el-radio-group size="small" v-model="timeType" @change="changePickerType"><el-radio-button label="hour" v-if="isShow">时</el-radio-button><el-radio-button label="day">日</el-radio-button><el-radio-button label="month">月</el-radio-button><el-radio-button label="quarter">季</el-radio-button><el-radio-button label="year">年</el-radio-button></el-radio-group><el-date-picker v-if="timeType != 'year' && timeType != 'quarter'" v-model="timeList" :type="pickerType[timeType].type" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px" value-format="timestamp" :clearable="false" :format="pickerType[timeType].format" @change="changeDatePicker" class="select-time" popper-class="time-popper" :default-time="['00:00:00', '23:00:00']"></el-date-picker><YearYear1 v-if="timeType == 'year'" style="width:300px" :initYear="dateValue2" @updateTimeRange="updateStatisticYear" /><QuarterTime v-if="timeType == 'quarter'" @getQuarter="getQuarter"></QuarterTime></div>
</template><script>
import YearYear1 from "@/components/YearYear1";
import QuarterTime from "@/components/QuarterTime";
export default {model: {prop: "times",event: "updatetimes",},props: {times: {type: Array,},isShow: {type: Boolean,default: true,},},components: {YearYear1,QuarterTime,},data() {return {timeType: "hour",timeList: [],yearTime: [],dateValue2: [],pickerType: {hour: {type: "datetimerange",format: "yyyy-MM-dd HH时",},day: {type: "daterange",},month: {type: "monthrange",},quarter: {type: "quarter",},year: {type: "year",},},};},methods: {changePickerType(type) {let dayType = {month: {type: "years",count: 1,},day: {type: "days",count: 3,},hour: {type: "days",count: 3,},quarter: {type: "quarter",count: 1,},year: {type: "years",count: 2,},};// var moment = require("moment");// const startDay = moment()// .subtract(dayType[type].count, dayType[type].type)// .format("YYYY-MM-DD HH:00:00");// const endDay = moment().format("YYYY-MM-DD HH:00:00");// this.timeList = [// new Date(startDay).getTime(),// new Date(endDay).getTime(),// ];this.timeList = [];this.yearTime = this.timeList;// this.$emit("updatetimes", this.timeList);},isNull(value) {if (value) {return false;}return true;},//获取季度子组件传回的数据getQuarter(val) {console.log("季节:", val);},// 选择年updateStatisticYear(val) {console.log("年", val);},changeDatePicker(e) {console.log("选择:", e);this.$emit("updatetimes", e);},},
};
</script><style lang="scss" scoped>
.time-picker {display: flex;
}.time-popper {.el-time-spinner {display: flex;justify-content: center;& > :nth-child(2) {display: none;}}.el-picker-panel__footer {& > :first-child {display: none;}}
}
.el-radio-group {margin-right: 10px;
}
.year-picker {line-height: 28px;
}
::v-deep .el-radio-button--small .el-radio-button__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small.el-input__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small .el-range__icon {line-height: 30px;
}
</style>
里面的年(YearYear1)和季度(QuarterTime)组件是前面分享的文章:
标题:年至年的选择仿elementui的样式、仿真elementUI的时间选择的季度选择
引入即可
使用:
<SelectTimePicker :isShow="false" @updatetimes="updatetimes"></SelectTimePicker>import SelectTimePicker from "@/components/SelectTimePicker/index.vue";
components: { SelectTimePicker },updatetimes(val) {console.log("点击:", val);
},
相关文章:
日期切换
组件:<template><div class"time-picker"><el-radio-group size"small" v-model"timeType" change"changePickerType"><el-radio-button label"hour" v-if"isShow">时</el…...
怎么裁剪视频大小尺寸?简单的裁剪方法分享
怎么裁剪视频的画面大小尺寸呢?有时当我们下载下来一段视频,由于视频的画面大小比例不同,会有很多的黑边,我们不管是观看还是进行二次编辑都非常影响体验,而调整视频画面比例以适应观众的设备或平台,比如将…...
智慧工地源码,Spring Cloud+ Vue+UniApp开发,微服务架构
智慧工地源码,智慧工地云平台源码 智慧工地APP源码 智慧工地的核心是数字化,它通过传感器、监控设备、智能终端等技术手段,实现对工地各个环节的实时数据采集和传输,如环境温度、湿度、噪音等数据信息,将数据汇集到云…...
【Hystrix技术指南】(5)Command创建和执行实现
创建流程 构建HystrixCommand或者HystrixObservableCommand对象 *使用Hystrix的第一步是创建一个HystrixCommand或者HystrixObservableCommand对象来表示你需要发给依赖服务的请求。 若只期望依赖服务每次返回单一的回应,按如下方式构造一个HystrixCommand即可&a…...
学习笔记-JAVAJVM-JVM的基本结构及概念
申明:文章内容是本人学习极客时间课程所写,文字和图片基本来源于课程资料,在某些地方会插入一点自己的理解,未用于商业用途,侵删。 原资料地址:课程资料 什么是JVM 原文连接: 原文连接 JVM是J…...
ubuntu20.04 docker 下编译 tensorflow-gpu
ubuntu20.04 安装tensorflow-gpu 配置: 系统 ubuntu 20.04 LTS 显卡 GTX 1060 6G 1 安装cudatoolkit (我选 CUDA Toolkit 12.2 ) NVIDIA CUDA Installation Guide for Linux https://docs.nvidia.com/cuda/cuda-installation-guide-linux/in…...
❤ VUE3 项目路由拦截器配置(二)
❤ VUE3 项目 路由拦截器进一步 配置 路由拦截抽离为单个模块permission.ts 路由配置规则 白名单(直接进入) PC页面和PC子页面(直接进入) 后台页面(验证token ) 没有token> 后台登录页面 有token> 后…...
Filament 如何自定义登录页面
官方的页面太简约了,而且可供修改的范围太少了 通过发布官方资源可以看到 resources/views/vendor/filament-panels/pages/auth/login.blade.php <x-filament-panels::page.simple>if (filament()->hasRegistration())<x-slot name"subheading&…...
百度智能云“千帆大模型平台”最新升级:接入Llama 2等33个模型!
今年3月,百度智能云推出“千帆大模型平台”。作为全球首个一站式的企业级大模型平台,千帆不但提供包括文心一言在内的大模型服务及第三方大模型服务,还提供大模型开发和应用的整套工具链,能够帮助企业解决大模型开发和应用过程中的…...
[保研/考研机试] KY129 简单计算器 浙江大学复试上机题 C++实现
描述 读入一个只包含 , -, *, / 的非负整数计算表达式,计算该表达式的值。 输入描述: 测试输入包含若干测试用例,每个测试用例占一行,每行不超过200个字符,整数和运算符之间用一个空格分隔。没有非法表达式。当一行中…...
推出 Elasticsearch 查询语言 (ES|QL)
作者:Costin Leau 我很高兴地宣布,经过大约一年的开发,Elasticsearch 查询语言 (ES|QL) 已准备好与世界共享,并已登陆 Elasticsearch 存储库。 ES|QL 是 Elasticsearch 原生的强大声明性语言,专为可组合性、表现力和速…...
机器学习 day32(神经网络如何解决高方差和高偏差)
解决高偏差和高方差的新方法 之前,我们需要通过选取多项式次数以及正则化参数λ,来平衡高方差和高偏差 只要训练集不是特别大,那么一个大型的神经网络总能很好的适应训练集,即它的Jtrain很低由此可以得出,若要减小Jt…...
Web前端之NodeJS、Vue
文章目录 一、Babel转码器1.1 Babel安装流程1.2 Babel命令行转码 二、Promise对象三、测试方式四、Vue(渐进式JS框架)4.1 准备4.2 创建一个项目4.3 运行一个项目 五、模板语法5.1 文本5.2 原始html5.3 属性Attribute5.4 使用JavaScript表达式 六、条件渲…...
冠达管理:银行定增是利好还是利空?
银行定增是指银行经过向特定投资者定向发行股票的方法进行增发。这种方法被认为可认为银行提供本钱充足、拓展融资渠道、增强抵挡危险的才能。但是,关于银行定增是否对商场和投资者带来积极影响的讨论一向存在。本文将从多个角度进行剖析,以讨论银行定增…...
背上小书包准备run之TypeScript篇
这TypeScript我真不知道面试会咋问。。。 哦以前还写过一篇基础⬇️ Typescript 基础易理解-------冲冲冲_ts和js有什么区别_慢谷的博客-CSDN博客 typescript是啥?与javascript的区别? TypeScript是一个强类型的JavaScript超集,可编译为纯…...
什么是绩效管理?绩效管理包括哪些内容?
阅读本文您可以了解:1、绩效管理的定义;2、绩效管理的内容; 一、什么是绩效管理 绩效管理是一种组织和管理方法,旨在确保员工的工作与组织的目标保持一致,以及激励和提高员工的工作表现。它涉及设定明确的目标和标准&…...
Java基础练习八(二维数组)
1.装水问题 有一个 异形 容器,用一个 n * n 的二维数组来表示。其中 1 表示容器实心部分, 0 表示空心部分。现使用此容器装水,能装多少水(每个元素都表示一份水,只有有挡板的部分能装水)? publi…...
Biopython序列比对
从InterPro网站(https://www.ebi.ac.uk/interpro/download/Pfam/)下载多序列比对文件Pfam-A.seed.gz(含多个多序列比对) wget https://ftp.ebi.ac.uk/pub/databases/Pfam/current_release/Pfam-A.seed.gz解压,取第一…...
无法坚持运动?解密肠道菌群影响运动积极性
谷禾健康 运动可以说是最有效和可行的生活方式因素,个人可以利用它来保护自己免受各种疾病的侵害,包括代谢性、心血管、神经退行性和肿瘤性疾病。 世界卫生组织建议,每周进行150-300分钟的中等强度运动。 运动的好处具体不用多说了࿰…...
4-5-tablewidget
文章目录 添加控件,添加行列数widget.cppwidget.h效果 添加控件,添加行列数 widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this)…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
