hywen
/
YNUtdPlatform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页数据渲染完毕

This commit is contained in:
BianLzhaoMin 2024-10-14 16:07:13 +08:00
parent 078d711a72
commit 42ca3ba518
1 changed files with 203 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

408
pages/realName/index/index.vue
View File

@ -10,9 +10,9 @@
:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
/>
<scroll-view :scroll-top="scrollTop" scroll-y="true">
<scroll-view scroll-y="true">
<!-- 轮播图区域 -->
<swiper class="swiper-container" circular indicator-dots>
<swiper class="swiper-container" interval="3000" circular indicator-dots>
<!-- 轮播图 1 -->
<swiper-item class="item_1 swiper-item-container">
<view>
@ -21,9 +21,9 @@
src="../../../static/images/img-phase-two/index_img_one_person.png"
mode=""
></image>
<text>今日考勤：6</text>
<text>固定人员：6</text>
<text>临时人员：0</text>
<text>今日考勤：{{ attPersonNum }}</text>
<text>固定人员：{{ einFormalAttPersonNum }}</text>
<text>临时人员：{{ einTemporaryAttPersonNum }}</text>
</view>
<view>
<image
@ -31,8 +31,8 @@
src="../../../static/images/img-phase-two/index_img_one_att.png"
mode=""
></image>
<text>在场考勤率：80.6%</text>
<text>计划考勤率：89.4%</text>
<text>在场考勤率：{{ ((attPersonNum / einPersonNum) * 100).toFixed(2) }}%</text>
<text>计划考勤率：{{ ((planAttNum / planPersonNum) * 100).toFixed(2) }}%</text>
<text class="none-box">计划考勤率：20%</text>
</view>
</swiper-item>
@ -47,10 +47,10 @@
<text>今日风险</text>
</view>
<view>
<text>高风险：{{ einPersonNum }}</text>
<text>高风险：{{ highRiskNum }}</text>
<text>中风险：{{ mediumRiskNum }}</text>
<text>低风险：{{ lowRiskNum }}</text>
<text>计划作业人数：{{ planProNum }}</text>
<text>计划作业人数：{{ planPersonNum }}</text>
</view>
</swiper-item>
<!-- 轮播图 3 -->
@ -62,8 +62,8 @@
mode=""
></image>
<text>在场人数：{{ einPersonNum }}</text>
<text>固定人数：{{ attPersonNum }}</text>
<text>临时人数：{{ planPersonNum }}</text>
<text>固定人数：{{ formalPersonNum }}</text>
<text>临时人数：{{ temporaryPersonNum }}</text>
</view>
<view>
<image
@ -71,9 +71,9 @@
src="../../../static/images/img-phase-two/index_img_three_light.png"
mode=""
></image>
<text>绿灯人数：{{ greenPersonNum }}</text>
<text>黄灯人数：{{ yellowPersonNum }}</text>
<text>红灯灯人数：{{ redPersonNum }}</text>
<text>绿灯人数：{{ greenNum }}</text>
<text>黄灯人数：{{ yellowNum }}</text>
<text>红灯人数：{{ redNum }}</text>
</view>
</swiper-item>
<swiper-item class="item_4 swiper-item-container">
@ -89,7 +89,7 @@
<text>在建工程：{{ buildProNum }}</text>
<text>投入分包：{{ subNum }}</text>
<text>在用班组：{{ teamNum }}</text>
<text>在场人员：{{ formalPersonNum }}</text>
<text>在场人员：{{ einPersonNum }}</text>
</view>
</swiper-item>
</swiper>
@ -104,7 +104,7 @@
:speed="30"
background-color="#fff"
scrollable
text="高风险：0 中风险：0 低风险：0 作业计划人数：0"
:text="noticeText"
></uni-notice-bar>
</view>
</view>
@ -174,35 +174,35 @@
<view class="person-content">
<view>
<image class="person-img" src="../../../static/images/img-phase-two/index_green_light.png" mode=""></image>
<text class="text-strong">83.67%</text>
<text>5294</text>
<text class="text-strong">{{ ((greenNum / colorAmount) * 100).toFixed(2) }}%</text>
<text>{{ greenNum }}</text>
</view>
<view>
<image class="person-img" src="../../../static/images/img-phase-two/index_yellow_light.png" mode=""></image>
<text class="text-strong">83.67%</text>
<text>5294</text>
<text class="text-strong">{{ ((yellowNum / colorAmount) * 100).toFixed(2) }}%</text>
<text>{{ yellowNum }}</text>
</view>
<view>
<image class="person-img" src="../../../static/images/img-phase-two/index_red_light.png" mode=""></image>
<text class="text-strong">83.67%</text>
<text>5294</text>
<text class="text-strong">{{ ((redNum / colorAmount) * 100).toFixed(2) }}%</text>
<text>{{ redNum }}</text>
</view>
</view>
<view class="gender-content">
<view class="man-left">
<view>
<view>87.58%</view>
<view>男(633)</view>
<view>{{ ((maleNum / sexAmount) * 100).toFixed(2) }}%</view>
<view>男({{ maleNum }})</view>
</view>
<view class="gender-img" style="margin-left: 30rpx">图片占位</view>
<view class="gender-img" style="margin-left: 30rpx; background-color: #67cde6"></view>
</view>
<view class="girl-right">
<view class="gender-img" style="margin-right: 30rpx">图片占位</view>
<view class="gender-img" style="margin-right: 30rpx; background-color: #fc8483"></view>
<view>
<view>87.58%</view>
<view>女(755)</view>
<view>{{ ((femaleNum / sexAmount) * 100).toFixed(2) }}%</view>
<view>女({{ femaleNum }})</view>
</view>
</view>
</view>
@ -216,7 +216,7 @@
src="../../../static/images/img-phase-two/index_img_person.png"
mode=""
></image>
5560
{{ formalPersonNum }}
</view>
<view style="color: #fd8d01">
<image
@ -224,16 +224,25 @@
src="../../../static/images/img-phase-two/index_img_person.png"
mode=""
></image>
767
{{ temporaryPersonNum }}
</view>
</view>
<view class="person-num-progress">
<progress activeColor="#52bff3" backgroundColor="#fac13b" percent="60" stroke-width="6" />
<progress
activeColor="#52bff3"
backgroundColor="#fac13b"
:percent="(formalPersonNum / (formalPersonNum + temporaryPersonNum)) * 100"
stroke-width="6"
/>
</view>
<view class="person-proportion">
<text style="color: #04cdfa">固定占比87.88%</text>
<text style="color: #fd8d01">流动占比12.122%</text>
<text style="color: #04cdfa">
固定占比{{ ((formalPersonNum / (formalPersonNum + temporaryPersonNum)) * 100).toFixed(2) }}%
</text>
<text style="color: #fd8d01">
流动占比 {{ ((temporaryPersonNum / (formalPersonNum + temporaryPersonNum)) * 100).toFixed(2) }}%
</text>
</view>
<view class="charts_container">
@ -270,95 +279,81 @@ export default {
userId: uni.getStorageSync('userId'),
tabbar: TabbarConfig,
imgList: [
{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
msgList: [],
dataOverviewList: [
{
data_title: '在建工程',
data_num: 170,
data_num: 0,
data_img_src: '../../../static/images/img-phase-two/index_img_pro.png'
},
{
data_title: '在用分包单位',
data_num: 170,
data_num: 0,
data_img_src: '../../../static/images/img-phase-two/index_img_sub.png'
},
{
data_title: '在用班组',
data_num: 170,
data_num: 0,
data_img_src: '../../../static/images/img-phase-two/index_img_team.png'
},
{
data_title: '在场人数',
data_num: 170,
data_num: 0,
data_img_src: '../../../static/images/img-phase-two/index_img_person.png'
},
{
data_title: '日计划打卡数',
data_num: 170,
data_num: 0,
data_img_src: '../../../static/images/img-phase-two/index_img_plan_person.png'
},
{
data_title: '今日打卡',
data_num: 170,
data_num: 0,
data_img_src: '../../../static/images/img-phase-two/index_img_att.png'
}
],
progressList: [
{
progress_title: '在场出勤率',
progress_proportion: 10,
progress_amount: 6325,
progress_ready: 200,
progress_title: '在场考勤率',
progress_proportion: 0,
progress_amount: 0,
progress_ready: 0,
textColor: '#17cef3'
},
{
progress_title: '作业考勤率',
progress_proportion: 10,
progress_amount: 6325,
progress_ready: 200,
progress_proportion: 0,
progress_amount: 0,
progress_ready: 0,
textColor: '#25c294'
},
{
progress_title: '在场人员（固定）',
progress_proportion: 10,
progress_amount: 6325,
progress_ready: 200,
progress_proportion: 0,
progress_amount: 0,
progress_ready: 0,
textColor: '#f2df55'
},
{
progress_title: '在场人员（临时）',
progress_proportion: 10,
progress_amount: 6325,
progress_ready: 200,
progress_proportion: 0,
progress_amount: 0,
progress_ready: 0,
textColor: '#186ff0'
},
{
progress_title: '考勤率（固定人员）',
progress_proportion: 10,
progress_amount: 6325,
progress_ready: 200,
progress_proportion: 0,
progress_amount: 0,
progress_ready: 0,
textColor: '#f9971e'
},
{
progress_title: '考勤率（临时人员）',
progress_proportion: 10,
progress_amount: 6325,
progress_ready: 200,
progress_proportion: 0,
progress_amount: 0,
progress_ready: 0,
textColor: '#f44d46'
}
],
@ -366,46 +361,65 @@ export default {
projectList: [
{
project_title: '在建',
project_ratio: 30,
project_num: 160,
project_ratio: 0,
project_num: 0,
textColor: '#186ff0'
},
{
project_title: '筹建',
project_ratio: 30,
project_num: 160,
project_ratio: 0,
project_num: 0,
textColor: '#f2df55'
},
{
project_title: '停工',
project_ratio: 30,
project_num: 160,
project_ratio: 0,
project_num: 0,
textColor: '#f9971e'
},
{
project_title: '完工',
project_ratio: 30,
project_num: 160,
project_ratio: 0,
project_num: 0,
textColor: '#25c294'
}
],
/* 轮播图数据源 */
einPersonNum: 0,
attPersonNum: 0,
einFormalAttPersonNum: 0,
einTemporaryAttPersonNum: 0,
highRiskNum: 0,
mediumRiskNum: 0,
lowRiskNum: 0,
planProNum: 0,
redPersonNum: 0,
yellowPersonNum: 0,
greenPersonNum: 0,
einPersonNum: 0,
attPersonNum: 0,
planPersonNum: 0,
einPersonNum: 0,
formalPersonNum: 0,
temporaryPersonNum: 0,
greenNum: 0,
yellowNum: 0,
redNum: 0,
buildProNum: 0,
subNum: 0,
teamNum: 0,
subNum: 0,
formalPersonNum: 0
planAttNum: 0,
noticeText: '',
maleNum: 0,
femaleNum: 0,
sexAmount: 0
// planProNum: 0,
// redPersonNum: 0,
// yellowPersonNum: 0,
// greenPersonNum: 0,
// buildProNum: 0,
// subNum: 0,
// teamNum: 0,
// subNum: 0
// formalPersonNum: 0
}
},
onLoad() {
@ -496,126 +510,106 @@ export default {
})
},
/* 初始化图表 */
async initChart() {
// 等待 canvas 元素渲染完成（对于 H5 环境可能需要）
// const pieChartDom = document.getElementById('pieChartDom')
const query = uni.createSelectorQuery()
const pieChartDom = query
.select('#pieChartDom')
.boundingClientRect(data => {
console.log(data)
})
.exec()
this.pieChart = echarts.init(pieChartDom)
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
// 使用刚指定的配置项和数据显示图表
this.pieChart.setOption(option)
// console.log('初始化图表--')
// await this.$nextTick()
// 获取元素
// const pieChartRef = this.$refs.pieChartRef
// console.log('pieChartRef', pieChartRef)
// // 初始化 ECharts 实例
// this.pieChart = echarts.init(pieChartRef)
// console.log(' this.pieChart', this.pieChart)
// 设置图表配置项
// const option = {
// // ...具体的图表配置项
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b} : {c} ({d}%)'
// },
// legend: {
// orient: 'vertical',
// x: 'right',
// y: 'center',
// itemGap: 4,
// icon: 'rect',
// align: 'left'
// // data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
// },
// series: [
// {
// name: 'Radius Mode',
// type: 'pie',
// radius: [20, 140],
// center: ['25%', '50%'],
// roseType: 'radius',
// itemStyle: {
// borderRadius: 5
// },
// label: {
// show: false
// },
// emphasis: {
// label: {
// show: true
// }
// },
// data: [
// { value: 40, name: 'rose 1' },
// { value: 33, name: 'rose 2' },
// { value: 28, name: 'rose 3' },
// { value: 22, name: 'rose 4' },
// { value: 20, name: 'rose 5' },
// { value: 15, name: 'rose 6' },
// { value: 12, name: 'rose 7' },
// { value: 10, name: 'rose 8' }
// ]
// }
// ]
// }
// 载入图表
this.pieChart.setOption(option)
},
/* 获取首页数据 */
async getHomePageListData() {
const { data: res } = await getHomePageListApi({})
// console.log('首页数据', res)
// this.swiperInfo = res
this.einPersonNum = res.personAtt.highRiskNum
this.mediumRiskNum = res.personAtt.mediumRiskNum
this.lowRiskNum = res.personAtt.lowRiskNum
this.planProNum = res.personAtt.planProNum
this.redPersonNum = res.personAtt.redPersonNum
this.yellowPersonNum = res.personAtt.yellowPersonNum
this.greenPersonNum = res.personAtt.greenPersonNum
console.log('首页数据', res)
this.einPersonNum = res.personAtt.einPersonNum
this.attPersonNum = res.personAtt.attPersonNum
this.planPersonNum = res.personAtt.planPersonNum
const { homePageBean, personAtt, workerMsgBean, proMsgBean } = res
const { highRiskNum, mediumRiskNum, lowRiskNum, planPersonNum } = homePageBean
const { buildProNum, prepareProNum, stopProNum, completeProNum } = proMsgBean
this.noticeText = `高风险:${highRiskNum} 中风险:${mediumRiskNum} 低风险:${lowRiskNum} 作业计划人数:${planPersonNum}`
this.highRiskNum = homePageBean.highRiskNum
this.mediumRiskNum = homePageBean.mediumRiskNum
this.lowRiskNum = homePageBean.lowRiskNum
this.planPersonNum = homePageBean.planPersonNum
this.buildProNum = res.personAtt.buildProNum
this.teamNum = res.personAtt.teamNum
this.subNum = res.personAtt.subNum
this.formalPersonNum = res.personAtt.formalPersonNum
this.attPersonNum = personAtt.attPersonNum
this.einFormalAttPersonNum = personAtt.einFormalAttPersonNum
this.einTemporaryAttPersonNum = personAtt.einTemporaryAttPersonNum
this.planAttNum = personAtt.planAttNum
this.einPersonNum = homePageBean.einPersonNum
this.formalPersonNum = personAtt.formalPersonNum
this.temporaryPersonNum = personAtt.temporaryPersonNum
this.greenNum = workerMsgBean.greenNum
this.yellowNum = workerMsgBean.yellowNum
this.redNum = workerMsgBean.redNum
this.maleNum = workerMsgBean.maleNum
this.femaleNum = workerMsgBean.femaleNum
this.sexAmount = this.maleNum + this.femaleNum
this.colorAmount = this.greenNum + this.yellowNum + this.redNum
this.buildProNum = homePageBean.buildProNum
this.subNum = homePageBean.subNum
this.teamNum = homePageBean.teamNum
// this.einPersonNum = homePageBean.einPersonNum
this.dataOverviewList[0].data_num = this.buildProNum
this.dataOverviewList[1].data_num = this.subNum
this.dataOverviewList[2].data_num = this.teamNum
this.dataOverviewList[3].data_num = this.einPersonNum
this.dataOverviewList[4].data_num = this.planAttNum
this.dataOverviewList[5].data_num = this.attPersonNum
this.progressList.forEach((e, i) => {
if (i === 0 || i === 2 || i === 3) {
e.progress_amount = this.einPersonNum
}
if (i === 0) {
e.progress_ready = this.attPersonNum
}
if (i === 1) {
e.progress_amount = this.planPersonNum
e.progress_ready = this.planAttNum
}
if (i === 2) {
e.progress_ready = this.formalPersonNum
}
if (i === 3) {
e.progress_ready = this.temporaryPersonNum
}
if (i === 4) {
e.progress_amount = this.formalPersonNum
e.progress_ready = this.einFormalAttPersonNum
}
if (i === 5) {
e.progress_amount = this.einTemporaryAttPersonNum
e.progress_ready = this.einTemporaryAttPersonNum
}
e.progress_proportion = ((e.progress_ready / e.progress_amount) * 100).toFixed(0)
})
console.log('this.progressList', this.progressList)
const proAmount = buildProNum + prepareProNum + stopProNum + completeProNum
this.projectList.forEach((e, i) => {
if (i === 0) {
e.project_num = buildProNum
}
if (i === 1) {
e.project_num = prepareProNum
}
if (i === 2) {
e.project_num = stopProNum
}
if (i === 3) {
e.project_num = completeProNum
}
e.project_ratio = ((e.project_num / proAmount) * 100).toFixed(0)
})
// this.planProNum = res.personAtt.planProNum
// this.redPersonNum = res.personAtt.redPersonNum
// this.yellowPersonNum = res.personAtt.yellowPersonNum
// this.greenPersonNum = res.personAtt.greenPersonNum
// this.buildProNum = res.personAtt.buildProNum
// this.teamNum = res.personAtt.teamNum
// this.subNum = res.personAtt.subNum
// this.formalPersonNum = res.personAtt.formalPersonNum
}
},
onShow() {}
@ -1001,4 +995,8 @@ export default {
height: 460rpx;
margin: 0 auto;
}
.gender-img {
border-radius: 18rpx;
}
</style>