简柏林 / thingskit-app · Commits

Commit 3fea14701abedea125c2b0ed50e68801989cd24d

Authored by xp.Huang
2 parents 859199c5 54bbd6c9

Merge branch 'sqy_dev' into 'main' 

fix:合并主分支代码以及解决冲突

See merge request huang/thingskit-app!19
Inline Side-by-side
Showing 11 changed files with 711 additions and 921 deletions
1   -<template>
2   - <view >
3   - <view class="tab" :style="{'top':gauge+'rpx'}">
4   - <scroll-view class="tab_scroll" :scroll-x="true" :scroll-into-view="intoindex">
5   - <view :class="tab_index==index?'tab_scroll_list':'tab_scroll_lists'" :id='"tab"+index'
6   - :style="{'color':tab_index==index?tab_color:''}" v-for="(item,index) in lists" :key="index"
7   - @tap="cut(index,item.id)">
8   - {{item.name}}
9   - </view>
10   - <!-- 占位符 -->
11   - <view class="tab_scroll_list"></view>
12   - </scroll-view>
13   - <!-- 多个tab时显示下拉框 -->
14   - <view class="pull" v-if="lists.length>6" @tap="open">
15   - <image src="../../static/img/pull.png"></image>
16   - </view>
17   - </view>
18   - <!-- 遮挡弹出 -->
19   - <view class="popup" v-show="or">
20   - </view>
21   - <view :class="or?'popup_list':'popup_lists'" :style="{'top':gauge+100+'rpx'}">
22   - <view class="label" v-show="or_text">
23   - <scroll-view class="label_scroll" :scroll-y="true">
24   - <view class="label_list" v-for="(item,index) in lists" :key="index"
25   - :style="{'background':tab_index==index?tab_color:''}" @tap="cut(index,item.id)">
26   - {{item.name}}
27   - </view>
28   - </scroll-view>
29   -
30   - </view>
31   - </view>
32   - </view>
33   -</template>
34   -
35   -<script>
36   - export default {
37   - name: "Tab",
38   - data() {
39   - return {
40   - //tab选中的下标
41   - tab_index: 0,
42   - //是否开启下拉
43   - or: false,
44   - or_text: false,
45   - intoindex: ''
46   - };
47   - },
48   - props: {
49   - lists: {
50   - type: Array,
51   - default: []
52   - },
53   - tab_color: {
54   - type: String,
55   - default: ''
56   - },
57   - gauge:{
58   - type:Number,
59   - default:0
60   - }
61   - },
62   - methods: {
63   - cut: function(ind,id) {
64   - var that = this;
65   - that.tab_index = ind;
66   - that.or = false;
67   - that.or_text = false;
68   - that.$nextTick(() => {
69   - that.intoindex = "tab" + ind
70   - });
71   - that.intoindex = ''
72   - that.$emit('switchover',id)
73   - },
74   - // 打开下拉
75   - open: function() {
76   - var that = this;
77   - that.or = !that.or;
78   - if (that.or) {
79   - setTimeout(() => {
80   - // 这里添加您的逻辑
81   - that.or_text = true;
82   - }, 300)
83   - } else {
84   - that.or_text = false;
85   - }
86   - }
87   - }
88   - }
89   -</script>
90   -
91   -<style lang="scss">
92   - .tab {
93   - width: 100%;
94   - padding: 0rpx 30rpx;
95   - box-sizing: border-box;
96   - border-bottom: 2rpx solid #e7e7e7;
97   - position: fixed;
98   - background: #fff;
99   - z-index: 99;
100   - .tab_scroll {
101   - width: 100%;
102   - height: 100rpx;
103   - white-space: nowrap;
104   - line-height: 100rpx;
105   -
106   - .tab_scroll_list {
107   - display: inline-block;
108   - font-size: 28rpx;
109   - margin-right: 40rpx;
110   - position: relative;
111   - }
112   -
113   - .tab_scroll_lists {
114   - display: inline-block;
115   - font-size: 28rpx;
116   - margin-right: 40rpx;
117   - position: relative;
118   - }
119   -
120   - .tab_scroll_list:after {
121   - position: absolute;
122   - bottom: 0;
123   - text-align: center;
124   - left: 46%;
125   -
126   - content: "";
127   - width: 20rpx;
128   - height: 4rpx;
129   - border-top: 4rpx solid #3b87f6;
130   - }
131   - }
132   -
133   - .pull {
134   - width: 80rpx;
135   - height: 98rpx;
136   - position: absolute;
137   - right: 0rpx;
138   - top: 0rpx;
139   - z-index: 999;
140   - background: #fff;
141   - box-shadow: #000 -5rpx 0px 5px -5px;
142   - display: flex;
143   - justify-content: center;
144   - align-items: center;
145   -
146   - image {
147   - width: 30rpx;
148   - height: 30rpx;
149   - }
150   - }
151   -
152   - }
153   -
154   - .popup {
155   - width: 100%;
156   - height: 100vh;
157   - background: rgba(0, 0, 0, .5);
158   - position: absolute;
159   - top: 0rpx;
160   - z-index: 10;
161   - }
162   -
163   - .popup_list {
164   - width: 100%;
165   - height: 280rpx;
166   - background: #fff;
167   - transition: height .5s;
168   - padding: 0rpx 30rpx;
169   - box-sizing: border-box;
170   - position: fixed;
171   - z-index: 99;
172   - .label {
173   - width: 100%;
174   -
175   - .label_scroll {
176   - width: 100%;
177   - height: 280rpx;
178   - padding: 20rpx 0rpx;
179   - box-sizing: border-box;
180   -
181   - .label_list {
182   - font-size: 28rpx;
183   - color: #fff;
184   - padding: 10rpx 10rpx;
185   - border-radius: 50rpx;
186   - background: #C0C0C0;
187   - display: inline-block;
188   - margin-top: 20rpx;
189   - margin-right: 20rpx;
190   - }
191   - }
192   -
193   - }
194   -
195   -
196   - }
197   -
198   - .popup_lists {
199   - width: 100%;
200   - height: 0rpx;
201   - background: #fff;
202   - transition: height .5s;
203   - padding: 0rpx 30rpx;
204   - box-sizing: border-box;
205   - position: fixed;
206   - z-index: 99;
207   - }
208   -</style>
... ... @@ -5,8 +5,8 @@ let baseUrl = "";
5 5 let imageUrl = ''
6 6 if (process.env.NODE_ENV === 'development') {
7 7 // 开发环境
8   - // baseUrl = 'http://47.99.141.212:8080/api'
9   - baseUrl = 'http://192.168.10.103:8080/api'
  8 + baseUrl = 'http://47.99.141.212:8080/api'
  9 + // baseUrl = 'http://192.168.10.103:8080/api'
10 10 imageUrl='http://192.168.10.103:8080/api'
11 11 // baseUrl = 'http://192.168.1.228/fan_php/public/index.php'
12 12 } else if (process.env.NODE_ENV === 'production') {
... ...
  1 +// 获取某个Key的历史数据
  2 +export function getHistroyData(params) {
  3 + return uni.$u.http.get({
  4 + url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
  5 + params: {
  6 + ...params,
  7 + entityId: null,
  8 + orderBy: 'ASC'
  9 + }
  10 + });
  11 +}
  12 +
  13 +// 获取当前设备的key
  14 +export function getDeviceKeys(id) {
  15 + return uni.$u.http.get(`/plugins/telemetry/DEVICE/${id}/keys/timeseries`);
  16 +};
... ...
... ... @@ -11,7 +11,7 @@
11 11 </f-navbar>
12 12 <!-- 公共组件-每个页面必须引入 -->
13 13 <public-module></public-module>
14   - <view class="org-sty">
  14 + <view class="org-sty" @click="openOrg">
15 15 <view class="org-item">
16 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 17 <view style="margin-top: 20rpx;margin-left: 15rpx;" class="u-flex" v-if="total">
... ... @@ -20,12 +20,12 @@
20 20 </view>
21 21 </view>
22 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" />
  23 + <image style="width: 6px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../static/right-arrow.png" />
24 24 </view>
25 25 </view>
26 26 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback" >
27 27 <view class="device-list">
28   - <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime)" class="list-item" v-for="item in list" :key="item.id">
  28 + <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime,item.tbDeviceId)" class="list-item" v-for="item in list" :key="item.id">
