简柏林 / 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 7 // 初始化请求配置
8 8 uni.$u.http.setConfig((config) => {
9 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 10 // #ifdef H5
14 11 window.sessionStorage.getItem('userInfo');
15 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 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>
\ No newline at end of file
... ...
1 1 <template>
2 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 16 </view>
11 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 25 </u-list>
16 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 30 </u-modal>
33   - <f-tabbar></f-tabbar>
  31 + <f-tabbar />
34 32 </view>
35 33 </template>
36 34
37 35 <script>
38   -import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  36 +
39 37 export default {
40   - components: {
41   - fTabbar
42   - },
43 38 data() {
44 39 return {
45 40 formModel: {
46 41 intro: ''
47 42 },
48 43 showModel: false,
49   - title: '命令下发',
50 44 indexList: [
51 45 {
52 46 id: 1,
... ... @@ -81,23 +75,15 @@ export default {
81 75 uni.hideTabBar();
82 76 },
83 77 methods: {
84   - showIssueModel() {
  78 + showModal() {
85 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 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 +}
\ No newline at end of file
... ...