# 设备状态（status）
在插件中展示设备状态信息，以便快速了解设备的运行状态
# dof-status
设备状态组件
# 示例
<template>
<div class="dof-demo" :style="pageContainerStyle">
<dof-minibar title="8.4 设备状态"> </dof-minibar>
<SwitchTheme />
<scroller>
<div class="titleBox">
<text class="title">仅状态</text>
</div>
<div class="content">
<div class="flex-row-center">
<dof-status
:class="['m-b-48', 'm-r-72']"
:options="options"
:active="0"
:width="width"
:backgroundColor="backgroundColor"
></dof-status>
<dof-status :class="['m-b-48']" :options="options" :active="1"></dof-status>
</div>
<div class="flex-row-center">
<dof-status
:class="['m-b-48', 'm-r-72']"
:options="options"
:active="2"
:width="width"
:backgroundColor="backgroundColor"
mainTextColor="rgba(255,255,255,0.8)"
></dof-status>
<dof-status
:class="['m-b-48']"
:options="options"
:active="3"
mainTextColor="rgba(255,255,255,0.8)"
></dof-status>
</div>
</div>
<div class="titleBox">
<text class="title">状态 + 模式</text>
</div>
<div class="content">
<dof-status
:class="['m-b-48']"
:options="options"
:prompt="prompt"
:active="2"
mainTextColor="rgba(255,255,255,0.8)"
></dof-status>
</div>
<div class="titleBox">
<text class="title">状态 + 预约</text>
</div>
<div class="content">
<dof-status
:class="['m-b-48']"
:options="options2"
:prompt="prompt2"
:active="0"
mainTextColor="rgba(255,255,255,0.8)"
></dof-status>
<dof-status :class="['m-b-48']" :options="options2" :prompt="prompt2" :active="1"></dof-status>
</div>
<div class="titleBox">
<text class="title">仅预约</text>
</div>
<div class="content">
<dof-status :class="['m-b-48']" :prompt="[{ promptText: '定时开机', promptText2: '21:30' }]"></dof-status>
<!-- <dof-status :class="['m-b-48']" :prompt="prompt2"></dof-status> -->
<dof-status
:class="['m-b-48']"
:prompt="[
{ promptText: '定时开机', promptText2: '21:30' },
{ promptText: '新风定时开机', promptText2: '每天06:00' }
]"
></dof-status>
<!-- <dof-status
:class="['m-b-48']"
:prompt="[
{ promptText: '定时开机', promptText2: '21:30' },
{ promptText: '预约开机', promptText2: '06:00' },
{ promptText: '新风定时开', promptText2: '21:30' }
]"
></dof-status> -->
</div>
</scroller>
</div>
</template>
<script>
import { DofMinibar, DofStatus } from 'dolphin-weex-ui'
// import DofStatus from './dof-status'
import SwitchTheme from 'src/components/SwitchTheme.vue'
export default {
beforeCreate() {
// this.$theme.setTheme('colmo')
// this.$bridge.setStatusBar({ colorMode: '2' })
},
components: {
DofMinibar,
DofStatus,
SwitchTheme
},
data: () => ({
// options表示状态标识、状态名称选项，由active字段显示当前显示状态
options: [
{ dotColor: 'rgba(255,255,255,0.4)', text: '待机中' },
{ dotColor: 'rgba(255,255,255,0.4)', text: '暂停中' },
{ dotColor: '#06C270', text: '运行中' },
{ dotColor: '#D82525', text: '故障' }
],
options2: [
{ dotColor: '#06C270', text: '运行中' },
{ dotColor: 'rgba(255,255,255,0.40)', text: '已关机' }
],
// prompt表示提示文本，数组类型，其中promptText2存在为双行，不存在为单行
prompt: [{ promptText: '智能洗' }],
prompt2: [{ promptText: '预约开机', promptText2: '每天早上10:00' }]
// // width 组件宽度
// width: '400px',
// // backgroundColor 组件背景颜色
// backgroundColor: '#ff66ff'
}),
computed: {
pageContainerStyle() {
try {
let tmp = this.$theme.watchTheme({
colmo: { backgroundColor: '#151617' }, // colmo模式 的 style
default: { backgroundColor: '#f9f9f9' }
})
return tmp
} catch (error) {
return { backgroundColor: '#151617' }
}
}
},
created() {},
methods: {}
}
</script>
<style scoped>
.flex-row-center {
flex-direction: row;
align-items: center;
justify-content: center;
}
.titleBox {
height: 100px;
background: #e5e5e8;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 32px;
}
.title {
font-family: PingFangSC-Medium;
font-size: 36px;
color: #000000;
font-weight: 500;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 48px;
}
.m-b-48 {
margin-bottom: 48px;
}
.m-r-72 {
margin-right: 72px;
}
</style>
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
点我扫二维码 查看demo
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
options | Array | N | [] | options表示状态标识、状态名称选项，由active字段显示当前显示状态 |
active | Number | N | undefined | 控制当前显示状态，值为options的下标 |
prompt | Array | N | [] | 提示文本，数组类型，promptText控制第一行的提示文本,promptText2存在为双行，不存在为单行 |
width | String | N | auto | 组件宽度，不传为自适应 |
backgroundColor | String | N | #151617 | 组件背景颜色 |
# 自定义配置案例
<dof-status :options="options" :active="0"></dof-status>
{
// options表示状态标识、状态名称选项，由active字段显示当前显示状态
options: [
{ dotColor: '#25CF42', text: '待机中' },
{ dotColor: '#666666', text: '已关机' },
{ dotColor: '#25CF42', text: '洗涤中' }
],
// prompt表示提示文本，数组类型，其中promptText2存在为双行，不存在为单行
prompt2: [{ promptText: '预约加热至75℃', promptText2: '明天下午6:00-9:00' }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13