|
|
|
@ -1,67 +1,47 @@ |
|
|
|
<template> |
|
|
|
<view @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd"> |
|
|
|
<refresh ref="refresh" @isRefresh='isRefresh'></refresh> |
|
|
|
<mSearch :mode="2" button="inside" @search="search($event)" ></mSearch> |
|
|
|
|
|
|
|
<mSearch :mode="2" button="inside" @search="search($event)" backgroundColor="#0081ff"></mSearch> |
|
|
|
<nav-tab style="margin-top: -10upx;" textFlex :tab-list="tabList" :tabCur="tabCur" @change="tabChange" tab-class="text-center text-white bg-blue " select-class="text-white"></nav-tab> |
|
|
|
|
|
|
|
<view class="cu-list menu-avatar margin-top"> |
|
|
|
<view class="cu-list menu-avatar margin-top" v-for="(item,index) in deviceList" :key="index"> |
|
|
|
<view class="cu-item arrow"> |
|
|
|
<view class="cu-avatar round lg" style="background-image:url(/static/humiture.png);"></view> |
|
|
|
<view class="content padding-tb-sm"> |
|
|
|
<view> |
|
|
|
<text class="text-xl margin-left-xs">设备1</text> |
|
|
|
<text class="text-xl margin-left-xs">{{item.deviceNickName}}</text> |
|
|
|
</view> |
|
|
|
<view class="flex"> |
|
|
|
<text class="flex-sub iconfont icon-wendu text-blue text-xs margin-left-xs">10℃</text> |
|
|
|
<text class="flex-sub iconfont icon-shidu text-blue text-xs ">12%</text> |
|
|
|
<text class="flex-sub iconfont icon-wendu text-blue text-xs"> |
|
|
|
<text class="text-black">{{item.temp}}℃</text> |
|
|
|
</text> |
|
|
|
<text class="flex-sub iconfont icon-shidu text-blue text-xs "> |
|
|
|
<text class="text-black">{{item.rh}}%</text> |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="action"> |
|
|
|
<view class="text-grey text-xs">2019-08-01 22:20:09</view> |
|
|
|
<view class="text-grey text-xs">{{item.at}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<uni-list v-for="(item,index) in deviceList" :key="index"> |
|
|
|
<uni-list-item |
|
|
|
:title="item.deviceNickName" |
|
|
|
:note="item.deviceName" |
|
|
|
show-extra-icon |
|
|
|
:extra-icon="getExtraIcon(item.deviceStatus)" |
|
|
|
@click="handleClickItem(item)" |
|
|
|
></uni-list-item> |
|
|
|
</uni-list> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="vertical" @trigger="trigger"></uni-fab> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import refresh from '@/components/refresh/refresh.vue'; |
|
|
|
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'; |
|
|
|
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue'; |
|
|
|
import navTab from '@/components/wuc-tab/wuc-tab.vue'; |
|
|
|
import uniList from '@/components/uni-list/uni-list.vue'; |
|
|
|
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'; |
|
|
|
import uniFab from '@/components/uni-fab/uni-fab.vue'; |
|
|
|
import { getDeviceList } from '@/api/device.js'; |
|
|
|
import { getDeviceList,getDeviceLatestUpMessage } from '@/api/device.js'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
refresh, |
|
|
|
uniNavBar, |
|
|
|
mSearch, |
|
|
|
navTab, |
|
|
|
uniList, |
|
|
|
uniListItem, |
|
|
|
uniFab |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tabCur: 0, |
|
|
|
tabList: [{ name: '网关' }, { name: '终端' }], |
|
|
|
deviceList: [], |
|
|
|
pattern: { |
|
|
|
color: '#7A7E83', |
|
|
|
@ -70,12 +50,6 @@ export default { |
|
|
|
buttonColor:"#007AFF" |
|
|
|
}, |
|
|
|
content: [ |
|
|
|
{ |
|
|
|
iconPath: '/static/gateway.png', |
|
|
|
selectedIconPath: '/static/gateway.png', |
|
|
|
text: '添加网关', |
|
|
|
active: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
iconPath: '/static/dtu.png', |
|
|
|
selectedIconPath: '/static/dtu.png', |
|
|
|
@ -85,33 +59,27 @@ export default { |
|
|
|
] |
|
|
|
}; |
|
|
|
}, |
|
|
|
onLoad(e){ |
|
|
|
if(e.data !== undefined){ |
|
|
|
this.tabChange(e.data); |
|
|
|
}else{ |
|
|
|
this.fetchDeviceList(); |
|
|
|
} |
|
|
|
|
|
|
|
onLoad(){ |
|
|
|
this.fetchDeviceList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getExtraIcon(active){ |
|
|
|
let color = '#e6e6e6'; |
|
|
|
if(active === 1){ |
|
|
|
color = '#4cd964'; |
|
|
|
} |
|
|
|
return { color: color, size: '22', type: 'circle-filled'} |
|
|
|
}, |
|
|
|
fetchDeviceList(){ |
|
|
|
getDeviceList().then(response => { |
|
|
|
this.deviceList = [] |
|
|
|
if(response.data.list && response.data.list.length > 0){ |
|
|
|
response.data.list.forEach(item => { |
|
|
|
if(this.tabCur === 0 && item.isGateway === 1){ |
|
|
|
this.deviceList.push(item) |
|
|
|
}else if(this.tabCur === 1 && item.isGateway === 0){ |
|
|
|
|
|
|
|
this.deviceList.push(item) |
|
|
|
} |
|
|
|
getDeviceLatestUpMessage(item.productId,item.deviceName).then(res =>{ |
|
|
|
if(res.data && res.data.data && res.data.data.app && res.data.data.app.userdata && res.data.data.app.userdata.payload){ |
|
|
|
const userdata = new Buffer(res.data.data.app.userdata.payload, 'base64'); |
|
|
|
try{ |
|
|
|
const json = JSON.parse(userdata.toString()); |
|
|
|
Object.assign(item, json); |
|
|
|
item.at = new Date(res.data.timestamp).format('yyyy-MM-dd hh:mm:ss') |
|
|
|
this.deviceList.push(item) |
|
|
|
}catch(e){ |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
@ -144,29 +112,22 @@ export default { |
|
|
|
}) |
|
|
|
this.deviceList = tempList; |
|
|
|
}, |
|
|
|
tabChange(index) { |
|
|
|
this.tabCur = index; |
|
|
|
this.fetchDeviceList() |
|
|
|
}, |
|
|
|
handleClickItem(item){ |
|
|
|
uni.navigateTo({ |
|
|
|
url: `detail/index?productId=${item.productId}&deviceName=${item.deviceName}` |
|
|
|
}) |
|
|
|
}, |
|
|
|
trigger(e) { |
|
|
|
console.log(e); |
|
|
|
this.content[e.index].active = !e.item.active; |
|
|
|
uni.showModal({ |
|
|
|
title: '提示', |
|
|
|
content: `您${this.content[e.index].active?'选中了':'取消了'}${e.item.text}`, |
|
|
|
success: function(res) { |
|
|
|
if (res.confirm) { |
|
|
|
console.log('用户点击确定'); |
|
|
|
} else if (res.cancel) { |
|
|
|
console.log('用户点击取消'); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
console.log(e); |
|
|
|
this.content[e.index].active = !e.item.active; |
|
|
|
uni.scanCode({ |
|
|
|
onlyFromCamera: true, |
|
|
|
success: function (res) { |
|
|
|
console.log(res) |
|
|
|
console.log('条码类型：' + res.scanType); |
|
|
|
console.log('条码内容：' + res.result); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
