Browse Source

修改第二轮还原度

zhaojijng 2 years ago
parent
commit
aa3e274a0b
42 changed files with 422 additions and 161 deletions
  1. 28 28
      dist/sgdaping/assets/background.304f7d87.js
  2. 0 1
      dist/sgdaping/assets/background.56aa2319.css
  3. 1 0
      dist/sgdaping/assets/background.f27284c2.css
  4. 1 1
      dist/sgdaping/assets/index.e7598e38.js
  5. 1 0
      dist/sgdaping/assets/index.1db1177c.css
  6. 1 0
      dist/sgdaping/assets/index.4f0b5577.css
  7. 0 1
      dist/sgdaping/assets/index.53d40b36.css
  8. 0 1
      dist/sgdaping/assets/index.5f21a5cd.css
  9. 1 1
      dist/sgdaping/assets/index.3d13b05f.js
  10. 1 0
      dist/sgdaping/assets/index.81411fa7.css
  11. 15 15
      dist/sgdaping/assets/index.41f06b6f.js
  12. 0 1
      dist/sgdaping/assets/index.cc4ff5fd.css
  13. 1 1
      dist/sgdaping/assets/index.cd49ff3e.js
  14. BIN
      dist/sgdaping/assets/round1.3f179f0a.png
  15. BIN
      dist/sgdaping/assets/round2.7a1a2069.png
  16. BIN
      dist/sgdaping/assets/round3.61e0aed3.png
  17. BIN
      dist/sgdaping/assets/round4.6fddfd82.png
  18. BIN
      dist/sgdaping/assets/round5.398880f2.png
  19. BIN
      dist/sgdaping/assets/saveCarbon.073b9188.png
  20. BIN
      dist/sgdaping/assets/saveCo2.f203e456.png
  21. BIN
      dist/sgdaping/assets/saveLight.0e63e0e5.png
  22. BIN
      dist/sgdaping/assets/saveTree.7b54f2da.png
  23. 2 2
      dist/sgdaping/index.html
  24. BIN
      src/assets/image/horImg/round1.png
  25. BIN
      src/assets/image/horImg/round2.png
  26. BIN
      src/assets/image/horImg/round3.png
  27. BIN
      src/assets/image/horImg/round4.png
  28. BIN
      src/assets/image/horImg/round5.png
  29. BIN
      src/assets/image/horImg/二氧化碳.png
  30. BIN
      src/assets/image/horImg/光盘.png
  31. BIN
      src/assets/image/horImg/树.png
  32. BIN
      src/assets/image/horImg/碳.png
  33. 4 2
      src/components/HorFloorSpace.vue
  34. 13 6
      src/components/LastAllEnergy.vue
  35. 284 58
      src/components/LastSaveEnergy.vue
  36. 1 1
      src/components/NowData.vue
  37. 12 11
      src/components/TemChart.vue
  38. 33 11
      src/components/airSwitchHor.vue
  39. 16 13
      src/components/lastEnergyChart.vue
  40. 4 4
      src/views/horiScreen/index.vue
  41. 2 2
      src/views/verScreen/index.vue
  42. 1 1
      vite.config.ts

File diff suppressed because it is too large
+ 28 - 28
dist/sgdaping/assets/background.304f7d87.js


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


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


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


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


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


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


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


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


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


File diff suppressed because it is too large
+ 15 - 15
dist/sgdaping/assets/index.41f06b6f.js


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


+ 1 - 1
dist/sgdaping/assets/index.cd49ff3e.js

@@ -1 +1 @@
-import{h as e,r as n,o,k as t,_ as s,c as r,f as a}from"./index.41f06b6f.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.bda9aa30.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};

BIN
dist/sgdaping/assets/round1.3f179f0a.png


BIN
dist/sgdaping/assets/round2.7a1a2069.png


BIN
dist/sgdaping/assets/round3.61e0aed3.png


BIN
dist/sgdaping/assets/round4.6fddfd82.png


