简柏林 / thingskit-app · Commits

Commit 513163215bbd8349c8e3934bfc8535875e1fc935

Authored by xp.Huang
2 parents ab624e46 477261d1

Merge branch 'sqy_dev' into 'main' 

'fix:修改部分的设备样式和调整命令记录‘

See merge request huang/thingskit-app!35
Inline Side-by-side
Showing 10 changed files with 276 additions and 167 deletions
1 -import {  
2 - getTabbarHeight  
3 -} from '@/plugins/utils';  
4 -let baseUrl = "";  
5 -if (process.env.NODE_ENV === 'development') {  
6 - // 开发环境  
7 - // baseUrl = 'http://192.168.10.115:8080/api'  
8 - baseUrl = 'https://dev.thingskit.com/api'  
9 -} else if (process.env.NODE_ENV === 'production') {  
10 - // 生产环境  
11 - // baseUrl = 'http://47.99.141.212:8080/api'  
12 -}  
13 -  
14 -let systemInfo = {  
15 - ...getTabbarHeight(),  
16 - // #ifdef MP-ALIPAY  
17 - navBarH: uni.getSystemInfoSync().statusBarHeight + uni.getSystemInfoSync().titleBarHeight, //菜单栏总高度--单位px  
18 - titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px  
19 - // #endif  
20 - // #ifndef MP-ALIPAY  
21 - navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px  
22 - titleBarHeight: 44, //标题栏高度--单位px  
23 - // #endif  
24 -};  
25 -// 平台  
26 -// #ifdef MP-WEIXIN  
27 -systemInfo.platform = 'weixin'  
28 -// #endif  
29 -// #ifdef MP-ALIPAY  
30 -systemInfo.platform = 'alipay'  
31 -// #endif  
32 -// #ifdef MP-TOUTIAO  
33 -systemInfo.platform = 'toutiao'  
34 -// #endif  
35 -// #ifdef APP-PLUS  
36 -systemInfo.platform = 'plus'  
37 -// #endif  
38 -console.log(systemInfo, 'systemInfo')  
39 -const courtConfig = {  
40 - publicAppId: '', //公众号appId  
41 - baseUrl: baseUrl, //域名  
42 - systemInfo: systemInfo, //系统信息  
43 - mapData: {  
44 - key: '', //地图key  
45 - sk: '',  
46 - },  
47 - share: {  
48 - title: '基于uview2.0快速开发框架', //分享标题  
49 - desc: "基于uview2.0快速开发框架详情", //分享详情  
50 - link: "", // 分享链接  
51 - imgUrl: "", // 分享图  
52 - }  
53 -}; 1 +import {
  2 + getTabbarHeight
  3 +} from '@/plugins/utils';
  4 +let baseUrl = "";
  5 +if (process.env.NODE_ENV === 'development') {
  6 + // 开发环境
  7 + baseUrl = 'http://192.168.10.115:8080/api'
  8 + // baseUrl = 'https://dev.thingskit.com/api'
  9 +
  10 +} else if (process.env.NODE_ENV === 'production') {
  11 + // 生产环境
  12 + // baseUrl = 'http://47.99.141.212:8080/api'
  13 +}
  14 +
  15 +let systemInfo = {
  16 + ...getTabbarHeight(),
  17 + // #ifdef MP-ALIPAY
  18 + navBarH: uni.getSystemInfoSync().statusBarHeight + uni.getSystemInfoSync().titleBarHeight, //菜单栏总高度--单位px
  19 + titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px
  20 + // #endif
  21 + // #ifndef MP-ALIPAY
  22 + navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px
  23 + titleBarHeight: 44, //标题栏高度--单位px
  24 + // #endif
  25 +};
  26 +// 平台
  27 +// #ifdef MP-WEIXIN
  28 +systemInfo.platform = 'weixin'
  29 +// #endif
  30 +// #ifdef MP-ALIPAY
  31 +systemInfo.platform = 'alipay'
  32 +// #endif
  33 +// #ifdef MP-TOUTIAO
  34 +systemInfo.platform = 'toutiao'
  35 +// #endif
  36 +// #ifdef APP-PLUS
  37 +systemInfo.platform = 'plus'
  38 +// #endif
  39 +console.log(systemInfo, 'systemInfo')
  40 +const courtConfig = {
  41 + publicAppId: '', //公众号appId
  42 + baseUrl: baseUrl, //域名
  43 + systemInfo: systemInfo, //系统信息
  44 + mapData: {
  45 + key: '', //地图key
  46 + sk: '',
  47 + },
  48 + share: {
  49 + title: '基于uview2.0快速开发框架', //分享标题
  50 + desc: "基于uview2.0快速开发框架详情", //分享详情
  51 + link: "", // 分享链接
  52 + imgUrl: "", // 分享图
  53 + }
  54 +};
