驾驶舱

src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue

@@ -7,9 +7,9 @@
 
 <template>
   <div class="double-ring-chart">
-    <div class="double-ring-chart__container">
-      <div ref="chart" style="height: 100%;"></div>
-    </div>
+    <!-- <div> -->
+      <div ref="chart" class="double-ring-chart__container"></div>
+    <!-- </div> -->
     <!-- style="{ height: vHeight + 'vh' }" -->
     <div class="double-ring-chart__legend">
       <div v-for="item in legendItems" :key="item.label" class="legend-item">
@@ -22,12 +22,12 @@
 
 <script>
 import chartMixin from "@/mixins/chart.js";
-import fullscreenMixin from "@/mixins/fullscreen.js";
+import screenfull from "screenfull";
 import getOptions from "../../../options/double-ring-chart-options";
 
 export default {
   name: "DoubleRingChart",
-  mixins: [chartMixin, fullscreenMixin],
+  mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -47,7 +47,9 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      isFullscreen: false,
+    };
   },
   filters: {
     numberFilter(val) {
@@ -111,18 +113,32 @@ export default {
     },
   },
   watch: {
+    isFullscreen(val) {
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 12;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initOptions(this.options)
+    },
     legendItems() {
       this.initOptions(this.options);
     },
   },
   mounted() {
     this.initOptions(this.options);
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
   },
   methods: {
     // fullscreen mixin 需要的回调
-    fullscreenCallback(isFullscreen) {
-      console.log("isFullscreen--->", isFullscreen);
-    },
+    // fullscreenCallback(isFullscreen) {
+    //   console.log("isFullscreen--->", isFullscreen);
+    // },
   },
 };
 
@@ -171,7 +187,7 @@ function calculateItems(period, valueTuple) {
 }
 
 .double-ring-chart__container {
-  flex:1;
+  flex:1 1 auto;
   padding: 0 10%;
   /* margin: 10%; */
   /* min-width: 300px; */

src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: DoubleRingWrapper.vue
     author: liubin
     date: 2024-04-17 09:55:12
-    description: 
+    description:
 -->
 
 <template>