vue3组合式api单文件组件写法
一,模板部分
<template><div class="device container"><breadcrumb :list="['首页', '应急处置']" /><div class="search_box"><div class="left"><span style="margin-right: 15px" @click="searchDevice">查询</span><el-date-picker v-model="time" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" /><el-button size="large" type="primary" class="searchButton" style="margin-top: -4px" @click="searchDevice">查询</el-button></div></div><!-- 表格 --><el-table :data="deviceList"><el-table-column prop="userName" label="处置人" align="center" /><el-table-column prop="commandTime" label="处置时间" align="center" /><el-table-column prop="method" label="处置指令" align="center" :formatter="methodFormatter" /><el-table-column prop="execList[0].status" label="指令状态" align="center" :formatter="exceFormatter" /><!-- 原因 --><el-table-column prop="reason" label="原因" align="center" /><el-table-column prop="param.vins[0]" label="车架号" align="center" width="180" /><el-table-column prop="execList[0].targetOrgName" label="所属企业" align="center" /><!-- 操作列 --><el-table-column label="操作" align="center"><template #default="scope"><el-button type="primary" @click="getDeta(scope.row.id)">查看</el-button></template></el-table-column></el-table><!-- 分页 --><div class="page"><el-pagination :current-page="queryInfo.pageNo" :page-size="queryInfo.pageSize" :total="total" backgroundprev-text="上一页" next-text="下一页" layout="sizes,prev, pager, next, jumper" :page-sizes="[10, 20, 50]"@current-change="handleCurrentChange" @size-change="handleSizeChange" /></div><!-- 详情信息对话框 --><el-dialog v-model="detaDialogVisible" title="应急处置详情" width="70%" :destroy-on-close="true" @close="detaClose"><el-form :model="deta"><el-row><el-col :span="12"><el-form-item label="处置人"><el-input v-model="deta.userName" /></el-form-item></el-col><el-col :span="12"><el-form-item label="处置时间"><el-input v-model="deta.commandTime" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="处置指令"><el-input v-model="deta.method" /></el-form-item></el-col><el-col :span="12"><el-form-item label="指令状态"><el-input v-model="status" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="原因"><el-input v-model="deta.reason" type="textarea" :row="2" /></el-form-item></el-col><el-col :span="12"><el-form-item label="内容"><el-input v-model="deta.content" type="textarea" :row="2" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="车架号"><el-select v-model="detaParam"><el-option v-for="item in deta.param.vins" :key="item" :label="item" :value="item" /></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="所属机构"><el-input v-model="targetOrgName" /></el-form-item></el-col></el-row></el-form><el-table :data="detaTable"><el-table-column prop="reqTime" label="请求时间" align="center" /><el-table-column prop="respTime" label="响应时间" align="center" /><el-table-column prop="status" label="状态" align="center" width="80" /><el-table-column prop="message" label="消息" align="center" /><el-table-column prop="data" label="数据" align="center" /></el-table><template #footer><span class="dialog-footer"><el-button @click="detaDialogVisible = false">取 消</el-button><el-button type="primary" @click="detaDialogVisible = false">确定</el-button></span></template></el-dialog></div>
</template>
二,js逻辑部分
<script setup>
import { ref, reactive } from "vue";
import { queryCommand, getCommand } from "@/api/emergencyResponse";
const detaDialogVisible = ref(false)
const deviceList = ref([])
const total = ref(0)
const status = ref(null)
const detaParam = ref(null)
const targetOrgName = ref(null)
const time = ref([])
const detaTable = ref([])
const deta = ref({param: {}
})
const queryInfo = reactive({pageNo: 1,pageSize: 10,startTime: '',endTime: '',kind: 'Emergency',
})
const queryDevice = async () => {const res = await queryCommand(queryInfo)if (res.code == 0) {deviceList.value = res.datatotal.value = res.totalElements}
}
queryDevice()
const searchDevice = async () => {queryInfo.startTime = ""queryInfo.endTime = ""if (time.value != null) {queryInfo.startTime = time.value[0]queryInfo.endTime = time.value[1]}const res = await queryCommand(queryInfo)if (res.code == 0) {deviceList.value = res.datatotal.value = res.totalElements}
}
const getDeta = async (vin) => {detaDialogVisible.value = trueconst res = await getCommand(vin)deta.value = res.datastatus.value = deta.value.execList[0].statusdetaTable.value = deta.value.execList[0].execLogsdetaParam.value = deta.value.param.vins[0]targetOrgName.value = deta.value.execList[0].targetOrgName
}
</script>
相关文章:
vue3组合式api单文件组件写法
一,模板部分 <template><div class"device container"><breadcrumb :list"[首页, 应急处置]" /><div class"search_box"><div class"left"><span style"margin-right: 15px"…...
Unity游戏源码分享-多角色fps射击游戏
Unity游戏源码分享-多角色fps射击游戏 项目地址:https://download.csdn.net/download/Highning0007/88204023...
在Cesium中给管道添加水流效果
添加效果前后对比: 关键代码: /*** 水流粒子,目前支持向上或者向下的效果* param {Number} x* param {Number} y* param {Number} z* param {Number} options* example* options {* color: Cesium.Color.AZURE,* emissionRate: 5, …...
测试平台——项目模块模型类设计
这里写目录标题 一、项目应用1、项目包含接口:2、创建子应用3、项目模块设计a、模型类设计b、序列化器类设计c、视图类设计d、项目的增删改查操作4、接口模块设计a、模型类设计b、序列化器类设计c、视图类设计d、接口的增删改查查操作5、环境模块设计a、模型类设计b、序列化器…...
【Android】MVC,MVP,MVVM三种架构模式的区别
MVC 传统的代码架构模式,仅仅是对代码进行了分层,其中的C代表Controller,控制的意思 将代码划分为数据层,视图层,控制层,三层之间可以任意交互 MVP MVP是在MVC基础上改进而来的一种架构,其中的…...
代码质量检查工具SonarQube
Devops流水线之SonarQube 文章目录 Devops流水线之SonarQube1. 软件功能介绍及用途2. 软件环境搭建与使用2.1 使用方法2.2 SonarQube相关属性说明2.3 Sonar配置文件内容说明 3. 使用环节4. 检查方法 1. 软件功能介绍及用途 SonarQube是一个用于代码质量管理的开源平台…...
开发命名规范
1项目命名规范 1、工程项目名,尽量想一些有意义、有传播价值的名称;比如星球、游戏、名人、名地名等;取名就跟给孩子取名一样,独特、有价值、有意义、好传播 2、所有的类都必须添加创建者和创建日期 3、所有代码:包括…...
12. Redis分布式高可用集群搭建
文章目录 Redis分布式高可用集群搭建一、redis集群有三种方式:1. 主从模式2. 哨兵3. 集群(master-cluster) 二、基于centos7操作系统操做1. 关闭防火墙,三台机器都执行2. hostname修改,三台机器都执行,这一步是为了在内…...
【微信小程序篇】-请求封装
最近自己在尝试使用AIGC写一个小程序,页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制,会经常出现对于需求理解跑偏情况,需要不断的重复强调,并纠正错误,才能得到你想要的…...
区块链-Web3.0-什么是Web3.0?
一、什么是Web 3.0 Web 3.0,也被称为“去中心化Web”或“智能Web”,是互联网的下一代,它使用了分布式系统技术、区块链技术和智能合约等新型技术,旨在构建一个更加去中心化、安全、透明和智能的互联网。Web 3.0 可以带来更广泛的…...
动手学深度学习(三)线性神经网络—softmax回归
分类任务是对离散变量预测,通过比较分类的概率来判断预测的结果。 softmax回归和线性回归一样也是将输入特征与权重做线性叠加,但是softmax回归的输出值个数等于标签中的类别数,这样就可以用于预测分类问题。 分类问题和线性回归的区别&#…...
ios swift alert 自定义弹框 点击半透明部分弹框消失
文章目录 1.BaseAlertVC2.BindFrameNumAlertVC 1.BaseAlertVC import UIKitclass BaseAlertVC: GLBaseViewController {let centerView UIView()override func viewDidLoad() {super.viewDidLoad()view.backgroundColor UIColor(displayP3Red: 0, green: 0, blue: 0, alpha:…...
HCIP STP(生成树)
目录 一、STP概述 二、生成树协议原理 三、802.1D生成树 四、STP的配置BPDU 1、配置BPDU的报文格式 2、配置BPDU的工作过程 3、TCN BPDU 4、TCN BPDU的工作过程 五、STP角色选举 1、根网桥选举 2、根端口选举 3、指定端口选举 4、非指定端口选举 六、STP的接口状…...
【Unity开发必备】100多个 Unity 学习网址 资源 收藏整理大全【持续更新】
Unity 相关网站整理大全 众所周知,工欲善其事必先利其器,有一个好的工具可以让我们事半功倍,有一个好用的网站更是如此! 但是好用的网站真的太多了,收藏夹都满满的(但是几乎没打开用过😁)。 所以本文是对…...
Alpine Ridge控制器使其具备多种使用模式 - 英特尔发布雷电3接口:竟和USB Type-C统一了
同时又因为这建立在Type-C的基础上,雷电3也将利用现有的标准Type-C线缆引入有源支持。当使用Type-C的线缆时,雷电的速度就降到了20Gbps全双工——这与普通的Type-C的带宽相同——这是为了成本牺牲了一些带宽。可以比较一下,Type-C线的成本只有…...
容器——2.Collection 子接口之 List
文章目录 2.1. Arraylist 和 Vector 的区别?2.2. Arraylist 与 LinkedList 区别?2.2.1. 补充内容:双向链表和双向循环链表2.2.2. 补充内容:RandomAccess 接口 2.3 ArrayList 的扩容机制 2.1. Arraylist 和 Vector 的区别? ArrayList 是 List 的主要实现类,底层使…...
【工作记录】docker安装gitlab、重置密码@20230809
前言 本文记录下基于docker安装gitlab并重置管理员密码的过程。 作为记录的同时也希望能帮助到需要的朋友们。 搭建过程 1. 准备好docker环境并启动docker [rootslave-node1 docker-gitlab]# docker version Client:Version: 18.06.1-ceAPI version: 1.38…...
数据挖掘的基本概念和大数据的特点
数据挖掘是指从大量数据中提取有价值的信息或模式的过程。它通常使用计算机技术来分析数据,并利用统计学、机器学习、人工智能等方法来发现数据中的隐藏规律、趋势和关联性。 数据挖掘的基本概念包括以下几个方面: 数据预处理:对原始数据进行…...
LabVIEW开发分段反射器测试台
LabVIEW开发分段反射器测试台 随着对太空的观察需求越来越远,而不是当前技术(如哈勃望远镜)所能达到的,有必要增加太空望远镜主镜的尺寸。但是,增加主镜像的大小时存在几个问题。随着反射镜尺寸的增加,制造…...
二级python和二级c哪个简单,二级c语言和二级python
大家好,小编为大家解答二级c语言和二级office一起报可以吗的问题。很多人还不知道计算机二级c语言和python哪个好考,现在让我们一起来看看吧! 介绍Python有很多库和使用Qt编写的接口,这自然创建c调用Python的需求。一路摸索,充满艰辛的添加头…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