54 export default Object.assign({}, courtConfig); 55 export default Object.assign({}, courtConfig);
1 -// 获取某个Key的历史数据  
2 -export function getHistroyData(params) {  
3 - const {entityId,keys,startTs,endTs,interval} = params  
4 - return uni.$u.http.get(  
5 - `/plugins/telemetry/DEVICE/${entityId}/values/timeseries?keys=${keys}&startTs=${startTs}&endTs=${endTs}&interval=${interval}`); 1 +// 获取某个Key的历史数据
  2 +export function getHistoryData(params) {
  3 + const {
  4 + entityId,
  5 + keys,
  6 + startTs,
  7 + endTs,
  8 + interval
  9 + } = params
  10 + return uni.$u.http.get(
  11 + `/plugins/telemetry/DEVICE/${entityId}/values/timeseries?keys=${keys}&startTs=${startTs}&endTs=${endTs}&interval=${interval}`
  12 + );
  13 +}
  14 +
  15 +// 获取当前设备的key
  16 +export function getDeviceKeys(id) {
  17 + return uni.$u.http.get(`/plugins/telemetry/DEVICE/${id}/keys/timeseries`);
  18 +};
  19 +
  20 +export function issueCommand(type, tbDeviceId, data) {
  21 + console.log(type,tbDeviceId)
  22 + return uni.$u.http.post(`/rpc/${type==='OneWay'?'oneway':'twoway'}/${tbDeviceId}`, data)
6 } 23 }
7 -  
8 -// 获取当前设备的key  
9 -export function getDeviceKeys(id) {  
10 - return uni.$u.http.get(`/plugins/telemetry/DEVICE/${id}/keys/timeseries`);  
11 -};  
@@ -2,7 +2,20 @@ @@ -2,7 +2,20 @@
2 <view class="device-detail-page"> 2 <view class="device-detail-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
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">
  6 + <u-tabs
  7 + :list="list"
  8 + :current="currentTab"
  9 + @click="handleTabClick"
  10 + :activeStyle="{
  11 + fontWeight: 'bold',
  12 + color: '#333'
  13 + }"
  14 + :inactiveStyle="{
  15 + color: '#999'
  16 + }"
  17 + />
  18 + </u-sticky>
6 <view style="margin-top:30rpx;"> 19 <view style="margin-top:30rpx;">
7 <basicInfo v-show="currentTab == 0" :deviceDetail="deviceDetail" /> 20 <basicInfo v-show="currentTab == 0" :deviceDetail="deviceDetail" />
8 <realTimeData v-show="currentTab === 1" :recordList="recordList" /> 21 <realTimeData v-show="currentTab === 1" :recordList="recordList" />
@@ -14,14 +27,13 @@ @@ -14,14 +27,13 @@
14 :timeDiff="timeDiff" 27 :timeDiff="timeDiff"
15 :historyData="historyData" 28 :historyData="historyData"
16 :entityId="entityId" 29 :entityId="entityId"
17 - @update="handleUpdate"  
18 :start="startTs" 30 :start="startTs"
19 :end="endTs" 31 :end="endTs"
  32 + @update="handleUpdate"
