basicInfo.vue
2.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<view class="basic-page">
<!-- 公共组件-每个页面必须引入 -->
<public-module />
<view class="u-flex" style="justify-content: space-between;height: 140rpx;background-color: #fff;border-radius: 18px;">
<view class="u-flex">
<view style="margin-left: 20rpx;">
网关设备1
</view>
<view style="margin-left: 20rpx; font-size: 14px;color:#377DFF;">
在线
</view>
</view>
<view style="margin-right: 20rpx;">
<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModal"/>
</view>
</view>
<view style="margin-top: 40rpx;height: 577rpx;background-color: #fff;border-radius: 20px;">
<u-list>
<u-list-item v-for="(item, index) in indexList" :key="index">
<u-cell :title="item.name1">
<view slot="icon">{{item.name1}}</view>
</u-cell>
</u-list-item>
</u-list>
</view>
<!-- 下发指令 -->
<u-modal :show="showModel" title="命令下发" closeOnClickOverlay showCancelButton @close="hiddenModal" @cancel="hiddenModal" @confirm="handleConfirm" >
<u--textarea placeholder="请输入命令内容" v-model="formModel.intro" count />
</u-modal>
<f-tabbar />
</view>
</template>
<script>
export default {
data() {
return {
formModel: {
intro: ''
},
showModel: false,
indexList: [
{
id: 1,
name1: '设备编号',
value1: 'SN98652320AOL5'
},
{
name1: '设备类型',
value1: '网关子设备'
},
{
name1: '所属组织',
value1: '1-59-25栏位'
},
{
name1: '最后连接时间',
value1: '2022-01-25 12:53:22'
},
{
name1: '是否告警',
value1: '否'
},
{
name1: '设备描述',
value1: '设备无任何问题，运行稳定'
}
]
};
},
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
},
methods: {
showModal() {
this.showModel = true;
},
hiddenModal(){
this.showModel = false;
},
handleConfirm(){
console.log('确定')
}
}
};
</script>