vue3 ts 实现一个下载数据功能(基本功能组件)

<script lang="ts" setup>

import { ElMessage } from 'element-plus'

import { useLinenetStore } from '../pages/index/uses/linenet'

const linenetStore = useLinenetStore()

// 创建一个变量用来存储数据

interface IvehicleData {

  data: any

  timestamp: number

}

const vehicleDatas: Ref<IvehicleData[]> = ref([])

let sgin = false

// 添加数据,自动附带时间戳

function addData(newData: any) {

  const newItem: IvehicleData = {

    data: newData,

    timestamp: Date.now(),

  }

  vehicleDatas.value.push(newItem)

}

// 清理过期数据

function cleanExpiredData() {

  vehicleDatas.value = []

}

// 导出数据到本地

function exportData() {

  const dataToExport = JSON.stringify(vehicleDatas.value.map((item: any) => item.data), null, 2)

  const blob = new Blob([dataToExport], { type: 'text/json' })

  const url = URL.createObjectURL(blob)

  const a = document.createElement('a')

  a.href = url

  a.download = 'vehicleData10min.json'

  document.body.appendChild(a)

  a.click()

  document.body.removeChild(a)

  URL.revokeObjectURL(url)

}

function startClick() {

  if (sgin)

    return

  ElMessage({

    message: '导出开始!',

    type: 'success',

  })

  sgin = true

  setTimeout(() => {

    sgin = false

    exportData()

    cleanExpiredData()

    ElMessage({

      message: '导出完成!',

      type: 'success',

    })

  }, 60000) // 10min = 600000s 1min=60000s

}

watch(() => linenetStore.unityVehicles, (newVal) => {

  if (!sgin)

    return

  // 添加数据

  addData(newVal)

})

</script>

<template>

  <div

    class="text-center"

  >

    <button style="padding: 4px; cursor: pointer; font-size: 14px;" @click="startClick">

      导出数据

    </button>

  </div>

</template>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从0开始学习Linux——Yum工具

往期目录&#xff1a; 从0开始学习Linux——简介&安装 从0开始学习Linux——搭建属于自己的Linux虚拟机 从0开始学习Linux——文本编辑器 上一个章节我们简单了解了Linux中常用的一些文本编辑器&#xff0c;本次教程我们将学习yum工具。 一、Yum简介 Yum&#xff08;全名…

推荐一款基于Flash的交互式园林设计工具:Garden Planner

Garden Planner是一款由Artifact Interactive开发的基于Flash的交互式园林设计工具。它允许用户以拖放的方式安排植物、树木、建筑物和各种对象&#xff0c;使园林规划变得简单直观。此外&#xff0c;Garden Planner提供工具来快速创建铺路、路径和围栏&#xff0c;帮助用户设计…

WinForms 中使用 MVVM 模式构建应用:实现登录页面、页面导航及 SQLite 数据库连接完整框架搭建过程

前言 在传统的 WinForms 应用程序开发中&#xff0c;很多开发者使用事件驱动的设计模式&#xff0c;直接将业务逻辑编写在界面代码中。然而&#xff0c;随着应用程序的复杂性增加&#xff0c;单一的界面文件变得臃肿&#xff0c;难以测试和维护。借鉴 WPF 中 MVVM&#xff08;…

诗林工作室(编号:mb0003)分享:Finbiz自适应响应式网页设计模版,适用于前端设计、博客、官网等多类型开发模版

本设计模版来自外网&#xff0c;为HTML类型的模版&#xff0c;色彩多样&#xff0c;适合Web开发人员做前端站点设计参考使用。全站模版倾向于官网设计、自主博客等多行业的平台模版开发&#xff0c;适合各大CMS的主题模版开发参考&#xff0c;如常见的Wordpress主题开发、Z-Blo…

在python中解析命令行参数,并做一个命令行程序

命令行参数 加密程序 考虑这样一个加密程序&#xff0c;其中一个功能&#xff0c;是对一段字符串进行base64加密&#xff0c;另一个功能&#xff0c;是对一段base64字符串解密&#xff1a; import base64def encrypt_to_base64(input_string):byte_data input_string.encod…

ESP8266 自定义固件烧录-Tcpsocket固件

一、固件介绍 固件为自定义开发的一个适配物联网项目的开源固件&#xff0c;支持网页配网、支持网页tcpsocket服务器配置、支持串口波特率设置。 方便、快捷、稳定&#xff01; 二、烧录说明 固件及工具打包下载地址&#xff1a; https://download.csdn.net/download/flyai…

I.MX6U 裸机开发3. GPIO操作控制LED灯

