Browse Source

fix 动画

zhaojijng 2 years ago
parent
commit
4fb0513d5c

File diff suppressed because it is too large
+ 21 - 21
dist/sgdaping/assets/background.23ba7436.js


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


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


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

@@ -1 +1 @@
-import{h as e,r as n,o,k as t,_ as s,c as r,f as a}from"./index.9c728adc.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.4bcff2ae.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
+ 2 - 2
dist/sgdaping/assets/index.9c728adc.js


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


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


+ 1 - 1
dist/sgdaping/index.html

@@ -5,7 +5,7 @@
     <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.9c728adc.js"></script>
+    <script type="module" crossorigin src="/sgdaping/assets/index.4bcff2ae.js"></script>
     <link rel="stylesheet" href="/sgdaping/assets/index.4f0b5577.css">
   </head>
   <body>

+ 6 - 3
src/components/LastAllEnergy.vue

@@ -15,7 +15,7 @@
             </div>
             <div
                 class="saveBack"
-                :style="{ width: lastAllComputed.energyCompare + '%' }"
+                :style="{ width: compareBase }"
             ></div>
         </div>
         <div class="energyTotal">
@@ -56,10 +56,11 @@ export default defineComponent({
         ///  const { lastAllEnergy22 } = storeToRefs(projectStore);
         const allData = reactive({
             widthBase: "0%",
+            compareBase: "0%",
         });
         const lastAllComputed = computed(() => {
             const lastAllEnergy = projectStore.lastAllEnergy;
-
+            //debugger;
             var lastObj = {
                 energySaving: lastAllEnergy.energySaving
                     ? lastAllEnergy.energySaving.toFixed(1)
@@ -71,11 +72,13 @@ export default defineComponent({
                     ? (lastAllEnergy.energyCompare * 100).toFixed(0)
                     : lastAllEnergy.energyCompare,
             };
+            allData.compareBase = lastAllEnergy.energyCompare * 100 + "%";
             return lastObj;
         });
         projectStore.$subscribe((mutation, state) => {
-            //debugger;
+            console.log("state", state);
             allData.widthBase = "100%";
+            //allData.compareBase = state.lastAllEnergy.energyCompare * 100 + "%";
         });
         onMounted(() => {
             projectStore.setLastAllEnergy();

+ 175 - 63
src/components/LastSaveEnergy.vue

@@ -48,6 +48,8 @@
                         height="300"
                     ></canvas>
                     <div class="outOval outOvalCo2">
+                        <div class="outCircle">
+                        </div>
                         <div class="inOval">
                         </div>
                         <img
@@ -63,6 +65,8 @@
                     </div>
 
                     <div class="outOval outOvalCarbon">
+                        <div class="outCircle">
+                        </div>
                         <div class="inOval">
                         </div>
                         <img
@@ -78,6 +82,8 @@
                     </div>
 
                     <div class="outOval outOvalTree">
+                        <div class="outCircle">
+                        </div>
                         <div class="inOval">
                         </div>
                         <img
@@ -142,36 +148,98 @@ export default defineComponent({
             videoLeft: 0,
         });
 
-        let uniformX = 200; // x 初始位置
+        let point1p = {}; // x 初始位置
+        let point2p = {}; // x 初始位置
+        let point3p = {}; // 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;
-            }
+            circtx.fillStyle = "#FFDEB4";
+            circtx.shadowOffsetX = 0;
+            circtx.shadowOffsetY = 0;
+            circtx.shadowColor = "#ffffff";
+            circtx.shadowBlur = 10;
+            drawCircle(circtx, 3); // 画圆,uniformX是 x 的坐标
+            getPath(
+                { x: handlePx(173), y: handlePx(173) },
+                { x: handlePx(110), y: handlePx(120) },
+                { x: handlePx(20), y: handlePx(120) }
+            );
+            point2p = getPath2(
+                point2p,
+                { x: handlePx(515), y: handlePx(150) },
+                { x: handlePx(590), y: handlePx(150) },
+                { x: handlePx(676), y: handlePx(50) }
+            );
+            point3p = getPath2(
+                point3p,
+                { x: handlePx(512), y: handlePx(210) },
+                { x: handlePx(670), y: handlePx(210) },
+                { x: handlePx(756), y: handlePx(250) }
+            );
         }
 
         // 画实体圆(小球)
-        function drawCircle(circtx, x, y, radius, color) {
+        function drawCircle(circtx, radius) {
             // circtx.save();
             circtx.beginPath();
-            circtx.arc(x, y, radius, 0, Math.PI * 2);
+            circtx.arc(point1p.x, point1p.y, radius, 0, Math.PI * 2);
+            circtx.closePath();
+            circtx.fill();
+            circtx.beginPath();
+            circtx.arc(point2p.x, point2p.y, radius, 0, Math.PI * 2);
+            circtx.closePath();
+            circtx.fill();
+            circtx.beginPath();
+            circtx.arc(point3p.x, point3p.y, radius, 0, Math.PI * 2);
             circtx.closePath();
             circtx.fill();
             // circtx.restore();
         }
-        function handleFont(num) {
+
+        function getPath(startp, middlep, endp) {
+            if (point1p.x > middlep.x && point1p.x <= startp.x) {
+                point1p.x = point1p.x - 1;
+                point1p.y =
+                    point1p.y -
+                    (1 * (middlep.y - startp.y)) / (middlep.x - startp.x);
+            }
+            if (point1p.x > endp.x && point1p.x <= middlep.x) {
+                point1p.x = point1p.x - 1;
+                point1p.y =
+                    point1p.y -
+                    (1 * (endp.y - middlep.y)) / (endp.x - middlep.x);
+            }
+            if (point1p.x == endp.x) {
+                point1p = startp;
+            }
+        }
+        function getPath2(pointp, startp, middlep, endp) {
+            if (pointp.x >= startp.x && pointp.x < middlep.x) {
+                pointp.x = pointp.x + 1;
+                pointp.y =
+                    pointp.y +
+                    (1 * (middlep.y - startp.y)) / (middlep.x - startp.x);
+            }
+            if (pointp.x < endp.x && pointp.x >= middlep.x) {
+                pointp.x = pointp.x + 1;
+                pointp.y =
+                    pointp.y +
+                    (1 * (endp.y - middlep.y)) / (endp.x - middlep.x);
+            }
+            if (pointp.x == endp.x) {
+                pointp = startp;
+            }
+            return pointp;
+        }
+        //px 转变成 rem
+        function handlePx(num) {
             let fontSize = getBodySize();
-            let handleNum = (num / 192) * fontSize;
-            return handleNum;
+            let handleNum = (num / 192) * fontSize; //px转成rem 再转成px
+            return Number(handleNum.toFixed(0));
         }
         onMounted(() => {
             nextTick(() => {
@@ -182,56 +250,44 @@ export default defineComponent({
 
                 allData.videoWidth = videoWidth;
                 allData.videoLeft = (contWidth - videoWidth) / 2;
-                // console.log(
-                //     "svideo",
-                //     svideo.value,
-                //     svideo.value.offsetWidth,
-                //     svideo.value.offsetHeight,
-                // );
 
                 var c = document.getElementById("co2Canvas");
-                c.setAttribute("width", handleFont(800) + "px");
-                c.setAttribute("height", handleFont(300) + "px");
-
+                c.setAttribute("width", handlePx(800) + "px");
+                c.setAttribute("height", handlePx(300) + "px");
                 var ctx = c.getContext("2d");
-
-                console.log(
-                    "sdsd",
-                    handleFont(676),
-                    handleFont(50),
-                    handleFont(590),
-                    handleFont(150),
-                    handleFont(515),
-                    handleFont(150)
-                );
-                ctx.moveTo(handleFont(20), handleFont(120));
-                ctx.lineTo(handleFont(110), handleFont(120));
-                ctx.lineTo(handleFont(173), handleFont(173));
+                ctx.moveTo(handlePx(20), handlePx(120));
+                ctx.lineTo(handlePx(110), handlePx(120));
+                ctx.lineTo(handlePx(173), handlePx(173));
                 ctx.lineWidth = 1;
                 ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
-                ctx.setLineDash([handleFont(2), handleFont(3)]);
+                ctx.setLineDash([handlePx(2), handlePx(3)]);
                 ctx.stroke();
                 ctx.beginPath();
-                ctx.moveTo(handleFont(676), handleFont(50));
-                ctx.lineTo(handleFont(590), handleFont(150));
-                ctx.lineTo(handleFont(515), handleFont(150));
+                ctx.moveTo(handlePx(676), handlePx(50));
+                ctx.lineTo(handlePx(590), handlePx(150));
+                ctx.lineTo(handlePx(515), handlePx(150));
                 ctx.lineWidth = 1;
                 ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
-                ctx.setLineDash([handleFont(2), handleFont(3)]);
+                ctx.setLineDash([handlePx(2), handlePx(3)]);
                 ctx.stroke();
 
                 ctx.beginPath();
-                ctx.moveTo(handleFont(756), handleFont(250));
-                ctx.lineTo(handleFont(670), handleFont(210));
-                ctx.lineTo(handleFont(512), handleFont(210));
+                ctx.moveTo(handlePx(756), handlePx(250));
+                ctx.lineTo(handlePx(670), handlePx(210));
+                ctx.lineTo(handlePx(512), handlePx(210));
                 ctx.lineWidth = 1;
                 ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
-                ctx.setLineDash([handleFont(2), handleFont(3)]);
+                ctx.setLineDash([handlePx(2), handlePx(3)]);
                 ctx.stroke();
 
                 var circ = document.getElementById("circleCanvas1");
+                // circ.setAttribute("width", handlePx(800) + "px");
+                // circ.setAttribute("height", handlePx(300) + "px");
                 var circtx = circ.getContext("2d");
-                // circleMove(circtx);
+                point1p = { x: handlePx(173), y: handlePx(173) };
+                point2p = { x: handlePx(515), y: handlePx(150) };
+                point3p = { x: handlePx(512), y: handlePx(210) };
+                circleMove(circtx);
             });
         });
 
@@ -302,35 +358,53 @@ export default defineComponent({
             .round1 {
                 position: absolute;
                 width: 275px;
-                left: 50%;
-                top: -68px;
-                transform: translate(-50%, -50%);
+                left: 0;
+                top: 0;
+                transform: translate(-50%, -112px);
+                //top: -60px;
+                //transform: translate(-50%, -50%);
+                animation: round1Move 2s linear infinite alternate;
+                -webkit-animation: round1Move 2s linear infinite alternate;
+                -webkit-backface-visibility: hidden;
+                -webkit-transform-style: preserve-3d;
             }
             .round2 {
                 position: absolute;
                 width: 275px;
-                left: 50%;
-                top: -46px;
-                transform: translate(-50%, -50%);
+                left: 0;
+                top: 0;
+                transform: translate(-50%, -100px);
+                //top: -40px;
+                //transform: translate(-50%, -50%);
+                animation: round2Move 2s linear infinite alternate;
+                -webkit-animation: round2Move 2s linear infinite alternate;
+                -webkit-backface-visibility: hidden;
+                -webkit-transform-style: preserve-3d;
             }
             .round3 {
                 position: absolute;
                 width: 295px;
-                left: 50%;
-                top: -25px;
-                transform: translate(-50%, -50%);
+                left: 0;
+                top: 0;
+                transform: translate(-50%, -60px);
+                //top: -20px;
+                //transform: translate(-50%, -50%);
+                animation: round3Move 2s linear infinite alternate;
+                -webkit-animation: round3Move 2s linear infinite alternate;
+                -webkit-backface-visibility: hidden;
+                -webkit-transform-style: preserve-3d;
             }
             .round4 {
                 position: absolute;
                 width: 340px;
-                left: 50%;
+                left: 0;
                 top: -10px;
                 transform: translate(-50%, -50%);
             }
             .round5 {
                 position: absolute;
                 width: 376px;
-                left: 50%;
+                left: 0;
                 top: 0px;
                 transform: translate(-50%, -50%);
             }
@@ -362,13 +436,21 @@ export default defineComponent({
         .outOval {
             width: 152px;
             height: 68px;
-            border: 1px dashed rgba(224, 194, 155, 0.26);
-            border-radius: 50%;
             position: absolute;
             display: flex;
             transform: translate(-50%, -50%);
-            animation: mycircle 3s linear infinite alternate;
-            -webkit-animation: mycircle 3s linear infinite alternate;
+            .outCircle {
+                width: 152px;
+                height: 68px;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                border: 1px dashed rgba(224, 194, 155, 0.26);
+                border-radius: 50%;
+                animation: mycircle 3s linear infinite;
+                -webkit-animation: mycircle 3s linear infinite;
+            }
             .inOval {
                 width: 112px;
                 height: 40px;
@@ -380,7 +462,7 @@ export default defineComponent({
                 font-size: 0;
                 width: 70px;
                 position: absolute;
-                top: 4px;
+                top: 6px;
                 left: 50%;
                 transform: translate(-50%, 0);
             }
@@ -419,7 +501,37 @@ export default defineComponent({
             to {
                 width: 200px;
                 height: 98px;
-                opacity: 0.3;
+                opacity: 0.6;
+            }
+        }
+        @keyframes round1Move {
+            from {
+                //top: -60px;
+                transform: translate(-50%, -112px);
+            }
+            to {
+                //top: -80px;
+                transform: translate(-50%, -140px);
+            }
+        }
+        @keyframes round2Move {
+            from {
+                //top: -40px;
+                transform: translate(-50%, -100px);
+            }
+            to {
+                //top: -56px;
+                transform: translate(-50%, -116px);
+            }
+        }
+        @keyframes round3Move {
+            from {
+                //top: -20px;
+                transform: translate(-50%, -60px);
+            }
+            to {
+                //top: -35px;
+                transform: translate(-50%, -75px);
             }
         }
         .outOvalCo2 {

+ 24 - 5
src/components/TemChart.vue

@@ -42,7 +42,7 @@ export default defineComponent({
         const { screenType } = props;
         const allData = reactive({});
         const tempChartRef = ref();
-        const cInitChart = (cdata) => {
+        const cInitChart = (cdata, minTemp, maxTemp) => {
             registerShape("point", "breath-point", {
                 draw(cfg, container) {
                     const data = cfg.data;
@@ -124,8 +124,8 @@ export default defineComponent({
             chart.scale("temp", {
                 type: "linear",
                 minTickInterval: 1,
-                min: 22,
-                //max: 25,
+                min: minTemp,
+                max: maxTemp,
                 //ticks:[22,23,24,25,26,27]
             });
             chart.axis("time", {
@@ -169,6 +169,14 @@ export default defineComponent({
 
             chart
                 .line()
+                .animate({
+                    appear: {
+                        //animation: "fade-in", // 动画名称
+                        easing: "easeQuadIn", // 动画缓动效果
+                        delay: 100, // 动画延迟执行时间
+                        duration: 1500, // 动画执行时间
+                    },
+                })
                 .position("time*temp")
                 .color("#F2E3CD")
                 .shape("smooth")
@@ -179,6 +187,14 @@ export default defineComponent({
 
             chart
                 .area()
+                .animate({
+                    appear: {
+                        //animation: "fade-in", // 动画名称
+                        easing: "easeQuadIn", // 动画缓动效果
+                        delay: 100, // 动画延迟执行时间
+                        duration: 1500, // 动画执行时间
+                    },
+                })
                 .position("time*temp")
                 .color(
                     "l(90) 0:rgba(237,217,190,0.8) 0.6:rgb(149, 162, 194, 0.01)"
@@ -234,6 +250,7 @@ export default defineComponent({
             queryIndoorTempList()
                 .then((res) => {
                     var cdata = res.data.data || [];
+                    var tempArr = [];
                     cdata.forEach((element) => {
                         var timestr = element.time || "";
                         var hour = timestr.substr(8, 2);
@@ -243,11 +260,13 @@ export default defineComponent({
                             element && element.temp
                                 ? Number(element.temp).toFixed(1)
                                 : element.temp;
+                        element.temp && tempArr.push(element.temp);
                     });
-
+                    var minTemp = Math.floor(Math.min(...tempArr));
+                    var maxTemp = Math.ceil(Math.max(...tempArr));
                     // debugger;
                     nextTick(() => {
-                        cInitChart(cdata);
+                        cInitChart(cdata, minTemp, maxTemp);
                     });
                 })
                 .catch((err) => {});

+ 8 - 0
src/components/airSwitchHor.vue

@@ -74,6 +74,14 @@ export default defineComponent({
             });
             const interval = chart
                 .interval()
+                .animate({
+                    appear: {
+                        //animation: "fade-in", // 动画名称
+                        easing: "easeQuadIn", // 动画缓动效果
+                        delay: 0, // 动画延迟执行时间
+                        duration: 1000, // 动画执行时间
+                    },
+                })
                 .adjust("stack")
                 .position("value")
                 .color("type", ["l(90) 0:#BFA17E 1:#E0D1BB", "#3C3F52"])

+ 5 - 2
src/components/lastEnergyChart.vue

@@ -58,7 +58,9 @@ export default defineComponent({
             getLastDayEnergy() {
                 queryLastDayEnergy().then((res) => {
                     var resdata = res.data.content || [];
-
+                    resdata.sort(function(a, b) {
+                        return a.date - b.date;
+                    });
                     resdata.forEach(function(item) {
                         var dateStr = item.date;
                         item.Date =
@@ -77,6 +79,7 @@ export default defineComponent({
                             ).toFixed(0)
                         );
                     });
+
                     allData.lastChart = allData.cInitChart(resdata);
                     //console.log("contx,contx", contx, contx.emit);
                     allData.setChartInterval();
@@ -193,7 +196,7 @@ export default defineComponent({
                     line: {
                         style: {
                             lineWidth: 1, // 设置线的宽度
-                            stroke: "rgba(224,194,155,0.2)", // 设置线的颜色
+                            stroke: "rgba(224,194,155,0.1)", // 设置线的颜色
                             lineDash: [3, 3], // 设置虚线样式
                         },
                     },

+ 1 - 1
src/utils/rem.ts

@@ -22,7 +22,7 @@ function getBodySize() {
     return fontSize;
 }
 function setRem() {
-    debugger;
+    //debugger;
     let fontSize = getBodySize();
     document.documentElement.style.fontSize = `${fontSize}px`;
 }