页面切图

common/css/base.scss

@@ -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;
             }
         }

pages.json

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

pages/device/APF/comp/IO.vue

@@ -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 item-title">温度1(°C)</view>
-                <view class="item">温度2(°C)</view>
+                <view class="item item-title">温度2(°C)</view>
-                <view class="item">温度3(°C)</view>
+                <view class="item item-title">温度3(°C)</view>
-                <view class="item">温度4(°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 item-title">干接点1</view>
-                <view class="item">干接点2</view>
+                <view class="item item-title">干接点2</view>
-                <view class="item"></view>
+                <view class="item item-title"></view>
-                <view class="item"></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>

pages/device/APF/comp/basic.vue

@@ -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 item-title">名称</view>
-                <view class="item">有效值(A)</view>
+                <view class="item item-title">有效值(A)</view>
-                <view class="item">cosp</view>
+                <view class="item item-title">cosp</view>
-                <view class="item">THDI(%)</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 item-title">名称</view>
-                <view class="item">电压(V)</view>
+                <view class="item item-title">电压(V)</view>
-                <view class="item">频率(Hz)</view>
+                <view class="item item-title">频率(Hz)</view>
-                <view class="item">THDU(%)</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 item-title">名称</view>
-                <view class="item">有效值(A)</view>
+                <view class="item item-title">有效值(A)</view>
-                <view class="item">cosp</view>
+                <view class="item item-title">cosp</view>
-                <view class="item">THDI(%)</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 item-title">名称</view>
-                <view class="item">有效值(A)</view>
+                <view class="item item-title">有效值(A)</view>
-                <view class="item">负载率(%)</view>
+                <view class="item item-title">负载率(%)</view>
-                <view class="item"></view>
+                <view class="item item-title"></view>
                 <view class="item">L1</view>
                 <view class="item">226.8</view>
                 <view class="item">50.0</view>

pages/device/APF/comp/power.vue

@@ -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 item-title">名称</view>
-                <view class="item">有功功率(kw)</view>
+                <view class="item item-title">有功功率(kw)</view>
-                <view class="item">无功功率(kVar)</view>
+                <view class="item item-title">无功功率(kVar)</view>
-                <view class="item">视在功率(kVA)</view>
+                <view class="item item-title">视在功率(kVA)</view>
-                <view class="item">功率因数</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 item-title">名称</view>
-                <view class="item">有功功率(kw)</view>
+                <view class="item item-title">有功功率(kw)</view>
-                <view class="item">无功功率(kVar)</view>
+                <view class="item item-title">无功功率(kVar)</view>
-                <view class="item">视在功率(kVA)</view>
+                <view class="item item-title">视在功率(kVA)</view>
-                <view class="item">功率因数</view>
+                <view class="item item-title">功率因数</view>
                 <view class="item">L1</view>
                 <view class="item">226.8</view>
                 <view class="item">50.0</view>

pages/device/APF/detail.vue

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

pages/device/DVR/comp/dianWang.vue

@@ -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 item-title">相数</view>
-                <view class="item">电流(A)</view>
+                <view class="item item-title">电流(A)</view>
-                <view class="item">毘流峰值比</view>
+                <view class="item item-title">电流峰值比</view>
-                <view class="item">相电压(V)</view>
+                <view class="item item-title">相电压(V)</view>
-                <view class="item">线电压(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 item-title">相数</view>
-                <view class="item">视在功要(kVA)</view>
+                <view class="item item-title">视在功要(kVA)</view>
-                <view class="item">有功功类(kW)</view>
+                <view class="item item-title">有功功类(kW)</view>
-                <view class="item">无功功率(kVar)</view>
+                <view class="item item-title">无功功率(kVar)</view>
-                <view class="item">功率園益</view>
+                <view class="item item-title">功率因数</view>
-                <view class="item">226.8</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">C</view>
-                <view class="item">N</view>
+                <view class="item"></view>
                 <view class="item">3.9</view>
+                <view class="item"></view>
+                <view class="item"></view>
             </view>
         </view>
     </view>

pages/device/DVR/comp/ganjiedian.vue

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

pages/device/DVR/comp/nibian.vue

@@ -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 item-title">相数</view>
-                <view class="item">电流(A)</view>
+                <view class="item item-title">电流(A)</view>
-                <view class="item">毘流峰值比</view>
+                <view class="item item-title">电流峰值比</view>
-                <view class="item">相电压(V)</view>
+                <view class="item item-title">相电压(V)</view>
-                <view class="item">线电压(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 item-title">相数</view>
-                <view class="item">视在功要(kVA)</view>
+                <view class="item item-title">视在功要(kVA)</view>
-                <view class="item">有功功类(kW)</view>
+                <view class="item item-title">有功功类(kW)</view>
-                <view class="item">无功功率(kVar)</view>
+                <view class="item item-title">无功功率(kVar)</view>
-                <view class="item">功率園益</view>
+                <view class="item item-title">功率因数</view>
-                <view class="item">226.8</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">C</view>
-                <view class="item">N</view>
+                <view class="item"></view>
                 <view class="item">3.9</view>
+                <view class="item"></view>
+                <view class="item"></view>
             </view>
         </view>
     </view>

pages/device/DVR/comp/qita.vue

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

pages/device/DVR/comp/shuchu.vue

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

pages/device/DVR/comp/zhuangTaiLiang.vue

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

pages/device/DVR/detail.vue

@@ -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 v-if="navMenuActive == 0"></DianWang>
-                        <DianWang></DianWang>
+                    <NiBian v-else-if="navMenuActive == 1"></NiBian>
-                    </view>
+                    <ShuChu v-else-if="navMenuActive == 2"></ShuChu>
-                    <view v-else-if="navMenuActive == 1">
+                    <GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
-                    </view>
+                    <ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
-                    <view v-else-if="navMenuActive == 2">
+                    <QiTa  v-else-if="navMenuActive == 5"></QiTa>
-                    </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"
@@ -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: [{