Browse Source

fix 竖屏自适应

zhaojijng 2 years ago
parent
commit
98876287d2
39 changed files with 276 additions and 183 deletions
  1. BIN
      dist/sgdaping/assets/background.1f64aaff.png
  2. BIN
      dist/sgdaping/assets/background.4e64a7f0.png
  3. 1 0
      dist/sgdaping/assets/background.525eea8a.css
  4. 0 1
      dist/sgdaping/assets/background.c300eab1.css
  5. 4 4
      dist/sgdaping/assets/background.f512bb42.js
  6. BIN
      dist/sgdaping/assets/background_up.45ba7fa6.png
  7. BIN
      dist/sgdaping/assets/background_up.d1893853.png
  8. BIN
      dist/sgdaping/assets/background_up_ver.6674b9b3.png
  9. BIN
      dist/sgdaping/assets/background_up_ver.7ce5bb74.png
  10. 7 0
      dist/sgdaping/assets/changeVer.0a6966ec.svg
  11. 0 7
      dist/sgdaping/assets/changeVer.84012da4.svg
  12. 1 1
      dist/sgdaping/assets/index.e0b207f6.js
  13. 1 0
      dist/sgdaping/assets/index.246860ff.css
  14. 0 1
      dist/sgdaping/assets/index.49e918a1.css
  15. 1 1
      dist/sgdaping/assets/index.3f2f9e55.js
  16. 1 0
      dist/sgdaping/assets/index.53d40b36.css
  17. 1 1
      dist/sgdaping/assets/index.96bd9347.js
  18. 1 0
      dist/sgdaping/assets/index.78e4a8f3.css
  19. 1 1
      dist/sgdaping/assets/index.5e456311.js
  20. 0 1
      dist/sgdaping/assets/index.98c6b23d.css
  21. 0 1
      dist/sgdaping/assets/index.eb6f0da0.css
  22. 2 2
      dist/sgdaping/index.html
  23. BIN
      src/assets/image/horImg/background.png
  24. BIN
      src/assets/image/horImg/background_up.png
  25. BIN
      src/assets/image/horImg/background_up_ver.png
  26. 6 6
      src/assets/image/horImg/changeVer.svg
  27. 29 23
      src/components/HorFloorSpace.vue
  28. 14 10
      src/components/LastAllEnergy.vue
  29. 23 11
      src/components/LastMonthData.vue
  30. 50 39
      src/components/LastSaveEnergy.vue
  31. 2 1
      src/components/NowData.vue
  32. 37 19
      src/components/TemChart.vue
  33. 11 8
      src/components/airSwitchVer.vue
  34. 19 10
      src/components/lastEnergyChart.vue
  35. 3 2
      src/components/pageHead.vue
  36. 6 3
      src/style.scss
  37. 23 11
      src/views/horiScreen/index.vue
  38. 31 18
      src/views/verScreen/index.vue
  39. 1 1
      vite.config.ts

BIN
dist/sgdaping/assets/background.1f64aaff.png


BIN
dist/sgdaping/assets/background.4e64a7f0.png


File diff suppressed because it is too large
+ 1 - 0
dist/sgdaping/assets/background.525eea8a.css


File diff suppressed because it is too large
+ 0 - 1
dist/sgdaping/assets/background.c300eab1.css


File diff suppressed because it is too large
+ 4 - 4
dist/sgdaping/assets/background.f512bb42.js


BIN
dist/sgdaping/assets/background_up.45ba7fa6.png


BIN
dist/sgdaping/assets/background_up.d1893853.png


BIN
dist/sgdaping/assets/background_up_ver.6674b9b3.png


BIN
dist/sgdaping/assets/background_up_ver.7ce5bb74.png


+ 7 - 0
dist/sgdaping/assets/changeVer.0a6966ec.svg

@@ -0,0 +1,7 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.12495" y="4.52502" width="13.125" height="20.125" rx="1.75" stroke="#EFDEC6" stroke-width="1.6"/>
+<rect x="7.49995" y="20.2751" width="4.375" height="1.6" rx="0.8" fill="#EFDEC6"/>
+<path d="M18.875 14.15H24.125C25.0915 14.15 25.875 14.9335 25.875 15.9V22.9C25.875 23.8665 25.0915 24.65 24.125 24.65H18.875" stroke="#EFDEC6" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M25.125 10.775C25.125 8.35878 23.1662 6.40002 20.75 6.40002" stroke="#EFDEC6" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M18.6275 6.37773C18.5543 6.46228 18.5543 6.58777 18.6275 6.67232L20.6361 8.99166C20.7725 9.14913 21.0312 9.05268 21.0312 8.84436L21.0312 4.20569C21.0312 3.99737 20.7725 3.90091 20.6361 4.05839L18.6275 6.37773Z" fill="#EFDEC6"/>
+</svg>

