372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<template>
|
||
<div style="min-width: 1100px">
|
||
<div class="page-top">
|
||
<!-- 工作区-->
|
||
<a-card :bordered="false" class="workspace">
|
||
<!-- 标题-->
|
||
<div class="home-part-title"><img src="@/assets/imgs/icon/icon_workspace.png"/>工作区</div>
|
||
<div class="divider"></div>
|
||
|
||
<div class="workspace-container">
|
||
<div class="workspace-item" @click="workspaceJump('/projectManagement/InternationalSeminar')">
|
||
<img src="@/assets/imgs/homePage/international-symposium.png"/>
|
||
<div class="workspace-item-text">国际研讨会</div>
|
||
</div>
|
||
<div class="workspace-item" @click="workspaceJump('/businessManagement/BusinessManagement')">
|
||
<img src="@/assets/imgs/homePage/company-management.png"/>
|
||
<div class="workspace-item-text">单位/开票信息审核</div>
|
||
</div>
|
||
<div class="workspace-item" @click="workspaceJump('/projectManagement/GeneralProjectManagement')">
|
||
<img src="@/assets/imgs/homePage/general-project.png"/>
|
||
<div class="workspace-item-text">普通项目</div>
|
||
</div>
|
||
<div class="workspace-item" @click="workspaceJump('/projectManagement/WorkingGroupProjectManagement')">
|
||
<img src="@/assets/imgs/homePage/working-group-project.png"/>
|
||
<div class="workspace-item-text">工作组项目</div>
|
||
</div>
|
||
<div class="workspace-item" @click="workspaceJump('/projectManagement/OtherMeeting')">
|
||
<img src="@/assets/imgs/homePage/other-meeting.png"/>
|
||
<div class="workspace-item-text">其他会议</div>
|
||
</div>
|
||
<div class="workspace-item" @click="workspaceJump('/contractManagement/RevenueContractList')">
|
||
<img src="@/assets/imgs/homePage/income-contract.png"/>
|
||
<div class="workspace-item-text">收入合同</div>
|
||
</div>
|
||
<div class="workspace-item" @click="workspaceJump('/projectManagement/CommitteeMaintenance')">
|
||
<img src="@/assets/imgs/homePage/committee-maintenance.png"/>
|
||
<div class="workspace-item-text">分标委维护</div>
|
||
</div>
|
||
</div>
|
||
|
||
</a-card>
|
||
|
||
<!-- 数据统计-->
|
||
<a-card :bordered="false" class="data-statistics">
|
||
<!-- 标题-->
|
||
<div class="home-part-title"><img src="@/assets/imgs/icon/icon_data_statistics.png"/>数据统计</div>
|
||
<div class="divider"></div>
|
||
|
||
<div class="data-statistics-container">
|
||
<div class="data-statistics-item bg-payment">
|
||
<div class="item-left">
|
||
本月新增收款项
|
||
</div>
|
||
<a-tooltip>
|
||
<template slot="title">{{ indexStyle.toString() }}</template>
|
||
<div class="item-right">{{ indexStyle.toString().slice(0, 3) }}</div>
|
||
</a-tooltip>
|
||
</div>
|
||
|
||
<div class="data-statistics-item bg-account">
|
||
<div class="item-left">
|
||
本月到账(万元)
|
||
</div>
|
||
<a-tooltip>
|
||
<template slot="title"></template>
|
||
<div class="item-right"></div>
|
||
</a-tooltip>
|
||
</div>
|
||
|
||
<div class="data-statistics-item bg-mail">
|
||
<div class="item-left">
|
||
本月邮寄项
|
||
</div>
|
||
<a-tooltip>
|
||
<template slot="title"></template>
|
||
<div class="item-right"></div>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
|
||
<div>
|
||
<!-- 统计报表-->
|
||
<a-card :bordered="false" class="statistical-reports">
|
||
<!-- 标题-->
|
||
<div class="home-part-title"><img src="@/assets/imgs/icon/icon_home_report.png"/>统计报表</div>
|
||
<div class="divider"></div>
|
||
|
||
<div class="statistical-reports-container">
|
||
<!-- 个人统计and科室统计-->
|
||
<div class="container-box">
|
||
<!-- 个人统计-->
|
||
<div class="container-item">
|
||
<div class="container-item-title">个人统计（前10）</div>
|
||
<div class="container-item-echarts" id="personalStatistics"></div>
|
||
</div>
|
||
<div class="container-item">
|
||
<div class="container-item-title">科室统计（前10）</div>
|
||
<div class="container-item-echarts" id="departStatistics"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 工作组统计and企业统计-->
|
||
<div class="container-box">
|
||
<!-- 个人统计-->
|
||
<div class="container-item">
|
||
<div class="container-item-title">工作组统计（前10）</div>
|
||
<div class="container-item-echarts" id="workingGroupStatistics"></div>
|
||
</div>
|
||
<div class="container-item">
|
||
<div class="container-item-title">企业统计（前10）</div>
|
||
<div class="container-item-echarts" id="companyStatistics"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
|
||
|
||
export default {
|
||
name: 'Analysis',
|
||
components: {},
|
||
data() {
|
||
return {
|
||
indexStyle: 1111111111111,
|
||
// 屏幕宽度
|
||
screenWidth: document.body.clientWidth,
|
||
option: {
|
||
legend: {
|
||
type: 'plain',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 20,
|
||
bottom: 20,
|
||
itemGap: 20,
|
||
itemWidth: 15,
|
||
data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads', 'Search Engine1', 'Direct1', 'Email1', 'Union Ads1', 'Video Ads1']
|
||
},
|
||
color: ['#117FFA', '#06A1B3', '#6D62FF', '#60C39A', '#31C5E1'],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
left: 0,
|
||
width: '50%',
|
||
label: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: true
|
||
},
|
||
data: [
|
||
{ value: 1048, name: 'Search Engine' },
|
||
{ value: 735, name: 'Direct' },
|
||
{ value: 580, name: 'Email' },
|
||
{ value: 484, name: 'Union Ads' },
|
||
{ value: 300, name: 'Video Ads' },
|
||
{ value: 1048, name: 'Search Engine1' },
|
||
{ value: 735, name: 'Direct1' },
|
||
{ value: 580, name: 'Email1' },
|
||
{ value: 484, name: 'Union Ads1' },
|
||
{ value: 300, name: 'Video Ads1' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
screenWidth(value) {
|
||
console.log(value)
|
||
}
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.initPersonalStatisticsEcharts()
|
||
},0)
|
||
},
|
||
methods: {
|
||
initPersonalStatisticsEcharts() {
|
||
let personalBox = document.getElementById('personalStatistics')
|
||
let personalEchart = echarts.init(personalBox)
|
||
personalEchart.setOption(this.option)
|
||
window.addEventListener('resize', () => {
|
||
personalEchart.resize()
|
||
})
|
||
},
|
||
/**
|
||
* 工作区按钮跳转
|
||
* @param path
|
||
*/
|
||
workspaceJump(path) {
|
||
this.$router.push({
|
||
path: path
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
//上部分整体
|
||
.page-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
//各部分的title
|
||
.home-part-title {
|
||
font-size: 16px;
|
||
font-family: PingFang SC, PingFang SC-Medium;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
& > img {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
//标题下横线
|
||
.divider {
|
||
height: 2px;
|
||
background-color: #F0F2F5;
|
||
margin: 20px -24px;
|
||
}
|
||
|
||
//工作区
|
||
.workspace {
|
||
margin-right: 10px;
|
||
width: calc(50% - 10px);
|
||
|
||
&-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&-item {
|
||
width: 13%;
|
||
max-width: 80px;
|
||
height: 130px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
& > img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
&-text {
|
||
height: 40px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
font-size: 16px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
//数据统计
|
||
.data-statistics {
|
||
margin-left: 10px;
|
||
width: calc(50% - 10px);
|
||
|
||
&-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&-item {
|
||
width: calc(33% - 10px);
|
||
height: 130px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.item-left {
|
||
flex-shrink: 0;
|
||
width: 60%;
|
||
padding-left: 15px;
|
||
height: 100%;
|
||
padding-top: 45px;
|
||
font-size: 18px;
|
||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.item-right {
|
||
padding-right: 10px;
|
||
cursor: pointer;
|
||
max-height: 105px;
|
||
font-size: 36px;
|
||
font-family: Acre, Acre-Medium;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
color: #ffffff;
|
||
line-height: 45px;
|
||
//word-break: break-all;
|
||
overflow: hidden;
|
||
//display: -webkit-box;
|
||
//-webkit-box-orient: vertical;
|
||
//-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.bg-payment {
|
||
background: url("../../assets/imgs/homePage/bg-payment.png") 100%;
|
||
}
|
||
|
||
.bg-account {
|
||
background: url("../../assets/imgs/homePage/bg-account.png") 100%;
|
||
}
|
||
|
||
.bg-mail {
|
||
background: url("../../assets/imgs/homePage/bg-mail.png") 100%;
|
||
}
|
||
}
|
||
|
||
//统计报表
|
||
.statistical-reports {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.container-box {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.container-item {
|
||
width: calc(50% - 10px);
|
||
box-shadow: -4px 0px 24px 24px rgba(51, 51, 51, 0.05);
|
||
border: 1px solid #f5f5f5;
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
padding: 20px;box-sizing: border-box;
|
||
|
||
&-title {
|
||
font-size: 16px;
|
||
font-family: PingFang SC, PingFang SC-Medium;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
&-echarts {
|
||
//position: absolute;
|
||
width: 100%;
|
||
height: 200px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|