简柏林 / thingskit-app · Commits

Commit d9a25cd80a67955dc9df466f82f4630effcee0dc

Authored by sqy
1 parent da3c5e94

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

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 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 2 <view class="device-detail-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 19 <view style="margin-top:30rpx;">
7 20 <basicInfo v-show="currentTab == 0" :deviceDetail="deviceDetail" />
8 21 <realTimeData v-show="currentTab === 1" :recordList="recordList" />
... ... @@ -14,14 +27,13 @@
14 27 :timeDiff="timeDiff"
15 28 :historyData="historyData"
16 29 :entityId="entityId"
17   - @update="handleUpdate"
18 30 :start="startTs"
19 31 :end="endTs"
  32 + @update="handleUpdate"
20 33 />
21 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 36 </view>
24   - <f-tabbar></f-tabbar>
25 37 </view>
26 38 </template>
27 39
... ... @@ -32,7 +44,7 @@ import realTimeData from './tabDetail/realtimeData.vue';
32 44 import alarmHistory from './tabDetail/alarmHistory.vue';
33 45 import historyData from './tabDetail/historyData.vue';
34 46 import commondRecord from './tabDetail/CommandRecord.vue';
35   -import { getDeviceKeys, getHistroyData } from './api/index.js';
  47 +import { getDeviceKeys, getHistoryData } from './api/index.js';
