|
|
@@ -39,7 +39,7 @@
|
|
|
<div class="board-container">
|
|
|
<vab-icon class="icon" :icon="item.report_icon" />
|
|
|
<div class="text">
|
|
|
- <p class="num">{{ item.id }}</p>
|
|
|
+ <p class="num">{{ item.report_data }}</p>
|
|
|
<p>{{ item.report_name }}</p>
|
|
|
</div>
|
|
|
<vab-icon v-show="editFlag" class="close" icon="close-fill" @click.stop="handleDel(index)" />
|
|
|
@@ -200,6 +200,7 @@
|
|
|
import to from 'await-to-js'
|
|
|
import indexApi from '@/api/index'
|
|
|
import messageApi from '@/api/system/message'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
components: {
|
|
|
@@ -312,6 +313,25 @@
|
|
|
window.addEventListener('resize', this.handleResize)
|
|
|
},
|
|
|
methods: {
|
|
|
+ async getHomeNumReportData() {
|
|
|
+ let ids = this.privateBoard.map((item) => {
|
|
|
+ return item.id
|
|
|
+ })
|
|
|
+ const {
|
|
|
+ data: { num_report_response },
|
|
|
+ } = await indexApi.getHomeNumReportData({ ids: ids })
|
|
|
+ let privateBoardData = []
|
|
|
+ this.privateBoard.forEach((item, index) => {
|
|
|
+ num_report_response.forEach((val) => {
|
|
|
+ if (item.id === val.id) {
|
|
|
+ this.privateBoard[index].report_data = val.data
|
|
|
+ privateBoardData.push(this.privateBoard[index])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.privateBoard = privateBoardData
|
|
|
+ console.log(this.privateBoard)
|
|
|
+ },
|
|
|
// 布局信息
|
|
|
async init() {
|
|
|
const [err, res] = await to(indexApi.getHomeReport({ module_code: 'HomePage' }))
|
|
|
@@ -332,6 +352,7 @@
|
|
|
})
|
|
|
await this.$nextTick()
|
|
|
this.initChart()
|
|
|
+ this.getHomeNumReportData()
|
|
|
},
|
|
|
initChart() {
|
|
|
// console.log(this.layout, 'layout')
|
|
|
@@ -594,6 +615,7 @@
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
i {
|
|
|
font-weight: normal;
|
|
|
cursor: pointer;
|
|
|
@@ -609,19 +631,23 @@
|
|
|
margin-right: 10px;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
+
|
|
|
.board {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-bottom: 2px;
|
|
|
+
|
|
|
::v-deep .el-card__body {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
+
|
|
|
.el-row {
|
|
|
height: 100%;
|
|
|
flex-wrap: wrap;
|
|
|
+
|
|
|
> div,
|
|
|
> div span {
|
|
|
display: flex;
|
|
|
@@ -630,12 +656,15 @@
|
|
|
flex-wrap: wrap;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.ghost {
|
|
|
background: #ecf5ff;
|
|
|
}
|
|
|
+
|
|
|
.drag {
|
|
|
background: pink;
|
|
|
}
|
|
|
+
|
|
|
.el-col {
|
|
|
display: flex;
|
|
|
height: 60px;
|
|
|
@@ -695,6 +724,7 @@
|
|
|
height: 48px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
ul {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
@@ -708,6 +738,7 @@
|
|
|
justify-content: center;
|
|
|
user-select: none;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
&.active span:last-child {
|
|
|
background: rgb(34, 76, 218);
|
|
|
color: #fff;
|
|
|
@@ -797,6 +828,7 @@
|
|
|
::v-deep .el-timeline-item__tail {
|
|
|
border-left: 2px dashed #e4e7ed;
|
|
|
}
|
|
|
+
|
|
|
// #funnel,
|
|
|
// #bar {
|
|
|
// height: 100%;
|
|
|
@@ -804,18 +836,21 @@
|
|
|
.vue-grid-layout {
|
|
|
margin-left: -10px;
|
|
|
margin-right: -10px;
|
|
|
+
|
|
|
&.grid {
|
|
|
background: linear-gradient(90deg, #fff 10px, transparent 0), linear-gradient(#fff 10px, transparent 0);
|
|
|
background-size: calc((100% - 10px) / 24) 40px;
|
|
|
background-position: top 0px left 0px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.vue-grid-item {
|
|
|
background: #fff;
|
|
|
border: 1px solid #ebeef5;
|
|
|
border-radius: 4px;
|
|
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
h4 {
|
|
|
line-height: 22px;
|
|
|
height: 54px;
|
|
|
@@ -825,16 +860,19 @@
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
+
|
|
|
i {
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
&:hover {
|
|
|
color: #1d66dc;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.board-container {
|
|
|
display: flex;
|
|
|
height: 60px;
|
|
|
@@ -845,9 +883,11 @@
|
|
|
flex: 1;
|
|
|
cursor: pointer;
|
|
|
user-select: none;
|
|
|
+
|
|
|
&:hover {
|
|
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
|
}
|
|
|
+
|
|
|
.icon {
|
|
|
font-size: 32px;
|
|
|
border-radius: 4px;
|
|
|
@@ -855,34 +895,42 @@
|
|
|
height: 40px;
|
|
|
color: #1d66dc;
|
|
|
background: #ecf5ff;
|
|
|
+
|
|
|
&.ri-money-cny-circle-line {
|
|
|
color: #e6a23c;
|
|
|
background: #fdf6ec;
|
|
|
}
|
|
|
+
|
|
|
&.ri-exchange-cny-fill {
|
|
|
color: #f56c6c;
|
|
|
background: #fef0f0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.full-icon {
|
|
|
flex: 1;
|
|
|
font-size: 32px;
|
|
|
}
|
|
|
+
|
|
|
.close {
|
|
|
font-size: 32px;
|
|
|
transition: 0.3s all;
|
|
|
+
|
|
|
&:hover {
|
|
|
color: #1d66dc;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.check {
|
|
|
font-size: 32px;
|
|
|
color: #67c23a;
|
|
|
}
|
|
|
+
|
|
|
.text {
|
|
|
padding-left: 10px;
|
|
|
color: #9499a0;
|
|
|
flex: 1;
|
|
|
+
|
|
|
.num {
|
|
|
font-size: 22px;
|
|
|
font-weight: bold;
|
|
|
@@ -890,9 +938,11 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.add-board {
|
|
|
height: 500px;
|
|
|
overflow: auto;
|
|
|
+
|
|
|
li + li {
|
|
|
margin-top: 10px;
|
|
|
}
|
ZZH-wl