Showing
8 changed files
with
182 additions
and
114 deletions
| 1 | -{ | |
| 2 | - "id": "yyh-tab", | |
| 3 | - "name": "tab切换,自定义位置、颜色、数据", | |
| 4 | - "version": "1.0.1", | |
| 5 | - "description": "tab切换,自定义位置、颜色、数据(小程序、app、h5)", | |
| 6 | - "keywords": [ | |
| 7 | - "tab切换", | |
| 8 | - "自定义位置", | |
| 9 | - "颜色", | |
| 10 | - "数据" | |
| 11 | - ] | |
| 12 | -} | |
| \ No newline at end of file | ||
| 1 | +{ | |
| 2 | + "name": "thingskit-app", | |
| 3 | + "version": "1.0.0", | |
| 4 | + "description": "### 项目结构", | |
| 5 | + "main": "main.js", | |
| 6 | + "scripts": { | |
| 7 | + "test": "echo \"Error: no test specified\" && exit 1" | |
| 8 | + }, | |
| 9 | + "repository": { | |
| 10 | + "type": "git", | |
| 11 | + "url": "http://git.yuntengiot.com/huang/thingskit-app.git" | |
| 12 | + }, | |
| 13 | + "keywords": [], | |
| 14 | + "author": "", | |
| 15 | + "license": "ISC", | |
| 16 | + "dependencies": { | |
| 17 | + "moment": "^2.29.2" | |
| 18 | + } | |
| 19 | +} | ... | ... |
| ... | ... | @@ -23,9 +23,9 @@ |
| 23 | 23 | <image @click="openOrg" style="width: 6px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../static/right-arrow.png" /> |
| 24 | 24 | </view> |
| 25 | 25 | </view> |
| 26 | - <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 | 27 | <view class="device-list"> |
| 28 | - <view @click="openDeviceDetail(item.id)" class="list-item" v-for="item in list" :key="item.id"> | |
| 28 | + <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime)" class="list-item" v-for="item in list" :key="item.id"> | |
| 29 | 29 | <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;"> |
| 30 | 30 | <view style="width: 450rpx;text-align: left;"> |
| 31 | 31 | <text style="color:#333;font-size: 15px;">{{ item.name ? `设备名称:${item.name}` : '' }}</text> |
| ... | ... | @@ -77,7 +77,7 @@ import fTabbar from '@/components/module/f-tabbar/f-tabbar'; |
| 77 | 77 | import fNavbar from '@/components/module/f-navbar/f-navbar'; |
| 78 | 78 | import FilterItem from './FilterItem.vue'; |
| 79 | 79 | import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'; |
| 80 | -import {debounce} from '@/plugins/throttle.js' | |
| 80 | +import { debounce } from '@/plugins/throttle.js'; | |
| 81 | 81 | export default { |
| 82 | 82 | mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件) |
| 83 | 83 | components: { |
| ... | ... | @@ -153,7 +153,7 @@ export default { |
| 153 | 153 | } |
| 154 | 154 | ], |
| 155 | 155 | total: 0, |
| 156 | - list: [], | |
| 156 | + list: [] | |
| 157 | 157 | }; |
| 158 | 158 | }, |
| 159 | 159 | onLoad() { |
| ... | ... | @@ -216,9 +216,9 @@ export default { |
| 216 | 216 | openSearchDialog() { |
| 217 | 217 | this.show = true; |
| 218 | 218 | }, |
| 219 | - openDeviceDetail(id) { | |
| 219 | + openDeviceDetail(id, alarmStatus, lastOnlineTime) { | |
| 220 | 220 | uni.navigateTo({ |
| 221 | - url: `deviceDetail?id=${id}` | |
| 221 | + url: `deviceDetail?id=${id}&alarmStatus=${alarmStatus}&lastOnlineTime=${lastOnlineTime}` | |
| 222 | 222 | }); |
| 223 | 223 | }, |
| 224 | 224 | handleClickTag(currentIndex, list) { |
| ... | ... | @@ -241,11 +241,11 @@ export default { |
| 241 | 241 | }); |
| 242 | 242 | this.show = false; |
| 243 | 243 | }, |
| 244 | - inputChanged:debounce(function(name){ | |
| 245 | - this.loadData(1,{ | |
| 244 | + inputChanged: debounce(function(name) { | |
| 245 | + this.loadData(1, { | |
| 246 | 246 | name |
| 247 | - }) | |
| 248 | - },500) | |
| 247 | + }); | |
| 248 | + }, 500) | |
| 249 | 249 | } |
| 250 | 250 | }; |
| 251 | 251 | </script> | ... | ... |
| ... | ... | @@ -3,11 +3,13 @@ |
| 3 | 3 | <!-- 公共组件-每个页面必须引入 --> |
| 4 | 4 | <public-module></public-module> |
| 5 | 5 | <u-sticky bgColor="#fff"><u-tabs :list="list" :current="currentTab" @click="handleTabClick"></u-tabs></u-sticky> |
| 6 | - <view style="margin-top:30rpx;" v-show="currentTab == 0"><basicInfo /></view> | |
| 7 | - <view style="margin-top:30rpx;" v-show="currentTab == 1"><realTimeData /></view> | |
| 8 | - <view style="margin-top:30rpx;" v-show="currentTab == 2"><historyData /></view> | |
| 9 | - <view style="margin-top:30rpx;" v-show="currentTab == 3"><alertHistory /></view> | |
| 10 | - <view style="margin-top:30rpx;" v-show="currentTab == 4"><commondRecord /></view> | |
| 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" /> | |
| 12 | + </view> | |
| 11 | 13 | <f-tabbar></f-tabbar> |
| 12 | 14 | </view> |
| 13 | 15 | </template> |
| ... | ... | @@ -17,7 +19,7 @@ import fTabbar from '@/components/module/f-tabbar/f-tabbar'; |
| 17 | 19 | import Tab from '@/components/yyh-tab/Tab.vue'; |
| 18 | 20 | import basicInfo from './tabDetail/basicInfo.vue'; |
| 19 | 21 | import realTimeData from './tabDetail/realtimeData.vue'; |
| 20 | -import alertHistory from './tabDetail/alertHistory.vue'; | |
| 22 | +import alarmHistory from './tabDetail/alarmHistory.vue'; | |
| 21 | 23 | import historyData from './tabDetail/historyData.vue'; |
| 22 | 24 | import commondRecord from './tabDetail/commondRecord.vue'; |
| 23 | 25 | |
| ... | ... | @@ -27,28 +29,63 @@ export default { |
| 27 | 29 | Tab, |
| 28 | 30 | basicInfo, |
| 29 | 31 | realTimeData, |
| 30 | - alertHistory, | |
| 32 | + alarmHistory, | |
| 31 | 33 | historyData, |
| 32 | 34 | commondRecord |
| 33 | 35 | }, |
| 34 | 36 | data() { |
| 35 | 37 | return { |
| 36 | 38 | list: [{ name: '基础信息' }, { name: '实时数据' }, { name: '历史数据' }, { name: '告警记录' }, { name: '命令记录' }], |
| 37 | - currentTab:0, | |
| 39 | + currentTab: 2, | |
| 38 | 40 | id: '', |
| 41 | + deviceDetail: {} | |
| 39 | 42 | }; |
| 40 | 43 | }, |
| 41 | - onLoad(options) { | |
| 42 | - const { id } = options; | |
| 43 | - this.id = id; | |
| 44 | - console.log(this.id); | |
| 45 | - // 隐藏原生的tabbar | |
| 44 | + async onLoad(options) { | |
| 45 | + const { id, alarmStatus, lastOnlineTime } = options; | |
| 46 | + const res = await uni.$u.http.get(`/yt/device/${id}`); | |
| 47 | + this.deviceDetail = { ...res, alarmStatus, lastOnlineTime }; | |
| 48 | + | |
| 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); | |
| 58 | + // }); | |
| 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 | + }); | |
| 82 | + // 隐藏原生的tabbar' | |
| 46 | 83 | uni.hideTabBar(); |
| 47 | 84 | }, |
| 48 | 85 | methods: { |
| 49 | - handleTabClick({index}){ | |
| 86 | + handleTabClick({ index }) { | |
| 50 | 87 | this.currentTab = index; |
| 51 | 88 | } |
| 52 | 89 | } |
| 53 | 90 | }; |
| 54 | -</script> | |
| \ No newline at end of file | ||
| 91 | +</script> | ... | ... |
pages/device/tabDetail/alarmHistory.vue
renamed from
pages/device/tabDetail/alertHistory.vue
| 1 | -<template> | |
| 2 | - <view class="basic-page"> | |
| 3 | - <!-- 公共组件-每个页面必须引入 --> | |
| 4 | - <public-module /> | |
| 1 | +<template> | |
| 2 | + <view class="basic-page"> | |
| 3 | + <!-- 公共组件-每个页面必须引入 --> | |
| 4 | + <public-module /> | |
| 5 | 5 | <view class="u-flex" style="justify-content: space-between;height: 140rpx;background-color: #fff;border-radius: 18px;"> |
| 6 | 6 | <view class="u-flex"> |
| 7 | 7 | <view style="margin-left: 20rpx;"> |
| 8 | - 网关设备1 | |
| 8 | + {{deviceDetail.name}} | |
| 9 | 9 | </view> |
| 10 | - <view style="margin-left: 20rpx; font-size: 14px;color:#377DFF;"> | |
| 11 | - 在线 | |
| 10 | + <view style="margin-left: 20rpx; font-size: 14px;" :style="{color:deviceDetail.deviceState==='INACTIVE'?'#666':deviceDetail.deviceState==='ONLINE'?'#377DFF':'#DE4437'}"> | |
| 11 | + {{deviceDetail.deviceState==='INACTIVE'?'未激活':deviceDetail.deviceState==='ONLINE'?'在线':'离线'}} | |
| 12 | 12 | </view> |
| 13 | 13 | </view> |
| 14 | 14 | <view style="margin-right: 20rpx;"> |
| 15 | 15 | <u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModal"/> |
| 16 | - </view> | |
| 17 | - </view> | |
| 18 | - <view style="margin-top: 40rpx;height: 577rpx;background-color: #fff;border-radius: 20px;"> | |
| 19 | - <u-list> | |
| 20 | - <u-list-item v-for="(item, index) in indexList" :key="index"> | |
| 21 | - <u-cell :title="item.name1"> | |
| 22 | - <view slot="icon">{{item.name1}}</view> | |
| 16 | + </view> | |
| 17 | + </view> | |
| 18 | + <view style="margin-top: 40rpx;height: 577rpx;background-color: #fff;border-radius: 20px;"> | |
| 19 | + <u-list> | |
| 20 | + <u-list-item> | |
| 21 | + | |
| 22 | + <u-cell :title="deviceDetail.sn"> | |
| 23 | + <view slot="icon">设备编号</view> | |
| 24 | + </u-cell> | |
| 25 | + </u-list-item> | |
| 26 | + <u-list-item> | |
| 27 | + <u-cell :title="deviceType"> | |
| 28 | + <view slot="icon">设备类型</view> | |
| 29 | + </u-cell> | |
| 30 | + </u-list-item> | |
| 31 | + <u-list-item> | |
| 32 | + <u-cell :title="deviceDetail.organizationDTO.name"> | |
| 33 | + <view slot="icon">所属组织</view> | |
| 34 | + </u-cell> | |
| 35 | + </u-list-item> | |
| 36 | + <u-list-item> | |
| 37 | + <u-cell :title="formatLastOnlineTime"> | |
| 38 | + <view slot="icon">最后连接时间</view> | |
| 39 | + </u-cell> | |
| 40 | + </u-list-item> | |
| 41 | + <u-list-item> | |
| 42 | + <u-cell :title="alarmStatus"> | |
| 43 | + <view slot="icon">是否告警</view> | |
| 23 | 44 | </u-cell> |
| 24 | - </u-list-item> | |
| 25 | - </u-list> | |
| 26 | - </view> | |
| 27 | - <!-- 下发指令 --> | |
| 28 | - <u-modal :show="showModel" title="命令下发" closeOnClickOverlay showCancelButton @close="hiddenModal" @cancel="hiddenModal" @confirm="handleConfirm" > | |
| 29 | - <u--textarea placeholder="请输入命令内容" v-model="formModel.intro" count /> | |
| 30 | - </u-modal> | |
| 31 | - <f-tabbar /> | |
| 32 | - </view> | |
| 33 | -</template> | |
| 34 | - | |
| 35 | -<script> | |
| 36 | - | |
| 37 | -export default { | |
| 38 | - data() { | |
| 39 | - return { | |
| 40 | - formModel: { | |
| 41 | - intro: '' | |
| 42 | - }, | |
| 43 | - showModel: false, | |
| 44 | - indexList: [ | |
| 45 | - { | |
| 46 | - id: 1, | |
| 47 | - name1: '设备编号', | |
| 48 | - value1: 'SN98652320AOL5' | |
| 49 | - }, | |
| 50 | - { | |
| 51 | - name1: '设备类型', | |
| 52 | - value1: '网关子设备' | |
| 53 | - }, | |
| 54 | - { | |
| 55 | - name1: '所属组织', | |
| 56 | - value1: '1-59-25栏位' | |
| 57 | - }, | |
| 58 | - { | |
| 59 | - name1: '最后连接时间', | |
| 60 | - value1: '2022-01-25 12:53:22' | |
| 61 | - }, | |
| 62 | - { | |
| 63 | - name1: '是否告警', | |
| 64 | - value1: '否' | |
| 65 | - }, | |
| 66 | - { | |
| 67 | - name1: '设备描述', | |
| 68 | - value1: '设备无任何问题,运行稳定' | |
| 69 | - } | |
| 70 | - ] | |
| 71 | - }; | |
| 72 | - }, | |
| 73 | - onLoad(e) { | |
| 74 | - // 隐藏原生的tabbar | |
| 75 | - uni.hideTabBar(); | |
| 76 | - }, | |
| 77 | - methods: { | |
| 78 | - showModal() { | |
| 79 | - this.showModel = true; | |
| 45 | + </u-list-ite> | |
| 46 | + <u-cell :title="deviceDetail.description"> | |
| 47 | + <view slot="icon">设备描述</view> | |
| 48 | + </u-cell> | |
| 49 | + </u-list-item> | |
| 50 | + </u-list> | |
| 51 | + </view> | |
| 52 | + <!-- 下发指令 --> | |
| 53 | + <u-modal :show="showModel" title="命令下发" closeOnClickOverlay showCancelButton @close="hiddenModal" @cancel="hiddenModal" @confirm="handleConfirm" > | |
| 54 | + <u--textarea placeholder="请输入命令内容" v-model="formModel.intro" count /> | |
| 55 | + </u-modal> | |
| 56 | + <f-tabbar /> | |
| 57 | + </view> | |
| 58 | +</template> | |
| 59 | + | |
| 60 | +<script> | |
| 61 | +import {formatToDate} from '@/plugins/utils.js'; | |
| 62 | +export default { | |
| 63 | + props:{ | |
| 64 | + deviceDetail:{ | |
| 65 | + type:Object, | |
| 66 | + default:()=>({}), | |
| 67 | + } | |
| 68 | + }, | |
| 69 | + data() { | |
| 70 | + return { | |
| 71 | + showModel: false, | |
| 72 | + }; | |
| 73 | + }, | |
| 74 | + computed:{ | |
| 75 | + deviceType(){ | |
| 76 | + return this.deviceDetail.deviceType==='DIRECT_CONNECTION'?'直连设备':this.deviceDetail.deviceType==='GATEWAY'?'网关设备':this.deviceDetail.deviceType==='SENSOR'?'网关子设备':'' | |
| 77 | + }, | |
| 78 | + alarmStatus(){ | |
| 79 | + return this.deviceDetail.alarmStatus === '0'?'否':'是' | |
| 80 | + }, | |
| 81 | + formatLastOnlineTime(){ | |
| 82 | + return formatToDate(Number(this.deviceDetail.lastOnlineTime),'YYYY-MM-DD HH:mm:ss') | |
| 83 | + } | |
| 84 | + }, | |
| 85 | + onLoad(e) { | |
| 86 | + // 隐藏原生的tabbar | |
| 87 | + uni.hideTabBar(); | |
| 88 | + }, | |
| 89 | + onMounted(){ | |
| 90 | + console.log(this.deviceDetail) | |
| 91 | + | |
| 92 | + }, | |
| 93 | + methods: { | |
| 94 | + showModal() { | |
| 95 | + this.showModel = true; | |
| 80 | 96 | }, |
| 81 | 97 | hiddenModal(){ |
| 82 | 98 | this.showModel = false; |
| 83 | - }, | |
| 99 | + }, | |
| 84 | 100 | handleConfirm(){ |
| 85 | 101 | console.log('确定') |
| 86 | - } | |
| 87 | - } | |
| 88 | -}; | |
| 89 | -</script> | |
| 102 | + } | |
| 103 | + } | |
| 104 | +}; | |
| 105 | +</script> | ... | ... |
| 1 | -import Vue from 'vue'; | |
| 1 | +import Vue from 'vue'; | |
| 2 | +import moment from 'moment'; | |
| 2 | 3 | // #ifdef APP-PLUS |
| 3 | 4 | import {judgePermission} from './permission' |
| 4 | 5 | // #endif |
| 6 | +const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'; | |
| 5 | 7 | //金额过滤 |
| 6 | 8 | Vue.filter('money', function(val) { |
| 7 | 9 | if (val) { |
| ... | ... | @@ -230,4 +232,8 @@ export const getAppLatLon = function(successCallback, errCallback, isOpenSetting |
| 230 | 232 | } |
| 231 | 233 | }); |
| 232 | 234 | // #endif |
| 235 | +} | |
| 236 | + | |
| 237 | +export function formatToDate(date = undefined, format = DATE_TIME_FORMAT) { | |
| 238 | + return moment(date).format(format); | |
| 233 | 239 | } |
| \ No newline at end of file | ... | ... |