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">