I.MX6U 裸机开发3. GPIO操作控制LED灯 一、创建项目目录及源文件1. 新建目录2. 远程开发环境3. 创建源文件 二、代码编写1. 打开时钟2. 配置端口复用功能为GPIO3. 配置端口电气属性4. 设置GPIO方向&#xff08;GDIR寄存器&#xff09;5. 输出6. 死循环等待 三、编译程序1. 整体…

「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

自定义动画让开发者可以设计更加个性化和复杂的动画效果&#xff0c;适合表现独特的界面元素。鸿蒙提供了丰富的工具&#xff0c;支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。 关键词 自定义动画动画路径贝塞尔曲…

FLUX 推出 Ultra 和 Raw 模式,仅10秒生成2K高清图!

大家好&#xff0c;我是渔夫。 就在 2024年11月6日&#xff0c;BlackForestLabs 团队升级了他们最新的文生图模型 FLUX1.1 [pro]。 推出 Ultra 和 Raw 模式&#xff0c;仅10秒就能生成2K高清图片&#xff0c;速度非常惊人。 Ultra 模式&#xff1a;可生成超高分辨率图像&#x…

24/11/6 算法笔记 SVD

SVD&#xff0c;即奇异值分解&#xff08;Singular Value Decomposition&#xff09;&#xff0c;是线性代数中一种重要的矩阵分解方法。 定义 对于任何给定的 mnmn 的实数矩阵 AA&#xff08;其中 mm 是行数&#xff0c;nn 是列数&#xff09;&#xff0c;SVD分解可以表示为…

开发笔记 | 快速上手基于Dify等第三方大模型平台接口实现AI智能聊天

前置&#xff1a; 1.部署Dify&#xff0c;见官方教程及介绍https://docs.dify.ai/zh-hans&#xff0c;本文主要讲基于部署完之后的java实现的调用它的接口实现AI智能聊天&#xff0c;其他AI功能后续有用到再补充&#xff0c;没有就看缘分 2.什么是Dify&#xff1f;可以简单理解…

数据分析:转录组差异fgsea富集分析

文章目录 介绍加载R包数据链接导入数据数据预处理DE testing: 2BP vs no-BP比较limma-voomLoad steroid dataIn No-BP patientsIn 2BP patientsCompare gene expression vs bacterial mass其他系统信息介绍 转录组差异fgsea富集分析是一种基于基因集的富集分析方法,它关注的是…

查看网路信息-ifconfig命令

1.ifconfig缺点&#xff1a; 可以查看接口的网络类型&#xff1b;部分IP和掩码以及状态是否插线&#xff0c;看不到接口下的网关&#xff0c;DNS, 要想看到接口下多个IP,使用 ip addr show 命令 要想看网关&#xff0c;使用 ip route show 命令、route -n 命令 显示路由表内…

基于Spring Boot的中小型制造企业质量管理系统设计与实现,LW+源码+讲解

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自…

Java:多态的调用

1.什么是多态 允许不同类的对象对同一消息做不同的响应。即同一消息可以根据发送对象的不同而采用多种不同的行为方式。&#xff08;发送消息就是函数调用&#xff09;。多态使用了一种动态绑定&#xff08;dynamic binding&#xff09;技术&#xff0c;指在执行期间判断所引用…

并查集算法详解

文章目录 并查集概念并查集的常见操作构建并查集合并并查集和查找 关于find函数 并查集概念 并查集&#xff08;Union-Find&#xff09;是一种树型的数据结构&#xff0c;用于处理一些不交集的合并及查询问题。其主要应用是判断两个元素是否在同一个集合中&#xff0c;以及合并…

Redis持久化机制——针对实习面试

目录 Redis持久化机制Redis为什么要有持久化机制&#xff1f;Redis持久化方式有哪些&#xff1f;AOF持久化工作原理是什么&#xff1f;有什么优缺点&#xff1f;AOF持久化工作原理AOF的优点AOF的缺点 RDB持久化工作原理是什么&#xff1f;有什么优缺点&#xff1f;RDB持久化工作…

【系统架构设计师(第2版)】七、系统架构设计基础知识

有效的软件体系结构及其明确的描述和设计&#xff0c;已成为软件工程领域中重要的主题。 *注&#xff1a;由于历史原因&#xff0c;研究者和工程人员对**Software Architecture&#xff08;简称SA&#xff09;*的翻译不尽相同&#xff0c;本文中软件“体系结构”和“架构”具有…

【NLP】使用 SpaCy、ollama 创建用于命名实体识别的合成数据集

命名实体识别 (NER) 是自然语言处理 (NLP) 中的一项重要任务&#xff0c;用于自动识别和分类文本中的实体&#xff0c;例如人物、位置、组织等。尽管它很重要&#xff0c;但手动注释大型数据集以进行 NER 既耗时又费钱。受本文 ( https://huggingface.co/blog/synthetic-data-s…

Google推出了AI驱动的学习工具“Learn About”

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…