Bläddra i källkod

fix:chart修改

zhaojijng 2 år sedan
förälder
incheckning
82ffb0d536

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 22 - 22
dist/sgdaping/assets/background.1ea30497.js


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 1
dist/sgdaping/assets/background.18b27d57.css


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 1
dist/sgdaping/assets/index.98b9fee7.js


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 2 - 2
dist/sgdaping/assets/index.af3063de.js


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 1
dist/sgdaping/assets/index.5109dc7c.css


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 0
dist/sgdaping/assets/index.5f21a5cd.css


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 0
dist/sgdaping/assets/index.cc4ff5fd.css


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

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

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 1
dist/sgdaping/assets/index.cf235e89.js


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 1
dist/sgdaping/assets/index.f85ec0c6.css


BIN
dist/sgdaping/assets/saveEnergy.bfe3145a.mov


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

BIN
src/assets/image/horImg/saveEnergy.mov


dist/sgdaping/assets/saveEnergy.5cc0e925.mov → src/assets/image/horImg/saveEnergy2.mov


+ 30 - 18
src/components/LastSaveEnergy.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="lastMonth"
-        :class="[screenType === 'hor' ? 'horizontalClass ' : 'verSaveClass']"
+        :class="[screenType === 'hor' ? 'horSaveClass ' : 'verSaveClass']"
     >
         <div class="lastMonthCont">
             <div class="subhead-title">
@@ -11,10 +11,7 @@
                 class="saveCont"
                 ref="saveCont"
             >
-                <div
-                    class="videoWrap"
-                    :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
-                >
+                <div class="videoWrap">
                     <div class="co2Wrap sco2">
                         减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO2
                     </div>
