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-10 09:16:17 +08:00
parent 627c0a2853
commit 8cf78ec3f5
27 changed files with 171 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
pages/device/DVR/about.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='about'>
<view class='about-title'>盛弘DVR</view>
<view class='about-text'>杋器码：0000000</view>
<view class='about-text'>软件版本：1.0.0</view>
<view class='about-text'>使用期限：永久使用</view>
<view class='about-text'>软件版本：380-250/250-4-0-1</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
}
},
methods: {
}
}
</script>
<style lang='scss'>
.about {
padding: 34rpx;
.about-title {
font-size: 34rpx;
font-weight: bold;
color: #333333;
margin-bottom: 34rpx;
}
.about-text {
font-size: 28rpx;
color: #666666;
margin-bottom: 34rpx;
}
}
</style>

67
pages/device/DVR/comp/dianWang.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<view class='basic'>
<view style="font-size:24rpx;color:#111" class="ml4 mb20">电网电压频率:49.974Hz</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item">相数</view>
<view class="item">电流(A)</view>
<view class="item">毘流峰值比</view>
<view class="item">相电压(V)</view>
<view class="item">线电压(V)</view>
<view class="item">A</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
<view class="item">226.192</view>
<view class="item">391.934</view>
<view class="item">B</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
<view class="item">226.192</view>
<view class="item">391.934</view>
<view class="item">C</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
<view class="item">226.192</view>
<view class="item">391.934</view>
<view class="item">N</view>
<view class="item">14.078</view>
<view class="item"></view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item">相数</view>
<view class="item">视在功要(kVA)</view>
<view class="item">有功功类(kW)</view>
<view class="item">无功功率(kVar)</view>
<view class="item">功率園益</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L2</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L3</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">N</view>
<view class="item">3.9</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

0
pages/device/DVR/ganjiedian.vue → pages/device/DVR/comp/ganjiedian.vue
View File

69
pages/device/DVR/comp/nibian.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<view class='basic'>
<view style="font-size:24rpx;color:#111" class="ml4 mb20">工直流母线电压:458.007V</view>
<view style="font-size:24rpx;color:#111" class="ml4 mb20">充放电电流:0.409 A</view>
<view style="font-size:24rpx;color:#111" class="ml4 mb20">逆安电压牌率:50.037Hz</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item">相数</view>
<view class="item">电流(A)</view>
<view class="item">毘流峰值比</view>
<view class="item">相电压(V)</view>
<view class="item">线电压(V)</view>
<view class="item">A</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
<view class="item">226.192</view>
<view class="item">391.934</view>
<view class="item">B</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
<view class="item">226.192</view>
<view class="item">391.934</view>
<view class="item">C</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
<view class="item">226.192</view>
<view class="item">391.934</view>
<view class="item">N</view>
<view class="item">14.078</view>
<view class="item"></view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item">相数</view>
<view class="item">视在功要(kVA)</view>
<view class="item">有功功类(kW)</view>
<view class="item">无功功率(kVar)</view>
<view class="item">功率園益</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L2</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L3</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">N</view>
<view class="item">3.9</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

0
pages/device/DVR/qita.vue → pages/device/DVR/comp/qita.vue
View File

0
pages/device/DVR/shuchu.vue → pages/device/DVR/comp/shuchu.vue
View File

0
pages/device/DVR/zhuantailiang.vue → pages/device/DVR/comp/zhuantailiang.vue
View File

