uniapp 单选按钮 选中默认设备

news2025/1/9 1:06:13

需求1：选中默认设备，113 和114 和139都可以选中一个默认设备

选中多个默认设备方法：

async toSwitch(typeItem, title) {
				const res = await this.setDefaultDev(typeItem.ibdr_devsn, typeItem.ibdr_pid)
				if (!res) {
					this.common.toast('切换默认设备失败')
					return
				}
				const target = this.typeList.find(v => v.title === title)
				target.equipmentList.forEach(dev => {
				dev.ibdr_default_device = 20//设置为非默认设备
				})
				typeItem.ibdr_default_device = 10 // 设置默认设备
				this.common.toast(title + '已切换默认设备')
			},

需求2：选中一个默认设备，113 和114 和139  所有设备中只能选中一个

选中单个默认设备方法：

async toSwitch(typeItem, title) {
				const res = await this.setDefaultDev(typeItem.ibdr_devsn, typeItem.ibdr_pid)
				if (!res) {
					this.common.toast('切换默认设备失败')
					return
				}
				
				this.typeList.forEach(list => {
					list.equipmentList.forEach(dev => {
						dev.ibdr_default_device = 20//取消默认选中
					})
				})
				
				typeItem.ibdr_default_device = 10 // 设置默认设备
				this.common.toast(title + '已切换默认设备')
			},

源数据：

[{
	"title": "113-G3P国内定位器",
	"equipmentList": [{
		"ibdr_pdid": "113",
		"ibdr_default_device": "10",
		"ibdr_devsn": "1135257499235",
		"ibdr_last_time": "2023-12-13 11:13:34",
		"ibdr_name": "1135257499235"
	}, {
		"ibdr_pdid": "113",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1135257511548",
		"ibdr_last_time": "2023-12-13 11:13:34",
		"ibdr_name": "1135257511548"
	}]
}, {
	"title": "114-铁将军-火星人2300",
	"equipmentList": [{
		"ibdr_pdid": "114",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1141553148067",
		"ibdr_last_time": "2023-12-13 11:13:31",
		"ibdr_name": "1141553148067"
	}, {
		"ibdr_pdid": "114",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1141540433527",
		"ibdr_last_time": "2023-12-13 11:13:31",
		"ibdr_name": "1141540433527"
	}, {
		"ibdr_pdid": "114",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1141528873710",
		"ibdr_last_time": "2023-12-13 11:13:30",
		"ibdr_name": "1141528873710"
	}]
}, {
	"title": "139-龙嘉4G-带CAN",
	"equipmentList": [{
		"ibdr_pdid": "139",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1394343434349",
		"ibdr_last_time": "2023-12-13 11:13:27",
		"ibdr_name": "1394343434349"
	}]
}]

绑定页面方式：

<template>
	<view class="container tui-skeleton">
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton>
		<view v-if="typeList.length>0 && !skeletonShow">
			<view class="typeBox" v-for="(typeItem,typeIndex) in typeList" :key="typeIndex">
				<view class="titleBox">{{typeItem.title}}</view>
				<view v-for="(item,index) in typeItem.equipmentList" :key="index">
					<view class="my_toolListr" v-if="item.ibdr_default_device == 10">
						<view class="tool_item" @click="toSwitch(item, typeItem.title)"
							:class="[index==typeItem.equipmentList.length-1?'noline':'',{'check_active':checkDefaultItem(item)}]">
							<view class="iconfont icon-checked" style="margin-right: 10rpx;"
								v-show="checkDefaultItem(item)">
							</view>
							<!-- {{JSON.stringify(item)}} -->
							<text class="text-style">{{item.ibdr_devsn}}<text v-if="item.ibdr_devsn!=item.ibdr_name">-{{item.ibdr_name}}</text></text>
						</view>
						<view class="tool-jtBtn" @click="toDevice(item)"><img
								style="width:32rpx !important;height: 40rpx !important;"
								src="http://f.zstjj.com/f/uniapp/610097/static/img/icon/jt1.png" mode="widthFix" />
						</view>
					</view>
					<!--无默认的样式-->
					<view class="my_toolListr" v-else>
						<view class="tool_item tool-hui" @click="toSwitch(item, typeItem.title)">
							<view class="iconfont icon-checked" style="margin-right: 10rpx;"></view>
							<text>{{item.ibdr_devsn}}<text v-if="item.ibdr_devsn!=item.ibdr_name">-{{item.ibdr_name}}</text></text>
						</view>
						<view class="tool-jtBtn" @click="toDevice(item)"><img
								style="width:32rpx !important;height: 40rpx !important;"
								src="http://f.zstjj.com/f/uniapp/610097/static/img/icon/jt1.png" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 160rpx;display: flex;align-items: center;flex-direction: column;">
			<view>
				<image src="http://f.zstjj.com/f/uniapp/610097/static/img/icon/zwsj.png"></image>
			</view>
			<view style="color: #8f8f8f;">暂无设备</view>
		</view>
	</view>
