南京理工查询统计（数据看板）优化整改: 会员管理和医疗互助统计总数加点击详情弹出人员列表；

2026-10-10 10:26:46 +08:00
parent d551f8c94e
commit f9a87d12e2
6 changed files with 988 additions and 19 deletions
@@ -74,13 +74,23 @@ layout("/layouts/platform.html"){
        color: white !important;
        background-color: #314659 !important;
    }
+    .dashboard-drill {
+        cursor: pointer;
+    }
+
+    .dashboard-drill:hover .card-value-num,
+    .dashboard-drill:hover .card-label {
+        color: #409EFF;
+    }
 </style>

 <div id="app" class="platform aid-dash-bord" v-cloak>
    <guava ref="guava">
        <template>
            <el-row gutter="20" type="flex">
-                <el-col v-loading="loading.memberNumber">
+                <el-col class="dashboard-drill" v-loading="loading.memberNumber"
+                        title="点击查看基金会员明细"
+                        @click.native="openDetail('基金会员总数明细', 'member', {})">
                    <el-card shadow="never">
                        <div class="card-label">基金会员总数</div>
                        <div class="card-value">
@@ -90,7 +100,12 @@ layout("/layouts/platform.html"){
                    </el-card>
                </el-col>

-                <el-col v-loading="loading.memberNumberYear">
+                <el-col class="dashboard-drill" v-loading="loading.memberNumberYear"
+                        title="点击查看今年新加入会员明细"
+                        @click.native="openDetail('今年新加入基金会员明细', 'member', {
+                            startTime: moment().startOf('year').format('YYYY-MM-DD'),
+                            endTime: moment().endOf('year').format('YYYY-MM-DD')
+                        })">
                    <el-card shadow="never">
                        <div class="card-label">今年新加入会员数</div>
                        <div class="card-value">
@@ -99,7 +114,9 @@ layout("/layouts/platform.html"){
                        </div>
                    </el-card>
                </el-col>
-                <el-col v-loading="loading.aidMedical">
+                <el-col class="dashboard-drill" v-loading="loading.aidMedical"
+                        title="点击查看医疗补助申请明细"
+                        @click.native="openDetail('医疗补助申请明细', 'medical', {medicalType: 1})">
                    <el-card shadow="never">
                        <div class="card-label">医疗补助申请总数</div>
                        <div class="card-value">
@@ -108,7 +125,9 @@ layout("/layouts/platform.html"){
                        </div>
                    </el-card>
                </el-col>
-                <el-col v-loading="loading.aidMedical">
+                <el-col class="dashboard-drill" v-loading="loading.aidMedical"
+                        title="点击查看重疾补助申请明细"
+                        @click.native="openDetail('重疾补助申请明细', 'medical', {medicalType: 2})">
                    <el-card shadow="never">
                        <div class="card-label">重疾补助申请总数</div>
                        <div class="card-value">
@@ -117,7 +136,9 @@ layout("/layouts/platform.html"){
                        </div>
                    </el-card>
                </el-col>
-                <el-col v-loading="loading.aidMedicalMoney">
+                <el-col class="dashboard-drill" v-loading="loading.aidMedicalMoney"
+                        title="点击查看已补助申请明细"
+                        @click.native="openDetail('已补助金额明细', 'medical', {stateId: 700})">
                    <el-card shadow="never">
                        <div class="card-label">共计补助</div>
                        <div class="card-value">
@@ -132,10 +153,13 @@ layout("/layouts/platform.html"){
                <el-col class="center-col">
                    <div class="card-label">工会基金会员数</div>

-                    <div style="width: 100%;height: 100px" id="unionMemberChart"></div>
-                    <el-table :data="unionMember" style="width: 100%;margin-top: 20px"
+                    <div class="dashboard-drill" title="点击趋势点查看工会基金会员明细"
+                         style="width: 100%;height: 100px" id="unionMemberChart"></div>
+                    <el-table :data="unionMember" style="width: 100%;margin-top: 20px;cursor: pointer"
                              height="calc(100vh - 160px - 300px)"
-                              :header-cell-style="{background:'#FAFAFA'}" row-key="id">
+                              :header-cell-style="{background:'#FAFAFA'}" row-key="id"
+                              title="点击工会行查看基金会员明细"
+                              @row-click="openUnionMemberDetail">
                        <el-table-column label="序号" width="100px">
                            <template scope="{$index}">
                                <div class="idx idx-rank" v-if="$index<3">{{$index+1}}</div>
@@ -157,13 +181,15 @@ layout("/layouts/platform.html"){
                <el-col class="center-col">

                    <div class="card-label">在职状态</div>
-                    <div style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
+                    <div class="dashboard-drill" title="点击图表项查看在职状态明细"
+                         style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
                         v-loading="loading.userStateMember"
                         id="userStateMemberChart"></div>


                    <div class="card-label">人员类型</div>
-                    <div style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
+                    <div class="dashboard-drill" title="点击图表项查看人员类型明细"
+                         style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
                         v-loading="loading.personTypeMember"
                         id="personTypeMemberChart"></div>

@@ -172,6 +198,7 @@ layout("/layouts/platform.html"){
            </el-row>
        </template>
    </guava>
+    <data-board-detail ref="dataBoardDetail" :base-url="loc()"></data-board-detail>
 </div>

 <script>
@@ -207,9 +234,27 @@ layout("/layouts/platform.html"){
            }
        },
        components: {
-            'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0')
+            'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0'),
+            'data-board-detail': httpVueLoader('/components/dashboard/DataBoardDetail.vue?v=1.0.3')
        },
        methods: {
+            openDetail(title, detailType, filters) {
+                this.$refs.dataBoardDetail.open(title, detailType, filters)
+            },
+            openUnionMemberDetail(row) {
+                this.openDetail(row.unionname + '基金会员明细', 'member', {
+                    unionId: row.unionid
+                })
+            },
+            getTinyAreaRow(event, rows) {
+                const point = event && event.data ? event.data.data : null
+                const index = point && point.x !== undefined ? Number(point.x) : NaN
+                if (Number.isInteger(index) && rows[index]) {
+                    return rows[index]
+                }
+                const value = point && point.y !== undefined ? point.y : point
+                return rows.find(item => String(item.value) === String(value))
+            },
            /**
             * 各工会会员数
             * @returns {Promise<void>}
@@ -244,6 +289,12 @@ layout("/layouts/platform.html"){
                        },
                    })
                    chart.unionMemberChart.render();
+                    chart.unionMemberChart.on('element:click', event => {
+                        const row = this.getTinyAreaRow(event, chartData)
+                        if (row) {
+                            this.openUnionMemberDetail(row)
+                        }
+                    })

                })
            },
@@ -303,6 +354,14 @@ layout("/layouts/platform.html"){
                         area: {},*/
                    });
                    chart.userStateMemberChart.render();
+                    chart.userStateMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openDetail(row.type + '基金会员明细', 'member', {
+                                userState: row.type
+                            })
+                        }
+                    })


                })