20 /> 33 />
21 <alarmHistory v-show="currentTab === 3" :deviceId="deviceId" /> 34 <alarmHistory v-show="currentTab === 3" :deviceId="deviceId" />
22 - <commondRecord v-show="currentTab === 4" :deviceId="deviceId" /> 35 + <commondRecord v-if="currentTab === 4" :tbDeviceId="entityId" />
23 </view> 36 </view>
24 - <f-tabbar></f-tabbar>  
25 </view> 37 </view>
26 </template> 38 </template>
27 39
@@ -32,7 +44,7 @@ import realTimeData from './tabDetail/realtimeData.vue'; @@ -32,7 +44,7 @@ import realTimeData from './tabDetail/realtimeData.vue';
32 import alarmHistory from './tabDetail/alarmHistory.vue'; 44 import alarmHistory from './tabDetail/alarmHistory.vue';
33 import historyData from './tabDetail/historyData.vue'; 45 import historyData from './tabDetail/historyData.vue';
34 import commondRecord from './tabDetail/CommandRecord.vue'; 46 import commondRecord from './tabDetail/CommandRecord.vue';
35 -import { getDeviceKeys, getHistroyData } from './api/index.js'; 47 +import { getDeviceKeys, getHistoryData } from './api/index.js';
36 import { formatToDate } from '@/plugins/utils.js'; 48 import { formatToDate } from '@/plugins/utils.js';
37 export default { 49 export default {
38 components: { 50 components: {
@@ -60,12 +72,16 @@ export default { @@ -60,12 +72,16 @@ export default {
60 recordList: [] 72 recordList: []
61 }; 73 };
62 }, 74 },
  75 + onUnload(){
  76 + // 页面关闭时,销毁webSocket连接,否则第二次会存在连接不到的情况
  77 + uni.closeSocket();
  78 + },
63 async onLoad(options) { 79 async onLoad(options) {
64 const { id, alarmStatus, lastOnlineTime, tbDeviceId } = options; 80 const { id, alarmStatus, lastOnlineTime, tbDeviceId } = options;
65 this.deviceId = id; 81 this.deviceId = id;
66 - console.log(this.deviceId);  
67 const res = await uni.$u.http.get(`/yt/device/${id}`); 82 const res = await uni.$u.http.get(`/yt/device/${id}`);
68 this.deviceDetail = { ...res, alarmStatus, lastOnlineTime }; 83 this.deviceDetail = { ...res, alarmStatus, lastOnlineTime };
  84 + // 连接webSockte
69 const socketTask = uni.connectSocket({ 85 const socketTask = uni.connectSocket({
70 url: 'wss://dev.thingskit.com/api/ws/plugins/telemetry?token=' + uni.getStorageSync('userInfo').isToken, //仅为示例，并非真实接口地址。 86 url: 'wss://dev.thingskit.com/api/ws/plugins/telemetry?token=' + uni.getStorageSync('userInfo').isToken, //仅为示例，并非真实接口地址。
71 complete: () => {} 87 complete: () => {}
@@ -118,7 +134,6 @@ export default { @@ -118,7 +134,6 @@ export default {
118 this.recordList.unshift(item); 134 this.recordList.unshift(item);
119 } 135 }
120 }); 136 });
121 -  
122 this.recordList = this.recordList.map(item => { 137 this.recordList = this.recordList.map(item => {
123 return { 138 return {
124 ...item, 139 ...item,
@@ -134,13 +149,14 @@ export default { @@ -134,13 +149,14 @@ export default {
134 const month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月) 149 const month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
135 const day = date.getDate(); //获取当前日(1-31) 150 const day = date.getDate(); //获取当前日(1-31)
136 const yesterday = `${year}-${month}-${day - 1}`; 151 const yesterday = `${year}-${month}-${day - 1}`;
137 - const today = `${year}-${month}-${day + 1}`; 152 + const today = `${year}-${month}-${day}`;
138 this.yesterday = yesterday; 153 this.yesterday = yesterday;
139 this.today = today; 154 this.today = today;
140 this.startTs = formatToDate(yesterday, 'x'); 155 this.startTs = formatToDate(yesterday, 'x');
141 this.endTs = formatToDate(today, 'x'); 156 this.endTs = formatToDate(today, 'x');
142 this.entityId = tbDeviceId; 157 this.entityId = tbDeviceId;
143 - const data = await getHistroyData({ 158 + console.log(this.entityId)
  159 + const data = await getHistoryData({
144 entityId: tbDeviceId, 160 entityId: tbDeviceId,
145 startTs: formatToDate(yesterday, 'x'), 161 startTs: formatToDate(yesterday, 'x'),
146 endTs: formatToDate(today, 'x'), 162 endTs: formatToDate(today, 'x'),
@@ -148,14 +164,16 @@ export default { @@ -148,14 +164,16 @@ export default {
148 interval: 1800000 164 interval: 1800000
149 }); 165 });
150 this.timeDiff = '30分钟'; 166 this.timeDiff = '30分钟';
151 - if(!Object.keys(data).length) return; 167 + if (!Object.keys(data).length) return;
152 168
153 - this.historyData = data[keys[0]].map(item => {  
154 - return {  
155 - value: item.value,  
156 - ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')  
157 - };  
158 - }).reverse(); 169 + this.historyData = data[keys[0]]
  170 + .map(item => {
  171 + return {
  172 + value: item.value,
  173 + ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
  174 + };
  175 + })
  176 + .reverse();
159 }, 177 },
160 methods: { 178 methods: {
161 handleTabClick({ index }) { 179 handleTabClick({ index }) {
@@ -166,21 +184,22 @@ export default { @@ -166,21 +184,22 @@ export default {
166 this.historyData = []; 184 this.historyData = [];
167 return; 185 return;
168 } 186 }
169 - this.historyData = data.map(item => {  
170 - return {  
171 - value: item.value,  
172 - ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')  
173 - };  
174 - }).reverse(); 187 + this.historyData = data
  188 + .map(item => {
  189 + return {
  190 + value: item.value,
  191 + ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
  192 + };
  193 + })
  194 + .reverse();
175 } 195 }
176 } 196 }
177 }; 197 };
178 -</script> 198 +</script>
179 199
180 <style lang="scss" scoped> 200 <style lang="scss" scoped>
181 -  
182 - .device-detail-page{  
183 - height: 100vh;  
184 - background-color: #f8f9fa;  
185 - }  
186 -</style>  
  201 +.device-detail-page {
  202 + height: 100vh;
  203 + background-color: #f8f9fa;
  204 +}
  205 +</style>
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 </view> 8 </view>
9 <view @click="openSearchDialog" class="search-right"> 9 <view @click="openSearchDialog" class="search-right">
10 <text>筛选</text> 10 <text>筛选</text>
11 - <image src="../../static/shaixuan.png" /> 11 + <image src="../../../static/shaixuan.png" />
12 </view> 12 </view>
13 </view> 13 </view>
14 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> 14 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
@@ -31,16 +31,16 @@ @@ -31,16 +31,16 @@
31 </view> 31 </view>
32 </mescroll-body> 32 </mescroll-body>
33 <!-- 告警筛选 --> 33 <!-- 告警筛选 -->
34 - <u-popup @close="close" closeable :overlay="true" :show="show" mode="bottom" bgColor="#fff">  
35 - <view>  
36 - <view style="text-align: center; margin-top: 28rpx"><text>筛选条件</text></view> 34 + <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20">
  35 + <view class="filter">
  36 + <view class="filter-title"><text>筛选条件</text></view>
37 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem> 37 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
38 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem> 38 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem>
39 <FilterItem :filterList="alarmLevelStatus" title="告警等级" @clickTag="currentIndex => handleClickTag(currentIndex, alarmLevelStatus)"></FilterItem> 39 <FilterItem :filterList="alarmLevelStatus" title="告警等级" @clickTag="currentIndex => handleClickTag(currentIndex, alarmLevelStatus)"></FilterItem>
40 <FilterItem :filterList="timeStatus" title="选择时间" @clickTag="currentIndex => handleClickTag(currentIndex, timeStatus)"></FilterItem> 40 <FilterItem :filterList="timeStatus" title="选择时间" @clickTag="currentIndex => handleClickTag(currentIndex, timeStatus)"></FilterItem>
41 - <view class="u-flex" style="margin-top: 40rpx; margin-left: 55rpx">  
42 - <view style="width: 300rpx"><u-button type="info" shape="circle" text="重置" @click="resetFilter"></u-button></view>  
43 - <view style="width: 300rpx; margin-left: 46rpx"><u-button type="primary" shape="circle" text="确认" @click="confirmFilter"></u-button></view> 41 + <view class="button-group">
  42 + <view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置" @click="resetFilter"></u-button></view>
  43 + <view><u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button></view>
44 </view> 44 </view>
45 </view> 45 </view>
46 </u-popup> 46 </u-popup>
@@ -65,16 +65,16 @@ export default { @@ -65,16 +65,16 @@ export default {
65 FilterItem 65 FilterItem
66 }, 66 },
67 props: { 67 props: {
68 - deviceId: { 68 + tbDeviceId: {
69 type: String, 69 type: String,
70 default: '' 70 default: ''
71 } 71 }
72 }, 72 },
73 - mounted() {  
74 - this.loadData(1, {  
75 - deviceId: this.deviceId  
76 - });  
77 - }, 73 + // mounted() {
  74 + // this.loadData(1, {
  75 + // tbDeviceId: this.tbDeviceId
  76 + // });
  77 + // },
78 data() { 78 data() {
79 return { 79 return {
80 show: false, 80 show: false,
@@ -198,7 +198,7 @@ export default { @@ -198,7 +198,7 @@ export default {
198 }, 198 },
199 page: { 199 page: {
200 num: 0, 200 num: 0,
201 - sizie: 10 201 + size: 10
202 } 202 }
203 }; 203 };
204 }, 204 },
@@ -209,7 +209,7 @@ export default { @@ -209,7 +209,7 @@ export default {
209 this.list = []; 209 this.list = [];
210 this.page.num = 1; 210 this.page.num = 1;
211 this.loadData(this.page.num, { 211 this.loadData(this.page.num, {
212 - deviceId: this.deviceId 212 + tbDeviceId: this.tbDeviceId
213 }); 213 });
214 }, 214 },
215 /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ 215 /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
@@ -217,7 +217,7 @@ export default { @@ -217,7 +217,7 @@ export default {
217 //联网加载数据 217 //联网加载数据
218 this.page.num += 1; 218 this.page.num += 1;
219 this.loadData(this.page.num, { 219 this.loadData(this.page.num, {
220 - deviceId: this.deviceId 220 + tbDeviceId: this.tbDeviceId
221 }); 221 });
222 }, 222 },
223 //获取告警数据 223 //获取告警数据
@@ -228,7 +228,7 @@ export default { @@ -228,7 +228,7 @@ export default {
228 pageSize: 10 228 pageSize: 10
229 }; 229 };
230 uni.$u.http 230 uni.$u.http
231 - .get('/yt/alarm', { 231 + .get('/yt/rpc', {
232 params: httpData, 232 params: httpData,
233 custom: { 233 custom: {
234 load: false 234 load: false
@@ -315,7 +315,6 @@ export default { @@ -315,7 +315,6 @@ export default {
315 <style lang="scss" scoped> 315 <style lang="scss" scoped>
316 .command-record { 316 .command-record {
317 padding: 0 20rpx; 317 padding: 0 20rpx;
318 -  
319 .search { 318 .search {
320 display: flex; 319 display: flex;
321 justify-content: space-between; 320 justify-content: space-between;
@@ -379,4 +378,21 @@ export default { @@ -379,4 +378,21 @@ export default {
379 } 378 }
380 } 379 }
381 } 380 }
  381 +.filter {
  382 + padding: 0 30rpx;
  383 + .filter-title {
  384 + text-align: center;
  385 + margin-top: 14px;
  386 + font-size: 32rpx;
  387 + font-weight: 700;
  388 + }
  389 + .button-group {
  390 + display: flex;
  391 + margin-top: 40rpx;
  392 + justify-content: space-between;
  393 + view {
  394 + width: 330rpx;
  395 + }
  396 + }
  397 +}
382 </style> 398 </style>
1 <template> 1 <template>
2 <view class="alert-page"> 2 <view class="alert-page">
3 - <!-- 公共组件-每个页面必须引入 -->  
4 - <public-module></public-module> 3 + <view class="filter-button" @click="openSearchDialog">
  4 + <text>筛选</text>
  5 + <image src="../../../static/shaixuan.png" />
  6 + </view>
  7 +
5 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> 8 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
6 - <view style="width: 192rpx;"><u-button @click="openSearchDialog" shape="circle" type="info" icon="search" text="筛选"></u-button></view>  
7 <view @click="openDeviceDetail(item)" class="list-item" v-for="(item, index) in list" :key="index"> 9 <view @click="openDeviceDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
8 <view class="item"> 10 <view class="item">
9 <view class="item-first"> 11 <view class="item-first">
10 - <text>{{ item.deviceName }}</text> 12 + <text style="font-weight: bold;">{{ item.deviceName }}</text>
11 <view class="item-right"> 13 <view class="item-right">
12 <image 14 <image
13 :src=" 15 :src="
@@ -42,7 +44,7 @@ @@ -42,7 +44,7 @@
42 </text> 44 </text>
43 </view> 45 </view>
44 </view> 46 </view>
45 - <view>{{ Object.entries(item.details.data)[0][0] }} : {{ Object.entries(item.details.data)[0][1] }}</view> 47 + <view>{{ Object.entries(item.details.data)[0][0] }} : <text style="font-weight: bold; margin-left:4rpx;">{{ Object.entries(item.details.data)[0][1] }}</text></view>
46 <view v-if="item.status"> 48 <view v-if="item.status">
47 告警状态:{{ 49 告警状态:{{
48 item.status === 'CLEARED_UNACK' ? '清除未确认' : item.status === 'CLEARED_ACK' ? '清除已确认' : item.status === 'ACTIVE_UNACK' ? '激活未确认' : '激活已确认' 50 item.status === 'CLEARED_UNACK' ? '清除未确认' : item.status === 'CLEARED_ACK' ? '清除已确认' : item.status === 'ACTIVE_UNACK' ? '激活未确认' : '激活已确认'
@@ -53,16 +55,16 @@ @@ -53,16 +55,16 @@
53 </view> 55 </view>
54 </mescroll-body> 56 </mescroll-body>
55 <!-- 告警筛选 --> 57 <!-- 告警筛选 -->
56 - <u-popup @close="close" closeable :overlay="true" :show="show" mode="bottom" bgColor="#fff">  
57 - <view>  
58 - <view style="text-align: center; margin-top: 28rpx"><text>筛选条件</text></view> 58 + <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20">
  59 + <view class="filter">
  60 + <view class="filter-title"><text>筛选条件</text></view>
59 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem> 61 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
60 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem> 62 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem>
61 <FilterItem :filterList="alarmLevelStatus" title="告警等级" @clickTag="currentIndex => handleClickTag(currentIndex, alarmLevelStatus)"></FilterItem> 63 <FilterItem :filterList="alarmLevelStatus" title="告警等级" @clickTag="currentIndex => handleClickTag(currentIndex, alarmLevelStatus)"></FilterItem>
62 <FilterItem :filterList="timeStatus" title="选择时间" @clickTag="currentIndex => handleClickTag(currentIndex, timeStatus)"></FilterItem> 64 <FilterItem :filterList="timeStatus" title="选择时间" @clickTag="currentIndex => handleClickTag(currentIndex, timeStatus)"></FilterItem>
63 - <view class="u-flex" style="margin-top: 40rpx; margin-left: 55rpx">  
64 - <view style="width: 300rpx"><u-button type="info" shape="circle" text="重置" @click="resetFilter"></u-button></view>  
65 - <view style="width: 300rpx; margin-left: 46rpx"><u-button type="primary" shape="circle" text="确认" @click="confirmFilter"></u-button></view> 65 + <view class="button-group">
  66 + <view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置" @click="resetFilter"></u-button></view>
  67 + <view><u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button></view>
66 </view> 68 </view>
67 </view> 69 </view>
68 </u-popup> 70 </u-popup>
@@ -74,7 +76,6 @@ @@ -74,7 +76,6 @@
74 startText="开始时间" 76 startText="开始时间"
75 endText="结束时间" 77 endText="结束时间"
76 confirmDisabledText="请选择日期" 78 confirmDisabledText="请选择日期"
77 - :formatter="formatter"  
78 ></u-calendar> 79 ></u-calendar>
79 </view> 80 </view>
80 </template> 81 </template>
@@ -92,11 +93,6 @@ export default { @@ -92,11 +93,6 @@ export default {
92 default: '' 93 default: ''
93 } 94 }
94 }, 95 },
95 - mounted() {  
96 - this.loadData(1, {  
97 - deviceId: this.deviceId  
98 - });  
99 - },  
100 data() { 96 data() {
101 return { 97 return {
102 show: false, 98 show: false,
@@ -336,8 +332,24 @@ export default { @@ -336,8 +332,24 @@ export default {
336 </script> 332 </script>
337 333
338 <style lang="scss" scoped> 334 <style lang="scss" scoped>
  335 +.filter-button {
  336 + font-size: 24rpx;
  337 + width: 160rpx;
  338 + height: 64rpx;
  339 + border-radius: 32rpx;
  340 + display: flex;
  341 + justify-content: center;
  342 + align-items: center;
  343 + background: #f0f1f2;
  344 + color: #666;
  345 + image {
  346 + width: 28rpx;
  347 + height: 28rpx;
  348 + margin-left: 4rpx;
  349 + }
  350 +}
339 .alert-page { 351 .alert-page {
340 - padding: 20rpx; 352 + padding: 0 30rpx;
341 .list-item { 353 .list-item {
342 width: 690rpx; 354 width: 690rpx;
343 height: 262rpx; 355 height: 262rpx;
@@ -373,4 +385,22 @@ export default { @@ -373,4 +385,22 @@ export default {
373 } 385 }
374 } 386 }
375 } 387 }
376 -</style> 388 +
  389 +.filter {
  390 + padding: 0 30rpx;
  391 + .filter-title {
  392 + text-align: center;
  393 + margin-top: 14px;
  394 + font-size: 32rpx;
  395 + font-weight: 700;
  396 + }
  397 + .button-group {
  398 + display: flex;
  399 + margin-top: 40rpx;
  400 + justify-content: space-between;
  401 + view {
  402 + width: 330rpx;
  403 + }
  404 + }
  405 +}
  406 +</style>
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 {{ deviceDetail.deviceState === 'INACTIVE' ? '待激活' : deviceDetail.deviceState === 'ONLINE' ? '在线' : '离线' }} 12 {{ deviceDetail.deviceState === 'INACTIVE' ? '待激活' : deviceDetail.deviceState === 'ONLINE' ? '在线' : '离线' }}
13 </view> 13 </view>
14 </view> 14 </view>
15 - <view style="margin-right: 20rpx;"><u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModal" /></view> 15 + <view style="margin-right: 20rpx;" v-if="deviceDetail.deviceState==='ONLINE'"><u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModal" /></view>
16 </view> 16 </view>
17 <view class="detail"> 17 <view class="detail">
18 <view class="detail-item"> 18 <view class="detail-item">
@@ -47,16 +47,23 @@ @@ -47,16 +47,23 @@
47 </view> 47 </view>
48 48
49 <!-- 下发命令 --> 49 <!-- 下发命令 -->
50 - <u-modal :show="showModel" closeOnClickOverlay showCancelButton width="375px" @close="hiddenModal" @cancel="hiddenModal" @confirm="handleConfirm">  
51 - <view>  
52 - <view class="u-flex" style="align-items: center;">  
53 - <text style="color: #333; font-size: 28rpx;margin-right: 10rpx;">下发类型:</text>  
54 - <u-radio-group v-model="value" placement="row" style="margin-left: 10rpx;" size="20">  
55 - <u-radio activeColor="#3388FF" label="OneWay"></u-radio>  
56 - <u-radio activeColor="#3388FF" label="TwoWay"></u-radio> 50 + <u-modal :show="showModel" closeOnClickOverlay :showConfirmButton="false" width="350px" @close="hiddenModal">
  51 + <view style="width: 100%; padding: 0 30rpx;">
  52 + <view style="text-align: center; font-weight:700;margin-bottom: 40rpx;">命令下发</view>
  53 + <view class="u-flex">
  54 + <text style="color: #333; font-size: 28rpx;font-weight:700;margin-right: 30rpx;">下发类型:</text>
  55 + <u-radio-group v-model="commandType" placement="row" size="14">
  56 + <u-radio activeColor="#3388FF" label="OneWay" name="OneWay"></u-radio>
  57 + <view style="margin: 0 20rpx;"></view>
  58 + <u-radio activeColor="#3388FF" label="TwoWay" name="TwoWay"></u-radio>
57 </u-radio-group> 59 </u-radio-group>
58 </view> 60 </view>
59 - <view style="margin-top: 28rpx;"><u--textarea placeholder="请输入命令内容" v-model="formModel.intro" /></view> 61 + <view style="margin-top: 28rpx;"><u--textarea placeholder="请输入命令内容" v-model="commandValue" /></view>
  62 +
  63 + <view class="button-group">
  64 + <view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="取消" @click="cancelCommand"></u-button></view>
  65 + <view><u-button color="#3388ff" shape="circle" text="确认" @click="confirmCommand"></u-button></view>
  66 + </view>
60 </view> 67 </view>
61 </u-modal> 68 </u-modal>
62 </view> 69 </view>
@@ -64,6 +71,7 @@ @@ -64,6 +71,7 @@
64 71
65 <script> 72 <script>
66 import { formatToDate } from '@/plugins/utils.js'; 73 import { formatToDate } from '@/plugins/utils.js';
  74 +import { issueCommand } from '../api/index.js';
67 export default { 75 export default {
68 props: { 76 props: {
69 deviceDetail: { 77 deviceDetail: {
@@ -73,7 +81,15 @@ export default { @@ -73,7 +81,15 @@ export default {
73 }, 81 },
74 data() { 82 data() {
75 return { 83 return {
76 - showModel: false 84 + showModel: false,
  85 + commandType: 'OneWay',
  86 + commandValue: JSON.stringify({
  87 + method: 'setGpio',
  88 + params: {
  89 + pin: 7,
  90 + value: 1
  91 + }
  92 + })
77 }; 93 };
78 }, 94 },
79 computed: { 95 computed: {
@@ -97,7 +113,7 @@ export default { @@ -97,7 +113,7 @@ export default {
97 // 隐藏原生的tabbar 113 // 隐藏原生的tabbar
98 uni.hideTabBar(); 114 uni.hideTabBar();
99 }, 115 },
100 - onMounted() { 116 + mounted() {
101 console.log(this.deviceDetail); 117 console.log(this.deviceDetail);
102 }, 118 },
103 methods: { 119 methods: {
@@ -107,8 +123,16 @@ export default { @@ -107,8 +123,16 @@ export default {
107 hiddenModal() { 123 hiddenModal() {
108 this.showModel = false; 124 this.showModel = false;
109 }, 125 },
110 - handleConfirm() {  
111 - console.log('确定'); 126 + async confirmCommand() {
  127 + try {
  128 + await issueCommand(this.commandType, this.deviceDetail.tbDeviceId, JSON.parse(this.commandValue));
  129 + this.hiddenModal()
  130 + } catch (e) {
  131 + uni.$u.toast('下发失败~');
  132 + }
  133 + },
  134 + cancelCommand() {
  135 + this.hiddenModal();
112 } 136 }
113 } 137 }
114 }; 138 };
@@ -146,4 +170,16 @@ export default { @@ -146,4 +170,16 @@ export default {
146 } 170 }
147 } 171 }
148 } 172 }
  173 +/deep/ .u-modal__content {
  174 + padding: 30rpx 0 !important;
  175 +}
  176 +
  177 +.button-group {
  178 + display: flex;
  179 + margin-top: 40rpx;
  180 + justify-content: space-between;
  181 + view {
  182 + width: 300rpx;
  183 + }
  184 +}
149 </style> 185 </style>
@@ -5,21 +5,24 @@ @@ -5,21 +5,24 @@
5 <view class="historyData-top"> 5 <view class="historyData-top">
6 <u-form :label-style="{ 'font-size': '0rpx' }"> 6 <u-form :label-style="{ 'font-size': '0rpx' }">
7 <u-form-item @click="openCalendar"> 7 <u-form-item @click="openCalendar">
8 - <u-input v-model="timeData.selectTime" disabled disabledColor="#fff" placeholder="请选择日期" border="none"> 8 + <u-input v-model="timeData.selectTime" disabled disabledColor="#fff" placeholder="请选择日期" border="none" suffixIcon="arrow-down">
9 <template slot="prefix"> 9 <template slot="prefix">
10 <image class="icon" src="../../../static/can-der.png"></image> 10 <image class="icon" src="../../../static/can-der.png"></image>
11 </template> 11 </template>
12 </u-input> 12 </u-input>
13 </u-form-item> 13 </u-form-item>
14 <u-form-item @click="openTimeGap"> 14 <u-form-item @click="openTimeGap">
15 - <u-input v-model="timeData.getTimeGap" disabled disabledColor="#fff" placeholder="请选择时间区间" border="none"> 15 + <u-input v-model="timeData.getTimeGap" disabled disabledColor="#fff" placeholder="请选择时间区间" border="none" suffixIcon="arrow-down">
16 <template slot="prefix"> 16 <template slot="prefix">
17 <image class="icon" src="../../../static/time.png"></image> 17 <image class="icon" src="../../../static/time.png"></image>
18 </template> 18 </template>
19 </u-input> 19 </u-input>
20 </u-form-item> 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> 21 + <u-form-item @click="openType">
  22 + <u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled disabledColor="#377DFF0D" suffixIcon="arrow-down" />
  23 + </u-form-item>
22 </u-form> 24 </u-form>
  25 +
23 <view class="charts-box" v-show="historyData.length"> 26 <view class="charts-box" v-show="historyData.length">
24 <qiun-data-charts 27 <qiun-data-charts
25 type="area" 28 type="area"
@@ -29,29 +32,19 @@ @@ -29,29 +32,19 @@
29 :opts="{ xAxis: { disabled: true }, legend: { show: false } }" 32 :opts="{ xAxis: { disabled: true }, legend: { show: false } }"
30 /> 33 />
31 </view> 34 </view>
32 - <view v-if="!historyData.length" style="display: flex;justify-content: center; align-items: center;">  
33 - <view>  
34 - <image src="../../../static/empty.png" style="width: 160rpx;height: 160rpx;" />  
35 - <view style="text-align: center; color:#e8e8e8;padding-bottom: 30rpx;">暂无数据</view>  
36 - </view>  
37 - </view> 35 + <mescroll-empty v-if="!historyData.length"/>
38 </view> 36 </view>
39 <view class="historyData-bottom"> 37 <view class="historyData-bottom">
40 <view class="table"> 38 <view class="table">
41 - <view class="tr bg-w"> 39 + <view class="tr bg-w" v-if="historyData.length">
42 <view class="th">变量值</view> 40 <view class="th">变量值</view>
43 <view class="th">更新时间</view> 41 <view class="th">更新时间</view>
44 </view> 42 </view>
45 - <view class="tr bg-g" :class="{ odd: index % 2 === 1 }" v-for="(item, index) in historyData" :key="index"> 43 + <view class="tr bg-g" :class="{ odd: index % 2 === 0 }" v-for="(item, index) in historyData" :key="index">
46 <view class="td">{{ item.value }}</view> 44 <view class="td">{{ item.value }}</view>
47 <view class="td">{{ item.ts }}</view> 45 <view class="td">{{ item.ts }}</view>
48 </view> 46 </view>
49 - <view v-if="!historyData.length" style="display: flex;justify-content: center">  
50 - <view>  
51 - <image src="../../../static/empty.png" style="width: 160rpx;height: 160rpx;" />  
52 - <view style="text-align: center; color:#e8e8e8;padding-bottom: 30rpx;">暂无数据</view>  
53 - </view>  
54 - </view> 47 + <mescroll-empty v-if="!historyData.length"/>
55 </view> 48 </view>
56 </view> 49 </view>
57 <u-calendar 50 <u-calendar
@@ -84,7 +77,7 @@ @@ -84,7 +77,7 @@
84 <script> 77 <script>
85 import fTabbar from '@/components/module/f-tabbar/f-tabbar'; 78 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
86 import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'; 79 import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
87 -import { getHistroyData } from '../api/index.js'; 80 +import { getHistoryData } from '../api/index.js';
88 import { formatToDate } from '@/plugins/utils.js'; 81 import { formatToDate } from '@/plugins/utils.js';
89 const d = new Date(); 82 const d = new Date();
90 const year = d.getFullYear(); 83 const year = d.getFullYear();
@@ -194,7 +187,7 @@ export default { @@ -194,7 +187,7 @@ export default {
194 this.chartData.series = [ 187 this.chartData.series = [
195 { 188 {
196 name: this.keys[0][0], 189 name: this.keys[0][0],
197 - data: this.historyData.map(item => Number(item.value)) 190 + data: this.getHistoryData.map(item => Number(item.value))
198 } 191 }
199 ]; 192 ];
200 } 193 }
@@ -332,7 +325,7 @@ export default { @@ -332,7 +325,7 @@ export default {
332 this.showSelectType = false; 325 this.showSelectType = false;
333 this.timeData.getType = time.value[0]; 326 this.timeData.getType = time.value[0];
334 const interval = this.columns[0].find(item => item.label === this.timeData.getTimeGap); 327 const interval = this.columns[0].find(item => item.label === this.timeData.getTimeGap);
335 - const data = await getHistroyData({ 328 + const data = await getHistoryData({
336 startTs: this.startTs, 329 startTs: this.startTs,
337 endTs: this.endTs, 330 endTs: this.endTs,
338 keys: this.timeData.getType, 331 keys: this.timeData.getType,
@@ -358,7 +351,7 @@ export default { @@ -358,7 +351,7 @@ export default {
358 .historyData-top { 351 .historyData-top {
359 padding: 30rpx; 352 padding: 30rpx;
360 background-color: #fff; 353 background-color: #fff;
361 - height: 870rpx; 354 + // height: 870rpx;
362 border-radius: 20rpx; 355 border-radius: 20rpx;
363 .icon { 356 .icon {
364 width: 28rpx; 357 width: 28rpx;
@@ -3,10 +3,11 @@ @@ -3,10 +3,11 @@
3 <view class="item" v-for="(item, index) in recordList" :key="index"> 3 <view class="item" v-for="(item, index) in recordList" :key="index">
4 <view class="item-top"> 4 <view class="item-top">
5 <view>{{ item.key }}</view> 5 <view>{{ item.key }}</view>
6 - <view>{{ item.value }}</view> 6 + <view class="item-value">{{ item.value }}</view>
7 </view> 7 </view>
8 <view class="item-time">{{ item.time }}</view> 8 <view class="item-time">{{ item.time }}</view>
9 </view> 9 </view>
  10 + <mescroll-empty v-if="!recordList.length" />
10 </view> 11 </view>
11 </template> 12 </template>
12 13
@@ -36,7 +37,10 @@ export default { @@ -36,7 +37,10 @@ export default {
36 color: #333; 37 color: #333;
37 font-size: 32rpx; 38 font-size: 32rpx;
38 font-family: PingFangSC-Medium, PingFang SC; 39 font-family: PingFangSC-Medium, PingFang SC;
39 - font-weight: 500; 40 + font-weight: bold;
  41 + .item-value {
  42 + font-weight: bold;
  43 + }
40 } 44 }
41 .item-time { 45 .item-time {
42 margin-top: 4rpx; 46 margin-top: 4rpx;
@@ -202,8 +202,6 @@ export default { @@ -202,8 +202,6 @@ export default {
202 this.loadData(1, { 202 this.loadData(1, {
203 deviceState: statusT 203 deviceState: statusT
204 }); 204 });
205 - } else {  
206 - this.loadData(1);  
207 } 205 }
208 }, 206 },
209 onShow() { 207 onShow() {

1014 Bytes | W: | H:

996 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin