大屏开发

package.json

@@ -8,7 +8,8 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "@antv/g2": "^4.1.25",
+    "@antv/g2": "^3.5.7",
+    "@antv/data-set": "^0.10.1",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.5",

src/App.vue

@@ -33,4 +33,5 @@ export default {
 //   color: #2c3e50;
 //   margin-top: 60px;
 }
+@import "/src/assets/css/common.less";
 </style>

src/assets/css/common.less

@@ -1,5 +1,4 @@
-
-.verticalClass{
+.verticalClass {
     padding: 24px 32px;
     width: 1000px;
     margin: 0 auto 20px;
@@ -7,13 +6,38 @@
     border-radius: 20px;
     border: 2px solid #ffffff;
     background: #ffffff;
-    font-size:24px;
-    .head-title{
+    font-size: 24px;
+    .head-title {
         font-size: 20px;
         font-weight: 600;
         color: #3b3558;
+        display: flex;
+        align-items: center;
+     
     }
-    .subhead-title{
+    .subhead-title {
         padding: 4px 0 0px 0px;
+        color: #575271;
+        font-size: 14px;
+    }
+}
+.horizontalClass {
+    padding: 24px 32px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    background: #ffffff;
+    font-size: 20px;
+    .head-title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #3b3558;
+        display: flex;
+        align-items: center;
+     
+    }
+    .subhead-title {
+        padding: 4px 0 0px 0px;
+        color: #575271;
+        font-size: 14px;
     }
 }

src/router/index.ts

@@ -16,9 +16,9 @@ const routes: Array<RouteConfig> = [
     component: () => import( '../views/verticalScreen.vue')
   },
   {
-    path: '/hor',
-    name: 'hor',
-    component: () => import( '../views/valueDelivery.vue')
+    path: '/horizontalScreen',
+    name: 'horizontalScreen',
+    component: () => import( '../views/horizontalScreen.vue')
   },
   {
     path: '/horTwo',

src/views/horizontalScreen.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="valueDelivery">
+        <div class="bg">
+            <img :src="bgImg">
+        </div>
+        <div class="container">
+            <div class="hor-head">
+                <HorHead />
+            </div>
+            <div class="hor-nowData-content flexBetween">
+                <div class="content-left">
+                    <NowData screenType="hor" />
+                    <div class="content-left-next flexBetween">
+                        <HorAirSwitch />
+                        <TemChart screenType="hor" />
+                    </div>
+                </div>
+                <div class="content-right">
+                    <LastMonth screenType="hor" />
+                </div>
+            </div>
+            <div class="hor-nowData-content secondScreen">
+                <div class="flexBetween">
+                    <div class="left horizontalClass">
+                        <div class="head-title">
+                            <span>上月总能耗</span>
+                        </div>
+                        <div class="subhead-title">低能耗亲自然</div>
+                        <div class="left-content">
+                            <div class="left-bg lastbg">
+                                <img :src="lastMonthTotal" />
+                            </div>
+                            <div class="left-text">
+                                <div class="left-content-first">比基准能耗</div>
+                                <div class="left-content-next">
+                                    节能<span class="next-num">50%</span>
+                                </div>
+                                <div class="left-content-first blue">总能耗28050KWh</div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="right ">
+                        <lastSaveEnergy screenType="hor" />
+                    </div>
+                </div>
+                <div class="chart-box ">
+                    <!-- <lastEnergyChart screenType="hor"/> -->
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+<script>
+import hor_big_bg from '@/assets/horImg/hor_big_bg.png';
+import HorHead from './valueDelivery/HorHead.vue'
+import NowData from './valueDelivery/NowData.vue'
+import LastMonth from './valueDelivery/LastMonthData.vue'
+import HorAirSwitch from './valueDelivery/HorAirSwitch.vue'
+import lastSaveEnergy from './valueDelivery/lastSaveEnergy.vue'
+import TemChart from './valueDelivery/TemChart.vue'
+import lastEnergyChart from './valueDelivery/lastEnergyChart.vue'
+
+export default {
+    components: { HorHead, NowData, HorAirSwitch, LastMonth, lastSaveEnergy, TemChart, lastEnergyChart },
+    data() {
+        return {
+            bgImg: hor_big_bg,
+            lastMonthTotal: require("@/assets/horImg/hor_lastMonthTotal.png")
+
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.valueDelivery {
+    scrollbar-width: none;
+    .bg {
+        position: absolute;
+        z-index: -1;
+    }
+    .hor-head {
+        // padding-top: 32px;
+        display: flex;
+        justify-content: center;
+    }
+    .hor-nowData-content {
+        padding: 30px 36px;
+        box-sizing: border-box;
+        .content-left-next {
+            padding-top: 27px;
+        }
+    }
+    .flexBetween {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+.secondScreen {
+    .left {
+        position: relative;
+        height: 556px;
+        width: 678px;
+
+        .left-content {
+            text-align: center;
+            height: 390px;
+            width: 100%;
+            margin-top: 20px;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .lastbg {
+                position: absolute;
+            }
+            .left-text {
+                // width: 100%;
+                // height: 100%;
+                .left-content-first {
+                    font-size: 20px;
+                    font-weight: 500;
+                    line-height: 28px;
+                    &.blue {
+                        color: #2ec5f5;
+                        padding-top: 12px;
+                    }
+                }
+                .left-content-next {
+                    padding-top: 12px;
+                    font-size: 46px;
+                    font-weight: 600;
+                    line-height: 64px;
+                    .next-num {
+                        font-size: 48px;
+                        font-weight: 700;
+                        line-height: 58px;
+                    }
+                }
+            }
+        }
+    }
+    .right {
+        position: relative;
+        height: 556px;
+        width: 1138px;
+    }
+    .chart-box {
+        margin-top: 24px;
+        width:1840px;
+        height: 330px;
+    }
+}
+</style>
+
+
+

src/views/valueDelivery.vue

@@ -1,85 +0,0 @@
-<template>
-    <div class="valueDelivery">
-        <div class="bg">
-            <img
-                :src="bgImg"
-                alt=""
-            >
-        </div>
-
-        <div class="container">
-            <div class="hor-head">
-                <HorHead />
-            </div>
-
-            <div class="hor-nowData-content flexBetween">
-                <div class="content-left">
-                    <div>
-                        <NowData screenType="hor" />
-                    </div>
-                    <div class="content-left-next flexBetween">
-                        <div>
-                            <AirSwitch screenType="hor" />
-                        </div>
-                        <div>
-                            <span>chart图</span>
-                        </div>
-                    </div>
-
-                </div>
-                <div class="content-right">
-                    <div>
-                        <LastMonth screenType="hor" />
-                    </div>
-                </div>
-            </div>
-
-         
-        </div>
-
-    </div>
-</template>
-<script>
-import hor_big_bg from '@/assets/horImg/hor_big_bg.png';
-import HorHead from './valueDelivery/HorHead.vue'
-import NowData from './valueDelivery/HorNowData.vue'
-import LastMonth from './valueDelivery/HorLastMonthData.vue'
-import AirSwitch from './valueDelivery/HorAirSwitch.vue'
-export default {
-    components: { HorHead, NowData, AirSwitch, LastMonth },
-    data() {
-        return {
-            bgImg: hor_big_bg
-        }
-    }
-}
-</script>
-<style lang="less" scoped>
-.valueDelivery {
-    scrollbar-width: none;
-    .bg {
-        position: absolute;
-        z-index: -1;
-    }
-    .hor-head {
-        // padding-top: 32px;
-        display: flex;
-        justify-content: center;
-    }
-    .hor-nowData-content {
-        padding: 32px 20px;
-        box-sizing: border-box;
-        .content-left-next {
-            padding-top: 27px;
-        }
-    }
-
-    .flexBetween {
-        display: flex;
-        justify-content: space-between;
-    }
-}
-</style>
-
-
-

src/views/valueDelivery/AirSwitch.vue

@@ -1,95 +0,0 @@
-<template>
-    <div class="airSwitch">
-        <div class="air-title">
-            <span>空调实时开关</span>
-        </div>
-        <div class="air-status">
-            <span>{{status ? "空调已开启" : "空调已关闭"}}</span>
-        </div>
-        <div class="air-bg">
-            <img :src="[status ? img.openImg : img.closeImg]" />
-        </div>
-        <div class="air-rate">
-            <span>空调开启率</span>
-            <span class="air-rate-value">{{value}}%</span>
-        </div>
-    </div>
-</template>
-<script>
-import air_close from '@/assets/horImg/air_open.png';
-import air_open from '@/assets/horImg/air_close.png';
-export default {
-    name: "AirSwitch",
-    props: {
-        status: {
-            type: Boolean,
-            default: () => { return true } // 默认开
-        },
-        value: {
-            type: Number,
-            default: () => { return 75 } // 默认开
-        },
-
-    },
-    data() {
-        return {
-            img: {
-                openImg: air_open,
-                closeImg: air_close,
-            }
-        }
-    },
-}
-</script>
-<style lang="less" scoped>
-.airSwitch {
-    padding: 24px 32px;
-    height: 388px;
-    width: 448px;
-    border-radius: 20px;
-    border: 2px solid #ffffff;
-    background: #ffffffcc;
-    .air-title {
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 28px;
-        color: #3b3558;
-    }
-    .air-status {
-        margin-top: 8px;
-        height: 24px;
-        width: 86px;
-        border-radius: 4px;
-        padding: 2px, 8px, 2px, 8px;
-        background: rgba(126, 216, 116, 1);
-        padding: 2px 8px;
-        box-sizing: border-box;
-        color: #ffffff;
-        font-weight: 600;
-        line-height: 20px;
-        text-align: center;
-        &.close {
-            background: rgba(155, 152, 173, 1);
-        }
-    }
-    .air-bg {
-        padding-top: 36px;
-        padding-bottom: 54px;
-        text-align: center;
-    }
-    .air-rate {
-        font-weight: 400;
-        line-height: 20px;
-        color: #575271;
-        .air-rate-value {
-            color: #3b3558;
-            font-family: Persagy;
-            font-size: 20px;
-            font-weight: 700;
-            line-height: 24px;
-        }
-    }
-}
-</style>
-
-

src/views/valueDelivery/AirSwitchVer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="airSwitch">
+    <div class="airSwitch verticalClass">
         <div class="air-title head-title">
             <span>空调实时开关</span>
             <span class="status">{{status ? "空调已开启" : "空调已关闭"}}</span>
@@ -47,24 +47,16 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-@import "/src/assets/css/common.less";
+
 .airSwitch {
-    padding: 24px 32px;
     height: 250px;
-    width: 1000px;
-    margin: 0 auto;
-    box-sizing: border-box;
-    border-radius: 20px;
-    border: 2px solid #ffffff;
-    background: #ffffff;
     .air-title {
         .status {
-            margin-top: 8px;
             margin-left: 12px;
             display: inline-block;
-            height: 24px;
-            line-height: 24px;
-            width: 86px;
+            height: 22px;
+            line-height: 22px;
+            width: 82px;
             border-radius: 4px;
             background: rgba(126, 216, 116, 1);
             box-sizing: border-box;
@@ -106,10 +98,10 @@ export default {
                 display: flex;
                 height: 40px;
                 align-items: center;
-                margin-top:14px;
+                margin-top: 14px;
                 .air-rate-value {
                     font-size: 32px;
-                    padding-left:8px;
+                    padding-left: 8px;
                 }
             }
         }

src/views/valueDelivery/FloorSpace.vue

@@ -1,28 +1,78 @@
 <template>
-    <div class="floorSpace">
-        <div
-            class="floor-item"
-            v-for="(item,index) in floorData"
-            :key="index"
-        >
-            <div class="floor-num"><span>{{item.floorName}}</span></div>
-            <div class="floor-space">
+    <div>
+        <div class="topChange">
+            <div class="allIndicator">
                 <div
-                    class="space-name"
-                    v-for="(childItem,id) in item.data"
-                    :key="id"
-                >
-                    <span>{{childItem.name}}</span>
+                    class="eachItem"
+                    v-for="item in allIndicator"
+                    @click="clickIndicator(item)"
+                    v-bind:class="{'select':item.id==selIndicator.id}"
+                ><span>{{item.name}}</span><span class="bar"></span></div>
+            </div>
+            <div class="imageDiv">
+                <img :src="selIndicator.img" />
+            </div>
+            <div class="textCont">
+                平均<span>{{selIndicator.name}}</span><span class="value">234</span><span>
+                    {{selIndicator.unit}}
+                </span>
+            </div>
+        </div>
+
+        <div class="floorWrap">
+            <div
+                class="floor-item"
+                v-for="(item,index) in floorData"
+                :key="index"
+            >
+                <div class="floor-num"><span>{{item.floorName}}</span></div>
+                <div class="floor-space">
+                    <div
+                        class="space-box"
+                        v-for="(childItem,id) in item.data"
+                        :key="id"
+                    >
+                        <div class="space-name">{{childItem.name}}</div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+
 </template>
 <script>
 export default {
     name: 'FloorSpace',
     data() {
         return {
+            selIndicator: {},
+            allIndicator: [{
+                id: 'temp',
+                name: '温度',
+                img: require('../../assets/verwendu.png'),
+                unit: '℃'
+            }, {
+                id: 'shidu',
+                name: '湿度',
+                img: require('../../assets/vershidu.png'),
+                unit: '%'
+            }, {
+                id: 'co2',
+                name: 'CO₂',
+                img: require('../../assets/verco2.png'),
+                unit: 'ppm'
+            }, {
+                id: 'jiaquan',
+                name: '甲醛',
+                img: require('../../assets/verjiaquan.png'),
+                unit: 'mg/m³'
+
+            }, {
+                id: 'pm25',
+                name: 'PM2.5',
+                img: require('../../assets/verpm25.png'),
+                unit: 'ug/m³'
+            }],
             floorData: [
                 {
                     floorName: '8F',
@@ -30,6 +80,15 @@ export default {
                         { id: 1, name: '空间1' },
                         { id: 2, name: '空间2' },
                         { id: 3, name: '空间3' },
+                        { id: 1, name: '空间4' },
+                        { id: 2, name: '空间5' },
+                        { id: 3, name: '空间6' },
+                        { id: 1, name: '空间1' },
+                        { id: 2, name: '空间2' },
+                        { id: 3, name: '空间3' },
+                        { id: 1, name: '空间4' },
+                        { id: 2, name: '空间5' },
+                        { id: 3, name: '空间6' },
                     ]
                 },
                 {
@@ -43,39 +102,107 @@ export default {
             ]
         }
     },
+    mounted() {
+        this.selIndicator = this.allIndicator[0];
+    },
+    methods: {
+        clickIndicator(item) {
+            this.selIndicator = item;
+        }
+    }
 }
 </script>
 <style lang="less" scoped>
-.floorSpace {
+.topChange {
+    height: 194px;
+    width: 1000px;
+    margin: 0 auto;
+    background: #ffffff;
+    .allIndicator {
+        padding-top: 32px;
+        padding-bottom: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .eachItem {
+            font-size: 24px;
+            color: #9b98ad;
+            margin-right: 60px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .bar {
+                width: 24px;
+                height: 6px;
+                display: inline-block;
+            }
+            &.select {
+                color: #3b3558;
+                .bar {
+                    background: #46ccf6;
+                }
+            }
+        }
+    }
+    .imageDiv {
+        height: 32px;
+        margin: 0 32px;
+    }
+    .textCont {
+        color: #3b3558;
+        font-size: 20px;
+        font-weight: 600;
+        text-align: center;
+        padding-top: 16px;
+        .value {
+            margin-left: 4px;
+        }
+    }
+}
+
+.floorWrap {
+    width: 1000px;
+    margin: 0 auto;
+    background: #ffffff;
     .floor-item {
         display: flex;
-        height: 130px;
-        padding: 22px 0;
+        padding: 18px 0;
         box-sizing: border-box;
+        background: linear-gradient(
+            161.44deg,
+            rgba(50, 129, 246, 0.1) 6.16%,
+            rgba(50, 129, 246, 0) 81.03%
+        );
     }
 
     .floor-num {
         display: flex;
-        margin: 0 23px;
+        justify-content: center;
         align-items: center;
         font-family: Persagy;
         font-size: 36px;
         font-weight: 700;
         line-height: 43px;
         color: #3b3558;
+        width: 80px;
+        flex-shrink:0;
     }
     .floor-space {
         display: flex;
-    }
-    .space-name {
-        margin-right: 8px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 86px;
-        width: 90px;
-        border-radius: 8px;
-        background: #d9f5d6;
+        flex: 1;
+        flex-wrap:  wrap ;
+        .space-box {
+            padding: 4px;
+            .space-name {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 86px;
+                width: 90px;
+                border-radius: 8px;
+                background: #d9f5d6;
+            }
+        }
     }
 }
 </style>

src/views/valueDelivery/HorAirSwitch.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="airSwitch">
-        <div class="air-title">
+    <div class="airSwitch horizontalClass">
+        <div class="head-title">
             <span>空调实时开关</span>
         </div>
-        <div class="air-status">
+        <div class="air-status" v-bind:class="{'close':!status}">
             <span>{{status ? "空调已开启" : "空调已关闭"}}</span>
         </div>
-        <div class="air-bg">
+        <div class="air-bg" >
             <img :src="[status ? img.openImg : img.closeImg]" />
         </div>
         <div class="air-rate">
@@ -16,14 +16,14 @@
     </div>
 </template>
 <script>
-import  air_open from '@/assets/horImg/air_open.png';
+import air_open from '@/assets/horImg/air_open.png';
 import air_close from '@/assets/horImg/air_close.png';
 export default {
     name: "AirSwitch",
     props: {
         status: {
             type: Boolean,
-            default: () => { return true } // 默认开
+            default: () => { return false } // 默认开
         },
         value: {
             type: Number,
@@ -42,39 +42,31 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+
 .airSwitch {
-    padding: 24px 32px;
     height: 388px;
     width: 448px;
-    border-radius: 20px;
-    border: 2px solid #ffffff;
-    background: #ffffffcc;
-    .air-title {
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 28px;
-        color: #3b3558;
-    }
     .air-status {
         margin-top: 8px;
-        height: 24px;
+        height: 20px;
         width: 86px;
         border-radius: 4px;
-        padding: 2px, 8px, 2px, 8px;
         background: rgba(126, 216, 116, 1);
-        padding: 2px 8px;
+        // padding: 2px 8px;
         box-sizing: border-box;
         color: #ffffff;
         font-weight: 600;
         line-height: 20px;
         text-align: center;
+        font-size: 14px;
         &.close {
             background: rgba(155, 152, 173, 1);
         }
     }
     .air-bg {
         padding-top: 36px;
-        padding-bottom: 54px;
+        height: 250px;
+        box-sizing: border-box;
         text-align: center;
     }
     .air-rate {

src/views/valueDelivery/HorLastMonthData.vue

@@ -1,153 +0,0 @@
-<template>
-    <div class="lastMonth">
-        <div class="lastMonth-title"><span>上月数据</span></div>
-        <div
-            class="item"
-            v-for="(item,index) in lastMonthData"
-            :key="index"
-        >
-            <div class="item-left">
-                <img :src="item.img" />
-            </div>
-            <div class="item-right">
-                <div class="item-value">
-                    <span>{{item.value}}</span><span>{{item.unit}}</span>
-                </div>
-                <div class="item-content">
-                    <div class="item-content-left">
-                        <span
-                            class="max-value maxmin-level"
-                            :style="{background:item.maxColor}"
-                        ></span>
-                        <span
-                            class="max-min-line"
-                            :style="{ background: 'linear-gradient('+item.maxColor+',' +item.minColor+')' }"
-                        ></span>
-                        <span
-                            class="min-value maxmin-level"
-                            :style="{background:item.minColor}"
-                        ></span>
-                    </div>
-                    <div class="item-content-right">
-                        <div class="max">
-                            <span>{{item.maxName}}</span>
-                            <span>{{item.max}}</span>
-                            <span>{{item.unit}}</span>
-                        </div>
-                        <div class="min">
-                            <span>{{item.minName}}</span>
-                            <span>{{item.min}}</span>
-                            <span>{{item.unit}}</span>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import icon_temp from '@/assets/icon_temp.png'
-import icon_humidity from '@/assets/icon_humidity.png'
-import icon_CO2 from '@/assets/icon_CO2.png'
-import icon_formaldehyde from '@/assets/icon_formaldehyde.png'
-import icon_PM2d5 from '@/assets/icon_PM2d5.png'
-export default {
-    name: 'lastMonthData',
-    props: {
-        screenType: {
-            type: String,
-            default: () => { return 'hor' } //hor 横屏  vert 竖屏
-        }
-    },
-    data() {
-        return {
-            lastMonthData: [
-                { id: 1, name: "温度", value: 24.5, unit: "℃", maxName: '最高温', maxColor: "#F5483D", minColor: "#7ed874", max: 26, minName: "最低温", min: 24, img: icon_temp },
-                { id: 1, name: "湿度", value: 36, unit: "%", maxColor: "#EE9F2B", minColor: "#7ed874", maxName: '最大值', max: 50, minName: "最小值", min: 20, img: icon_humidity},
-                { id: 1, name: "CO2", value: 420, unit: "ppm", maxColor: "#EFD62E", minColor: "#7ed874", maxName: '最大值', max: 630, minName: "最小值", min: 300, img: icon_CO2 },
-                { id: 1, name: "甲醛", value: 0.03, unit: "mg/m³", maxColor: "#F5483D", minColor: "#7ed874", maxName: '最大值', max: 0.01, minName: "最小值", min: 0.07, img: icon_formaldehyde },
-                { id: 1, name: "PM3d5", value: 120, unit: "ug/m³", maxColor: "#C4E34F", minColor: "#7ed874", maxName: '最大值', max: 140, minName: "最小值", min: 70, img: icon_PM2d5 },
-            ]
-        }
-    },
-    methods: {
-        // linearGraient(start,end){
-        //     return {
-        //         "border-image":linear-gradient(start,end) 0 18
-        //     }
-        // }
-    },
-}
-</script>
-<style lang="less" scoped>
-.lastMonth {
-    height: 910px;
-    width: 308px;
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.8);
-    border: 2px solid rgba(255, 255, 255, 1);
-    padding-left: 32px;
-    color: rgba(87, 82, 113, 1);
-    .lastMonth-title {
-        font-family: PingFang SC;
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 28px;
-        color: rgba(59, 53, 88, 1);
-        margin: 24px 0 0 0;
-    }
-    .item {
-         padding-top: 60px;
-        display: flex;
-        align-items: center;
-        height: 86px;
-        width: 250px;
-        .item-left {
-            width: 86px;
-            height: 86px;
-            margin-right: 20px;
-            img {
-                width: 100%;
-                height: 100%;
-            }
-        }
-        .item-value {
-            font-family: Persagy;
-            font-size: 26px;
-            font-weight: 700;
-            line-height: 31px;
-        }
-        .item-content {
-            display: flex;
-            align-items: center;
-            padding-top: 8px;
-            font-weight: 500;
-            .item-content-left {
-                display: flex;
-                flex-direction: column;
-                .max-min-line {
-                    height: 18px;
-                    width: 1px;
-                    //  background: linear-gradient(#f5483d, #7ed874);
-                    position: relative;
-                    left: 4px;
-                }
-            }
-            .maxmin-level {
-                display: inline-block;
-                height: 9px;
-                width: 9px;
-                border-radius: 50%;
-                margin-right: 8px;
-            }
-        }
-        .min {
-            padding-top: 8px;
-        }
-    }
-}
-</style>
-
-
-

src/views/valueDelivery/HorNowData.vue

@@ -1,173 +0,0 @@
-<template>
-    <div
-        class="NowData"
-        :class="[screenType==='hor' ? 'hor-nowData-contain' : '' ]"
-    >
-        <div class="nowData-title">
-            <span class="hor-nowData-title-text">实时数据</span>
-            <div class="normal-explain">
-                <span class="content_level title-right-icon"></span>
-                <span class="title-right">正常范围</span>
-            </div>
-        </div>
-        <span :class="[screenType==='hor' ? 'hor-nowData-title-slogan' : '' ]">主动式空调，会呼吸的写字楼</span>
-
-        <div
-            class="contain"
-            :class="[screenType==='hor' ? 'hor-contain' : 'vert-contain' ]"
-        >
-            <div
-                class="item"
-                v-for="(item, index) in horScreenImg"
-                :key="index"
-            >
-                <div class="item_content">
-                    <img
-                        :class="[screenType==='hor' ? '' : 'vert' ]"
-                        :src="item.img"
-                        alt=""
-                    >
-                    <div class="content_value">
-                        <span>{{item.value}}</span><span>{{item.unit}}</span>
-                    </div>
-                    <div class="content_name">
-                        <span>{{item.name}}</span>
-                    </div>
-                    <div
-                        class="content_level"
-                        :class="item.level"
-                    >
-                    </div>
-                </div>
-
-            </div>
-        </div>
-
-    </div>
-</template>
-<script>
-import icon_temp from '@/assets/icon_temp.png'
-import icon_humidity from '@/assets/icon_humidity.png'
-import icon_CO2 from '@/assets/icon_CO2.png'
-import icon_formaldehyde from '@/assets/icon_formaldehyde.png'
-import icon_PM2d5 from '@/assets/icon_PM2d5.png'
-export default {
-    props: {
-        screenType: {
-            type: String,
-            default: () => { return 'hor' } //hor 横屏  vert 竖屏
-        }
-    },
-    data() {
-        return {
-            horScreenImg: [
-                { id: 1, name: '温度', img:icon_temp, value: 24.5, unit: '℃', level: 'low' },
-                { id: 2, name: '湿度', img: icon_humidity, value: 33, unit: '%', level: 'middle' },
-                { id: 3, name: 'CO2', img:icon_CO2, value: 399, unit: 'ppm', level: 'low' },
-                { id: 4, name: '甲醛', img: icon_formaldehyde, value: 0.03, unit: 'mg/m³', level: 'low' },
-                { id: 5, name: 'PM2.5', img: icon_PM2d5, value: 6, unit: 'ug/m³', level: 'low' }
-            ]
-        }
-    }
-}
-</script>
-<style lang="less" scoped>
-.NowData {
-    &.hor-nowData-contain {
-        height: 498px;
-        width: 1508px;
-        border-radius: 20px;
-        background: #ffffff;
-    }
-    color: rgba(87, 82, 113, 1);
-    .nowData-title {
-        display: flex;
-        justify-content: space-between;
-        padding: 24px 32px 0 32px;
-    }
-    .hor-nowData-title-text {
-        font-family: PingFang SC;
-        font-size: 20px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 28px;
-        letter-spacing: 0px;
-        text-align: left;
-    }
-    .hor-nowData-title-slogan {
-        padding: 4px 0 0px 32px;
-    }
-    .contain {
-        display: flex;
-        &.hor-contain {
-            width: 1306px;
-            height: 280px;
-            margin-left: 101px;
-            padding-top: 46px;
-        }
-        &.vert-contain {
-        }
-    }
-    .item {
-        width: calc(100% / 5);
-        .item_content {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            img {
-                width: 150px;
-                height: 150px;
-                &.vert {
-                    width: 130px;
-                    height: 130px;
-                }
-            }
-
-            .content_value {
-                font-family: Persagy;
-                font-size: 42px;
-                font-weight: 700;
-                line-height: 51px;
-                color: rgba(59, 53, 88, 1);
-            }
-            .content_name {
-                padding-top: 8px;
-                font-family: PingFang SC;
-                font-size: 24px;
-                font-weight: 400;
-                line-height: 34px;
-            }
-        }
-    }
-    .content_level {
-        padding-top: 8px;
-        box-sizing: border-box;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: rgba(126, 216, 116, 1);
-        &.middle {
-            background: rgba(239, 214, 46, 1);
-        }
-        &.title-right-icon {
-            display: inline-block;
-            padding: 0;
-            width: 12px;
-            height: 12px;
-        }
-        &.title-right {
-            height: 20px;
-            width: 56px;
-        }
-    }
-    .normal-explain {
-        display: flex;
-        align-items: center;
-    }
-}
-</style>
-
-

src/views/valueDelivery/LastMonthData.vue

@@ -1,8 +1,15 @@
 <template>
-    <div :class="[screenType==='hor' ? 'lastMonth' : 'lastMonth verticalClass2' ]">
-        <div class="lastMonth-title"><span>上月数据</span></div>
+    <div
+        class="lastMonth"
+        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalLastMonth' ]"
+    >
+        <div class="head-title"><span>上月数据</span></div>
         <div class="itemWrap">
-            <div class="item" v-for="(item,index) in lastMonthData" :key="index">
+            <div
+                class="item"
+                v-for="(item,index) in lastMonthData"
+                :key="index"
+            >
                 <div class="item-left">
                     <img :src="item.img" />
                 </div>
@@ -12,9 +19,18 @@
                     </div>
                     <div class="item-content">
                         <div class="item-content-left">
-                            <span class="max-value maxmin-level" :style="{background:item.maxColor}"></span>
-                            <span class="max-min-line" :style="{ background: 'linear-gradient('+item.maxColor+',' +item.minColor+')' }"></span>
-                            <span class="min-value maxmin-level" :style="{background:item.minColor}"></span>
+                            <span
+                                class="max-value maxmin-level"
+                                :style="{background:item.maxColor}"
+                            ></span>
+                            <span
+                                class="max-min-line"
+                                :style="{ background: 'linear-gradient('+item.maxColor+',' +item.minColor+')' }"
+                            ></span>
+                            <span
+                                class="min-value maxmin-level"
+                                :style="{background:item.minColor}"
+                            ></span>
                         </div>
                         <div class="item-content-right">
                             <div class="max">
@@ -70,38 +86,23 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.lastMonth {
-    height: 910px;
-    width: 308px;
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.8);
-    border: 2px solid rgba(255, 255, 255, 1);
-    padding-left: 32px;
-    color: rgba(87, 82, 113, 1);
-    .lastMonth-title {
-        font-family: PingFang SC;
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 28px;
-        color: rgba(59, 53, 88, 1);
-        margin: 24px 0 0 0;
-    }
-    .itemWrap{
 
+.lastMonth {
+    &.horizontalClass {
+        height: 910px;
+        width: 308px;
     }
     .item {
         padding-top: 60px;
         display: flex;
         align-items: center;
-        height: 86px;
-        width: 250px;
+
         .item-left {
             width: 86px;
             height: 86px;
             margin-right: 20px;
             img {
-                width: 100%;
-                height: 100%;
+                width: 86px;
             }
         }
         .item-value {
@@ -115,6 +116,7 @@ export default {
             align-items: center;
             padding-top: 8px;
             font-weight: 500;
+            font-size: 14px;
             .item-content-left {
                 display: flex;
                 flex-direction: column;
@@ -139,22 +141,22 @@ export default {
         }
     }
 }
-.verticalClass2 {
+.verticalLastMonth {
     height: 440px;
-    width: 1000px;
-    margin:0 auto 20px;
-    box-sizing: border-box;
-       .itemWrap{
-           display: flex;
-           flex-direction: row;
-         flex-wrap:  wrap ;
+
+    .itemWrap {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
         //  justify-content:space-around;
-         .item{
-             padding-bottom: 20px;
-             margin-right:70px;
-         }
+        .item {
+            width: 33.33%;
+            // justify-content: center;
+            .item-content-right {
+                font-size: 14px;
+            }
+        }
     }
-
 }
 </style>
 

src/views/valueDelivery/NowData.vue

@@ -1,19 +1,17 @@
 <template>
     <div
         class="NowData"
-        :class="[screenType==='hor' ? 'hor-nowData-contain' : 'verticalClass2' ]"
+        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalNowData' ]"
     >
-        <div class="nowData-title">
-            <span class="hor-nowData-title-text">实时数据</span>
+        <div class="head-title">
+            <span>实时数据</span>
             <div class="normal-explain">
-                <span class="content_level title-right-icon"></span>
-                <span class="title-right">正常范围</span>
+                <span class="title-right-icon"></span>
+                <span>正常范围</span>
             </div>
         </div>
-        <div class="hor-nowData-title-slogan">主动式空调，会呼吸的写字楼</div>
-        <div
-            class="contain"
-        >
+        <div class="subhead-title">主动式空调，会呼吸的写字楼</div>
+        <div class="contain">
             <div
                 class="item"
                 v-for="(item, index) in horScreenImg"
@@ -59,9 +57,9 @@ export default {
     data() {
         return {
             horScreenImg: [
-                { id: 1, name: '温度', img:icon_temp, value: 24.5, unit: '℃', level: 'low' },
+                { id: 1, name: '温度', img: icon_temp, value: 24.5, unit: '℃', level: 'low' },
                 { id: 2, name: '湿度', img: icon_humidity, value: 33, unit: '%', level: 'middle' },
-                { id: 3, name: 'CO2', img:icon_CO2, value: 399, unit: 'ppm', level: 'low' },
+                { id: 3, name: 'CO2', img: icon_CO2, value: 399, unit: 'ppm', level: 'low' },
                 { id: 4, name: '甲醛', img: icon_formaldehyde, value: 0.03, unit: 'mg/m³', level: 'low' },
                 { id: 5, name: 'PM2.5', img: icon_PM2d5, value: 6, unit: 'ug/m³', level: 'low' }
             ]
@@ -70,38 +68,28 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+
 .NowData {
-    &.hor-nowData-contain {
+    &.horizontalClass {
         width: 1508px;
         height: 498px;
     }
-    border-radius: 20px;
-    background: #ffffff;
-    color: rgba(87, 82, 113, 1);
-    .nowData-title {
-        display: flex;
+    .head-title{
         justify-content: space-between;
-        padding: 24px 32px 0 32px;
-    }
-    .hor-nowData-title-text {
-        font-family: PingFang SC;
-        font-size: 20px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 28px;
-        letter-spacing: 0px;
-        text-align: left;
     }
-    .hor-nowData-title-slogan {
-        padding: 4px 0 0px 32px;
+    .title-right-icon {
+        display: inline-block;
+        padding: 0;
+        width: 12px;
+        height: 12px;
+        margin-right: 8px;
+        border-radius: 50%;
+        background: rgba(126, 216, 116, 1);
     }
+
     .contain {
         display: flex;
-         // width: 1306px;
-         // margin-left: 101px;
-        // height: 280px;
         padding-top: 47px;
-       
     }
     .item {
         width: calc(100% / 5);
@@ -135,7 +123,6 @@ export default {
                 line-height: 34px;
             }
         }
-
     }
     .content_level {
         margin-top: 8px;
@@ -148,41 +135,28 @@ export default {
         &.middle {
             background: rgba(239, 214, 46, 1);
         }
-        &.title-right-icon {
-            display: inline-block;
-            padding: 0;
-            width: 12px;
-            height: 12px;
-        }
-        &.title-right {
-            height: 20px;
-            width: 56px;
-        }
     }
     .normal-explain {
         display: flex;
         align-items: center;
+        font-size: 14px;
     }
-    &.verticalClass2{
-         height: 460px;
-         width: 1000px;
-        margin:0 auto 20px;
-        .item{
-            .item_content{
-                .content_value{
+    &.verticalNowData {
+        height: 460px;
+        .item {
+            .item_content {
+                .content_value {
                     font-size: 32px;
                 }
-                .content_name{
-                     margin-top:12px;
-                    font-size: 20px; 
-
+                .content_name {
+                    margin-top: 12px;
+                    font-size: 20px;
                 }
-                .content_level{
-                    margin-top:12px;
+                .content_level {
+                    margin-top: 12px;
                 }
             }
         }
-      
     }
 }
 </style>

src/views/valueDelivery/TemChart.vue

@@ -1,20 +1,185 @@
 <template>
-    <div class="temChart">
-
+    <div
+        class="temChart"
+        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalTemChart' ]"
+    >
+        <div class="head-title">
+            <span>实时温度</span>
+            <div class="rightVal">
+                室外温度<span>28</span>℃
+            </div>
+        </div>
+        <div
+            id="tempChartBox"
+            class="tempChartBox"
+        ></div>
     </div>
 </template>
 <script>
+import G2 from '@antv/g2';
+
 export default {
-    name:"TemChart",
+    name: "TemChart",
+    props: {
+        screenType: {
+            type: String,
+            default: () => { return 'ver' } //hor 横屏  vert 竖屏
+        }
+    },
+    created() {
+        console.log("created");
+    },
+    mounted() {
+        console.log("mounted");
+        this.cInitChart();
+    },
     data() {
         return {
-            
+
         }
     },
+    methods: {
+        cInitChart() {
+            var data = [
+                { Date: '8', type: '订阅数', value: 23.5 },
+                { Date: '9', type: '订阅数', value: 26.5 },
+                { Date: '10', type: '订阅数', value: 29.5 },
+                { Date: '11', type: '订阅数', value: 30.5 },
+                { Date: '12', type: '订阅数', value: 26.5 },
+                { Date: '13', type: '订阅数', value: 29.5 },
+                { Date: '14', type: '订阅数', value: 30.5 },
+                { Date: '15', type: '订阅数', value: 33.5 },
+                { Date: '16', type: '订阅数', value: 34.5 },
+                { Date: '17', type: '订阅数', value: 30.5 },
+            ];
+            var chart = new G2.Chart({
+                container: 'tempChartBox',
+                forceFit: true,
+                height: 330,
+                padding: [50, 40, 46, 60],
+            });
+            chart.source(data);
+
+            chart.scale('Date', {
+                //range: [0, 1],
+                //tickCount: 2,
+                //tickInterval
+                // type: 'timeCat'
+            });
+            chart.scale('value', {
+                //range: [0, 1],
+                tickCount: 5,
+                minTickInterval:2,
+                //ticks:[20,24,28,32]
+                //tickInterval
+                // type: 'timeCat'
+            });
+            chart.axis('Date', {
+                line: {
+                    lineWidth: 1, // 设置线的宽度
+                    stroke: 'rgba(155, 152, 173,0.4)', // 设置线的颜色
+                    lineDash: [3, 3] // 设置虚线样式
+                },
+                label: {
+                    textStyle: {
+                        fill: '#9B98AD',
+                        fontSize: 12,
+                    }
+                },
+                tickLine: null
+            });
+            chart.axis('value', {
+                tickLine: null,
+                label: {
+                    textStyle: {
+                        fill: '#9B98AD',
+                        fontSize: 12,
+                    },
+                    // formatter: function formatter(text) {
+                    //     return text；
+                    // }
+                }
+            });
+            chart.tooltip({
+                crosshairs: 'y'
+            });
+            chart.legend(false);
+            //view1
+            // var view1 = chart.view();
+            // view1.source(dv2);
+            // view1.axis(false);
+            // view1.area().position('Date*value').color('#8d8d8d').opacity(0.1).tooltip(false);
+            //view1
+            //var view1 = chart.view();
+
+            chart.line().position('Date*value').color('#23CCF9').opacity(1).shape('smooth').style({
+                lineWidth: 3,
+
+            });
+            chart.point().position('Date*value').color('#23CCF9').opacity(1).shape('circle').style({
+                lineWidth: 1,
+                stroke: '#ffffff',
+            });
+            chart.area().position('Date*value').color('l(90) 0:#23CCF9 1:#ffffff').opacity(0.2).tooltip(false).shape('smooth');
+
+            chart.guide().text({
+                top: false,
+                limitInPlot: true,
+                position: ['max', 'min'], // 文本的起始位置，值为原始数据值，支持 callback
+                content: '时间/时分', // 显示的文本内容
+                style: {
+                    fill: '#9590AD', // 文本颜色
+                    fontSize: '12' // 文本大小
+                    // fontWeight: 'bold' // 文本粗细
+                    // rotate: Math.PI / 4 // 文本旋转，以弧度为单位
+                }, // 文本的图形样式属性
+                offsetX: 16, // x 方向的偏移量
+                offsetY: 16 // y 方向偏移量
+            });
+            chart.guide().text({
+                // position: ['min', 'max'], // 文本的起始位置，值为原始数据值，支持 callback
+                position: function (xScale, yScale) {
+                    console.log('position', xScale, yScale);
+                    return ['0%', '0%'];
+                },
+                content: '温度/℃', // 显示的文本内容
+                style: {
+                    fill: '#9590AD', // 文本颜色
+                    fontSize: '12' // 文本大小
+                    // fontWeight: 'bold' // 文本粗细
+                    // rotate: Math.PI / 4 // 文本旋转，以弧度为单位
+                }, // 文本的图形样式属性
+                offsetX: -40, // x 方向的偏移量
+                offsetY: -24// y 方向偏移量
+            });
+            chart.render();
+            return chart;
+        }
+    }
 }
 </script>
 <style lang="less" scoped>
 
+.horizontalClass{
+    width:1036px;
+    height: 388px;
+}
+.temChart {
+    padding: 24px 0 0!important;
+    .head-title {
+        justify-content: space-between;
+        padding:0 32px;
+        .rightVal {
+            color: #39354e;
+            font-size: 14px;
+            font-weight: normal;
+        }
+    }
+    .tempChartBox {
+        width: 100%;
+        height: 330px;
+    }
+}
 </style>
 
 

src/views/valueDelivery/lastEnergyChart.vue

@@ -0,0 +1,169 @@
+<template>
+    <div
+        class="lastChart"
+        :class="[screenType==='hor' ? 'horizontalClass' : 'verticalClass verticalTemChart' ]"
+    >
+        <div class="head-title">
+            <span>上月每日能耗</span>
+        </div>
+        <div
+            id="lastChartBox"
+            class="lastChartBox"
+        ></div>
+    </div>
+</template>
+<script>
+import G2 from '@antv/g2';
+
+// 自定义 shape, 支持图片形式的气泡
+G2.Shape.registerShape('interval', 'borderRadius', {
+    draw: function draw(cfg, container) {
+        var points = cfg.points;
+        var path = [];
+        path.push(['M', points[0].x, points[0].y]);
+        path.push(['L', points[1].x, points[1].y]);
+        path.push(['L', points[2].x, points[2].y]);
+        path.push(['L', points[3].x, points[3].y]);
+        path.push('Z');
+        path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
+        return container.addShape('rect', {
+            attrs: {
+                x: path[1][1], // 矩形起始点为左上角
+                y: path[1][2],
+                width: path[2][1] - path[1][1],
+                height: path[0][2] - path[1][2],
+                fill: cfg.color,
+                radius: (path[2][1] - path[1][1]) / 2
+            }
+        });
+    }
+});
+
+export default {
+    name: "TemChart",
+    props: {
+        screenType: {
+            type: String,
+            default: () => { return 'ver' } //hor 横屏  vert 竖屏
+        }
+    },
+    created() {
+        console.log("created");
+    },
+    mounted() {
+        console.log("mounted");
+        this.cInitChart();
+    },
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        cInitChart() {
+            var data = [
+                { Date: '08-01', type: '订阅数', value: 1300 },
+                { Date: '08-02', type: '订阅数', value: 1200 },
+                { Date: '08-03', type: '订阅数', value: 1350 },
+                { Date: '08-04', type: '订阅数', value: 1100 },
+                { Date: '08-05', type: '订阅数', value: 1005 },
+                { Date: '08-06', type: '订阅数', value: 1200 },
+                { Date: '08-07', type: '订阅数', value: 1100 },
+                { Date: '08-08', type: '订阅数', value: 1100 },
+                { Date: '08-09', type: '订阅数', value: 1200 },
+                { Date: '08-10', type: '订阅数', value: 900 },
+                { Date: '08-11', type: '订阅数', value: 800 },
+                { Date: '08-12', type: '订阅数', value: 970 },
+            ];
+            var chart = new G2.Chart({
+                container: 'lastChartBox',
+                forceFit: true,
+                height: this.screenType === 'hor' ? 274 : 330,
+                padding: [50, 40, 46, 60],
+            });
+            chart.source(data);
+            chart.tooltip(false);
+            chart.scale('Date', {
+                //range: [0, 1],
+                //tickCount: 2,
+                //tickInterval
+                // type: 'timeCat'
+            });
+            chart.scale('value', {
+                //range: [0, 1],
+                tickCount: 5,
+                //tickInterval
+                // type: 'timeCat'
+            });
+            chart.axis('Date', {
+                line: {
+                    lineWidth: 1, // 设置线的宽度
+                    stroke: 'rgba(155, 152, 173,0.4)', // 设置线的颜色
+                    lineDash: [3, 3] // 设置虚线样式
+                },
+                label: {
+                    textStyle: {
+                        fill: '#9B98AD',
+                        fontSize: 12,
+                    }
+                },
+                tickLine: null
+            });
+            chart.axis('value', {
+                tickLine: null,
+                label: {
+                    textStyle: {
+                        fill: '#9B98AD',
+                        fontSize: 12,
+                    },
+                    // formatter: function formatter(text) {
+                    //     return text；
+                    // }
+                }
+            });
+            // chart.tooltip({
+            //     crosshairs: 'y'
+            // });
+            chart.legend(false);
+
+            //#3E91F8 #76DEFF
+
+            chart.interval().position('Date*value').color('l(90) 0:#3E91F8 1:#76DEFF').opacity(1).shape('borderRadius').adjust({ type: 'stack' }).size(12).label('value', {
+                offset: 10,
+                textStyle: {
+                    fill: '#3281F6',
+                    fontSize: 12
+                }
+            });
+
+            chart.render();
+            return chart;
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.lastChart {
+    padding: 24px 0 0 !important;
+    .head-title {
+        justify-content: space-between;
+        padding: 0 32px;
+        .rightVal {
+            color: #39354e;
+            font-size: 14px;
+            font-weight: normal;
+        }
+    }
+    .lastChartBox {
+        width: 100%;
+        height: 330px;
+    }
+    &.horizontalClass {
+        .lastChartBox {
+            height: 274px;
+        }
+    }
+}
+</style>
+
+

src/views/valueDelivery/lastSaveEnergy.vue

@@ -0,0 +1,104 @@
+<template>
+    <div
+        class="lastSaveEnergy"
+        :class="[screenType=='ver'?'verticalClass':'horizontalClass']"
+    >
+        <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>
+</template>
+<script>
+import air_close from '@/assets/horImg/air_close.png';
+import air_open from '@/assets/horImg/air_open.png';
+export default {
+    name: "lastSaveEnergy",
+    props: {
+        screenType: {
+            type: String,
+            default: () => { return 'hor' } //hor 横屏  vert 竖屏
+        }
+    },
+    data() {
+        return {
+
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+
+.lastSaveEnergy {
+    &.verticalClass {
+        height: 535px;
+    }
+     &.horizontalClass {
+        height: 100%;
+    }
+    .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>
+
+

src/views/valueDelivery/xxx.vue

@@ -1,28 +0,0 @@
-<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>
-
-

src/views/verticalScreen.vue

@@ -2,6 +2,7 @@
     <div class="verticalWrap">
         <NowData screenType="ver" />
         <AirSwitchVer />
+        <TemChart screenType="ver" />
         <LastMonthData screenType="ver" />
         <div class="lastTotalEnergy verticalClass">
             <div class="head-title">
@@ -17,37 +18,24 @@
                 </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>
+        <lastSaveEnergy screenType="ver" />
+            <!-- <lastEnergyChart /> -->
+
             <FloorSpace />
-        </div>
+
     </div>
 </template>
 <script>
 import NowData from './valueDelivery/NowData.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'
-
+import TemChart from './valueDelivery/TemChart.vue'
+import lastEnergyChart from './valueDelivery/lastEnergyChart.vue'
+import lastSaveEnergy from './valueDelivery/lastSaveEnergy.vue'
 
 export default {
-    components: { NowData, AirSwitch, FloorSpace, LastMonthData, AirSwitchVer },
+    components: { NowData, FloorSpace, LastMonthData, AirSwitchVer, TemChart, lastEnergyChart, lastSaveEnergy },
     data() {
         return {
 
@@ -100,62 +88,6 @@ export default {
         }
     }
 }
-.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>