+ 0 - 7
dist/sgdaping/assets/changeVer.84012da4.svg

@@ -1,7 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.625" y="4.375" width="13.125" height="20.125" rx="1.75" stroke="#575271" stroke-width="1.6"/>
-<rect x="7" y="20.125" width="4.375" height="1.6" rx="0.8" fill="#575271"/>
-<path d="M18.375 14H23.625C24.5915 14 25.375 14.7835 25.375 15.75V22.75C25.375 23.7165 24.5915 24.5 23.625 24.5H18.375" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M24.625 10.625C24.625 8.20875 22.6662 6.25 20.25 6.25" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M18.1276 6.2277C18.0543 6.31225 18.0543 6.43775 18.1276 6.5223L20.1362 8.84163C20.2725 8.99911 20.5312 8.90266 20.5312 8.69434L20.5312 4.05566C20.5312 3.84734 20.2725 3.75089 20.1362 3.90837L18.1276 6.2277Z" fill="#575271"/>
-</svg>

File diff suppressed because it is too large
+ 1 - 1
dist/sgdaping/assets/index.e0b207f6.js


File diff suppressed because it is too large
+ 1 - 0
dist/sgdaping/assets/index.246860ff.css


File diff suppressed because it is too large
+ 0 - 1
dist/sgdaping/assets/index.49e918a1.css


+ 1 - 1
dist/sgdaping/assets/index.3f2f9e55.js

@@ -1 +1 @@
-import{h as e,r as n,o,k as t,_ as s,c as r,f as a}from"./index.5e456311.js";const c=e({setup(){return t(),n({}),o(()=>{}),{}}});function u(p,_,f,i,d,l){return a(),r("h2",null,"login\u9875\u9762")}const x=s(c,[["render",u]]);export{x as default};
+import{h as e,r as n,o,k as t,_ as s,c as r,f as a}from"./index.920478a6.js";const c=e({setup(){return t(),n({}),o(()=>{}),{}}});function u(p,_,f,i,d,l){return a(),r("h2",null,"login\u9875\u9762")}const x=s(c,[["render",u]]);export{x as default};

File diff suppressed because it is too large
+ 1 - 0
dist/sgdaping/assets/index.53d40b36.css


File diff suppressed because it is too large
+ 1 - 1
dist/sgdaping/assets/index.96bd9347.js


File diff suppressed because it is too large
+ 1 - 0
dist/sgdaping/assets/index.78e4a8f3.css


File diff suppressed because it is too large
+ 1 - 1
dist/sgdaping/assets/index.5e456311.js


File diff suppressed because it is too large
+ 0 - 1
dist/sgdaping/assets/index.98c6b23d.css


File diff suppressed because it is too large
+ 0 - 1
dist/sgdaping/assets/index.eb6f0da0.css


+ 2 - 2
dist/sgdaping/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/sgdaping/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>daping</title>
-    <script type="module" crossorigin src="/sgdaping/assets/index.5e456311.js"></script>
-    <link rel="stylesheet" href="/sgdaping/assets/index.49e918a1.css">
+    <script type="module" crossorigin src="/sgdaping/assets/index.920478a6.js"></script>
+    <link rel="stylesheet" href="/sgdaping/assets/index.53d40b36.css">
   </head>
   <body>
     <div id="app"></div>

BIN
src/assets/image/horImg/background.png


BIN
src/assets/image/horImg/background_up.png


BIN
src/assets/image/horImg/background_up_ver.png


+ 6 - 6
src/assets/image/horImg/changeVer.svg

