2023年09月18日 20:43
原创作品，转载时请务必以超链接形式标明文章原始出处，否则将追究法律责任。
好久没有写文章了，说实话这两年技术上也没有什么进展，毕竟已经是35以上的老家伙了，即将面临公司的无情裁员。今年暑假回老家把房子装修了一下，实在不行回老家种地。老家的环境实在是治愈，比西安好多了。
有位哥们想做一个app，比较简单，之前我也没做过什么app，于是乎就瞎折腾了一下，现学现做，最后做出来这个一个效果
这个东西直接我们参考uni-app官网，就做出来了，无非就是布局么。开发工具选择hbuilder，整个页面的导航以及底部栏都定义在pages.json中
参考官网uni-app官网 (dcloud.net.cn)，首页代码很简单
<template>
<view>
<uni-section title="设备状态日报" type="line">
<uni-row>
<uni-col :span="8">
<view class="row-content-c">
<uni-tag text="正常:2" type="success" />
</view>
<view class="row-content-b">
<uni-tag text="警告:0" type="primary" />
</view>
</uni-col>
<uni-col :span="8">
<view class="number-circle">
<view class="number-circle-inner">
<view class="inner-text">
<view class="inner-text-header">2</view>
<text>总设备</text>
</view>
</view>
</view>
</uni-col>
<uni-col :span="8">
<view class="row-content-c">
<uni-tag text="报警:0" type="warning" />
</view>
<view class="row-content-b">
<uni-tag text="危险:0" type="error" />
</view>
</uni-col>
</uni-row>
</uni-section>
<uni-section title="待处理报警(2)" v-if="displayType==0" type="line">
<view>
<uni-list>
<uni-list-item clickable link @click="goEquipmentDetail('8#')" :show-arrow="false">
<template v-slot:header>
<view class="list-header-circle-2"><text>四级</text></view>
</template>
<template v-slot:body>
<view>
<text class="list-header">8#皮带机</text>
<view><text class="list-content">2023/06/10 16:00:00</text></view>
<view><text class="list-foot">门限</text></view>
</view>
</template>
<template v-slot:footer>
<view class="chat-custom-right">
<uni-tag text="59天24小时" type="default" class="tag-text" />
<view style="margin-top: 10px;"><uni-tag text="待处理" type="primary" :circle="true" />
</view>
</view>
</template>
</uni-list-item>
<uni-list-item clickable link @click="goEquipmentDetail('4#')" :show-arrow="false">
<template v-slot:header>
<view class="list-header-circle-2"><text>四级</text></view>
</template>
<template v-slot:body>
<view>
<text class="list-header">4#皮带机</text>
<view><text class="list-content">2023/06/10 16:00:00</text></view>
<view><text class="list-foot">门限</text></view>
</view>
</template>
<template v-slot:footer>
<view class="chat-custom-right">
<view><uni-tag text="59天17小时" type="default" class="tag-text" /></view>
<view style="margin-top: 10px;"><uni-tag text="待处理" type="primary" :circle="true" />
</view>
</view>
</template>
</uni-list-item>
</uni-list>
</view>
</uni-section>
<uni-section title="待评价案例(0)" v-else type="line">
<view style="text-align: center;">
<image src="../../static/home/no-content.png"></image>
</view>
</uni-section>
<view class="segment-bar-container">
<uni-segmented-control class="segment-bar" :current="current" :values="items" style-type="button"
active-color="#2979ff" @clickItem="onClickItem" />
</view>
<uni-section title="我的应用" type="line">
<uni-row>
<uni-col :span="8" v-for="(item ,index) in list" :index="index" :key="index">
<view class="grid-item-box" @click="goApp(index)">
<image class="image" :src="item.url" mode="aspectFill" />
<text class="list-img-text">{{item.text}}</text>
</view>
</uni-col>
</uni-row>
</uni-section>
</view>
</template>
<script>
export default {
onLoad() {
uni.setTabBarBadge({
index: 2,
text: '2'
});
},
data() {
return {
items: ['', ''],
current: 0, //1-待处理报警 2-待评价案例1
displayType: '0',
list: [{
url: '/static/home/6.png',
text: '诊断'
},
{
url: '/static/home/5.png',
text: '停机报告'
},
{
url: '/static/home/3.png',
text: '数据质量'
},
{
url: '/static/home/4.png',
text: '案例'
},
{
url: '/static/home/1.png',
text: '体检'
},
{
url: '/static/home/2.png',
text: '启机加采'
}
]
}
},
methods: {
goApp(index) {
if (index == 0) {
uni.navigateTo({
url: '/pages/diagnostic/index'
})
} else if (index == 1) {
uni.navigateTo({
url: '/pages/diagnostic/stopreport'
})
} else if (index == 4) {
uni.navigateTo({
url: '/pages/diagnostic/exam'
})
} else if (index == 2) {
uni.navigateTo({
url: '/pages/data/index'
})
} else if (index == 3) {
uni.navigateTo({
url: '/pages/data/example'
})
} else if (index == 5) {
uni.navigateTo({
url: '/pages/data/collect_add'
})
}
},
goEquipmentDetail(item) {
uni.navigateTo({
url: '/pages/alarm/detail?equipmentId=' + item
});
},
onClickItem(e) {
this.displayType = e.currentIndex;
}
}
}
</script>
<style>
.image {
width: 45px;
height: 45px;
}
.grid-item-box {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.grid-item-box-row {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.row-content-c {
text-align: center;
margin-top: 10px;
}
.row-content-b {
text-align: center;
margin-top: 60px;
}
.number-circle {
border-radius: 50%;
background-color: #18bc37;
height: 130px;
width: 130px;
margin: auto;
}
.number-circle-inner {
width: 110px;
height: 110px;
border-radius: 50%;
background-color: whitesmoke;
position: relative;
top: 10px;
left: 10px;
}
.inner-text {
padding-top: 30px;
text-align: center;
}
.inner-text-header {
font-weight: bold;
font-size: 18px;
}
.list-img-text {
margin-top: 5px;
}
.list-header-circle {
border-radius: 50%;
margin-right: 10px;
text-align: center;
padding-top: 10px;
color: #f8f8f8;
justify-content: center;
background-color: #f3a73f;
height: 30px;
width: 40px;
}
.list-header-circle-2 {
border-radius: 50%;
margin-right: 10px;
text-align: center;
padding-top: 10px;
color: #f8f8f8;
justify-content: center;
background-color: red;
height: 30px;
width: 40px;
}
.list-header-circle-3 {
border-radius: 50%;
margin-right: 10px;
text-align: center;
padding-top: 10px;
color: #f8f8f8;
justify-content: center;
background-color: #CC3399;
height: 30px;
width: 40px;
}
.list-header {
font-weight: bold;
}
.list-content {
font-size: 12px;
color: #8f939c;
}
.list-content-right {
font-size: 12px;
color: #8f939c;
background-color: #8f939c;
}
.list-foot {
font-size: 14px;
color: #8f939c;
}
.chat-custom-right {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.segment-bar-container {
padding: 20px;
text-align: center;
}
.segment-bar {
height: 10px;
width: 50%;
margin: auto;
}
.tag-text {
background-color: #e6e6e6;
color: #2c2c2c;
}
</style>报警详情页面
控件直接去参考官网，代码如下，这玩意真没什么可讲的，照猫画虎
<template>
<view>
<uni-section title="报警信息" type="line" titleFontSize="16px">
<template v-slot:right>
<text class="right-text">待处理</text>
</template>
<view>
<uni-list>
<uni-list-item>
<template v-slot:body>
<view>
<text class="list-header">{{equipmentName}}皮带机</text>
<view class="list-content"><text>山东潍焦集团皮带机在线监测项目
\皮带机</text></view>
</view>
</template>
<template v-slot:footer>
<view class="chat-custom-right">
<uni-tag text="四级报警" type="error" circle="true" style="font-size: 14px;" />
<view style="margin-top: 10px;"><text>2023-06-14 14:00:00</text></view>
</view>
</template>
</uni-list-item>
</uni-list>
</view>
</uni-section>
<uni-section title="报警明细" type="line" titleFontSize="16px">
<uni-grid :column="2" :showBorder="false" :square="false">
<uni-grid-item>
<view class="grid-item-box">
<view class="grid-item-title">3、4轴输出端6H</view>
<view class="grid-item-detail">8k 速度波形(10~1000)</view>
<view class="grid-item-foot">数字积分;</view>
<view class="grid-item-detail">2023-06-13 18:00:00</view>
<uni-tag class="grid-item-tag" text="1.613 mm/s" type="primary" circle="true" />
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<view class="grid-item-title">2、3轴输出端4H</view>
<view class="grid-item-detail">8k 速度波形(10~1000)</view>
<view class="grid-item-foot">数字积分;</view>
<view class="grid-item-detail">2023-06-19 08:00:00</view>
<uni-tag class="grid-item-tag" text="1.32 mm/s" type="primary" circle="true" />
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<view class="grid-item-title">3、4轴输出端6V</view>
<view class="grid-item-detail">8k 加速度波形(0.1~1000)</view>
<view class="grid-item-foot">水平超限</view>
<view class="grid-item-detail">2023-06-22 16:00:00</view>
<uni-tag class="grid-item-tag" text="4.43 m/s^2" type="primary" circle="true" />
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box">
<view class="grid-item-title">4轴输入端7H</view>
<view class="grid-item-foot">温度报警</view>
<view class="grid-item-detail">2023-06-22 18:20:34</view>
<uni-tag class="grid-item-tag" text="65°C" type="primary" circle="true" />
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
<uni-section title="诊断结论" type="line" titleFontSize="16px">
<view class="row-column">
<uni-row>
<uni-col :span="12">
<view class="row-title"><text>诊断结论</text></view>
<view class="row-content"><text>暂无</text></view>
</uni-col>
<uni-col :span="12">
<view class="row-title"><text>维修建议</text></view>
<view class="row-content"><text>暂无</text></view>
</uni-col>
</uni-row>
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
</view>
</uni-section>
<view style="clear: both;">
<uni-section title="报警反馈处理" type="line" titleFontSize="16px">
<view style="text-align: center;">
<text>暂无数据</text>
</view>
</uni-section>
</view>
<uni-popup ref="popup">
<view class="pop">
<view class="popup-title">
<view style="padding:10px"><text>添加诊断结论</text></view>
</view>
<view class="popup-use">
<uni-forms ref="addDiagnosticForm" label-position="top" label-width="100px">
<uni-forms-item label="部件:" required>
<button type="default" size="mini" style="width: 230px;" @click="showPart">选择...</button>
</uni-forms-item>
<uni-forms-item label="诊断结论" required>
<uni-easyinput type="textarea" placeholder="请输入诊断结论" />
</uni-forms-item>
<uni-forms-item label="维修建议" required>
<uni-easyinput type="textarea" placeholder="请输入维修建议" />
</uni-forms-item>
<uni-row>
<uni-col :span="11">
<button type="default" size="mini" style="width: 100%;" @click="closeDialog">取消</button>
</uni-col>
<uni-col :span="11" :offset="2">
<button type="primary" size="mini" style="width: 100%;" @click="saveDialog">确认</button>
</uni-col>
</uni-row>
</uni-forms>
</view>
</view>
</uni-popup>
<uni-popup ref="popup_part">
<view class="pop-select">
<view class="popup-title">
<view style="padding:10px"><text>选择故障部件</text></view>
</view>
<view class="popup-use">
<uni-section title="轴承" type="line">
<uni-group style="width:300px;">
<uni-row>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">发电机轴承</button>
</uni-col>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">齿轮箱轴承</button>
</uni-col>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">主轴轴承</button>
</uni-col>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">电机轴承</button>
</uni-col>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">泵轴承</button>
</uni-col>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">风机轴承</button>
</uni-col>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">激振器轴承</button>
</uni-col>
</uni-row></uni-group>
<uni-section title="挤压棍" type="line">
<uni-group mode="card" style="width:300px;">
</uni-group>
</uni-section>
<uni-section title="联轴器" type="line">
<uni-group mode="card" style="width:300px;">
<uni-row>
<uni-col :span="12">
<button type="primary" size="mini" plain="true">液力耦合器</button>
</uni-col>
</uni-row></uni-group>
</uni-section>
<uni-row>
<uni-col :span="11">
<button type="default" size="mini" style="width: 100%;" @click="cancel">取消</button>
</uni-col>
<uni-col :span="11" :offset="2">
<button type="primary" size="mini" style="width: 100%;" @click="save">确认</button>
</uni-col>
</uni-row>
</uni-section>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
onLoad: function(option) {
this.equipmentName = option.equipmentId;
},
components: {},
data() {
return {
equipmentName: '',
horizontal: 'right',
vertical: 'bottom',
direction: 'horizontal',
pattern: {
color: '#333333',
backgroundColor: '#FFFFCC',
selectedColor: '#007AFF',
buttonColor: '#007AFF',
iconColor: '#fff'
},
content: [{
iconPath: '/static/home/feed.png',
selectedIconPath: '/static/home/feed.png',
text: '现场反馈',
active: false
},
{
iconPath: '/static/home/alarm.png',
selectedIconPath: '/static/home/alarm.png',
text: '关闭报警',
active: false
},
{
iconPath: '/static/home/add.png',
selectedIconPath: '/static/home/add.png',
text: '添加诊断',
active: false
}
]
}
},
onBackPress() {
if (this.$refs.fab.isShow) {
this.$refs.fab.close()
return true
}
return false
},
methods: {
closeDialog() {
this.$refs.popup.close();
},
saveDialog() {
uni.showToast({
title: '保存成功！',
duration: 2000
})
this.$refs.popup.close();
},
trigger(e) {
this.content[e.index].active = !e.item.active
if (e.item.text == '关闭报警') {
uni.showModal({
title: '提示',
color: 'red',
content: `确认关闭报警吗？`,
confirmColor: '#CC3333',
cancelColor: '#009966',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
} else if (e.item.text == '添加诊断') {
this.$refs['popup'].open();
} else if (e.item.text == '现场反馈') {
uni.navigateTo({
url: '/pages/alarm/feedback'
})
}
},
fabClick() {
},
switchBtn(hor, ver) {
if (hor === 0) {
this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
} else {
this.horizontal = hor
this.vertical = ver
}
this.$forceUpdate()
},
showPart() {
this.$refs.popup_part.open();
},
cancel() {
this.$refs.popup_part.close();
},
save() {
this.$refs.popup_part.close();
}
}
}
</script>
<style>
.right-text {
color: #2979ff;
}
.list-header {
font-weight: bold;
}
.list-content {
font-size: 14px;
word-wrap: break-word;
}
.list-content-right {
font-size: 12px;
color: #8f939c;
background-color: #8f939c;
}
.chat-custom-right {
font-size: 12px;
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.grid-item-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: left;
justify-content: center;
padding: 15px 0;
background-color: #e9e9eb;
margin: 10px 10px 5px 10px;
border-radius: 10px;
border: 1px;
border-color: #2979ff;
}
.grid-item-title {
padding-left: 10px;
font-size: 16px;
font-weight: bold;
text-align: left;
}
.grid-item-detail {
padding-left: 10px;
padding-top: 2px;
font-size: 14px;
text-align: left;
}
.grid-item-foot {
padding-left: 10px;
padding-top: 2px;
font-size: 14px;
text-align: left;
color: #2979ff;
}
.grid-item-tag {
margin-left: 10px;
margin-top: 5px;
font-size: 14px;
text-align: left;
width: 80px;
}
.row-column {
padding-top: 10px;
margin-left: 10px;
background-color: #e9e9eb;
width: 90%;
height: 30px;
text-align: center;
}
.row-title {
font-size: 15px;
font-weight: bold;
}
.row-content {
font-size: 14px;
color: #8f939c;
margin-top: 20px;
}
.pop {
width: 350px;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
}
.pop-select {
width: 350px;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
}
.popup-use {
padding: 24px 30px;
display: flex;
justify-content: left;
letter-spacing: 2px;
}
.popup-title {
background-color: #2979ff;
height: 40px;
width: 100%;
border-radius: 10px 10px 0 0;
color: #FFFFFF;
}
</style>开发完成后，打包apk，安装到手机可以查看实际效果，ok，今天就到这里。
上一篇 微信小程序开发流程
分享到：
回到顶部
发表评论
匿名
用户评论
暂无评论
关于本站
我是站长老李，商洛腰市人，欢迎光临本站
站内新闻
第十届西部物博会9月3日在西安开幕
计划展出面积26000平方米 参展参会单位200多家
正月初一大雁塔人潮涌动
正月初一的大雁塔南北广场，大唐不夜城人山人海
大唐不夜城七彩钢琴路成网红
如果说之前西安打卡最火爆的地方是永兴坊的摔碗酒，那么如今打卡最火爆的头衔要被位于大唐不夜城的“钢琴路”摘取了。
华为CFO孟晚舟被捕 美国“长臂管辖”能伸多长？
原标题：华为CFO孟晚舟被捕，美国“长臂管辖”的“臂”有多长
苹果“降速门”持续发酵 26场诉讼官司同时缠身
如今，因为“降频门“的持续发酵，苹果公司在全球面临着至少二十六起诉讼。
顺丰创始人罕见直面媒体 原来你是这样的王卫
要感谢马化腾(微博)的盛情邀请，给外人多了一次了解王卫的机会。
亚马逊有个“生鲜梦” 但收购全食超市还远远不够
如果亚马逊希望革新食品杂货投递，那么其斥资137亿美元收购全食超市(Whole Foods Market)只是这一漫长且烧钱过程的开端。
云商智慧物流携手ThoughtWorks 以数字化进击“智慧物流”之路
对于物流行业来说，云计算、大数据和人工智能等技术正在为企业建造数字化物流平台提供必要的技术支撑
热门文章
- CentOS Solr 集群搭建
- SpringBoot+Redis(Linux集群)+Docker实战
- CentOS Redis集群搭建
- SpringBoot+MyBatis+Mysql实战（一）
- Kendo Angular 大文件上传之断点续传
- Blazor之服务端API Swagger&JWT 认证
- Blazor实战之BootstrapBlazor 增删改查
- VUE实战（二）
- Angular7 QuickStart 之会员管理（充值）
- 阿里云ECS windows Server https配置
- Winform实战之-信息共享系统（二）
- ASP.NET Webforms 之Helo App后台管理
- 终将逝去的VB6
- ASP.NET 即时通讯之SignalR
- Node.js 切近实战(九) 之Excel在线（在线编辑）
下载排行
精彩问答
友情链接
用户反馈
