首页

src/views/Home/cells/CustomerAnalyse.vue

@@ -24,10 +24,19 @@ export default {
   name: "CustomerAnalyse",
   components: { CellHeaderVue },
   data() {
-    return {};
+    return {
+      echartInstance: null,
+    };
   },
   mounted() {
-    const echartInstance = echarts.init(document.getElementById("chart"));
+    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",
@@ -80,8 +89,12 @@ export default {
           },
         ],
       };
-    echartInstance.setOption(option);
+      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>