@@ -1,7 +1,7 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.625" y="4.375" width="13.125" height="20.125" rx="1.75" stroke="#575271" stroke-width="1.6"/>
-<rect x="7" y="20.125" width="4.375" height="1.6" rx="0.8" fill="#575271"/>
-<path d="M18.375 14H23.625C24.5915 14 25.375 14.7835 25.375 15.75V22.75C25.375 23.7165 24.5915 24.5 23.625 24.5H18.375" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M24.625 10.625C24.625 8.20875 22.6662 6.25 20.25 6.25" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M18.1276 6.2277C18.0543 6.31225 18.0543 6.43775 18.1276 6.5223L20.1362 8.84163C20.2725 8.99911 20.5312 8.90266 20.5312 8.69434L20.5312 4.05566C20.5312 3.84734 20.2725 3.75089 20.1362 3.90837L18.1276 6.2277Z" fill="#575271"/>
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.12495" y="4.52502" width="13.125" height="20.125" rx="1.75" stroke="#EFDEC6" stroke-width="1.6"/>
+<rect x="7.49995" y="20.2751" width="4.375" height="1.6" rx="0.8" fill="#EFDEC6"/>
+<path d="M18.875 14.15H24.125C25.0915 14.15 25.875 14.9335 25.875 15.9V22.9C25.875 23.8665 25.0915 24.65 24.125 24.65H18.875" stroke="#EFDEC6" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M25.125 10.775C25.125 8.35878 23.1662 6.40002 20.75 6.40002" stroke="#EFDEC6" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M18.6275 6.37773C18.5543 6.46228 18.5543 6.58777 18.6275 6.67232L20.6361 8.99166C20.7725 9.14913 21.0312 9.05268 21.0312 8.84436L21.0312 4.20569C21.0312 3.99737 20.7725 3.90091 20.6361 4.05839L18.6275 6.37773Z" fill="#EFDEC6"/>
 </svg>

+ 29 - 23
src/components/HorFloorSpace.vue

@@ -3,10 +3,16 @@
         class="floorSpace"
         :class="[screenType === 'hor' ? 'horiFloorClass ' : 'verFloorClass ']"
     >
-        <div class="buildName" v-show="allBuild.length">
+        <div
+            class="buildName"
+            v-show="allBuild.length"
+        >
             {{ nowBuildName }}
         </div>
-        <div class="leftChange" v-if="screenType == 'hor'">
+        <div
+            class="leftChange"
+            v-if="screenType == 'hor'"
+        >
             <div class="allIndicator">
                 <div
                     class="showItem"
@@ -16,14 +22,13 @@
                 >
                     <div class="title">{{ selIndicator.name }}</div>
                     <div class="textCont">
-                        <span class="value"
-                            >{{ totalAvgValues }}{{ selIndicator.unit }}</span
-                        ><br /><span class="name"
-                            >平均{{ selIndicator.name }}</span
-                        >
+                        <span class="value">{{ totalAvgValues }}{{ selIndicator.unit }}</span><br /><span class="name">平均{{ selIndicator.name }}</span>
                     </div>
                     <div class="other">
-                        <img class="img" :src="selIndicator.img" />
+                        <img
+                            class="img"
+                            :src="selIndicator.img"
+                        />
                     </div>
                 </div>
                 <div
@@ -48,7 +53,10 @@
                 </div>
             </div>
         </div>
-        <div class="topChange" v-if="screenType == 'ver'">
+        <div
+            class="topChange"
+            v-if="screenType == 'ver'"
+        >
             <div class="allIndicator">
                 <div
                     class="eachItem"
@@ -67,14 +75,15 @@
                 <img :src="selIndicator.verimg" />
             </div>
             <div class="textCont">
-                平均<span>{{ selIndicator.name }}</span
-                ><span class="value">{{ totalAvgValues }}</span
-                ><span>
+                平均<span>{{ selIndicator.name }}</span><span class="value">{{ totalAvgValues }}</span><span>
                     {{ selIndicator.unit }}
                 </span>
             </div>
         </div>
-        <div class="floorWrap" id="floorWrap">
+        <div
+            class="floorWrap"
+            id="floorWrap"
+        >
             <div
                 class="floor-item"
                 v-for="(item, index) in showFloors"
