页面切图

This commit is contained in:
仲么了
2023-02-10 13:38:19 +08:00
parent 8cf78ec3f5
commit 1e81b90b8f
15 changed files with 371 additions and 90 deletions

View File

@@ -74,39 +74,53 @@ page {
.grid-card {
background: $uni-theme-white;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 20rpx;
.grid-card-title {
padding: 20rpx 0;
font-size: 28rpx;
color: #111;
font-weight: 700;
margin-bottom: 10rpx;
}
.grid-card-content-4,
.grid-card-content-3,
.grid-card-content-5 {
.grid-card-content-5,
.grid-card-content-6 {
display: grid;
border-left: 2rpx solid #ccc;
border-top: 2rpx solid #ccc;
font-size: 24rpx;
grid-template-columns: 1fr 1fr 1fr 1fr;
.item {
padding: 0 4rpx;
display: flex;
align-items: center;
min-height: 50rpx;
justify-content: center;
text-align: center;
border-bottom: 2rpx solid #ccc;
border-right: 2rpx solid #ccc;
min-height: 100rpx;
background: $uni-theme-white;
}
.item-title{
background: unset;
}
}
.grid-card-content-3 {
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 2fr 2fr;
}
.grid-card-content-5 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid-card-content-6 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
@@ -121,7 +135,7 @@ page {
display: grid;
grid-gap: 60rpx 0;
grid-template-columns: 1fr 1fr 1fr;
.header-item {
display: flex;
flex-direction: column;
@@ -129,9 +143,9 @@ page {
justify-content: center;
color: #fff;
font-size: 28rpx;
.header-item-value {
font-size: 40rpx;
font-size: 40rpx;
margin-bottom: 10rpx;
}
}

View File

@@ -256,8 +256,9 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "灿能电力",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#fff",
"backgroundColor": "#fff"
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
},

View File

@@ -3,10 +3,10 @@
<view class="grid-card">
<view class="grid-card-title">温度</view>
<view class="grid-card-content-4">
<view class="item">温度1(°C)</view>
<view class="item">温度2(°C)</view>
<view class="item">温度3(°C)</view>
<view class="item">温度4(°C)</view>
<view class="item item-title">温度1(°C)</view>
<view class="item item-title">温度2(°C)</view>
<view class="item item-title">温度3(°C)</view>
<view class="item item-title">温度4(°C)</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
@@ -16,12 +16,14 @@
<view class="grid-card">
<view class="grid-card-title">干接点</view>
<view class="grid-card-content-4">
<view class="item">干接点1</view>
<view class="item">干接点2</view>
<view class="item"></view>
<view class="item"></view>
<view class="item item-title">干接点1</view>
<view class="item item-title">干接点2</view>
<view class="item item-title"></view>
<view class="item item-title"></view>
<view class="item">正常</view>
<view class="item">正常</view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
</view>

View File

@@ -3,10 +3,10 @@
<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 item-title">名称</view>
<view class="item item-title">有效值(A)</view>
<view class="item item-title">cosp</view>
<view class="item item-title">THDI(%)</view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
@@ -21,15 +21,17 @@
<view class="item">4.6</view>
<view class="item">N</view>
<view class="item">3.9</view>
<view class="item"></view>
<view class="item"></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">电压(V)</view>
<view class="item">频率(Hz)</view>
<view class="item">THDU(%)</view>
<view class="item item-title">名称</view>
<view class="item item-title">电压(V)</view>
<view class="item item-title">频率(Hz)</view>
<view class="item item-title">THDU(%)</view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
@@ -47,10 +49,10 @@
<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 item-title">名称</view>
<view class="item item-title">有效值(A)</view>
<view class="item item-title">cosp</view>
<view class="item item-title">THDI(%)</view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
@@ -68,10 +70,10 @@
<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 item-title">名称</view>
<view class="item item-title">有效值(A)</view>
<view class="item item-title">负载率(%)</view>
<view class="item item-title"></view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>

View File

@@ -3,11 +3,11 @@
<view class="grid-card">
<view class="grid-card-title">电网侧</view>
<view class="grid-card-content-5">
<view class="item">名称</view>
<view class="item">有功功率(kw)</view>
<view class="item">无功功率(kVar)</view>
<view class="item">视在功率(kVA)</view>
<view class="item">功率因数</view>
<view class="item item-title">名称</view>
<view class="item item-title">有功功率(kw)</view>
<view class="item item-title">无功功率(kVar)</view>
<view class="item item-title">视在功率(kVA)</view>
<view class="item item-title">功率因数</view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>
@@ -28,11 +28,11 @@
<view class="grid-card">
<view class="grid-card-title">负载侧</view>
<view class="grid-card-content-5">
<view class="item">名称</view>
<view class="item">有功功率(kw)</view>
<view class="item">无功功率(kVar)</view>
<view class="item">视在功率(kVA)</view>
<view class="item">功率因数</view>
<view class="item item-title">名称</view>
<view class="item item-title">有功功率(kw)</view>
<view class="item item-title">无功功率(kVar)</view>
<view class="item item-title">视在功率(kVA)</view>
<view class="item item-title">功率因数</view>
<view class="item">L1</view>
<view class="item">226.8</view>
<view class="item">50.0</view>

View File

@@ -3,7 +3,7 @@
<view slot='body'>
<view class='detail'>
<view class="header">
<image src="/static/test.pic.jpg" mode="widthFix" style="width: 100%;" />
<image src="/static/test2.pic.jpg" mode="widthFix" style="width: 100%;" />
</view>
<view class="des">
<text>设备基础信息</text>

View File

@@ -3,11 +3,11 @@
<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 item-title">相数</view>
<view class="item item-title">电流(A)</view>
<view class="item item-title">流峰值比</view>
<view class="item item-title">相电压(V)</view>
<view class="item item-title">线电压(V)</view>
<view class="item">A</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
@@ -21,33 +21,38 @@
<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">226.192</view>
<view class="item">N</view>
<view class="item">14.078</view>
<view class="item"></view>
<view class="item"></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 item-title">相数</view>
<view class="item item-title">视在功要(kVA)</view>
<view class="item item-title">有功功类(kW)</view>
<view class="item item-title">无功功率(kVar)</view>
<view class="item item-title">功率因数</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">B</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">C</view>
<view class="item"></view>
<view class="item">3.9</view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
</view>

View File

@@ -0,0 +1,45 @@
<template>
<view class='basic'>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item item-title">输出干接点1(上电)</view>
<view class="item item-title">输出干接点2(开机)</view>
<view class="item item-title">输出干接点3(逆变运行)</view>
<view class="item item-title">输出干接点4(故障)</view>
<view class="item item-title">输出干接点5(紧意停机)</view>
<view class="item">断开</view>
<view class="item">开机</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item item-title">输入干接点1</view>
<view class="item item-title">输入干接点2</view>
<view class="item item-title">输入干接点3</view>
<view class="item item-title">输入干接点4</view>
<view class="item item-title">输入干接点5</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

View File

@@ -5,11 +5,11 @@
<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 item-title">相数</view>
<view class="item item-title">电流(A)</view>
<view class="item item-title">流峰值比</view>
<view class="item item-title">相电压(V)</view>
<view class="item item-title">线电压(V)</view>
<view class="item">A</view>
<view class="item">20.339</view>
<view class="item">2.447</view>
@@ -28,28 +28,32 @@
<view class="item">N</view>
<view class="item">14.078</view>
<view class="item"></view>
<view class="item"></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 item-title">相数</view>
<view class="item item-title">视在功要(kVA)</view>
<view class="item item-title">有功功类(kW)</view>
<view class="item item-title">无功功率(kVar)</view>
<view class="item item-title">功率因数</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">B</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">C</view>
<view class="item"></view>
<view class="item">3.9</view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
</view>

View File

@@ -0,0 +1,78 @@
<template>
<view class='basic'>
<view class="grid-card">
<view class="grid-card-content-4">
<view class="item item-title">干接点1</view>
<view class="item item-title">干接点2</view>
<view class="item item-title">干接点3</view>
<view class="item item-title">干接点4</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-4">
<view class="item item-title">干接点5</view>
<view class="item item-title">干接点6</view>
<view class="item item-title">干接点7</view>
<view class="item item-title">干接点8</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
<view class="item">断开</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-4">
<view class="item item-title">温度1(°C)</view>
<view class="item item-title">温度2(°C)</view>
<view class="item item-title">温度3(°C)</view>
<view class="item item-title">温度4(°C)</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-4">
<view class="item item-title">温度5(°C)</view>
<view class="item item-title">漏电流1(mA)</view>
<view class="item item-title">漏电流2(mA)</view>
<view class="item item-title">漏电流3(mA)</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
<view class="item">20.0</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-4">
<view class="item item-title">风扇状态</view>
<view class="item item-title">电网零序电压(V)</view>
<view class="item item-title"></view>
<view class="item item-title"></view>
<view class="item">高速</view>
<view class="item">1.978</view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

View File

@@ -0,0 +1,96 @@
<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 item-title">相数</view>
<view class="item item-title">电流(A)</view>
<view class="item item-title">电流峰值比</view>
<view class="item item-title">相电压(V)</view>
<view class="item item-title">线电压(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">391.934</view>
<view class="item">226.192</view>
<view class="item">N</view>
<view class="item">14.078</view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item item-title">相数</view>
<view class="item item-title">视在功要(kVA)</view>
<view class="item item-title">有功功类(kW)</view>
<view class="item item-title">无功功率(kVar)</view>
<view class="item item-title">功率因数</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">B</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">C</view>
<view class="item">3.9</view>
<view class="item">3.9</view>
<view class="item">3.9</view>
<view class="item">3.9</view>
</view>
</view>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item item-title">相数</view>
<view class="item item-title">负载率</view>
<view class="item item-title"></view>
<view class="item item-title"></view>
<view class="item item-title"></view>
<view class="item">A</view>
<view class="item">0.07</view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item">B</view>
<view class="item">0.05</view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item">C</view>
<view class="item">0.013</view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

View File

@@ -0,0 +1,31 @@
<template>
<view class='basic'>
<view class="grid-card">
<view class="grid-card-content-5">
<view class="item item-title">系统状态</view>
<view class="item item-title">逆变空开状态</view>
<view class="item item-title">输出空开状态</view>
<view class="item item-title">维修旁路空开状态</view>
<view class="item item-title">故障旁路开关状态</view>
<view class="item">运行:市电供电逆委器充电</view>
<view class="item">闭合</view>
<view class="item">闭合</view>
<view class="item">断开</view>
<view class="item">断开</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
</script>
<style lang='scss'>
.basic {}
</style>

View File

@@ -3,7 +3,7 @@
<view slot='body'>
<view class='detail'>
<view class="header">
<image src="/static/test.pic.jpg" mode="widthFix" style="width: 100%;" />
<image src="/static/test2.pic.jpg" mode="widthFix" style="width: 100%;" />
</view>
<view class="des">
<text>设备基础信息</text>
@@ -15,17 +15,12 @@
</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>
<DianWang v-if="navMenuActive == 0"></DianWang>
<NiBian v-else-if="navMenuActive == 1"></NiBian>
<ShuChu v-else-if="navMenuActive == 2"></ShuChu>
<GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
<ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
<QiTa v-else-if="navMenuActive == 5"></QiTa>
<view style="height:20rpx"></view>
</view>
<uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
@@ -39,9 +34,19 @@
</template>
<script>
import DianWang from "./comp/dianWang.vue";
import NiBian from "./comp/niBian.vue";
import ShuChu from "./comp/shuChu.vue";
import GanJieDian from "./comp/ganJieDian.vue";
import ZhuangTaiLiang from "./comp/zhuangTaiLiang.vue";
import QiTa from "./comp/qiTa.vue";
export default {
components: {
DianWang
DianWang,
NiBian,
ShuChu,
GanJieDian,
ZhuangTaiLiang,
QiTa,
},
data () {
return {
@@ -58,9 +63,7 @@ export default {
text: '干接点'
}, {
text: '状态量'
}, {
text: '储能柜数据'
}, {
},{
text: '其他'
}],
content: [{

BIN
static/test2.pic.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB