App/app-govern
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面切图

Browse Source
This commit is contained in:
仲么了
2023-02-23 08:44:46 +08:00
parent 95db305cee
commit 89f0e79ceb
25 changed files with 830 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
pages/device/APF/comp/basic.vue
View File

@@ -1,5 +1,31 @@
<template>
<view class='basic'>
<view class="grid-card">
<view class="grid-card-title">模块</view>
<view class="grid-card-content-4">
<view class="item item-title">名称</view>
<view class="item item-title">实际输出电流（A）</view>
<view class="item item-title">总谐波电流（A）</view>
<view class="item item-title">总谐波电压（V）</view>
<view class="item">模块1</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
<view class="item">模块2</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
<view class="item">模块3</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
<view class="item">模块4</view>
<view class="item">300</view>
<view class="item">200</view>
<view class="item">110</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">电网电流</view>
<view class="grid-card-content-4">

61
pages/device/APF/comp/module.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<view class='basic'>
<view class="grid-card">
<view class="grid-card-content-2">
<view class="item">模块一</view>
<view class="item">
<view style="padding:20rpx 0">
实际输出电流：300A
<view></view>
总谐波电流：200A
<view></view>
总谐波电压：110v
</view>
</view>
<view class="item">模块二</view>
<view class="item">
<view style="padding:20rpx 0">
实际输出电流：300A
<view></view>
总谐波电流：200A
<view></view>
总谐波电压：110v
</view>
</view>
<view class="item">模块三</view>
<view class="item">
<view style="padding:20rpx 0">
实际输出电流：300A
<view></view>
总谐波电流：200A
<view></view>
总谐波电压：110v
</view>
</view>
<view class="item">模块四</view>
<view class="item">
<view style="padding:20rpx 0">
实际输出电流：300A
<view></view>
总谐波电流：200A
<view></view>
总谐波电压：110v
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

127
pages/device/APF/detail.vue
View File

