434 lines
15 KiB
HTML
434 lines
15 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
<style>
|
||
.aid-dash-bord .card-label {
|
||
color: rgba(0, 0, 0, .45);
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.aid-dash-bord .card-value-num {
|
||
font-size: 30px;
|
||
color: rgba(0, 0, 0, .85);
|
||
}
|
||
|
||
.el-table__body-wrapper::-webkit-scrollbar {
|
||
display: none; /* Chrome Safari */
|
||
}
|
||
|
||
.el-table__body-wrapper {
|
||
scrollbar-width: none; /* firefox */
|
||
-ms-overflow-style: none; /* IE 10+ */
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.idx {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: rgba(0, 0, 0, .85);
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background-color: #f0f0f0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
|
||
.top-col {
|
||
background-color: white;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
width: calc((100% - (20px * 4)) / 4);
|
||
}
|
||
|
||
.top-col:not(:last-child), .center-col:not(:last-child) {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
|
||
.top-col-member-number {
|
||
font-size: 30px;
|
||
color: rgba(0, 0, 0, .85);
|
||
}
|
||
|
||
.top-col-chart {
|
||
height: 80px;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.center-col {
|
||
background-color: white;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
width: calc((100% - (20px * 2)) / 2);
|
||
}
|
||
|
||
|
||
.idx-rank {
|
||
color: white !important;
|
||
background-color: #314659 !important;
|
||
}
|
||
</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-card shadow="never">
|
||
<div class="card-label">基金会员总数</div>
|
||
<div class="card-value">
|
||
<span class="card-value-num">{{memberNumberData.memberNum}}</span><span
|
||
class="card-value-unit"> 人</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col v-loading="loading.memberNumberYear">
|
||
<el-card shadow="never">
|
||
<div class="card-label">今年新加入会员数</div>
|
||
<div class="card-value">
|
||
<span class="card-value-num">{{memberNumberData.memberNumberYear}}</span><span
|
||
class="card-value-unit"> 人</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col v-loading="loading.aidMedical">
|
||
<el-card shadow="never">
|
||
<div class="card-label">医疗补助申请总数</div>
|
||
<div class="card-value">
|
||
<span class="card-value-num">{{aidMedicalData.med}}</span><span
|
||
class="card-value-unit"> 次</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col v-loading="loading.aidMedical">
|
||
<el-card shadow="never">
|
||
<div class="card-label">重疾补助申请总数</div>
|
||
<div class="card-value">
|
||
<span class="card-value-num">{{aidMedicalData.weightMed}}</span><span
|
||
class="card-value-unit"> 次</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col v-loading="loading.aidMedicalMoney">
|
||
<el-card shadow="never">
|
||
<div class="card-label">共计补助</div>
|
||
<div class="card-value">
|
||
<span class="card-value-num">{{aidMedicalData.Money/10000}}</span><span
|
||
class="card-value-unit"> 万元</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row style="background-color: #f0f2f5;margin-top: 20px" type="flex">
|
||
<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"
|
||
height="calc(100vh - 160px - 300px)"
|
||
:header-cell-style="{background:'#FAFAFA'}" row-key="id">
|
||
<el-table-column label="序号" width="100px">
|
||
<template scope="{$index}">
|
||
<div class="idx idx-rank" v-if="$index<3">{{$index+1}}</div>
|
||
<div class="idx" v-else>{{$index+1}}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="unioncode" header-align="center" label="基层工会" sortable
|
||
show-overflow-tooltip>
|
||
<template scope="{row}">
|
||
{{row.unionname}}（{{row.unioncode}}）
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="value" align="center" header-align="center" label="会员人数"
|
||
width="120px" sortable
|
||
show-overflow-tooltip></el-table-column>
|
||
</el-table>
|
||
</el-col>
|
||
|
||
<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"
|
||
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"
|
||
v-loading="loading.personTypeMember"
|
||
id="personTypeMemberChart"></div>
|
||
|
||
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
</guava>
|
||
</div>
|
||
|
||
<script>
|
||
const chart = {
|
||
unionMemberChart: undefined,
|
||
userStateMemberChart: undefined,
|
||
personTypeMemberChart: undefined,
|
||
}
|
||
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
loading: {
|
||
unionMember: false,
|
||
memberNumberYear: false,
|
||
personTypeMember: false,
|
||
userStateMember: false,
|
||
memberNumber: false,
|
||
aidMedicalMoney: false,
|
||
},
|
||
memberNumberData: {
|
||
memberNum: '--',
|
||
memberNumberYear: '--',
|
||
},
|
||
aidMedicalData: {
|
||
med: '--',
|
||
weightMed: '--',
|
||
Money: '--',
|
||
},
|
||
unionMember: [],
|
||
}
|
||
},
|
||
components: {
|
||
'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0')
|
||
},
|
||
methods: {
|
||
/**
|
||
* 各工会会员数
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getUnionMember() {
|
||
this.loading.unionMember = true
|
||
const resp = await $.get(loc() + '/unionMember')
|
||
requestLaterFun(resp, ({chartData, tableData}) => {
|
||
this.loading.unionMember = false
|
||
|
||
this.unionMember = tableData
|
||
|
||
const labels = chartData.map(v => v.unionname)
|
||
const values = chartData.map(v => v.value)
|
||
|
||
if (chart.unionMemberChart) {
|
||
chart.unionMemberChart.changeData(values)
|
||
return
|
||
}
|
||
|
||
chart.unionMemberChart = new G2Plot.TinyArea('unionMemberChart', {
|
||
autoFit: true,
|
||
data: values,
|
||
smooth: true,
|
||
tooltip: {
|
||
customContent: function (i, data) {
|
||
if (labels[i]) {
|
||
return labels[i] + '- ' + data[0]?.data?.y + '人';
|
||
}
|
||
return ''
|
||
},
|
||
},
|
||
})
|
||
chart.unionMemberChart.render();
|
||
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 根据在职状态查找会员数
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getUserStateMember() {
|
||
this.loading.userStateMember = true
|
||
const resp = await $.get(loc() + '/userStateMember')
|
||
requestLaterFun(resp, (data) => {
|
||
this.loading.userStateMember = false
|
||
|
||
if (chart.userStateMemberChart) {
|
||
chart.userStateMemberChart.changeData(data)
|
||
return
|
||
}
|
||
|
||
/* chart.userStateMemberChart = new G2Plot.Radar('userStateMemberChart', {*/
|
||
chart.userStateMemberChart = new G2Plot.Pie('userStateMemberChart', {
|
||
data,
|
||
/* xField: 'label',
|
||
yField: 'value',
|
||
appendPadding: [0, 10, 0, 10],*/
|
||
angleField: 'value',
|
||
colorField: 'type',
|
||
radius: 0.75,
|
||
appendPadding: 10,
|
||
label: {
|
||
type: 'spider',
|
||
labelHeight: 28,
|
||
content: '{name}\n{value}',
|
||
},
|
||
interactions: [{type: 'element-selected'}, {type: 'element-active'}],
|
||
/* meta: {
|
||
value: {
|
||
alias: '会员数量',
|
||
min: 0,
|
||
nice: true,
|
||
formatter: (v) => Number(v).toFixed(2),
|
||
},
|
||
},*/
|
||
/* xAxis: {
|
||
tickLine: null,
|
||
},
|
||
yAxis: {
|
||
label: false,
|
||
grid: {
|
||
alternateColor: 'rgba(0, 0, 0, 0.04)',
|
||
},
|
||
},
|
||
// 开启辅助点
|
||
point: {
|
||
size: 2,
|
||
},
|
||
area: {},*/
|
||
});
|
||
chart.userStateMemberChart.render();
|
||
|
||
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 根据人员类型查找会员数
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getPersonTypeMember() {
|
||
this.loading.personTypeMember = true
|
||
const resp = await $.get(loc() + '/personTypeMember')
|
||
requestLaterFun(resp, (data) => {
|
||
this.loading.personTypeMember = false
|
||
|
||
if (chart.personTypeMemberChart) {
|
||
chart.personTypeMemberChart.changeData(data)
|
||
return
|
||
}
|
||
|
||
chart.personTypeMemberChart = new G2Plot.Column('personTypeMemberChart', {
|
||
data,
|
||
autoFit: true,
|
||
xField: 'label',
|
||
yField: 'value',
|
||
label: {
|
||
// 可手动配置 label 数据标签位置
|
||
position: 'middle', // 'top', 'bottom', 'middle',
|
||
// 配置样式
|
||
style: {
|
||
fill: '#FFFFFF',
|
||
opacity: 0.6,
|
||
},
|
||
},
|
||
xAxis: {
|
||
label: {
|
||
autoHide: true,
|
||
autoRotate: false,
|
||
},
|
||
},
|
||
meta: {
|
||
label: {
|
||
alias: '类型',
|
||
},
|
||
value: {
|
||
alias: '会员数',
|
||
},
|
||
},
|
||
});
|
||
chart.personTypeMemberChart.render();
|
||
|
||
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 查询基金会员总数
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getAidFundMember() {
|
||
this.loading.memberNumber = true
|
||
const resp = await $.get(loc() + '/getAidFundMember')
|
||
requestLaterFun(resp, (data) => {
|
||
this.loading.memberNumber = false
|
||
this.memberNumberData.memberNum = data
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 查询本年加入基金会员总数
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getAidFundMemberYear() {
|
||
this.loading.memberNumberYear = true
|
||
const resp = await $.get(loc() + '/getAidFundMemberYear')
|
||
requestLaterFun(resp, (data) => {
|
||
this.loading.memberNumberYear = false
|
||
this.memberNumberData.memberNumberYear = data
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 查询med医疗补助和weightMed重疾补助
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getAidMedical() {
|
||
this.loading.aidMedical = true
|
||
const resp = await $.get(loc() + '/getAidMedical')
|
||
requestLaterFun(resp, (data) => {
|
||
this.loading.aidMedical = false
|
||
this.aidMedicalData.med = data.med
|
||
this.aidMedicalData.weightMed = data.weightmed
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 查询全部补助金额
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getAidMedicalMoney() {
|
||
this.loading.aidMedicalMoney = true
|
||
const resp = await $.get(loc() + '/getAidMedicalMoney')
|
||
requestLaterFun(resp, (data) => {
|
||
this.loading.aidMedicalMoney = false
|
||
this.aidMedicalData.Money = data
|
||
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
mounted() {
|
||
this.getUnionMember()
|
||
this.getUserStateMember()
|
||
this.getPersonTypeMember()
|
||
this.getAidFundMember()
|
||
this.getAidFundMemberYear()
|
||
this.getAidMedical()
|
||
this.getAidMedicalMoney()
|
||
},
|
||
async created() {
|
||
|
||
}
|
||
})
|
||
</script>
|
||
<!--#
|
||
}
|
||
#-->
|