首页

src/views/Home/cells/CustomerAnalyse.vue

@@ -24,64 +24,77 @@ export default {
   name: "CustomerAnalyse",
   components: { CellHeaderVue },
   data() {
-    return {};
+    return {
+      echartInstance: null,
+    };
   },
   mounted() {
-    const echartInstance = echarts.init(document.getElementById("chart"));
-    const option = {
-      title: {
-        // text: "Test Demo",
-      },
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
+    this.echartInstance = echarts.init(document.getElementById("chart"));
+    this.loadCharts()
+    this.loadChartsBind = this.loadCharts.bind(this)
+    window.addEventListener('resize', this.loadChartsBind)
+  },
+  methods: {
+    loadCharts() {
+      this.echartInstance.clear()
+      const option = {
+        title: {
+          // text: "Test Demo",
         },
-      },
-      legend: {
-        bottom: "2%",
-      },
-      grid: {
-        left: "1%",
-        right: "6%",
-        top: "1%",
-        containLabel: true,
-      },
-      xAxis: {
-        type: "value",
-        boundaryGap: [0, 0.01],
-      },
-      yAxis: {
-        type: "category",
-        data: [
-          "海康威视",
-          "春晖指控",
-          "苏奥传感",
-          "东方财富",
-          "隆基股份",
-          "贵州茅台",
-        ],
-      },
-      series: [
-        {
-          name: "业务量（万美元）",
-          type: "bar",
-          data: [18203, 23489, 29034, 104970, 131744, 230230],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
         },
-        {
-          name: "融资量（万美元）",
-          type: "bar",
-          data: [19325, 23438, 31000, 121594, 134141, 381807],
+        legend: {
+          bottom: "2%",
         },
-        {
-          name: "费用收益（千美元）",
-          type: "bar",
-          data: [49325, 53438, 11000, 221594, 43241, 455807],
+        grid: {
+          left: "1%",
+          right: "6%",
+          top: "1%",
+          containLabel: true,
         },
-      ],
-    };
-    echartInstance.setOption(option);
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "海康威视",
+            "春晖指控",
+            "苏奥传感",
+            "东方财富",
+            "隆基股份",
+            "贵州茅台",
+          ],
+        },
+        series: [
+          {
+            name: "业务量（万美元）",
+            type: "bar",
+            data: [18203, 23489, 29034, 104970, 131744, 230230],
+          },
+          {
+            name: "融资量（万美元）",
+            type: "bar",
+            data: [19325, 23438, 31000, 121594, 134141, 381807],
+          },
+          {
+            name: "费用收益（千美元）",
+            type: "bar",
+            data: [49325, 53438, 11000, 221594, 43241, 455807],
+          },
+        ],
+      };
+      this.echartInstance.setOption(option);
+    },
   },
+  destroyed() {
+    window.removeEventListener('resize', this.loadChartsBind)
+  }
 };
 </script>
 

src/views/Home/cells/NoticeAnnouncement.vue

@@ -4,7 +4,8 @@
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
     </CellHeaderVue>
-    <c-content :height="cellScrollHeight">
+
+    <el-scrollbar :style="{ height: scrollbarHeight + 'px' }">
       <div class="cell-content">
         <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
           <div class="notice-title" :class="{ active: idx === 0 }">
@@ -17,7 +18,7 @@
           </div>
         </div>
       </div>
-    </c-content>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -33,6 +34,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    scrollbarHeight() {
+      return window.document.body.clientHeight - this.cellScrollHeight;
+    },
+  },
   data() {
     return {
       noticeList: [

src/views/Home/cells/QuickSearch.vue

 <template>
   <div class="home-cell" id="quickSearch">
     <CellHeaderVue title="快速查询"> </CellHeaderVue>
-    <c-content :height="cellScrollHeight">
+    
+    <el-scrollbar :style="{ height: scrollbarHeight + 'px' }">
       <div class="cell-content">
         <div
           class="content-wrapper"
           v-for="(item, index) in options"
           :key="index"
-          :style="{ height: wrapperHeight + 'px' }"
+          :style="{ height: Math.floor(scrollbarHeight * 0.3) + 'px' }"
         >
           <div class="search-item-wrapper">
             <div class="search-item">
@@ -18,7 +19,7 @@
           </div>
         </div>
       </div>
-    </c-content>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -35,10 +36,8 @@ export default {
     },
   },
   computed: {
-    wrapperHeight() {
-      return Math.floor(
-        (window.document.body.clientHeight - this.cellScrollHeight) * 0.3
-      );
+    scrollbarHeight() {
+      return window.document.body.clientHeight - this.cellScrollHeight;
     },
   },
   data() {

src/views/Home/cells/QuickVisit.vue

@@ -2,13 +2,13 @@
   <div class="home-cell" id="quickVisit">
     <CellHeaderVue title="快速访问"> </CellHeaderVue>
 
-    <c-content :height="cellScrollHeight">
+    <el-scrollbar :style="{ height: scrollbarHeight + 'px' }">
       <div class="cell-content">
         <div
           class="content-wrapper"
           v-for="(item, index) in quickVisitItem"
           :key="index"
-          :style="{ height: wrapperHeight + 'px' }"
+          :style="{ height: Math.floor(scrollbarHeight * 0.3) + 'px' }"
         >
           <div class="visit-item-wrapper">
             <div class="visit-item">
@@ -19,7 +19,7 @@
           </div>
         </div>
       </div>
-    </c-content>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -36,10 +36,8 @@ export default {
     },
   },
   computed: {
-    wrapperHeight() {
-      return Math.floor(
-        (window.document.body.clientHeight - this.cellScrollHeight) * 0.3
-      );
+    scrollbarHeight() {
+      return window.document.body.clientHeight - this.cellScrollHeight;
     },
   },
   data() {

src/views/Home/index.vue

@@ -28,15 +28,23 @@ export default {
     QuickSearchVue,
   },
   created() {
-    this.cellScrollHeight =
-      window.document.body.clientHeight -
-      (window.document.body.clientHeight - 110 - 52 * 2 - 10) / 2;
+    this.calcCellScrollHeight();
+    this.calcCellScrollHeightBind = this.calcCellScrollHeight.bind(this)
+    window.addEventListener("resize", this.calcCellScrollHeightBind)
   },
   data() {
     return {
       cellScrollHeight: null,
     };
   },
+  methods: {
+    calcCellScrollHeight() {
+      this.cellScrollHeight = window.document.body.clientHeight - (window.document.body.clientHeight - 110 - 52 * 2 - 10) / 2;
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.calcCellScrollHeightBind)
+  }
 };
 </script>
 
@@ -62,4 +70,8 @@ export default {
   height: calc(100% - 52px);
   overflow: auto;
 }
+.home-cell >>> .el-scrollbar__wrap{
+  overflow-y: scroll;
+	overflow-x: auto;
+}
 </style>