uniapp 单选按钮 选中默认设备

需求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)"><imgstyle="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)"><imgstyle="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.mzph.cn/news/220021.shtml

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

相关文章

关于在Java中打印三角形图形的汇总

前面写过一些关于打印三角形图形代码的文章&#xff0c;这里进行了汇总&#xff0c;话不多说&#xff0c;直接上代码&#xff1a; /*** 关于打印三角形的汇总*/ public class Work1 {public static void main(String[] args) {int num 5;/** 打印如下图形&#xff1a;* ** …

OPCServer KEPServer安装和使用

OPCServer KEPServer安装和使用 简介 KEPServer软件是免费的&#xff0c;驱动收费&#xff0c;每天2小时试用时间, 免费用来模拟仿真是很不错的选择 OPC DA 和OPC UA都支持 中文官网地址: https://www.kepware.com/zh-cn/ 中文官方文档&#xff08;经常有更新&#xff0c;其…

分库分表及ShardingShpere-proxy数据分片

为什么需要分库&#xff1f; 随着数据量的急速上升&#xff0c;单个数据库可能会QPS过高导致读写耗时过长而出现性能瓶颈&#xff0c;所以需要考虑拆分数据库&#xff0c;将数据库分布在不同实例上提升数据库可用性。主要的原因有如下&#xff1a; 磁盘存储。业务量剧增&…

javaWebssh汽车销售管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh汽车销售管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用 B/S模式开发。开发环境为TOMCAT7.…

redis-学习笔记(Jedis zset 简单命令)

zadd & zrange zadd , 插入的第一个参数是 zset , 第二个参数是 score, 第三个参数是 member 成员 内部依据 score 排序 zrange 返回 key 对应的 对应区间内的值 zrangeWithScore 返回 key 对应的 对应区间内的值和分数 示例代码 zcard 返回 key 对应的 zset 的长度 示例代…

05-命令模式

意图&#xff08;GOF定义&#xff09; 将一个请求封装为一个对象&#xff0c;从而使你可用不同的请求对客户端进行参数化&#xff0c;对请求排队或者记录日志&#xff0c;以及可支持撤销的操作。 理解 命令模式就是把一些常用的但比较繁杂的工作归类为成一组一组的动作&…

Linux环境下maven的安装

到官网下载maven 步入下面的地址选择合适的maven版本 https://dlcdn.apache.org/maven/ 以笔者为例&#xff0c;选择了3.5.4这个版本 将maven上传到Linux服务器并解压 tar -zxvf apache-maven-3.5.4-bin.tar.gz配置环境变量 我们使用vim编辑profile vim /etc/profile环境…

【数据结构(十一·多路查找树)】B树、B+树、B*树(6)

文章目录 1. 二叉树 与 B树1.1. 二叉树存在的问题1.2. 多叉树 的概念1.3. B树 的基本介绍 2. 多叉树——2-3树2.1. 基本概念2.2. 实例应用2.3. 其他说明 3. B 树、B树 和 B*树3.1. B树 的介绍3.2. B树 的介绍3.2. B*树 的介绍 1. 二叉树 与 B树 1.1. 二叉树存在的问题 二叉树…

react Hooks(useEffect)实现原理 - 简单理解

useEffect 语法&#xff1a; useEffect(setup, dependencies?) 含义: useEffect 是一个 React Hook&#xff0c;它允许你 将组件与外部系统同步。 useEffect 源码简单理解 一、mountEffect 和 upadateEffect useEffect 与其它 hooks 一样分为 mountEffect 和 upadateEffec…

I2C总线通信(温湿度实验)

1.使能GPIOF时钟 2.将PF14设置为输出&#xff0c;PF15也可以先设置为输出 3.设置输出速度最高档位速度 4.SI7006的初始化 5.读取温度、湿度 6.将读取到的温度湿度数据通过计算公式进行转换 7.将结果输出 main.c #include "si7006.h"extern void printf(cons…

工科数学分析(华南理工大学)

旷了三天课&#xff0c;估计要被薄纱了这下&#xff08;&#xff09; ----------------引言 第一节 集合与实数集 比较重要的是实数具有稠密性。 即在两个实数之间存在无穷个其他实数&#xff0c; 然后是绝对值不等式 第一个经常用来放缩不等式&#xff0c;证明极限 第二…

DENet:用于可见水印去除的Disentangled Embedding网络笔记

1 Title DENet: Disentangled Embedding Network for Visible Watermark Removal&#xff08;Ruizhou Sun、Yukun Su、Qingyao Wu&#xff09;[AAAI2023 Oral] 2 Conclusion This paper propose a novel contrastive learning mechanism to disentangle the high-level embedd…

Debian 系统镜像下载

最近在看一些网络相关的文章需要用到 debian 11.x 的系统网上找了好多都发下载&#xff0c;在官网看一下 有个 11.8 的版本我无法下载&#xff0c;提示被最新的 debian-12.4.0 所代替&#xff0c;于是找到了这个链接 Index of /cdimage/unofficial/non-free/cd-including-fi…

imazing是什么软件

imazing是什么软件 iMazing 是世界上最值得信赖的软件,可以将您的信息、音乐、文件和数据从 iPhone 或 iPad 传输到您的 Mac 或 PC。 获得备份、数据提取、媒体和文件传输的强大能力,以及更多 iMazing 功能。 iMazing是一款第三方的苹果iOS设备管理软件。 iMazing- 2 Mac-安装…

死锁(面试常问)

1.什么是死锁 简单来说就是一个线程加锁后解锁不了 一个线程&#xff0c;一把锁&#xff0c;线程连续加锁两次。如果这个锁是不可重入锁&#xff0c;会死锁。两个线程&#xff0c;两把锁。 举几个例子&#xff0c;1.钥匙锁车里了&#xff0c;车钥匙锁家里了。2. 现在有一本书…

在 Qt Creator 中编写 Doxygen 风格的注释

2023年12月10日&#xff0c;周日上午 如何生成Doxygen 风格的注释 在需要Doxygen 风格注释的函数上方输入 /**&#xff0c;然后按下 Enter 键。Qt Creator 将自动为你生成一个注释模板。 输入&#xff0c;Qt Creator会自动帮你补全Doxygen标签 不得不说&#xff0c;写了Doxyge…

Re58:读论文 REALM: Retrieval-Augmented Language Model Pre-Training

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;REALM: Retrieval-Augmented Language Model Pre-Training 模型名称&#xff1a;Retrieval-Augmented Language Model pre-training (REALM) 本文是2020年ICML论文&#xff0c;作者来自…

Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务—鸿鹄工程管理系统

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 项目背景 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管理的提…

数据结构与算法:衡量算法好坏的指标——复杂度

1.复杂度 复杂度&#xff0c;用来分析算法执行过程中&#xff0c;所需要的资源。 时间复杂度是衡量所需要的时间。 空间复杂度&#xff0c;是衡量所需要的(内存)空间。 1.1 时间复杂度 特性 1.衡量算法执行所需时间 2.根据「常数操作」次数推定 3.一般以最大数据量N作为衡量…

js基础:函数、对象、WebAPIs-DOM

一、函数和对象 1、函数概述 &#x1f916;chatgpt&#xff1a;什么是函数&#xff1f;为什么要有函数&#xff1f; 函数是一种可重复使用的代码块&#xff0c;它们可以接受输入&#xff08;参数&#xff09;、执行特定的任务&#xff0c;并返回结果。 JavaScript中函数是非常…