c-hongqw1/zhgh_hhu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
@jyuhsin
2024-11-25 15:16:58 +08:00
parent 9cf6ec2b5e
commit 16246b3e0b
3 changed files with 246 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/mobile/mine/index.html
+137 -72
View File
@@ -16,7 +16,7 @@ layout("/mobile/platform.html"){
padding: 8px 8px;
}
.main_content {
height: 230px;
height: calc(100vh - 570px);
background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));
border-radius: 0 0 20px 20px;
}
@@ -24,7 +24,7 @@ layout("/mobile/platform.html"){
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px 30px 40px;
padding: 40px 30px 20px;
}
.basic {
font-weight: bold;
@@ -52,6 +52,46 @@ layout("/mobile/platform.html"){
font-size: 14px;
margin-right: 20px;
}
.van-tabs__nav--line {
background-color: transparent !important;
}
.van-tab--active {
color: white;
}
.van-tab {
color: white;
}
.van-cell__title {
max-width: 60px;
}
img {
border-radius: 10px;
}
.van-image__error, .van-image__loading {
border-radius: 10px;
}
.activity_name {
font-weight: bold;
}
.activity_time {
color: grey;
}
.van-empty {
position: relative;
transform: revert;
left: 0;
}
.activity_tooltip {
margin-bottom: 10px;
color: white;
padding: 0 10px;
font-size: 15px;
text-indent: 1em;
line-height: 20px;
}
.activity_count {
color: #EE0A24;
}
</style>
@@ -67,35 +107,57 @@ layout("/mobile/platform.html"){
<div class="avatar">{{getShortName()}}</div>
</div>
</div>
<div class="activity_tooltip">
{{pageForm.year ? pageForm.year : '全部'}}年度， 您一共参与了，
<span class="activity_count">{{activityCount.trainVideoCount}}</span>次培训教育，
<span class="activity_count">{{activityCount.trainSignUpCount}}</span>次品牌活动，
<span class="activity_count">{{activityCount.sportActivityCount}}</span>次体育活动，
<span class="activity_count">{{activityCount.cultureActivityCount}}</span>次文化活动。
</div>
<div class="count_content">
<van-badge :content="trainActivityCount" style="margin-right: 50px">
<div class="activity">品牌活动</div>
</van-badge>
<van-badge :content="videoCount">
<div>培训教育</div>
</van-badge>
<van-tabs v-model="activeName" @click="tabClick">
<van-tab :title="item" :name="index" v-for="(item,index) in itemList"></van-tab>
</van-tabs>
</div>
<div class="query">
<span @click="openQuery()">筛选</span>
<span @click="openQuery()">年度筛选</span>
<van-icon name="exchange" style="position: relative; top: 2px"></van-icon>
</div>
<div class="van-doc-card" style="margin-top: 6px">
<van-cell icon="friends-o" title="性别" value="${@shiro.getPrincipalProperty('sex')}"></van-cell>
<van-cell icon="phone-o" title="手机号" value="${@shiro.getPrincipalProperty('mobile')}"></van-cell>
<van-cell icon="bar-chart-o" title="所属单位" value="${@shiro.getPrincipalProperty('unit').getName()}"></van-cell>
<van-cell icon="cluster-o" title="所属工会" value="${@shiro.getPrincipalProperty('union').getUnionname()}"></van-cell>
</div>
<div class="summary_content van-doc-card">
<div class="van-sidebar-item van-sidebar-item--select ml15 p10">
品牌活动
<template v-if="activeName === 0">
<van-cell icon="coupon-o" title="工号" :value="userInfo.loginname"></van-cell>
<van-cell icon="manager-o" title="性别" :value="userInfo.sex"></van-cell>
<van-cell icon="phone-o" title="手机号" :value="userInfo.mobile"></van-cell>
<van-cell icon="comment-o" title="身份证" :value="userInfo.idcard"></van-cell>
<van-cell icon="friends-o" title="民族" :value="userInfo.nation"></van-cell>
<van-cell icon="notes-o" title="学历" :value="userInfo.education"></van-cell>
<van-cell icon="newspaper-o" title="学位" :value="userInfo.academicDegree"></van-cell>
<van-cell icon="credit-pay" title="政治面貌" :value="userInfo.political"></van-cell>
<van-cell icon="idcard" title="人员类型" :value="userInfo.personType"></van-cell>
<van-cell icon="hotel-o" title="职务" :value="userInfo.position"></van-cell>
<van-cell icon="bar-chart-o" title="所属单位" :value="userInfo.unitname"></van-cell>
<van-cell icon="cluster-o" title="所属工会" :value="userInfo.unionname"></van-cell>
</template>
<div style="max-height: calc(100vh - 130px - 44px - 60px); overflow: auto" v-else-if="activeName !== 0">
<div v-if="activityData.length > 0" v-for="item in activityData" style="display: flex; padding: 6px">
<van-image width="100" height="70"
:src="getImageUrl(item.cover)">
</van-image>
<div class="ml10" style="display: flex; flex-direction: column; justify-content: space-between;">
<div class="activity_name">{{ item.activityName }}</div>
<div class="activity_time">
<div>开始时间：{{ moment(item.activityStartTime).format('YYYY-MM-DD HH:mm') }}</div>
<div>结束时间：{{ moment(item.activityEndTime).format('YYYY-MM-DD HH:mm') }}</div>
</div>
</div>
</div>
<van-empty
v-if="activityData.length === 0"
class="custom-image"
image="/none.svg"
description="暂无数据"
></van-empty>
</div>
<canvas id="trainActivity" style="width: 100%; height: 170px"></canvas>
</div>
<div class="summary_content van-doc-card">
<div class="van-sidebar-item van-sidebar-item--select ml15 p10">
培训教育
</div>
<canvas id="trainVideo" style="width: 100%; height: 170px"></canvas>
</div>
</div>
@@ -109,7 +171,6 @@ layout("/mobile/platform.html"){
></van-action-sheet>
</div>
<script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2.min.js"></script>
<script>
const vue = new Vue({
@@ -118,14 +179,51 @@ layout("/mobile/platform.html"){
return {
yearActions: [],
yearShow: false,
trainActivityCount: 0,
videoCount: 0,
pageForm: {
year: null,
}
year: new Date().getFullYear(),
},
itemList: ['个人信息', '培训教育', '品牌活动', '体育活动', '文化活动'],
activeName: 0,
userInfo: {},
activityData: [],
activityCount: {},
}
},
components: {
'mobile-member-info': httpVueLoader('/components/mobile/member/MobileMemberInfo.vue?v=' + new Date().getTime()),
},
methods: {
async tabClick(name, title) {
if(name === 0) {
return
}
let method
switch (name) {
case 1:
method = '/getTrainVideo'
break
case 2:
method = '/getTrainActivity'
break
case 3:
method = '/getSportActivity'
break
case 4:
method = '/getCultureActivity'
break
}
const resp = await $.post('/mobile/mine' + method, this.pageForm)
this.activityData = resp.data
this.$forceUpdate()
},
getImageUrl(url) {
try {
const u = JSON.parse(url)
return FILE_DOMAIN + '/fileStreamPreview?id=' + u?.id
}catch (e) {
return FILE_DOMAIN + '/fileStreamPreview?id=' + url
}
},
openQuery() {
this.yearShow = true
},
@@ -135,57 +233,24 @@ layout("/mobile/platform.html"){
} else {
this.pageForm.year = action.name.replaceAll('年', '')
}
await this.init()
await this.tabClick(this.activeName)
await this.getActivityCount()
},
getShortName() {
const userName = "${@shiro.getPrincipalProperty('username')}"
return userName.length > 2 ? userName.substring(0, 2) : userName.substring(0, 1)
},
async getTrainActivity() {
const resp = await $.get('/mobile/mine/getTrainActivity', this.pageForm)
this.trainActivityCount = resp.data.count
const chart = new F2.Chart({
id: 'trainActivity',
pixelRatio: window.devicePixelRatio
})
chart.source(resp.data.result)
chart.scale({
label: {
range: [0, 1]
},
value: {
tickCount: 5,
min: 0
}
})
chart.area().position('label*value').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth')
chart.line().position('label*value').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth')
chart.render()
async getUserInfo() {
const resp = await $.get('/platform/member/common/userInfo', {userId: "${@shiro.getPrincipalProperty('id')}"})
this.userInfo = resp.data
},
async getVideo() {
const resp = await $.get('/mobile/mine/getVideo', this.pageForm)
this.videoCount = resp.data.count
const chart = new F2.Chart({
id: 'trainVideo',
pixelRatio: window.devicePixelRatio
})
chart.source(resp.data.result)
chart.scale({
label: {
range: [0, 1]
},
value: {
tickCount: 5,
min: 0
}
})
chart.area().position('label*value').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth')
chart.line().position('label*value').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth')
chart.render()
async getActivityCount() {
const resp = await $.post('/mobile/mine/getActivityCount', this.pageForm)
this.activityCount = resp.data
},
async init() {
await this.getTrainActivity()
await this.getVideo()
await this.getUserInfo()
await this.getActivityCount()
}
},
async created() {