vue项目一个页面包含多个时间选择器的处理方案

描述:vue项目中如果在一个页面使用多个时间选择器组件时,不同的时间选择器需要分别分开工作

解决方案一

原本是想直接每一个时间选择器都安排一套相对独立的维生系统,但是到后面发现繁琐至极,而且报错,果断放弃!!!

解决方案二

利用vue框架自带的:watch 监听属性配合change绑定事件就可以解决这个问题。(代码仅做参考)

<template><div style="margin-top: 15px"><!-- 第一行:一个饼状图+两个表格,饼图放中间 --><el-row :gutter="20" class="gaid-title"><el-col :span="8"><div class="grid-content"><div class="title_hh"><h4>员工排行</h4></div><div class="box_box"><el-table :data="tableData" v-loading="loading" height="330"><el-table-column label="排名" align="center"><template slot-scope="scope"><span v-if="scope.row.index == 0" class="font red">1</span><span v-else-if="scope.row.index == 1" class="font green">2</span><span v-else-if="scope.row.index == 2" class="font plue">3</span><span v-else class="fontmini">{{ scope.row.index + 1 }}</span></template></el-table-column><el-table-column label="部门" prop="depart" /><el-table-column label="姓名" prop="employee_name" /><el-table-column label="预约数" prop="reserve_count" /><el-table-column label="来访数" prop="visitor_count" /><el-table-column label="总数" prop="total" /></el-table></div></div></el-col><el-col :span="9"><div class="grid-content"><div class="title_hh"><h4>预约环形图</h4></div><div class="box_box"><el-row :gutter="10" style="margin-left: 10px"><el-selectsize="mini"v-model="company_no"placeholder="选择查询公司"@change="getcompany(company_no)"clearable><el-optionv-for="item in departs":key="item.value":label="item.label":value="item.value"></el-option></el-select><!-- 在这里绑定了多个change事件,希望顺次执行 --><!-- 思路:利用监听属性来获取时间的数据变化,然后把最新的值赋值到对应数据上去,最后按条件重新获取数据,妙呀!!! --><el-date-pickerstyle="margin-left: 8px"size="mini"v-model="datatime"type="daterange"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd":picker-options="pickerOptions"@change="getPieData(), getTime(datatime)"></el-date-picker><el-buttontype="primary"@click="refresh"size="mini"style="margin-left: 8px">刷新</el-button></el-row><div class="centerrigin" style="margin-top: 30px"><annUlar :ring1="ring1" :ring2="ring2" :legend="legendData" /></div></div></div></el-col><el-col :span="7"><div class="grid-content"><div class="title_hh"><h4>访客排行</h4></div><div class="box_box"><el-table :data="tableData1" v-loading="loading" height="330"><el-table-column label="排名" align="center"><template slot-scope="scope"><span v-if="scope.row.index == 0" class="font red">1</span><span v-else-if="scope.row.index == 1" class="font green">2</span><span v-else-if="scope.row.index == 2" class="font plue">3</span><span v-else class="fontmini">{{ scope.row.index + 1 }}</span></template></el-table-column><!-- <el-table-column label="部门" prop="depart" /> --><el-table-column label="姓名" prop="visitor_name" /><el-table-column label="预约数" prop="reserve_count" /><el-table-column label="来访数" prop="visitor_count" /><el-table-column label="总数" prop="total" /></el-table></div></div></el-col></el-row><!-- 第二行:两个折线图 --><div class="bottom"><el-row :gutter="20" class="gaid-title"><el-col :span="12"><div class="grid-content"><div class="title_hh"><h4>预约折线图</h4></div><div class="box_box"><el-row :gutter="10" style="margin-left: 25px"><el-form inline><el-form-item label="公司查询"><el-selectv-model="company_no2"placeholder="选择查询公司"@change="getcompany2(company_no2)"clearable><el-optionv-for="item in companylist":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="时间查询"><el-date-pickerv-model="datatime2"type="daterange"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd":picker-options="pickerOptions"@change="getTime(datatime2), getOrderDate()"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="refresh2">刷新</el-button></el-form-item></el-form></el-row><lineChart:xdata="xdata":y1="y1":y2="y2":y3="y3":y4="y4":legend="headData"/></div></div></el-col><el-col :span="12"><div class="grid-content"><div class="title_hh"><h4>部门统计图</h4></div><div class="box_box"></div></div></el-col></el-row></div></div>
</template><script>
// 员工排名
import { personnelData } from "@/api/commpy/chart";
// 访客排名
import { visitorData } from "@/api/commpy/chart";
// 获取公司列表
import { getJson } from "@/api/user";
// 饼状图
import annUlar from "../../components/visitTu";
import { ringData } from "@/api/commpy/chart";
// 预约统计图
import lineChart from "../../components/visitTu/linechart.vue";
import { lineData } from "@/api/commpy/chart";
export default {components: { annUlar, lineChart },data() {return {loading: true,// 员工排行表格数据tableData: [],// 访客排行表格数据tableData1: [],// 饼图数据departs: [],ring1: [],ring2: [],legendData: [],company_no: "",datatime: [],queryParams: {start_date: undefined,end_date: undefined,},// 预约折线图数据companylist: [],company_no2: undefined,datatime2: [],xdata: [],y1: [],y2: [],y3: [],y4: [],headData: [],queryParams2: {company_no: "",start_date: undefined,end_date: undefined,},// 时间查询转换pickerOptions: {shortcuts: [{text: "最近一周",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit("pick", [start, end]);},},{text: "最近十五天",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);picker.$emit("pick", [start, end]);},},{text: "最近一个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit("pick", [start, end]);},},{text: "最近三个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit("pick", [start, end]);},},{text: "最近六个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);picker.$emit("pick", [start, end]);},},{text: "最近一年",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);picker.$emit("pick", [start, end]);},},],},};},created() {// 获取双环图数据this.getPieData();this.getEmpeeList();this.getVisitList();this.getCompanyList();this.getOrderDate();},// 直接通过这个监听时间数据的变化,然后把新数据赋值上去,最后再已经获取到新数据的情况下请求新的数据,秒呀watch: {datatime: function (val) {this.queryParams.start_date = val[0];this.queryParams.end_date = val[1];},datatime2: function (val) {this.queryParams2.start_date = val[0];this.queryParams2.end_date = val[1];},},methods: {// 获取饼图数据getPieData() {ringData(this.queryParams).then((res) => {this.ring1 = res.data.data[0];this.ring2 = res.data.data[1];this.legendData = res.data.legend_data;});},// 员工排行getEmpeeList() {personnelData().then((res) => {this.tableData = res.data;this.loading = false;});},// 访客排行getVisitList() {visitorData().then((res) => {this.tableData1 = res.data;this.loading = false;});},//获取公司列表getCompanyList() {getJson().then((res) => {this.departs = res.data.company_list;this.companylist = res.data.company_list;});},//通过公司编号获取数据getcompany(val) {if (val) {this.queryParams.company_no = val;this.getPieData();}},getcompany2(val) {if (val) {this.queryParams2.company_no = val;this.getOrderDate();}},// 获取预约统计图的数据getOrderDate() {lineData(this.queryParams2).then((res) => {this.headData = res.data.legend_data;this.xdata = res.data.xData;this.y1 = res.data.data[0];this.y2 = res.data.data[1];this.y3 = res.data.data[2];this.y4 = res.data.data[3];});},//刷新refresh() {this.datatime = [];this.company_no = undefined;this.queryParams = {start_date: undefined,end_date: undefined,company_no: undefined,};this.getPieData();},// 预约折线图刷新refresh2() {this.datatime2 = [];this.company_no2 = undefined;this.queryParams2 = {start_date: undefined,end_date: undefined,company_no: undefined,};this.getOrderDate();},getTime() {},},
};
</script> 
<style lang="scss" scoped>
.gaid-title {padding: 0px 15px 15px 15px;.grid-content {background: #ffff;.title_hh {border: 1px solid transparent;text-align: center;height: 50px;}}
}.red {color: rgb(209, 78, 78);
}
.green {color: #009e47;background-color: transparent;
}
.plue {color: #0064a8;
}
.font {padding: 10px 0px;font-size: 18px;font-weight: bold;display: inline-block;
}
.fontmini {padding: 10px 0px;font-size: 18px;display: inline-block;
}.centerrigin {text-align: center;display: flex;justify-content: center;
}
</style>

解决方案三

待更新…

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

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

相关文章

JSP SSM 成果展示系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 JSP SSM 冬奥建设成果展示系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的 源代码和数据库&#xff0c;系统主…

PHP教学质量评估系统Dreamweaver开发mysql数据库web结构php编程计算机网页代码

一、源码特点 PHP教学质量评估系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码 https://download.csdn.net/download/qq_41221322/88301983 论文 https://down…

Pinyin4j介绍和简单使用

前言 Pinyin4j是一个Java库&#xff0c;用于将汉字转换为拼音。它是由中国清华大学的Tsinghua University和中国科学院计算技术研究所的研究人员开发的。Pinyin4j可以用于Java应用程序中&#xff0c;以便在需要时将汉字转换为拼音。例如&#xff0c;它可以用于中文输入法、文本…

【牛客刷题】反转固定区间链表、每k个节点一组反转

链表内指定区间反转_牛客题霸_牛客网 ListNode* reverseList(ListNode* head, ListNode* tail) {ListNode* pre nullptr;ListNode* cur head;while (cur ! tail) { 最后cur就是tailListNode* temp cur->next;cur->next pre;pre cur;cur temp;}return pre;}ListNode…

ReactiveUI MVVM框架(1)-Collections

ReactiveUI MVVM框架&#xff08;1&#xff09;-Collections ReactiveUI使用动态数据&#xff08;DynamicData&#xff09;用于集合的操作。 当对动态数据集合进行更改时&#xff0c;会产生更改通知&#xff0c;通知表示为ChangeSet&#xff0c;里面包含了更改信息&#xff0…

AR工业远程巡查系统:实时监控设备状态,及时发现潜在问题

随着工业4.0的到来&#xff0c;先进的技术和创新的解决方案正在改变着工业生产的方式。其中&#xff0c;增强现实&#xff08;AR&#xff09;技术带来的工业巡检系统就是一个典型的例子。这种系统通过在现实世界中添加虚拟信息&#xff0c;使得操作人员能够更有效地进行检查和维…

入门ElasticSearch :为什么选择ES作为搜索引擎?

介绍 随着数据量的不断增长&#xff0c;搜索和分析大规模数据集变得越来越重要。传统数据库在面对这种需求时往往表现不佳&#xff0c;这时候就需要一种专门用于搜索和分析的引擎。ElasticSearch &#xff08;简称ES&#xff09;就是这样一款强大的搜索引擎&#xff0c;它具有许…

Java设计模式之建造者模式详解(Builder Pattern)

在日常的开发工作中&#xff0c;我们常常需要创建一些复杂的对象。这些对象可能包含许多不同的属性&#xff0c;并且这些属性的初始化过程可能相当复杂。在这种情况下&#xff0c;建造者模式是一种非常有用的设计模式&#xff0c;因为它允许我们分步骤地创建复杂的对象。 概念和…

软件概要设计-架构真题(二十五)

软件概要设计包括软件设计的结构、确定系统功能模块及其相互关系&#xff0c;主要采用&#xff08;&#xff09;描述程序的结构。&#xff08;2018年&#xff09; 程序流程图、PAD图和伪代码模块结构图、数据流图和盒图模块结构图、层次图和HIPO图程序流程图、数据流图和层次图…

2023 IntelliJ IDEA下载、安装教程, 附详细图解

文章目录 下载与安装IDEA推荐阅读 下载与安装IDEA 首先先到官网下载最新版的IntelliJ IDEA, 下载后傻瓜式安装就好了 官网下载地址&#xff1a;https://www.jetbrains.com/ 1、下载完后在本地找到该文件&#xff0c;双击运行 idea 安装程序 2、点击 Next 3、选择安装路径&…

UMA 2 - Unity Multipurpose Avatar☀️五.如何使用别人的Recipe和创建自己的服饰Recipe

文章目录 🟥 使用别人的Recipe1️⃣ 导入UMA资源效果展示2️⃣ 更新Library3️⃣ 试一下吧🟧 创建自己的服饰Recipe1️⃣ 创建自己的服饰Recipe2️⃣ 选择应用到的Base Recipe3️⃣ 指定显示名 / 佩戴位置 / 隐藏部位4️⃣ 给该服饰Recipe指定Slot / Overlay🚩 赋予Slot�…

Nginx 解析漏洞

文章目录 Nginx 解析漏洞1. 空字节漏洞1.1 漏洞描述1.2 漏洞复现1.3 修复方案 2. Nginx 解析漏洞复现2.1 漏洞描述2.2 漏洞复现2.3 获取GetShell2.4 修复方案 3. Nginx 文件名逻辑漏洞3.1 漏洞描述3.2 漏洞原理3.3 漏洞复现3.3.1 环境启动3.3.2 漏洞验证 3.4 漏洞利用3.5 修复方…

【C++杂货铺】探索stack和queue的底层实现

文章目录 一、stack的介绍和使用1.1 stack的介绍1.2 stack的使用1.2.1 最小栈1.2.2 栈的压入、弹出序列1.2.3 逆波兰表达式求值1.2.4 用栈实现队列 二、queue的介绍和使用2.1 queue的介绍2.2 queue的使用2.2.1 二叉树的层序遍历 三、模拟实现3.1 stack模拟实现3.2 queue模拟实现…

CUDA小白 - NPP(4) 图像处理 Data Exchange and Initialization(1)

cuda小白 原始API链接 NPP GPU架构近些年也有不少的变化&#xff0c;具体的可以参考别的博主的介绍&#xff0c;都比较详细。还有一些cuda中的专有名词的含义&#xff0c;可以参考《详解CUDA的Context、Stream、Warp、SM、SP、Kernel、Block、Grid》 常见的NppStatus&#xf…

kafka 3.5 主题分区的Follower创建Fetcher线程从Leader拉取数据源码

Kakfa集群有主题&#xff0c;每一个主题下又有很多分区&#xff0c;为了保证防止丢失数据&#xff0c;在分区下分Leader副本和Follower副本&#xff0c;而kafka的某个分区的Leader和Follower数据如何同步呢&#xff1f;下面就是讲解的这个 首先要知道&#xff0c;Follower的数据…

二叉树(上)

“路虽远&#xff0c;行则将至” ❤️主页&#xff1a;小赛毛 目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示&#xff08;树的存储&#xff09; 2.二叉树概念及结构 2.1概念 2.2现实中的二叉树 2.3 特殊的二叉树&#xff1a; 2.4 二叉树的性质 3.二叉树的顺…

java 整合 swagger-ui 步骤

1.在xml 中添加Swagger 相关依赖 <!-- springfox-swagger2 --><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><!-- springfox-swa…

【Python从入门到进阶】35、selenium基本语法学习

接上篇《34、selenium基本概念及安装流程》 上一篇我们介绍了selenium技术的基础概念以及安装和调用的流程&#xff0c;本篇我们来学习selenium的基本语法&#xff0c;包括元素定位以及访问元素信息的操作。 一、元素定位 Selenium元素定位是指通过特定的方法在网页中准确定位…

Canape使用中遇到问题的解决办法

问题一、canape绘制目标时&#xff0c;二维结构体变量只能录制16个的解决办法 打开ASAP2 Studio 2.6 -Expert 软件。 把该软件中的设置项如下图进行修改。 然后用ASAP2 Studio 2.6 -Expert 软件 打开elf文件导出成A2L文件。 最后关闭该软件。 再在canape工程中重新加载刚才…

振弦采集仪应用地铁隧道安全监测详细解决方案

振弦采集仪应用地铁隧道安全监测详细解决方案 随着城市化进程的不断加快&#xff0c;地铁作为一种高效、便捷、环保的交通方式已经成为现代城市不可或缺的一部分。因此&#xff0c;对地铁的安全性也越来越重视&#xff0c;一般二三线以上的城市在不断发展中&#xff0c;地铁做…