简柏林 / 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,8 +5,8 @@ let baseUrl = "";
5 let imageUrl = '' 5 let imageUrl = ''
6 if (process.env.NODE_ENV === 'development') { 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 imageUrl='http://192.168.10.103:8080/api' 10 imageUrl='http://192.168.10.103:8080/api'
11 // baseUrl = 'http://192.168.1.228/fan_php/public/index.php' 11 // baseUrl = 'http://192.168.1.228/fan_php/public/index.php'
12 } else if (process.env.NODE_ENV === 'production') { 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,7 +11,7 @@
11 </f-navbar> 11 </f-navbar>
12 <!-- 公共组件-每个页面必须引入 --> 12 <!-- 公共组件-每个页面必须引入 -->
13 <public-module></public-module> 13 <public-module></public-module>
14 - <view class="org-sty"> 14 + <view class="org-sty" @click="openOrg">
15 <view class="org-item"> 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> 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"> 17 <view style="margin-top: 20rpx;margin-left: 15rpx;" class="u-flex" v-if="total">
@@ -20,12 +20,12 @@ @@ -20,12 +20,12 @@
20 </view> 20 </view>
21 </view> 21 </view>
22 <view class="org-item"> 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 </view> 24 </view>
25 </view> 25 </view>
26 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback" > 26 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback" >
27 <view class="device-list"> 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 <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;"> 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;"> 30 <view style="width: 450rpx;text-align: left;">
31 <text style="color:#333;font-size: 15px;">{{ item.name ? `设备名称:${item.name}` : '' }}</text> 31 <text style="color:#333;font-size: 15px;">{{ item.name ? `设备名称:${item.name}` : '' }}</text>
@@ -160,6 +160,13 @@ export default { @@ -160,6 +160,13 @@ export default {
160 // 隐藏原生的tabbar 160 // 隐藏原生的tabbar
161 uni.hideTabBar(); 161 uni.hideTabBar();
162 }, 162 },
  163 + onShow(){
  164 + if(this.orgId){
  165 + this.loadData(1,{
  166 + organizationId:this.orgId
  167 + })
  168 + }
  169 + },
163 methods: { 170 methods: {
164 /*下拉刷新的回调 */ 171 /*下拉刷新的回调 */
165 downCallback() { 172 downCallback() {
@@ -216,9 +223,9 @@ export default { @@ -216,9 +223,9 @@ export default {
216 openSearchDialog() { 223 openSearchDialog() {
217 this.show = true; 224 this.show = true;
218 }, 225 },
219 - openDeviceDetail(id, alarmStatus, lastOnlineTime) { 226 + openDeviceDetail(id, alarmStatus, lastOnlineTime,tbDeviceId) {
220 uni.navigateTo({ 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 handleClickTag(currentIndex, list) { 231 handleClickTag(currentIndex, list) {
@@ -4,11 +4,11 @@ @@ -4,11 +4,11 @@
4 <public-module></public-module> 4 <public-module></public-module>
5 <u-sticky bgColor="#fff"><u-tabs :list="list" :current="currentTab" @click="handleTabClick"></u-tabs></u-sticky> 5 <u-sticky bgColor="#fff"><u-tabs :list="list" :current="currentTab" @click="handleTabClick"></u-tabs></u-sticky>
6 <view style="margin-top:30rpx;"> 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 </view> 12 </view>
13 <f-tabbar></f-tabbar> 13 <f-tabbar></f-tabbar>
14 </view> 14 </view>
@@ -16,17 +16,15 @@ @@ -16,17 +16,15 @@
16 16
17 <script> 17 <script>
18 import fTabbar from '@/components/module/f-tabbar/f-tabbar'; 18 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
19 -import Tab from '@/components/yyh-tab/Tab.vue';  
20 import basicInfo from './tabDetail/basicInfo.vue'; 19 import basicInfo from './tabDetail/basicInfo.vue';
21 import realTimeData from './tabDetail/realtimeData.vue'; 20 import realTimeData from './tabDetail/realtimeData.vue';
22 import alarmHistory from './tabDetail/alarmHistory.vue'; 21 import alarmHistory from './tabDetail/alarmHistory.vue';
23 import historyData from './tabDetail/historyData.vue'; 22 import historyData from './tabDetail/historyData.vue';
24 import commondRecord from './tabDetail/commondRecord.vue'; 23 import commondRecord from './tabDetail/commondRecord.vue';
25 - 24 +import { getDeviceKeys } from './api/index.js';
26 export default { 25 export default {
27 components: { 26 components: {
28 fTabbar, 27 fTabbar,
29 - Tab,  
30 basicInfo, 28 basicInfo,
31 realTimeData, 29 realTimeData,
32 alarmHistory, 30 alarmHistory,
@@ -36,50 +34,55 @@ export default { @@ -36,50 +34,55 @@ export default {
36 data() { 34 data() {
37 return { 35 return {
38 list: [{ name: '基础信息' }, { name: '实时数据' }, { name: '历史数据' }, { name: '告警记录' }, { name: '命令记录' }], 36 list: [{ name: '基础信息' }, { name: '实时数据' }, { name: '历史数据' }, { name: '告警记录' }, { name: '命令记录' }],
39 - currentTab: 2, 37 + currentTab: 0,
40 id: '', 38 id: '',
41 - deviceDetail: {} 39 + deviceDetail: {},
  40 + keys:[]
42 }; 41 };
43 }, 42 },
44 async onLoad(options) { 43 async onLoad(options) {
45 - const { id, alarmStatus, lastOnlineTime } = options; 44 + const { id, alarmStatus, lastOnlineTime, tbDeviceId } = options;
46 const res = await uni.$u.http.get(`/yt/device/${id}`); 45 const res = await uni.$u.http.get(`/yt/device/${id}`);
47 this.deviceDetail = { ...res, alarmStatus, lastOnlineTime }; 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 // 隐藏原生的tabbar' 84 // 隐藏原生的tabbar'
  85 + this.keys = [keys]
83 uni.hideTabBar(); 86 uni.hideTabBar();
84 }, 87 },
85 methods: { 88 methods: {
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 <view> 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 <view> 7 <view>
8 <view class="content-item"> 8 <view class="content-item">
9 <view class="word">{{ item.name }}</view> 9 <view class="word">{{ item.name }}</view>
@@ -11,26 +11,53 @@ @@ -11,26 +11,53 @@
11 </view> 11 </view>
12 </luyj-tree> 12 </luyj-tree>
13 </view> 13 </view>
14 - <f-tabbar></f-tabbar>  
15 </view> 14 </view>
16 </template> 15 </template>
17 16
18 <script> 17 <script>
19 import fTabbar from '@/components/module/f-tabbar/f-tabbar'; 18 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
20 - 19 +import { transOrgFunc } from '@/config/common.js';
21 export default { 20 export default {
22 components: { 21 components: {
23 fTabbar 22 fTabbar
24 }, 23 },
25 data() { 24 data() {
26 return { 25 return {
  26 + isCheck: true, // 是否可选
27 tree: [], 27 tree: [],
28 - max: 5 28 + max: 5,
  29 + id: ''
29 }; 30 };
30 }, 31 },
31 onLoad(e) { 32 onLoad(e) {
32 // 隐藏原生的tabbar 33 // 隐藏原生的tabbar
33 uni.hideTabBar(); 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 </script> 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 </style> 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 </style> 197 </style>
@@ -18,7 +18,7 @@ const GlobalOption = { @@ -18,7 +18,7 @@ const GlobalOption = {
18 }, 18 },
19 empty: { 19 empty: {
20 use: true, // 是否显示空布局 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,7 +19,7 @@ const GlobalOption = {
19 }, 19 },
20 empty: { 20 empty: {
21 use: true, // 是否显示空布局 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 // 国际化配置