BIN
dist/sgdaping/assets/round5.398880f2.png


BIN
dist/sgdaping/assets/saveCarbon.073b9188.png


BIN
dist/sgdaping/assets/saveCo2.f203e456.png


BIN
dist/sgdaping/assets/saveLight.0e63e0e5.png


BIN
dist/sgdaping/assets/saveTree.7b54f2da.png


+ 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.41f06b6f.js"></script>
-    <link rel="stylesheet" href="/sgdaping/assets/index.53d40b36.css">
+    <script type="module" crossorigin src="/sgdaping/assets/index.bda9aa30.js"></script>
+    <link rel="stylesheet" href="/sgdaping/assets/index.4f0b5577.css">
   </head>
   <body>
     <div id="app"></div>

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


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


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


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


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


BIN
src/assets/image/horImg/二氧化碳.png


BIN
src/assets/image/horImg/光盘.png


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


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


+ 4 - 2
src/components/HorFloorSpace.vue

@@ -544,7 +544,7 @@ export default defineComponent({
     .imageDiv {
         height: 32px;
         margin: 0 32px;
-        font-size:0;
+        font-size: 0;
         text-align: center;
         img {
             font-size: 0;
@@ -683,7 +683,7 @@ export default defineComponent({
         align-items: center;
         font-family: Persagy;
         font-size: 36px;
-        font-weight: 700;
+        font-weight: bold;
         line-height: 43px;
         color: #f7ecdb;
         width: 90px;
@@ -711,6 +711,8 @@ export default defineComponent({
                 text-align: center;
                 padding: 0 8px;
                 box-sizing: border-box;
+                font-weight: 500;
+                font-family: Persagy;
             }
         }
     }

+ 13 - 6
src/components/LastAllEnergy.vue

@@ -7,11 +7,11 @@
             <span>上月总能耗</span>
         </div>
         <div class="saveEnergy">
-            <span>节能{{ lastAllComputed.energyCompare }}%</span>
+            <span class="backImage">节能<span class="value">{{ lastAllComputed.energyCompare }}%</span></span>
         </div>
         <div class="energySave">
             <div class="textDiv">
-                <span>中海能耗</span><span>{{ lastAllComputed.energySaving }}kWh</span>
+                <span>中海能耗</span><span class="value">{{ lastAllComputed.energySaving }}kWh</span>
             </div>
             <div
                 class="saveBack"
@@ -20,7 +20,7 @@
         </div>
         <div class="energyTotal">
             <div class="textDiv">
-                <span>基准能耗</span><span>{{ lastAllComputed.energyTotal }}kWh</span>
+                <span>基准能耗</span><span class="value">{{ lastAllComputed.energyTotal }}kWh</span>
             </div>
             <div
                 class="totalBack"
@@ -120,12 +120,18 @@ export default defineComponent({
         display: flex;
         justify-content: center;
         align-items: center;
-        span {
+        font-weight: 600;
+        font-family: Persagy;
+        .backImage {
             background-image: url("@/assets/image/horImg/lastAllLight.png");
             background-repeat: no-repeat;
             background-position: center bottom;
             background-size: 100%;
             padding-bottom: 5px;
+            .value{
+                font-weight: 700;
+                 font-size: 48px;
+            }
         }
     }
     .energySave {
@@ -149,17 +155,18 @@ export default defineComponent({
         display: flex;
         justify-content: space-between;
         padding-bottom: 8px;
+        font-family: Persagy;
     }
     .saveBack {
         height: 15px;
         background-image: url("@/assets/image/horImg/lastGold.svg");
-        transition: width 1.5s linear;
+        transition: width 0.8s linear;
         width: 0;
     }
     .totalBack {
         height: 15px;
         background-image: url("@/assets/image/horImg/lastGray.svg");
-        transition: width 1.5s linear;
+        transition: width 0.8s linear;
         width: 0;
     }
 }

+ 284 - 58
src/components/LastSaveEnergy.vue

@@ -11,26 +11,94 @@
                 class="saveCont"
                 ref="saveCont"
             >
-                <div class="videoWrap">
-                    <div class="co2Wrap sco2">
-                        减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO2
+                <div class="saveCenterCont">
+                    <div class="centerOval">
+                        <img
+                            class="round1"
+                            src="@/assets/image/horImg/round1.png"
+                        /><img
+                            class="round2"
+                            src="@/assets/image/horImg/round2.png"
+                        /> <img
+                            class="round3"
+                            src="@/assets/image/horImg/round3.png"
+                        /><img
+                            class="round4"
+                            src="@/assets/image/horImg/round4.png"
+                        />
+                        <img
+                            class="round5"
+                            src="@/assets/image/horImg/round5.png"
+                        />
+                        <div class="electWrap">
+                            <div>节约电</div>
+                            <div class="value">
+                                <span class="num">{{ lastAllEnergyRes.energySaving }}</span>度
+                            </div>
+                        </div>
                     </div>
-                    <div class="co2Wrap scarbon">
-                        减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span>碳
+                    <canvas
+                        id="co2Canvas"
+                        class="co2Canvas"
+                        width="800"
+                        height="300"
+                    ></canvas>
+                    <canvas
+                        id="circleCanvas1"
+                        class="circleCanvas1"
+                        width="800"
+                        height="300"
+                    ></canvas>
+                    <div class="outOval outOvalCo2">
+                        <div class="inOval">
+                        </div>
+                        <img
+                            class="saveLight"
+                            src="@/assets/image/horImg/saveLight.png"
+                        /><img
+                            class="saveCo2"
+                            src="@/assets/image/horImg/saveCo2.png"
+                        />
+                        <div class="co2Wrap sco2">
+                            减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO2
+                        </div>
                     </div>
-                    <div class="co2Wrap stree">
-                        为国家种<span class="value">{{
-                            lastAllEnergyRes.cdmTree
-                            }}</span>棵树
+
+                    <div class="outOval outOvalCarbon">
+                        <div class="inOval">
+                        </div>
+                        <img
+                            class="saveLight"
+                            src="@/assets/image/horImg/saveLight.png"
+                        /><img
+                            class="saveCo2"
+                            src="@/assets/image/horImg/saveCarbon.png"
+                        />
+                        <div class="co2Wrap sco2">
+                            减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span>碳
+                        </div>
                     </div>
-                    <div class="electWrap">
-                        <div>节约电</div>
-                        <div class="value">
-                            {{ lastAllEnergyRes.energySaving }}度
+
+                    <div class="outOval outOvalTree">
+                        <div class="inOval">
+                        </div>
+                        <img
+                            class="saveLight"
+                            src="@/assets/image/horImg/saveLight.png"
+                        /><img
+                            class="saveCo2"
+                            src="@/assets/image/horImg/saveTree.png"
+                        />
+                        <div class="co2Wrap sco2">
+                            为国家种<span class="value">{{
+                                lastAllEnergyRes.cdmTree
+                                }}</span>棵树
                         </div>
                     </div>
                 </div>
+
                 <video
+                    style="display:none"
                     class="svideo"
                     autoplay
                     loop
@@ -76,6 +144,32 @@ export default defineComponent({
             videoLeft: 0,
         });
 
+        let uniformX = 200; // x 初始位置
+        let uniformSpeed = 1;
+        function circleMove(circtx) {
+            window.requestAnimationFrame(() => {
+                circleMove(circtx);
+            });
+            circtx.clearRect(0, 0, 800, 300);
+            circtx.fillStyle = "#0000ff";
+            drawCircle(circtx, uniformX, 200, 5, "green"); // 画圆,uniformX是 x 的坐标
+
+            if (uniformX < 500) {
+                uniformX += uniformSpeed;
+            } else {
+                uniformX = 0;
+            }
+        }
+
+        // 画实体圆(小球)
+        function drawCircle(circtx, x, y, radius, color) {
+            // circtx.save();
+            circtx.beginPath();
+            circtx.arc(x, y, radius, 0, Math.PI * 2);
+            circtx.closePath();
+            circtx.fill();
+            // circtx.restore();
+        }
         onMounted(() => {
             nextTick(() => {
                 //videoWrap  :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
@@ -91,21 +185,52 @@ export default defineComponent({
                 //     svideo.value.offsetWidth,
                 //     svideo.value.offsetHeight,
                 // );
-                // 2116 × 692
+
+                var c = document.getElementById("co2Canvas");
+                var ctx = c.getContext("2d");
+                ctx.moveTo(20, 120);
+                ctx.lineTo(110, 120);
+                ctx.lineTo(173, 173);
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
+                ctx.setLineDash([2, 3]);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(676, 50);
+                ctx.lineTo(590, 150);
+                ctx.lineTo(515, 150);
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
+                ctx.setLineDash([2, 3]);
+                ctx.stroke();
+
+                ctx.beginPath();
+                ctx.moveTo(756, 250);
+                ctx.lineTo(670, 210);
+                ctx.lineTo(512, 210);
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
+                ctx.setLineDash([2, 3]);
+                ctx.stroke();
+
+                var circ = document.getElementById("circleCanvas1");
+                var circtx = circ.getContext("2d");
+                // circleMove(circtx);
             });
         });
 
         const projectStore = useProjectStore();
-        const { lastAllEnergy } = storeToRefs(projectStore);
+        // const { lastAllEnergy } = storeToRefs(projectStore);
 
         projectStore.$subscribe((mutation, state) => {
+            //订阅store的变化
             const lastAllEnergy = state.lastAllEnergy || {};
             allData.lastAllEnergyRes = {
                 cdmCo2: lastAllEnergy.cdmCo2
                     ? lastAllEnergy.cdmCo2.toFixed(2)
                     : lastAllEnergy.cdmCo2,
                 cdmTree: lastAllEnergy.cdmTree
-                    ? lastAllEnergy.cdmTree.toFixed(2)
+                    ? lastAllEnergy.cdmTree.toFixed(0)
                     : lastAllEnergy.cdmTree,
                 cdmC: lastAllEnergy.cdmC
                     ? lastAllEnergy.cdmC.toFixed(2)
@@ -144,6 +269,140 @@ export default defineComponent({
             //height: 100%;
             width: 100%;
         }
+        .saveCenterCont {
+            position: relative;
+            width: 1px;
+            height: 1px;
+            left: 50%;
+            top: 50%;
+        }
+        .centerOval {
+            width: 1px;
+            height: 1px;
+            position: absolute;
+            left: -50px;
+            top: 30px;
+            transform: translate(-50%, -50%);
+            .round1 {
+                position: absolute;
+                width: 275px;
+                left: 50%;
+                top: -68px;
+                transform: translate(-50%, -50%);
+            }
+            .round2 {
+                position: absolute;
+                width: 275px;
+                left: 50%;
+                top: -46px;
+                transform: translate(-50%, -50%);
+            }
+            .round3 {
+                position: absolute;
+                width: 295px;
+                left: 50%;
+                top: -25px;
+                transform: translate(-50%, -50%);
+            }
+            .round4 {
+                position: absolute;
+                width: 340px;
+                left: 50%;
+                top: -10px;
+                transform: translate(-50%, -50%);
+            }
+            .round5 {
+                position: absolute;
+                width: 376px;
+                left: 50%;
+                top: 0px;
+                transform: translate(-50%, -50%);
+            }
+            .electWrap {
+                position: absolute;
+                top: -168px;
+                left: 50%;
+                font-size: 30px;
+                white-space: nowrap;
+                transform: translate(-50%, 0);
+                color: #f7e6cd;
+                text-align: center;
+                .value {
+                    margin-top: 5px;
+                    font-weight: 500;
+                    font-size: 32px;
+                    //font-size: 2vw;
+                    // line-height: 58px;
+                    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
+                    .num {
+                        font-size: 48px;
+                        font-weight: 700;
+                        margin-right: 4px;
+                        font-family: Persagy;
+                    }
+                }
+            }
+        }
+        .outOval {
+            width: 152px;
+            height: 58px;
+            border: 1px dashed rgba(224, 194, 155, 0.26);
+            border-radius: 50%;
+            position: absolute;
+            display: flex;
+            transform: translate(-50%, -50%);
+            .inOval {
+                width: 112px;
+                height: 40px;
+                margin: auto;
+                border: 1px dashed rgba(224, 194, 155, 0.36);
+                border-radius: 50%;
+            }
+            .saveLight {
+                font-size: 0;
+                width: 70px;
+                position: absolute;
+                top: 4px;
+                left: 50%;
+                transform: translate(-50%, 0);
+            }
+            .saveCo2 {
+                font-size: 0;
+                width: 70px;
+                position: absolute;
+                top: -50px;
+                left: 50%;
+                transform: translate(-50%, 0);
+            }
+            .co2Wrap {
+                position: absolute;
+                font-size: 22px;
+                white-space: nowrap;
+                .value {
+                    padding: 0 8px;
+                    font-size: 24px;
+                    font-weight: 700;
+                    font-family: Persagy;
+                }
+            }
+            .sco2 {
+                top: -80px;
+                left: 50%;
+                transform: translate(-50%, 0);
+            }
+        }
+        .outOvalCo2 {
+            left: -400px;
+            top: -30px;
+        }
+        .outOvalCarbon {
+            left: 300px;
+            top: -100px;
+        }
+        .outOvalTree {
+            left: 380px;
+            top: 100px;
+        }
         .videoWrap {
             position: absolute;
             bottom: 0;
@@ -155,51 +414,18 @@ export default defineComponent({
             // left: 0;
             // right: 0;
         }
-        .co2Wrap {
+        .co2Canvas {
             position: absolute;
-            font-size: 22px;
-            //font-size: 1.1vw;
-            .value {
-                padding: 0 8px;
-                font-size: 24px;
-                //font-size: 1.2vw;
-            }
-            .co2Img {
-                width: 58px;
-            }
-        }
-        .sco2 {
-            top: 16%;
-            //top: 62px;
-            left: 5%;
-        }
-        .scarbon {
-            top: -3%;
-            right: 14%;
-        }
-        .stree {
-            top: 52%;
-            right: 4%;
+            left: 0;
+            top: 0;
+            //  border: 1px solid red;
+            transform: translate(-50%, -50%);
         }
-        .electWrap {
+        .circleCanvas1 {
             position: absolute;
-            top: 21%;
-            left: 32%;
-            width: 28%;
-            font-size: 30px;
-            //font-size: 1.4vw;
-            // line-height: 45px;
-            text-align: center;
-            white-space: nowrap;
-            color: #f7e6cd;
-            .value {
-                margin-top: 5px;
-                font-weight: 700;
-                font-size: 46px;
-                //font-size: 2vw;
-                // line-height: 58px;
-                text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
-            }
+            left: 0;
+            top: 0;
+            transform: translate(-50%, -50%);
         }
     }
 }

+ 1 - 1
src/components/NowData.vue

@@ -158,7 +158,7 @@ export default defineComponent({
             .content_value {
                 font-family: Persagy;
                 font-size: 52px;
-                font-weight: 700;
+                font-weight: bold;
                 background: linear-gradient(180deg, #fff5df 0%, #ead0b1 100%);
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;

+ 12 - 11
src/components/TemChart.vue

@@ -109,7 +109,7 @@ export default defineComponent({
                 autoFit: true,
                 // width: chartWidth,
                 // height: chartHeight,
-                padding: [50, 50, 46, 60],
+                padding: [70, 50, 46, 60],
             });
             // }
 
@@ -122,10 +122,11 @@ export default defineComponent({
                 // type: 'timeCat'
             });
             chart.scale("temp", {
-                //range: [0, 1],
-                tickCount: 5,
-                minTickInterval: 2,
-                //ticks:[20,24,28,32]
+                type: "linear",
+                //minTickInterval: 2,
+                min: 22,
+                max: 26,
+                //ticks:[22,23,24,25,26,27]
             });
             chart.axis("time", {
                 label: {
@@ -187,10 +188,10 @@ export default defineComponent({
             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 &&
+            const tooltipHtml = `<div style='line-height:22px;color:#321D0A;background: linear-gradient(105.46deg, #F2E3CD 8.6%, #D9B991 62.71%);padding:16px 17px;border-radius:5px;white-space:nowrap;'>
+                <div style='font-size:12px;font-weight:600;'><span style='margin-right:5px;line-height:17px;'>${timestr}</span>${lastpoint &&
                 lastpoint.time}</div>
-                <div style='font-size:16px;font-weight:600;'>室内温度:${lastpoint &&
+                <div style='font-size:16px;font-weight:600;margin-top:4px;'>室内温度:${lastpoint &&
                     lastpoint.temp &&
                     Number(lastpoint.temp).toFixed(1)}℃</div></div>`;
             chart.annotation().html({
@@ -199,7 +200,7 @@ export default defineComponent({
                 alignX: "right",
                 alignY: "bottom",
                 offsetX: 60,
-                offsetY: -20,
+                offsetY: -15,
             });
 
             chart.annotation().text({
@@ -216,7 +217,7 @@ export default defineComponent({
                     // rotate: Math.PI / 4 // 文本旋转,以弧度为单位
                 }, // 文本的图形样式属性
                 offsetX: -40, // x 方向的偏移量
-                offsetY: -24, // y 方向偏移量
+                offsetY: -46, // y 方向偏移量
             });
 
             chart.render();
@@ -255,7 +256,7 @@ export default defineComponent({
         width: 100%;
         height: 100%;
         box-sizing: border-box;
-        font-size:0;
+        font-size: 0;
     }
     .tempChartBox {
         width: 100%;

+ 33 - 11
src/components/airSwitchHor.vue

@@ -41,7 +41,7 @@ export default defineComponent({
         });
         watch(airValue, (newValue, oldValue) => {
             initChart();
-             console.log("allData.watch" );
+            console.log("allData.watch");
         });
         onUnmounted(() => {
             if (allData.achart) {
@@ -81,17 +81,23 @@ export default defineComponent({
                     opacity: 1,
                     lineCap: "round",
                 });
-
-            chart.annotation().text({
+            var textHtml = `<div class="airText"><span class="value">${
+                data[0].value
+            }</span><span class="unit">%</span></div>`;
+            chart.annotation().html({
                 position: ["50%", "50%"],
-                content: data[0].value + "%",
-                style: {
-                    fontSize: 40,
-                    fill: "#F8EDDA",
-                    fontWeight: 700,
-                    textAlign: "center",
-                },
-                offsetY: -10,
+                html: textHtml,
+                // content: data[0].value + "%",
+                // style: {
+                //     fontSize: 42,
+                //     fill: "#F8EDDA",
+                //     fontWeight: 700,
+                //     textAlign: "center",
+                // },
+                // alignX: "center",
+                // alignY: "center",
+                offsetY: -43,
+                offsetX: -36,
             });
             chart.annotation().text({
                 position: ["50%", "50%"],
@@ -164,9 +170,25 @@ export default defineComponent({
 });
 </script>
 <style scoped lang="scss">
+.airSwitch ::v-deep .airText {
+    background: linear-gradient(180deg, #fff5df 0%, #ead0b1 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
+    font-size: 42px;
+    font-weight: 700;
+    .value {
+    }
+    .unit {
+        font-size: 30px;
+    }
+}
 .airSwitch {
     height: 100%;
     width: 100%;
+
     .airWrap {
         height: 100%;
         display: flex;

+ 16 - 13
src/components/lastEnergyChart.vue

@@ -107,6 +107,7 @@ export default defineComponent({
                         );
                         const rows = allData.ds.views.ttime.rows;
                         allData.lastChart.changeData(rows);
+
                         //console.log("rows----", rows.length, rows, start, end);
                         // allData.ds.on("statechange", (name, value) => {
                         //     const rows = allData.ds.views.ttime.rows;
@@ -118,15 +119,17 @@ export default defineComponent({
                             clearInterval(intervalInt);
                             contx.emit("donethreepage");
                         }
-                    }, 1500);
+                    }, 1200);
                 }
             },
             cInitChart(cdata) {
                 if (props.screenType == "hor") {
                     var end =
                         cdata[cdata.length - 1] && cdata[cdata.length - 1].Date;
+                    var barWidth=8;
                 } else {
                     var end = cdata[11] && cdata[11].Date;
+                     var barWidth=12;
                 }
                 // 指定初始化状态量
                 let ds = new DataSet({
@@ -168,17 +171,17 @@ export default defineComponent({
 
                 if (!chart) return chart;
 
-                const chartView = chart.createView();
-                chartView.data(dv.rows); //这个赋值是升级后的 方式
-                chartView.tooltip(false);
-                chartView.scale("Date", {
+                // const chartView = chart.createView();
+                chart.data(dv.rows); //这个赋值是升级后的 方式
+                chart.tooltip(false);
+                chart.scale("Date", {
                     //range: [0, 1],
                     //tickCount: 12,
                     tickInterval: 2,
                     type: "timeCat",
                     mask: "MM-DD",
                 });
-                chartView.scale("value", {
+                chart.scale("value", {
                     //range: [0, 1],
                     tickCount: 5,
                     type: "linear",
@@ -186,7 +189,7 @@ export default defineComponent({
                     //tickInterval
                     // type: 'timeCat'
                 });
-                chartView.axis("Date", {
+                chart.axis("Date", {
                     line: {
                         style: {
                             lineWidth: 1, // 设置线的宽度
@@ -202,7 +205,7 @@ export default defineComponent({
                     },
                     tickLine: null,
                 });
-                chartView.axis("value", {
+                chart.axis("value", {
                     line: null,
                     grid: {
                         line: {
@@ -214,20 +217,20 @@ export default defineComponent({
                         },
                     },
                     tickline: null,
-                    label: null,
+                    label: null,//坐标轴刻度
                 });
 
-                chartView.legend(false);
+                chart.legend(false);
 
-                chartView
+                chart
                     .interval()
                     .position("Date*value")
                     .color("l(90) 0:#BFA17E 1:#E0D1BB")
                     .shape("borderRadius")
                     .adjust({ type: "stack" })
-                    .size(12)
+                    .size(barWidth)
                     .label("value", {
-                        offset: 10,
+                        offset: 12,
                         style: {
                             fill: "#E0C29B",
                             fontSize: 12,

+ 4 - 4
src/views/horiScreen/index.vue

@@ -158,14 +158,14 @@ export default {
         }
         .bgBuild {
             position: absolute;
-            top: -11%;
+            top: 0%;
             left: 0;
             width: 120%;
-            height: 111%;
+            height: 126%;
             // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
             z-index: -4;
-            animation: mymove 20s linear infinite alternate;
-            -webkit-animation: mymove 20s linear infinite alternate;
+            animation: mymove 40s linear infinite alternate;
+            -webkit-animation: mymove 40s linear infinite alternate;
         }
         @keyframes mymove {
             from {

+ 2 - 2
src/views/verScreen/index.vue

@@ -145,8 +145,8 @@ export default defineComponent({
             width: 120%;
             height: 110%;
             z-index: -4;
-            animation: mymove 20s linear infinite alternate;
-            -webkit-animation: mymove 20s linear infinite alternate;
+            animation: mymove 40s linear infinite alternate;
+            -webkit-animation: mymove 40s linear infinite alternate;
         }
         @keyframes mymove {
             from {

+ 1 - 1
vite.config.ts

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