zhaojijng 3 年 前
コミット
37c2177ab9

+ 14 - 2
src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapMutations } from "vuex";
 
 export default {
     data() {
@@ -19,12 +19,24 @@ export default {
         this.getAirCondition(); //空调数据
         this.getLastAllEnergy(); //上月所有能耗数据  上月总能耗 上月节约能耗
         this.getWeahter(); //获取天气
+        window.onresize = () => {
+            console.log("resize");
+            this.setBodyWidth(
+                document.getElementsByTagName("body")[0].offsetWidth
+            );
+            this.setBodyHeight(
+                document.getElementsByTagName("body")[0].offsetHeight
+            );
+
+      
+        };
     },
-     destroyed() {
+    destroyed() {
         console.log("app---destroyed");
     },
     components: {},
     methods: {
+        ...mapMutations(["setBodyWidth", "setBodyHeight"]),
         ...mapActions(["getAirCondition", "getLastAllEnergy", "getWeahter"]),
     },
 };

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

@@ -1,3 +1,13 @@
+@font-face {
+    font-family: "PersagyBold";
+    src: url("./font/PersagyBold.ttf");
+  }
+  
+  @font-face {
+    font-family: "Persagy";
+    src: url("./font/PersagyRegular.ttf");
+  }
+
 .verticalClass {
     padding: 24px 32px;
     min-width: 960px;

BIN
src/assets/css/font/PersagyBold.ttf


BIN
src/assets/css/font/PersagyRegular.ttf


+ 14 - 0
src/store/index.ts

@@ -12,8 +12,22 @@ export default new Vuex.Store({
         lastMonthData: [], //上月数据
         lastAllEnergy: {}, //上月所有能耗数据
         weatherCont: {}, //天气
+        bodyWidth:null,
+        bodyHeight:null,
+    },
+    getters:{
+        getBodyWidthHeight(state){
+            return [state.bodyWidth,state.bodyHeight]
+        }
     },
     mutations: {
+        setBodyWidth(state,width){
+           // debugger;
+            state.bodyWidth=width;
+        },
+        setBodyHeight(state,height){
+            state.bodyHeight=height;
+        },
         getRealTimeData(state, data) {
             //debugger;
             state.realTimeData = data;

+ 3 - 2
src/views/horizontalScreen.vue

@@ -97,8 +97,8 @@ export default {
         };
     },
     mounted() {
-        this.nowPage = 1;
-        this.timePageShow();
+        this.nowPage =2;
+        //this.timePageShow();
     },
     methods: {
         doneTowPage() {
@@ -227,6 +227,7 @@ export default {
                         font-size: 48px;
                         font-weight: 700;
                         line-height: 58px;
+                        font-size:Persagy;
                     }
                 }
             }

+ 2 - 1
src/views/valueDelivery/FloorSpace.vue

@@ -155,9 +155,10 @@ export default {
             var _this = this;
             this.queryParam(floorparam).then(() => {
                 var timeoutsign = setTimeout(() => {
-                    _this.nowIndicatorIndex = _this.nowIndicatorIndex + 1;
+                    _this.nowIndicatorIndex = _this.nowIndicatorIndex + 1;//湿度等指标的轮询变化
                     if (_this.nowIndicatorIndex == 5) {
                         if (_this.pageNum == _this.nowPage) {
+                            //如果指标轮询结束
                             _this.nowIndicatorIndex = 0;
                             _this.$emit("donetowpage");
                             clearTimeout(timeoutsign);

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

@@ -117,7 +117,7 @@ export default {
     },
     watch:{
         showPing(newv,oldv){
-          // debugger;
+            //当前展示为第二屏时
             if(newv==2){
                    this.nowPage = 1;
                    this.queryFs();
@@ -144,7 +144,7 @@ export default {
             var _this = this;
             this.queryParam(floorparam).then(() => {
                 var timeoutsign = setTimeout(() => {
-                    _this.nowIndicatorIndex = _this.nowIndicatorIndex + 1;//
+                    _this.nowIndicatorIndex = _this.nowIndicatorIndex + 1;//湿度等指标的轮询变化
                     if (_this.nowIndicatorIndex == 5) {
                         //debugger;
                          if (_this.pageNum == _this.nowPage) {
@@ -160,7 +160,7 @@ export default {
                        
                     }
                     this.getTimeFloorParam();
-                }, 2000);
+                }, 200000);
             });
         },
         queryFs() {

+ 19 - 5
src/views/valueDelivery/TemChart.vue

@@ -19,8 +19,9 @@
 </template>
 <script>
 import G2 from "@antv/g2";
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import moment from "moment";
+
 export default {
     name: "TemChart",
     props: {
@@ -40,19 +41,18 @@ export default {
     created() {},
     mounted() {
         //console.log("temchart--mounted");
-        window.onresize = () => {
-            console.log("resize");
-        };
     },
     data() {
         return {
             tempChart: null,
+            timesign: null,
         };
     },
     watch: {
         showPing(newv, oldv) {
             //debugger;
             if (newv == 1) {
+                //如果当前切成第一屏幕 渲染chart图
                 this.getRealTimeTemp().then((res) => {
                     var cdata = res.data.data || [];
                     cdata.forEach((element) => {
@@ -61,11 +61,24 @@ export default {
                         var minute = timestr.substr(10, 2);
                         element.time = hour + ":" + minute;
                     });
-
                     this.tempChart = this.cInitChart(cdata);
                 });
             }
         },
+        getBodyWidthHeight(newv, oldv) {
+            clearTimeout(this.timesign);
+            this.timesign = setTimeout(() => {
+                var width =
+                    this.screenType === "hor"
+                        ? document.getElementsByTagName("body")[0].offsetWidth -
+                          874
+                        : document.getElementsByTagName("body")[0].offsetWidth -
+                          80;
+                this.showPing == 1 &&
+                    this.tempChart &&
+                    this.tempChart.changeSize(width, 330);
+            }, 300);
+        },
     },
     computed: {
         ...mapState({
@@ -74,6 +87,7 @@ export default {
                 return weatherCont.temperature;
             },
         }),
+        ...mapGetters(["getBodyWidthHeight"]),
     },
     methods: {
         ...mapActions(["getRealTimeTemp"]),

+ 24 - 4
src/views/valueDelivery/lastEnergyChart.vue

@@ -18,6 +18,7 @@
 import G2 from "@antv/g2";
 import DataSet from "@antv/data-set";
 import moment from "moment";
+import { mapGetters } from "vuex";
 
 // 自定义 shape, 支持图片形式的气泡
 G2.Shape.registerShape("interval", "borderRadius", {
@@ -60,16 +61,23 @@ export default {
         },
     },
     created() {},
-    mounted() {},
+    mounted() {
+        // window.onresize = () => {
+        // };
+    },
+    computed: {
+        ...mapGetters(["getBodyWidthHeight"]),
+    },
     data() {
         return {
             ds: null,
             lastChart: null,
+            time: null,
         };
     },
     watch: {
         showPing(newv, oldv) {
-            // debugger;
+            // debugger; 当前是第三屏时渲染
             if (newv == 3) {
                 if (!this.lastChart) {
                     this.queryLastDayEnergy();
@@ -78,6 +86,18 @@ export default {
                 }
             }
         },
+        getBodyWidthHeight(newv, oldv) {
+            clearTimeout(this.time);
+            this.time = setTimeout(() => {
+               // console.log("resize-over");
+                var width =
+                    document.getElementsByTagName("body")[0].offsetWidth - 80;
+                var height = this.screenType === "hor" ? 274 : 330;
+                this.showPing == 3 &&
+                    this.lastChart &&
+                    this.lastChart.changeSize(width, height);
+            }, 300);
+        },
     },
     methods: {
         queryLastDayEnergy() {
@@ -224,8 +244,8 @@ export default {
             });
             chart.axis("value", {
                 line: null,
-                tickline:null,
-                label:null
+                tickline: null,
+                label: null,
             });
 
             chart.legend(false);

+ 6 - 3
src/views/valueDelivery/lastSaveEnergy.vue

@@ -19,15 +19,15 @@
                 <div class="equalTo">相当于</div>
                 <div class="rightCont">
                     <div class="saveCo2">
-                        减排<span>{{ lastAllEnergy.cdmCo2 }}</span
+                        减排<span class="value">{{ lastAllEnergy.cdmCo2 }}</span
                         >kg二氧化碳
                     </div>
                     <div class="saveCarbon">
-                        减排<span>{{ lastAllEnergy.cdmC }}</span
+                        减排<span class="value">{{ lastAllEnergy.cdmC }}</span
                         >kg碳
                     </div>
                     <div class="plantTree">
-                        为国家种<span>{{ lastAllEnergy.cdmTree }}</span
+                        为国家种<span class="value">{{ lastAllEnergy.cdmTree }}</span
                         >棵树
                     </div>
                 </div>
@@ -85,6 +85,9 @@ export default {
             // // align-items: center;
             // // justify-content: center;
             // flex-direction: row;
+            .value{
+                font-family: Persagy;
+            }
             .leftsave {
                 // position: absolute;
                 // left: 12px;

+ 0 - 2
src/views/verticalScreen.vue

@@ -82,7 +82,6 @@ export default {
                 var lastAllEnergy = JSON.parse(
                     JSON.stringify(state.lastAllEnergy)
                 );
-
                 lastAllEnergy.energyCompare = Number(
                     (lastAllEnergy.energyCompare * 100).toFixed(0)
                 );
@@ -112,7 +111,6 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-@import "/src/assets/css/common.less";
 .verticalWrap {
     background: #f3fdff;
     padding: 50px 40px 100px;