Skip to content

V
vue-gjjs
Commit f3503c7b by 潘际乾
Options

完善首页小组件

parent 43043f23
Showing with 122 additions and 108 deletions
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 0 → 100644
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment