Merge branch 'dev_1.0.1' of http://git.qmth.com.cn/sop/web into dev_1.0.1

src/hooks/useFullscreen.js

@@ -1,6 +1,5 @@
 import { useAppStore } from '@/store';
 import { MessagePlugin } from 'tdesign-vue-next';
-import { onMounted } from 'vue';
 
 export default function () {
   const appStore = useAppStore();
@@ -35,9 +34,7 @@ export default function () {
       document.webkitCancelFullScreen;
 
     if (appStore.isFullscreen) {
-      await exitFullscreen.call(document).catch((err) => {
-        console.log(err);
-      });
+      await exitFullscreen.call(document).catch(() => {});
     } else {
       await requestFullscreen.call(de).catch(() => {});
     }
@@ -65,14 +62,12 @@ export default function () {
         switchFullscreen();
       }
     });
-  }
 
-  onMounted(() => {
-    registFullscreenChange();
     appStore.setIsFullScreen(checkDocIsFullscreen());
-  });
+  }
 
   return {
     switchFullscreen,
+    registFullscreenChange,
   };
 }

src/layout/index.vue

@@ -80,7 +80,7 @@ import LeftMenu from './left-menu.vue';
 import { moduleMap } from '@/router/asyncRoutes';
 import { MessagePlugin } from 'tdesign-vue-next';
 import useFullscreen from '@/hooks/useFullscreen';
-useFullscreen();
+const { registFullscreenChange } = useFullscreen();
 
 const router = useRouter();
 const route = useRoute();
@@ -104,6 +104,7 @@ const setModuleByPath = () => {
 };
 onMounted(() => {
   setModuleByPath();
+  registFullscreenChange();
 });
 
 const clickHandler = (data) => {

src/views/report/quality-analysis/index.vue

@@ -51,52 +51,48 @@
           </div>
         </div>
         <div class="col2-body">
-          <div class="col2-row">
-            <div class="card">
-              <div class="title">
-                <span class="label">影响度供应商分布及对比</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result11" :options="options11"></my-chart>
-              </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">影响度供应商分布及对比</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
+            </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result11" :options="options11"></my-chart>
+            </div>
+          </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">执行协调类归因供应商分布及对比</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
+            </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result12" :options="options12"></my-chart>
+            </div>
+          </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">影响度大区分布及对比TOP5</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
             </div>
-            <div class="card">
-              <div class="title">
-                <span class="label">执行协调类归因供应商分布及对比</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result12" :options="options12"></my-chart>
-              </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result21" :options="options21"></my-chart>
             </div>
           </div>
-          <div class="col2-row">
-            <div class="card">
-              <div class="title">
-                <span class="label">影响度大区分布及对比TOP5</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result21" :options="options21"></my-chart>
-              </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">执行协调类归因大区分布及对比TOP5</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
             </div>
-            <div class="card">
-              <div class="title">
-                <span class="label">执行协调类归因大区分布及对比TOP5</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result22" :options="options22"></my-chart>
-              </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result22" :options="options22"></my-chart>
             </div>
           </div>
         </div>
@@ -331,31 +327,32 @@ const options22 = computed(() => {
     }
     .col2 {
       flex-grow: 2;
-      display: flex;
-      flex-direction: column;
-
       .col2-head {
-        flex-grow: 0;
-        flex-shrink: 0;
         height: 85px;
+        margin-bottom: 16px;
       }
       .col2-body {
-        height: calc(100% - 85px);
-      }
-
-      .col2-row {
-        padding-top: 16px;
-        display: flex;
-        justify-content: stretch;
-        height: 50%;
-
+        height: calc(100% - 85px - 16px);
+        position: relative;
         .card {
+          position: absolute;
           width: calc(50% - 8px);
-          &:first-child {
-            margin-right: 8px;
+          height: calc(50% - 8px);
+          &:nth-of-type(1) {
+            top: 0;
+            left: 0;
+          }
+          &:nth-of-type(2) {
+            top: 0;
+            right: 0;
+          }
+          &:nth-of-type(3) {
+            bottom: 0;
+            left: 0;
           }
-          &:last-child {
-            margin-left: 8px;
+          &:nth-of-type(4) {
+            bottom: 0;
+            right: 0;
           }
         }
       }