@@ -130,7 +139,6 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-
         const {
             floor_co2,
             floor_jiaquan,
@@ -261,7 +269,7 @@ export default defineComponent({
                     .then((res) => {
                         // loading.close();
                         var allFloor = res.data.content || [];
-                        allFloor = allFloor.filter(function (item) {
+                        allFloor = allFloor.filter(function(item) {
                             return item.spaceNum > 0;
                         });
 
@@ -327,7 +335,7 @@ export default defineComponent({
                         //debugger;
                         allData.getTimeFloorParam();
                     })
-                    .catch(function (res) {
+                    .catch(function(res) {
                         // loading.close();
                     });
             },
@@ -387,14 +395,13 @@ export default defineComponent({
                         //loading.close();
 
                         //debugger;
-                        var showFloors = res.data.data.floors || [];
+                        var showFloors = (res.data.data || {}).floors || [];
                         allData.totalAvgValues =
                             res.data.data.avgValues || null;
                         allData.totalAvgValues &&
-                            (allData.totalAvgValues =
-                                allData.totalAvgValues.toFixed(
-                                    allData.selIndicator.fixed
-                                ));
+                            (allData.totalAvgValues = allData.totalAvgValues.toFixed(
+                                allData.selIndicator.fixed
+                            ));
                         var wrapHeight =
                             document.getElementById("floorWrap") &&
                             document.getElementById("floorWrap").offsetHeight;
@@ -702,11 +709,10 @@ export default defineComponent({
     }
 }
 .verFloorClass {
-    height: auto;
     display: block;
     .floorWrap {
         padding-top: 14px;
-        height: 700px;
+        height: calc(100% - 220px);
     }
     .buildName {
         top: -55px;

+ 14 - 10
src/components/LastAllEnergy.vue

@@ -11,8 +11,7 @@
         </div>
         <div class="energySave">
             <div class="textDiv">
-                <span>中海能耗</span
-                ><span>{{ lastAllComputed.energySaving }}kWh</span>
+                <span>中海能耗</span><span>{{ lastAllComputed.energySaving }}kWh</span>
             </div>
             <div
                 class="saveBack"
@@ -21,10 +20,12 @@
         </div>
         <div class="energyTotal">
             <div class="textDiv">
-                <span>基准能耗</span
-                ><span>{{ lastAllComputed.energyTotal }}kWh</span>
+                <span>基准能耗</span><span>{{ lastAllComputed.energyTotal }}kWh</span>
             </div>
-            <div class="totalBack" :style="{ width: widthBase }"></div>
+            <div
+                class="totalBack"
+                :style="{ width: widthBase }"
+            ></div>
         </div>
     </div>
 </template>
@@ -131,6 +132,8 @@ export default defineComponent({
         color: #e0c29b;
         font-size: 20px;
         padding-bottom: 32px;
+        padding-left: 24px;
+        padding-right: 24px;
         height: 85px;
         box-sizing: border-box;
     }
@@ -138,6 +141,8 @@ export default defineComponent({
         color: #cbcdda;
         font-size: 20px;
         height: 50px;
+        padding-left: 24px;
+        padding-right: 24px;
         box-sizing: border-box;
     }
     .textDiv {
@@ -159,10 +164,9 @@ export default defineComponent({
     }
 }
 .verLastClass {
-    height: 420px;
-    padding: 0 50px 50px;
-    background: rgba(149, 162, 194, 0.1);
-    backdrop-filter: blur(40px);
-    border-radius: 20px;
+    //height: 420px;
+    height: 28%;
+    box-sizing: border-box;
+    padding: 0 36px 40px;
 }
 </style>

+ 23 - 11
src/components/LastMonthData.vue

@@ -1,18 +1,21 @@
 <template>
     <div
         class="lastMonth"
-        :class="[screenType === 'hor' ? 'horiLastMonth' : 'verticalLastMonth']"
+        :class="[screenType === 'hor' ? 'horiLastMonth' : 'verLastMonth']"
     >
         <div class="subhead-title"><span>上月数据</span></div>
         <div class="itemWrap">
-            <div class="item" v-for="(item, index) in lastDataArr" :key="index">
+            <div
+                class="item"
+                v-for="(item, index) in lastDataArr"
+                :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>
+                        <span>{{ item.value }}</span><span>{{ item.unit }}</span>
                     </div>
                     <div class="item-content">
                         <div class="item-content-right">
@@ -45,8 +48,13 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-        const { lastco2, lasthumidity, lastmethanal, lastpm25, lasttemp } =
-            dapingImage;
+        const {
+            lastco2,
+            lasthumidity,
+            lastmethanal,
+            lastpm25,
+            lasttemp,
+        } = dapingImage;
         const allData = reactive({
             lastDataArr: [],
         });
@@ -147,7 +155,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .lastMonth {
     .item {
-        padding-top: 60px;
+        //padding-top: 60px;
         display: flex;
 
         .item-left {
@@ -199,19 +207,23 @@ export default defineComponent({
         padding-top: 0;
     }
     .itemWrap {
-        height: calc(100% - 30px);
+        height: calc(100% - 60px);
         display: flex;
         flex-direction: column;
         justify-content: space-evenly;
     }
 }
-.verticalLastMonth {
-    height: 400px;
+.verLastMonth {
+    //height: 400px;
+    height: 26%;
     padding: 0 36px;
     background: rgba(149, 162, 194, 0.1);
     backdrop-filter: blur(40px);
     border-radius: 20px;
     .itemWrap {
+        box-sizing: border-box;
+        padding-top: 20px;
+        height: calc(100% - 60px);
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
@@ -219,7 +231,7 @@ export default defineComponent({
         .item {
             justify-content: center;
             width: 33.33%;
-
+            align-items: center;
             .item-content-right {
                 font-size: 14px;
                 white-space: nowrap;

+ 50 - 39
src/components/LastSaveEnergy.vue

@@ -1,42 +1,50 @@
 <template>
     <div
         class="lastMonth"
-        :class="[screenType === 'hor' ? 'horizontalClass ' : 'verAllClass ']"
+        :class="[screenType === 'hor' ? 'horizontalClass ' : 'verSaveClass']"
     >
-        <div class="subhead-title">
-            <span>上月节约能耗</span>
-        </div>
-        <div class="saveCont" ref="saveCont">
+        <div class="lastMonthCont">
+            <div class="subhead-title">
+                <span>上月节约能耗</span>
+            </div>
             <div
-                class="videoWrap"
-                :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
+                class="saveCont"
+                ref="saveCont"
             >
-                <div class="co2Wrap sco2">
-                    减排<span class="value"
-                        >{{ lastAllEnergyRes.cdmCo2 }}Kg</span
-                    >CO2
-                </div>
-                <div class="co2Wrap scarbon">
-                    减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span
-                    >碳
-                </div>
-                <div class="co2Wrap stree">
-                    为国家种<span class="value">{{
-                        lastAllEnergyRes.cdmTree
-                    }}</span
-                    >棵树
-                </div>
-                <div class="electWrap">
-                    <div>节约电</div>
-                    <div class="value">
-                        {{ lastAllEnergyRes.energySaving }}度
+                <div
+                    class="videoWrap"
+                    :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
+                >
+                    <div class="co2Wrap sco2">
+                        减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO2
+                    </div>
+                    <div class="co2Wrap scarbon">
+                        减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span>碳
+                    </div>
+                    <div class="co2Wrap stree">
+                        为国家种<span class="value">{{
+                            lastAllEnergyRes.cdmTree
+                            }}</span>棵树
+                    </div>
+                    <div class="electWrap">
+                        <div>节约电</div>
+                        <div class="value">
+                            {{ lastAllEnergyRes.energySaving }}度
+                        </div>
                     </div>
                 </div>
+                <video
+                    class="svideo"
+                    autoplay
+                    loop
+                    muted
+                    ref="svideo"
+                >
+                    <source src="@/assets/image/horImg/saveEnergy.mov" />
+                </video>
             </div>
-            <video class="svideo" autoplay loop muted ref="svideo">
-                <source src="@/assets/image/horImg/saveEnergy.mov" />
-            </video>
         </div>
+
     </div>
 </template>
 <script lang="ts">
@@ -121,9 +129,14 @@ export default defineComponent({
 <style scoped lang="scss">
 .lastMonth {
     height: 100%;
-    background: rgba(100, 108, 130, 0.06);
-    backdrop-filter: blur(20px);
-    border-radius: 20px;
+    .lastMonthCont {
+        height: 100%;
+        background: rgba(100, 108, 130, 0.06);
+        backdrop-filter: blur(20px);
+        border-radius: 20px;
+        padding: 0 36px 40px;
+        box-sizing: border-box;
+    }
     .saveCont {
         height: calc(100% - 60px);
         padding-top: 10px;
@@ -196,12 +209,10 @@ export default defineComponent({
         }
     }
 }
-.verAllClass {
-    height: 600px;
-    padding: 0 50px 50px;
-    background: rgba(149, 162, 194, 0.1);
-    backdrop-filter: blur(40px);
-    border-radius: 20px;
-    margin: 22px 0;
+.verSaveClass {
+    //height: 600px;
+    box-sizing: border-box;
+    height: 42%;
+    padding: 28px 0;
 }
 </style>

+ 2 - 1
src/components/NowData.vue

@@ -193,7 +193,8 @@ export default defineComponent({
     }
 }
 .verticalNowData {
-    height: 380px;
+    //height: 380px;
+    height:27%;
     .item {
         .item_content {
             .content_value {

+ 37 - 19
src/components/TemChart.vue

@@ -3,10 +3,19 @@
         class="temChart"
         :class="[screenType === 'hor' ? 'horiCompClass' : 'verCompClass ']"
     >
-        <div class="subhead-title" v-show="screenType === 'ver'">
-            <span>实时温度</span>
+        <div class="temChartCont">
+            <div
+                class="subhead-title"
+                v-show="screenType === 'ver'"
+            >
+                <span>实时温度</span>
+            </div>
+            <div
+                id="tempChartBox"
+                class="tempChartBox"
+                ref="tempChartRef"
+            ></div>
         </div>
-        <div id="tempChartBox" class="tempChartBox" ref="tempChartRef"></div>
     </div>
 </template>
 <script lang="ts">
@@ -167,20 +176,20 @@ export default defineComponent({
                 .tooltip(false)
                 .shape("smooth");
 
-            chart.point().position("time*temp").shape("breath-point");
+            chart
+                .point()
+                .position("time*temp")
+                .shape("breath-point");
 
             var lastpoint = cdata[cdata.length - 1];
             var nowtime = moment();
             var timestr = nowtime.format("YYYY.MM.DD");
             const tooltipHtml = `<div style='line-height:22px;color:#321D0A;background: linear-gradient(105.46deg, #F2E3CD 8.6%, #D9B991 62.71%);padding:10px 12px;border-radius:5px;'>
-                <div style='font-size:12px;font-weight:600;'><span style='margin-right:5px'>${timestr}</span>${
-                lastpoint && lastpoint.time
-            }</div>
-                <div style='font-size:16px;font-weight:600;'>室内温度:${
-                    lastpoint &&
+                <div style='font-size:12px;font-weight:600;'><span style='margin-right:5px'>${timestr}</span>${lastpoint &&
+                lastpoint.time}</div>
+                <div style='font-size:16px;font-weight:600;'>室内温度:${lastpoint &&
                     lastpoint.temp &&
-                    Number(lastpoint.temp).toFixed(1)
-                }℃</div></div>`;
+                    Number(lastpoint.temp).toFixed(1)}℃</div></div>`;
             chart.annotation().html({
                 position: lastpoint,
                 html: tooltipHtml,
@@ -192,7 +201,7 @@ export default defineComponent({
 
             chart.annotation().text({
                 // position: ['min', 'max'], // 文本的起始位置,值为原始数据值,支持 callback
-                position: function (xScale, yScale) {
+                position: function(xScale, yScale) {
                     //console.log("position", xScale, yScale);
                     return ["0%", "0%"];
                 },
@@ -239,10 +248,14 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .temChart {
+    .temChartCont {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
     .tempChartBox {
         width: 100%;
         height: 100%;
-
         box-sizing: border-box;
         // height: 330px;
     }
@@ -253,12 +266,17 @@ export default defineComponent({
     padding: 50px 20px 20px;
 }
 .verCompClass {
-    margin: 22px 0;
-    height: 410px;
-    background: rgba(149, 162, 194, 0.1);
-    backdrop-filter: blur(40px);
-    border-radius: 20px;
-    padding: 0 36px;
+    // margin: 22px 0;
+    //height: 410px;
+    height: 31%;
+    padding: 28px 0;
+    box-sizing: border-box;
+    .temChartCont {
+        padding: 0 36px;
+        background: rgba(149, 162, 194, 0.1);
+        backdrop-filter: blur(40px);
+        border-radius: 20px;
+    }
     .tempChartBox {
         height: calc(100% - 60px);
         padding-top: 30px;

+ 11 - 8
src/components/airSwitchVer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="airSwitch verticalClass">
+    <div class="airSwitch verAirClass">
         <div class="subhead-title">
             <span> {{ airStatus ? "空调已开启" : "空调已关闭" }}</span>
         </div>
@@ -47,19 +47,22 @@ export default defineComponent({
     background: rgba(149, 162, 194, 0.1);
     backdrop-filter: blur(40px);
     border-radius: 20px;
-    height: 226px;
+    //height: 226px;
 
-    &.verticalClass {
+    &.verAirClass {
+        height: 16%;
         padding: 0 36px;
         box-sizing: border-box;
     }
     .air-cont {
-        padding-top: 35px;
+        height: calc(100% - 60px);
+        display: flex;
+        align-items: center;
         .air-left {
-            display: flex;
-            // justify-content: center;
-            flex-direction: column;
-            padding-top: 20px;
+            // display: flex;
+            // flex-direction: column;
+            // padding-top: 20px;
+            width: 100%;
             .bar-box {
                 width: 93%;
                 height: 10px;

+ 19 - 10
src/components/lastEnergyChart.vue

@@ -6,7 +6,11 @@
         <div class="subhead-title">
             <span>上月每日能耗(kWh)</span>
         </div>
-        <div id="lastChartBox" class="lastChartBox" ref="lastChartBox"></div>
+        <div
+            id="lastChartBox"
+            class="lastChartBox"
+            ref="lastChartBox"
+        ></div>
     </div>
 </template>
 <script lang="ts">
@@ -56,7 +60,7 @@ export default defineComponent({
                 queryLastDayEnergy().then((res) => {
                     var resdata = res.data.content || [];
                     //debugger;
-                    resdata.forEach(function (item) {
+                    resdata.forEach(function(item) {
                         var dateStr = item.date;
                         item.Date =
                             dateStr.substr(0, 4) +
@@ -83,8 +87,12 @@ export default defineComponent({
                 if (props.screenType == "ver") {
                     //只有竖屏才轮播
                     //上个月
-                    var start = moment().subtract(1, "months").date(1);
-                    var end = moment().subtract(1, "months").date(12);
+                    var start = moment()
+                        .subtract(1, "months")
+                        .date(1);
+                    var end = moment()
+                        .subtract(1, "months")
+                        .date(12);
                     var end2 = moment().subtract(1, "months");
                     var intervalInt = setInterval(() => {
                         start.add(1, "days");
@@ -247,6 +255,9 @@ export default defineComponent({
 <style scoped lang="scss">
 .lastChart {
     height: 100%;
+    background: rgba(149, 162, 194, 0.1);
+    backdrop-filter: blur(40px);
+    border-radius: 20px;
     .head-title {
         justify-content: space-between;
         padding: 0 32px;
@@ -262,13 +273,11 @@ export default defineComponent({
         height: calc(100% - 60px);
     }
 }
-.horizontalClass {
-}
+
 .verticalTemChart {
-    height: 450px;
+    //height: 450px;
+    height: 30%;
+    box-sizing: border-box;
     padding: 0 36px;
-    background: rgba(149, 162, 194, 0.1);
-    backdrop-filter: blur(40px);
-    border-radius: 20px;
 }
 </style>

+ 3 - 2
src/components/pageHead.vue

@@ -8,7 +8,7 @@
             <!-- <img :src="title" v-else /> -->
         </div>
         <div class="horHead-left">
-            <img :src="logo" alt="" style="height: 60px" />
+            <img :src="logo" alt="" style="height: 48px" />
         </div>
         <div class="horHead-right">
             <div class="right-item">
@@ -133,7 +133,7 @@ export default defineComponent({
             align-items: center;
             cursor: pointer;
             // padding: 12px 16px;
-            font-size: 16px;
+            font-size: 20px;
             color: #efdec6;
             font-weight: 400;
             line-height: 22px;
@@ -144,6 +144,7 @@ export default defineComponent({
             // border-radius: 8px;
             .firstImg {
                 margin-right: 6px;
+                width:28px;
             }
             .item-time {
                 font-family: Persagy;

+ 6 - 3
src/style.scss

@@ -31,21 +31,24 @@ body {
     padding: 0;
     height: 100%;
 }
+*{
+    box-sizing: border-box;
+}
 #app {
     height: 100%;
 }
 .horizontalClass {
-    padding: 0px 28px 28px;
+    padding: 0px 32px 32px;
     box-sizing: border-box;
     border-radius: 20px;
     // background: #ffffff;
     font-size: 20px;
 }
 .head-title {
-    height: 56px;
+    height: 60px;
     font-weight: 700;
     font-size: 40px;
-    line-height: 56px;
+    line-height: 1;
     color: #f7e6cd;
 }
 

+ 23 - 11
src/views/horiScreen/index.vue

@@ -1,8 +1,14 @@
 <template>
     <div class="horizontalScreen">
         <div class="bg">
-            <img class="bgUp" src="@/assets/image/horImg/background_up.png" />
-            <img class="bgBuild" src="@/assets/image/horImg/background.png" />
+            <img
+                class="bgUp"
+                src="@/assets/image/horImg/background_up.png"
+            />
+            <img
+                class="bgBuild"
+                src="@/assets/image/horImg/background.png"
+            />
         </div>
         <div class="container">
             <div class="hor-head">
@@ -28,14 +34,20 @@
                     <LastMonthData screenType="hor"></LastMonthData>
                 </div>
             </div>
-            <div class="hor-content" v-if="nowPage == 2">
+            <div
+                class="hor-content"
+                v-if="nowPage == 2"
+            >
                 <HorFloorSpace
                     screenType="hor"
                     :showPing="nowPage"
                     @donetowpage="doneTowPage"
                 ></HorFloorSpace>
             </div>
-            <div class="hor-content threeScreen" v-if="nowPage == 3">
+            <div
+                class="hor-content threeScreen"
+                v-if="nowPage == 3"
+            >
                 <div class="topCont flexBetween">
                     <div class="threeLeft">
                         <LastAllEnergy screenType="hor"></LastAllEnergy>
@@ -119,7 +131,7 @@ export default {
 
 <style scoped lang="scss">
 .horizontalScreen {
-    padding: 30px 40px 0;
+    padding: 40px;
     height: 100%;
     overflow: hidden;
     box-sizing: border-box;
@@ -146,20 +158,20 @@ export default {
         }
         .bgBuild {
             position: absolute;
-            top: -409px;
+            top: -10%;
             left: 0;
-            width: 3100px;
-            height: 2100px;
+            width: 120%;
+            // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
             z-index: -4;
-            animation: mymove 60s linear infinite alternate;
-            -webkit-animation: mymove 60s linear infinite alternate;
+            animation: mymove 20s linear infinite alternate;
+            -webkit-animation: mymove 20s linear infinite alternate;
         }
         @keyframes mymove {
             from {
                 left: 0px;
             }
             to {
-                left: -900px;
+                left: -20%;
             }
         }
         img {

+ 31 - 18
src/views/verScreen/index.vue

@@ -5,26 +5,38 @@
                 class="bgUp"
                 src="@/assets/image/horImg/background_up_ver.png"
             />
-            <img class="bgBuild" src="@/assets/image/horImg/background.png" />
+            <img
+                class="bgBuild"
+                src="@/assets/image/horImg/background.png"
+            />
         </div>
         <div class="container">
             <div class="hor-head">
                 <pageHead />
             </div>
-            <div class="hor-content" v-if="nowPage == 1">
+            <div
+                class="hor-content"
+                v-if="nowPage == 1"
+            >
                 <NowData screenType="ver"></NowData>
                 <airSwitchVer></airSwitchVer>
                 <TemChart screenType="ver"></TemChart>
                 <LastMonthData screenType="ver"></LastMonthData>
             </div>
-            <div class="hor-content" v-if="nowPage == 2">
+            <div
+                class="hor-content"
+                v-if="nowPage == 2"
+            >
                 <HorFloorSpace
                     screenType="ver"
                     :showPing="nowPage"
                     @donetowpage="doneTowPage"
                 ></HorFloorSpace>
             </div>
-            <div class="hor-content" v-if="nowPage == 3">
+            <div
+                class="hor-content"
+                v-if="nowPage == 3"
+            >
                 <LastAllEnergy screenType="ver"></LastAllEnergy>
                 <LastSaveEnergy screenType="ver"></LastSaveEnergy>
                 <lastEnergyChart
@@ -71,9 +83,8 @@ export default defineComponent({
             showAllPage: 3,
             doneThreePage() {
                 //第三屏刷新结束 通知
-
-                allData.nowPage = 1;
-                allData.timePageShow(); //1屏变2屏
+                // allData.nowPage = 1;
+                // allData.timePageShow(); //1屏变2屏
             },
             doneTowPage() {
                 //第二屏刷新结束 通知
@@ -90,7 +101,7 @@ export default defineComponent({
                     // if (allData.nowPage == 4) {
                     //     allData.nowPage = 1;
                     // }
-                }, 6000);
+                }, 600000);
             },
         });
 
@@ -104,13 +115,15 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .verticalWrap {
-    padding: 30px 40px;
-    // height: 100%;
+    padding: 40px 40px 100px;
+    overflow: hidden;
+    height: 100%;
+    min-height: 1280Px; //todo
     box-sizing: border-box;
     scrollbar-width: none;
     position: relative;
     .container {
-        //  height: 100%;
+        height: 100%;
     }
     .bg {
         position: absolute;
@@ -130,20 +143,20 @@ export default defineComponent({
         }
         .bgBuild {
             position: absolute;
-            top: -409px;
+            top: -10%;
             left: 0;
-            width: 3100px;
-            height: 2100px;
+            width: 120%;
+            //width: 2230px;
             z-index: -4;
-            animation: mymove 60s linear infinite alternate;
-            -webkit-animation: mymove 60s linear infinite alternate;
+            animation: mymove 20s linear infinite alternate;
+            -webkit-animation: mymove 20s linear infinite alternate;
         }
         @keyframes mymove {
             from {
                 left: 0px;
             }
             to {
-                left: -900px;
+                left: -20%;
             }
         }
         img {
@@ -156,7 +169,7 @@ export default defineComponent({
         box-sizing: border-box;
     }
     .hor-content {
-        //   height: calc(100% - 134px);
+        height: calc(100% - 150px);
     }
 }
 </style>

+ 1 - 1
vite.config.ts

@@ -22,7 +22,7 @@ export default defineConfig(({ mode }) => {
             postcss: {
                 plugins: [
                     postCssPxToRem({
-                        rootValue: 210, // 1rem的大小
+                        rootValue: 192, // 1rem的大小
                         propList: ["*"], // 需要转换的属性,这里选择全部都进行转换
                     }),
                 ],