Explorar o código

Merge branch 'master' of http://39.106.8.246:3003/zhaojing/sagadaping

anxiaoxia %!s(int64=3) %!d(string=hai) anos
pai
achega
492e564561

BIN=BIN
src/assets/circleEnergy.png


BIN=BIN
src/assets/co2.png


+ 19 - 0
src/assets/css/common.less

@@ -0,0 +1,19 @@
+
+.verticalClass{
+    padding: 24px 32px;
+    width: 1000px;
+    margin: 0 auto 20px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    border: 2px solid #ffffff;
+    background: #ffffff;
+    font-size:24px;
+    .head-title{
+        font-size: 20px;
+        font-weight: 600;
+        color: #3b3558;
+    }
+    .subhead-title{
+        padding: 4px 0 0px 0px;
+    }
+}

BIN=BIN
src/assets/jiaquan.png


BIN=BIN
src/assets/pm25.png


BIN=BIN
src/assets/save_energy.png


BIN=BIN
src/assets/save_energy2.png


BIN=BIN
src/assets/shidu.png


BIN=BIN
src/assets/tree.png


BIN=BIN
src/assets/wendu.png


+ 2 - 4
src/views/valueDelivery/AirSwitchVer.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="airSwitch">
-        <div class="air-title">
+        <div class="air-title head-title">
             <span>空调实时开关</span>
             <span class="status">{{status ? "空调已开启" : "空调已关闭"}}</span>
         </div>
