需求分析：
物联网把新一代IT技术充分运用在各行各业之中，具体地说，就是把感应器嵌入和装备到电网、铁路、桥梁、隧道、公路、建筑、供水系统、大坝、油气管道等各种物体中，然后将“物联网”与现有的互联网整合起来，实现人类社会与物理系统的整合，在这个整合的网络当中，存在能力超级强大的中心计算机群，能够对整合网络内的人员、机器、设备和基础设施实施实时的管理和控制，在此基础上，人类可以以更加精细和动态的方式管理生产和生活，达到“智慧”状态，提高资源利用率和生产力水平，改善人与自然间的关系。毫无疑问，如果“物联网”时代来临，人们的日常生活将发生翻天覆地的变化。然而，不谈什么隐私权和辐射问题，单把所有物品都植入识别芯片这一点现在看来还不太现实。人们正走向“物联网”时代，但这个过程可能需要很长很长的时间。
调研：问卷调查
1.性别： 男 女
2.年龄： 20岁以下 20至30岁 30至40岁 40至50岁 50岁以上
3.您的学历：本科以下 本科 硕士 博士及以上
4.您是否了解物联网：了解 听说过但不了解 没听说
5.您是从什么渠道了解物联网哒？ 报纸、杂志 物联网 其他
二、编码
1.首页login.vue:
<template>
<view>
<swiper class="swiper" circular autoplay="true" interval="2000" duration="500">
<swiper-item class="swiper-item">
<image src="../../static/picture/bizhi1.jpg"></image>
</swiper-item>
<swiper-item class="swiper-item">
<image src="../../static/picture/bizhi2.jpg"></image>
</swiper-item>
</swiper>
<view class="enter">
<button type="primary" size="mini" @click="gotonext">进入</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
gotonext:function(){
uni.switchTab({
url: '/pages/index/message'
})
}
}
}
</script>
<style lang="scss">
.swiper{
height: 1200upx;
}
.swiper-item{
text-align: center;
height: 100%;
image{
width: 100%;
height: 100%;
}
}
.enter{
position: absolute;
top: 800upx;
left: 320upx;
}
</style>
2.登录页message.vue:
<template>
<view>
<view class="login" v-show="isAuthorization">
<view class="uni-common-mt">
<view class="uni-form-item uni-column">
<view class="login_lable">登录</view>
</view>
<view class="uni-form-item uni-column">
<view>
<input class="uni-input" placeholder="账号" @input="inputChangeFun($event, 1)" :value="usernameVal"/> <!-- 账号的输入 -->
</view>
</view>
<view class="uni-form-item uni-column">
<view>
<input class="uni-input" placeholder="密码" password="true" @input="inputChangeFun($event, 2)" :value="passwordVal"/> <!-- 密码的输入 -->
</view>
</view>
<view class="uni-form-item uni-column">
<view>
<button type="primary" @click="user_login">登录</button>
</view>
</view>
</view>
</view>
<view class="message" v-show="!isAuthorization">
<view class="message_item" v-for="(item, index) in messageModes" :key="index">
<image :src="item.img"></image>
<view class="right">
<view class="message_content">{{item.content}}</view>
<view class="message_channel">
<view>
<text class="device">{{item.device1}}</text>
</view>
<view class="info">
<text class="timestamp">{{item.time}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import user from '../../static/js/user.js'
let thisDom;
export default {
data() {
return {
isAuthorization: true,
usernameVal: '',
passwordVal: '',
messageModes:[{
img:"../../static/picture/shouji1.png",
content:"hello",
device1:"路测手机-电话号码",
time:"01-20 22:45"
},
{
img:"../../static/picture/shouji2.png",
content:"ssfs",
device1:"路测手机-ICCCID信息",
time:"01-20 22:43"
},
{
img:"../../static/picture/shouji3.png",
content:"word",
device1:"路测手机-信息安全",
time:"01-21 18:45"
}]
}
},
onLoad() {
},
methods: {
//监听输入的框
inputChangeFun:function(e, num){
//如果输入框为账号就1，密码为2
if(num === 1){
this.usernameVal = e.detail.value;
}
else if(num === 2){
this.passwordVal = e.detail.value;
}
},
// 判断账号和密码是否为空
panduanFun:function(usernameItem, passwordItem){
// 如果为空就提示用户名不能为空或密码不能为空,并且返回为false
if(usernameItem === null || usernameItem === "" || usernameItem === undefined){
uni.showToast({
title: '用户名不能为空', //提示的内容
icon: 'error',
duration: 3000
});
return false;
}
else if(passwordItem === null || passwordItem ==="" || passwordItem === undefined){
uni.showToast({
title: '密码不能为空', //提示的内容
icon: 'error',
duration: 3000
});
return false;
}
return true;
},
//登录按钮
user_login:function(){
//调用panduanFun判断是否为空，不为空的话判断账号密码是否符合自己设定
let fk = this.panduanFun(this.usernameVal, this.passwordVal);
if(fk){
if(this.usernameVal !== user.user.username){
uni.showToast({
title: '用户名或密码错误', //提示的内容
icon: 'error',
duration: 3000
});
uni.hideLoading();
return;
}
else if(this.passwordVal != user.user.password){
uni.showToast({
title: '用户名或密码错误', //提示的内容
icon: 'error',
duration: 3000
});
uni.hideLoading();
return;
}
uni.showLoading({
title: '登录中',
});
setTimeout(function(){
uni.hideLoading();
uni.showToast({
title: '登录成功', //提示的内容
icon: 'none',
position:'center'
});
}, 1000);
this.isAuthorization = false
}
},
}
}
</script>
<style lang="scss">
.login{
padding: 20upx 40upx;
margin: 200upx 20upx;
text-align: center;
background-color: #eee;
.login_lable{
color: #333333;
margin: 0 auto;
}
.uni-input{
background-color: #fff;
height: 80upx;
text-align: left;
padding-left: 10upx;
border-radius: 10upx;
font-size: 30upx;
}
.uni-form-item{
margin: 30upx 0;
}
button{
font-size: 30upx;
background-color: #10ff10;
}
}
.message{
.message_item{
display: flex;
padding: 15upx 20upx;
border-bottom: 1upx solid #eee;
image{
border-radius: 10upx;
width: 100upx;
min-width: 100upx;
max-width: 100upx;
height: 80upx;
}
.right{
margin-left: 15upx;
.message_content{
font-size: 27upx;
color: #555555;
margin-bottom: 10upx;
}
.message_channel{
display: flex;
font-size: 25upx;
color: #999999;
.info{
float: left;
margin-left: 30upx;
font-size: 25upx;
color: #999999;
}
}
}
}
}
</style>
3.设备页面device.vue:
<template>
<view class="content">
<!-- 导航栏，用于搜索和扫描 -->
<view class="search">
<uni-nav-bar fixed="false" color="#333333" backgroundColor="#ffffff" right-icon="scan" @clickRight="scan">
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="22" color="#66666"></uni-icons>
<input confirm-type="search" class="nav-bar-input" v-model="deviceSearchQuery" type="text" placeholder="输入搜索关键词"/>
</view>
</uni-nav-bar>
</view>
<!-- 扫描 -->
<view class="camera" v-if="cameraShow">
<camera mode="scanCode" device-position="front" flash="off" @error="error"
@initdone="scanningCode" @scancode="successScan" style="width: 100%; height: 300px;"></camera>
</view>
<!-- 显示下面的充电桩 -->
<view class="device">
<view class="device_item" v-for="(item, index) in filtereDev" :key="index">
<image :src="item.img"></image>
<view class="right">
<view class="device_content">{{item.content}}</view>
<view class="device_channel">
<view>
<text class="device">{{item.device1}}</text>
</view>
<view class="info">
<text class="timestamp">{{item.time}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
"cameraShow": false,
deviceSearchQuery: "",
deviceModes:[{
img:"../../static/picture/chongdian1.png",
content:"智能温度计",
device1:"UNACTIVE",
time:"02-13 21:39"
},
{
img:"../../static/picture/chongdian2.png",
content:"充电桩",
device1:"UNACTIVE",
time:"02-13 21:34"
},
{
img:"../../static/picture/chongdian2.png",
content:"充电桩5",
device1:"UNACTIVE",
time:"01-20 22:45"
},
{
img:"../../static/picture/chongdian2.png",
content:"充电桩3",
device1:"UNACTIVE",
time:"01-20 22:50"
},
{
img:"../../static/picture/chongdian2.png",
content:"充电桩3",
device1:"UNACTIVE",
time:"01-20 22:50"
},
{
img:"../../static/picture/chongdian2.png",
content:"充电桩2",
device1:"UNACTIVE",
time:"01-20 22:49"
},
{
img:"../../static/picture/chongdian2.png",
content:"充电桩1",
device1:"ACTIVE",
time:"01-20 22:49"
}]
}
},
onLoad: function (options) {
setTimeout(function () {
console.log('start pulldown');
}, 1000);
//页面加载时就进行一次页面的下拉, 如果不需要可以不写
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
computed:{
filtereDev(){
return this.deviceModes.filter((item) =>
item.content.toLowerCase().includes(this.deviceSearchQuery.toLowerCase()) ||
item.device1.toLowerCase().includes(this.deviceSearchQuery.toLowerCase()));
}
},
methods: {
scan(){
const ctx = uni.createCameraContext();
ctx.scan({
quality: 'high',
success: (res) =>{
this.src = res.tempImagePath
}
});
// console.log("binding");
// this.cameraShow = true;
},
error(e){
console.log(e.detail)
}
}
}
</script>
<style lang="scss">
.device{
.device_item{
display: flex;
padding: 15upx 20upx;
border-bottom: 1upx solid #eee;
image{
border-radius: 10upx;
width: 100upx;
min-width: 100upx;
max-width: 100upx;
height: 80upx;
}
.right{
margin-left: 15upx;
.device_content{
font-size: 27upx;
color: #555555;
margin-bottom: 10upx;
}
.device_channel{
display: flex;
font-size: 25upx;
color: #999999;
.info{
float: left;
margin-left: 30upx;
font-size: 25upx;
color: #999999;
}
}
}
}
}
.search{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
padding: 0;
}
.input-view{
display: flex;
flex-direction: row;
flex: 1;
background-color: #f8f8f8;
height: 30px;
border-radius: 15px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: 30px;
}
.input-uni-icon{
line-height: 30px;
}
.uni-nav-bar-text{
font-size: 14px;
}
.nav-bar-input{
height: 30px;
line-height: 30px;
width: 220upx;
padding: 0 5px;
font-size: 14px;
background-color: #f8f8f8;
}
</style>
4.场景页面changjing.vue:
<template>
<view>
<view class="one" v-for="(item, index) in xinxiModes" :key="index">
<image :src="item.img"></image>
<view class="one-left">
<text>{{item.content}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
xinxiModes:[{
img:"../../static/picture/yingyong1.jpg",
content:"智能安全"
},
{
img:"../../static/picture/yingyong2.jpg",
content:"智慧物流"
},
{
img:"../../static/picture/yingyong3.jpg",
content:"智能交通"
},
{
img:"../../static/picture/yingyong4.jpg",
content:"智慧能源"
},
{
img:"../../static/picture/yingyong5.jpg",
content:"智慧建筑"
},
{
img:"../../static/picture/yingyong6.jpg",
content:"智能制造"
}]
}
},
methods: {
}
}
</script>
<style lang="scss">
.one{
display: flex;
flex-direction: row;
line-height: 300upx;
image{
border-radius: 10upx;
width: 400upx;
min-width: 400upx;
max-width: 400upx;
height: 300upx;
}
.one-left{
align-items: center;
font-size: 40upx;
color: orange;
}
}
</style>
5.个人页面grzx.vue:
<template>
<view>
<!-- 账号头像信息 -->
<view class="one">
<view class="one1 one-right">
<image :src="img"></image>
</view>
<view class="one1 one-center">
<view class="one-center-s">账号：{{username}}</view>
<view class="one-center-z">昵称：{{username11}}</view>
</view>
<view class="one1 one-left">
<text class="iconfont"></text>
<text class="iconfont b"></text>
</view>
</view>
<!-- 功能信息 -->
<view class="two">
<view class="two-one" v-for="(item, index) in gongnengModes" :key="index" hover-class="two-one-hover">
<view class="two-one-left">
<text class="iconfont two-one-icon1" :style="'color:' + item.color + ';'">{{item.icon1}}</text>
<text class="two-one-text">{{item.content}}</text>
<text class="iconfont two-one-icon2">{{item.icon2}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import user from '../../static/js/user.js'
export default {
data() {
return {
username: user.user.username,
username11: user.user.username11,
img: user.user.img,
gongnengModes:[{
color:"#7ab82c",
icon1: "\ue607;",
content: "服务",
icon2: "\ue660",
},
{
color:"#ff9e00",
icon1: "\ue606;",
content: "收藏",
icon2: "\ue660"
},
{
color: "#0f0;",
icon1: "\ue669",
content: "朋友圈",
icon2: "\ue660"
},
{
color:"blue",
icon1: "\ue65c",
content: "卡包",
icon2: "\ue660"
},
{
color: "orange",
icon1: "\ue605",
content: "表情",
icon2: "\ue660"
},
{
color: "#00f",
icon1: "\ue62a",
content: "设置",
icon2: "\ue660"
}]
}
},
methods: {
}
}
</script>
<style lang="scss">
.one{
display: flex;
flex-direction: row;
width: 600upx;
height: 150upx;
margin-top: 80upx;
margin-left: 50upx;
background-color: #ffffff;
.one-right{
image{
width: 150upx;
height: 150upx;
border-radius: 15upx;
}
}
.one-center{
width: 350upx;
height: 150upx;
margin-left: 25upx;
.one-center-s{
font-size: 40upx;
color: black;
}
.one-center-z{
margin-top: 40upx;
font-size: 30upx;
color: #11111a;
}
}
.one-left{
margin-top: 50upx;
margin-left: 50upx;
.b{
margin-left: 25upx;
}
}
}
.two{
width: 600upx;
margin-left: 50upx;
margin-top: 50upx;
.two-one{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 100upx;
border-bottom: 1upx solid #faf8fc;
.two-one-left{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.two-one-icon1{
margin-left: 20upx;
}
.two-one-text{
margin-left: 35upx;
font-size: 30upx;
width: 90upx;
}
.two-one-icon2{
margin-left: 390upx;
}
}
}
.two-one-hover{
background-color: #f2f1f2;
}
}
</style>
6.用户的数据user.js:
let user1 = {
username: "xiaoxun",
password: "123456",
img:'../../static/picture/lanyy.jpg',
age: 18,
username11: "dabenzai"
}
7.页面配置pages:
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/index/login",
"style" :
{
"navigationBarTitleText": "uniapp互联网",
"enablePullDownRefresh": true
}
}
,{
"path" : "pages/index/message",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/index/device",
"style" :
{
"navigationBarTitleText": "我的设备",
"enablePullDownRefresh": true
}
}
,{
"path" : "pages/index/changjing",
"style" :
{
"navigationBarTitleText": "应用场景",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/index/grzx",
"style" :
{
"navigationBarTitleText": "个人中心",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
"color": "#33333",
"selectedColor": "#28C76F",
"list": [
{
"text": "消息",
"pagePath": "pages/index/message",
"iconPath": "static/picture/message1.png",
"selectedIconPath": "static/picture/message2.png"
},
{
"text": "设备",
"pagePath": "pages/index/device",
"iconPath": "static/picture/shebei1.png",
"selectedIconPath": "static/picture/shebei2.png"
},
{
"text": "场景",
"pagePath": "pages/index/changjing",
"iconPath": "static/picture/changjing1.png",
"selectedIconPath": "static/picture/changjing2.png"
},
{
"text": "个人",
"pagePath": "pages/index/grzx",
"iconPath": "static/picture/gr1.png",
"selectedIconPath": "static/picture/gr2.png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app物联网",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