</template>

判断是否选中方法：

checkDefaultItem(item) {
				if (item.ibdr_default_device == 10) {
					return true
				}
				return false
			},

页面CSS样式：

<style>
	@import '../../../../static/dwq/dwq.css';

	.typeBox {
		overflow: hidden;
	}

	.titleBox {
		padding: 20rpx 30rpx;
		color: #767676;
		font-size: 28rpx;
	}

	.my_toolListr {
		background-color: #fff;
		border-bottom: 1px solid #efefef;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.tool_item {
		margin-left: 30rpx;
		font-size: 34rpx;
		height: 100rpx;
		padding-right: 30rpx;
		position: relative;
		/* border-bottom: 1px solid #efefef; */
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.tool_item .iconfont {
		font-size: 44rpx;
		color: #5d9dff !important;
	}

	.tool-hui .iconfont {
		font-size: 44rpx;
		color: #9d9d9d !important;
	}

	.tool-jtBtn {
		position: absolute;
		right: 0px;
		padding: 8rpx 30rpx 0rpx 80rpx;
	}

	.noline {
		border: none !important;
	}

	.tool_item:active {
		opacity: .8;
	}

	.check_active {
		color: #5D9DFF;
	}

	.text-style {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 600rpx;
	}
</style>
dwq.css

@font-face {
	font-family: 'iconfont';
	/* project id 2324997 */
	src: url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.eot');
	src: url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.eot?#iefix') format('embedded-opentype'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.woff2') format('woff2'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.woff') format('woff'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.ttf') format('truetype'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.svg#iconfont') format('svg');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 30px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	color: #999;
	vertical-align: middle;
	line-height: 1;
	padding-top: -1px;
	margin-bottom: 1px;
}

.icon-dingdan:before {
	content: "\e603";
}

.icon-tijiaochenggong:before {
	content: "\e72e";
}

.icon-nocheck:before {
	content: "\e601";
}

.icon-xufei:before {
	content: "\e664";
}

.icon-cs:before {
	content: "\e6ab";
}

.icon-jzw:before {
	content: "\e67e";
}

.icon-sc:before {
	content: "\e611";
}

.icon-jjs:before {
	content: "\f0f9";
}

.icon-start:before {
	content: "\e60f";
}

.icon-end:before {
	content: "\e610";
}

.icon-rili:before {
	content: "\e600";
}

.icon-checked:before {
	content: "\e62b";
}

.icon-qhsb:before {
	content: "\e76c";
}

.icon-shop:before {
	content: "\e663";
}

.icon-warning:before {
	content: "\e605";
}

.icon-zhsz:before {
	content: "\e76b";
}

.icon-jsxw:before {
	content: "\e719";
}

.icon-daohang:before {
	content: "\e634";
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

011 数据结构_哈希

011 数据结构_哈希

前言 本文将会向你介绍哈希概念&#xff0c;哈希方法&#xff0c;如何解决哈希冲突&#xff0c;以及闭散列与开散列的模拟实现 1. 哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经…
阅读更多...
Spring容器中scope为prototype类型Bean的回收机制

Spring容器中scope为prototype类型Bean的回收机制

文章目录 一、背景二、AutowireCapableBeanFactory 方法 autowireBean 分析三、Spring 容器中 scope 为 prototype 类型 Bean 的回收机制四、总结 一、背景 最近做 DDD 实践时&#xff0c;遇到业务对象需要交给 Spring 管理才能做一些职责内事情。假设账号注册邮箱应用层代码流…
阅读更多...
【ARM Trace32(劳特巴赫) 使用介绍 1.2 - ARM 系统调试中常见的挑战】

【ARM Trace32(劳特巴赫) 使用介绍 1.2 - ARM 系统调试中常见的挑战】

请阅读【Trace32 ARM 专栏导读】 文章目录 ARM 系统调试中常见的挑战ARM 系统调试接口简例DAP-Debug Access portDAP 状态检查多核调试虚拟/物理地址Cache 数据一致性问题系统异常系统复位系统死机PC 采样Memory 采样RAM/Core Dump 分析小概率问题ARM 系统调试中常见的挑战 调试…
阅读更多...
PyTorch官网demo解读——第一个神经网络（1）

PyTorch官网demo解读——第一个神经网络（1）

神经网络如此神奇&#xff0c;feel the magic 今天分享一下学习PyTorch官网demo的心得&#xff0c;原来实现一个神经网络可以如此简单/简洁/高效&#xff0c;同时也感慨PyTorch如此强大。 这个demo的目的是训练一个识别手写数字的模型&#xff01; 先上源码&#xff1a; fr…
阅读更多...
数据结构奇妙旅程之栈和队列

数据结构奇妙旅程之栈和队列

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …
阅读更多...
Linux---重定向命令

Linux---重定向命令

1. 重定向命令的介绍 重定向也称为输出重定向&#xff0c;把在终端执行命令的结果保存到目标文件。 2. 重定向命令的使用 命令说明>如果文件存在会覆盖原有文件内容&#xff0c;相当于文件操作中的‘w’模式>>如果文件存在会追加写入文件末尾&#xff0c;相当于文件…
阅读更多...
[C++] 虚函数、纯虚函数和虚析构(virtual)

[C++] 虚函数、纯虚函数和虚析构(virtual)

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/weixin_43197380&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 Loewen丶原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&…
阅读更多...
http正向代理测试，nginx反向代理中转正向代理服务器

http正向代理测试，nginx反向代理中转正向代理服务器

有3台服务器如下&#xff1a; 192.168.111.201&#xff08;反向代理到正向代理服务器&#xff09; 192.168.111.202&#xff08;正向代理服务器&#xff09; 192.168.111.203&#xff08;目标WEB系统&#xff09; 防火墙网络策略如图所示: 1、192.168.111.200 只能访问 192.168…
阅读更多...
【送书活动】智能汽车、自动驾驶、车联网的发展趋势和关键技术

【送书活动】智能汽车、自动驾驶、车联网的发展趋势和关键技术

文章目录 前言01 《智能汽车》推荐语 02 《SoC底层软件低功耗系统设计与实现》推荐语 03 《SoC设计指南》推荐语 05 《智能汽车网络安全权威指南&#xff08;上册&#xff09;》推荐语 06 《智能汽车网络安全权威指南&#xff08;下册&#xff09;》推荐语 后记赠书活动 前言 …
阅读更多...
普通二叉树和右倾斜二叉树--LeetCode 111题《Minimum Depth of Binary Tree》

普通二叉树和右倾斜二叉树--LeetCode 111题《Minimum Depth of Binary Tree》

本文将以解释计算二叉树的最小深度的思路为例&#xff0c;致力于用简洁易懂的语言详细描述普通二叉树和右倾斜二叉树在计算最小深度时的区别。通过跟随作者了解右倾斜二叉树的概念以及其最小深度计算过程&#xff0c;读者也将对左倾斜二叉树有更深入的了解。这将为解决LeetCode…
阅读更多...
FreeRTOS学习——同步互斥

FreeRTOS学习——同步互斥

FreeRTOS学习——同步互斥 目录 FreeRTOS学习——同步互斥一、概念1.1 同步1.2 互斥 二、示例——有缺陷的同步三、示例——优化有缺陷的同步四、示例——有缺陷的互斥五、总结 一、概念 1.1 同步 在FreeRTOS中&#xff0c;同步是指任务之间按照某种规则进行协调和按序执行的…
阅读更多...
HarmonyOS：使用MindSpore Lite引擎进行模型推理

HarmonyOS：使用MindSpore Lite引擎进行模型推理

场景介绍 MindSpore Lite 是一款 AI 引擎&#xff0c;它提供了面向不同硬件设备 AI 模型推理的功能&#xff0c;目前已经在图像分类、目标识别、人脸识别、文字识别等应用中广泛使用。 本文介绍使用 MindSpore Lite 推理引擎进行模型推理的通用开发流程。 基本概念 在进行开…
阅读更多...
PDI/Kettle-9.2.0.0-R（对应jdk1.8）源码编译问题记录及源码结构简介

PDI/Kettle-9.2.0.0-R（对应jdk1.8）源码编译问题记录及源码结构简介

目录 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;目的&#x1f4d7;总体方向 &#x1f4da;第二章 代码结构初识基本结构&#x1f4d7;代码模块详情 ⁉️问题记录❓问题一&#xff1a;代码分支哪些是发布版本❗答&#xff1a;后缀-R的版本 ❓问题二&#xff1a;50…
阅读更多...
AI智能配音助手微信小程序前后端源码支持多种声音场景选择

AI智能配音助手微信小程序前后端源码支持多种声音场景选择

大家好今天给大家带来一款配音小程序 &#xff0c;这款小程序支持多种不同声音和场景的选择更人性化&#xff0c; 比如说支持各地区的方言,英文,童声呀等等、 另外也支持男声女声的选择,反正就是模板那些非常的多 当然啦音量,语调,语速那些都是可以DIY跳转的哟,所以说这一款小程…
阅读更多...
使用PyTorch II的新特性加快LLM推理速度

使用PyTorch II的新特性加快LLM推理速度

Pytorch团队提出了一种纯粹通过PyTorch新特性在的自下而上的优化LLM方法&#xff0c;包括: Torch.compile: PyTorch模型的编译器 GPU量化:通过降低精度操作来加速模型 推测解码:使用一个小的“草稿”模型来加速llm来预测一个大的“目标”模型的输出 张量并行:通过在多个设备…
阅读更多...
【专题】最小生成树（prim算法、kruscal算法）

【专题】最小生成树（prim算法、kruscal算法）

目录 一、最小生成树二、Prim算法1. 算法思想2. 例题3. 性能分析 三、Kruscal算法1. 算法思想2. 例题3. 性能分析 一、最小生成树 生成树中边的权值&#xff08;代价&#xff09;之和最小的树。 二、Prim算法 1. 算法思想 设N(V,{E})是连通网&#xff0c;TE是N上最小生成树…
阅读更多...
【IEEE】2区SCI，接收领域广，稳定检索47年！

【IEEE】2区SCI，接收领域广，稳定检索47年！

重点 本期推荐 区块链是一种新兴技术&#xff0c;很多行业和领域都以创新方式采用了此技术&#xff0c;如能源、金融、媒体和娱乐以及零售等。此外&#xff0c;区块链作为一门新兴的交叉学科, 涉及密码学应用&#xff08;加密&#xff0c;隐私等&#xff09;&#xff0c; 分布式…
阅读更多...
stm32与Freertos入门（二）移植FreeRTOS到STM32中

stm32与Freertos入门（二）移植FreeRTOS到STM32中

简介 注意&#xff1a;FreeRTOS并不是实时操作系统&#xff0c;而是分时复用的&#xff0c;只不过切换频率很快&#xff0c;感觉上是同时在工作。本次使用的单片机型号为STM32F103C8T6,通过CubeMX快速移植。 一、CubeMX快速移植 1、选择芯片 打开CubeMX软件&#xff0c;进行…
阅读更多...
Diva配置——Communication Tests

Diva配置——Communication Tests

关联文章：CANoe.Diva生成测试用例 Diva目录 一、CANoe.Diva简介二、Communication Tests配置一、CANoe.Diva简介 CANoe.DiVa 是一种 CANoe 选项，用于对 ECU 中的诊断软件实施进行自动化测试。 可以通过CANdelaStudio制作的CDD或ODX文件，经过Diva配置自动生成测试用例和测试脚…
阅读更多...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于时空注意力卷积模型的超短期风电功率预测》

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于时空注意力卷积模型的超短期风电功率预测》

这个标题描述了一种用于超短期风电功率预测的模型&#xff0c;该模型基于时空注意力卷积模型。下面我会逐步解读这个标题的关键词和背景&#xff1a; 超短期风电功率预测&#xff1a;风电功率预测是指根据历史风速和其他相关数据&#xff0c;通过建立数学模型来预测未来特定时间…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023