@@ -47,6 +47,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+@import "/src/assets/css/common.less";
 .airSwitch {
     padding: 24px 32px;
     height: 250px;
@@ -57,9 +58,6 @@ export default {
     border: 2px solid #ffffff;
     background: #ffffff;
     .air-title {
-        font-size: 20px;
-        font-weight: 600;
-        color: #3b3558;
         .status {
             margin-top: 8px;
             margin-left: 12px;

+ 5 - 4
src/views/valueDelivery/LastMonthData.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="[screenType==='hor' ? 'lastMonth' : 'lastMonth verticalClass' ]">
+    <div :class="[screenType==='hor' ? 'lastMonth' : 'lastMonth verticalClass2' ]">
         <div class="lastMonth-title"><span>上月数据</span></div>
         <div class="itemWrap">
             <div class="item" v-for="(item,index) in lastMonthData" :key="index">
@@ -139,10 +139,11 @@ export default {
         }
     }
 }
-.verticalClass {
+.verticalClass2 {
     height: 440px;
     width: 1000px;
-    margin: 0 auto;
+    margin:0 auto 20px;
+    box-sizing: border-box;
        .itemWrap{
            display: flex;
            flex-direction: row;
@@ -150,7 +151,7 @@ export default {
         //  justify-content:space-around;
          .item{
              padding-bottom: 20px;
-             margin-right:75px;
+             margin-right:70px;
          }
     }
 

+ 3 - 3
src/views/valueDelivery/NowData.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="NowData"
-        :class="[screenType==='hor' ? 'hor-nowData-contain' : 'ver-nowData-contain' ]"
+        :class="[screenType==='hor' ? 'hor-nowData-contain' : 'verticalClass2' ]"
     >
         <div class="nowData-title">
             <span class="hor-nowData-title-text">实时数据</span>
@@ -163,10 +163,10 @@ export default {
         display: flex;
         align-items: center;
     }
-    &.ver-nowData-contain{
+    &.verticalClass2{
          height: 460px;
          width: 1000px;
-        margin:0 auto;
+        margin:0 auto 20px;
         .item{
             .item_content{
                 .content_value{

+ 28 - 0
src/views/valueDelivery/xxx.vue

@@ -0,0 +1,28 @@
+<template>
+
+</template>
+<script>
+import air_close from '@/assets/horImg/air_close.png';
+import air_open from '@/assets/horImg/air_open.png';
+export default {
+    name: "lastTotalEnergy",
+    props: {
+        value: {
+            type: Number,
+            default: () => { return 75 } // 默认开
+        },
+
+    },
+    data() {
+        return {
+
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+@import "/src/assets/css/common.less";
+
+</style>
+
+

+ 137 - 15
src/views/verticalScreen.vue

@@ -1,27 +1,53 @@
 <template>
-    <div>
-        <div class="hor-nowData">
-            <NowData screenType="ver" />
-            <AirSwitchVer status="false" />
-                <LastMonth screenType="ver" />
-            <div>
-                <AirSwitch />
+    <div class="verticalWrap">
+        <NowData screenType="ver" />
+        <AirSwitchVer />
+        <LastMonthData screenType="ver" />
+        <div class="lastTotalEnergy verticalClass">
+            <div class="head-title">
+                <span>上月总能耗</span>
             </div>
-            <div>
-                <FloorSpace />
+            <div class="subhead-title">低能耗亲自然</div>
+            <div class="bottomCont">
+                <img src='@/assets/circleEnergy.png' />
+                <div class="showData">
+                    <div class="title">比基准能耗</div>
+                    <div class="energySave">节能<span>50%</span></div>
+                    <div class="totalEnergy">总能耗<span>25541</span>KWh</div>
+                </div>
             </div>
         </div>
-
+        <div class="lastSaveEnergy verticalClass">
+            <div class="head-title">
+                <span>上月节约能耗</span>
+            </div>
+            <div class="bottomCont">
+                <img src='@/assets/save_energy.png' />
+                <div class="showData">
+                    <div class="leftsave">节约电<br /><span>2566</span>度</div>
+                    <div class="equalTo">相当于</div>
+                    <div class="saveCo2">减排<span>0.955</span>kg二氧化碳</div>
+                    <div class="saveCarbon">减排<span>0.225</span>kg碳</div>
+                    <div class="plantTree">为国家种<span>26</span>棵树</div>
+                </div>
+            </div>
+        </div>
+        <div></div>
+        <div>
+            <FloorSpace />
+        </div>
     </div>
 </template>
 <script>
 import NowData from './valueDelivery/NowData.vue'
-import LastMonth from './valueDelivery/LastMonthData.vue'
+import LastMonthData from './valueDelivery/LastMonthData.vue'
 import AirSwitch from './valueDelivery/AirSwitch.vue'
 import AirSwitchVer from './valueDelivery/AirSwitchVer.vue'
 import FloorSpace from './valueDelivery/FloorSpace.vue'
+
+
 export default {
-    components: { NowData, AirSwitch, FloorSpace, LastMonth, AirSwitchVer },
+    components: { NowData, AirSwitch, FloorSpace, LastMonthData, AirSwitchVer },
     data() {
         return {
 
@@ -30,9 +56,105 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.hor-nowData {
-    width: 100%;
-    background: #e5e5e5;
+@import "/src/assets/css/common.less";
+.verticalWrap {
+    background: #f3fdff;
+}
+.lastTotalEnergy {
+    height: 535px;
+    .bottomCont {
+        width: 580px;
+        margin: 4px auto;
+        position: relative;
+        img {
+            width: 100%;
+        }
+        .showData {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            padding-top: 90px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            .title {
+                font-size: 28px;
+                color: #575271;
+            }
+            .energySave {
+                margin-top: 14px;
+                font-size: 56px;
+                span {
+                    font-size: 60px;
+                }
+            }
+            .totalEnergy {
+                margin-top: 18px;
+                color: #2ec5f5;
+                font-size: 28px;
+            }
+        }
+    }
+}
+.lastSaveEnergy {
+    height: 535px;
+    .bottomCont {
+        width: 900px;
+        margin: 40px auto;
+        position: relative;
+        img {
+            width: 100%;
+        }
+        .showData {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            // display: flex;
+            // align-items: center;
+            // justify-content: center;
+            // flex-direction: column;
+            .leftsave {
+                position: absolute;
+                left: 12px;
+                top: 160px;
+                color: #fff;
+                width: 210px;
+                line-height: 34px;
+                text-align: center;
+                span {
+                    font-size: 32px;
+                }
+            }
+            .equalTo {
+                position: absolute;
+                left: 249px;
+                top: 186px;
+                font-size: 20px;
+            }
+            .saveCo2 {
+                position: absolute;
+                left: 562px;
+                top: 32px;
+            }
+            .saveCarbon {
+                position: absolute;
+                left: 562px;
+                top: 186px;
+            }
+            .plantTree {
+                position: absolute;
+                left: 562px;
+                top: 340px;
+            }
+        }
+    }
 }
 </style>