标签：uniapp flex color 微信 联网 margin null data display
文章目录
第一天：登录授权
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
需要熟练掌握
总结
第二天：监测站点
第三天 实时数据
准备后台访问的数据
{"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、根据对应的权限——只能查看对应企业的数据
第七天
公众号消息推送学习
标签：uniapp,flex,color,微信,联网,margin,null,data,display 来源： https://blog.csdn.net/weixin_44106334/article/details/111174346
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。