最大化

src/utils/fullscreen.js

@@ -0,0 +1,30 @@
+// 进入全屏
+export const requestFullscreen = (element) => {
+  if (element.requestFullscreen) {
+    element.requestFullscreen()
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen()
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen()
+  }
+}
+
+// 退出全屏
+export const exitFullscreen = () => {
+  if (document.exitFullscreen) {
+    document.exitFullscreen()
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen()
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen()
+  }
+}
+
+// 检测全屏状态
+export const isFullscreen = () => {
+  return !!(
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.msFullscreenElement
+  )
+}

src/views/dataChart/privateChart/privateChartEdit.vue

@@ -16,8 +16,11 @@
                 <m-button type="orange" size="small" @click="onSave" :disabled="empty">保存图表</m-button>
               </div>
             </m-card>
-            <m-card shadow="never" class="box-main-bottom" :bodyStyle="{ height: '100%', 'box-sizing': 'border-box' }">
+            <m-card ref="privateChartEditShowCardsRefs" shadow="never" class="box-main-bottom" :bodyStyle="{ height: '100%', 'box-sizing': 'border-box', position: 'relative' }">
               <m-empty v-if="empty"></m-empty>
+              <div v-else class="box-main-bottom-tool">
+                <span :class="`mdi mdi-fullscreen${tool.fullscreen ? '-exit' : ''}`" @click="onSetFullscreen"></span>
+              </div>
               <PrivateChartEditShow
                 ref="privateChartEditShowRefs"
                 class="fullscreen"
@@ -41,6 +44,10 @@
 import PrivateChartEditShow from './privateChartEditShow.vue'
 import PrivateChartEditType from './privateChartEditType.vue'
 import PrivateChartEditParams from './privateChartEditParams.vue'
+import {
+  requestFullscreen,
+  exitFullscreen
+} from '@/utils/fullscreen'
 import {
   getWebSetting,
   saveWebSetting
@@ -54,6 +61,9 @@ export default {
   },
   data () {
     return {
+      tool: {
+        fullscreen: false
+      },
       loading: false,
       empty: false,
       key: null,
@@ -97,6 +107,14 @@ export default {
         this.loading = false
       }
     },
+    onSetFullscreen () {
+      this.tool.fullscreen = !this.tool.fullscreen
+      const $el = this.$refs.privateChartEditShowCardsRefs.$el
+      if (this.tool.fullscreen) {
+        return requestFullscreen($el)
+      }
+      exitFullscreen($el)
+    },
     setData () {
       this.empty = false
       this.$refs.privateChartEditShowRefs.setData(this.data, this.key, this.option)
@@ -156,7 +174,7 @@ export default {
   box-sizing: border-box;
 }
 .box {
-  $left: 146px;
+  $left: 100px;
   $right: 650px;
   box-sizing: border-box;
   &-left {
@@ -174,6 +192,25 @@ export default {
     }
     &-bottom {
       height: calc(100% - 84px);
+      &-tool {
+        position: absolute;
+        right: 24px;
+        font-size: 24px;
+        z-index: 9;
+        span {
+          border: 1px solid #ddd;
+          background: rgba(255, 255, 255, 0.5);
+          color: #666;
+          width: 30px;
+          height: 30px;
+          // display: inline-block;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          cursor: pointer;
+        }
+      }
     }
   }
   &-right {

src/views/dataChart/privateChart/privateChartEditType.vue

@@ -42,8 +42,9 @@ export default {
   box-sizing: border-box;
 }
 .chart-type {
-  width: 100px;
-  height: 100px;
+  width: 100%;
+  height: 60px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -53,7 +54,7 @@ export default {
   border-radius: 5px;
   cursor: pointer;
   .mdi {
-    font-size: 30px;
+    font-size: 24px;
   }
   &:hover {
     background-color: #f5f5f5;

src/views/dataChart/utils/options.js

@@ -80,3 +80,27 @@ export const pie = {
     ]
   }
 }
+
+// // 散点
+// export const scatter = {
+//   title: '散点图',
+//   icon: 'mdi-chart-bubble',
+//   option: {
+//     legend: {
+//       show: true
+//     },
+//     xAxis: {
+//       type: 'category',
+//       data: []
+//     },
+//     yAxis: {
+//       type: 'value'
+//     },
+//     series: [
+//       {
+//         data: [],
+//         type: 'scatter'
+//       }
+//     ]
+//   }
+// }