@@ -4,19 +4,57 @@
<view class='detail'>
<view class="detail-header">
<view class="header">
<image src="/static/test2.pic.jpg" mode="widthFix" style="width: 100%;" />
<image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
<view class="point" :style="{ left: '480rpx', top: '130rpx' }">负载THDI:<view></view>1703. 384%</view>
<view class="point" :style="{ left: '200rpx', top: '130rpx' }">电网THDI:<view></view>80. 831%</view>
<view class="module">
<view class="grid-card">
<view class="grid-card-content-2">
<view class="item">模块一</view>
<view class="item">
实际输出电流：300A,
总谐波电流：200A,
总谐波电压：110v
</view>
<view class="item">模块二</view>
<view class="item">
<view>
实际输出电流：300A,
总谐波电流：200A,
总谐波电压：110v
</view>
</view>
<view class="item">模块三</view>
<view class="item">
<view>
实际输出电流：300A,
总谐波电流：200A,
总谐波电压：110v
</view>
</view>
<view class="item">模块四</view>
<view class="item">
<view>
实际输出电流：300A,
总谐波电流：200A,
总谐波电压：110v
</view>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="des">
<text>设备基础信息</text>
<text class="ml10">设备状态</text>
</view> -->
<view class="nav">
<view class="nav" style="margin-top:-10rpx">
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
</view>
<view class="content" >
<view class="content">
<view v-if="navMenuActive == 0">
<basic></basic>
</view>
@@ -36,9 +74,6 @@
</view>
<uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
@trigger="trigger" />
<uni-popup ref="share" type="share" background-color="#fff">
<uni-popup-share title="分享到"></uni-popup-share>
</uni-popup>
</view>
</view>
</Cn-page>
@@ -56,7 +91,7 @@ export default {
xieBo,
power,
oscillogram,
IO
IO,
},
data () {
return {
@@ -118,11 +153,15 @@ export default {
uni.navigateTo({ url: '/pages/device/feedback' })
} else if (e.item.text === '用户') {
uni.navigateTo({ url: '/pages/device/user' })
} else if (e.item.text === '报表') {
// uni.navigateTo({ url: '/pages/device/user' })
this.$util.toast('效果是直接打开报表')
}
this.$refs.fab.close()
},
navMenuClick (idx) {
this.navMenuActive = idx
uni.pageScrollTo({ scrollTop: 0, duration: 0 })
},
init () {
let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
@@ -136,18 +175,18 @@ export default {
break;
case 4:
this.content.splice(1, 0, {
iconPath: '/static/share.png',
text: '分享',
}, {
iconPath: '/static/subordinate.png',
text: '用户',
}, {
iconPath: '/static/delate.png',
text: '报表',
}, {
iconPath: '/static/table.png',
text: '删除',
})
break;
case 5:
this.content.push({
this.content.splice(2, 0, {
iconPath: '/static/table.png',
text: '报表',
}, {
iconPath: '/static/feedback.png',
text: '反馈',
})
@@ -174,7 +213,33 @@ export default {
.detail {
// background: $uni-theme-white;
.header {}
.header {
position: relative;
.point {
position: absolute;
color: #111;
z-index: 2;
text-align: center;
font-size: 20rpx;
color: #111;
}
.module {
position: absolute;
bottom: 0;
right: 0;
width: 300rpx;
.grid-card-content-2 {
font-size: 14rpx;
.item {
min-height: unset;
}
}
}
}
.des {
padding: 20rpx 20rpx 0;
@@ -182,44 +247,18 @@ export default {
color: #999;
}
// .nav {
// position: sticky;
// top: 0;
// left: 0;
// padding: 20rpx;
// display: flex;
// background: rgb(243, 244, 245);
// .nav-menu {
// padding: 10rpx 20rpx;
// margin-left: 20rpx;
// font-size: 28rpx;
// border-radius: 8rpx;
// background: $uni-theme-white;
// &:first-of-type {
// margin-left: 0;
// }
// &-active {
// background: $uni-theme-blue;
// color: #fff;
// }
// }
// }
.content {
box-sizing: border-box;
padding: 0 20rpx;
}
.detail-header{
.detail-header {
position: sticky;
top: 0;
left: 0;
z-index: 2;
background: #f3f4f5;
}
}
</style>

38
pages/device/DVR/detail.vue
View File

@@ -2,19 +2,21 @@
<Cn-page :loading='loading' noPadding>
<view slot='body'>
<view class='detail'>
<view class="header">
<image src="/static/test2.pic.jpg" mode="widthFix" style="width: 100%;" />
</view>
<view class="des">
<view class="detail-header">
<view class="header">
<image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
</view>
<!-- <view class="des">
<text>设备基础信息</text>
<text class="ml10">设备状态</text>
</view>
<view class="nav">
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view> -->
<view class="nav">
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
</view>
<view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
<view class="content">
<DianWang v-if="navMenuActive == 0"></DianWang>
<NiBian v-else-if="navMenuActive == 1"></NiBian>
<ShuChu v-else-if="navMenuActive == 2"></ShuChu>
@@ -25,9 +27,7 @@
</view>
<uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
@trigger="trigger" />
<uni-popup ref="share" type="share" background-color="#fff">
<uni-popup-share title="分享到"></uni-popup-share>
</uni-popup>
</view>
</view>
</Cn-page>
@@ -115,6 +115,7 @@ export default {
},
navMenuClick (idx) {
this.navMenuActive = idx
uni.pageScrollTo({ scrollTop: 0, duration: 0 })
},
init () {
let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
@@ -127,10 +128,7 @@ export default {
})
break;
case 4:
this.content.splice(0, 0, {
iconPath: '/static/share.png',
text: '分享',
}, {
this.content.splice(0, 0,{
iconPath: '/static/subordinate.png',
text: '用户',
}, {
@@ -205,6 +203,14 @@ export default {
padding: 0 20rpx;
}
.detail-header {
position: sticky;
top: 0;
left: 0;
z-index: 2;
background: #f3f4f5;
}
}
</style>

5
pages/device/list.vue
View File

@@ -1,10 +1,9 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='device-list'>
<uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 10" :key="item" @click="jump"
<view class='device-list device'>
<uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 10" :key="item" @click="jump" padding="0"
thumbnail="/static/real_time_data.png">
<text>设备基础信息 </text>
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
</view>

6
pages/device/new.vue
View File

@@ -37,7 +37,7 @@
<uni-forms-item label="拓扑图">
<view style="display:flex;">
<view style="flex:1">
<image class="gplot" src="/static/test2.pic.jpg" mode="aspectFill" />
<image class="gplot" src="/static/test2.pic.png" mode="aspectFill" />
</view>
<uni-icons type="image" color="#007aff" size="26" class="ml20" @click="chooseGplot"></uni-icons>
</view>
@@ -70,7 +70,7 @@
<scroll-view style="height: 100%;" scroll-y="true">
<view class="content">
<image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
src="/static/test2.pic.jpg" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
src="/static/test2.pic.png" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
<view class="btn-wrap">
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
<view class="btn-wrap-item ml20" @click="closeDrawer"> 确定 </view>
@@ -82,7 +82,7 @@
<scroll-view style="height: 100%;" scroll-y="true">
<view style="background:#fff">
<view class="map-pin-box">
<image class="gplot" mode="widthFix" src="/static/test2.pic.jpg" />
<image class="gplot" mode="widthFix" src="/static/test2.pic.png" />
<movable-area class="map-pin-box-area">
<movable-view :x="point.x" :y="point.y" direction="all" @change="dragPoint">

109
pages/gateway/detail.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<Cn-page :loading='loading' noPadding>
<view slot='body'>
<view class='detail device'>
<view class="header">
<image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
</view>
<view class="title">基本信息</view>
<view class="des">
<text>名称：监测网关</text>
<text class="ml20">项目：监测</text>
</view>
<view class="des">
<text>设备型号：PQS-882</text>
<text class="ml20">版本号：v1.0.0</text>
</view>
<view class="title mb20 m340">设备列表
<view class="footer-btn" @click="newDevice">注册设备</view>
</view>
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type"
v-for="(item, index) in deviceList" :key="index" style="margin-top:4rpx" @click="goDevice(item)"
thumbnail="/static/device.png" padding="0">
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
<view style="height:20rpx"></view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
deviceList: [
{
name: '设备1',
des: '设备描述1',
type: 'APF',
project: '监测',
},
{
name: '设备2',
des: '设备描述2',
type: 'DVR',
project: '监测'
},
]
}
},
methods: {
newDevice () {
uni.navigateTo({
url: '/pages/gateway/newDevice'
})
},
goDevice (item) {
uni.navigateTo({
url: `/pages/device/${item.type}/detail`
})
}
},
onLoad (options) {
},
}
</script>
<style lang='scss'>
.detail {
// background: $uni-theme-white;
.header {
position: relative;
}
.title {
display: flex;
justify-content: space-between;
padding: 20rpx 20rpx 0;
font-size: 36rpx;
color: #111;
font-weight: 700;
.footer-btn {
padding: 0 20rpx;
height: 50rpx;
background-color: #007aff;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
border-radius: 10rpx;
}
}
.des {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
color: #333;
}
.content {
box-sizing: border-box;
}
}</style>

33
pages/gateway/list.vue
View File

@@ -1,12 +1,21 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-card title="网关信息" sub-title="副标题" v-for="item in 3" :key="item" @click="jump"
thumbnail="/static/gateway.png">
<view class="footer">
<text>设备基础信息 </text>
<view class="footer-btn" @click="newDevice">注册设备</view>
<view class='index' :class="{ 'device': userInfo.role == '5' }">
<uni-card title="监测网关" sub-title="监测" @click="look" thumbnail="/static/gateway.png"
:padding="userInfo.role == '5' ? 0 : '10px'">
<view class="footer" v-if="userInfo.role != 5">
<text style="flex:1"> </text>
<view class="footer-btn" @click.stop="newDevice">注册设备</view>
<view class="footer-btn ml20">查看</view>
</view>
</uni-card>
<uni-card title="用能网关" sub-title="用能" @click="look" thumbnail="/static/gateway.png"
:padding="userInfo.role == '5' ? 0 : '10px'">
<view class="footer" v-if="userInfo.role != 5">
<text style="flex:1"> </text>
<view class="footer-btn" @click.stop="newDevice">注册设备</view>
<view class="footer-btn ml20">查看</view>
</view>
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
@@ -18,9 +27,13 @@
export default {
data () {
return {
loading: false
loading: false,
userInfo: {}
}
},
onLoad (options) {
this.userInfo = uni.getStorageSync('userInfo')
},
methods: {
newDevice () {
// uni.scanCode({
@@ -34,11 +47,17 @@ export default {
url: '/pages/gateway/newDevice'
})
},
look () {
uni.navigateTo({
url: '/pages/gateway/detail'
})
}
}
}
</script>
<style lang='scss'>
.index {
padding-top: 20rpx;
.footer {
display: flex;
justify-content: space-between;

4
pages/gateway/new.vue
View File

@@ -30,7 +30,7 @@
<uni-forms-item label="拓扑图">
<view style="display:flex;">
<view style="flex:1">
<image class="gplot" src="/static/test2.pic.jpg" mode="aspectFill" />
<image class="gplot" src="/static/test2.pic.png" mode="aspectFill" />
</view>
<uni-icons type="image" color="#007aff" size="26" class="ml20"
@click="chooseGplot"></uni-icons>
@@ -46,7 +46,7 @@
<scroll-view style="height: 100%;" scroll-y="true">
<view class="content">
<image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
src="/static/test2.pic.jpg" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
src="/static/test2.pic.png" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
<view class="btn-wrap">
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
<view class="btn-wrap-item ml20" @click="closeDrawer"> 确定 </view>

6
pages/gateway/newDevice.vue
View File

@@ -14,7 +14,7 @@
<uni-forms-item label="拓扑图">
<view style="display:flex;">
<view style="flex:1">
<image class="gplot" src="/static/test2.pic.jpg" mode="aspectFill" />
<image class="gplot" src="/static/test2.pic.png" mode="aspectFill" />
</view>
<uni-icons type="image" color="#007aff" size="26" class="ml20"
@click="chooseGplot(item)"></uni-icons>
@@ -38,7 +38,7 @@
<scroll-view style="height: 100%;" scroll-y="true">
<view class="content">
<image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
src="/static/test2.pic.jpg" @click="activeGplot = key" v-for="(item, key) in 3"
src="/static/test2.pic.png" @click="activeGplot = key" v-for="(item, key) in 3"
:key="key" />
<view class="btn-wrap">
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
@@ -51,7 +51,7 @@
<scroll-view style="height: 100%;" scroll-y="true">
<view style="background:#fff">
<view class="map-pin-box">
<image class="gplot" mode="widthFix" src="/static/test2.pic.jpg" />
<image class="gplot" mode="widthFix" src="/static/test2.pic.png" />
<movable-area class="map-pin-box-area">
<movable-view :x="point.x" :y="point.y" direction="all" @change="dragPoint">
<view class="point center">

134
pages/index/comp/indexGongCheng.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="index-gongcheng">
<view class="index-zhuyonghu">
<div class="header">
<div class="header-item">
<div class="header-item-value">3</div>
@@ -14,24 +14,124 @@
<div class="header-item-label">离线设备</div>
</div>
</div>
<uni-card title="基础设备" sub-title="副标题" :extra="item % 2 ? 'APF' : 'DVR'" v-for="item in 3" :key="item"
@click="jump(item)" thumbnail="/static/device.png">
<text>设备基础信息 </text>
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
<view style="padding:20rpx 20rpx 0">
<Cn-grid title="注册">
<Cn-grid-item src="/static/device2.png" text="设备" @click="registerDevice"></Cn-grid-item>
<Cn-grid-item src="/static/gateway2.png" text="网关" @click="registerGateway"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
</Cn-grid>
</view>
<view class="nav">
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
<view class="content device" :style="{ minHeight: minHeight }">
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type" padding="0"
v-for="(item, index) in deviceListFilter" :key="index" @click="jump(item)" thumbnail="/static/device.png">
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</template>
<script>
export default {
data () {
return {
loading: false
loading: false,
navMenuList: [{
text: '全部'
}, {
text: '监测'
}, {
text: '治理'
}],
navMenuActive: 0,
navHeight: 0,
minHeight: '',
deviceList: [
{
name: '设备1',
des: '设备描述1',
type: 'APF',
project: '监测',
},
{
name: '设备2',
des: '设备描述2',
type: 'DVR',
project: '治理'
},
{
name: '设备3',
des: '设备描述3',
type: 'DVR',
project: '治理'
},
{
name: '设备4',
des: '设备描述4',
type: 'DVR',
project: '治理'
},
{
name: '设备5',
des: '设备描述5',
type: 'APF',
project: '治理'
},
{
name: '设备6',
des: '设备描述6',
type: 'APF',
project: '治理'
}
]
}
},
computed: {
deviceListFilter () {
if (this.navMenuActive == 0) {
return this.deviceList
} else {
return this.deviceList.filter(item => item.project == this.navMenuList[this.navMenuActive].text)
}
}
},
methods: {
registerDevice () {
uni.showModal({
title: '提示',
content: '请选择设备类型',
confirmText: '直连装置',
cancelText: '网关接入',
cancelColor: '#007aff',
success: ({ confirm, cancel }) => {
if (confirm) {
uni.navigateTo({
url: '/pages/device/new'
})
} else if (cancel) {
uni.navigateTo({
url: '/pages/gateway/list'
})
}
}
})
},
registerGateway () {
uni.navigateTo({
url: '/pages/gateway/new'
})
},
navMenuClick (index) {
this.navMenuActive = index
},
jump (item) {
if (item % 2) {
uni.navigateTo({
if (item.type == 'APF') {
uni.navigateTo({
url: '/pages/device/APF/detail'
})
} else {
@@ -40,9 +140,23 @@ export default {
})
}
},
},
mounted () {
setTimeout(() => {
// 获取nav高度
uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
this.navHeight = rect.height
// #ifdef H5
this.minHeight = 'calc(100vh - env(safe-area-inset-bottom) - ' + (50 + this.navHeight) + 'px)'
// #endif
// #ifdef APP-PLUS
this.minHeight = 'calc(100vh - ' + this.navHeight + 'px)'
// #endif
}).exec()
}, 1000);
}
}
</script>
<style lang='scss'>
.index-gongcheng {}
</style>

134
pages/index/comp/indexYunWei.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="index-yunwei">
<view class="index-zhuyonghu">
<div class="header">
<div class="header-item">
<div class="header-item-value">3</div>
@@ -14,24 +14,124 @@
<div class="header-item-label">离线设备</div>
</div>
</div>
<uni-card title="基础设备" sub-title="副标题" :extra="item % 2 ? 'APF' : 'DVR'" v-for="item in 3" :key="item"
@click="jump(item)" thumbnail="/static/device.png">
<text>设备基础信息 </text>
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
<view style="padding:20rpx 20rpx 0">
<Cn-grid title="注册">
<Cn-grid-item src="/static/device2.png" text="设备" @click="registerDevice"></Cn-grid-item>
<Cn-grid-item src="/static/gateway2.png" text="网关" @click="registerGateway"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
</Cn-grid>
</view>
<view class="nav">
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
<view class="content device" :style="{ minHeight: minHeight }">
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type" padding="0"
v-for="(item, index) in deviceListFilter" :key="index" @click="jump(item)" thumbnail="/static/device.png">
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</template>
<script>
export default {
data () {
return {
loading: false
loading: false,
navMenuList: [{
text: '全部'
}, {
text: '监测'
}, {
text: '治理'
}],
navMenuActive: 0,
navHeight: 0,
minHeight: '',
deviceList: [
{
name: '设备1',
des: '设备描述1',
type: 'APF',
project: '监测',
},
{
name: '设备2',
des: '设备描述2',
type: 'DVR',
project: '治理'
},
{
name: '设备3',
des: '设备描述3',
type: 'DVR',
project: '治理'
},
{
name: '设备4',
des: '设备描述4',
type: 'DVR',
project: '治理'
},
{
name: '设备5',
des: '设备描述5',
type: 'APF',
project: '治理'
},
{
name: '设备6',
des: '设备描述6',
type: 'APF',
project: '治理'
}
]
}
},
computed: {
deviceListFilter () {
if (this.navMenuActive == 0) {
return this.deviceList
} else {
return this.deviceList.filter(item => item.project == this.navMenuList[this.navMenuActive].text)
}
}
},
methods: {
registerDevice () {
uni.showModal({
title: '提示',
content: '请选择设备类型',
confirmText: '直连装置',
cancelText: '网关接入',
cancelColor: '#007aff',
success: ({ confirm, cancel }) => {
if (confirm) {
uni.navigateTo({
url: '/pages/device/new'
})
} else if (cancel) {
uni.navigateTo({
url: '/pages/gateway/list'
})
}
}
})
},
registerGateway () {
uni.navigateTo({
url: '/pages/gateway/new'
})
},
navMenuClick (index) {
this.navMenuActive = index
},
jump (item) {
if (item % 2) {
uni.navigateTo({
if (item.type == 'APF') {
uni.navigateTo({
url: '/pages/device/APF/detail'
})
} else {
@@ -40,9 +140,23 @@ export default {
})
}
},
},
mounted () {
setTimeout(() => {
// 获取nav高度
uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
this.navHeight = rect.height
// #ifdef H5
this.minHeight = 'calc(100vh - env(safe-area-inset-bottom) - ' + (50 + this.navHeight) + 'px)'
// #endif
// #ifdef APP-PLUS
this.minHeight = 'calc(100vh - ' + this.navHeight + 'px)'
// #endif
}).exec()
}, 1000);
}
}
</script>
<style lang='scss'>
.index-yunwei {}
</style>

16
pages/index/comp/indexZhuYongHu.vue
View File

@@ -27,15 +27,14 @@
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
<view class="content" :style="{ minHeight: minHeight }">
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type"
v-for="(item, index) in deviceListFilter" :key="index" style="margin-top:4rpx" @click="jump(item)"
thumbnail="/static/device.png">
<text>{{ item.project }} {{ item.type }}</text>
<view class="content device" :style="{ minHeight: minHeight }">
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type" padding="0"
v-for="(item, index) in deviceListFilter" :key="index" @click="jump(item)" thumbnail="/static/device.png">
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</view>
</template>
<script>
export default {
@@ -153,10 +152,11 @@ export default {
// #ifdef APP-PLUS
this.minHeight = 'calc(100vh - ' + this.navHeight + 'px)'
// #endif
}).exec()
}, 1000);
}
}
</script>
<style lang='scss'></style>
<style lang='scss'>
</style>

134
pages/index/comp/indexZiYongHu.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="index-ziyonghu">
<view class="index-zhuyonghu">
<div class="header">
<div class="header-item">
<div class="header-item-value">3</div>
@@ -14,24 +14,124 @@
<div class="header-item-label">离线设备</div>
</div>
</div>
<uni-card title="基础设备" sub-title="副标题" :extra="item % 2 ? 'APF' : 'DVR'" v-for="item in 3" :key="item"
@click="jump(item)" thumbnail="/static/device.png">
<text>设备基础信息 </text>
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
<!-- <view style="padding:20rpx 20rpx 0">
<Cn-grid title="注册">
<Cn-grid-item src="/static/device2.png" text="设备" @click="registerDevice"></Cn-grid-item>
<Cn-grid-item src="/static/gateway2.png" text="网关" @click="registerGateway"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
</Cn-grid>
</view> -->
<view class="nav">
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
<view class="content device" :style="{ minHeight: minHeight }">
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type" padding="0"
v-for="(item, index) in deviceListFilter" :key="index" @click="jump(item)" thumbnail="/static/device.png">
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</template>
<script>
export default {
data () {
return {
loading: false
loading: false,
navMenuList: [{
text: '全部'
}, {
text: '监测'
}, {
text: '治理'
}],
navMenuActive: 0,
navHeight: 0,
minHeight: '',
deviceList: [
{
name: '设备1',
des: '设备描述1',
type: 'APF',
project: '监测',
},
{
name: '设备2',
des: '设备描述2',
type: 'DVR',
project: '治理'
},
{
name: '设备3',
des: '设备描述3',
type: 'DVR',
project: '治理'
},
{
name: '设备4',
des: '设备描述4',
type: 'DVR',
project: '治理'
},
{
name: '设备5',
des: '设备描述5',
type: 'APF',
project: '治理'
},
{
name: '设备6',
des: '设备描述6',
type: 'APF',
project: '治理'
}
]
}
},
computed: {
deviceListFilter () {
if (this.navMenuActive == 0) {
return this.deviceList
} else {
return this.deviceList.filter(item => item.project == this.navMenuList[this.navMenuActive].text)
}
}
},
methods: {
registerDevice () {
uni.showModal({
title: '提示',
content: '请选择设备类型',
confirmText: '直连装置',
cancelText: '网关接入',
cancelColor: '#007aff',
success: ({ confirm, cancel }) => {
if (confirm) {
uni.navigateTo({
url: '/pages/device/new'
})
} else if (cancel) {
uni.navigateTo({
url: '/pages/gateway/list'
})
}
}
})
},
registerGateway () {
uni.navigateTo({
url: '/pages/gateway/new'
})
},
navMenuClick (index) {
this.navMenuActive = index
},
jump (item) {
if (item % 2) {
uni.navigateTo({
if (item.type == 'APF') {
uni.navigateTo({
url: '/pages/device/APF/detail'
})
} else {
@@ -40,9 +140,23 @@ export default {
})
}
},
},
mounted () {
setTimeout(() => {
// 获取nav高度
uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
this.navHeight = rect.height
// #ifdef H5
this.minHeight = 'calc(100vh - env(safe-area-inset-bottom) - ' + (50 + this.navHeight) + 'px)'
// #endif
// #ifdef APP-PLUS
this.minHeight = 'calc(100vh - ' + this.navHeight + 'px)'
// #endif
}).exec()
}, 1000);
}
}
</script>
<style lang='scss'>
.index-ziyonghu {}
</style>

44
pages/index/index.vue
View File

@@ -16,7 +16,7 @@
@trigger="trigger" />
</view>
</view>
</Cn-page>
</Cn-page>
</template>
<script>
import YunWei from "./comp/indexYunWei.vue";
@@ -60,15 +60,6 @@ export default {
text: '子用户',
}
]
// if (arr.indexOf(this.userInfo.role) > -1) {
// content.push({
// iconPath: '/static/device.png',
// text: '添加设备',
// }, {
// iconPath: '/static/gateway.png',
// text: '添加网关',
// })
// }
return content
}
},
@@ -104,18 +95,35 @@ export default {
switch (e.index + 1) {
case 1:
roleName = '运维管理'
uni.removeTabBarBadge({
index: 1
})
break
case 2:
roleName = '专职管理'
uni.removeTabBarBadge({
index: 1
})
break
case 3:
roleName = '工程'
uni.removeTabBarBadge({
index: 1
})
break
case 4:
roleName = '主用户'
uni.setTabBarBadge({
index: 1,
text: '6'
})
break
case 5:
roleName = '子用户'
uni.setTabBarBadge({
index: 1,
text: '6'
})
break
}
this.$util.toast(roleName + '角色切换成功')
@@ -127,7 +135,21 @@ export default {
this.loading = false
},
onShow () {
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo) || { role: 4 }
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
if (!this.userInfo) {
this.userInfo = {
role: 4
}
uni.setStorageSync('userInfo', {
role: 4
})
}
if (this.userInfo.role == 4 || this.userInfo.role == 5) {
uni.setTabBarBadge({
index: 1,
text: '6'
})
}
}
}
</script>

13
pages/index/message.vue
View File

@@ -11,13 +11,13 @@
<view class="message-nav-label">反馈</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="message-nav" @click="jump('report')">
<view class="message-nav" @click="jump('report')" v-if="userInfo.role == '4' || userInfo.role == '5'">
<image mode="aspectFill" class="message-nav-icon" src="/static/report.png" />
<view class="message-nav-label">告警</view>
<uni-badge text="3"></uni-badge>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="message-nav" @click="jump('incident')">
<view class="message-nav" @click="jump('incident')" v-if="userInfo.role == '4' || userInfo.role == '5'">
<image mode="aspectFill" class="message-nav-icon" src="/static/incident.png" />
<view class="message-nav-label">事件</view>
<uni-badge text="3"></uni-badge>
@@ -31,11 +31,13 @@
export default {
data () {
return {
loading: false
loading: false,
userInfo: {}
}
},
methods: {
init () {
this.userInfo = uni.getStorageSync('userInfo')
},
upgrade (code) {
console.log(code);
@@ -67,7 +69,7 @@ export default {
}
}
},
onLoad () {
onShow () {
this.init()
},
}
@@ -76,6 +78,7 @@ export default {
<style lang="scss">
.message {
padding-top: 20rpx;
.message-header {
padding: 200rpx 34rpx 34rpx;
display: flex;
@@ -108,7 +111,7 @@ export default {
}
.message-nav {
padding: 34rpx;
padding: 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;

18
pages/index/mine.vue
View File

@@ -22,12 +22,18 @@
<view class="mine-nav-label">子用户列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<view class="mine-nav" @click="jump('project')" v-if="userInfo.role == 4">
<view class="mine-nav" @click="jump('scan')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/scan.png" />
<view class="mine-nav-label">扫一扫</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('project')" v-if="userInfo.role == 4 || userInfo.role == 3">
<image mode="aspectFill" class="mine-nav-icon" src="/static/project.png" />
<view class="mine-nav-label">项目管理</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('gateway')" v-if="userInfo.role == 4 || userInfo.role == 3"
<view class="mine-nav" @click="jump('gateway')"
v-if="userInfo.role == 4 || userInfo.role == 3 || userInfo.role == 5"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<image mode="aspectFill" class="mine-nav-icon" src="/static/gateway.png" />
<view class="mine-nav-label">网关列表</view>
@@ -97,6 +103,14 @@ export default {
},
jump (type) {
switch (type) {
case 'scan':
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
break;
case 'login':
uni.navigateTo({
url: `/pages/user/login`

29
pages/project/detail.vue
View File

@@ -11,11 +11,10 @@
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
</view>
</view>
<view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
<view class="content device" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
<view v-show="navMenuActive == 0">
<uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 10" :key="item" @click="jump"
thumbnail="/static/real_time_data.png">
<text>设备基础信息 </text>
<uni-card title="用能设备" sub-title="设备" extra="APF" v-for="item in 2" :key="item" @click="goDevice"
padding="0" thumbnail="/static/real_time_data.png">
</uni-card>
</view>
<view style="padding: 0 20rpx" v-show="navMenuActive == 1">
@@ -36,6 +35,11 @@
</view>
<uni-load-more status="nomore"></uni-load-more>
</view>
<uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
@trigger="trigger" />
<uni-popup ref="share" type="share" background-color="#fff">
<uni-popup-share title="分享到"></uni-popup-share>
</uni-popup>
</view>
</view>
</Cn-page>
@@ -51,10 +55,19 @@ export default {
}, {
text: '子用户列表'
}],
content: [{
iconPath: '/static/share.png',
text: '分享',
}],
navHeight: 0,
navMenuActive: 0
}
},
methods: {
trigger () {
console.log(this.$refs);
this.$refs.share.open()
},
navMenuClick (index) {
this.navMenuActive = index
},
@@ -76,7 +89,13 @@ export default {
}
}
})
}
},
goDevice () {
uni.navigateTo({
url: '/pages/device/APF/detail'
})
},
},
onLoad (option) {
this.project = option.project