@@ -353,6 +412,14 @@ layout("/layouts/platform.html"){
                        },
                    });
                    chart.personTypeMemberChart.render();
+                    chart.personTypeMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openDetail(row.label + '基金会员明细', 'member', {
+                                personType: row.label
+                            })
+                        }
+                    })


                })
@@ -67,12 +67,22 @@ layout("/layouts/platform.html"){
        overflow-y: auto;
    }

+    .dashboard-drill {
+        cursor: pointer;
+    }
+
+    .dashboard-drill:hover .top-col-member-number,
+    .dashboard-drill:hover .col-title {
+        color: #409EFF;
+    }
 </style>

 <div id="app" v-cloak>
    <guava>
        <el-row style="background-color: #f0f2f5" type="flex">
-            <el-col class="top-col" v-loading="loading.memberNumber">
+            <el-col class="top-col dashboard-drill" v-loading="loading.memberNumber"
+                    title="点击查看会员明细"
+                    @click.native.capture="openMemberDetail('会员总数明细', {year: moment().format('YYYY')})">
                <div class="col-title">会员数</div>
                <div class="top-col-member-number">{{memberNumberData.memberNum}}<span
                        style="font-size: 14px">&ensp;人</span></div>
@@ -97,16 +107,20 @@ layout("/layouts/platform.html"){
            </el-col>
            <el-col class="top-col" v-loading="loading.growthTrend">
                <div class="col-title">增长趋势</div>
-                <div class="top-col-chart" id="growthTrendChart"></div>
+                <div class="top-col-chart dashboard-drill" title="点击趋势点查看年度明细"
+                     id="growthTrendChart"></div>
            </el-col>
-            <el-col class="top-col" v-loading="loading.memberPercentage">
+            <el-col class="top-col dashboard-drill" v-loading="loading.memberPercentage"
+                    title="点击查看会员明细"
+                    @click.native.capture="openMemberDetail('会员占比明细', {year: moment().format('YYYY')})">
                <div class="col-title">会员占比</div>
                <div class="top-col-chart" id="memberPercentageChart"
                     style="position: absolute;height: 120px;right: -10%;bottom: 20px"></div>
            </el-col>
            <el-col class="top-col" v-loading="loading.growthTrend">
                <div class="col-title">男女占比</div>
-                <div class="top-col-chart" id="memberSexPercentageChart"
+                <div class="top-col-chart dashboard-drill" title="点击图表项查看性别明细"
+                     id="memberSexPercentageChart"
                     style="position: absolute;height: 120px;right: -10%;bottom: 20px"></div>
            </el-col>
        </el-row>
@@ -119,7 +133,9 @@ layout("/layouts/platform.html"){

                <el-table :data="unionMember" :header-cell-style="{background:'#FAFAFA'}"
                          height="calc(100vh - 160px - 300px)"
-                          row-key="id" style="width: 100%;margin-top: 20px">
+                          row-key="id" style="width: 100%;margin-top: 20px;cursor: pointer"
+                          title="点击工会行查看会员明细"
+                          @row-click="openUnionMemberDetail">
                    <el-table-column label="序号" width="100px">
                        <template scope="{$index}">
                            <div class="idx idx-rank" v-if="$index<3">{{$index+1}}</div>
@@ -152,6 +168,7 @@ layout("/layouts/platform.html"){
            </el-col>
        </el-row>
    </guava>
+    <data-board-detail ref="dataBoardDetail" :base-url="loc()"></data-board-detail>

 </div>

@@ -193,8 +210,28 @@ layout("/layouts/platform.html"){
                unionMember: [],
            }
        },
-        components: {},
+        components: {
+            'data-board-detail': httpVueLoader('/components/dashboard/DataBoardDetail.vue?v=1.0.3')
+        },
        methods: {
+            openMemberDetail(title, filters) {
+                this.$refs.dataBoardDetail.open(title, 'member', filters)
+            },
+            openUnionMemberDetail(row) {
+                this.openMemberDetail(row.unionname + '会员明细', {
+                    year: moment().format('YYYY'),
+                    unionId: row.unionid
+                })
+            },
+            getTinyAreaRow(event, rows) {
+                const point = event && event.data ? event.data.data : null
+                const index = point && point.x !== undefined ? Number(point.x) : NaN
+                if (Number.isInteger(index) && rows[index]) {
+                    return rows[index]
+                }
+                const value = point && point.y !== undefined ? point.y : point
+                return rows.find(item => String(item.value) === String(value))
+            },
            /**
             * 会员数
             * @returns {Promise<void>}
@@ -247,6 +284,12 @@ layout("/layouts/platform.html"){
                        },
                    });
                    chart.growthTrendChart.render();
+                    chart.growthTrendChart.on('element:click', event => {
+                        const row = this.getTinyAreaRow(event, data)
+                        if (row) {
+                            this.openMemberDetail(row.label + '年会员明细', {year: row.label})
+                        }
+                    })

                })
            },
@@ -321,6 +364,15 @@ layout("/layouts/platform.html"){
                        interactions: [{type: 'element-active'}], color: ['#409EFF', '#F56C6C'],
                    });
                    chart.memberSexPercentageChart.render();
+                    chart.memberSexPercentageChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openMemberDetail(row.type + '性会员明细', {
+                                year: moment().format('YYYY'),
+                                sex: row.type
+                            })
+                        }
+                    })

                })
            },
@@ -358,6 +410,12 @@ layout("/layouts/platform.html"){
                        },
                    })
                    chart.unionMemberChart.render();
+                    chart.unionMemberChart.on('element:click', event => {
+                        const row = this.getTinyAreaRow(event, chartData)
+                        if (row) {
+                            this.openUnionMemberDetail(row)
+                        }
+                    })

                })
            },
@@ -407,6 +465,15 @@ layout("/layouts/platform.html"){
                        },
                    });
                    chart.personTypeMemberChart.render();
+                    chart.personTypeMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openMemberDetail(row.label + '会员明细', {
+                                year: moment().format('YYYY'),
+                                personType: row.label
+                            })
+                        }
+                    })


                })
@@ -456,6 +523,15 @@ layout("/layouts/platform.html"){
                        area: {},
                    });
                    chart.userStateMemberChart.render();
+                    chart.userStateMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openMemberDetail(row.label + '会员明细', {
+                                year: moment().format('YYYY'),
+                                userState: row.label
+                            })
+                        }
+                    })


                })