From 01828a12aefacd8730ad25215926994081560b6f Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Thu, 16 Jun 2022 14:48:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/u-container-layout/index.vue |  14 ++-
 src/layout/components/AppMain.vue           |   4 +-
 src/layout/index.vue                        |   2 +
 src/router/modules/charts.ts                |  12 +-
 src/views/charts/complex.vue                | 130 ++------------------
 src/views/charts/image/1-1-bg.png           | Bin 0 -> 5970 bytes
 src/views/charts/migration.vue              |   3 +
 7 files changed, 33 insertions(+), 132 deletions(-)
 create mode 100644 src/views/charts/image/1-1-bg.png

diff --git a/src/components/u-container-layout/index.vue b/src/components/u-container-layout/index.vue
index f196deb..f47452d 100644
--- a/src/components/u-container-layout/index.vue
+++ b/src/components/u-container-layout/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="m-container-layout">
-    <slot></slot>
+    <div class="m-container-layout-inner">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -10,8 +12,14 @@
 
 <style lang="scss" scoped>
   .m-container-layout{
-    margin: 20px;
+    //margin: 20px;
     padding: 20px;
-    background: white;
+    box-sizing: border-box;
+
+    .m-container-layout-inner{
+      background: white;
+      padding: 20px;
+      background: white;
+    }
   }
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 7305837..6d7e2d4 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -35,7 +35,9 @@ const isReload = computed(() => {
     //overflow: auto;
     //flex: 1;
     //overflow: auto;
-      overflow: hidden;
+    overflow-x: hidden;
+    height: 100%;
+    width: 100%;
     box-sizing: border-box;
     //padding-top: 70px;
     //  background: white;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ded73ae..da2d311 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -101,6 +101,8 @@
     //padding: 20px;
     /*background: #f6f8f9;*/
     padding-top: 93px;
+    box-sizing: border-box;
+    height: 100vh;
     position: relative;
   }
   .app-main-hide-tag{
diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
index e041c81..a4db034 100644
--- a/src/router/modules/charts.ts
+++ b/src/router/modules/charts.ts
@@ -31,12 +31,12 @@ const chartsRouter = {
             name: 'charts-simple',
             meta: { title: '简单图表', roles:['other'] }
         },
-        // {
-        //     path: 'complex',
-        //     component: () => import('@/views/charts/complex.vue'),
-        //     name: 'charts-complex',
-        //     meta: { title: '复杂图表', roles:['other'] }
-        // },
+        {
+            path: 'complex',
+            component: () => import('@/views/charts/complex.vue'),
+            name: 'charts-complex',
+            meta: { title: '复杂图表', roles:['other'] }
+        },
     ]
 }
 
diff --git a/src/views/charts/complex.vue b/src/views/charts/complex.vue
index ae0a2dd..4b96b71 100644
--- a/src/views/charts/complex.vue
+++ b/src/views/charts/complex.vue
@@ -1,130 +1,16 @@
 <template>
-  <div style="width: 100%;">
-    <el-row class="row-bg" :gutter="10">
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>水滴图</span>
-          </div>
-        </template>
-        <liquid-fill-charts height="200px" width="100%" id="liquidFill"/>
-      </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>柱状图</span>
-          </div>
-        </template>
-        <histogram-charts height="200px" width="100%" id="Histogram"/>
-      </el-card></el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>折线图</span>
-            </div>
-          </template>
-          <line-charts height="200px" width="100%" id="lineS"/>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>设备数</span>
-            </div>
-          </template>
-          <pie-charts height="200px" width="100%" id="pieS"/>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>圆环进度条</span>
-            </div>
-          </template>
-          <progress-charts height="200px" width="100%" id="progress"/>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>漏斗图</span>
-            </div>
-          </template>
-          <rotate-charts height="200px" width="100%" id="rotate"/>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>牛气冲天</span>
-            </div>
-          </template>
-          <bullish-charts height="200px" width="100%" id="bullish"/>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>雷达图</span>
-            </div>
-          </template>
-          <painting-charts height="200px" width="100%" id="painting"/>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>桑基图</span>
-            </div>
-          </template>
-          <sankey-charts height="200px" width="100%" id="sankey"/>
-        </el-card>
-      </el-col>
-    </el-row>
-
-
+  <div class="m-complex">
 
   </div>
 </template>
 <script setup lang="ts">
-  import LiquidFillCharts from './components/complex/liquidFill.vue'
-  import HistogramCharts from './components/complex/Histogram.vue'
-  import LineCharts from './components/complex/line.vue'
-  import PieCharts from './components/complex/pie.vue'
-  import ProgressCharts from './components/complex/progress.vue'
-  import RotateCharts from './components/complex/rotate.vue'
-  import BullishCharts from './components/complex/bullish.vue'
-  import PaintingCharts from './components/complex/painting.vue'
-  import SankeyCharts from './components/complex/sankey.vue'
+
 
 </script>
-<style>
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.text {
-  font-size: 14px;
-}
-
-.item {
-  margin-bottom: 18px;
-}
-
-.box-card {
-  margin-bottom: 10px;
-  width: 100%;
-}
+<style lang="scss" scoped>
+  .m-complex{
+    height: 100%;
+    width: 100%;
+    background-color: #030409;
+  }
 </style>
diff --git a/src/views/charts/image/1-1-bg.png b/src/views/charts/image/1-1-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b42a582a54b5f3a34516aea7bd72b544f2cf7c2
GIT binary patch
literal 5970
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

literal 0
HcmV?d00001

diff --git a/src/views/charts/migration.vue b/src/views/charts/migration.vue
index 3a68bf8..dc1d68c 100644
--- a/src/views/charts/migration.vue
+++ b/src/views/charts/migration.vue
@@ -12,6 +12,9 @@ import MigrationCharts from './components/migration/index.vue'
 
 <style lang="scss" scoped>
 .echarts-map{
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
   height: calc(100vh - 93px);
   position: relative;
   .info{