36 48 import { formatToDate } from '@/plugins/utils.js';
37 49 export default {
38 50 components: {
... ... @@ -60,12 +72,16 @@ export default {
60 72 recordList: []
61 73 };
62 74 },
  75 + onUnload(){
  76 + // 页面关闭时,销毁webSocket连接,否则第二次会存在连接不到的情况
  77 + uni.closeSocket();
  78 + },
63 79 async onLoad(options) {
64 80 const { id, alarmStatus, lastOnlineTime, tbDeviceId } = options;
65 81 this.deviceId = id;
66   - console.log(this.deviceId);
67 82 const res = await uni.$u.http.get(`/yt/device/${id}`);
68 83 this.deviceDetail = { ...res, alarmStatus, lastOnlineTime };
  84 + // 连接webSockte
69 85 const socketTask = uni.connectSocket({
70 86 url: 'wss://dev.thingskit.com/api/ws/plugins/telemetry?token=' + uni.getStorageSync('userInfo').isToken, //仅为示例，并非真实接口地址。
71 87 complete: () => {}
... ... @@ -118,7 +134,6 @@ export default {
118 134 this.recordList.unshift(item);
119 135 }
120 136 });
121   -
122 137 this.recordList = this.recordList.map(item => {
123 138 return {
124 139 ...item,
... ... @@ -134,13 +149,14 @@ export default {
134 149 const month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
135 150 const day = date.getDate(); //获取当前日(1-31)
136 151 const yesterday = `${year}-${month}-${day - 1}`;
137   - const today = `${year}-${month}-${day + 1}`;
  152 + const today = `${year}-${month}-${day}`;
138 153 this.yesterday = yesterday;
139 154 this.today = today;
140 155 this.startTs = formatToDate(yesterday, 'x');
141 156 this.endTs = formatToDate(today, 'x');
142 157 this.entityId = tbDeviceId;
143   - const data = await getHistroyData({
  158 + console.log(this.entityId)
  159 + const data = await getHistoryData({
144 160 entityId: tbDeviceId,
145 161 startTs: formatToDate(yesterday, 'x'),
146 162 endTs: formatToDate(today, 'x'),
... ... @@ -148,14 +164,16 @@ export default {
148 164 interval: 1800000
149 165 });
150 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 178 methods: {
161 179 handleTabClick({ index }) {
... ... @@ -166,21 +184,22 @@ export default {
166 184 this.historyData = [];
167 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 200 <style lang="scss" scoped>
181   -
182   - .device-detail-page{
183   - height: 100vh;
184   - background-color: #f8f9fa;
185   - }
186   -</style>
\ No newline at end of file
  201 +.device-detail-page {
  202 + height: 100vh;
  203 + background-color: #f8f9fa;
  204 +}
  205 +</style>
... ...
... ... @@ -8,7 +8,7 @@
8 8 </view>
9 9 <view @click="openSearchDialog" class="search-right">
10 10 <text>筛选</text>
11   - <image src="../../static/shaixuan.png" />
  11 + <image src="../../../static/shaixuan.png" />
12 12 </view>
13 13 </view>
14 14 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
... ... @@ -31,16 +31,16 @@
31 31 </view>
32 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 37 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
38 38 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem>
39 39 <FilterItem :filterList="alarmLevelStatus" title="告警等级" @clickTag="currentIndex => handleClickTag(currentIndex, alarmLevelStatus)"></FilterItem>
40 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 44 </view>
45 45 </view>
46 46 </u-popup>
... ... @@ -65,16 +65,16 @@ export default {
65 65 FilterItem
66 66 },
67 67 props: {
68   - deviceId: {
  68 + tbDeviceId: {
69 69 type: String,
70 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 78 data() {
79 79 return {
80 80 show: false,
... ... @@ -198,7 +198,7 @@ export default {
198 198 },
199 199 page: {
200 200 num: 0,
201   - sizie: 10
  201 + size: 10
202 202 }
203 203 };
204 204 },
... ... @@ -209,7 +209,7 @@ export default {
209 209 this.list = [];
210 210 this.page.num = 1;
211 211 this.loadData(this.page.num, {
212   - deviceId: this.deviceId
  212 + tbDeviceId: this.tbDeviceId
213 213 });
214 214 },
215 215 /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
... ... @@ -217,7 +217,7 @@ export default {
217 217 //联网加载数据
218 218 this.page.num += 1;
219 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 228 pageSize: 10
229 229 };
230 230 uni.$u.http
231   - .get('/yt/alarm', {
  231 + .get('/yt/rpc', {
232 232 params: httpData,
233 233 custom: {
234 234 load: false
... ... @@ -315,7 +315,6 @@ export default {
315 315 <style lang="scss" scoped>
316 316 .command-record {
317 317 padding: 0 20rpx;
318   -
319 318 .search {
320 319 display: flex;
321 320 justify-content: space-between;
... ... @@ -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 398 </style>
... ...
1 1 <template>
2 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 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 9 <view @click="openDeviceDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
8 10 <view class="item">
9 11 <view class="item-first">
10   - <text>{{ item.deviceName }}</text>
  12 + <text style="font-weight: bold;">{{ item.deviceName }}</text>
11 13 <view class="item-right">
12 14 <image
13 15 :src="
... ... @@ -42,7 +44,7 @@
42 44 </text>
43 45 </view>
44 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 48 <view v-if="item.status">
47 49 告警状态:{{
48 50 item.status === 'CLEARED_UNACK' ? '清除未确认' : item.status === 'CLEARED_ACK' ? '清除已确认' : item.status === 'ACTIVE_UNACK' ? '激活未确认' : '激活已确认'
... ... @@ -53,16 +55,16 @@
53 55 </view>
54 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 61 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
60 62 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem>
61 63 <FilterItem :filterList="alarmLevelStatus" title="告警等级" @clickTag="currentIndex => handleClickTag(currentIndex, alarmLevelStatus)"></FilterItem>
62 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 68 </view>
67 69 </view>
68 70 </u-popup>
... ... @@ -74,7 +76,6 @@
74 76 startText="开始时间"
75 77 endText="结束时间"
76 78 confirmDisabledText="请选择日期"
77   - :formatter="formatter"
78 79 ></u-calendar>
79 80 </view>
80 81 </template>
... ... @@ -92,11 +93,6 @@ export default {
92 93 default: ''
93 94 }
94 95 },
95   - mounted() {
96   - this.loadData(1, {
97   - deviceId: this.deviceId
98   - });
99   - },
100 96 data() {
101 97 return {
102 98 show: false,
... ... @@ -336,8 +332,24 @@ export default {
336 332 </script>
337 333
338 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 351 .alert-page {
340   - padding: 20rpx;
  352 + padding: 0 30rpx;
341 353 .list-item {
342 354 width: 690rpx;
343 355 height: 262rpx;
... ... @@ -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 12 {{ deviceDetail.deviceState === 'INACTIVE' ? '待激活' : deviceDetail.deviceState === 'ONLINE' ? '在线' : '离线' }}
13 13 </view>
14 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 16 </view>
17 17 <view class="detail">
18 18 <view class="detail-item">
... ... @@ -47,16 +47,23 @@
47 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 59 </u-radio-group>
58 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 67 </view>
61 68 </u-modal>
62 69 </view>
... ... @@ -64,6 +71,7 @@
64 71
65 72 <script>
66 73 import { formatToDate } from '@/plugins/utils.js';
  74 +import { issueCommand } from '../api/index.js';
67 75 export default {
68 76 props: {
69 77 deviceDetail: {
... ... @@ -73,7 +81,15 @@ export default {
73 81 },
74 82 data() {
75 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 95 computed: {
... ... @@ -97,7 +113,7 @@ export default {
97 113 // 隐藏原生的tabbar
98 114 uni.hideTabBar();
99 115 },
100   - onMounted() {
  116 + mounted() {
101 117 console.log(this.deviceDetail);
102 118 },
103 119 methods: {
... ... @@ -107,8 +123,16 @@ export default {
107 123 hiddenModal() {
108 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 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 185 </style>
... ...
... ... @@ -5,21 +5,24 @@
5 5 <view class="historyData-top">
6 6 <u-form :label-style="{ 'font-size': '0rpx' }">
7 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 9 <template slot="prefix">
10 10 <image class="icon" src="../../../static/can-der.png"></image>
11 11 </template>
12 12 </u-input>
13 13 </u-form-item>
14 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 16 <template slot="prefix">
17 17 <image class="icon" src="../../../static/time.png"></image>
18 18 </template>
19 19 </u-input>
20 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 24 </u-form>
  25 +
23 26 <view class="charts-box" v-show="historyData.length">
24 27 <qiun-data-charts
25 28 type="area"
... ... @@ -29,29 +32,19 @@
29 32 :opts="{ xAxis: { disabled: true }, legend: { show: false } }"
30 33 />
31 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 36 </view>
39 37 <view class="historyData-bottom">
40 38 <view class="table">
41   - <view class="tr bg-w">
  39 + <view class="tr bg-w" v-if="historyData.length">
42 40 <view class="th">变量值</view>
43 41 <view class="th">更新时间</view>
44 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 44 <view class="td">{{ item.value }}</view>
47 45 <view class="td">{{ item.ts }}</view>
48 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 48 </view>
56 49 </view>
57 50 <u-calendar
... ... @@ -84,7 +77,7 @@
84 77 <script>
85 78 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
86 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 81 import { formatToDate } from '@/plugins/utils.js';
89 82 const d = new Date();
90 83 const year = d.getFullYear();
... ... @@ -194,7 +187,7 @@ export default {
194 187 this.chartData.series = [
195 188 {
196 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 325 this.showSelectType = false;
333 326 this.timeData.getType = time.value[0];
334 327 const interval = this.columns[0].find(item => item.label === this.timeData.getTimeGap);
335   - const data = await getHistroyData({
  328 + const data = await getHistoryData({
336 329 startTs: this.startTs,
337 330 endTs: this.endTs,
338 331 keys: this.timeData.getType,
... ... @@ -358,7 +351,7 @@ export default {
358 351 .historyData-top {
359 352 padding: 30rpx;
360 353 background-color: #fff;
361   - height: 870rpx;
  354 + // height: 870rpx;
362 355 border-radius: 20rpx;
363 356 .icon {
364 357 width: 28rpx;
... ...
... ... @@ -3,10 +3,11 @@
3 3 <view class="item" v-for="(item, index) in recordList" :key="index">
4 4 <view class="item-top">
5 5 <view>{{ item.key }}</view>
6   - <view>{{ item.value }}</view>
  6 + <view class="item-value">{{ item.value }}</view>
7 7 </view>
8 8 <view class="item-time">{{ item.time }}</view>
9 9 </view>
  10 + <mescroll-empty v-if="!recordList.length" />
10 11 </view>
11 12 </template>
12 13
... ... @@ -36,7 +37,10 @@ export default {
36 37 color: #333;
37 38 font-size: 32rpx;
38 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 45 .item-time {
42 46 margin-top: 4rpx;
... ...
... ... @@ -202,8 +202,6 @@ export default {
202 202 this.loadData(1, {
203 203 deviceState: statusT
204 204 });
205   - } else {
206   - this.loadData(1);
207 205 }
208 206 },
209 207 onShow() {
... ...

1014 Bytes | W: | H:

996 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin