<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>