index.vue

<template>
  <div class="eContainer-home">
    <c-row
      v-for="cRow in cellRows"
      :key="cRow"
    >
      <div class="cell-item"
        :style="{'width': cellWidth + 'px'}"
        v-for="cCol in cellCols"
        :key="cCol"
      >
        <component
          v-if="getComponentName([cRow - 1], [cCol - 1])"
          v-bind:is="getComponentName([cRow - 1], [cCol - 1])"
          :cellContentHeight="cellContentHeight"
        ></component>
      </div>
    </c-row>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("UserContext");

import QuickVisit from "./cells/QuickVisit.vue";
import TaskStatistics from "./cells/TaskStatistics.vue";
import NoticeAnnouncement from "./cells/NoticeAnnouncement.vue";
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: {
    QuickVisit,
    TaskStatistics,
    NoticeAnnouncement,
    Hall,
    CustomerAnalyse,
    QuickSearch,
  },
  data() {
    return {
      cellContentHeight: 0,
      cellWidth: 0
    };
  },
  created() {
    // this.loadCellData();
  },
  mounted() {
    this.calcAgain();
    this.calcAgainBind = this.calcAgain.bind(this);
    window.addEventListener("resize", this.calcAgainBind);
  },
  computed: {
    ...mapState({
      cellRows: (state) => state.homeCellsSetting.cellRows,
      cellCols: (state) => state.homeCellsSetting.cellCols,
      cellNames: (state) => state.homeCellsSetting.cellNames,
    }),
  },
  watch: {
    cellRows(newVal, oldVal) {
      this.calcCellContentHeight()
    },
    cellCols(newVal, oldVal) {
      this.calcCellContentWidth()
    }
  },
  methods: {
    loadCellData() {
      this.$store.commit(
        "UserContext/setHomeDefaultCells",
        cellDataDefinition
      );
      let cellsSettingDefault = localStorage.getItem("cells-setting-default");
      if (!cellsSettingDefault) {
        const rows = 2;
        const cols = 3;
        localStorage.setItem(
          "cells-setting-default",
          JSON.stringify({
            cellRows: rows,
            cellCols: cols,
            cellNames: this.generateRowColNames(
              rows,
              cols,
              cellDataDefinition.map((definition) => definition.name)
            ),
          })
        );
      }
      let userCellsSetting = localStorage.getItem(
        `cells-setting-${this.$store.state.UserContext.userId}`
      );
      if (!userCellsSetting) {
        userCellsSetting = localStorage.getItem("cells-setting-default");
      }
      this.$store.commit(
        "UserContext/setHomeCellsSetting",
        JSON.parse(userCellsSetting)
      );
    },
    generateRowColNames(rows, cols, cells) {
      const rArr = [];
      for (let i = 0; i < rows; i++) {
        const cArr = [];
        for (let j = 0; j < cols; j++) {
          cArr.push(cells[i * cols + j]);
        }
        rArr.push(cArr);
      }
      return rArr;
    },
    getComponentName(rowIdx, colIdx) {
      return this.cellNames[rowIdx] ? this.cellNames[rowIdx][colIdx] : null;
    },
    calcCellContentHeight() {
      // this.cellContentHeight = this.$el.clientHeight * this.getRowHeightPercent() - 52 - 10
      this.cellContentHeight = Math.floor(((this.$el.clientHeight - 1) - (this.cellRows + 1) * 25 - (52 + 10) * this.cellRows) / this.cellRows)
    },
    getRowHeightPercent() {
      // 每行预留 0.4% 的间距
      return 1 / this.cellRows - 0.004 * this.cellRows;
    },
    calcCellContentWidth() {
      this.cellWidth = Math.floor(((this.$el.clientWidth - 1) - (this.cellCols + 1) * 25) / this.cellCols)
    },
    calcAgain() {
      this.calcCellContentHeight()
      this.calcCellContentWidth()
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.calcAgainBind);
  },
};
</script>

<style scoped>
.eContainer-home {
  box-sizing: border-box;
  height: 100%;
  padding: 25px;
}
.eContainer-home .el-row {
  margin-bottom: 25px;
}
.eContainer-home .el-row:last-child {
  margin-bottom: 0;
}
.eContainer-home .cell-item {
  float: left;
  margin-right: 25px;
}
.eContainer-home .el-row .cell-item:last-child {
  margin-right: 0;
}
</style>