简柏林 / thingskit-app · Commits

Commit f8bfbc10c5799e3f0e6076267f6a2dc001111346

Authored by sqy
1 parent c1a439db

改写设备及子页面

Inline Side-by-side
Showing 6 changed files with 472 additions and 467 deletions
@@ -7,9 +7,6 @@ import { @@ -7,9 +7,6 @@ import {
7 // 初始化请求配置 7 // 初始化请求配置
8 uni.$u.http.setConfig((config) => { 8 uni.$u.http.setConfig((config) => {
9 let token = store.state.userInfo.isToken || (uni.getStorageSync('userInfo').isToken || undefined) 9 let token = store.state.userInfo.isToken || (uni.getStorageSync('userInfo').isToken || undefined)
10 - //#ifdef MP  
11 - let token = store.state.userInfo.isToken || (wx.getStorageSync('userInfo').isToken || undefined)  
12 - //#endif  
13 // #ifdef H5 10 // #ifdef H5
14 window.sessionStorage.getItem('userInfo'); 11 window.sessionStorage.getItem('userInfo');
15 // #endif 12 // #endif
  1 +<template>
  2 + <view style="margin-top: 40rpx;margin-left: 40rpx;">
  3 + <view>
  4 + <text style="color: #333;">{{ title }}</text>
  5 + </view>
  6 + <view class="u-flex" style="flex-wrap: wrap;">
  7 + <view v-for="(item, index) in filterList" :key="index" class="u-page__tag-item">
  8 + <u-tag
  9 + shape="circle"
  10 + size="large"
  11 + borderColor="#377DFF4D"
  12 + :bgColor="item.checked?'#f5f8ff':'#F6F6F6'"
  13 + :color="item.checked?'#377DFF':'#333'"
  14 + :text="item.name"
  15 + @click="radioClick(index)"
  16 +
  17 + />
  18 + </view>
  19 + </view>
  20 + </view>
  21 +</template>
  22 +
  23 +<script>
  24 +export default {
  25 + props: {
  26 + title: {
  27 + type: String,
  28 + default: ''
  29 + },
  30 + filterList: {
  31 + type: Array,
  32 + default: () => []
  33 + }
  34 + },
  35 + methods: {
  36 + radioClick(currentIndex) {
  37 + this.$emit('clickTag', currentIndex);
  38 + }
  39 + }
  40 +};
  41 +</script>
  42 +
  43 +<style>
  44 +.u-page__tag-item {
  45 + margin-right: 20px;
  46 + margin-top: 20px;
  47 +}
  48 +</style>
1 -<template>  
2 - <view class="device-page">  
3 - <f-navbar>  
4 - <view class="u-flex" slot="left" style="justify-content: space-between;flex-direction: row;">  
5 - <view style="width: 580rpx;"><u--input prefixIcon="search" placeholder="输入设备SN或名称搜索" border="surround" shape="circle"></u--input></view>  
6 - <view style="margin-left: 7rpx;">  
7 - <view class=""><text style="color:#333333;font-size: 14px;">筛选</text></view>  
8 - </view>  
9 - <view style="margin-left: 7rpx;"><image @click="openSearchDialog" style="width: 40rpx;height: 40rpx;" src="../../static/shaixuan.png" mode=""></image></view>  
10 - </view>  
11 - </f-navbar>  
12 - <!-- 公共组件-每个页面必须引入 -->  
13 - <public-module></public-module>  
14 - <view class="org-sty">  
15 - <view class="org-item">  
16 - <view class="u-flex" style="flex-direction: row;margin-top: 26rpx;margin-left: 15rpx;">  
17 - <text style="color:#333333;font-size: 15px;margin-left: 14rpx;">组织关系</text>  
18 - </view>  
19 - <view style="margin-top: 5rpx;margin-left: 15rpx;flex-direction: row;" class="u-flex">  
20 - <image style="margin-left: 14rpx;width: 30rpx;height: 30rpx;" src="../../static/org.png" mode=""></image>  
21 - <text style="margin-left: 10rpx;color:#666666;font-size: 12px;">设备数：1234</text>  
22 - </view>  
23 - </view>  
24 - <view class="org-item" style="">  
25 - <image @click="openOrg" style="width: 6px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../static/right-arrow.png" mode=""></image>  
26 - </view>  
27 - </view>  
28 - <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">  
29 - <view class="device-list">  
30 - <view @click="openDeviceDetail(item.id)" class="list-item" v-for="(item, index) in list" :key="index">  
31 - <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;">  
32 - <view style="width: 450rpx;text-align: left;">  
33 - <text style="color:#333333;font-size: 15px;">{{ item.name1 }}</text>  
34 - </view>  
35 - <view style="width: 450rpx;text-align: left;">  
36 - <text style="color:#666666;font-size: 15px;">{{ item.name2 }}</text>  
37 - </view>  
38 - <view style="width: 450rpx;text-align: left;">  
39 - <text style="color:#666666;font-size: 15px;">{{ item.name3 }}</text>  
40 - </view>  
41 - </view>  
42 - <view class="item">  
43 - <view class="u-flex" style="flex-direction: row;margin-top: -6rpx;">  
44 - <image style="width: 30rpx;height: 30rpx;margin-top: 5rpx;margin-right: 5rpx;" :src="item.name4" mode=""></image>  
45 - <view class="">  
46 - <text style="color: #377DFF;font-size: 13px;margin-left: 5rpx;margin-top: 20rpx;">{{ item.name5 }}</text>  
47 - </view>  
48 - </view>  
49 - </view>  
50 - </view>  
51 - </view>  
52 - </mescroll-body>  
53 - <view style="height: 30rpx;"></view>  
54 - <!-- 设备筛选 -->  
55 - <u-popup @close="close" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">  
56 - <view style="height: 900rpx;background:#f5f5f5;border-radius: 20rpx;">  
57 - <view style="text-align: center;position: relative;top: 68rpx;margin-top: -40rpx;"><text style="font-size: 16px;color: #333333;">筛选条件</text></view>  
58 - <view style="margin-top: 97rpx;margin-left: 43rpx;">  
59 - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">设备状态</text></view>  
60 - <view  
61 - class="u-flex"  
62 - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;  
63 - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"  
64 - >  
65 - <view  
66 - v-for="(item, index) in deviceStatus"  
67 - :key="index"  
68 - style="margin: 10rpx;line-height: 45rpx;text-align: center;  
69 - width:180rpx;height: 60rpx;  
70 - border: 0.02px solid rgba(55, 125, 255, 0.3);  
71 - background-color:#F6F6F6;border-radius:32px"  
72 - >  
73 - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>  
74 - </view>  
75 - </view>  
76 - </view>  
77 - <view style="margin-top: 145rpx;margin-left: 43rpx;">  
78 - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">告警状态</text></view>  
79 - <view  
80 - class="u-flex"  
81 - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;  
82 - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"  
83 - >  
84 - <view  
85 - v-for="(item, index) in alertStatus"  
86 - :key="index"  
87 - style="margin: 10rpx;line-height: 45rpx;text-align: center;  
88 - width:180rpx;height: 60rpx;  
89 - border: 0.02px solid rgba(55, 125, 255, 0.3);  
90 - background-color:#F6F6F6;border-radius:32px"  
91 - >  
92 - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>  
93 - </view>  
94 - </view>  
95 - </view>  
96 - <view style="margin-top: 66rpx;margin-left: 43rpx;">  
97 - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">设备类型</text></view>  
98 - <view  
99 - class="u-flex"  
100 - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;  
101 - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"  
102 - >  
103 - <view  
104 - v-for="(item, index) in typeStatus"  
105 - :key="index"  
106 - style="margin: 10rpx;line-height: 45rpx;text-align: center;  
107 - width:180rpx;height: 60rpx;  
108 - border: 0.02px solid rgba(55, 125, 255, 0.3);  
109 - background-color:#F6F6F6;border-radius:32px"  
110 - >  
111 - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>  
112 - </view>  
113 - </view>  
114 - </view>  
115 - <view class="u-flex" style="flex-direction: row;margin-top: 128rpx;margin-left: 55rpx;">  
116 - <view style="width: 300rpx"><u-button type="info" shape="circle" text="重置"></u-button></view>  
117 - <view style="width: 300rpx;margin-left:46rpx ;"><u-button type="success" shape="circle" text="确认"></u-button></view>  
118 - </view>  
119 - </view>  
120 - </u-popup>  
121 - <f-tabbar></f-tabbar>  
122 - </view>  
123 -</template>  
124 -  
125 -<script>  
126 -import fTabbar from '@/components/module/f-tabbar/f-tabbar';  
127 -import fNavbar from '@/components/module/f-navbar/f-navbar';  
128 -import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";  
129 -  
130 -export default {  
131 - mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)  
132 - components: {  
133 - fTabbar,  
134 - fNavbar  
135 - },  
136 - data() {  
137 - return {  
138 - downOption: {  
139 - auto: false //是否在初始化后,自动执行downCallback; 默认true  
140 - },  
141 - show: false,  
142 - deviceStatus: [  
143 - {  
144 - index: 1,  
145 - name: '全部',  
146 - bgColor: '#377DFF',  
147 - textColor: '#377DFF'  
148 - },  
149 - {  
150 - index: 2,  
151 - name: '在线',  
152 - bgColor: '#F6F6F6',  
153 - textColor: '#F6F6F6'  
154 - },  
155 - {  
156 - index: 3,  
157 - name: '离线',  
158 - bgColor: '#F6F6F6',  
159 - textColor: '#F6F6F6'  
160 - },  
161 - {  
162 - index: 4,  
163 - name: '待激活',  
164 - bgColor: '#F6F6F6',  
165 - textColor: '#F6F6F6'  
166 - }  
167 - ],  
168 - alertStatus: [  
169 - {  
170 - index: 1,  
171 - name: '全部',  
172 - bgColor: '#377DFF',  
173 - textColor: '#377DFF'  
174 - },  
175 - {  
176 - index: 2,  
177 - name: '告警',  
178 - bgColor: '#F6F6F6',  
179 - textColor: '#F6F6F6'  
180 - },  
181 - {  
182 - index: 3,  
183 - name: '正常',  
184 - bgColor: '#F6F6F6',  
185 - textColor: '#F6F6F6'  
186 - }  
187 - ],  
188 - typeStatus: [  
189 - {  
190 - index: 1,  
191 - name: '全部',  
192 - bgColor: '#377DFF',  
193 - textColor: '#377DFF'  
194 - },  
195 - {  
196 - index: 2,  
197 - name: '网关设备',  
198 - bgColor: '#F6F6F6',  
199 - textColor: '#F6F6F6'  
200 - },  
201 - {  
202 - index: 3,  
203 - name: '网关子设备',  
204 - bgColor: '#F6F6F6',  
205 - textColor: '#F6F6F6'  
206 - },  
207 - {  
208 - index: 4,  
209 - name: '直连设备',  
210 - bgColor: '#F6F6F6',  
211 - textColor: '#F6F6F6'  
212 - }  
213 - ],  
214 - list: [  
215 - {  
216 - name1: '1号楼1楼三单元水表',  
217 - name2: '设备编号：SN987633433',  
218 - name3: '所属组:XXXXXX',  
219 - name4: '../../static/online.png',  
220 - name5: '在线',  
221 - id: 'xx1'  
222 - },  
223 - {  
224 - name1: '2号楼1楼三单元水表',  
225 - name2: '设备编号：SN987633433',  
226 - name3: '所属组:XXXXXX',  
227 - name4: '../../static/online.png',  
228 - name5: '在线',  
229 - id: 'xx2'  
230 - },  
231 - {  
232 - name1: '3号楼1楼三单元水表',  
233 - name2: '设备编号：SN987633433',  
234 - name3: '所属组:XXXXXX',  
235 - name4: '../../static/baojing.png',  
236 - name5: '离线',  
237 - id: 'xx3'  
238 - },  
239 - {  
240 - name1: '4号楼1楼三单元水表',  
241 - name2: '设备编号：SN987633433',  
242 - name3: '所属组:XXXXXX',  
243 - name4: '../../static/unonline.png',  
244 - name5: '未激活',  
245 - id: 'xx4'  
246 - },  
247 - {  
248 - name1: '5号楼1楼三单元水表',  
249 - name2: '设备编号：SN987633433',  
250 - name3: '所属组:XXXXXX',  
251 - name4: '../../static/online.png',  
252 - name5: '在线',  
253 - id: 'xx5'  
254 - },  
255 - {  
256 - name1: '6号楼1楼三单元水表',  
257 - name2: '设备编号：SN987633433',  
258 - name3: '所属组:XXXXXX',  
259 - name4: '../../static/online.png',  
260 - name5: '在线',  
261 - id: 'xx5'  
262 - }  
263 - ]  
264 - };  
265 - },  
266 - onLoad() {  
267 - // 隐藏原生的tabbar  
268 - uni.hideTabBar();  
269 - },  
270 - methods: {  
271 - /*下拉刷新的回调 */  
272 - downCallback() {  
273 - //联网加载数据  
274 - this.loadData(1)  
275 - },  
276 - /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */  
277 - upCallback(page) {  
278 - //联网加载数据  
279 - this.loadData(page.num)  
280 - },  
281 - //获取设备  
282 - loadData(pageNo) {  
283 - let httpData = {  
284 - page: pageNo,  
285 - pageSize: 10,  
286 - }  
287 - uni.$u.http.get('/yt/device', {params: httpData, custom: {load:false}}).then(res => {  
288 - uni.stopPullDownRefresh();  
289 - console.log('获取后端数据',res);  
290 - //方法一(推荐): 后台接口有返回列表的总页数 totalPage  
291 - // this.mescroll.endByPage(res.length, res.pages); //必传参数(当前页的数据个数, 总页数)  
292 - // if (pageNo == 1) {  
293 - // this.list = res  
294 - // } else {  
295 - // this.list = this.list.concat(res);  
296 - // }  
297 - }).catch(() => {  
298 - //联网失败, 结束加载  
299 - this.mescroll.endErr();  
300 - });  
301 - },  
302 - openOrg() {  
303 - uni.navigateTo({  
304 - url: './org/org'  
305 - });  
306 - },  
307 - open() {},  
308 - close() {  
309 - this.show = false;  
310 - },  
311 - openSearchDialog() {  
312 - this.show = true;  
313 - },  
314 - openDeviceDetail(e) {  
315 - console.log(e);  
316 - uni.navigateTo({  
317 - url: 'deviceDetail'  
318 - });  
319 - }  
320 - }  
321 -};  
322 -</script>  
323 -  
324 -<style lang="scss" scoped>  
325 -.device-page {  
326 - // padding: 0rpx 15rpx;  
327 - min-height: 100vh;  
328 - background-color: #f8f9fa;  
329 -}  
330 -.org-sty {  
331 - width: 750rpx;  
332 - height: 150rpx;  
333 - margin-top: 1rpx;  
334 - background-color: #fff;  
335 - display: flex;  
336 - flex-direction: row;  
337 - justify-content: space-between;  
338 - .org-item {  
339 - width: 350rpx;  
340 - height: 200rpx;  
341 - }  
342 -}  
343 -.device-list {  
344 - display: flex;  
345 - flex-direction: column;  
346 - padding-left: 20rpx;  
347 - .list-item {  
348 - width: 713rpx;  
349 - height: 200rpx;  
350 - background-color: #fff;  
351 - margin-top: 24rpx;  
352 - display: flex;  
353 - flex-direction: row;  
354 - border-radius: 10px;  
355 - justify-content: space-between;  
356 - .item {  
357 - margin: 30rpx;  
358 - }  
359 - }  
360 -} 1 +<template>
  2 + <view class="device-page">
  3 + <f-navbar>
  4 + <view class="u-flex" slot="left" style="justify-content: space-between;">
  5 + <view style="width: 580rpx;"><u--input prefixIcon="search" placeholder="输入设备SN或名称搜索" border="surround" shape="circle" @change="inputChanged"></u--input></view>
  6 + <view style="margin-left: 7rpx;">
  7 + <view><text style="color:#333;font-size: 14px;">筛选</text></view>
  8 + </view>
  9 + <view style="margin-left: 7rpx;"><image @click="openSearchDialog" style="width: 40rpx;height: 40rpx;" src="../../static/shaixuan.png" /></view>
  10 + </view>
  11 + </f-navbar>
  12 + <!-- 公共组件-每个页面必须引入 -->
  13 + <public-module></public-module>
  14 + <view class="org-sty">
  15 + <view class="org-item">
  16 + <view class="u-flex" style="margin-top: 26rpx;margin-left: 15rpx;"><text style="color:#333;font-size: 15px;margin-left: 14rpx;">组织关系</text></view>
  17 + <view style="margin-top: 20rpx;margin-left: 15rpx;" class="u-flex" v-if="total">
  18 + <image style="margin-left: 14rpx;width: 30rpx;height: 30rpx;" src="../../static/org.png" />
  19 + <text style="margin-left: 10rpx;color:#666;font-size: 12px;">设备数 : {{ total }}</text>
  20 + </view>
  21 + </view>
  22 + <view class="org-item">
  23 + <image @click="openOrg" style="width: 6px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../static/right-arrow.png" />
  24 + </view>
  25 + </view>
  26 + <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
  27 + <view class="device-list">
  28 + <view @click="openDeviceDetail(item.id)" class="list-item" v-for="item in list" :key="item.id">
  29 + <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;">
  30 + <view style="width: 450rpx;text-align: left;">
  31 + <text style="color:#333;font-size: 15px;">{{ item.name ? `设备名称:${item.name}` : '' }}</text>
  32 + </view>
  33 + <view style="width: 450rpx;text-align: left; margin-top: 10rpx;">
  34 + <text style="color:#666;font-size: 15px;">{{ item.sn ? `设备编号:${item.sn}` : '' }}</text>
  35 + </view>
  36 + <view style="width: 450rpx;text-align: left; margin-top: 10rpx;">
  37 + <text style="color:#666;font-size: 15px;">{{ item.organizationDTO.name ? `所属组织:${item.organizationDTO.name}` : '' }}</text>
  38 + </view>
  39 + </view>
  40 + <view class="item">
  41 + <view class="u-flex" style="margin-top: -6rpx;">
  42 + <image
  43 + style="width: 30rpx;height: 30rpx;margin-top: 5rpx;margin-right: 5rpx;"
  44 + :src="item.deviceState === 'ONLINE' ? '../../static/online.png' : item.deviceState === 'INACTIVE' ? '../../static/secondary.png' : '../../static/baojing.png'"
  45 + />
  46 +
  47 + <view>
  48 + <text style="color: #377DFF;font-size: 13px;margin-left: 5rpx;margin-top: 20rpx;">
  49 + {{ item.deviceState === 'ONLINE' ? '在线' : item.deviceState === 'INACTIVE' ? '待激活' : '离线' }}
  50 + </text>
  51 + </view>
  52 + </view>
  53 + </view>
  54 + </view>
  55 + </view>
  56 + </mescroll-body>
  57 + <!-- 设备筛选 -->
  58 + <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20">
  59 + <view>
  60 + <view style="text-align: center;margin-top: 28rpx;"><text>筛选条件</text></view>
  61 +
  62 + <FilterItem :filterList="deviceStatus" title="设备状态" @clickTag="currentIndex => handleClickTag(currentIndex, deviceStatus)"></FilterItem>
  63 + <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
  64 + <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem>
  65 + <view class="u-flex" style="margin-top:40rpx;margin-left: 55rpx;">
  66 + <view style="width: 300rpx"><u-button type="info" shape="circle" text="重置" @click="resetFilter"></u-button></view>
  67 + <view style="width: 300rpx;margin-left:46rpx;"><u-button type="primary" shape="circle" text="确认" @click="confirmFilter"></u-button></view>
  68 + </view>
  69 + </view>
  70 + </u-popup>
  71 + <f-tabbar></f-tabbar>
  72 + </view>
  73 +</template>
  74 +
  75 +<script>
  76 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  77 +import fNavbar from '@/components/module/f-navbar/f-navbar';
  78 +import FilterItem from './FilterItem.vue';
  79 +import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
  80 +import {debounce} from '@/plugins/throttle.js'
  81 +export default {
  82 + mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
  83 + components: {
  84 + fTabbar,
  85 + fNavbar,
  86 + FilterItem
  87 + },
  88 + data() {
  89 + return {
  90 + downOption: {
  91 + auto: false //是否在初始化后,自动执行downCallback; 默认true
  92 + },
  93 + show: false,
  94 + deviceStatus: [
  95 + {
  96 + checked: true,
  97 + name: '全部',
  98 + type: ''
  99 + },
  100 + {
  101 + checked: false,
  102 + name: '在线',
  103 + type: 'ONLINE'
  104 + },
  105 + {
  106 + checked: false,
  107 + name: '离线',
  108 + type: 'OFFLINE'
  109 + },
  110 + {
  111 + checked: false,
  112 + name: '待激活',
  113 + type: 'INACTIVE'
  114 + }
  115 + ],
  116 + alarmStatus: [
  117 + {
  118 + checked: true,
  119 + name: '全部',
  120 + type: ''
  121 + },
  122 + {
  123 + checked: false,
  124 + name: '告警',
  125 + type: '1'
  126 + },
  127 + {
  128 + checked: false,
  129 + name: '正常',
  130 + type: '0'
  131 + }
  132 + ],
  133 + typeStatus: [
  134 + {
  135 + checked: true,
  136 + name: '全部',
  137 + type: ''
  138 + },
  139 + {
  140 + checked: false,
  141 + name: '直连设备',
  142 + type: 'DIRECT_CONNECTION'
  143 + },
  144 + {
  145 + checked: false,
  146 + name: '网关设备',
  147 + type: 'GATEWAY'
  148 + },
  149 + {
  150 + checked: false,
  151 + name: '网关子设备',
  152 + type: 'SENSOR'
  153 + }
  154 + ],
  155 + total: 0,
  156 + list: [],
  157 + };
  158 + },
  159 + onLoad() {
  160 + // 隐藏原生的tabbar
  161 + uni.hideTabBar();
  162 + },
  163 + methods: {
  164 + /*下拉刷新的回调 */
  165 + downCallback() {
  166 + //联网加载数据
  167 + this.loadData(1);
  168 + },
  169 + /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  170 + upCallback(page) {
  171 + //联网加载数据
  172 + console.log(page);
  173 + this.loadData(page.num);
  174 + },
  175 +
  176 + //获取设备
  177 + loadData(pageNo, params = {}) {
  178 + let httpData = {
  179 + page: pageNo,
  180 + pageSize: 10,
  181 + ...params
  182 + };
  183 + uni.$u.http
  184 + .get('/yt/device', {
  185 + params: httpData,
  186 + custom: {
  187 + load: false
  188 + }
  189 + })
  190 + .then(res => {
  191 + this.total = res.total;
  192 + uni.stopPullDownRefresh();
  193 + console.log('获取后端数据', res);
  194 + //方法一(推荐): 后台接口有返回列表的总页数 totalPage
  195 + this.mescroll.endByPage(res.total, Math.ceil(res.total / 10)); //必传参数(当前页的数据个数, 总页数)
  196 + if (pageNo == 1) {
  197 + this.list = res.items;
  198 + } else {
  199 + this.list = this.list.concat(res.items);
  200 + }
  201 + })
  202 + .catch(() => {
  203 + //联网失败, 结束加载
  204 + this.mescroll.endErr();
  205 + });
  206 + },
  207 + openOrg() {
  208 + uni.navigateTo({
  209 + url: './org/org'
  210 + });
  211 + },
  212 + close() {
  213 + this.resetFilter();
  214 + this.show = false;
  215 + },
  216 + openSearchDialog() {
  217 + this.show = true;
  218 + },
  219 + openDeviceDetail(id) {
  220 + uni.navigateTo({
  221 + url: `deviceDetail?id=${id}`
  222 + });
  223 + },
  224 + handleClickTag(currentIndex, list) {
  225 + list.map((item, index) => {
  226 + item.checked = index === currentIndex;
  227 + });
  228 + },
  229 + resetFilter() {
  230 + const { deviceStatus, alarmStatus, typeStatus } = this;
  231 + [deviceStatus, alarmStatus, typeStatus].forEach(item => item.map((item, index) => (item.checked = index === 0)));
  232 + },
  233 + confirmFilter() {
  234 + const deviceState = this.deviceStatus.find(item => item.checked);
  235 + const alarmStatus = this.alarmStatus.find(item => item.checked);
  236 + const deviceType = this.typeStatus.find(item => item.checked);
  237 + this.loadData(1, {
  238 + deviceState: deviceState.type ? deviceState.type : undefined,
  239 + deviceType: deviceType.type ? deviceType.type : undefined,
  240 + alarmStatus: alarmStatus.type === '0' || alarmStatus.type === '1' ? alarmStatus.type : undefined
  241 + });
  242 + this.show = false;
  243 + },
  244 + inputChanged:debounce(function(name){
  245 + this.loadData(1,{
  246 + name
  247 + })
  248 + },500)
  249 + }
  250 +};
  251 +</script>
  252 +
  253 +<style lang="scss" scoped>
  254 +.device-page {
  255 + min-height: 100vh;
  256 + background-color: #f8f9fa;
  257 +}
  258 +
  259 +.org-sty {
  260 + width: 750rpx;
  261 + height: 150rpx;
  262 + margin-top: 1rpx;
  263 + background-color: #fff;
  264 + display: flex;
  265 + justify-content: space-between;
  266 +
  267 + .org-item {
  268 + width: 350rpx;
  269 + height: 200rpx;
  270 + }
  271 +}
  272 +
  273 +.device-list {
  274 + display: flex;
  275 + flex-direction: column;
  276 + padding-left: 20rpx;
  277 +
  278 + .list-item {
  279 + width: 713rpx;
  280 + height: 200rpx;
  281 + background-color: #fff;
  282 + margin-top: 24rpx;
  283 + display: flex;
  284 + border-radius: 10px;
  285 + justify-content: space-between;
  286 +
  287 + .item {
  288 + margin: 30rpx;
  289 + }
  290 + }
  291 +}
361 </style> 292 </style>
1 -<template>  
2 - <view class="device-detail-page">  
3 - <!-- 公共组件-每个页面必须引入 -->  
4 - <public-module></public-module>  
5 - <tab :lists="lists" :tab_color="tab_color" @switchover="switchover" :gauge="gauge"></tab>  
6 - <view style="margin-top:140rpx;" v-show="showTabPage == 1"><basicInfo /></view>  
7 - <view style="margin-top:140rpx;" v-show="showTabPage == 2"><realTimeData /></view>  
8 - <view style="margin-top:140rpx;" v-show="showTabPage == 3"><historyData /></view>  
9 - <view style="margin-top:140rpx;" v-show="showTabPage == 4"><alertHistory /></view>  
10 - <view style="margin-top:140rpx;" v-show="showTabPage == 5"><commondRecord /></view>  
11 - <f-tabbar></f-tabbar>  
12 - </view>  
13 -</template>  
14 -  
15 -<script>  
16 -import fTabbar from '@/components/module/f-tabbar/f-tabbar';  
17 -import Tab from '@/components/yyh-tab/Tab.vue';  
18 -import basicInfo from './tabDetail/basicInfo.vue';  
19 -import realTimeData from './tabDetail/realtimeData.vue';  
20 -import alertHistory from './tabDetail/alertHistory.vue';  
21 -import historyData from './tabDetail/historyData.vue';  
22 -import commondRecord from './tabDetail/commondRecord.vue';  
23 -  
24 -export default {  
25 - components: {  
26 - fTabbar,  
27 - Tab,  
28 - basicInfo,  
29 - realTimeData,  
30 - alertHistory,  
31 - historyData,  
32 - commondRecord  
33 - },  
34 - data() {  
35 - return {  
36 - lists: [{ id: 1, name: '基础信息' }, { id: 2, name: '实时数据' }, { id: 3, name: '历史数据' }, { id: 4, name: '告警记录' }, { id: 5, name: '命令记录' }],  
37 - //tab切换选中的颜色  
38 - tab_color: '#3b87f6',  
39 - // tab组件position: fixed布局距离头部的位置大小（rpx）  
40 - gauge: 0,  
41 - showTabPage: 1  
42 - };  
43 - },  
44 - onLoad(e) {  
45 - // 隐藏原生的tabbar  
46 - uni.hideTabBar();  
47 - },  
48 - methods: {  
49 - switchover: function(id) {  
50 - console.log(id);  
51 - this.showTabPage = id;  
52 - }  
53 - }  
54 -};  
55 -</script>  
56 -  
57 -<style lang="scss" scoped>  
58 -.device-detail-page {  
59 -}  
60 -</style> 1 +<template>
  2 + <view class="device-detail-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <u-sticky bgColor="#fff"><u-tabs :list="list" :current="currentTab" @click="handleTabClick"></u-tabs></u-sticky>
  6 + <view style="margin-top:30rpx;" v-show="currentTab == 0"><basicInfo /></view>
  7 + <view style="margin-top:30rpx;" v-show="currentTab == 1"><realTimeData /></view>
  8 + <view style="margin-top:30rpx;" v-show="currentTab == 2"><historyData /></view>
  9 + <view style="margin-top:30rpx;" v-show="currentTab == 3"><alertHistory /></view>
  10 + <view style="margin-top:30rpx;" v-show="currentTab == 4"><commondRecord /></view>
  11 + <f-tabbar></f-tabbar>
  12 + </view>
  13 +</template>
  14 +
  15 +<script>
  16 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  17 +import Tab from '@/components/yyh-tab/Tab.vue';
  18 +import basicInfo from './tabDetail/basicInfo.vue';
  19 +import realTimeData from './tabDetail/realtimeData.vue';
  20 +import alertHistory from './tabDetail/alertHistory.vue';
  21 +import historyData from './tabDetail/historyData.vue';
  22 +import commondRecord from './tabDetail/commondRecord.vue';
  23 +
  24 +export default {
  25 + components: {
  26 + fTabbar,
  27 + Tab,
  28 + basicInfo,
  29 + realTimeData,
  30 + alertHistory,
  31 + historyData,
  32 + commondRecord
  33 + },
  34 + data() {
  35 + return {
  36 + list: [{ name: '基础信息' }, { name: '实时数据' }, { name: '历史数据' }, { name: '告警记录' }, { name: '命令记录' }],
  37 + currentTab:0,
  38 + id: '',
  39 + };
  40 + },
  41 + onLoad(options) {
  42 + const { id } = options;
  43 + this.id = id;
  44 + console.log(this.id);
  45 + // 隐藏原生的tabbar
  46 + uni.hideTabBar();
  47 + },
  48 + methods: {
  49 + handleTabClick({index}){
  50 + this.currentTab = index;
  51 + }
  52 + }
  53 +};
  54 +</script>
1 <template> 1 <template>
2 <view class="basic-page"> 2 <view class="basic-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 - <public-module></public-module>  
5 - <view class="u-flex" style="flex-direction: row;justify-content: space-between;align-items: center;height: 150rpx;background-color: #fff;border-radius: 20px;">  
6 - <view style="margin-left: 28rpx;"><text style="color:#333333;font-size: 15px;">网关设备1</text></view>  
7 - <view style="margin-left: -295rpx;"><text style="color:#377DFF;font-size: 14px;">在线</text></view>  
8 - <view style="height: 80rpx;margin-top: 39rpx;margin-right: 30rpx;">  
9 - <u-button @click="showIssueModel" size="mini" type="primary" shape="circle" text="下发命令"></u-button> 4 + <public-module />
  5 + <view class="u-flex" style="justify-content: space-between;height: 140rpx;background-color: #fff;border-radius: 18px;">
  6 + <view class="u-flex">
  7 + <view style="margin-left: 20rpx;">
  8 + 网关设备1
  9 + </view>
  10 + <view style="margin-left: 20rpx; font-size: 14px;color:#377DFF;">
  11 + 在线
  12 + </view>
  13 + </view>
  14 + <view style="margin-right: 20rpx;">
  15 + <u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModal"/>
10 </view> 16 </view>
11 </view> 17 </view>
12 - <view style="margin-top: 74rpx;height: 577rpx;background-color: #fff;border-radius: 20px;">  
13 - <u-list @scrolltolower="scrolltolower">  
14 - <u-list-item v-for="(item, index) in indexList" :key="index"><u-cell :value="item.value1" :title="item.name1"></u-cell></u-list-item> 18 + <view style="margin-top: 40rpx;height: 577rpx;background-color: #fff;border-radius: 20px;">
  19 + <u-list>
  20 + <u-list-item v-for="(item, index) in indexList" :key="index">
  21 + <u-cell :title="item.name1">
  22 + <view slot="icon">{{item.name1}}</view>
  23 + </u-cell>
  24 + </u-list-item>
15 </u-list> 25 </u-list>
16 </view> 26 </view>
17 <!-- 下发指令 --> 27 <!-- 下发指令 -->
18 - <u-modal :showConfirmButton="false" :show="showModel" :title="title">  
19 - <view style="width: 750rpx;">  
20 - <view style="height: 276rpx;border:0.1rpx solid #F0F0F0">  
21 - <u-form labelPosition="left" :model="formModel" :rules="rules" ref="form1">  
22 - <u-form-item label="." prop="intro" ref="item3">  
23 - <u--textarea border="none" placeholder="请输入命令内容" v-model="formModel.intro" count></u--textarea>  
24 - </u-form-item>  
25 - </u-form>  
26 - </view>  
27 - <view class="u-flex" style="justify-content: space-between;margin-top: -20rpx;">  
28 - <view style="width: 220rpx;"><u-button shape="circle" type="info" text="取消" customStyle="margin-top: 50px" @click="cancel"></u-button></view>  
29 - <view style="width: 220rpx;"><u-button shape="circle" type="primary" text="确定" customStyle="margin-top: 50px" @click="submit"></u-button></view>  
30 - </view>  
31 - </view> 28 + <u-modal :show="showModel" title="命令下发" closeOnClickOverlay showCancelButton @close="hiddenModal" @cancel="hiddenModal" @confirm="handleConfirm" >
  29 + <u--textarea placeholder="请输入命令内容" v-model="formModel.intro" count />
32 </u-modal> 30 </u-modal>
33 - <f-tabbar></f-tabbar> 31 + <f-tabbar />
34 </view> 32 </view>
35 </template> 33 </template>
36 34
37 <script> 35 <script>
38 -import fTabbar from '@/components/module/f-tabbar/f-tabbar'; 36 +
39 export default { 37 export default {
40 - components: {  
41 - fTabbar  
42 - },  
43 data() { 38 data() {
44 return { 39 return {
45 formModel: { 40 formModel: {
46 intro: '' 41 intro: ''
47 }, 42 },
48 showModel: false, 43 showModel: false,
49 - title: '命令下发',  
50 indexList: [ 44 indexList: [
51 { 45 {
52 id: 1, 46 id: 1,
@@ -81,23 +75,15 @@ export default { @@ -81,23 +75,15 @@ export default {
81 uni.hideTabBar(); 75 uni.hideTabBar();
82 }, 76 },
83 methods: { 77 methods: {
84 - showIssueModel() { 78 + showModal() {
85 this.showModel = true; 79 this.showModel = true;
  80 + },
  81 + hiddenModal(){
  82 + this.showModel = false;
86 }, 83 },
87 - cancel() {  
88 - this.showModel = false;  
89 - },  
90 - submit() {} 84 + handleConfirm(){
  85 + console.log('确定')
  86 + }
91 } 87 }
92 }; 88 };
93 </script> 89 </script>
94 -  
95 -<style lang="scss" scoped>  
96 -.basic-page {  
97 - padding: 15rpx;  
98 -}  
99 -  
100 -/deep/ .u-form-item {  
101 - margin-left: -89rpx;  
102 -}  
103 -</style>  
  1 +/**
  2 + * 防抖函数 防止多次点击执行多次方法，可用于防重复提交
  3 + */
  4 +const debounce = (fn,delay = 100,promptly) => {
  5 + let timer = null;
  6 +
  7 + return function(...args) {
  8 + // 立即执行
  9 + if(promptly) {
  10 + // 当timer为null时执行
  11 + if(!timer) fn.apply(this,args);
  12 + if(timer) {
  13 + clearTimeout(timer)
  14 + }
  15 + timer = setTimeout(() => {
  16 + timer = null;
  17 + },delay)
  18 + }else {
  19 + if(timer) {
  20 + clearTimeout(timer)
  21 + }
  22 + timer = setTimeout(() => {
  23 + fn.apply(this,args);
  24 + },delay)
  25 + }
  26 + }
  27 +}
  28 +
  29 +/**
  30 + * 节流函数 每间隔设置时间执行一次，可用于页面滚动执行操作
  31 + */
  32 +const throttle = (fn,delay = 100) => {
  33 + let valid = true;
  34 + return function(...args) {
  35 + if(!valid) {
  36 + return
  37 + }
  38 + valid = false;
  39 + fn.apply(this,args)
  40 + setTimeout(() => {
  41 + valid = true
  42 + },delay)
  43 + }
  44 +}
  45 +
  46 +export {
  47 + debounce,
  48 + throttle
  49 +}