开发修改

src/App.vue

@@ -11,38 +11,44 @@ export default {
     data() {
         return {};
     },
-    created() {//对于两个组件的 接口写在了这里
-        this.getAirCondition();//空调数据
-        this.getLastAllEnergy();//上月所有能耗数据  上月总能耗 上月节约能耗
-        this.getWeahter();//获取天气
+    created() {
+        //对于两个组件的 接口写在了这里
+        setInterval(() => {
+            this.getAirCondition(); //空调数据
+        }, 60000);
+        this.getAirCondition(); //空调数据
+        this.getLastAllEnergy(); //上月所有能耗数据  上月总能耗 上月节约能耗
+        this.getWeahter(); //获取天气
+    },
+     destroyed() {
+        console.log("app---destroyed");
     },
     components: {},
     methods: {
-        ...mapActions(["getAirCondition","getLastAllEnergy","getWeahter"]),
+        ...mapActions(["getAirCondition", "getLastAllEnergy", "getWeahter"]),
     },
 };
 </script>
 
 <style lang="less">
-html{
+html {
     height: 100%;
 }
-body{
+body {
     overflow-x: hidden;
-    margin:0;
-    padding:0;
+    margin: 0;
+    padding: 0;
     height: 100%;
 }
 #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-     height: 100%;
+    height: 100%;
     // background: #f3fdff;
     //   text-align: center;
     //   color: #2c3e50;
     //   margin-top: 60px;
-  
 }
 @import "/src/assets/css/common.less";
 </style>

src/views/horizontalScreen.vue

@@ -18,7 +18,7 @@
                             <HorAirSwitch />
                         </div>
                         <div class="bottom-right" ref="bottomright">
-                            <TemChart screenType="hor" />
+                            <TemChart screenType="hor" :showPing="nowPage" />
                         </div>
                     </div>
                 </div>
@@ -60,7 +60,7 @@
                     </div>
                 </div>
                 <div class="chart-box ">
-                    <lastEnergyChart screenType="hor" />
+                    <lastEnergyChart screenType="hor" :showPing="nowPage" />
                 </div>
             </div>
         </div>
@@ -92,16 +92,18 @@ export default {
         return {
             bgImg: hor_big_bg,
             lastMonthTotal: require("@/assets/horImg/hor_lastMonthTotal.png"),
-            nowPage: 2,
+            nowPage: null,
             horiInterval: null,
         };
     },
     mounted() {
-         //this.timePageShow();
+        this.nowPage = 1;
+        this.timePageShow();
     },
     methods: {
         doneTowPage() {
             //第二屏刷新结束 通知
+            //debugger;
             this.nowPage = 3;
             this.timePageShow();
         },
@@ -112,7 +114,7 @@ export default {
                     this.nowPage = 1;
                 }
                 if (this.nowPage == 2) {
-                    //clearTimeout(timeoutsign);
+                    clearTimeout(timeoutsign);
                     return;
                 }
                 this.timePageShow();
@@ -120,7 +122,7 @@ export default {
         },
     },
     destroyed() {
-        clearInterval(this.horiInterval);
+        //clearInterval(this.horiInterval);
     },
     computed: {
         ...mapState({
@@ -158,6 +160,7 @@ export default {
         // padding-top: 32px;
         // display: flex;
         // justify-content: center;
+        margin-bottom: 30px;
     }
     .hor-nowData-content {
         // padding: 30px 36px;

src/views/valueDelivery/FloorSpace.vue

@@ -17,7 +17,7 @@
             </div>
             <div class="textCont">
                 平均<span>{{ selIndicator.name }}</span
-                ><span class="value">234</span
+                ><span class="value">{{ totalAvgValues }}</span
                 ><span>
                     {{ selIndicator.unit }}
                 </span>
@@ -77,6 +77,7 @@ export default {
                     img: require("../../assets/verwendu.png"),
                     unit: "℃",
                     code: "Tdb",
+                    fixed: 1,
                 },
                 {
                     id: "humidity",
@@ -84,6 +85,7 @@ export default {
                     name: "湿度",
                     img: require("../../assets/vershidu.png"),
                     unit: "%",
+                    fixed: 0,
                 },
                 {
                     id: "co2",
@@ -91,6 +93,7 @@ export default {
                     name: "CO₂",
                     img: require("../../assets/verco2.png"),
                     unit: "ppm",
+                    fixed: 0,
                 },
                 {
                     id: "methanal",
@@ -98,6 +101,7 @@ export default {
                     name: "甲醛",
                     img: require("../../assets/verjiaquan.png"),
                     unit: "mg/m³",
+                    fixed: 2,
                 },
                 {
                     id: "pm25",
@@ -105,6 +109,7 @@ export default {
                     name: "PM2.5",
                     img: require("../../assets/verpm25.png"),
                     unit: "ug/m³",
+                    fixed: 0,
                 },
             ],
 
@@ -114,6 +119,7 @@ export default {
             nowPage: 1, //当前哪一屏幕
             pageNum: 0, //总页数 楼层一共几页
             showFloors: [],
+            totalAvgValues: null,
         };
     },
     props: {
@@ -239,7 +245,7 @@ export default {
             // RH 湿度
             // HCHO甲醛
             // PM2d5 pm2.5
-            
+
             var endTime = moment();
             var startTime = moment().subtract(30, "minutes");
             var startStr = startTime.format("YYYYMMDDHHmmss");
@@ -256,7 +262,13 @@ export default {
                 .then((res) => {
                     //loading.close();
 
-                    var showFloors = res.data.content || [];
+                    var showFloors = res.data.data.floors || [];
+                    this.totalAvgValues = res.data.data.avgValues || null;
+                    this.totalAvgValues &&
+                        (this.totalAvgValues = this.totalAvgValues.toFixed(
+                            this.selIndicator.fixed
+                        ));
+
                     showFloors.forEach((ele) => {
                         var filterFloorarr = this.allFloor.filter((item) => {
                             return item.id == ele.id;

src/views/valueDelivery/HorFloorSpace.vue

@@ -12,7 +12,7 @@
                     <div
                         class="textCont"
                         v-show="item.id==selIndicator.id"
-                    >22{{selIndicator.unit}}<br /><span class="name">平均{{selIndicator.name}}</span></div>
+                    >{{totalAvgValues}}{{selIndicator.unit}}<br /><span class="name">平均{{selIndicator.name}}</span></div>
                     <img
                         v-show="item.id==selIndicator.id"
                         class="img"
@@ -65,32 +65,37 @@ export default {
                 code:'Tdb',
                 name: '温度',
                 img: require('../../assets/horImg/wendu.png'),
-                unit: '℃'
+                unit: '℃',
+                fixed:1
             }, {
                 id: 'humidity',
                 code:'RH',
                 name: '湿度',
                 img: require('../../assets/horImg/shidu.png'),
-                unit: '%'
+                unit: '%',
+                fixed:0
             }, {
                 id: 'co2',
                 code:'CO2',
                 name: 'CO₂',
                 img: require('../../assets/horImg/co2.png'),
-                unit: 'ppm'
+                unit: 'ppm',
+                fixed:0
             }, {
                 id: 'methanal',
                 code:'HCHO',
                 name: '甲醛',
                 img: require('../../assets/horImg/jiaquan.png'),
-                unit: 'mg/m³'
+                unit: 'mg/m³',
+                fixed:2
 
             }, {
                 id: 'pm25',
                 code:'PM2d5',
                 name: 'PM2.5',
                 img: require('../../assets/horImg/pm25.png'),
-                unit: 'ug/m³'
+                unit: 'ug/m³',
+                fixed:0
             }],
 
             allFloor: [],
@@ -99,6 +104,7 @@ export default {
             nowPage: 1, //当前哪一屏幕
             pageNum:0,
             showFloors: [],
+            totalAvgValues:null
         }
     },
     props: {
@@ -111,7 +117,7 @@ export default {
     },
     watch:{
         showPing(newv,oldv){
-           debugger;
+          // debugger;
             if(newv==2){
                    this.nowPage = 1;
                    this.queryFs();
@@ -119,7 +125,7 @@ export default {
         }
     },
     mounted() {
-        
+   
     },
     destroyed(){
         console.log("horfloorspace---destroyed");
@@ -240,7 +246,9 @@ export default {
                 .then((res) => {
                    // loading.close();
                     //console.log("queryParam", res);
-                    var showFloors = res.data.content || [];
+                    var showFloors = res.data.data.floors || [];
+                    this.totalAvgValues = res.data.data.avgValues || null;
+                    this.totalAvgValues&&(this.totalAvgValues=this.totalAvgValues.toFixed(this.selIndicator.fixed));
                     showFloors.forEach((ele) => {
                         var filterFloorarr = this.allFloor.filter((item) => {
                             return item.id == ele.id;

src/views/valueDelivery/LastMonthData.vue

@@ -93,18 +93,18 @@ export default {
         this.getLastMonthData();
     },
     watch: {
-        lastDataArr(newv,oldv) {
+        lastDataArr(newv, oldv) {
             //debugger;
-       
         },
     },
-    destroyed(){
-        console.log("lastMonthData---destroyed");
+    destroyed() {
+       // console.log("lastMonthData---destroyed");
     },
     computed: {
         ...mapState({
-            lastDataArr(state) {//state改变时调用  通过state.lastMonthData的值 生成新的值
-                var statecopu=JSON.parse(JSON.stringify(state))  ;
+            lastDataArr(state) {
+                //state改变时调用  通过state.lastMonthData的值 生成新的值
+                var statecopu = JSON.parse(JSON.stringify(state));
                 //console.log('lastDataArr',statecopu);
                 var lastMonthData = state.lastMonthData;
                 var lastMonthInit = [
@@ -116,18 +116,19 @@ export default {
                         maxName: "最高温",
                         minName: "最低温",
                         img: icon_temp,
+                        fixed: 1,
                     },
                     {
                         id: "humidity",
                         name: "湿度",
                         code: "RH",
-                        value: 100,
                         unit: "%",
                         maxName: "最大值",
                         max: 50,
                         minName: "最小值",
                         min: 20,
                         img: icon_humidity,
+                        fixed: 0,
                     },
                     {
                         id: "co2",
@@ -140,6 +141,7 @@ export default {
                         minName: "最小值",
                         min: 300,
                         img: icon_CO2,
+                        fixed: 0,
                     },
                     {
                         id: "methanal",
@@ -152,6 +154,7 @@ export default {
                         minName: "最小值",
                         min: 0.07,
                         img: icon_formaldehyde,
+                        fixed: 2,
                     },
                     {
                         id: "pm25",
@@ -166,6 +169,7 @@ export default {
                         minName: "最小值",
                         min: 20,
                         img: icon_PM2d5,
+                        fixed: 0,
                     },
                 ];
                 lastMonthInit.forEach((item) => {
@@ -174,10 +178,14 @@ export default {
                     });
                     var filterObj = filterRes[0] || {};
                     item.value = filterObj.avgData
-                        ? Number(filterObj.avgData.toFixed(1))
+                        ? Number(filterObj.avgData.toFixed(item.fixed))
                         : filterObj.avgData;
-                    item.max = filterObj.maxData;
-                    item.min = filterObj.minData;
+                    item.max = filterObj.maxData
+                        ? Number(filterObj.maxData.toFixed(item.fixed))
+                        : filterObj.maxData;
+                    item.min = filterObj.minData
+                        ? Number(filterObj.minData.toFixed(item.fixed))
+                        : filterObj.minData;
                 });
                 return lastMonthInit;
             },

src/views/valueDelivery/NowData.vue

@@ -62,7 +62,10 @@ export default {
         },
     },
     data() {
-        return {};
+        return {
+            intervalInt: null,
+         
+        };
     },
     watch: {
         // "$store.state.realTimeData"(newv, oldv) {
@@ -72,18 +75,19 @@ export default {
         //     });
         // },
         realDataArr(newv, oldv) {
-           // debugger;
+            // debugger;
         },
     },
     mounted() {
-        // setTimeout(() => {
         this.getRealTimeData(); //实时数据
-        // }, 20000);
+        this.intervalInt = setInterval(() => {
+            this.getRealTimeData(); //实时数据
+        }, 60000);
     },
     computed: {
         ...mapState({
             realDataArr(state) {
-                //debugger;
+                //获取数据realTimeData后的处理
                 var realTimeData = state.realTimeData;
                 var realInit = [
                     {
@@ -94,6 +98,7 @@ export default {
                         //value: 24.5,
                         unit: "℃",
                         level: "low",
+                        fixed: 1,
                     },
                     {
                         id: "humidity",
@@ -103,6 +108,7 @@ export default {
                         // value: 33,
                         unit: "%",
                         level: "middle",
+                        fixed: 0,
                     },
                     {
                         id: "co2",
@@ -112,6 +118,7 @@ export default {
                         // value: 2399,
                         unit: "ppm",
                         level: "low",
+                        fixed: 0,
                     },
                     {
                         id: "methanal",
@@ -121,6 +128,7 @@ export default {
                         // value: 0.12,
                         unit: "mg/m³",
                         level: "low",
+                        fixed: 2,
                     },
                     {
                         id: "pm25",
@@ -130,6 +138,7 @@ export default {
                         // value: 100,
                         unit: "ug/m³",
                         level: "low",
+                        fixed: 0,
                     },
                 ];
                 realInit.forEach((item) => {
@@ -137,13 +146,19 @@ export default {
                         return ele.code == item.code;
                     });
                     var value = (filterRes[0] || {}).data;
-                    item.value = value ? Number(value.toFixed(1)) : value;
+                    item.value = value
+                        ? Number(value.toFixed(item.fixed))
+                        : value;
                 });
 
                 return realInit;
             },
         }),
     },
+    destroyed() {
+        console.log('nowdata-destory');
+        clearInterval(this.intervalInt);
+    },
     methods: {
         ...mapActions(["getRealTimeData"]),
         selectColor: selectColor,

src/views/valueDelivery/TemChart.vue

@@ -30,25 +30,39 @@ export default {
                 return "ver";
             }, //hor 横屏  vert 竖屏
         },
+        showPing: {
+            type: Number,
+            default: () => {
+                return 0;
+            },
+        },
     },
     created() {},
     mounted() {
         //console.log("temchart--mounted");
-        this.getRealTimeTemp().then((res) => {
-            //debugger;
-            var cdata = res.data.data || [];
-            cdata.forEach((element) => {
-                var timestr = element.time;
-                var hour = timestr.substr(8, 2);
-                var minute = timestr.substr(10, 2);
-                element.time = hour + ":" + minute;
-            });
-            this.cInitChart(cdata);
-            //this.getWeahter();
-        });
     },
     data() {
-        return {};
+        return {
+            tempChart: null,
+        };
+    },
+    watch: {
+        showPing(newv, oldv) {
+            //debugger;
+            if (newv == 1) {
+                this.getRealTimeTemp().then((res) => {
+                    var cdata = res.data.data || [];
+                    cdata.forEach((element) => {
+                        var timestr = element.time;
+                        var hour = timestr.substr(8, 2);
+                        var minute = timestr.substr(10, 2);
+                        element.time = hour + ":" + minute;
+                    });
+
+                    this.tempChart = this.cInitChart(cdata);
+                });
+            }
+        },
     },
     computed: {
         ...mapState({
@@ -79,13 +93,19 @@ export default {
                 this.screenType === "hor"
                     ? document.getElementsByTagName("body")[0].offsetWidth - 874
                     : document.getElementsByTagName("body")[0].offsetWidth - 80;
-            var chart = new G2.Chart({
-                container: "tempChartBox",
-               // forceFit: true,
-                width: width,
-                height: 330,
-                padding: [50, 50, 46, 60],
-            });
+            if (this.tempChart) {
+                this.tempChart.clear();
+                var chart = this.tempChart;
+            } else {
+                var chart = new G2.Chart({
+                    container: "tempChartBox",
+                    // forceFit: true,
+                    width: width,
+                    height: 330,
+                    padding: [50, 50, 46, 60],
+                });
+            }
+
             chart.source(cdata);
 
             chart.scale("time", {
@@ -160,9 +180,8 @@ export default {
                     stroke: "#ffffff",
                     shadowColor: "#23CCF9",
                     shadowBlur: (val) => {
-                        var nowtime = moment();
-                        var timestr = nowtime.format("HH") + ":00";
-                        if (val && val == timestr) {
+                        //debugger;
+                        if (val && val == cdata[cdata.length - 1].time) {
                             return 3;
                         } else {
                             return 0;
@@ -179,11 +198,13 @@ export default {
                 .tooltip(false)
                 .shape("smooth");
             var lastpoint = cdata[cdata.length - 1];
+            var nowtime = moment();
+            var timestr = nowtime.format("YYYY.MM.DD");
             const tooltipHtml = `<div style='line-height:22px;color:#fff;background: rgba(35,204,249,0.7);padding:10px 12px;border-radius:5px;'>
-                <div style='font-size:13px;font-weight:400;'>${
-                    lastpoint.time
-                }</div>
-                <div style='font-size:12px;font-weight:600;'>室内温度：${lastpoint.temp.toFixed(
+                <div style='font-size:13px;font-weight:600;'><span style='margin-right:5px'>${timestr}</span>${
+                lastpoint.time
+            }</div>
+                <div style='font-size:15px;font-weight:600;'>室内温度：${lastpoint.temp.toFixed(
                     1
                 )}℃</div></div>`;
             chart.guide().html({

src/views/valueDelivery/lastEnergyChart.vue

@@ -69,6 +69,7 @@ export default {
     },
     watch: {
         showPing(newv, oldv) {
+            // debugger;
             if (newv == 3) {
                 if (!this.lastChart) {
                     this.queryLastDayEnergy();

src/views/valueDelivery/lastSaveEnergy.vue

@@ -14,17 +14,19 @@
                     >度
                 </div>
                 <div class="equalTo">相当于</div>
-                <div class="saveCo2">
-                    减排<span>{{ lastAllEnergy.cdmCo2 }}</span
-                    >kg二氧化碳
-                </div>
-                <div class="saveCarbon">
-                    减排<span>{{ lastAllEnergy.cdmC }}</span
-                    >kg碳
-                </div>
-                <div class="plantTree">
-                    为国家种<span>{{ lastAllEnergy.cdmTree }}</span
-                    >棵树
+                <div class="rightCont">
+                    <div class="saveCo2">
+                        减排<span>{{ lastAllEnergy.cdmCo2 }}</span
+                        >kg二氧化碳
+                    </div>
+                    <div class="saveCarbon">
+                        减排<span>{{ lastAllEnergy.cdmC }}</span
+                        >kg碳
+                    </div>
+                    <div class="plantTree">
+                        为国家种<span>{{ lastAllEnergy.cdmTree }}</span
+                        >棵树
+                    </div>
                 </div>
             </div>
         </div>
@@ -63,7 +65,7 @@ export default {
         height: 100%;
     }
     .bottomCont {
-        width: 900px;
+        max-width: 900px;
         margin: 40px auto;
         position: relative;
         img {
@@ -73,45 +75,78 @@ export default {
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
+            right: 0;
+            bottom: 0;
             box-sizing: border-box;
             // display: flex;
-            // align-items: center;
-            // justify-content: center;
-            // flex-direction: column;
+            // // align-items: center;
+            // // justify-content: center;
+            // flex-direction: row;
             .leftsave {
-                position: absolute;
-                left: 12px;
-                top: 160px;
+                // position: absolute;
+                // left: 12px;
+                // top: 160px;
                 color: #fff;
-                width: 210px;
-                line-height: 34px;
-                text-align: center;
+                width: 25%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                float: left;
+                // width: 210px;
+                // line-height: 34px;
+                // text-align: center;
                 span {
                     font-size: 32px;
                 }
             }
             .equalTo {
-                position: absolute;
-                left: 249px;
-                top: 186px;
+                // position: absolute;
+                // left: 249px;
+                // top: 186px;
+                float: left;
                 font-size: 20px;
+                width: 10%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
-            .saveCo2 {
-                position: absolute;
-                left: 562px;
-                top: 32px;
-            }
-            .saveCarbon {
-                position: absolute;
-                left: 562px;
-                top: 186px;
-            }
-            .plantTree {
-                position: absolute;
-                left: 562px;
-                top: 340px;
+            .rightCont {
+                position: relative;
+                width: 38%;
+                height: 100%;
+                float: right;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                .saveCo2 {
+                    // position: absolute;
+                    // left: 562px;
+                    // top: 32px;
+                    height: 22%;
+                    display: flex;
+                    align-items: center;
+                    // justify-content: center;
+                }
+                .saveCarbon {
+                    // position: absolute;
+                    // left: 562px;
+                    // top: 186px;
+                    height: 30%;
+                    display: flex;
+                    align-items: center;
+                    //justify-content: center;
+                }
+                .plantTree {
+                    // position: absolute;
+                    // left: 562px;
+                    // top: 340px;
+                    height: 25%;
+                    display: flex;
+                    align-items: center;
+                    //  justify-content: center;
+                }
             }
         }
     }

src/views/valueDelivery/pageHead.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="horHead-right">
             <div class="right-item">
-                <span class="item-time"> 2021.07.26 11:00</span>
+                <span class="item-time">{{ nowstr }}</span>
             </div>
             <div class="right-item">
                 {{ weatherText }}
@@ -36,6 +36,7 @@ const title = require("@/assets/horImg/hor_title.png");
 const changeVer = require("@/assets/horImg/changeVer.png");
 const changeHor = require("@/assets/horImg/changeHor.png");
 import { mapState } from "vuex";
+import moment from "moment";
 export default Vue.extend({
     data() {
         return {
@@ -44,6 +45,7 @@ export default Vue.extend({
             changeVer: changeVer,
             changeHor: changeHor,
             nowScreen: "vertical",
+            nowstr: "",
             // weatherText:''
         };
     },
@@ -51,18 +53,21 @@ export default Vue.extend({
         // console.log("route", this.$route);
         // console.log("router", this.$router);
         var path = this.$route.path;
-        if (path.indexOf("horizontalScreen")>-1) {
+        if (path.indexOf("horizontalScreen") > -1) {
             this.nowScreen = "horizontal";
-        } else if (path.indexOf("verticalScreen")>-1) {
+        } else if (path.indexOf("verticalScreen") > -1) {
             this.nowScreen = "vertical";
         }
-        
+        this.nowstr = moment().format("YYYY.MM.DD HH:mm");
+        setInterval(() => {
+            this.nowstr = moment().format("YYYY.MM.DD HH:mm");
+        }, 60000);
     },
     computed: {
         ...mapState({
             weatherText(state: any) {
                 //debugger;
-                var text = state.weatherCont.text||'晴';
+                var text = state.weatherCont.text || "晴";
                 return text;
             },
         }),

src/views/verticalScreen.vue

@@ -6,7 +6,7 @@
         <div v-show="nowPage == 1">
             <NowData screenType="ver" />
             <AirSwitchVer />
-            <TemChart screenType="ver" />
+            <TemChart screenType="ver" :showPing="nowPage"/>
             <LastMonthData screenType="ver" />
         </div>
         <div v-show="nowPage == 2">
@@ -64,12 +64,13 @@ export default {
     },
     data() {
         return {
-            nowPage: 1,
+            nowPage: null,
             verticalInterval: null,
         };
     },
     mounted() {
-       // this.timePageShow();
+        this.nowPage = 1;
+        this.timePageShow();
     },
     destroyed() {
         clearInterval(this.verticalInterval);
@@ -93,7 +94,7 @@ export default {
         doneThreePage() {
             //第三屏刷新结束 通知
             this.nowPage = 1;
-            this.timePageShow();//1屏变2屏
+            this.timePageShow(); //1屏变2屏
         },
         doneTowPage() {
             //第二屏刷新结束 通知