@@ -81,6 +78,7 @@ export default defineComponent({
 
         onMounted(() => {
             nextTick(() => {
+                //videoWrap  :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
                 let videoheight = svideo.value.offsetHeight;
                 let videoWidth = (videoheight / 692) * 2116;
                 let contWidth = saveCont.value.offsetWidth;
@@ -131,11 +129,6 @@ export default defineComponent({
     height: 100%;
     .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);
@@ -148,7 +141,8 @@ export default defineComponent({
         color: #f7e6cd;
         position: relative;
         .svideo {
-            height: 100%;
+            //height: 100%;
+            width: 100%;
         }
         .videoWrap {
             position: absolute;
@@ -175,21 +169,21 @@ export default defineComponent({
             }
         }
         .sco2 {
-            top: 20%;
+            top: 16%;
             //top: 62px;
-            left: 7%;
+            left: 5%;
         }
         .scarbon {
-            top: 0%;
-            right: 16%;
+            top: -3%;
+            right: 14%;
         }
         .stree {
-            top: 56%;
-            right: 5%;
+            top: 52%;
+            right: 4%;
         }
         .electWrap {
             position: absolute;
-            top: 27%;
+            top: 21%;
             left: 32%;
             width: 28%;
             font-size: 30px;
@@ -209,10 +203,28 @@ export default defineComponent({
         }
     }
 }
+.horSaveClass {
+    background: rgba(100, 108, 130, 0.06);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    overflow: hidden;
+
+    .subhead-title {
+        padding-left: 32px;
+    }
+}
 .verSaveClass {
     //height: 600px;
     box-sizing: border-box;
     height: 42%;
     padding: 28px 0;
+    .lastMonthCont {
+        background: rgba(100, 108, 130, 0.06);
+        backdrop-filter: blur(20px);
+        border-radius: 20px;
+        // padding: 0 36px 40px;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
 }
 </style>

+ 18 - 2
src/components/airSwitchHor.vue

@@ -12,7 +12,15 @@
     </div>
 </template>
 <script lang="ts">
-import { ref, defineComponent, reactive, toRefs, onMounted, watch } from "vue";
+import {
+    ref,
+    defineComponent,
+    reactive,
+    toRefs,
+    onMounted,
+    watch,
+    onUnmounted,
+} from "vue";
 import useAirSwitch from "@/utils/useAirSwitch";
 import { Chart } from "@antv/g2";
 
@@ -33,11 +41,19 @@ export default defineComponent({
         });
         watch(airValue, (newValue, oldValue) => {
             initChart();
+             console.log("allData.watch" );
+        });
+        onUnmounted(() => {
+            if (allData.achart) {
+                allData.achart.destroy();
+                console.log("allData.achart222", allData.achart);
+            }
         });
-
         const initChart = () => {
             if (allData.achart) {
                 allData.achart.destroy();
+                console.log("allData.achart", allData.achart);
+                allData.achart = null;
             }
             var avalue = airValue.value || 0;
             const data = [

+ 28 - 32
src/components/lastEnergyChart.vue

@@ -51,7 +51,6 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-        //debugger;
         const lastChartBox = ref();
         const allData = reactive({
             lastChart: null,
@@ -59,7 +58,7 @@ export default defineComponent({
             getLastDayEnergy() {
                 queryLastDayEnergy().then((res) => {
                     var resdata = res.data.content || [];
-                    //debugger;
+
                     resdata.forEach(function(item) {
                         var dateStr = item.date;
                         item.Date =
@@ -79,7 +78,7 @@ export default defineComponent({
                         );
                     });
                     allData.lastChart = allData.cInitChart(resdata);
-                    console.log("contx,contx", contx, contx.emit);
+                    //console.log("contx,contx", contx, contx.emit);
                     allData.setChartInterval();
                 });
             },
@@ -106,23 +105,16 @@ export default defineComponent({
                             "lastend",
                             end.format("YYYY-MM-DD")
                         );
+                        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;
+                        //     allData.lastChart.changeData(rows);
+                        //     // allData.lastChart.render(true);
+                        // });
 
-                        allData.ds.on("statechange", (name, value) => {
-                            const rows = allData.ds.views.bar.rows;
-                            allData.lastChart.changeData(rows);
-                            // allData.lastChart.render(true);
-                            // console.log(
-                            //     "end--22",
-                            //     ds.views,
-                            //     ds.views.bar.rows,
-                            //     rows
-                            // );
-                        });
-
-                        if (
-                            end.format("YYYY-MM-DD") ==
-                            end2.endOf("month").format("YYYY-MM-DD")
-                        ) {
+                        if (rows.length == 11) {
                             clearInterval(intervalInt);
                             contx.emit("donethreepage");
                         }
@@ -136,6 +128,7 @@ export default defineComponent({
                 } else {
                     var end = cdata[11] && cdata[11].Date;
                 }
+                // 指定初始化状态量
                 let ds = new DataSet({
                     state: {
                         laststart: cdata[0] && cdata[0].Date,
@@ -145,8 +138,8 @@ export default defineComponent({
                 // var dv = new DataSet.DataView(ds, {
                 //     watchingStates: [],
                 // });
-                var dv = ds.createView("bar", {
-                    watchingStates: ["laststart", "lastend"],
+                var dv = ds.createView("ttime", {
+                    // watchingStates: ["laststart", "lastend"],
                 });
                 dv.source(cdata).transform({
                     type: "filter",
@@ -162,7 +155,7 @@ export default defineComponent({
                 //console.log("dv.row", dv.rows, dv.transforms);
                 var width =
                     document.getElementsByTagName("body")[0].offsetWidth - 80;
-                console.log("lastChartBox", lastChartBox.value);
+
                 var chart =
                     lastChartBox.value &&
                     new Chart({
@@ -172,17 +165,20 @@ export default defineComponent({
                         // height: props.screenType === "hor" ? 274 : 330,
                         padding: [20, 20, 36, 20],
                     });
+
                 if (!chart) return chart;
-                chart.data(dv.rows); //这个赋值是升级后的 方式
-                chart.tooltip(false);
-                chart.scale("Date", {
+
+                const chartView = chart.createView();
+                chartView.data(dv.rows); //这个赋值是升级后的 方式
+                chartView.tooltip(false);
+                chartView.scale("Date", {
                     //range: [0, 1],
-                    tickCount: 12,
-                    //tickInterval:0,
+                    //tickCount: 12,
+                    tickInterval: 2,
                     type: "timeCat",
                     mask: "MM-DD",
                 });
-                chart.scale("value", {
+                chartView.scale("value", {
                     //range: [0, 1],
                     tickCount: 5,
                     type: "linear",
@@ -190,7 +186,7 @@ export default defineComponent({
                     //tickInterval
                     // type: 'timeCat'
                 });
-                chart.axis("Date", {
+                chartView.axis("Date", {
                     line: {
                         style: {
                             lineWidth: 1, // 设置线的宽度
@@ -206,7 +202,7 @@ export default defineComponent({
                     },
                     tickLine: null,
                 });
-                chart.axis("value", {
+                chartView.axis("value", {
                     line: null,
                     grid: {
                         line: {
@@ -221,9 +217,9 @@ export default defineComponent({
                     label: null,
                 });
 
-                chart.legend(false);
+                chartView.legend(false);
 
-                chart
+                chartView
                     .interval()
                     .position("Date*value")
                     .color("l(90) 0:#BFA17E 1:#E0D1BB")

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

@@ -225,7 +225,7 @@ export default {
 }
 .threeScreen {
     .topCont {
-        height: 50%;
+        height: 56%;
         .threeLeft {
             position: relative;
             height: 100%;
@@ -253,7 +253,7 @@ export default {
         }
     }
     .bottomCont {
-        height: 50%;
+        height: 44%;
         padding-top: 24px;
         box-sizing: border-box;
     }

+ 0 - 3
src/views/verScreen/index.vue

@@ -98,9 +98,6 @@ export default defineComponent({
             timePageShow() {
                 var timeoutsign = setTimeout(() => {
                     allData.nowPage = allData.nowPage + 1;
-                    // if (allData.nowPage == 4) {
-                    //     allData.nowPage = 1;
-                    // }
                 }, 6000);
             },
         });