大屏布局修改

package.json

@@ -8,11 +8,12 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "@antv/g2": "^3.5.7",
     "@antv/data-set": "^0.10.1",
+    "@antv/g2": "^3.5.7",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.5",
+    "moment": "^2.29.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2",

src/App.vue

@@ -29,6 +29,7 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background:#f3fdff;
 //   text-align: center;
 //   color: #2c3e50;
 //   margin-top: 60px;

src/assets/css/common.less

@@ -1,6 +1,6 @@
 .verticalClass {
     padding: 24px 32px;
-    width: 1000px;
+    min-width: 960px;
     margin: 0 auto 20px;
     box-sizing: border-box;
     border-radius: 20px;
@@ -13,7 +13,6 @@
         color: #3b3558;
         display: flex;
         align-items: center;
-     
     }
     .subhead-title {
         padding: 4px 0 0px 0px;
@@ -33,7 +32,6 @@
         color: #3b3558;
         display: flex;
         align-items: center;
-     
     }
     .subhead-title {
         padding: 4px 0 0px 0px;

src/utils/publicMethod.ts

@@ -0,0 +1,56 @@
+// interface obj {
+//     string: string;
+// }
+// const allTypes: Record<string, boolean> = { jpg: true, gif: true };
+//var publicMethod = {
+var selectColor = function(value: any, typestr: string) {
+    var colorArr: { [key: string]: Array<any> } = {
+        temp: [
+            { min: Number.NEGATIVE_INFINITY, max: 20, color: "#52A0FF" },
+            { min: 20, max: 22, color: "#40DDCE" },
+            { min: 22, max: 27, color: "#7ED874" },
+            { min: 27, max: 28, color: "#C4E34F" },
+            { min: 28, max: 30, color: "#EE9F2B" },
+            { min: 30, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+        ],
+        shidu: [
+            { min: 0, max: 30, color: "#F5483D" },
+            { min: 30, max: 35, color: "#EE9F2B" },
+            { min: 35, max: 65, color: "#7ED874" },
+            { min: 65, max: 95, color: "#40DDCE" },
+            { min: 95, max: Number.POSITIVE_INFINITY, color: "#52A0FF" },
+        ],
+        co2: [
+            { min: 0, max: 800, color: "#7ED874" },
+            { min: 800, max: 1000, color: "#C4E34F" },
+            { min: 1000, max: 2500, color: "#EE9F2B" },
+            { min: 2500, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+        ],
+        jiaquan: [
+            { min: 0, max: 0.08, color: "#7ED874" },
+            { min: 0.08, max: 0.1, color: "#C4E34F" },
+            { min: 0.1, max: 0.2, color: "#EE9F2B" },
+            { min: 0.2, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+        ],
+        pm25: [
+            { min: 0, max: 35, color: "#7ED874" },
+            { min: 35, max: 75, color: "#C4E34F" },
+            { min: 75, max: 150, color: "#EFD62E" },
+            { min: 150, max: 250, color: "#EE9F2B" },
+            { min: 250, max: Number.POSITIVE_INFINITY, color: "#F5483D" },
+        ],
+    };
+    console.log("typestr", typestr);
+    console.log("value", value);
+    var nowColorArr = colorArr[typestr];
+    var color = null;
+    nowColorArr.forEach((ele: any) => {
+        if (value > ele.min && value < ele.max) {
+            color = ele.color;
+        }
+    });
+    return color;
+};
+//};
+
+export { selectColor };

src/views/horThree.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="container">
             <div class="hor-head">
-                <HorHead />
+                <pageHead />
             </div>
             <div class="hor-nowData-content">
                 <div class="flexBetween">
@@ -68,10 +68,10 @@ declare function require(img: string): string;
 const hor_big_bg = require("@/assets/horImg/hor_big_bg.png");
 const hor_lastMonthEner = require("@/assets/horImg/hor_lastMonthEner.png");
 const hor_lastMonthTotal = require("@/assets/horImg/hor_lastMonthTotal.png");
-import HorHead from "./valueDelivery/HorHead.vue";
+import pageHead from "./valueDelivery/pageHead.vue";
 
 export default Vue.extend({
-    components: { HorHead },
+    components: { pageHead },
     data() {
         return {
             bgImg: hor_big_bg,

src/views/horTwo.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="container">
             <div class="hor-head">
-                <HorHead />
+                <pageHead />
             </div>
             <div>
                 <HorFloorSpace />
@@ -19,12 +19,13 @@
 </template>
 <script lang="ts">
 import Vue from "vue";
-import HorHead from "./valueDelivery/HorHead.vue";
-import HorFloorSpace from "./valueDelivery/HorFloorSpace.vue";
+import pageHead from "./valueDelivery/pageHead.vue";
+import HorFloorSpace from "./valueDelivery/HorFloorSpace2.vue";
 declare function require(img: string): string;
 const hor_big_bg = require("@/assets/horImg/hor_big_bg.png");
+
 export default Vue.extend({
-    components: { HorHead, HorFloorSpace },
+    components: { pageHead, HorFloorSpace },
     data() {
         return {
             bgImg: hor_big_bg

src/views/horizontalScreen.vue

@@ -1,18 +1,23 @@
 <template>
-    <div class="valueDelivery">
+    <div class="horizontalScreen">
         <div class="bg">
             <img :src="bgImg">
         </div>
         <div class="container">
             <div class="hor-head">
-                <HorHead />
+                <pageHead />
             </div>
-            <div class="hor-nowData-content flexBetween">
+            <div class="hor-nowData-content firstScreen flexBetween">
                 <div class="content-left">
                     <NowData screenType="hor" />
-                    <div class="content-left-next flexBetween">
-                        <HorAirSwitch />
-                        <TemChart screenType="hor" />
+                    <div class="content-left-cont flexBetween">
+                        <div class="bottom-left">
+                            <HorAirSwitch />
+                        </div>
+                        <div class="bottom-right">
+                            <TemChart screenType="hor" />
+                        </div>
+
                     </div>
                 </div>
                 <div class="content-right">
@@ -45,26 +50,29 @@
                     </div>
                 </div>
                 <div class="chart-box ">
-                    <!-- <lastEnergyChart screenType="hor"/> -->
+                    <lastEnergyChart screenType="hor" />
                 </div>
             </div>
-
+            <div class="hor-nowData-content">
+                <horFloorSpace />
+            </div>
         </div>
 
     </div>
 </template>
 <script>
 import hor_big_bg from '@/assets/horImg/hor_big_bg.png';
-import HorHead from './valueDelivery/HorHead.vue'
+import pageHead from './valueDelivery/pageHead.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'
+import horFloorSpace from './valueDelivery/horFloorSpace.vue'
 
 export default {
-    components: { HorHead, NowData, HorAirSwitch, LastMonth, lastSaveEnergy, TemChart, lastEnergyChart },
+    components: { pageHead, NowData, HorAirSwitch, LastMonth, lastSaveEnergy, TemChart, lastEnergyChart, horFloorSpace },
     data() {
         return {
             bgImg: hor_big_bg,
@@ -75,22 +83,40 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.valueDelivery {
+.horizontalScreen {
+    padding: 30px 40px;
     scrollbar-width: none;
     .bg {
         position: absolute;
+        top: 0;
+        left: 0;
         z-index: -1;
     }
     .hor-head {
         // padding-top: 32px;
-        display: flex;
-        justify-content: center;
+        // display: flex;
+        // justify-content: center;
     }
     .hor-nowData-content {
-        padding: 30px 36px;
+        // padding: 30px 36px;
         box-sizing: border-box;
-        .content-left-next {
+    }
+    .firstScreen {
+        height: 910px;
+        .content-left {
+            width: calc(100% - 328px);
+        }
+        .content-right {
+            width: 308px;
+        }
+        .content-left-cont {
             padding-top: 27px;
+            .bottom-left {
+                width: 446px;
+            }
+            .bottom-right {
+                width: calc(100% - 466px);
+            }
         }
     }
     .flexBetween {
@@ -103,7 +129,6 @@ export default {
         position: relative;
         height: 556px;
         width: 678px;
-
         .left-content {
             text-align: center;
             height: 390px;
@@ -145,11 +170,11 @@ export default {
     .right {
         position: relative;
         height: 556px;
-        width: 1138px;
+        width: calc(100% - 698px);
     }
     .chart-box {
         margin-top: 24px;
-        width:1840px;
+        // width: 1840px;
         height: 330px;
     }
 }

src/views/valueDelivery/AirSwitch2.vue

@@ -0,0 +1,95 @@
+<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/FloorSpace.vue

@@ -115,7 +115,7 @@ export default {
 <style lang="less" scoped>
 .topChange {
     height: 194px;
-    width: 1000px;
+    // width: 1000px;
     margin: 0 auto;
     background: #ffffff;
     .allIndicator {
@@ -125,6 +125,7 @@ export default {
         align-items: center;
         justify-content: center;
         .eachItem {
+            cursor: pointer;
             font-size: 24px;
             color: #9b98ad;
             margin-right: 60px;
@@ -161,7 +162,7 @@ export default {
 }
 
 .floorWrap {
-    width: 1000px;
+    // width: 1000px;
     margin: 0 auto;
     background: #ffffff;
     .floor-item {

src/views/valueDelivery/HorAirSwitch.vue

@@ -45,7 +45,7 @@ export default {
 
 .airSwitch {
     height: 388px;
-    width: 448px;
+    // width: 446px;
     .air-status {
         margin-top: 8px;
         height: 20px;

src/views/valueDelivery/HorFloorSpace.vue

@@ -1,82 +1,303 @@
 <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 class="leftChange">
+            <!-- <div class="allIndicator">
                 <div
-                    class="space-name"
-                    v-for="(childItem,id) in item.data"
-                    :key="id"
+                    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 class="allIndicator">
+                <div
+                    class="eachItem "
+                    v-for="item in allIndicator"
+                    @click="clickIndicator(item)"
+                    v-bind:class="{'select':item.id==selIndicator.id}"
                 >
-                    <span>{{childItem.name}}</span>
+                    <div class="title">{{item.name}}</div>
+                    <div
+                        class="textCont"
+                        v-show="item.id==selIndicator.id"
+                    >22{{selIndicator.unit}}<br /><span class="name">平均{{selIndicator.name}}</span></div>
+                    <img
+                        v-show="item.id==selIndicator.id"
+                        class="img"
+                        :src="selIndicator.img"
+                    ></img>
+                </div>
+            </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 lang="ts">
-import Vue from "vue";
-export default Vue.extend({
+<script>
+export default {
     name: 'FloorSpace',
     data() {
         return {
+            selIndicator: {},
+            allIndicator: [{
+                id: 'temp',
+                name: '温度',
+                img: require('../../assets/horImg/wendu.png'),
+                unit: '℃'
+            }, {
+                id: 'shidu',
+                name: '湿度',
+                img: require('../../assets/horImg/shidu.png'),
+                unit: '%'
+            }, {
+                id: 'co2',
+                name: 'CO₂',
+                img: require('../../assets/horImg/co2.png'),
+                unit: 'ppm'
+            }, {
+                id: 'jiaquan',
+                name: '甲醛',
+                img: require('../../assets/horImg/jiaquan.png'),
+                unit: 'mg/m³'
+
+            }, {
+                id: 'pm25',
+                name: 'PM2.5',
+                img: require('../../assets/horImg/pm25.png'),
+                unit: 'ug/m³'
+            }],
             floorData: [
                 {
-                    floorName: "8F",
+                    floorName: '8F',
                     data: [
-                        { id: 1, name: "空间1" },
-                        { id: 2, name: "空间2" },
-                        { id: 3, name: "空间3" },
-                    ],
+                        { 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' },
+                    ]
                 },
                 {
-                    floorName: "7F",
+                    floorName: '7F',
                     data: [
-                        { id: 1, name: "空间1" },
-                        { id: 2, name: "空间2" },
-                        { id: 3, name: "空间3" },
-                    ],
+                        { id: 1, name: '空间1' },
+                        { id: 2, name: '空间2' },
+                        { id: 3, name: '空间3' },
+                    ]
                 },
-            ],
-        };
+            ]
+        }
     },
-});
+    mounted() {
+        this.selIndicator = this.allIndicator[0];
+    },
+    methods: {
+        clickIndicator(item) {
+            this.selIndicator = item;
+        },
+        floorHandle(floorNum, spaceNum) {
+            var lineNum = spaceNum;//一行的房间数
+            var maxFloorSpace = 0;//一层 最多显示房间数
+            if (floorNum == 1) {
+                if (spaceNum > 2 && spaceNum < = 24 ) {
+                    lineNum = spaceNum / 2;
+                }else if (spaceNum > 24 && spaceNum <= 36) {
+                    lineNum = Math.ceil(spaceNum / 3);
+                } else if (spaceNum > 36 && spaceNum <= 48) {
+                    lineNum = Math.ceil(spaceNum / 4);
+                } else if (spaceNum > 48 && spaceNum <= 60) {
+                    lineNum = Math.ceil(spaceNum / 5);
+                }
+                maxFloorSpace=60;
+        }
+         if(floorNum == 2) {
+            if (spaceNum > 16 && spaceNum < = 32 ) {
+                lineNum = Math.ceil(spaceNum / 2);
+            }else if (spaceNum > 32 && spaceNum < = 48 ) {
+                lineNum = Math.ceil(spaceNum / 3);
+            }
+            maxFloorSpace=48;
+        }
+        if(floorNum ==3||floorNum ==5) {
+                    if (spaceNum > 16 && spaceNum < = 32 ) {
+                        lineNum = Math.ceil(spaceNum / 2);
+                    }
+                     maxFloorSpace=32;
+                }
+    }
+}
+}
 </script>
 <style lang="less" scoped>
 .floorSpace {
+    width: 100%;
+    height: 910px;
+    display: flex;
+}
+.leftChange {
+    height: 100%;
+    width: 154px;
+    margin: 0 auto;
+    background: #ffffff;
+    .allIndicator {
+        padding-top: 32px;
+        padding-bottom: 20px;
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        .eachItem {
+            cursor: pointer;
+            margin-bottom: 60px;
+            padding: 0;
+            text-align: center;
+            .title {
+                color: #9b98ad;
+                font-size: 24px;
+            }
+
+            &.select {
+                border-left: 4px solid #46ccf6;
+                .title {
+                    color: #3b3558;
+                    font-size: 24px;
+                }
+                .textCont {
+                    color: #3b3558;
+                    font-size: 20px;
+                    padding-top: 16px;
+                    padding-bottom: 20px;
+                    line-height: 20px;
+                    .name {
+                        font-size: 14px;
+                    }
+                }
+                .img {
+                    height: 196px;
+                    padding: 0;
+                    margin: 0;
+                }
+            }
+        }
+    }
+    // .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;
+    flex: 1;
+    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/HorFloorSpace2.vue

@@ -0,0 +1,84 @@
+<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
+                    class="space-name"
+                    v-for="(childItem,id) in item.data"
+                    :key="id"
+                >
+                    <span>{{childItem.name}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+    name: 'FloorSpace',
+    data() {
+        return {
+            floorData: [
+                {
+                    floorName: "8F",
+                    data: [
+                        { id: 1, name: "空间1" },
+                        { id: 2, name: "空间2" },
+                        { id: 3, name: "空间3" },
+                    ],
+                },
+                {
+                    floorName: "7F",
+                    data: [
+                        { id: 1, name: "空间1" },
+                        { id: 2, name: "空间2" },
+                        { id: 3, name: "空间3" },
+                    ],
+                },
+            ],
+        };
+    },
+});
+</script>
+<style lang="less" scoped>
+.floorSpace {
+    .floor-item {
+        display: flex;
+        height: 130px;
+        padding: 22px 0;
+        box-sizing: border-box;
+    }
+
+    .floor-num {
+        display: flex;
+        margin: 0 23px;
+        align-items: center;
+        font-family: Persagy;
+        font-size: 36px;
+        font-weight: 700;
+        line-height: 43px;
+        color: #3b3558;
+    }
+    .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;
+    }
+}
+</style>
+
+

src/views/valueDelivery/HorLastMonthData2.vue

@@ -0,0 +1,153 @@
+<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/HorNowData2.vue

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

@@ -21,15 +21,15 @@
                         <div class="item-content-left">
                             <span
                                 class="max-value maxmin-level"
-                                :style="{background:item.maxColor}"
+                                :style="{backgroundColor: selectColor(item.max,item.id)}"
                             ></span>
                             <span
                                 class="max-min-line"
-                                :style="{ background: 'linear-gradient('+item.maxColor+',' +item.minColor+')' }"
+                                :style="{ background: 'linear-gradient('+selectColor(item.max,item.id)+',' +selectColor(item.min,item.id)+')' }"
                             ></span>
                             <span
                                 class="min-value maxmin-level"
-                                :style="{background:item.minColor}"
+                                :style="{backgroundColor: selectColor(item.min,item.id)}"
                             ></span>
                         </div>
                         <div class="item-content-right">
@@ -57,6 +57,8 @@ 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'
+import { selectColor } from '@/utils/publicMethod'
+
 export default {
     name: 'lastMonthData',
     props: {
@@ -68,11 +70,11 @@ export default {
     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 },
+                { id: 'temp', name: "温度", value: 24.5, unit: "℃", maxName: '最高温', max: 37, minName: "最低温", min: 24, img: icon_temp },
+                { id: 'shidu', name: "湿度", value: 100, unit: "%", maxName: '最大值', max: 50, minName: "最小值", min: 20, img: icon_humidity },
+                { id: 'co2', name: "CO2", value: 2600, unit: "ppm", maxName: '最大值', max: 2600, minName: "最小值", min: 300, img: icon_CO2 },
+                { id: 'jiaquan', name: "甲醛", value: 0.03, unit: "mg/m³", maxName: '最大值', max: 0.01, minName: "最小值", min: 0.07, img: icon_formaldehyde },
+                { id: 'pm25', name: "PM2.5", value: 120, unit: "ug/m³", maxColor: "#C4E34F", minColor: "#7ed874", maxName: '最大值', max: 340, minName: "最小值", min: 20, img: icon_PM2d5 },
             ]
         }
     },
@@ -82,15 +84,16 @@ export default {
         //         "border-image":linear-gradient(start,end) 0 18
         //     }
         // }
+        selectColor: selectColor
     },
 }
 </script>
 <style lang="less" scoped>
-
 .lastMonth {
     &.horizontalClass {
-        height: 910px;
-        width: 308px;
+        height: 100%;
+        //height: 910px;
+        // width: 308px;
     }
     .item {
         padding-top: 60px;

src/views/valueDelivery/NowData.vue

@@ -31,6 +31,7 @@
                     </div>
                     <div
                         class="content_level"
+                        :style="{backgroundColor: selectColor(item.value,item.id)}"
                         :class="item.level"
                     >
                     </div>
@@ -47,6 +48,7 @@ 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'
+import { selectColor } from '@/utils/publicMethod'
 export default {
     props: {
         screenType: {
@@ -57,24 +59,29 @@ export default {
     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' }
+                { id: 'temp', name: '温度', img: icon_temp, value: 24.5, unit: '℃', level: 'low' },
+                { id: 'shidu', name: '湿度', img: icon_humidity, value: 33, unit: '%', level: 'middle' },
+                { id: 'co2', name: 'CO2', img: icon_CO2, value: 2399, unit: 'ppm', level: 'low' },
+                { id: 'jiaquan', name: '甲醛', img: icon_formaldehyde, value: 0.12, unit: 'mg/m³', level: 'low' },
+                { id: 'pm25', name: 'PM2.5', img: icon_PM2d5, value: 100, unit: 'ug/m³', level: 'low' }
             ]
         }
+    },
+    mounted() {
+        console.log("selectColor", selectColor);
+    },
+    methods: {
+        selectColor: selectColor
     }
 }
 </script>
 <style lang="less" scoped>
-
 .NowData {
     &.horizontalClass {
-        width: 1508px;
+        //width: 1508px;
         height: 498px;
     }
-    .head-title{
+    .head-title {
         justify-content: space-between;
     }
     .title-right-icon {

src/views/valueDelivery/TemChart copy.vue

@@ -0,0 +1,201 @@
+<template>
+    <div
+        class="temChart"
+        :class="[screenType==='hor' ? 'hor-nowData-contain' : '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';
+import { Chart } from '@antv/g2';
+
+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: '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 Chart({
+                container: 'tempChartBox',
+                forceFit: true,
+                width: 1000,
+                height: 330,
+                padding: [50, 40, 46, 60],
+            });
+            chart.data(data);
+
+            chart.scale('Date', {
+                //range: [0, 1],
+                //tickCount: 2,
+                //tickInterval
+                // type: 'timeCat'
+            });
+            chart.scale('value', {
+                sale: {
+                    min: 20,
+                    max: 100,
+                    minLimit:20,
+                    base:20
+                },
+                type: 'linear'
+                //range: [0, 1],
+                //tickCount: 5,
+                //tickInterval
+                // type: 'timeCat'
+            });
+            chart.axis('Date', {
+                // line: {
+                //     style: {
+                //         lineWidth: 1, // 设置线的宽度
+                //         stroke: '#D5D5DE', // 设置线的颜色
+                //         lineDash: [3, 3] // 设置虚线样式
+                //     }
+                // },
+                line: false,
+                label: {
+                    style: {
+                        fill: '#9B98AD',
+                        fontSize: 12,
+                    }
+                },
+                tickLine: null
+            });
+            chart.axis('value', {
+                tickLine: null,
+                grid: {
+                    line: {
+                        style: {
+                            lineWidth: 1, // 设置线的宽度
+                            stroke: '#D5D5DE', // 设置线的颜色
+                            lineDash: [3, 3] // 设置虚线样式
+                        }
+
+                    }
+                },
+                label: {
+                    style: {
+                        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').shape('smooth').style({
+                lineWidth: 3,
+
+            });
+            chart.point().position('Date*value').color('#23CCF9').shape('circle').style({
+                lineWidth: 1,
+                stroke: '#ffffff',
+            });
+            chart.area().position('Date*value').color('l(90) 0:#23CCF9 1:#ffffff').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>
+@import "/src/assets/css/common.less";
+.verticalTemChart {
+    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: 1000px;
+        height: 330px;
+    }
+}
+</style>
+
+

src/views/valueDelivery/lastEnergyChart.vue

@@ -10,10 +10,13 @@
             id="lastChartBox"
             class="lastChartBox"
         ></div>
+        <!-- <div id="slider"></div> -->
     </div>
 </template>
 <script>
 import G2 from '@antv/g2';
+import DataSet from '@antv/data-set';
+import moment from 'moment';
 
 // 自定义 shape, 支持图片形式的气泡
 G2.Shape.registerShape('interval', 'borderRadius', {
@@ -53,45 +56,101 @@ export default {
     mounted() {
         console.log("mounted");
         this.cInitChart();
+        var start = moment('2021-08-01', 'YYYY-MM-DD');
+        var end = moment('2021-08-12', 'YYYY-MM-DD');
+        var end2 = moment('2021-08-12', 'YYYY-MM-DD');
+        console.log('start', start);
+        // var intervalInt = setInterval(() => {
+        //     start.add(1, 'days');
+        //     end.add(1, 'days');
+
+        //     //console.log('start', start);
+
+        //     this.ds.setState('start', start.format('YYYY-MM-DD'));
+        //     this.ds.setState('end', end.format('YYYY-MM-DD'));
+
+        //     if (end.format('YYYY-MM-DD') == end2.endOf('month').format('YYYY-MM-DD')) {
+        //         clearInterval(intervalInt);
+        //     }
+        // }, 800);
     },
     data() {
         return {
-
+            ds: null,
         }
     },
     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 },
+                { Date: '2021-08-01', type: '订阅数', value: 1300 },
+                { Date: '2021-08-02', type: '订阅数', value: 1200 },
+                { Date: '2021-08-03', type: '订阅数', value: 1350 },
+                { Date: '2021-08-04', type: '订阅数', value: 1100 },
+                { Date: '2021-08-05', type: '订阅数', value: 1005 },
+                { Date: '2021-08-06', type: '订阅数', value: 1200 },
+                { Date: '2021-08-07', type: '订阅数', value: 1100 },
+                { Date: '2021-08-08', type: '订阅数', value: 1100 },
+                { Date: '2021-08-09', type: '订阅数', value: 1200 },
+                { Date: '2021-08-10', type: '订阅数', value: 900 },
+                { Date: '2021-08-11', type: '订阅数', value: 800 },
+                { Date: '2021-08-12', type: '订阅数', value: 970 },
+                { Date: '2021-08-13', type: '订阅数', value: 1100 },
+                { Date: '2021-08-14', type: '订阅数', value: 1100 },
+                { Date: '2021-08-15', type: '订阅数', value: 1005 },
+                { Date: '2021-08-16', type: '订阅数', value: 1200 },
+                { Date: '2021-08-17', type: '订阅数', value: 1100 },
+                { Date: '2021-08-18', type: '订阅数', value: 1100 },
+                { Date: '2021-08-19', type: '订阅数', value: 1200 },
+                { Date: '2021-08-20', type: '订阅数', value: 900 },
+                { Date: '2021-08-21', type: '订阅数', value: 800 },
+                { Date: '2021-08-22', type: '订阅数', value: 970 },
+                { Date: '2021-08-23', type: '订阅数', value: 1100 },
+                { Date: '2021-08-24', type: '订阅数', value: 1100 },
+                { Date: '2021-08-25', type: '订阅数', value: 1005 },
+                { Date: '2021-08-26', type: '订阅数', value: 1200 },
+                { Date: '2021-08-27', type: '订阅数', value: 1100 },
+                { Date: '2021-08-28', type: '订阅数', value: 1100 },
+                { Date: '2021-08-29', type: '订阅数', value: 1200 }, { Date: '2021-08-30', type: '订阅数', value: 1200 },
             ];
+            var ds = new DataSet({
+                state: {
+                    start: '2021-08-01',
+                    end: '2021-08-12'
+                }
+            })
+            var dv = ds.createView();
+            dv.source(data).transform({
+                type: 'filter',
+                callback: function callback(obj) {
+                    var date = obj.Date;
+                    return date <= ds.state.end && date >= ds.state.start;
+                }
+            });
             var chart = new G2.Chart({
                 container: 'lastChartBox',
                 forceFit: true,
                 height: this.screenType === 'hor' ? 274 : 330,
-                padding: [50, 40, 46, 60],
+                padding: [20, 20, 36, 20],
             });
-            chart.source(data);
+            chart.source(dv);
             chart.tooltip(false);
             chart.scale('Date', {
                 //range: [0, 1],
-                //tickCount: 2,
-                //tickInterval
-                // type: 'timeCat'
+                tickCount: 12,
+                //tickInterval:0,
+                type: 'timeCat',
+                mask: 'MM-DD',
+                // formatter: function formatter(val) {
+                //     console.log('val',val);
+                //     return val.substr(5);
+                // }
             });
             chart.scale('value', {
                 //range: [0, 1],
                 tickCount: 5,
+                type: 'linear',
+                max: 1500
                 //tickInterval
                 // type: 'timeCat'
             });
@@ -109,24 +168,9 @@ export default {
                 },
                 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);
+            chart.axis('value', false);
 
-            //#3E91F8 #76DEFF
+            chart.legend(false);
 
             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,
@@ -137,6 +181,31 @@ export default {
             });
 
             chart.render();
+            this.ds = ds;
+            // chart.interact('slider', {
+            //     container: 'slider', // DOM id
+            //     start: ds.state.start, // 和状态量对应
+            //     end: ds.state.end,
+            //     data: data, // 源数据
+            //     xAxis: 'Date', // 背景图的横轴对应字段，同时为数据筛选的字段
+            //     yAxis: 'value', // 背景图的纵轴对应字段，同时为数据筛选的字段
+            //     scales: {
+            //         Date: {
+            //             type: 'timeCat',
+            //             nice: false
+            //         }
+            //     },
+            //     onChange: function onChange(_ref) {
+            //         var startText = _ref.startText,
+            //             endText = _ref.endText;
+
+            //         ds.setState('start', startText);
+            //         ds.setState('end', endText);
+            //         setTimeout(function () {
+            //             chart.render();
+            //         }, 32);
+            //     }
+            // });
             return chart;
         }
     }
@@ -160,7 +229,7 @@ export default {
     }
     &.horizontalClass {
         .lastChartBox {
-            height: 274px;
+            height: 276px;
         }
     }
 }

src/views/valueDelivery/lastSaveEnergy.vue

@@ -46,7 +46,7 @@ export default {
         height: 100%;
     }
     .bottomCont {
-        width: 900px;
+         width: 900px;
         margin: 40px auto;
         position: relative;
         img {

src/views/valueDelivery/HorHead.vue

@@ -17,7 +17,10 @@
             <div class="right-item">
                 晴
             </div>
-            <div class="right-item">
+            <div
+                class="right-item"
+                style="display:none"
+            >
                 <img
                     class="firstImg"
                     :src="changeVer"
@@ -28,7 +31,10 @@
                     alt=""
                 >
             </div>
-            <div class="right-item">
+            <div
+                class="right-item"
+                style="display:none"
+            >
                 退出
             </div>
         </div>
@@ -62,13 +68,13 @@ export default Vue.extend({
     align-items: center;
     &.horSty {
         height: 74px;
-        width: 1840px;
+        // width: 1840px;
     }
     .horHead-right {
         display: flex;
-        justify-content: space-between;
+        // justify-content: space-between;
         height: 46px;
-        width: 396px;
+        // width: 396px;
         .right-item {
             display: flex;
             justify-content: center;
@@ -79,7 +85,7 @@ export default Vue.extend({
             color: #575271;
             font-weight: 400;
             line-height: 22px;
-
+            margin-left: 10px;
             background: #ffffff99;
             border: 2px solid #ffffffcc;
             box-sizing: border-box;

src/views/verticalScreen.vue

@@ -1,5 +1,9 @@
 <template>
     <div class="verticalWrap">
+        <div class="pageHead">
+            <pageHead />
+        </div>
+
         <NowData screenType="ver" />
         <AirSwitchVer />
         <TemChart screenType="ver" />
@@ -19,9 +23,9 @@
             </div>
         </div>
         <lastSaveEnergy screenType="ver" />
-            <!-- <lastEnergyChart /> -->
+        <lastEnergyChart />
 
-            <FloorSpace />
+        <FloorSpace />
 
     </div>
 </template>
@@ -33,9 +37,10 @@ import FloorSpace from './valueDelivery/FloorSpace.vue'
 import TemChart from './valueDelivery/TemChart.vue'
 import lastEnergyChart from './valueDelivery/lastEnergyChart.vue'
 import lastSaveEnergy from './valueDelivery/lastSaveEnergy.vue'
+import pageHead from './valueDelivery/pageHead.vue'
 
 export default {
-    components: { NowData, FloorSpace, LastMonthData, AirSwitchVer, TemChart, lastEnergyChart, lastSaveEnergy },
+    components: { NowData, FloorSpace, LastMonthData, AirSwitchVer, TemChart, lastEnergyChart, lastSaveEnergy, pageHead },
     data() {
         return {
 
@@ -47,6 +52,10 @@ export default {
 @import "/src/assets/css/common.less";
 .verticalWrap {
     background: #f3fdff;
+    padding: 50px 40px 100px;
+}
+.pageHead {
+    padding-bottom: 50px;
 }
 .lastTotalEnergy {
     height: 535px;