201
pages/device/DVR/detail.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<Cn-page :loading='loading' noPadding>
<view slot='body'>
<view class='detail'>
<view class="header">
<image src="/static/test.pic.jpg" 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>
<view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
<view v-if="navMenuActive == 0">
<DianWang></DianWang>
</view>
<view v-else-if="navMenuActive == 1">
</view>
<view v-else-if="navMenuActive == 2">
</view>
<view v-else-if="navMenuActive == 3">
</view>
<view v-else-if="navMenuActive == 4">
</view>
<view style="height:20rpx"></view>
</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>
</template>
<script>
import DianWang from "./comp/dianWang.vue";
export default {
components: {
DianWang
},
data () {
return {
loading: false,
navMenuActive: 0,
navHeight: 0,
navMenuList: [{
text: '电网数据'
}, {
text: '逆变数据'
}, {
text: '输出数据'
}, {
text: '干接点'
}, {
text: '状态量'
}, {
text: '储能柜数据'
}, {
text: '其他'
}],
content: [{
iconPath: '/static/record.png',
text: '记录',
}, {
iconPath: '/static/report.png',
text: '告警',
}, {
iconPath: '/static/about.png',
text: '关于',
},
]
}
},
methods: {
trigger (e) {
console.log(e);
if (e.item.text === '分享') {
this.$refs.share.open()
} else if (e.item.text === '删除') {
uni.showModal({
title: '提示',
content: '确定删除该设备吗？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
});
} else if (e.item.text === '下载') {
this.$util.toast('下载成功')
} else if (e.item.text === '记录') {
uni.navigateTo({ url: '/pages/device/DVR/record' })
} else if (e.item.text === '告警') {
uni.navigateTo({ url: '/pages/device/DVR/report' })
} else if (e.item.text === '关于') {
uni.navigateTo({ url: '/pages/device/DVR/about' })
} else if (e.item.text === '移交') {
uni.navigateTo({ url: '/pages/device/transfer' })
} else if (e.item.text === '反馈') {
uni.navigateTo({ url: '/pages/device/feedback' })
}
this.$refs.fab.close()
},
navMenuClick (idx) {
this.navMenuActive = idx
},
init () {
let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
console.log(userInfo.role);
switch (userInfo.role) {
case 3:
this.content.splice(0, 0, {
iconPath: '/static/transfer.png',
text: '移交',
})
break;
case 4:
this.content.splice(0, 0, {
iconPath: '/static/share.png',
text: '分享',
}, {
iconPath: '/static/delate.png',
text: '删除',
})
case 5:
this.content.splice(0, 0, {
iconPath: '/static/feedback.png',
text: '反馈',
})
break;
default:
break;
}
setTimeout(() => {
// 获取nav高度
uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
this.navHeight = rect.height
}).exec()
}, 1000);
}
},
onLoad (options) {
this.init()
},
}
</script>
<style lang='scss'>
.detail {
// background: $uni-theme-white;
.header {}
.des {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
color: #999;
}
.nav {
position: sticky;
top: 0;
left: 0;
padding-top: 20rpx;
display: flex;
flex-wrap: wrap;
background: rgb(243, 244, 245);
.nav-menu {
padding: 10rpx 20rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
border-radius: 8rpx;
background: $uni-theme-white;
&-active {
background: $uni-color-primary;
color: #fff;
}
}
}
.content {
box-sizing: border-box;
padding: 0 20rpx;
}
}
</style>

124
pages/device/DVR/dianWang.vue
View File

@@ -1,124 +0,0 @@
<template>
<view class='basic'>
<view style="font-size:24rpx;color:#111" class="ml4 mb20">电网电压频率:49.974Hz</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item">相数</view>
<view class="item">电流(A)</view>
<view class="item">毘流峰值比</view>
<view class="item">相电压(V)</view>
<view class="item">线电压(V)</view>
<view class="item">A</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L2</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L3</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">N</view>
<view class="item">3.9</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item">相数</view>
<view class="item">视在功要(kVA)</view>
<view class="item">有功功类(kW)</view>
<view class="item">无功功率(kVar)</view>
<view class="item">功率園益</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L2</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L3</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">N</view>
<view class="item">3.9</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-4">
<view class="item">名称</view>
<view class="item">电压(V)</view>
<view class="item">频率(Hz)</view>
<view class="item">THDU(%)</view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L2</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L3</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">负载电流</view>
<view class="grid-card-content-4">
<view class="item">名称</view>
<view class="item">有效值(A)</view>
<view class="item">cosp</view>
<view class="item">THDI(%)</view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L2</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
<view class="item">L3</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item">4.6</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-title">补偿电流</view>
<view class="grid-card-content-4">
<view class="item">名称</view>
<view class="item">有效值(A)</view>
<view class="item">负载率(%)</view>
<view class="item"></view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item"></view>
<view class="item">L2</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item"></view>
<view class="item">L3</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
<view class="item"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

0
pages/device/DVR/nibian.vue
View File

59
pages/device/DVR/record.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='device-list'>
<div class="header">
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
:active-color="activeColor" @clickItem="onClickItem" />
</div>
<uni-list :border="false">
<uni-list-item title="记录" note="0.20->0.20" rightText="2023-02-01 15:10:29" v-for="item in 5" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
current: 0,
items: ['状态', '事件', '曲线','操作'],
styleType: 'text',
activeColor: '#007aff',
content: [{
iconPath: '/static/add.png',
text: '添加 ',
},
]
}
},
methods: {
onClickItem (e) {
this.current = e.currentIndex
},
trigger (e) {
if (e.index === 0) {
uni.navigateTo({
url: '/pages/device/new'
})
}
}
}
}
</script>
<style lang='scss'>
.device-list {
.header {
position: sticky;
top: 0;
left: 0;
z-index: 10;
background: #fff;
padding: 10rpx 20rpx 20rpx;
box-shadow: 0 0 10rpx #ccc;
}
}
</style>

51
pages/device/DVR/report.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='record'>
<div class="header">
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
:active-color="activeColor" @clickItem="onClickItem" />
</div>
<uni-list :border="false">
<uni-list-item title="输入电压异常" rightText="2023-02-01 15:10:29" v-for="item in 5" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
current: 0,
items: ['当前告警', '历史告警'],
styleType: 'text',
activeColor: '#007aff',
}
},
methods: {
onClickItem (e) {
this.current = e.currentIndex
},
}
}
</script>
<style lang='scss'>
.record {
.header {
position: sticky;
top: 0;
left: 0;
z-index: 10;
background: $uni-theme-white;
padding: 10rpx 20rpx 20rpx;
box-shadow: 0 0 10rpx #eee;
}
}
/deep/ .uni-list-item {
background-color: $uni-theme-white !important;
}
</style>