当前位置: 首页 > news >正文

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单文件组件写法

一&#xff0c;模板部分 <template><div class"device container"><breadcrumb :list"[首页, 应急处置]" /><div class"search_box"><div class"left"><span style"margin-right: 15px"…...

Unity游戏源码分享-多角色fps射击游戏

Unity游戏源码分享-多角色fps射击游戏 项目地址&#xff1a;https://download.csdn.net/download/Highning0007/88204023...

在Cesium中给管道添加水流效果

添加效果前后对比&#xff1a; 关键代码&#xff1a; /*** 水流粒子&#xff0c;目前支持向上或者向下的效果* 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 传统的代码架构模式&#xff0c;仅仅是对代码进行了分层&#xff0c;其中的C代表Controller&#xff0c;控制的意思 将代码划分为数据层&#xff0c;视图层&#xff0c;控制层&#xff0c;三层之间可以任意交互 MVP MVP是在MVC基础上改进而来的一种架构&#xff0c;其中的…...

代码质量检查工具SonarQube

Devops流水线之SonarQube 文章目录 Devops流水线之SonarQube1. 软件功能介绍及用途2. 软件环境搭建与使用2.1 使用方法2.2 SonarQube相关属性说明2.3 Sonar配置文件内容说明 3. 使用环节4. 检查方法 1. 软件功能介绍及用途 SonarQube是一个用于代码质量管理的开源平台&#xf…...

开发命名规范

1项目命名规范 1、工程项目名&#xff0c;尽量想一些有意义、有传播价值的名称&#xff1b;比如星球、游戏、名人、名地名等&#xff1b;取名就跟给孩子取名一样&#xff0c;独特、有价值、有意义、好传播 2、所有的类都必须添加创建者和创建日期 3、所有代码&#xff1a;包括…...

12. Redis分布式高可用集群搭建

文章目录 Redis分布式高可用集群搭建一、redis集群有三种方式&#xff1a;1. 主从模式2. 哨兵3. 集群&#xff08;master-cluster&#xff09; 二、基于centos7操作系统操做1. 关闭防火墙&#xff0c;三台机器都执行2. hostname修改&#xff0c;三台机器都执行,这一步是为了在内…...

【微信小程序篇】-请求封装

最近自己在尝试使用AIGC写一个小程序&#xff0c;页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制&#xff0c;会经常出现对于需求理解跑偏情况&#xff0c;需要不断的重复强调&#xff0c;并纠正错误&#xff0c;才能得到你想要的…...

区块链-Web3.0-什么是Web3.0?

一、什么是Web 3.0 Web 3.0&#xff0c;也被称为“去中心化Web”或“智能Web”&#xff0c;是互联网的下一代&#xff0c;它使用了分布式系统技术、区块链技术和智能合约等新型技术&#xff0c;旨在构建一个更加去中心化、安全、透明和智能的互联网。Web 3.0 可以带来更广泛的…...

动手学深度学习(三)线性神经网络—softmax回归

分类任务是对离散变量预测&#xff0c;通过比较分类的概率来判断预测的结果。 softmax回归和线性回归一样也是将输入特征与权重做线性叠加&#xff0c;但是softmax回归的输出值个数等于标签中的类别数&#xff0c;这样就可以用于预测分类问题。 分类问题和线性回归的区别&#…...

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 相关网站整理大全 众所周知&#xff0c;工欲善其事必先利其器&#xff0c;有一个好的工具可以让我们事半功倍&#xff0c;有一个好用的网站更是如此&#xff01; 但是好用的网站真的太多了&#xff0c;收藏夹都满满的(但是几乎没打开用过&#x1f601;)。 所以本文是对…...

Alpine Ridge控制器使其具备多种使用模式 - 英特尔发布雷电3接口:竟和USB Type-C统一了

同时又因为这建立在Type-C的基础上&#xff0c;雷电3也将利用现有的标准Type-C线缆引入有源支持。当使用Type-C的线缆时&#xff0c;雷电的速度就降到了20Gbps全双工——这与普通的Type-C的带宽相同——这是为了成本牺牲了一些带宽。可以比较一下&#xff0c;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 的主要实现类&#xff0c;底层使…...

【工作记录】docker安装gitlab、重置密码@20230809

前言 本文记录下基于docker安装gitlab并重置管理员密码的过程。 作为记录的同时也希望能帮助到需要的朋友们。 搭建过程 1. 准备好docker环境并启动docker [rootslave-node1 docker-gitlab]# docker version Client:Version: 18.06.1-ceAPI version: 1.38…...

数据挖掘的基本概念和大数据的特点

数据挖掘是指从大量数据中提取有价值的信息或模式的过程。它通常使用计算机技术来分析数据&#xff0c;并利用统计学、机器学习、人工智能等方法来发现数据中的隐藏规律、趋势和关联性。 数据挖掘的基本概念包括以下几个方面&#xff1a; 数据预处理&#xff1a;对原始数据进行…...

LabVIEW开发分段反射器测试台

LabVIEW开发分段反射器测试台 随着对太空的观察需求越来越远&#xff0c;而不是当前技术&#xff08;如哈勃望远镜&#xff09;所能达到的&#xff0c;有必要增加太空望远镜主镜的尺寸。但是&#xff0c;增加主镜像的大小时存在几个问题。随着反射镜尺寸的增加&#xff0c;制造…...

二级python和二级c哪个简单,二级c语言和二级python

大家好&#xff0c;小编为大家解答二级c语言和二级office一起报可以吗的问题。很多人还不知道计算机二级c语言和python哪个好考&#xff0c;现在让我们一起来看看吧&#xff01; 介绍Python有很多库和使用Qt编写的接口,这自然创建c调用Python的需求。一路摸索,充满艰辛的添加头…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...