完善首页小组件

src/views/Home/cells/CustomerAnalyse.vue

 <template>
-  <CellWrapper title="大客户分析">
+  <CellWrapper title="大客户分析" :cellContentHeight="cellContentHeight">
     <template v-slot:header>
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
     </template>
 
-    <div class="content">
+    <div class="chart-container">
       <div class="chart-operate">
         <i class="el-icon-arrow-up"></i>
         <i class="el-icon-arrow-down"></i>
@@ -23,6 +23,7 @@ import * as echarts from "echarts";
 
 export default {
   name: "CustomerAnalyse",
+  props: ["cellContentHeight"],
   components: { CellWrapper },
   data() {
     return {
@@ -30,14 +31,20 @@ export default {
     };
   },
   mounted() {
-    this.echartInstance = echarts.init(this.$el.querySelector('.content .chartWrapper .chart'));
-    this.loadCharts();
-    this.loadChartsBind = this.loadCharts.bind(this);
-    window.addEventListener("resize", this.loadChartsBind);
+    this.$nextTick(() => {
+      this.loadCharts();
+      this.loadChartsBind = this.loadCharts.bind(this);
+      window.addEventListener("resize", this.loadChartsBind);
+    });
   },
   methods: {
     loadCharts() {
-      this.echartInstance.clear();
+      if (this.echartInstance) {
+        this.echartInstance.dispose();
+      }
+      this.echartInstance = echarts.init(
+        this.$el.querySelector(".chart-container .chartWrapper .chart")
+      );
       const option = {
         title: {
           // text: "Test Demo",
@@ -100,7 +107,8 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.chart-container {
+  height: 100%;
   display: flex;
   flex-direction: column;
   padding: 0 5px;

src/views/Home/cells/Hall.vue

 <template>
-  <CellWrapper title="电子大厅">
+  <CellWrapper title="电子大厅" :cellContentHeight="cellContentHeight">
     <template v-slot:header>
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
     </template>
 
-    <div class="content">
+    <div class="card-wrapper">
       <div class="card-item" v-for="(item, idx) in itemList" :key="idx">
         <div class="dept-name">
           <div
@@ -34,6 +34,7 @@ import CellWrapper from "../common/CellWrapper.vue";
 
 export default {
   name: "Hall",
+  props: ['cellContentHeight'],
   components: { CellWrapper },
   data() {
     return {
@@ -65,7 +66,8 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.card-wrapper {
+  height: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;

src/views/Home/cells/NoticeAnnouncement.vue

 <template>
-  <CellWrapper title="通知公告">
+  <CellWrapper title="通知公告" :cellContentHeight="cellContentHeight">
     <template v-slot:header>
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
     </template>
 
-    <div class="content">
-      <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
+    <div class="notice-container">
+      <el-scrollbar style="height: 100%;">
         <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
           <div class="notice-title" :class="{ active: idx === 0 }">
             <a :href="item.url" target="_blank" rel="noopener noreferrer">
@@ -27,13 +27,8 @@ import CellWrapper from "../common/CellWrapper.vue";
 
 export default {
   name: "NoticeAnnouncement",
+  props: ['cellContentHeight'],
   components: { CellWrapper },
-  props: {
-    cellScrollHeight: {
-      type: Number,
-      required: true,
-    },
-  },
   data() {
     return {
       noticeList: [],
@@ -103,6 +98,21 @@ export default {
           url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
           date: "2021-07-20",
         },
+        {
+          title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
+          url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
+          date: "2021-07-20",
+        },
+        {
+          title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
+          url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
+          date: "2021-07-20",
+        },
+        {
+          title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
+          url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
+          date: "2021-07-20",
+        },
       ],
     };
   },
@@ -121,7 +131,8 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.notice-container {
+  height: 100%;
   margin: 0 20px;
   box-sizing: border-box;
 }

src/views/Home/cells/QuickSearch.vue

 <template>
-  <CellWrapper title="快速查询">
+  <CellWrapper title="快速查询" :cellContentHeight="cellContentHeight">
     <template v-slot:header>
       <span class="el-icon-setting" title="设置" @click="openSetting"></span>
     </template>
 
-    <div class="content">
-      <quick
-        ref="quick"
-        :cellScrollHeight="cellScrollHeight"
-        quickType="search"
-      ></quick>
-    </div>
+    <quick
+      ref="quick"
+      quickType="search"
+      :cellContentHeight="cellContentHeight"
+    ></quick>
   </CellWrapper>
 </template>
 
@@ -24,7 +22,7 @@ export default {
   name: "QuickSearch",
   components: { CellWrapper, quick },
   props: {
-    cellScrollHeight: {
+    cellContentHeight: {
       type: Number,
       required: true,
     },

src/views/Home/cells/QuickVisit.vue

 <template>
-  <CellWrapper title="快速访问">
+  <CellWrapper title="快速访问" :cellContentHeight="cellContentHeight">
     <template v-slot:header>
       <span class="el-icon-setting" title="设置" @click="openSetting"></span>
     </template>
 
-    <div class="content">
-      <quick
-        ref="quick"
-        :cellScrollHeight="cellScrollHeight"
-        quickType="visit"
-      ></quick>
-    </div>
+    <quick
+      ref="quick"
+      quickType="visit"
+      :cellContentHeight="cellContentHeight"
+    ></quick>
   </CellWrapper>
 </template>
 
@@ -24,7 +22,7 @@ export default {
   name: "QuickVisit",
   components: { CellWrapper, quick },
   props: {
-    cellScrollHeight: {
+    cellContentHeight: {
       type: Number,
       required: true,
     },

src/views/Home/cells/TaskStatistics.vue

 <template>
-  <CellWrapper title="任务统计">
+  <CellWrapper title="任务统计" :cellContentHeight="cellContentHeight">
     <template v-slot:header>
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
     </template>
 
-    <div class="content">
+    <div class="statistics-container">
       <div class="task-stat-display total">
         <div class="display-wrapper">
           <div
@@ -53,6 +53,7 @@ import { all } from "~/service/report";
 
 export default {
   name: "TaskStatistics",
+  props: ["cellContentHeight"],
   components: { CellWrapper },
   data() {
     return {
@@ -93,7 +94,8 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.statistics-container {
+  height: 100%;
   padding: 0px 8px;
 }
 .task-stat-display {

src/views/Home/common/CellWrapper.vue

@@ -3,7 +3,7 @@
     <CellHeader :title="title">
       <slot name="header"></slot>
     </CellHeader>
-    <div class="cell-content">
+    <div class="cell-content" :style="{ height: cellContentHeight + 'px' }">
       <slot></slot>
     </div>
   </div>
@@ -13,13 +13,17 @@
 import CellHeader from "./CellHeader.vue";
 
 export default {
-	name: 'CellWrapper',
+  name: "CellWrapper",
   components: { CellHeader },
   props: {
     title: {
       type: String,
       required: true,
     },
+    cellContentHeight: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {};
@@ -29,21 +33,14 @@ export default {
 
 <style scoped>
 .home-cell {
-  height: 100%;
   background-color: #ffffff;
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
   border-radius: 8px;
+  padding-bottom: 10px;
 }
 .home-cell::before {
   display: table;
-  content: '';
-}
-.home-cell .cell-content {
-  height: calc(100% - 52px);
-}
-.home-cell .cell-content >>> .content {
-  padding-bottom: 10px;
-  height: calc(100% - 10px);
+  content: "";
 }
 .home-cell >>> .el-scrollbar__wrap {
   overflow-y: scroll;

src/views/Home/common/quick.vue

 <template>
-  <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
+  <el-scrollbar style="height: 100%">
     <router-link
       v-for="(item, index) in quickVisitItem"
       :key="index"
@@ -7,7 +7,7 @@
     >
       <div
         class="content-wrapper"
-        :style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
+        :style="{ height: Math.floor(cellContentHeight * 0.33) + 'px' }"
       >
         <div class="visit-item-wrapper">
           <div class="visit-item">
@@ -18,7 +18,12 @@
       </div>
     </router-link>
 
-    <el-dialog :visible="visible" title="设置" width="60%" :before-close="handleClose">
+    <el-dialog
+      :visible="visible"
+      title="设置"
+      width="60%"
+      :before-close="handleClose"
+    >
       <div style="text-align: center">
         <el-transfer
           style="text-align: left; display: inline-block"
@@ -47,14 +52,14 @@ import icons from "./icons.js";
 
 export default {
   props: {
-    cellScrollHeight: {
-      type: Number,
-      required: true,
-    },
     quickType: {
       type: String,
       required: true,
     },
+    cellContentHeight: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {

src/views/Home/config.js

+export const cellDataDefinition = [
+  {
+    title: "快速访问",
+    name: "QuickVisit",
+    description: "交易快速访问入口",
+  },
+  {
+    title: "任务统计",
+    name: "TaskStatistics",
+    description: "任务的数量统计",
+  },
+  {
+    title: "通知公告",
+    name: "NoticeAnnouncement",
+    description: "最新的通知公告",
+  },
+  { title: "电子大厅", name: "Hall", description: "电子大厅" },
+  {
+    title: "大客户分析",
+    name: "CustomerAnalyse",
+    description: "客户数据分析",
+  },
+  {
+    title: "快速查询",
+    name: "QuickSearch",
+    description: "交易快速查询入口",
+  },
+];

src/views/Home/index.vue

@@ -2,12 +2,10 @@
   <div class="eContainer-home">
     <c-row
       :gutter="10"
-      :style="{ height: getRowHeightPercent() * 100 + '%' }"
       v-for="cRow in cellRows"
       :key="cRow"
     >
       <c-col
-        class="home-cell-col"
         :span="24 / cellCols"
         v-for="cCol in cellCols"
         :key="cCol"
@@ -15,7 +13,7 @@
         <component
           v-if="getComponentName([cRow - 1], [cCol - 1])"
           v-bind:is="getComponentName([cRow - 1], [cCol - 1])"
-          :cellScrollHeight="cellScrollHeight"
+          :cellContentHeight="cellContentHeight"
         ></component>
       </c-col>
     </c-row>
@@ -33,6 +31,8 @@ import Hall from "./cells/Hall.vue";
 import CustomerAnalyse from "./cells/CustomerAnalyse.vue";
 import QuickSearch from "./cells/QuickSearch.vue";
 
+import { cellDataDefinition } from "./config";
+
 export default {
   name: "Home",
   components: {
@@ -45,44 +45,16 @@ export default {
   },
   data() {
     return {
-      cellScrollHeight: 0,
-      cellDataDefinition: [
-        {
-          title: "快速访问",
-          name: "QuickVisit",
-          description: "交易快速访问入口",
-        },
-        {
-          title: "任务统计",
-          name: "TaskStatistics",
-          description: "任务的数量统计",
-        },
-        {
-          title: "通知公告",
-          name: "NoticeAnnouncement",
-          description: "最新的通知公告",
-        },
-        { title: "电子大厅", name: "Hall", description: "电子大厅" },
-        {
-          title: "大客户分析",
-          name: "CustomerAnalyse",
-          description: "客户数据分析",
-        },
-        {
-          title: "快速查询",
-          name: "QuickSearch",
-          description: "交易快速查询入口",
-        },
-      ],
+      cellContentHeight: 0,
     };
   },
   created() {
     this.loadCellData();
   },
   mounted() {
-    this.calcCellScrollHeight();
-    this.calcCellScrollHeightBind = this.calcCellScrollHeight.bind(this);
-    window.addEventListener("resize", this.calcCellScrollHeightBind);
+    this.calcCellContentHeight();
+    this.calcCellContentHeightBind = this.calcCellContentHeight.bind(this);
+    window.addEventListener("resize", this.calcCellContentHeightBind);
   },
   computed: {
     ...mapState({
@@ -93,14 +65,14 @@ export default {
   },
   watch: {
     cellRows(newVal, oldVal) {
-      this.calcCellScrollHeight()
+      this.calcCellContentHeight()
     },
   },
   methods: {
     loadCellData() {
       this.$store.commit(
         "UserContext/setHomeDefaultCells",
-        this.cellDataDefinition
+        cellDataDefinition
       );
       let cellsSettingDefault = localStorage.getItem("cells-setting-default");
       if (!cellsSettingDefault) {
@@ -114,7 +86,7 @@ export default {
             cellNames: this.generateRowColNames(
               rows,
               cols,
-              this.cellDataDefinition.map((definition) => definition.name)
+              cellDataDefinition.map((definition) => definition.name)
             ),
           })
         );
@@ -144,20 +116,16 @@ export default {
     getComponentName(rowIdx, colIdx) {
       return this.cellNames[rowIdx] ? this.cellNames[rowIdx][colIdx] : null;
     },
-    calcCellScrollHeight() {
-      this.cellScrollHeight = Math.floor(this.$el.clientHeight * this.getRowHeightPercent() - 52 - 10)
+    calcCellContentHeight() {
+      this.cellContentHeight = this.$el.clientHeight * this.getRowHeightPercent() - 52 - 10
     },
     getRowHeightPercent() {
       // 每行预留 0.4% 的间距
       return 1 / this.cellRows - 0.004 * this.cellRows;
     },
-    getRowWidthPercent() {
-      // 每列预留 0.4% 的间距
-      return 1 / this.cellCols - 0.004 * this.cellCols;
-    },
   },
   destroyed() {
-    window.removeEventListener("resize", this.calcCellScrollHeightBind);
+    window.removeEventListener("resize", this.calcCellContentHeightBind);
   },
 };
 </script>
@@ -169,7 +137,4 @@ export default {
   flex-direction: column;
   justify-content: space-around;
 }
-.home-cell-col {
-  height: 100%;
-}
 </style>