29 29 <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;">
30 30 <view style="width: 450rpx;text-align: left;">
31 31 <text style="color:#333;font-size: 15px;">{{ item.name ? `设备名称:${item.name}` : '' }}</text>
... ... @@ -160,6 +160,13 @@ export default {
160 160 // 隐藏原生的tabbar
161 161 uni.hideTabBar();
162 162 },
  163 + onShow(){
  164 + if(this.orgId){
  165 + this.loadData(1,{
  166 + organizationId:this.orgId
  167 + })
  168 + }
  169 + },
163 170 methods: {
164 171 /*下拉刷新的回调 */
165 172 downCallback() {
... ... @@ -216,9 +223,9 @@ export default {
216 223 openSearchDialog() {
217 224 this.show = true;
218 225 },
219   - openDeviceDetail(id, alarmStatus, lastOnlineTime) {
  226 + openDeviceDetail(id, alarmStatus, lastOnlineTime,tbDeviceId) {
220 227 uni.navigateTo({
221   - url: `deviceDetail?id=${id}&alarmStatus=${alarmStatus}&lastOnlineTime=${lastOnlineTime}`
  228 + url: `deviceDetail?id=${id}&alarmStatus=${alarmStatus}&lastOnlineTime=${lastOnlineTime}&tbDeviceId=${tbDeviceId}`
222 229 });
223 230 },
224 231 handleClickTag(currentIndex, list) {
... ...
... ... @@ -4,11 +4,11 @@
4 4 <public-module></public-module>
5 5 <u-sticky bgColor="#fff"><u-tabs :list="list" :current="currentTab" @click="handleTabClick"></u-tabs></u-sticky>
6 6 <view style="margin-top:30rpx;">
7   - <basicInfo v-show="currentTab == 0" :deviceDetail="deviceDetail" />
8   - <realTimeData v-show="currentTab === 1" />
9   - <historyData v-show="currentTab == 2" />
10   - <alarmHistory v-show="currentTab == 3" />
11   - <commondRecord v-show="currentTab == 4" />
  7 + <basicInfo v-if="currentTab == 0" :deviceDetail="deviceDetail" />
  8 + <realTimeData v-if="currentTab === 1" />
  9 + <historyData v-if="currentTab === 2" :keys="keys" />
  10 + <alarmHistory v-if="currentTab === 3" />
  11 + <commondRecord v-if="currentTab === 4" />
12 12 </view>
13 13 <f-tabbar></f-tabbar>
14 14 </view>
... ... @@ -16,17 +16,15 @@
16 16
17 17 <script>
18 18 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
19   -import Tab from '@/components/yyh-tab/Tab.vue';
20 19 import basicInfo from './tabDetail/basicInfo.vue';
21 20 import realTimeData from './tabDetail/realtimeData.vue';
22 21 import alarmHistory from './tabDetail/alarmHistory.vue';
23 22 import historyData from './tabDetail/historyData.vue';
24 23 import commondRecord from './tabDetail/commondRecord.vue';
25   -
  24 +import { getDeviceKeys } from './api/index.js';
26 25 export default {
27 26 components: {
28 27 fTabbar,
29   - Tab,
30 28 basicInfo,
31 29 realTimeData,
32 30 alarmHistory,
... ... @@ -36,50 +34,55 @@ export default {
36 34 data() {
37 35 return {
38 36 list: [{ name: '基础信息' }, { name: '实时数据' }, { name: '历史数据' }, { name: '告警记录' }, { name: '命令记录' }],
39   - currentTab: 2,
  37 + currentTab: 0,
40 38 id: '',
41   - deviceDetail: {}
  39 + deviceDetail: {},
  40 + keys:[]
42 41 };
43 42 },
44 43 async onLoad(options) {
45   - const { id, alarmStatus, lastOnlineTime } = options;
  44 + const { id, alarmStatus, lastOnlineTime, tbDeviceId } = options;
46 45 const res = await uni.$u.http.get(`/yt/device/${id}`);
47 46 this.deviceDetail = { ...res, alarmStatus, lastOnlineTime };
48 47
49   - var socketTask = uni.connectSocket({
50   - url: 'wss://dev.thingskit.com:8080/api/ws/plugins/telemetry?token=' + uni.getStorageSync('userInfo').isToken, //仅为示例，并非真实接口地址。
51   - complete: ()=> {}
52   - });
53   - uni.onSocketOpen((header)=>{
54   - console.log('连接成功',header)
55   - })
56   - // socketTask.onMessage(function(data) {
57   - // console.log('收到消息了', data);
  48 + // var socketTask = uni.connectSocket({
  49 + // url: 'wss://dev.thingskit.com:8080/api/ws/plugins/telemetry?token=' + uni.getStorageSync('userInfo').isToken, //仅为示例，并非真实接口地址。
  50 + // complete: ()=> {}
  51 + // });
  52 + // uni.onSocketOpen((header)=>{
  53 + // console.log('连接成功',header)
  54 + // })
  55 + // // socketTask.onMessage(function(data) {
  56 + // // console.log('收到消息了', data);
  57 + // // });
  58 + // socketTask.send({
  59 + // data: JSON.stringify({
  60 + // attrSubCmds: [],
  61 + // tsSubCmds: [
  62 + // {
  63 + // entityType: 'DEVICE',
  64 + // entityId: id,
  65 + // scope: 'LATEST_TELEMETRY',
  66 + // cmdId: 1
  67 + // }
  68 + // ],
  69 + // historyCmds: [],
  70 + // entityDataCmds: [],
  71 + // entityDataUnsubscribeCmds: [],
  72 + // alarmDataCmds: [],
  73 + // alarmDataUnsubscribeCmds: [],
  74 + // entityCountCmds: [],
  75 + // entityCountUnsubscribeCmds: []
  76 + // }),
  77 + // success() {
  78 + // console.log('发送成功了');
  79 + // }
58 80 // });
59   - socketTask.send({
60   - data: JSON.stringify({
61   - attrSubCmds: [],
62   - tsSubCmds: [
63   - {
64   - entityType: 'DEVICE',
65   - entityId: id,
66   - scope: 'LATEST_TELEMETRY',
67   - cmdId: 1
68   - }
69   - ],
70   - historyCmds: [],
71   - entityDataCmds: [],
72   - entityDataUnsubscribeCmds: [],
73   - alarmDataCmds: [],
74   - alarmDataUnsubscribeCmds: [],
75   - entityCountCmds: [],
76   - entityCountUnsubscribeCmds: []
77   - }),
78   - success() {
79   - console.log('发送成功了');
80   - }
81   - });
  81 +
  82 +
  83 + const keys = await getDeviceKeys(tbDeviceId);
82 84 // 隐藏原生的tabbar'
  85 + this.keys = [keys]
83 86 uni.hideTabBar();
84 87 },
85 88 methods: {
... ...
... ... @@ -3,7 +3,7 @@
3 3 <!-- 公共组件-每个页面必须引入 -->
4 4 <public-module></public-module>
5 5 <view>
6   - <luyj-tree search-placeholder="请输入搜索内容" :is-check="true" :search-if="true" v-slot:default="{ item }" :max="max" :trees="tree">
  6 + <luyj-tree @sendValue="confirm" :is-check="isCheck" search-placeholder="请输入搜索内容" :search-if="true" v-slot:default="{ item }" :max="max" :trees="tree" :nodes="false">
7 7 <view>
8 8 <view class="content-item">
9 9 <view class="word">{{ item.name }}</view>
... ... @@ -11,26 +11,53 @@
11 11 </view>
12 12 </luyj-tree>
13 13 </view>
14   - <f-tabbar></f-tabbar>
15 14 </view>
16 15 </template>
17 16
18 17 <script>
19 18 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
20   -
  19 +import { transOrgFunc } from '@/config/common.js';
21 20 export default {
22 21 components: {
23 22 fTabbar
24 23 },
25 24 data() {
26 25 return {
  26 + isCheck: true, // 是否可选
27 27 tree: [],
28   - max: 5
  28 + max: 5,
  29 + id: ''
29 30 };
30 31 },
31 32 onLoad(e) {
32 33 // 隐藏原生的tabbar
33 34 uni.hideTabBar();
  35 + this.loadData();
  36 + },
  37 + methods: {
  38 + loadData() {
  39 + uni.$u.http
  40 + .get('/yt/organization/me/list')
  41 + .then(res => {
  42 + if (res) {
  43 + const list = transOrgFunc(res);
  44 + this.tree = list;
  45 + }
  46 + })
  47 + .catch(e => {
  48 + uni.$u.toast(e.data.message);
  49 + });
  50 + },
  51 + confirm(val) {
  52 + this.id = val[0].id;
  53 + let pages = getCurrentPages(); //获取所有页面栈实例列表
  54 + let nowPage = pages[pages.length - 1]; //当前页页面实例
  55 + let prevPage = pages[pages.length - 2]; //上一页页面实例
  56 + prevPage.$vm.orgId = this.id;
  57 + uni.navigateBack({
  58 + delta: 1
  59 + });
  60 + }
34 61 }
35 62 };
36 63 </script>
... ...
1   -<template>
2   - <view class="alert-page">
3   - <!-- 公共组件-每个页面必须引入 -->
4   - <public-module></public-module>
5   - <view style="width: 192rpx;margin: 19rpx;"><u-button @click="openSearchDialog" shape="circle" type="info" icon="search" text="筛选"></u-button></view>
6   - <view class="device-list">
7   - <view @click="openDeviceDetail(item.id)" class="list-item" v-for="(item, index) in list" :key="index">
8   - <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;">
9   - <view style="width: 400rpx;text-align: left;">
10   - <text style="color:#333333;font-size: 15px;">{{ item.name1 }}</text>
11   - </view>
12   - <view style="width: 400rpx;text-align: left;">
13   - <text style="color:#666666;font-size: 15px;">{{ item.name2 }}</text>
14   - </view>
15   - <view style="width: 400rpx;text-align: left;">
16   - <text style="color:#666666;font-size: 15px;">{{ item.name3 }}</text>
17   - </view>
18   - <view style="width: 400rpx;text-align: left;">
19   - <text style="color:#999999;font-size: 15px;">{{ item.time }}</text>
20   - </view>
21   - </view>
22   - <view class="item">
23   - <view class="u-flex" style="flex-direction: row;margin-top: -6rpx;">
24   - <image style="width: 30rpx;height: 30rpx;margin-top: 5rpx;margin-right: 5rpx;" :src="item.name4" mode=""></image>
25   - <view class="">
26   - <text style="color: #377DFF;font-size: 13px;margin-left: 5rpx;margin-top: 20rpx;">{{ item.name5 }}</text>
27   - </view>
28   - </view>
29   - </view>
30   - </view>
31   - </view>
32   - <view style="height: 30rpx;"></view>
33   - <!-- 告警筛选 -->
34   - <u-popup @close="close" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">
35   - <view style="height: 1100rpx;background:#FFFFFF;border-radius: 20rpx;overflow-y: scroll;">
36   - <view style="text-align: center;position: relative;top: 68rpx;margin-top: -40rpx;"><text style="font-size: 16px;color: #333333;">筛选条件</text></view>
37   - <view style="margin-top: 97rpx;margin-left: 43rpx;">
38   - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">告警状态</text></view>
39   - <view
40   - class="u-flex"
41   - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;
42   - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
43   - >
44   - <view
45   - v-for="(item, index) in alertStatus"
46   - :key="index"
47   - style="margin: 10rpx;line-height: 50rpx;text-align: center;
48   - width:180rpx;height: 60rpx;
49   - background-color:#F6F6F6;border-radius:32px"
50   - >
51   - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>
52   - </view>
53   - </view>
54   - </view>
55   - <view style="margin-top: 145rpx;margin-left: 43rpx;">
56   - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">设备类型</text></view>
57   - <view
58   - class="u-flex"
59   - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;
60   - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
61   - >
62   - <view
63   - v-for="(item, index) in deviceType"
64   - :key="index"
65   - style="margin: 10rpx;line-height: 50rpx;text-align: center;
66   - width:180rpx;height: 60rpx;
67   - background-color:#F6F6F6;border-radius:32px"
68   - >
69   - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>
70   - </view>
71   - </view>
72   - </view>
73   - <view style="margin-top: 136rpx;margin-left: 43rpx;">
74   - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">告警等级</text></view>
75   - <view
76   - class="u-flex"
77   - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;
78   - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
79   - >
80   - <view
81   - v-for="(item, index) in alertLevel"
82   - :key="index"
83   - style="margin: 10rpx;line-height: 50rpx;text-align: center;
84   - width:180rpx;height: 60rpx;
85   - background-color:#F6F6F6;border-radius:32px"
86   - >
87   - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>
88   - </view>
89   - </view>
90   - </view>
91   - <view style="margin-top: 136rpx;margin-left: 43rpx;">
92   - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">选择时间</text></view>
93   - <view
94   - class="u-flex"
95   - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;
96   - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
97   - >
98   - <view
99   - v-for="(item, index) in timeArea"
100   - :key="index"
101   - style="margin: 10rpx;line-height: 50rpx;text-align: center;
102   - width:180rpx;height: 60rpx;
103   - background-color:#F6F6F6;border-radius:32px"
104   - >
105   - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>
106   - </view>
107   - </view>
108   - </view>
109   - <view style="margin-top: 136rpx;margin-left: 43rpx;">
110   - <view class="u-flex" style="margin-left: 10rpx;margin-top: 15rpx;width:750rpx;height: 60rpx;flex-direction: row;">
111   - <u--form labelPosition="left" :model="timeData" :rules="rules" ref="form1" style="padding-left: 26rpx;width: 617rpx!important;">
112   - <u-form-item
113   - style="font-size: 14px;"
114   - label="选择日期"
115   - prop="selectTime"
116   - labelWidth="80"
117   - borderBottom
118   - @click="
119   - showCalendar = true;
120   - hideKeyboard();
121   - "
122   - >
123   - <u--input v-model="timeData.selectTime" placeholder="请选择日期" border="none"></u--input>
124   - </u-form-item>
125   - </u--form>
126   - </view>
127   - </view>
128   - <view class="u-flex" style="flex-direction: row;margin-top: 128rpx;margin-left: 55rpx;">
129   - <view style="width: 300rpx"><u-button type="info" shape="circle" text="重置"></u-button></view>
130   - <view style="width: 300rpx;margin-left:46rpx ;"><u-button type="primary" shape="circle" text="确认"></u-button></view>
131   - </view>
132   - <view style="height: 30rpx;"></view>
133   - </view>
134   - </u-popup>
135   - <u-calendar
136   - :show="showCalendar"
137   - mode="range"
138   - @confirm="calendarConfirm"
139   - @close="calendarClose"
140   - startText="开始时间"
141   - endText="结束时间"
142   - confirmDisabledText="请选择日期"
143   - :formatter="formatter"
144   - ></u-calendar>
145   - <f-tabbar :isFillHeight="false"></f-tabbar>
146   - </view>
147   -</template>
148   -
149   -<script>
150   -import fTabbar from '@/components/module/f-tabbar/f-tabbar';
151   -export default {
152   - components: {
153   - fTabbar
154   - },
155   - data() {
156   - return {
157   - show: false,
158   - timeData: {
159   - selectTime: '',
160   - getTimeGap: ''
161   - },
162   - showCalendar: false,
163   - show: false,
164   - alertStatus: [
165   - {
166   - index: 1,
167   - name: '全部',
168   - bgColor: '#377DFF',
169   - textColor: '#377DFF'
170   - },
171   - {
172   - index: 2,
173   - name: '激活未确认',
174   - bgColor: '#F6F6F6',
175   - textColor: '#F6F6F6'
176   - },
177   - {
178   - index: 3,
179   - name: '激活已确认',
180   - bgColor: '#F6F6F6',
181   - textColor: '#F6F6F6'
182   - },
183   - {
184   - index: 4,
185   - name: '清除未确认',
186   - bgColor: '#F6F6F6',
187   - textColor: '#F6F6F6'
188   - },
189   - {
190   - index: 5,
191   - name: '清除已确认',
192   - bgColor: '#F6F6F6',
193   - textColor: '#F6F6F6'
194   - },
195   - {
196   - index: 6,
197   - name: '清除已确认',
198   - bgColor: '#F6F6F6',
199   - textColor: '#F6F6F6'
200   - }
201   - ],
202   - deviceType: [
203   - {
204   - index: 1,
205   - name: '全部',
206   - bgColor: '#377DFF',
207   - textColor: '#377DFF'
208   - },
209   - {
210   - index: 2,
211   - name: '网关设备',
212   - bgColor: '#F6F6F6',
213   - textColor: '#F6F6F6'
214   - },
215   - {
216   - index: 3,
217   - name: '网关子设备',
218   - bgColor: '#F6F6F6',
219   - textColor: '#F6F6F6'
220   - },
221   - {
222   - index: 4,
223   - name: '直连设备',
224   - bgColor: '#F6F6F6',
225   - textColor: '#F6F6F6'
226   - }
227   - ],
228   - alertLevel: [
229   - {
230   - index: 1,
231   - name: '全部',
232   - bgColor: '#377DFF',
233   - textColor: '#377DFF'
234   - },
235   - {
236   - index: 2,
237   - name: '危险',
238   - bgColor: '#F6F6F6',
239   - textColor: '#F6F6F6'
240   - },
241   - {
242   - index: 3,
243   - name: '重要',
244   - bgColor: '#F6F6F6',
245   - textColor: '#F6F6F6'
246   - },
247   - {
248   - index: 4,
249   - name: '次要',
250   - bgColor: '#F6F6F6',
251   - textColor: '#F6F6F6'
252   - },
253   - {
254   - index: 4,
255   - name: '警告',
256   - bgColor: '#F6F6F6',
257   - textColor: '#F6F6F6'
258   - },
259   - {
260   - index: 4,
261   - name: '不确定',
262   - bgColor: '#F6F6F6',
263   - textColor: '#F6F6F6'
264   - }
265   - ],
266   - timeArea: [
267   - {
268   - index: 1,
269   - name: '全部',
270   - value: '全部',
271   - bgColor: '#F6F6F6',
272   - textColor: '#F6F6F6'
273   - },
274   - {
275   - index: 2,
276   - name: '30分钟',
277   - value: '30',
278   - bgColor: '#F6F6F6',
279   - textColor: '#F6F6F6'
280   - },
281   - {
282   - index: 3,
283   - name: '1小时',
284   - value: '30',
285   - bgColor: '#F6F6F6',
286   - textColor: '#F6F6F6'
287   - },
288   - {
289   - index: 4,
290   - name: '2小时',
291   - value: '120',
292   - bgColor: '#F6F6F6',
293   - textColor: '#F6F6F6'
294   - },
295   - {
296   - index: 5,
297   - name: '近一天',
298   - value: '24',
299   - bgColor: '#F6F6F6',
300   - textColor: '#F6F6F6'
301   - },
302   - {
303   - index: 6,
304   - name: '',
305   - value: '',
306   - bgColor: '#F6F6F6',
307   - textColor: '#F6F6F6'
308   - }
309   - ],
310   - list: [
311   - {
312   - name1: '1号楼1楼三单元水表',
313   - name2: 'CO₂：65.32',
314   - name3: '告警状态：清除已确认',
315   - name4: '../../../static/danger.png',
316   - name5: '危险',
317   - time: '2022-04-01 02:12:23',
318   - id: 'xx1'
319   - },
320   - {
321   - name1: '2号楼1楼三单元水表',
322   - name2: 'PH：9.8',
323   - name3: '告警状态：激活未确认',
324   - name4: '../../../static/major.png',
325   - name5: '重要',
326   - time: '2022-04-01 02:12:23',
327   - id: 'xx2'
328   - },
329   - {
330   - name1: '3号楼1楼三单元水表',
331   - name2: 'NH3：600',
332   - name3: '告警状态：激活未确认',
333   - name4: '../../../static/secondary.png',
334   - name5: '次要',
335   - time: '2022-04-01 02:12:23',
336   - id: 'xx3'
337   - },
338   - {
339   - name1: '4号楼1楼三单元水表',
340   - name2: '水深：1.4',
341   - name3: '告警状态：激活未确认',
342   - name4: '../../../static/secondary.png',
343   - name5: '次要',
344   - time: '2022-04-01 02:12:23',
345   - id: 'xx4'
346   - },
347   - {
348   - name1: '5号楼1楼三单元水表',
349   - name2: 'COD：125',
350   - name3: '告警状态：激活未确认',
351   - name4: '../../../static/noshue.png',
352   - name5: '不确定',
353   - time: '2022-04-01 02:12:23',
354   - id: 'xx5'
355   - }
356   - ]
357   - };
358   - },
359   - onLoad(e) {
360   - // 隐藏原生的tabbar
361   - uni.hideTabBar();
362   - },
363   - methods: {
364   - open() {},
365   - close() {
366   - this.show = false;
367   - },
368   - openSearchDialog() {
369   - this.show = true;
370   - },
371   - hideKeyboard() {
372   - uni.hideKeyboard();
373   - },
374   - calendarConfirm(e) {
375   - this.showCalendar = false;
376   - this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
377   - },
378   - calendarClose() {
379   - this.showCalendar = false;
380   - }
381   - }
382   -};
383   -</script>
384   -
385   -<style lang="scss" scoped>
386   -.alert-page {
387   - margin-top: -39rpx;
388   -}
389   -.device-list {
390   - display: flex;
391   - flex-direction: column;
392   - padding-left: 18rpx;
393   - margin-top: -18rpx;
394   - .list-item {
395   - width: 713rpx;
396   - height: 233rpx;
397   - background-color: #fff;
398   - margin-top: 24rpx;
399   - display: flex;
400   - flex-direction: row;
401   - border-radius: 10px;
402   - justify-content: space-between;
403   - .item {
404   - margin: 30rpx;
405   - }
406   - }
407   -}
  1 +<template>
  2 + <view class="alert-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view style="width: 192rpx;margin: 19rpx;"><u-button @click="openSearchDialog" shape="circle" type="info" icon="search" text="筛选"></u-button></view>
  6 + <view class="device-list">
  7 + <view @click="openDeviceDetail(item.id)" class="list-item" v-for="(item, index) in list" :key="index">
  8 + <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;">
  9 + <view style="width: 400rpx;text-align: left;">
  10 + <text style="color:#333;font-size: 15px;">{{ item.name1 }}</text>
  11 + </view>
  12 + <view style="width: 400rpx;text-align: left;">
  13 + <text style="color:#666;font-size: 15px;">{{ item.name2 }}</text>
  14 + </view>
  15 + <view style="width: 400rpx;text-align: left;">
  16 + <text style="color:#666;font-size: 15px;">{{ item.name3 }}</text>
  17 + </view>
  18 + <view style="width: 400rpx;text-align: left;">
  19 + <text style="color:#999;font-size: 15px;">{{ item.time }}</text>
  20 + </view>
  21 + </view>
  22 + <view class="item">
  23 + <view class="u-flex" style="margin-top: -6rpx;">
  24 + <image style="width: 30rpx;height: 30rpx;margin-top: 5rpx;margin-right: 5rpx;" :src="item.name4" mode=""></image>
  25 + <view>
  26 + <text style="color: #377DFF;font-size: 13px;margin-left: 5rpx;margin-top: 20rpx;">{{ item.name5 }}</text>
  27 + </view>
  28 + </view>
  29 + </view>
  30 + </view>
  31 + </view>
  32 + <view style="height: 30rpx;"></view>
  33 + <!-- 告警筛选 -->
  34 + <u-popup @close="close" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">
  35 + <view style="height: 1100rpx;background:#fff;border-radius: 20rpx;overflow-y: scroll;">
  36 + <view style="text-align: center;position: relative;top: 68rpx;margin-top: -40rpx;"><text style="font-size: 16px;color: #333333;">筛选条件</text></view>
  37 + <view style="margin-top: 97rpx;margin-left: 43rpx;">
  38 + <view style="width: 750rpx;margin-left: 14rpx;"><text style="color: #333333;font-size: 14px;">告警状态</text></view>
  39 + <view
  40 + class="u-flex"
  41 + style="margin-top: 15rpx;width:650rpx;height: 60rpx;
  42 + flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
  43 + >
  44 + <view
  45 + v-for="(item, index) in alertStatus"
  46 + :key="index"
  47 + style="margin: 10rpx;line-height: 50rpx;text-align: center;
  48 + width:180rpx;height: 60rpx;
  49 + background-color:#F6F6F6;border-radius:32px"
  50 + >
  51 + <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>
  52 + </view>
  53 + </view>
  54 + </view>
  55 + <view style="margin-top: 145rpx;margin-left: 43rpx;">
  56 + <view style="width: 750rpx;margin-left: 14rpx;"><text style="color: #333333;font-size: 14px;">设备类型</text></view>
  57 + <view
  58 + class="u-flex"
  59 + style="margin-top: 15rpx;width:650rpx;height: 60rpx;
  60 + flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
  61 + >
  62 + <view
  63 + v-for="(item, index) in deviceType"
  64 + :key="index"
  65 + style="margin: 10rpx;line-height: 50rpx;text-align: center;
  66 + width:180rpx;height: 60rpx;
  67 + background-color:#F6F6F6;border-radius:32px"
  68 + >
  69 + <text style="color:#333;font-size: 13px;">{{ item.name }}</text>
  70 + </view>
  71 + </view>
  72 + </view>
  73 + <view style="margin-top: 136rpx;margin-left: 43rpx;">
  74 + <view style="width: 750rpx;margin-left: 14rpx;"><text style="color: #333;font-size: 14px;">告警等级</text></view>
  75 + <view
  76 + class="u-flex"
  77 + style="margin-top: 15rpx;width:650rpx;height: 60rpx;
  78 + flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
  79 + >
  80 + <view
  81 + v-for="(item, index) in alertLevel"
  82 + :key="index"
  83 + style="margin: 10rpx;line-height: 50rpx;text-align: center;
  84 + width:180rpx;height: 60rpx;
  85 + background-color:#F6F6F6;border-radius:32px"
  86 + >
  87 + <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>
  88 + </view>
  89 + </view>
  90 + </view>
  91 + <view style="margin-top: 136rpx;margin-left: 43rpx;">
  92 + <view style="width: 750rpx;margin-left: 14rpx;"><text style="color: #333333;font-size: 14px;">选择时间</text></view>
  93 + <view
  94 + class="u-flex"
  95 + style="margin-top: 15rpx;width:650rpx;height: 60rpx;
  96 + flex-wrap: wrap;justify-content: space-between; align-content: space-between;"
  97 + >
  98 + <view
  99 + v-for="(item, index) in timeArea"
  100 + :key="index"
  101 + style="margin: 10rpx;line-height: 50rpx;text-align: center;
  102 + width:180rpx;height: 60rpx;
  103 + background-color:#F6F6F6;border-radius:32px"
  104 + >
  105 + <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>
  106 + </view>
  107 + </view>
  108 + </view>
  109 + <view style="margin-top: 136rpx;margin-left: 43rpx;">
  110 + <view class="u-flex" style="margin-left: 10rpx;margin-top: 15rpx;width:750rpx;height: 60rpx;">
  111 + <u--form labelPosition="left" :model="timeData" :rules="rules" ref="form1" style="padding-left: 26rpx;width: 617rpx!important;">
  112 + <u-form-item
  113 + style="font-size: 14px;"
  114 + label="选择日期"
  115 + prop="selectTime"
  116 + labelWidth="80"
  117 + borderBottom
  118 + @click="
  119 + showCalendar = true;
  120 + hideKeyboard();
  121 + "
  122 + >
  123 + <u--input v-model="timeData.selectTime" placeholder="请选择日期" border="none"></u--input>
  124 + </u-form-item>
  125 + </u--form>
  126 + </view>
  127 + </view>
  128 + <view class="u-flex" style="margin-top: 128rpx;margin-left: 55rpx;">
  129 + <view style="width: 300rpx"><u-button type="info" shape="circle" text="重置"></u-button></view>
  130 + <view style="width: 300rpx;margin-left:46rpx ;"><u-button type="primary" shape="circle" text="确认"></u-button></view>
  131 + </view>
  132 + <view style="height: 30rpx;"></view>
  133 + </view>
  134 + </u-popup>
  135 + <u-calendar
  136 + :show="showCalendar"
  137 + mode="range"
  138 + @confirm="calendarConfirm"
  139 + @close="calendarClose"
  140 + startText="开始时间"
  141 + endText="结束时间"
  142 + confirmDisabledText="请选择日期"
  143 + :formatter="formatter"
  144 + ></u-calendar>
  145 + <f-tabbar :isFillHeight="false"></f-tabbar>
  146 + </view>
  147 +</template>
  148 +
  149 +<script>
  150 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  151 +export default {
  152 + components: {
  153 + fTabbar
  154 + },
  155 + data() {
  156 + return {
  157 + show: false,
  158 + timeData: {
  159 + selectTime: '',
  160 + getTimeGap: ''
  161 + },
  162 + showCalendar: false,
  163 + alertStatus: [
  164 + {
  165 + index: 1,
  166 + name: '全部',
  167 + bgColor: '#377DFF',
  168 + textColor: '#377DFF'
  169 + },
  170 + {
  171 + index: 2,
  172 + name: '激活未确认',
  173 + bgColor: '#F6F6F6',
  174 + textColor: '#F6F6F6'
  175 + },
  176 + {
  177 + index: 3,
  178 + name: '激活已确认',
  179 + bgColor: '#F6F6F6',
  180 + textColor: '#F6F6F6'
  181 + },
  182 + {
  183 + index: 4,
  184 + name: '清除未确认',
  185 + bgColor: '#F6F6F6',
  186 + textColor: '#F6F6F6'
  187 + },
  188 + {
  189 + index: 5,
  190 + name: '清除已确认',
  191 + bgColor: '#F6F6F6',
  192 + textColor: '#F6F6F6'
  193 + },
  194 + {
  195 + index: 6,
  196 + name: '清除已确认',
  197 + bgColor: '#F6F6F6',
  198 + textColor: '#F6F6F6'
  199 + }
  200 + ],
  201 + deviceType: [
  202 + {
  203 + index: 1,
  204 + name: '全部',
  205 + bgColor: '#377DFF',
  206 + textColor: '#377DFF'
  207 + },
  208 + {
  209 + index: 2,
  210 + name: '网关设备',
  211 + bgColor: '#F6F6F6',
  212 + textColor: '#F6F6F6'
  213 + },
  214 + {
  215 + index: 3,
  216 + name: '网关子设备',
  217 + bgColor: '#F6F6F6',
  218 + textColor: '#F6F6F6'
  219 + },
  220 + {
  221 + index: 4,
  222 + name: '直连设备',
  223 + bgColor: '#F6F6F6',
  224 + textColor: '#F6F6F6'
  225 + }
  226 + ],
  227 + alertLevel: [
  228 + {
  229 + index: 1,
  230 + name: '全部',
  231 + bgColor: '#377DFF',
  232 + textColor: '#377DFF'
  233 + },
  234 + {
  235 + index: 2,
  236 + name: '危险',
  237 + bgColor: '#F6F6F6',
  238 + textColor: '#F6F6F6'
  239 + },
  240 + {
  241 + index: 3,
  242 + name: '重要',
  243 + bgColor: '#F6F6F6',
  244 + textColor: '#F6F6F6'
  245 + },
  246 + {
  247 + index: 4,
  248 + name: '次要',
  249 + bgColor: '#F6F6F6',
  250 + textColor: '#F6F6F6'
  251 + },
  252 + {
  253 + index: 4,
  254 + name: '警告',
  255 + bgColor: '#F6F6F6',
  256 + textColor: '#F6F6F6'
  257 + },
  258 + {
  259 + index: 4,
  260 + name: '不确定',
  261 + bgColor: '#F6F6F6',
  262 + textColor: '#F6F6F6'
  263 + }
  264 + ],
  265 + timeArea: [
  266 + {
  267 + index: 1,
  268 + name: '全部',
  269 + value: '全部',
  270 + bgColor: '#F6F6F6',
  271 + textColor: '#F6F6F6'
  272 + },
  273 + {
  274 + index: 2,
  275 + name: '30分钟',
  276 + value: '30',
  277 + bgColor: '#F6F6F6',
  278 + textColor: '#F6F6F6'
  279 + },
  280 + {
  281 + index: 3,
  282 + name: '1小时',
  283 + value: '30',
  284 + bgColor: '#F6F6F6',
  285 + textColor: '#F6F6F6'
  286 + },
  287 + {
  288 + index: 4,
  289 + name: '2小时',
  290 + value: '120',
  291 + bgColor: '#F6F6F6',
  292 + textColor: '#F6F6F6'
  293 + },
  294 + {
  295 + index: 5,
  296 + name: '近一天',
  297 + value: '24',
  298 + bgColor: '#F6F6F6',
  299 + textColor: '#F6F6F6'
  300 + },
  301 + {
  302 + index: 6,
  303 + name: '',
  304 + value: '',
  305 + bgColor: '#F6F6F6',
  306 + textColor: '#F6F6F6'
  307 + }
  308 + ],
  309 + list: [
  310 + {
  311 + name1: '1号楼1楼三单元水表',
  312 + name2: 'CO₂：65.32',
  313 + name3: '告警状态：清除已确认',
  314 + name4: '../../../static/danger.png',
  315 + name5: '危险',
  316 + time: '2022-04-01 02:12:23',
  317 + id: 'xx1'
  318 + },
  319 + {
  320 + name1: '2号楼1楼三单元水表',
  321 + name2: 'PH：9.8',
  322 + name3: '告警状态：激活未确认',
  323 + name4: '../../../static/major.png',
  324 + name5: '重要',
  325 + time: '2022-04-01 02:12:23',
  326 + id: 'xx2'
  327 + },
  328 + {
  329 + name1: '3号楼1楼三单元水表',
  330 + name2: 'NH3：600',
  331 + name3: '告警状态：激活未确认',
  332 + name4: '../../../static/secondary.png',
  333 + name5: '次要',
  334 + time: '2022-04-01 02:12:23',
  335 + id: 'xx3'
  336 + },
  337 + {
  338 + name1: '4号楼1楼三单元水表',
  339 + name2: '水深：1.4',
  340 + name3: '告警状态：激活未确认',
  341 + name4: '../../../static/secondary.png',
  342 + name5: '次要',
  343 + time: '2022-04-01 02:12:23',
  344 + id: 'xx4'
  345 + },
  346 + {
  347 + name1: '5号楼1楼三单元水表',
  348 + name2: 'COD：125',
  349 + name3: '告警状态：激活未确认',
  350 + name4: '../../../static/noshue.png',
  351 + name5: '不确定',
  352 + time: '2022-04-01 02:12:23',
  353 + id: 'xx5'
  354 + }
  355 + ]
  356 + };
  357 + },
  358 + onLoad(e) {
  359 + // 隐藏原生的tabbar
  360 + uni.hideTabBar();
  361 + },
  362 + methods: {
  363 + open() {},
  364 + close() {
  365 + this.show = false;
  366 + },
  367 + openSearchDialog() {
  368 + this.show = true;
  369 + },
  370 + hideKeyboard() {
  371 + uni.hideKeyboard();
  372 + },
  373 + calendarConfirm(e) {
  374 + this.showCalendar = false;
  375 + this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
  376 + },
  377 + calendarClose() {
  378 + this.showCalendar = false;
  379 + }
  380 + }
  381 +};
  382 +</script>
  383 +
  384 +<style lang="scss" scoped>
  385 +.alert-page {
  386 + margin-top: -39rpx;
  387 +}
  388 +.device-list {
  389 + display: flex;
  390 + flex-direction: column;
  391 + padding-left: 18rpx;
  392 + margin-top: -18rpx;
  393 + .list-item {
  394 + width: 713rpx;
  395 + height: 233rpx;
  396 + background-color: #fff;
  397 + margin-top: 24rpx;
  398 + display: flex;
  399 +
  400 + border-radius: 10px;
  401 + justify-content: space-between;
  402 + .item {
  403 + margin: 30rpx;
  404 + }
  405 + }
  406 +}
408 407 </style>
... ...
1   -<template>
2   - <view class="history-page">
3   - <!-- 公共组件-每个页面必须引入 -->
4   - <public-module></public-module>
5   - <view class="form-style" style="border-radius: 20px;width: 700rpx;height: 900rpx;background-color: #fff;">
6   - <u-form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;">
7   - <u-form-item
8   - label=""
9   - prop="selectTime"
10   - @click="
11   - showCalendar = true;
12   - hideKeyboard();
13   - "
14   - >
15   - <view class="u-flex" style="flex-direction: row;">
16   - <!-- #ifdef MP -->
17   - <view style="margin-left: -63rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/can-der.png" mode=""></image></view>
18   - <view style="margin-left: 23rpx;">
19   - <u--input v-model="timeData.selectTime" disabled disabledColor="#ffffff" placeholder="请选择日期" border="none"></u--input>
20   - </view>
21   - <!-- #endif -->
22   -
23   - <!-- #ifdef APP -->
24   - <view style="margin-left: 60rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/can-der.png" mode=""></image></view>
25   - <view style="margin-left: 46rpx;">
26   - <u--input v-model="timeData.selectTime" disabled disabledColor="#ffffff" placeholder="请选择日期" border="none"></u--input>
27   - </view>
28   - <!-- #endif -->
29   - </view>
30   - </u-form-item>
31   - <u-form-item label="" prop="getTimeGap" @click="openTimeGap">
32   - <view class="u-flex" style="flex-direction: row;">
33   - <!-- #ifdef MP -->
34   - <view style="margin-left: -63rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/time.png" mode=""></image></view>
35   - <view style="margin-left: 23rpx;">
36   - <u--input v-model="timeData.getTimeGap" disabled disabledColor="#ffffff" placeholder="请选择时间区间" border="none"></u--input>
37   - </view>
38   - <!-- #endif -->
39   -
40   - <!-- #ifdef APP -->
41   - <view style="margin-left: 60rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/time.png" mode=""></image></view>
42   - <view style="margin-left: 46rpx;">
43   - <u--input v-model="timeData.getTimeGap" disabled disabledColor="#ffffff" placeholder="请选择时间区间" border="none"></u--input>
44   - </view>
45   - <!-- #endif -->
46   - </view>
47   - </u-form-item>
48   - <u-form-item label="" prop="getType" @click="openOther">
49   - <!-- #ifdef MP -->
50   - <view style="width: 638rpx;height: 80rpx;border-radius: 40px;background: rgba(55, 125, 255, 0.03);margin-left:-60rpx">
51   - <u--input shape="circle" v-model="timeData.getType" placeholder="请选择类型"></u--input>
52   - </view>
53   - <!-- #endif -->
54   -
55   - <!-- #ifdef APP -->
56   - <view style="width: 638rpx;height: 80rpx;border-radius: 40px;background: rgba(55, 125, 255, 0.03);margin-left:60rpx">
57   - <u--input shape="circle" v-model="timeData.getType" placeholder="请选择类型"></u--input>
58   - </view>
59   - <!-- #endif -->
60   - </u-form-item>
61   - </u-form>
62   - <view style="height: 800rpx;width: 750rpx;margin-left: 20rpx;">
63   - <!-- 区域折线图 -->
64   - <view class="charts-box"><qiun-data-charts type="tarea" :chartData="chartData" :echartsH5="true" :echartsApp="true" :canvas2d="true" background="none" /></view>
65   - <!-- 区域折线图 -->
66   - </view>
67   - </view>
68   - <view style="border-radius: 20px;margin-top: 30rpx;width: 700rpx;height: 700rpx;background-color: #fff;">
69   - <u-list @scrolltolower="scrolltolower">
70   - <u-list-item v-for="(item, index) in indexList" :key="index"><u-cell :value="item.value" :title="item.name"></u-cell></u-list-item>
71   - </u-list>
72   - </view>
73   - <u-calendar
74   - :show="showCalendar"
75   - mode="range"
76   - @confirm="calendarConfirm"
77   - @close="calendarClose"
78   - startText="开始时间"
79   - endText="结束时间"
80   - confirmDisabledText="请选择日期"
81   - :formatter="formatter"
82   - ></u-calendar>
83   - <u-picker @confirm="confirmTimeGap" :show="showTimeGap" :columns="columns" keyName="label"></u-picker>
84   - <u-picker @confirm="confirmOtherGap" :show="showOtherType" :columns="columnOther" keyName="label"></u-picker>
85   - <f-tabbar></f-tabbar>
86   - </view>
87   -</template>
88   -
89   -<script>
90   -import fTabbar from '@/components/module/f-tabbar/f-tabbar';
91   -import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
92   -
93   -export default {
94   - components: {
95   - fTabbar,
96   - qiunDataCharts
97   - },
98   - data() {
99   - return {
100   - chartData: {
101   - categories: [],
102   - series: []
103   - },
104   - indexList: [
105   - {
106   - name: '变量值',
107   - value: '更新时间'
108   - },
109   - {
110   - name: '1',
111   - value: '2022-03-01 18:16:33'
112   - },
113   - {
114   - name: '69',
115   - value: '2022-03-01 18:16:33'
116   - },
117   - {
118   - name: '12',
119   - value: '2022-03-01 18:16:33'
120   - },
121   - {
122   - name: '49',
123   - value: '2022-03-01 18:16:33'
124   - },
125   - {
126   - name: '95',
127   - value: '2022-03-01 18:16:33'
128   - },
129   - {
130   - name: '95',
131   - value: '2022-03-01 18:16:33'
132   - }
133   - ],
134   - showTimeGap: false,
135   - showOtherType: false,
136   - showCalendar: false,
137   - timeData: {
138   - selectTime: '',
139   - getTimeGap: '',
140   - getType: ''
141   - },
142   - columnOther: [
143   - [
144   - {
145   - label: 'CO2',
146   - id: 1
147   - },
148   - {
149   - label: 'PH',
150   - id: 2
151   - }
152   - ]
153   - ],
154   - columns: [
155   - [
156   - {
157   - label: '5分钟',
158   - id: 5
159   - },
160   - {
161   - label: '10分钟',
162   - id: 10
163   - },
164   - {
165   - label: '15分钟',
166   - id: 15
167   - },
168   - {
169   - label: '30分钟',
170   - id: 30
171   - },
172   - {
173   - label: '1个小时',
174   - id: 60
175   - },
176   - {
177   - label: '2个小时',
178   - id: 120
179   - },
180   - {
181   - label: '6个小时',
182   - id: 360
183   - }
184   - ]
185   - ]
186   - };
187   - },
188   - onReady() {
189   - setTimeout(() => {
190   - this.getServerData();
191   - }, 1000);
192   - },
193   - onLoad(e) {
194   - // 隐藏原生的tabbar
195   - uni.hideTabBar();
196   - },
197   - methods: {
198   - getServerData() {
199   - this.chartData.categories = [];
200   - this.chartData.series = [
201   - {
202   - name: '14:52',
203   - data: [[10000, 55], [30000, 25], [50000, 55], [70000, 25], [90000, 55]]
204   - }
205   - ];
206   - },
207   - hideKeyboard() {
208   - uni.hideKeyboard();
209   - },
210   - calendarConfirm(e) {
211   - this.showCalendar = false;
212   - this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
213   - },
214   - calendarClose() {
215   - this.showCalendar = false;
216   - },
217   - openTimeGap() {
218   - this.showTimeGap = true;
219   - },
220   - openOther() {
221   - this.showOtherType = true;
222   - },
223   - confirmTimeGap(e) {
224   - this.timeData.getTimeGap = e.value[0].label;
225   - this.showTimeGap = false;
226   - },
227   - confirmOtherGap(e) {
228   - this.timeData.getType = e.value[0].label;
229   - this.showOtherType = false;
230   - }
231   - }
232   -};
233   -</script>
234   -
235   -<style lang="scss" scoped>
236   -.history-page {
237   - padding-top: -12rpx;
238   - padding-left: 23rpx;
239   -}
240   -.form-style {
241   - /deep/.u-form {
242   - .u-form-item {
243   - margin-left: -57rpx !important;
244   - }
245   - }
246   -}
247   -.charts-box {
248   - width: 650rpx;
249   - height: 600rpx;
250   -}
  1 +<template>
  2 + <view class="historyData">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="historyData-top">
  6 + <u-form :label-style="{ 'font-size': '0rpx' }">
  7 + <u-form-item @click="openCalendar">
  8 + <u-input v-model="timeData.selectTime" disabled disabledColor="#fff" placeholder="请选择日期" border="none">
  9 + <template slot="prefix">
  10 + <image class="icon" src="../../../static/can-der.png"></image>
  11 + </template>
  12 + </u-input>
  13 + </u-form-item>
  14 + <u-form-item @click="openTimeGap">
  15 + <u-input v-model="timeData.getTimeGap" disabled disabledColor="#fff" placeholder="请选择时间区间" border="none">
  16 + <template slot="prefix">
  17 + <image class="icon" src="../../../static/time.png"></image>
  18 + </template>
  19 + </u-input>
  20 + </u-form-item>
  21 + <u-form-item @click="openType"><u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled disabledColor="#377DFF0D" /></u-form-item>
  22 + </u-form>
  23 + <!-- <qiun-data-charts type="tarea" :chartData="chartData" canvas2d /> -->
  24 + </view>
  25 + <view class="historyData-bottom">
  26 + <view class="table">
  27 + <view class="tr bg-w">
  28 + <view class="th">变量值</view>
  29 + <view class="th">更新时间</view>
  30 + </view>
  31 + <view class="tr bg-g">
  32 + <view class="td">10</view>
  33 + <view class="td">2022-03-01 18:16:33</view>
  34 + </view>
  35 +
  36 + </view>
  37 + </view>
  38 + <u-calendar
  39 + :show="showCalendar"
  40 + closeOnClickOverlay
  41 + mode="range"
  42 + startText="开始时间"
  43 + endText="结束时间"
  44 + confirmDisabledText="请选择日期"
  45 + @confirm="calendarConfirm"
  46 + @close="calendarClose"
  47 + ></u-calendar>
  48 + <u-picker :show="showTimeGap" :columns="columns" keyName="label" closeOnClickOverlay @confirm="confirmTimeGap" @cancel="cancelTimeGap" @close="cancelTimeGap"></u-picker>
  49 + <u-picker :show="showSelectType" :columns="keys" closeOnClickOverlay @confirm="confirmTypeGap" @cancel="cancelTypeGap" @close="cancelTypeGap"></u-picker>
  50 + <f-tabbar></f-tabbar>
  51 + </view>
  52 +</template>
  53 +
  54 +<script>
  55 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  56 +import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
  57 +import { getDeviceKeys, getHistroyData } from '../api/index.js';
  58 +export default {
  59 + components: {
  60 + fTabbar,
  61 + qiunDataCharts
  62 + },
  63 + props:{
  64 + keys:{
  65 + type:Array,
  66 + default:()=>[]
  67 + }
  68 + },
  69 + data() {
  70 + return {
  71 + showCalendar: false,
  72 + showTimeGap: false,
  73 + showSelectType: false,
  74 + columns: [
  75 + [
  76 + {
  77 + label: '5分钟',
  78 + value: 300
  79 + },
  80 + {
  81 + label: '10分钟',
  82 + value: 600
  83 + },
  84 + {
  85 + label: '15分钟',
  86 + value: 900
  87 + },
  88 + {
  89 + label: '30分钟',
  90 + value: 1800
  91 + },
  92 + {
  93 + label: '1小时',
  94 + value: 3600
  95 + },
  96 + {
  97 + label: '2小时',
  98 + value: 7200
  99 + },
  100 + {
  101 + label: '6小时',
  102 + value: 21600
  103 + }
  104 + ]
  105 + ],
  106 + timeData: {
  107 + selectTime: '',
  108 + getTimeGap: '',
  109 + getType: ''
  110 + }
  111 + };
  112 + },
  113 + methods: {
  114 + openCalendar() {
  115 + this.showCalendar = true;
  116 + },
  117 + openTimeGap() {
  118 + this.showTimeGap = true;
  119 + },
  120 + openType() {
  121 + this.showSelectType = true;
  122 + },
  123 + calendarConfirm(date) {
  124 + this.showCalendar = false;
  125 + this.timeData.selectTime = `${date[0]} 至 ${date[1]}`;
  126 + },
  127 + calendarClose() {
  128 + this.showCalendar = false;
  129 + },
  130 + confirmTimeGap(time) {
  131 + this.showTimeGap = false;
  132 + this.timeData.getTimeGap = time.value[0].label;
  133 + },
  134 +
  135 + cancelTimeGap() {
  136 + this.showTimeGap = false;
  137 + },
  138 + confirmTypeGap(time) {
  139 + this.showSelectType = false;
  140 + this.timeData.getType = time.value[0];
  141 + },
  142 + cancelTypeGap() {
  143 + this.showSelectType = false;
  144 + }
  145 + }
  146 +};
  147 +</script>
  148 +
  149 +<style lang="scss" scoped>
  150 +.historyData {
  151 + margin: 30rpx;
  152 + .historyData-top {
  153 + padding: 30rpx;
  154 + background-color: #fff;
  155 + height: 870rpx;
  156 + border-radius: 20rpx;
  157 + .icon {
  158 + width: 28rpx;
  159 + height: 28rpx;
  160 + margin-right: 15rpx;
  161 + }
  162 + }
  163 + .historyData-bottom {
  164 + margin-top: 30rpx;
  165 + background-color: #fff;
  166 + border-radius: 20rpx;
  167 + .table {
  168 + border: 0px solid darkgray;
  169 + .tr {
  170 + display: flex;
  171 + width: 100%;
  172 + justify-content: center;
  173 + height: 3rem;
  174 + align-items: center;
  175 + .th {
  176 + display: flex;
  177 + justify-content: center;
  178 + align-items: center;
  179 + width: 50%;
  180 + color: #333;
  181 + font-weight: 500;
  182 + }
  183 + .td {
  184 + color: #999;
  185 + width: 50%;
  186 + display: flex;
  187 + justify-content: center;
  188 + text-align: center;
  189 + }
  190 + }
  191 + }
  192 + }
  193 +}
  194 +.odd {
  195 + background-color: #f9fcff;
  196 +}
251 197 </style>
... ...
... ... @@ -18,7 +18,7 @@ const GlobalOption = {
18 18 },
19 19 empty: {
20 20 use: true, // 是否显示空布局
21   - icon: "https://www.mescroll.com/img/mescroll-empty.png" // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
  21 + icon: "/static/empty.png" // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
22 22 }
23 23 },
24 24 // 国际化配置
... ...
... ... @@ -19,7 +19,7 @@ const GlobalOption = {
19 19 },
20 20 empty: {
21 21 use: true, // 是否显示空布局
22   - icon: "https://www.mescroll.com/img/mescroll-empty.png" // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
  22 + icon: "/static/empty.png" // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
23 23 }
24 24 },
25 25 // 国际化配置
... ...