精华内容
下载资源
问答
  • 微信小程序物联网应用by Sofia Coppol 索非亚·科普波尔(Sofia Coppol) 简化物联网应用程序入门的提示 (Tips for a Smoother Internet of Things App Onboarding) Onboarding is a critical phase in a user’s ...

    微信小程序物联网应用

    by Sofia Coppol

    索非亚·科普波尔(Sofia Coppol)

    简化物联网应用程序入门的提示 (Tips for a Smoother Internet of Things App Onboarding)

    Onboarding is a critical phase in a user’s journey with your app. It’s primarily the first contact point and thus is necessary for making a great first impression. The simpler the onboarding is for an app, the easier it is for users to accept and use it. It’s the right onboarding that puts users into action.

    入职是用户使用您的应用的过程中的关键阶段。 它主要是第一个接触点,因此对于给人留下深刻的第一印象是必要的。 应用程序的入门过程越简单,用户接受和使用它就越容易。 正确的入职流程可以使用户采取行动。

    But for a developer, it’s never been easy to develop an onboarding plan that engages users right from when they first open an app. Developers face unique challenges making users get started with their apps, without them feeling overwhelmed. Good on-boarding always contributes to the success or failure of an app. An app is considered successful when it is actively used. According to the May 2016’s data from an analytics firm Localytics, one in four apps is uninstalled just after a single use.

    但是对于开发人员来说,制定入职计划从用户首次打开应用程序时就开始参与它从来都不是一件容易的事。 开发人员面临独特的挑战,要使用户开始使用他们的应用程序,而又不会感到不知所措。 良好的入门经验总是有助于应用程序的成功或失败。 当应用程序被积极使用时,它被认为是成功的。 根据分析公司Localytics 2016年5月的数据,单次使用后,有四分之一的应用程序会被卸载。

    In this post, I’ll introduce my top tips to help Internet of Things (IoT) app developers make a perfect onboarding plan for their app. But first, we’ll look at the main challenges with app onboarding.

    在这篇文章中,我将介绍我的主要技巧,以帮助物联网(IoT)应用程序开发人员为其应用程序制定完美的入门计划。 但是首先,我们将介绍应用程序入门方面的主要挑战。

    应用程序入门挑战 (App Onboarding Challenges)

    An IoT app is always tied up to a physical product. This adds a new set of difficulties to users onboarding a new app along with a product that will interact with the app. Developers need to spot all those pain points that cause users to get frustrated.

    IoT应用程序始终与物理产品捆绑在一起。 这给新应用程序以及将与该应用程序交互的产品的用户带来了新的困难。 开发人员需要发现所有使用户感到沮丧的痛点。

    • Apps that are difficult to open or leave behind an excessive footprint

      难以打开或占用过多资源的应用
    • Long instructions that require users to learn a lot before using a product

      需要用户在使用产品之前学到很多东西的长说明
    • Troubling syncing the app with the IoT device requiring users to go through multiple steps

      在将应用程序与IoT设备同步时遇​​到麻烦,需要用户执行多个步骤

    Because an IoT app brings together challenges related to the app itself and the IoT device the app interacts with, it is important for IoT app developers to form a solid onboarding plan, from initial setup to tutorials to user retention.

    由于IoT应用程序汇集了与应用程序本身以及与该应用程序交互的IoT设备有关的挑战,因此从初始设置到教程到用户保留,IoT应用程序开发人员形成可靠的入职计划至关重要。

    So here is a list of things that you need to do to have a smooth onboarding experience:

    因此,以下是您要获得流畅的入职体验所需要做的事情:

    将应用程序下载说明放在产品包装中 (Put app downloading instructions in the product packaging)

    When it comes to an IoT app, it will always be used as a secondary product to the actual physical device the consumer is purchasing. The app is just an interface to interact with the IoT product. Make sure you have provided straightforward instructions on how consumers will access the app and download it onto their mobile devices. You can include a shortened or simple link or a QR code on the product packaging. The link or QR code should direct consumers to a landing page.

    对于物联网应用程序,它将始终用作消费者购买的实际物理设备的辅助产品。 该应用程序只是与物联网产品交互的界面。 确保您已提供有关消费者如何访问应用程序并将其下载到他们的移动设备上的简单明了的说明。 您可以在产品包装上包含简短或简单的链接或QR码。 链接或QR码应将消费者引导至登录页面。

    An app landing page should automatically detect the consumers device type and redirect them to the appropriate app store.

    应用程序登录页面应自动检测消费者设备类型并将其重定向到适当的应用程序商店。

    Many product providers run an SMS server that requires users to send an SMS message and then a download link to the app is sent to them.

    许多产品提供商运行SMS服务器,要求用户发送SMS消息,然后将指向该应用程序的下载链接发送给他们。

    You can choose any of the above methods, a shortened / simple link, QR code, or SMS request.

    您可以选择上述任何一种方法,缩短/简单的链接,QR码或SMS请求。

    使用社交登录使登录简单 (Make login simple with Social Logins)

    JanRain, a customer profile and identity management software provider, says that 92% of users will leave a website if they’re asked to go through a long process while logging in or recovering credentials.

    客户资料和身份管理软件提供商JanRain表示,如果要求他们在登录或恢复凭据时经历漫长的过程,则有92%的用户将离开网站。

    This behavior of users has created the termed known as the account fatigue. It puts users under pressure of remembering usernames and passwords for their accounts. No doubt users still remember the credentials to a few of their most used services, such as of Gmail and Facebook.

    用户的这种行为造成了所谓的帐户疲劳。 这使用户承受着记住其帐户的用户名和密码的压力。 毫无疑问,用户仍然记得一些最常用服务(例如Gmail和Facebook)的凭据。

    Users cannot remember all their usernames and passwords for all their online accounts. And this holds them back to easily get engaged with an online product. This situation can be avoided by allowing users to login to their accounts using their social media profiles, like Facebook, Twitter or Gmail.

    用户无法记住所有在线帐户的所有用户名和密码。 这样一来,他们便无法轻松使用在线产品。 通过允许用户使用其社交媒体配置文件(如Facebook,Twitter或Gmail)登录其帐户,可以避免这种情况。

    强调物联网产品和应用程序的好处 (Highlight the Benefits of the IoT product and the app)

    The product should speak about the core benefits and features of the IoT product and how the app can be used to easily manage the device and leverage these benefits.

    该产品应说明IoT产品的核心优势和功能,以及如何使用该应用程序轻松管理设备并利用这些优势。

    This approach can be applied to walk-through tutorials, which highlight each of the features individually.

    这种方法可以应用于演练教程,该教程分别突出显示了每个功能。

    Here is what you need to consider when creating a walk-through tutorial:

    创建演练教程时,需要考虑以下几点:

    • Adding a slideshow - When adding a tutorial to inform users about benefits and features, keep it simple and brief.

      添加幻灯片 -添加教程以告知用户好处和功能时,请使其简洁明了。

    • Add a skip button - for those users who have already downloaded and used the app before.

      添加跳过按钮 -适用于之前已经下载并使用过该应用程序的用户。

    • Use arrows to point to the features - Many developers use arrows to inform users what is where. Arrows with a line of detail interactively inform users about what’s where. When clicking on the title that describes the feature, a new title appears which tells the user about the second feature / function of the app.

      使用箭头指向功能 -许多开发人员使用箭头告知用户位置。 带有细节线的箭头以交互方式通知用户有关位置。 单击描述功能的标题时,会出现一个新标题,该标题告诉用户该应用程序的第二个功能。

    包括视频教程 (Include Video Tutorials)

    Adding a video tutorial is one of the best ways to educate users about your application. Including video tutorials in your app will help users easily setup their IoT product and guide them through how the app interacts with it.

    添加视频教程是向用户介绍您的应用程序的最佳方法之一。 在您的应用程序中包含视频教程将帮助用户轻松设置其物联网产品,并指导他们如何与应用程序进行交互。

    As an example, look at how Nest introduces their learning thermostat in this video.

    例如,请查看此视频中Nest如何介绍他们的学习恒温器。

    显示教程进度 (Show Tutorial Progress)

    Consumers may get bored reading a tutorial if they don’t of their progress and how much of it they’ve completed. You can avoid this by providing them with an indicator of the progress of the tutorial so that users are motivated to complete it which results in smoother onboarding.

    如果消费者不了解自己的进度以及完成的进度,他们可能会觉得无聊。 您可以通过向他们提供本教程的进度指示器来避免这种情况,以激励用户完成本教程,从而使入门更加顺利。

    轻松获得客户支持 (Make accessing customer support easy)

    Even after having access to manuals and tutorials, consumers may need to get in touch with customer support. You can make your customer support highly responsive by adding documentation to the app and providing an easy access to in-app support. You can also add a link that redirects users to a mobile-friendly support section of your product’s website.

    即使在获得了手册和教程之后,消费者也可能需要与客户支持取得联系。 通过向应用程序添加文档并提供对应用程序内支持的轻松访问,可以使您的客户支持具有较高的响应速度。 您还可以添加一个链接,将用户重定向到产品网站的移动友好支持部分。

    You can also include an in-app chat that directly directs customers to customer care representatives. When users have an easy way to access customers care services through the app itself, it is more likely for them to reach out for support when they face a problem and increases overall satisfaction and engagement with the app.

    您还可以包括直接将客户引向客户服务代表的应用内聊天。 当用户能够通过应用程序本身轻松访问客户服务时,他们更有可能在遇到问题时寻求支持,从而提高整体满意度和对应用程序的参与度。

    游戏化您的应用 (Gamify Your App)

    People love unlocking achievements or having access to an interactive interface. Gaming apps have been doing it for a long time which increases the engagement of their users. The same gamification concept can be added to IoT apps keeping users engaged with the app and encouraging them to use it more frequently.

    人们喜欢解锁成就或访问交互式界面。 游戏应用程序已经做了很长时间了,这增加了用户的参与度。 可以将相同的游戏化概念添加到IoT应用程序中,以保持用户与应用程序的互动,并鼓励他们更频繁地使用它。

    依靠应用内通知和推送通知 (Rely on In-App and Push Notifications)

    IoT apps are pretty good candidates for in-app and push notifications. You can put notifications to notify users to complete their profiles or remind them that they haven’t used the app for a prolonged period of time. Notifications can be triggered based on the progress of a task or an achievement the user is about to reach. This also helps users view the status and actions associated to the connected IoT device.

    物联网应用非常适合应用内和推送通知。 您可以放置​​通知以通知用户完成其个人资料,或提醒他们他们长时间没有使用该应用程序。 可以根据用户将要完成的任务或成就的进度来触发通知。 这还可以帮助用户查看与连接的IoT设备关联的状态和操作。

    结论 (Conclusion)

    When designing an app while keeping the above mentioned tips in mind, a development team succeeds to create an awesome onboarding experience that instantly engages users with the IoT device app. Although all of the tips above may not be applicable to every single IoT app, each one of them can be tried individually and their effects on the retention of the app viewed.

    在设计应用程序时,请牢记上述技巧,开发团队会成功创建令人敬畏的入门体验,从而立即使用户使用IoT设备应用程序。 尽管以上所有技巧可能不适用于每个物联网应用程序,但可以单独尝试其中的每个技巧,并查看其对保留应用程序的影响。

    Sofia is a digital marketing expert at Rapidsoft Technologies, an offshore software development company which develops Software for Education, Automation, Construction and Finance sectors across the global. She loves to write about the latest mobile trends, technologies, startups, and enterprises.

    Sofia是Rapidsoft Technologies的数字营销专家,Rapidsoft Technologies是一家离岸软件开发公司 ,致力于为全球的教育,自动化,建筑和金融行业开发软件。 她喜欢写有关最新的移动趋势,技术,创业公司和企业的文章。

    翻译自: https://www.freecodecamp.org/news/tips-for-a-smoother-internet-of-things-app-onboarding-d31d856d8b1e/

    微信小程序物联网应用

    展开全文
  • 微信小程序 物联网解决方案

    千次阅读 2020-04-08 13:16:56
    “卓岚物联”微信小程序是方便地查看物联网设备当前数据、历史数据、控制设备的简单有效的方法。查看和控制设备的实现可以在五分钟内完成,简单易用。“卓岚物联”微信程序+“卓岚云”云平台是免费用物联网解决方案...

    “卓岚物联”微信小程序是方便地查看物联网设备当前数据、历史数据、控制设备的简单有效的方法。查看和控制设备的实现可以在五分钟内完成,简单易用。“卓岚物联”微信程序+“卓岚云”云平台是免费用物联网解决方案,配合性价比高的卓岚物联网JSON网关,是实现物联网系统的快速有效方法。
    在这里插入图片描述
    图 1卓岚物联使用概念图

    该系统可以将标准Modbus RTU设备、645协议仪表数据转化为JSON格式上传“卓岚云”。设备配置采用界面话配置,无需编程。“卓岚云”平台采用AES加密验证算法,有效保证数据通讯的安全性。卓岚“JSON网关”涵盖以太网(ZLAN5144J)、Wifi(ZLAN7144J)、4G(ZLAN8303N-7),其中ZLAN5144J支持100个数据点位采集。
    “卓岚物联”微信小程序是一个通用的数据采集、控制软件,未限定具体应用领域,如果需要实现更为专业化设备的数据查看、控制,则可以为用户定制微信小程序。
    1.操作和实战可以参考上海卓岚官方网站的介绍《卓岚物联微信小程序使用方法》
    2.定制和开发
    “卓岚物联”是一个通用框架,上海卓岚可以为用户提供定制化的私有云平台设计和私有微信小程序设计,为用户的具体应用量身定做,贴近实际项目需求,快速打通手机端、云端和设备端通讯。

    展开全文
  • 第一天:登录授权 https://blog.csdn.net/qq_42783654/article/details/107862585 前台 后台 官网补充 ... 交互 —————————————————————————————— ...vuex.store微信小程序

    第一天:登录授权

    https://blog.csdn.net/qq_42783654/article/details/107862585
    

    前台

    后台

    官网补充

    https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
    

    交互

    ——————————————————————————————

    bug笔记

    在这里插入图片描述

    vuex.store

    需要熟练掌握

    vuex.store微信小程序踩坑

    总结

    在这里插入图片描述

    第二天:监测站点

    在这里插入图片描述

    第三天 实时数据

    在这里插入图片描述

    准备后台访问的数据

    {"status":200,"msg":"查询站点数据成功","data":{"total":{"count":"453"},"data":[{"page":1,"limit":10,"_id":"5fd97da4ff88a8b24e7f2331","pointId":"19","pointName":null,"mn":"010000A89756877XU0251035","enterpriseId":null,"enterpriseName":null,"busId":null,"dataTime":null,"dataType":null,"arrayofkeyvalue":{"k":"20201216112400","v":{"碳氢化合物":{"Rtd":"36.6200","Flag":"N"},"烟气温度":{"Rtd":"12.0500","Flag":"N"},"烟气流速":{"Rtd":"12.0900","Flag":"N"},"烟气压力":{"Rtd":"0.0090","Flag":"N"},"甲烷":{"Rtd":"1.0500","Flag":"N"},"烟气湿度":{"Rtd":"2.1500","Flag":"N"},"烟道截面积":{"Rtd":"1.1300","Flag":"N"},"废气":{"Rtd":"49171.9531","Flag":"N"},"非甲烷总烃":{"Rtd":"35.5800","pointFloorval":"0","pointCeilval":"70","Flag":"N"}}},"flag":"d2011_g"}]},"ok":null}
    
    <template>
    	<view>
    		<view class="content1"><text>{{pointName}}</text></view>
    		<view class="search-block">
    			<view class="search-ico-wapper">
    				<image src="../../static/icon/search-active.png" class="search-ico" mode=""></image>
    			</view>
    			<view class="search-ico-wapper1">
    				<image src="../../static/icon/cart-active.png" class="search-ico-1" mode=""></image>
    			</view>
    		</view>
    		<view class="search-data-time">
    			<view class=".search-data-time-right"><text>{{time}}</text></view>
    		</view>
    		<view class="index">
    			<view class="new_box" style="margin-top: 20upx;" v-for="data in dataList" :key="data.id">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">{{data.divisorName}}
    									<font></font>
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{data.Rtd}}</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    		</view>
    
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				pointName: "",
    				time: 123,
    				Cpage:1,
    				dataList: [] //企业站点集合
    			}
    		},
    		methods: {
    			async getPoints(pointId, timeType, Cpage) {
    				const res = await this.$myRuquest({
    					url: '/wx/data/getDataList?pointId=' + pointId + '&&timeType=' + timeType + '&&Cpage=' + Cpage
    				})
    				var data = res.data.data.data[0]
    				var strtime = data.arrayofkeyvalue.k;
    				var nian = strtime.slice(0, 4);
    				var yue =strtime.slice(4, 6);
    				var ri =strtime.slice(6, 8);
    				var shi =strtime.slice(8, 10);
    				var fen =strtime.slice(10, 12);
    				var miao =strtime.slice(12, 14);
    				this.time = nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao;
    				this.pointName = data.pointName;
    				var objectKeyvalue = data.arrayofkeyvalue.v;
    				var divisorList = [];
    				var id = 0;
    				if (data.flag.match("d2011")) { //判断为实时数据,显示对应的格式
    
    
    					for (var o in objectKeyvalue) {
    						id++;
    						var divisorObject = new Object;
    						divisorObject.id = id;
    						divisorObject.divisorName = o;
    						divisorObject.Rtd = objectKeyvalue[o].Rtd
    						divisorList.push(divisorObject)
    					}
    				} else {
    					for (var o in objectKeyvalue) {
    						id++;
    						var divisorObject = new Object;
    						divisorObject.id = id
    						divisorObject.divisorName = o;
    						divisorObject.Rtd = objectKeyvalue[o].avg
    						divisorList.push(divisorObject)
    					}
    
    				}
    				this.dataList = divisorList;
    			}
    
    		},
    		onLoad () {
    		
    		var pointId=19;
    			var timeType = 'd2011';
    			 this.getPoints(pointId, timeType, this.Cpage);
    		}
    		
    		
    		
    			
    	}
    </script>
    
    <style>
    	.content1 {
    		height: 60upx;
    		background-color: #007AFF;
    
    	}
    
    	.content1 text {
    		color: #F8F8F8;
    		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    		margin-left: 10upx;
    	}
    
    	/* 搜索框 */
    	.search-ico,
    	.search-ico-1 {
    		width: 50upx;
    		height: 50upx;
    	}
    
    	.search-ico {
    		margin-left: 20upx;
    	}
    
    	.search-ico-1 {
    		margin-right: 20upx;
    	}
    
    	.search-text {
    		font-size: 14px;
    		background-color: #FFFFFF;
    		height: 60upx;
    		width: 480upx;
    	}
    
    	.search-block {
    		display: flex;
    		flex-direction: row;
    		/* padding-left: 60upx; */
    		position: relative;
    
    	}
    
    	.search-ico-wapper {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 0upx;
    		width: 350upx;
    	}
    
    	.search-ico-wapper1 {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 360upx;
    		width: auto;
    		float: right;
    	}
    
    
    	page {
    		background-color: #eee;
    	}
    
    	.search-data-time {
    		height: 40upx;
    
    	}
    
    	.search-data-time-right {
    		width: 400upx;
    		margin-left: 390upx;
    	}
    
    	.search-data-time-right text {
    		color: #808080;
    	}
    
    	.list-box {
    		display: flex;
    		flex-direction: column;
    		background-color: #fff;
    		margin: 0upx 16upx 16upx 16upx;
    		padding: 16upx;
    		border-radius: 10upx;
    		height: 60upx;
    	}
    
    	.list-ed {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.list-left {
    		margin-left: 10upx;
    		display: flex;
    		flex-direction: column;
    		width: 800upx;
    		height: 60upx;
    	}
    
    
    	.list-right {
    		display: flex;
    		flex-direction: column;
    		width: 510upx;
    		height: 60upx;
    	}
    
    
    	.btn-point {
    		width: 200rpx;
    		height: 60rpx;
    		display: flex;
    		margin-top: 25rpx;
    		margin-right: 10rpx;
    		line-height: 50rpx;
    		justify-content: center;
    		border-radius: 25px;
    		/* 这里可以改成渐变: background:linear-gradient(to right, #FFDE28,#FF3228) */
    		background-color: #ff5500;
    		font-size: 28rpx;
    	}
    
    	.noadsop {
    		width: 120upx;
    		height: 32upx;
    	}
    
    
    	.list-name {
    
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		font-size: 30upx;
    	}
    
    	.list-p2 {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 1;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		margin-right: 0upx;
    		color: #808080;
    
    	}
    
    
    	.list-da {
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		font-size: 26upx;
    	}
    
    	.list-da view {
    		width: 50%;
    	}
    
    	.list-da view text {
    		color: red;
    	}
    </style>
    
    

    第三天

    .踩坑记录

    1 uni.navigateTo 无法跳转到页面
    2.请求后台数据方式(get请求正常,传参乱码,后面解决办法就是前台传个对象,后台又对象接收

    uniapp请求后台数据方式

    封装的app.js

    const BASE_URL = 'http://localhost:8082'
    export const myRequest = (options)=>{
    	return new Promise((resolve,reject)=>{
    		uni.request({
    			url:BASE_URL+options.url,
    			method: options.method || 'GET',
    			data: options.data || {},
    			success: (res)=>{
    				resolve(res)
    				if(res.data.status !== 200) {
    					return uni.showToast({
    						title: '获取数据失败'
    					})
    				}
    				
    			},
    			fail: (err)=>{
    				uni.showToast({
    					title: '请求接口失败'
    				})
    				reject(err)
    			}
    		})
    	})
    }
    

    调用

    	let emsg = {
    					"enterpriseName": enterpriseName,
    					"Cpage": Cpage
    				}
    				const res = await this.$myRuquest({
    					url: '/wx/point/getPointList',
    					methods: 'post',
    					data: emsg,
    					dataType: 'json'
    				})
    				this.pointList = res.data.data.data;
    

    在这里插入图片描述

    uni.navigateTo 无法跳转到页面

    1.1把这个tarbar去掉

    
    我们的其他页面的跳转我们可以通过以下的命令来进行页面的跳转:
    uni.navigateTo({
       	url: '/pages/notice/notice'
    })
    
    但是当我们将这个地址配置到tabBar以后我们就无法通过上述的方法来访问了,这时候我们需要使用以下的方法来进行页面的访问:
    
    uni.switchTab({
          url: '/pages/notice/notice'
    })
    

    1.2试试打印错误

    uni.navigateTo({
    url: ‘/pages/data/data?pointId=’ + item,
    success(res) {
    console.log(res);
    },
    fail(err) {
    console.log(err);
    }
    });

    在这里插入图片描述
    去tarbar时我把基本配置也不小心去掉了,加回来

    在这里插入图片描述
    pages/point/point

    <template>
    	<view>
    		<view class="content1"></view>
    		<view class="search-block">
    			<view class="search-ico-wapper">
    				<!-- <image src="../../static/icon/search-active.png" class="search-ico" mode=""></image> -->
    			</view>
    			<input type="text" value="" focus v-model="enterpriseName" @input="onKeyEnterpriseNameInput" placeholder="请输入企业名称"
    			 class="search-text" maxlength="10" />
    			<view class="search-ico-wapper1">
    				<image src="../../static/icon/search-active.png" class="search-ico-1" mode=""></image>
    			</view>
    		</view>
    		<view class="shadow">
    		</view>
    
    		<view class="index">
    			<view class="new_box" style="margin-top: 20upx;" v-for="point in pointList" :key="point.pointId" @click="goDataDetail(point.pointId)">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">{{point.enterpriseName}}</view>
    								<view class="list-da">
    									<text class="list-p2">{{point.pointName}}</text>
    
    								</view>
    							</view>
    							<view class="list-right">
    								<button type="warn" class="btn-point" :disabled="disabled" v-if="point.isOnline==0 ||point.isOverProof==1 ||point.isException==1 ||point.isConstvalue==1||point.isZerovalue==1">异常</button>
    								<button type="primary" class="btn-point" :disabled="disabled" v-else>正常</button>
    
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    
    				Cpage: 1, //当前页码
    				totalPages: 1, //总共页数
    				enterpriseId: "", //企业名称
    				enterpriseName: "",
    				pointList: [] //企业站点集合
    			}
    		},
    		methods: {
    			//模糊搜索
    			onKeyEnterpriseNameInput: function(event) {
    				this.enterpriseName = event.target.value
    
    				console.log(this.enterpriseName);
    
    				this.pointList = []; //清空
    				this.getPoints(this.enterpriseName, this.Cpage)
    
    			},
    
    			//查询站点数据
    			async getPoints(enterpriseName, Cpage) {
    				//传递的参数封装成对象;解
    
    				let emsg = {
    					"enterpriseName": enterpriseName,
    					"Cpage": Cpage
    				}
    				const res = await this.$myRuquest({
    					url: '/wx/point/getPointList',
    					methods: 'post',
    					data: emsg,
    					dataType: 'json'
    				})
    				this.pointList = res.data.data.data;
    				console.log("站点查询成功");
    				console.log(this.pointList);
    			},
    			//跳转实时站点数据
    			goDataDetail(item) {
    				console.log("aaa" + item)
    				uni.navigateTo({
    					url: '/pages/data/data?pointId=' + item,
    					success(res) {
    						console.log(res);
    					},
    					fail(err) {
    						console.log(err);
    					}
    				});
    			}
    		},
    		onLoad() {
    			this.getPoints(this.enterpriseName, this.Cpage);
    		}
    	}
    </script>
    
    <style>
    	.content1 {
    		height: 60upx;
    		background-color: #007AFF;
    	}
    
    
    	/* 搜索框 */
    	.search-ico,
    	.search-ico-1 {
    		width: 50upx;
    		height: 50upx;
    	}
    
    	.search-text {
    		font-size: 14px;
    		background-color: #FFFFFF;
    		height: 60upx;
    		width: 480upx;
    	}
    
    	.search-block {
    		display: flex;
    		flex-direction: row;
    		padding-left: 60upx;
    		position: relative;
    		top: -32upx;
    	}
    
    	.search-ico-wapper {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		padding: 0upx 0upx 0upx 40upx;
    		border-bottom-left-radius: 18px;
    		border-top-left-radius: 18px;
    	}
    
    	.search-ico-wapper1 {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		padding: 0upx 40upx 0upx 0upx;
    		border-bottom-right-radius: 18px;
    		border-top-right-radius: 18px;
    	}
    
    	.shadow {
    		width: 638upx;
    		height: auto;
    		border-radius: 18px;
    		-moz-box-shadow: 0 0 10px #e6e6e6;
    		-webkit-box-shadow: 0 0 10px #e6e6e6;
    		box-shadow: 0 0 10px #e6e6e6;
    		position: relative;
    		top: auto;
    		left: 60upx;
    	}
    
    	page {
    		background-color: #eee;
    	}
    
    	/* 已选择 */
    	.selde {
    		border: 1px solid red;
    		background: red;
    		color: #FFFFFF;
    		border-radius: 20upx;
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		font-size: 20upx;
    		padding: 0 10upx;
    	}
    
    	.selde-q {
    		width: 18upx;
    		height: 18upx;
    		border-radius: 50%;
    		background: #FFFFFF;
    		margin-left: 6upx;
    	}
    
    	.noselde-q {
    		border: 1px solid #959595;
    		width: 16upx;
    		height: 16upx;
    		border-radius: 50%;
    		background: #FFFFFF;
    		margin-left: 6upx;
    	}
    
    	.list-box {
    		display: flex;
    		flex-direction: column;
    		background-color: #fff;
    		margin: 0upx 16upx 16upx 16upx;
    		padding: 16upx;
    		border-radius: 10upx;
    		height: 170upx;
    	}
    
    	.list-ed {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.list-left {
    		margin-left: 10upx;
    		display: flex;
    		flex-direction: column;
    		width: 800upx;
    		height: auto;
    	}
    
    
    	.list-right {
    		display: flex;
    		flex-direction: column;
    		width: 510upx;
    		height: 180upx;
    	}
    
    
    	.btn-point {
    		width: 200rpx;
    		height: 60rpx;
    		display: flex;
    		margin-top: 25rpx;
    		margin-right: 10rpx;
    		line-height: 50rpx;
    		justify-content: center;
    		border-radius: 25px;
    		/* 这里可以改成渐变: background:linear-gradient(to right, #FFDE28,#FF3228) */
    		background-color: #ff5500;
    		font-size: 28rpx;
    	}
    
    	.noadsop {
    		width: 120upx;
    		height: 32upx;
    	}
    
    	.list-head {
    		display: flex;
    		justify-content: flex-end;
    		margin-bottom: 10upx;
    	}
    
    	.list-name {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 5upx;
    		font-size: 30upx;
    	}
    
    	.list-p2 {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 5upx;
    		color: #808080;
    
    	}
    
    	.list-right button {
    		margin-top: 60upx;
    	}
    
    	.list-da {
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		font-size: 26upx;
    	}
    
    	.list-da view {
    		width: 50%;
    	}
    
    	.list-da view text {
    		color: red;
    	}
    </style>
    
    

    pages/data/data

    <template>
    	<view>
    		<view class="content1"><text>{{pointName}}</text></view>
    		<view class="search-block">
    			<view class="search-ico-wapper">
    				<image src="../../static/icon/search-active.png" class="search-ico" mode=""></image>
    			</view>
    			<view class="search-ico-wapper1">
    				<image src="../../static/icon/cart-active.png" class="search-ico-1" mode=""></image>
    			</view>
    		</view>
    		<view class="search-data-time">
    			<view class=".search-data-time-right"><text>{{time}}</text></view>
    		</view>
    		<view class="index">
    			<view class="new_box" style="margin-top: 20upx;" v-for="data in dataList" :key="data.id">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">{{data.divisorName}}
    									<font></font>
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{data.Rtd}}</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    		</view>
    
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				pointName: "",
    				pointId:'',//默认站点数据
    				time: "",//时间
    				timeType:'d2011',//默认数据源
    				Cpage:1,
    				dataList: [] //企业站点集合
    			}
    		},
    		methods: {
    			async getPoints(pointId, timeType, Cpage) {
    				const res = await this.$myRuquest({
    					url: '/wx/data/getDataList?pointId=' + pointId + '&&timeType=' + timeType + '&&Cpage=' + Cpage
    				})
    				var data = res.data.data.data[0]
    				var strtime = data.arrayofkeyvalue.k;
    				var nian = strtime.slice(0, 4);
    				var yue =strtime.slice(4, 6);
    				var ri =strtime.slice(6, 8);
    				var shi =strtime.slice(8, 10);
    				var fen =strtime.slice(10, 12);
    				var miao =strtime.slice(12, 14);
    				this.time = nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao;
    				this.pointName = data.pointName;
    				var objectKeyvalue = data.arrayofkeyvalue.v;
    				var divisorList = [];
    				var id = 0;
    				if (data.flag.match("d2011")) { //判断为实时数据,显示对应的格式
    
    
    					for (var o in objectKeyvalue) {
    						id++;
    						var divisorObject = new Object;
    						divisorObject.id = id;
    						divisorObject.divisorName = o;
    						divisorObject.Rtd = objectKeyvalue[o].Rtd
    						divisorList.push(divisorObject)
    					}
    				} else {
    					for (var o in objectKeyvalue) {
    						id++;
    						var divisorObject = new Object;
    						divisorObject.id = id
    						divisorObject.divisorName = o;
    						divisorObject.Rtd = objectKeyvalue[o].avg
    						divisorList.push(divisorObject)
    					}
    
    				}
    				this.dataList = divisorList;
    			}
    
    		},
    		onLoad (options) {
    			console.log("aaaaaaaaaaaaaaaaa")
    			this.pointId = options.pointId;//传过来的参数
    			console.log("跳转过来了"+options.pointId);
    			this.getPoints(this.pointId, this.timeType, this.Cpage);
    		}
    		
    		
    		
    			
    	}
    </script>
    
    <style>
    	.content1 {
    		height: 60upx;
    		background-color: #007AFF;
    
    	}
    
    	.content1 text {
    		color: #F8F8F8;
    		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    		margin-left: 10upx;
    	}
    
    	/* 搜索框 */
    	.search-ico,
    	.search-ico-1 {
    		width: 50upx;
    		height: 50upx;
    	}
    
    	.search-ico {
    		margin-left: 20upx;
    	}
    
    	.search-ico-1 {
    		margin-right: 20upx;
    	}
    
    	.search-text {
    		font-size: 14px;
    		background-color: #FFFFFF;
    		height: 60upx;
    		width: 480upx;
    	}
    
    	.search-block {
    		display: flex;
    		flex-direction: row;
    		/* padding-left: 60upx; */
    		position: relative;
    
    	}
    
    	.search-ico-wapper {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 0upx;
    		width: 350upx;
    	}
    
    	.search-ico-wapper1 {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 360upx;
    		width: auto;
    		float: right;
    	}
    
    
    	page {
    		background-color: #eee;
    	}
    
    	.search-data-time {
    		height: 40upx;
    
    	}
    
    	.search-data-time-right {
    		width: 400upx;
    		margin-left: 390upx;
    	}
    
    	.search-data-time-right text {
    		color: #808080;
    	}
    
    	.list-box {
    		display: flex;
    		flex-direction: column;
    		background-color: #fff;
    		margin: 0upx 16upx 16upx 16upx;
    		padding: 16upx;
    		border-radius: 10upx;
    		height: 60upx;
    	}
    
    	.list-ed {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.list-left {
    		margin-left: 10upx;
    		display: flex;
    		flex-direction: column;
    		width: 800upx;
    		height: 60upx;
    	}
    
    
    	.list-right {
    		display: flex;
    		flex-direction: column;
    		width: 510upx;
    		height: 60upx;
    	}
    
    
    	.btn-point {
    		width: 200rpx;
    		height: 60rpx;
    		display: flex;
    		margin-top: 25rpx;
    		margin-right: 10rpx;
    		line-height: 50rpx;
    		justify-content: center;
    		border-radius: 25px;
    		/* 这里可以改成渐变: background:linear-gradient(to right, #FFDE28,#FF3228) */
    		background-color: #ff5500;
    		font-size: 28rpx;
    	}
    
    	.noadsop {
    		width: 120upx;
    		height: 32upx;
    	}
    
    
    	.list-name {
    
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		font-size: 30upx;
    	}
    
    	.list-p2 {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 1;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		margin-right: 0upx;
    		color: #808080;
    
    	}
    
    
    	.list-da {
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		font-size: 26upx;
    	}
    
    	.list-da view {
    		width: 50%;
    	}
    
    	.list-da view text {
    		color: red;
    	}
    </style>
    
    

    在这里插入图片描述
    访问的数据

    {"status":200,"msg":"查询监测站点成功","data":{"total":40,"data":[{"page":1,"limit":10,"pointId":"1","enterpriseId":"1","enterpriseName":"上海振华重工港机通用装备有限公司","pointName":"032# 港机通用1#出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-11-26 13:09:35","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"2","enterpriseId":"1","enterpriseName":"上海振华重工港机通用装备有限公司","pointName":"033# 港机通用2#出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":null,"isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"3","enterpriseId":"1","enterpriseName":"上海振华重工港机通用装备有限公司","pointName":"131# 港机通用3#出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":null,"isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"4","enterpriseId":"2","enterpriseName":"上海大桥化工有限公司","pointName":"252# 大桥化工涂料制造排放","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:11:11","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"5","enterpriseId":"14","enterpriseName":"富通集团上海电线有限公司","pointName":"472# 上海富通电线南排口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":1,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 14:48:57","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"6","enterpriseId":"14","enterpriseName":"富通集团上海电线有限公司","pointName":"473# 上海富通电线北排口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":1,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:10:17","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"9","enterpriseId":"13","enterpriseName":"上海瑞尔实业有限公司","pointName":"056# 上海瑞尔-1号出口(测)","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":null,"isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"11","enterpriseId":"11","enterpriseName":"上海强盛化工有限公司","pointName":"314# 上海强盛化工一期排口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":0,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-15 01:00:16","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"12","enterpriseId":"9","enterpriseName":"美卓流体控制(上海)有限公司","pointName":"上海美卓废气排放口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:09:34","isStarted":null,"arrayofkeyvalue":null},{"page":1,"limit":10,"pointId":"13","enterpriseId":"8","enterpriseName":"上海电气电站设备有限公司上海汽轮机厂","pointName":"201# 上海汽轮机厂油漆房废气出口","industryId":null,"regionId":null,"startTime":null,"endTime":null,"mn":null,"type":null,"divisorCount":null,"protocolType":null,"controllLevel":null,"latitude":null,"longitude":null,"isOnline":1,"isException":0,"isOverProof":0,"isConstvalue":0,"isZerovalue":0,"connectedTime":"2020-12-17 16:09:35","isStarted":null,"arrayofkeyvalue":null}]},"ok":null}
    

    第四天

    目标
    1.上拉刷新
    2.下拉判断是否触底了
    3.菜单筛选——分类查询(超标数据、异常数据、实时、分钟、小时、日数据切换)前台

    菜单筛选

    引入的组件
    在这里插入图片描述
    lee-popup.vue

    <template>
    	<view class="lee-popup-mask" :class="maskClass" data-role="mask">
    		<view class="lee-popup" :style="popupStyle" @transitionend="onAnimationEnd">
    
    			<view class="filter-content-title1">
    				<text>数据分类</text>
    			</view>
    			<view class="filter-content-detail">
    				<text class="filter-content-detail-item-default" v-for="(item,idx) in menuList" :key="idx" :style="{'background-color':item.isSelected?themeColor:'#FFFFFF','color':item.isSelected?'#FFFFFF':'#666666'}"
    				 @tap="itemTap(idx,menuList,item.key)">
    					{{item.title}}
    				</text>
    
    			</view>
    			<view class="filter-content-title1">
    				<text>数据类型</text>
    			</view>
    			<view class="filter-content-detail">
    				<view v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-online'>
    					<text class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
    					 @tap="childItemTap(idx,detailItem)">
    						{{detailItem.title}}
    
    					</text>
    				</view>
    
    
    
    			</view>
    
    			<view class="filter-content-title1" v-if="flag==1">
    				<view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;">
    					<text>时间:</text>
    					<view>
    						aaaaaaaaaaaa
    					</view>
    					<picker :end='end' mode="date" fields="month" v-model="date" @change="dateChange">
    						<view></view>
    					</picker>
    				</view>
    
    			</view>
    			<view class="filter-content-title1" v-if="flag==2">
    				<view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;">
    					<text>时间</text>
    					<view>bbbbbbbbbbbbbbb
    					</view>
    				</view>
    
    			</view>
    			<view class="filter-content-footer">
    				<view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="closeClick()">
    					<text>取消</text>
    				</view>
    				<view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
    					<text>确定</text>
    				</view>
    			</view>
    
    		</view>
    	</view>
    </template>
    
    <script>
    	import myslFilterView from '@/components/mysl-filter/myfilter-view.vue'
    	// 弹出层状态
    	const Status = {
    		OPEN: 'open',
    		CLOSE: 'close',
    		OPENED: 'opened',
    		CLOSED: 'closed'
    	}
    
    	/**
    	 * LeePopup弹出层
    	 * @property {String}  type = [top|left|right|bottom] 弹出方向
    	 * 		@value top 从顶部弹出
    	 * 		@value left 从左侧弹出
    	 * 		@value right 从右侧弹出
    	 * 		@value bottom 从底部弹出
    	 * @property {String} width 横向弹出时,指定弹框宽度
    	 * @property {String} height 纵向弹出时,指定弹出高度
    	 * @property {Object} customStyle 自定义弹出层样式
    	 * @property {Boolean} animation 是否开启动画 
    	 * @property {Boolean} round 是否使用圆角
    	 * @property {String} padding 定义边距
    	 * @event {Function(status: String)} change 状态更新事件
    	 * @event {Function} open 弹层打开事件,动画未结束
    	 * @event {Function} opened 弹层打开事件,动画结束时
    	 * @event {Function} close 弹层关闭事件,动画未结束
    	 * @event {Function} closed 弹层关闭事件,动画结束时
    	 */
    	export default {
    		components: {
    			myslFilterView
    		},
    		props: {
    
    			// 弹窗方向
    			type: {
    				type: String,
    				default: 'top'
    			},
    
    			// 横向弹出时,指定弹框宽度
    			width: {
    				type: String,
    				default: '440rpx'
    			},
    
    			// 纵向弹出时,指定弹出高度
    			height: {
    				type: String,
    				default: '600rpx'
    			},
    
    			// 自定义弹出层样式
    			customStyle: {
    				type: Object,
    				default: () => {}
    			},
    
    			// 是否开启动画
    			animation: {
    				type: Boolean,
    				default: true
    			},
    
    			// 圆角模式
    			round: {
    				type: Boolean,
    				default: true
    			},
    
    			// 边距
    			padding: {
    				type: String,
    				default: '30rpx'
    			},
    			themeColor: {
    				type: String,
    				default () {
    					return '#000000'
    				}
    			},
    			color: {
    				type: String,
    				default () {
    					return '#666666'
    				}
    			},
    			independence: {
    				type: Boolean,
    				default: false
    			},
    			isTransNav: {
    				type: Boolean,
    				default: false
    			},
    			navHeight: {
    				type: Number,
    				default: 0
    			},
    			topFixed: {
    				type: Boolean,
    				default: false
    			}
    		},
    
    		data() {
    			return {
    				status: Status.CLOSED,
    
    				flag: 0,
    				year: '',
    				month: '',
    				nowYear: '',
    				nowMonth: '',
    				selectDetailList: [], //子菜单
    				result: {
    					index: "", //暂存父index
    					timeType: "", //表名
    					dataType: "", //字段名
    				},
    				menuList: [{
    						'title': '全部数据',
    						'detailTitle': '一级菜单',
    						'isSelected': true,
    						'isMutiple': false,
    						'key': 'd2011',
    						'defaultSelectedIndex': 0, //默认 0 为第一个
    						'detailList': [{
    								'title': '实时数据',
    								'value': 'd2011'
    							},
    							{
    								'title': '分钟数据',
    								'value': 'd2051'
    							},
    							{
    								'title': '小时数据',
    								'value': 'd2061'
    							},
    							{
    								'title': '日数据',
    								'value': 'd2031'
    							}
    						]
    
    					},
    					{
    						'title': '超标数据',
    						'detailTitle': '一级菜单',
    						'isMutiple': false,
    						'key': 'warn',
    						'defaultSelectedIndex': 1,
    						'detailList': [{
    								'title': '分钟数据',
    								'value': 'd2051'
    							},
    							{
    								'title': '小时数据',
    								'value': 'd2061'
    							}
    						]
    
    					},
    					{
    						'title': '异常数据',
    						'detailTitle': '一级菜单',
    						'isMutiple': false,
    						'key': 'exception',
    						'defaultSelectedIndex': 0,
    						'detailList': [{
    								'title': '分钟数据',
    								'value': 'd2051'
    							},
    							{
    								'title': '小时数据',
    								'value': 'd2061'
    							}
    						]
    
    					}
    
    				],
    
    
    			}
    		},
    		computed: {
    
    			// 是否为纵向弹出层
    			isVertical() {
    				return ['top', 'bottom'].includes(this.type)
    			},
    
    			// 弹出层样式计算
    			popupStyle() {
    				const style = Object.assign({
    					width: this.isVertical ? '100%' : this.width,
    					height: this.isVertical ? this.height : '100%',
    					padding: this.padding
    				}, this.customStyle)
    				if (this.animation) {
    					style.transition = 'all .5s'
    				}
    				return Object.entries(style).map(item => `${item[0]}: ${item[1]}`).join(';')
    			},
    
    			// 遮罩层类计算
    			maskClass() {
    				const list = [
    					`lee-popup-type_${this.type}`,
    					`lee-popup-status_${this.status}`,
    				]
    				if (this.round) {
    					list.push('lee-popup-round')
    				}
    				return list
    			},
    			itemWidth() {
    				return 'calc(100%/2)'
    			},
    
    
    		},
    		watch: {
    			// 派发状态更新事件
    			status(status) {
    				this.$emit(status)
    				this.$emit('change', status)
    			},
    
    		},
    		methods: {
    
    			// 打开弹出层
    			open() {
    				this.status = this.animation ? Status.OPEN : Status.OPENED
    			},
    			// 关闭弹出层
    			close() {
    				this.status = this.animation ? Status.CLOSE : Status.CLOSED
    			},
    			
    			
    			closeClick(){
    				this.close();
    			},
    			// 点击遮罩层
    			maskClickHandler(e) {
    				if (e.target.dataset.role === 'mask') {
    					this.close()
    				}
    			},
    
    			// 动画结束
    			onAnimationEnd() {
    				if (this.status === Status.OPEN) {
    					this.status = Status.OPENED
    				} else if (this.status === Status.CLOSE) {
    					this.status = Status.CLOSED
    				}
    			},
    
    			//遍历子菜单 选中默认
    			iniChildMethod(index) {
    				let item = this.menuList[index];
    				this.selectDetailList = item.detailList
    				for (let i = 0; i < item.detailList.length; i++) {
    
    					if (item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { //选中,默认子菜单
    						if (item.defaultSelectedIndex == i) {
    							item.detailList[i].isSelected = true; //选择flag =true
    							this.result.dataType = item.detailList[i].value;
    
    
    
    						} else {
    							item.detailList[i].isSelected = false;
    						}
    
    
    
    					}
    				}
    				this.$forceUpdate();
    
    			},
    			//子菜单点击
    			childItemTap(index, list) {
    
    				let item = this.menuList[this.result.index];
    
    				console.log(" 子菜单点击" + index)
    				for (let i = 0; i < item.detailList.length; i++) {
    
    					if (index == i) {
    						//选中子菜单按钮
    						item.detailList[i].isSelected = true
    
    						//保存结果值
    						this.result.dataType = item.detailList[i].value;
    
    
    
    
    
    					} else {
    						item.detailList[i].isSelected = false;
    
    					}
    
    
    				}
    				this.$forceUpdate();
    			},
    			//父菜单点击后
    			itemTap(index, list, key) {
    				//子菜单进行充值
    
    				for (let i = 0; i < list.length; i++) {
    
    					if (index == i) {
    						//选中按钮
    						list[i].isSelected = true
    						//保存结果值
    						this.result.index = index;
    						this.result.timeType = key;
    						//展开子级菜单
    
    						this.iniChildMethod(index);
    
    
    
    
    					} else {
    						list[i].isSelected = false
    					}
    
    
    				}
    				// #ifdef H5
    				this.$forceUpdate();
    				// #endif
    			},
    			//确定
    			sureClick() {
    				console.log("queding")
    				console.log(this.result)
    				this.$emit("returnDate",  this.result);
    				this.close();
    				
    			},
    
    			//选择时间
    			dateChange(e) {
    				console.log(e)
    				let date = e.detail.value;
    				this.year = date.match(/\d{4}/)[0];
    				this.month = Number.parseInt(date.match(/-(\d{2})/)[1]);
    			}
    
    		},
    		onLoad() {
    			let now = new Date();
    			this.nowYear = now.getFullYear();
    			this.nowMonth = now.getMonth() + 1;
    			this.end = `${this.nowYear}-${this.nowMonth}`;
    		},
    	}
    </script>
    
    <style lang="scss">
    	$z-index: 3000;
    
    	.lee-popup-mask {
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		position: fixed;
    		z-index: $z-index;
    		background-color: $uni-bg-color-mask;
    
    		&.lee-popup-status_closed {
    			visibility: hidden;
    		}
    	}
    
    	.lee-popup {
    		box-sizing: border-box;
    		background-color: $uni-bg-color;
    		position: absolute;
    
    		&-round>& {
    			border-radius: $uni-border-radius-lg;
    		}
    
    		&-type_top>& {
    			top: 0;
    			left: 0;
    			transform: translate(0, -100%);
    			border-top-left-radius: 0;
    			border-top-right-radius: 0;
    		}
    
    		&-type_left>& {
    			top: 0;
    			left: 0;
    			transform: translate(-100%, 0);
    			border-top-left-radius: 0;
    			border-bottom-left-radius: 0;
    		}
    
    		&-type_right>& {
    			top: 0;
    			right: 0;
    			transform: translate(100%, 0);
    			border-top-right-radius: 0;
    			border-bottom-right-radius: 0;
    		}
    
    		&-type_bottom>& {
    			left: 0;
    			bottom: 0;
    			transform: translate(0, 100%);
    			border-bottom-left-radius: 0;
    			border-bottom-right-radius: 0;
    		}
    
    		&-status_open>&,
    		&-status_opened>& {
    			transform: translate(0, 0);
    		}
    
    
    		.filter-content {
    			background-color: #F6F7F8;
    		}
    
    		.filter-content-title1 {
    			border-bottom: #EEEEEE 1px solid;
    			padding: 10px 15px;
    			font-size: 13px;
    			color: #999999;
    		}
    
    		.filter-content-title2 {
    			border-bottom: #EEEEEE 1px solid;
    			padding: 10px 15px;
    			font-size: 13px;
    			color: #999999;
    		}
    
    		.filter-content-title3 {
    			border-bottom: #EEEEEE 1px solid;
    			padding: 10px 15px;
    			font-size: 13px;
    			color: #999999;
    		}
    
    		.filter-content-detail {
    			padding: 5px 15px;
    		}
    
    		.filter-content-detail-item-active {
    			background-color: #D1372C;
    			color: #FFFFFF;
    			padding: 5px 15px;
    			border-radius: 20px;
    			margin-right: 10px;
    			margin-top: 10px;
    			display: inline-block;
    			font-size: 14px;
    		}
    
    		.filter-content-detail-item-online {
    			background-color: #FFFFFF;
    			color: #666666;
    			// padding: 5px 15px;
    			// border-radius: 20px;
    			// margin-right: 10px;
    			// margin-top: 10px;
    			display: inline-block;
    			// font-size: 14px;
    		}
    
    		.filter-content-detail-item-default {
    			background-color: #FFFFFF;
    			color: #666666;
    			padding: 5px 15px;
    			border-radius: 20px;
    			margin-right: 10px;
    			margin-top: 10px;
    			display: inline-block;
    			font-size: 14px;
    		}
    
    
    		.filter-content-footer {
    			display: flex;
    			justify-content: space-between;
    			width: 100%;
    			height: 45px;
    			margin-top: 10px;
    		}
    
    		.filter-content-footer-item {
    			width: 50%;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			font-size: 16px;
    		}
    
    		.filter-content-list {
    
    			padding: 5px 15px;
    		}
    
    		.filter-content-list-item-default {
    			color: #666666;
    			width: 100%;
    			padding: 10px 0px;
    		}
    
    		.filter-content-list-item-default text {
    			width: 90%;
    			font-size: 14px;
    			display: inline-block;
    		}
    
    		.filter-content-list-item-active {
    			color: #D1372C;
    			width: 100%;
    			padding: 10px 0px;
    		}
    
    		.filter-content-list-item-active text {
    			font-size: 14px;
    			width: 90%;
    			display: inline-block;
    		}
    
    		.filter-content-list-item-active:after {
    			content: '✓';
    		}
    	}
    </style>
    
    

    data.vue

    <template>
    	<view>
    		<view class="content1"><text>{{pointName}}</text></view>
    		<view class="search-block">
    			<!-- 占用div -->
    			<view class="search-ico-wapper">
    				<image src="../../static/icon/search-active.png" class="search-ico" mode="" @click="open"></image>
    			</view>
    			<view class="search-ico-wapper1">
    				<image src="../../static/icon/cart-active.png" class="search-ico-1" mode=""></image>
    			</view>
    
    		</view>
    		<lee-popup ref="popup" type="bottom" @returnDate="returnDate">
    
    		</lee-popup>
    
    		<view class="search-data-time">
    			<view class=".search-data-time-right"><text>{{time}}</text></view>
    		</view>
    		<view class="index">
    			<view class="new_box" style="margin-top: 20upx;" v-for="data in dataList" :key="data.id">
    				<view class="bbox">
    					<view class="list-box">
    						<view class="list-ed">
    
    							<view class="list-left">
    
    								<view class="list-name">{{data.divisorName}}
    									<font></font>
    								</view>
    
    							</view>
    							<view class="list-right">
    								<text class="list-p2">{{data.Rtd}}</text>
    							</view>
    						</view>
    					</view>
    
    				</view>
    			</view>
    		</view>
    
    	</view>
    </template>
    
    <script>
    	import LeePopup from '@/components/lee-popup/lee-popup.vue'
    
    
    	export default {
    		components: {
    			LeePopup, //筛选弹出层
    		},
    		data() {
    			return {
    				pointName: "",
    				pointId: '', //默认站点数据
    				time: "", //时间
    				timeType: 'd2011', //默认数据源
    				dataType: '', //时间类型
    				Cpage: 1,
    				dataList: [], //企业站点集合,
    			}
    		},
    		methods: {
    			open() {
    				this.$refs.popup.open()
    			},
    
    			//子组件传过来的值
    			returnDate(val) {
    				console.log("接收的值:")
    				console.log(val)
    				this.dataType = val.dataType;
    				this.timeType = val.timeType;
    				
    				this.getPoints(); //重新调用查询数据方法
    
    
    				this.$forceUpdate();
    
    
    
    
    			},
    
    			async getPoints() {
    				await this.$myRuquest({
    					url: '/wx/data/getDataList?pointId=' + this.pointId + '&&timeType=' + this.timeType + '&&dataType' + this.dataType +
    						'&&Cpage=' + this.Cpage
    				}).then(res => {
    
    					if (res.data.status == 200) {
    						if (res.data.data != null) {
    
    							var data = res.data.data.data[0]
    							var strtime = data.arrayofkeyvalue.k;
    							var nian = strtime.slice(0, 4);
    							var yue = strtime.slice(4, 6);
    							var ri = strtime.slice(6, 8);
    							var shi = strtime.slice(8, 10);
    							var fen = strtime.slice(10, 12);
    							var miao = strtime.slice(12, 14);
    							this.time = nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao;
    							this.pointName = data.pointName;
    							var objectKeyvalue = data.arrayofkeyvalue.v;
    							var divisorList = [];
    							var id = 0;
    							if (data.flag.match("d2011")) { //判断为实时数据,显示对应的格式
    
    
    								for (var o in objectKeyvalue) {
    									id++;
    									var divisorObject = new Object;
    									divisorObject.id = id;
    									divisorObject.divisorName = o;
    									divisorObject.Rtd = objectKeyvalue[o].Rtd
    									divisorList.push(divisorObject)
    								}
    							} else {
    								for (var o in objectKeyvalue) {
    									id++;
    									var divisorObject = new Object;
    									divisorObject.id = id
    									divisorObject.divisorName = o;
    									divisorObject.Rtd = objectKeyvalue[o].avg
    									divisorList.push(divisorObject)
    								}
    
    							}
    							this.dataList = divisorList;
    						} else {
    							uni.showToast({
    								icon: 'none',
    								position: 'bottom',
    								title: '暂无数据'
    							});
    						}
    
    					} else {
    
    						uni.showToast({
    							icon: 'none',
    							position: 'bottom',
    							title: '数据调用失败'
    						});
    					}
    				})
    
    
    			}
    
    		},
    		onLoad(options) {
    			console.log("aaaaaaaaaaaaaaaaa")
    			this.pointId = options.pointId; //传过来的参数
    			console.log("跳转过来了" + options.pointId);
    			this.getPoints();
    		}
    
    
    
    
    	}
    </script>
    
    <style>
    	.content1 {
    		height: 60upx;
    		background-color: #007AFF;
    
    	}
    
    	.content1 text {
    		color: #F8F8F8;
    		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    		margin-left: 10upx;
    	}
    
    	/* 搜索框 */
    	.search-ico,
    	.search-ico-1 {
    		width: 50upx;
    		height: 50upx;
    	}
    
    	.search-ico {
    		margin-left: 20upx;
    	}
    
    	.search-ico-1 {
    		margin-right: 20upx;
    	}
    
    	.search-text {
    		font-size: 14px;
    		background-color: #FFFFFF;
    		height: 60upx;
    		width: 480upx;
    	}
    
    	.search-block {
    		display: flex;
    		flex-direction: row;
    		/* padding-left: 60upx; */
    		position: relative;
    
    	}
    
    	.search-ico-wapper {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 0upx;
    		width: 350upx;
    	}
    
    	.search-ico-wapper1 {
    		background-color: #FFFFFF;
    		display: flex;
    		flex-direction: column;
    		padding: 0upx 0upx 0upx 360upx;
    		width: auto;
    		float: right;
    	}
    
    
    	page {
    		background-color: #eee;
    	}
    
    	.search-data-time {
    		height: 40upx;
    
    	}
    
    	.search-data-time-right {
    		width: 400upx;
    		margin-left: 390upx;
    	}
    
    	.search-data-time-right text {
    		color: #808080;
    	}
    
    	.list-box {
    		display: flex;
    		flex-direction: column;
    		background-color: #fff;
    		margin: 0upx 16upx 16upx 16upx;
    		padding: 16upx;
    		border-radius: 10upx;
    		height: 60upx;
    	}
    
    	.list-ed {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.list-left {
    		margin-left: 10upx;
    		display: flex;
    		flex-direction: column;
    		width: 800upx;
    		height: 60upx;
    	}
    
    
    	.list-right {
    		display: flex;
    		flex-direction: column;
    		width: 510upx;
    		height: 60upx;
    	}
    
    
    	.btn-point {
    		width: 200rpx;
    		height: 60rpx;
    		display: flex;
    		margin-top: 25rpx;
    		margin-right: 10rpx;
    		line-height: 50rpx;
    		justify-content: center;
    		border-radius: 25px;
    		/* 这里可以改成渐变: background:linear-gradient(to right, #FFDE28,#FF3228) */
    		background-color: #ff5500;
    		font-size: 28rpx;
    	}
    
    	.noadsop {
    		width: 120upx;
    		height: 32upx;
    	}
    
    
    	.list-name {
    
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		font-size: 30upx;
    	}
    
    	.list-p2 {
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 1;
    		margin-bottom: 15upx;
    		margin-top: 10upx;
    		margin-right: 0upx;
    		color: #808080;
    
    	}
    
    
    	.list-da {
    		display: flex;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		font-size: 26upx;
    	}
    
    	.list-da view {
    		width: 50%;
    	}
    
    	.list-da view text {
    		color: red;
    	}
    </style>
    
    

    在这里插入图片描述

    第五天

    1.勾选因子名称实现列表变换
    2.打包成小程序,注册公众号

    第六天

    1、权限 ——》登录授权 session
    2、根据对应的权限——只能查看对应企业的数据

    第七天

    公众号消息推送学习

    展开全文
  • 基于Vue框架微信小程序物联网项目之设计笔记–创建工程模板 Vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手...

    基于Vue框架微信小程序物联网项目之设计笔记–创建工程模板

    Vue简介

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
    在这里插入图片描述

    官网地址 https://cn.vuejs.org/

    软件配置

    VScode(管理员版本)

    在这里插入图片描述

    Nodejs win10 64位

    在这里插入图片描述

    微信开发者工具 (稳定版)

    在这里插入图片描述

    创建工程(最好看视频教程)

    创建工程(前提软件全部按萝卜师兄的教程安装完成之后)

    Vue CLI 安装
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    加快速度

    淘宝 NPM 镜像
    这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步.
    https://developer.aliyun.com/mirror/NPM?from=tnpm
    在这里插入图片描述

    安装命令
    npm install -g @vue/cli --registry=https://registry.npm.taobao.org
    

    在这里插入图片描述
    安装完成后
    在这里插入图片描述

    VsCode 插件安装

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    mpvue模板生成

    1.创建一个文件保存工程文件
    在这里插入图片描述
    2. 使用Vscode 打开文件夹 打开终端
    在这里插入图片描述
    在这里插入图片描述
    3. 终端 输入 命令

    vue init mpvue/mpvue-quickstart my-project # my-project项目名称 可以改成你自己的
    例如:
    vue init mpvue/mpvue-quickstart wechatapp
    

    在这里插入图片描述

    一般情况下一路回车,Y/n? 直接n

    4.工程生成
    在这里插入图片描述
    生成如下文件
    在这里插入图片描述
    5 终端 输入 npm install 安装依赖环境
    在这里插入图片描述
    c
    6. 打开微信开发者工具 导入项目
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    参考资料

    萝卜师兄 挽救小白STM32+8266+小程序智能家居毕设实战教程

    (非常的详细,从STM32简单入门到微信小程序开发全部手把手教学,非常感谢大佬的教程,可以完成一个简单的物联网项目)
    https://www.bilibili.com/video/BV1ae411W7yD
    在这里插入图片描述
    在这里插入图片描述
    基于Vue框架微信小程序物联网项目之设计笔记–简单的界面显示实现
    https://blog.csdn.net/weixin_43599390/article/details/106987763

    展开全文
  • 基于Vue框架微信小程序物联网项目之设计笔记记录 Vue Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三...
  • 最近在做智能家居的项目,主要是通过esp8266接入云端实现远程控制的效果,就萌发想用微信小程序进行控制的想法。然后由于对前端不是很了解,关于j核心代码s是参考别人的代码-——我只是代码的搬运工 提示:以下是本...
  • 微信小程序+物联网

    千次阅读 2020-02-18 14:08:15
    API(Application Programming Interface,应用程序接口)是一些预先定义的函数,或指软件系统不同组成部分衔接的...微信小程序如何借助蓝牙与设备进行交互 微信小程序如何借助腾讯语音 API 让用户体验更上一层楼 ...
  • 微信小程序连接物联网4. 阿里云物联网M2M规则转发完成的样子 前言 折腾宿舍远程开门的这两周里碰壁不少,还好功能实现了。我想还有很多和我有同一想法的人。所以记录过程下来供参考少走弯路吧。我不是电子专业的...
  • 微信小程序控制硬件第1篇 】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! 【微信小程序控制硬件第2篇 】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的...
  • 微信小程序控制硬件①】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! 【微信小程序控制硬件②】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证和通讯...
  • 使用esp8266 wifi芯片,搭建MQTT服务器,并连接微信小程序,使用微信小程序远程控制硬件板子,并采集数据。实际项目中使用的,并非只是DEMO,可批量管理设备。
  • 微信小程序代码编写
  • 本章主要讲述简便实现物联网,我们需要使用树莓派作为控制主板,使用python flask实现web服务器挂载,通过驱动板控制电机正反转,微信小程序作为远程控制终端,一起渐入IoT佳境吧! 智能窗帘概念图: 本次实验...
  • 前言 上大学一直想做遥控宿舍开门,恰好这个学期我的宿舍钥匙不见了。于是花了两周的时间完成了这个想法。在这其中看了各种视频、博客...NodeMCU 是一款开源的物联网开发平台,其固件和开发板均开源,自带 WIFI 模块...
  • 微信小程序控制硬件第1篇 】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! 【微信小程序控制硬件第2篇 】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,437
精华内容 3,774
关键字:

微信小程序物联网控制

微信小程序 订阅