【开发】首页统计开发
This commit is contained in:
fengachen
@@ -0,0 +1,193 @@
|
|||||||
|
<!--企业合同金额前十-->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">企业客户统计（合同额前十）</div>
|
||||||
|
<div class="echarts-box" id="allMoney"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||||
|
import {getAction} from '@api/manage'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AllMoneyTenEcharts',
|
||||||
|
mixins: [JeroListMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disableMixinCreated: true,
|
||||||
|
url: {
|
||||||
|
list: '/statistics/allProjectStatistics/listDepartment',
|
||||||
|
},
|
||||||
|
// 给定当年作为来款年份默认查询条件
|
||||||
|
queryParam: {
|
||||||
|
year: new Date().getFullYear().toString()
|
||||||
|
},
|
||||||
|
lastQueryParam: {
|
||||||
|
year: new Date().getFullYear().toString()
|
||||||
|
},
|
||||||
|
echartsData: {
|
||||||
|
allMoney: [],
|
||||||
|
confirmAmount: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadData(1)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadData(arg) {
|
||||||
|
if (!this.url.list) {
|
||||||
|
this.$message.error('请设置url.list属性!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//加载数据 若传入参数1则加载第一页的内容
|
||||||
|
if (arg === 1) {
|
||||||
|
this.ipagination.current = 1
|
||||||
|
}
|
||||||
|
let params = this.getQueryParams()//查询条件
|
||||||
|
this.loading = true
|
||||||
|
getAction(this.url.list, params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.initEcharts(res.result.pageList.records)
|
||||||
|
}
|
||||||
|
if (res.code === 510) {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
this.loading = false
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initEcharts(data) {
|
||||||
|
console.log(data)
|
||||||
|
// 处理 x轴数据
|
||||||
|
let xData = data.reduce((pre, val) => {
|
||||||
|
return pre.concat(val.departName || '')
|
||||||
|
}, [])
|
||||||
|
// 处理y轴数据
|
||||||
|
data.map(item => {
|
||||||
|
this.echartsData.allMoney.push(item.allMoney)
|
||||||
|
this.echartsData.confirmAmount.push(item.confirmAmount)
|
||||||
|
})
|
||||||
|
|
||||||
|
let chartDom = document.getElementById('allMoney')
|
||||||
|
let myChart = echarts.init(chartDom)
|
||||||
|
let option
|
||||||
|
|
||||||
|
option = {
|
||||||
|
color:['#069F99','#FFA17A'],
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: '2%'
|
||||||
|
},
|
||||||
|
tooltip:{
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: params => {
|
||||||
|
// 获取xAxis data中的数据
|
||||||
|
let dataStr = ''
|
||||||
|
params.forEach(item => {
|
||||||
|
dataStr += `<div>
|
||||||
|
<div style="margin: 0 8px;">
|
||||||
|
<div>
|
||||||
|
<span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${item.color};border-radius: 3px"></span>
|
||||||
|
<span style="color:#666">${item.seriesName}</span>
|
||||||
|
</div>
|
||||||
|
<div style="color:#333;">${item.data}</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
return dataStr
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#999'
|
||||||
|
},
|
||||||
|
// 刻度线设置
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
data: xData
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'合同金额',
|
||||||
|
data: this.echartsData.allMoney,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle:{
|
||||||
|
borderRadius:[8,8,0,0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'确认收入金额',
|
||||||
|
data: this.echartsData.confirmAmount,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle:{
|
||||||
|
borderRadius:[8,8,0,0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,573 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="min-width: 1100px">
|
<div style="min-width: 1100px">
|
||||||
<!-- <div class="page-top">-->
|
<!-- 其他人展示消息-->
|
||||||
<!-- <!– 工作区–>-->
|
<template v-if="roleCoe">
|
||||||
<!-- <a-card :bordered="false" class="workspace">-->
|
<user-announcement-list :is-show-seach="true"></user-announcement-list>
|
||||||
<!-- <!– 标题–>-->
|
<div class="download">
|
||||||
<!-- <div class="home-part-title"><img src="@/assets/imgs/icon/icon_workspace.png"/>工作区</div>-->
|
点击下载<span class="primary-color" @click="downloadManual">管理端使用手册</span>
|
||||||
<!-- <div class="divider"></div>-->
|
<span style="margin-left: 10px">技术支持电话：022-84379290</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 所领导 部门领导展示统计图 -->
|
||||||
|
<template v-else>
|
||||||
|
<!-- 全所收入统计 单月-->
|
||||||
|
<single-month-echarts class="single-month"></single-month-echarts>
|
||||||
|
<!-- 全所收入统计 单月-->
|
||||||
|
|
||||||
<!-- <div class="workspace-container">-->
|
<!-- 全所收入统计 累计-->
|
||||||
<!-- <div class="workspace-item" @click="workspaceJump('/projectManagement/InternationalSeminar')">-->
|
<single-month-total-echarts class="single-month-total m-t-10"></single-month-total-echarts>
|
||||||
<!-- <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>-->
|
<section class="wrap">
|
||||||
|
<!-- 科室总体统计 -->
|
||||||
|
<department-total-echarts class="depart-total m-t-10"></department-total-echarts>
|
||||||
|
<!-- 科室总体统计 -->
|
||||||
|
|
||||||
<!-- <!– 数据统计–>-->
|
<!-- 收入分类统计 -->
|
||||||
<!-- <a-card :bordered="false" class="data-statistics">-->
|
<income-sort-echarts class="income-sort m-t-10"></income-sort-echarts>
|
||||||
<!-- <!– 标题–>-->
|
<!-- 收入分类统计 -->
|
||||||
<!-- <div class="home-part-title"><img src="@/assets/imgs/icon/icon_data_statistics.png"/>数据统计</div>-->
|
</section>
|
||||||
<!-- <div class="divider"></div>-->
|
|
||||||
|
|
||||||
<!-- <div class="data-statistics-container">-->
|
<!-- 企业客户统计（合同额前十）-->
|
||||||
<!-- <div class="data-statistics-item bg-payment">-->
|
<all-money-ten-echarts class="all-money m-t-10"></all-money-ten-echarts>
|
||||||
<!-- <div class="item-left">-->
|
<!-- 企业客户统计（合同额前十）-->
|
||||||
<!-- 本月新增收款项-->
|
</template>
|
||||||
<!-- </div>-->
|
<!-- 所领导 部门领导展示统计图 -->
|
||||||
<!-- <a-tooltip>-->
|
|
||||||
<!-- <template slot="title">{{ statisticsData.nowMonthAddAmount }}</template>-->
|
|
||||||
<!-- <div class="item-right">{{ statisticsData.nowMonthShowAddAmount }}</div>-->
|
|
||||||
<!-- </a-tooltip>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="data-statistics-item bg-account">-->
|
|
||||||
<!-- <div class="item-left">-->
|
|
||||||
<!-- 本月到账(万元)-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <a-tooltip>-->
|
|
||||||
<!-- <template slot="title">{{ statisticsData.nowMonthAmount }}</template>-->
|
|
||||||
<!-- <div class="item-right">{{ statisticsData.nowMonthShowAmount }}</div>-->
|
|
||||||
<!-- </a-tooltip>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="data-statistics-item bg-mail">-->
|
|
||||||
<!-- <div class="item-left">-->
|
|
||||||
<!-- 本月邮寄项-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <a-tooltip>-->
|
|
||||||
<!-- <template slot="title">{{ statisticsData.nowMonthMail }}</template>-->
|
|
||||||
<!-- <div class="item-right">{{ statisticsData.nowMonthShowMail }}</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>-->
|
|
||||||
<!-- <template v-if="personalData.length > 0">-->
|
|
||||||
<!-- <div class="container-item-echarts" id="personalStatistics"></div>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- <a-empty v-else/>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="container-item">-->
|
|
||||||
<!-- <div class="container-item-title">科室统计（前10）</div>-->
|
|
||||||
<!-- <template v-if="departData.length > 0">-->
|
|
||||||
<!-- <div class="container-item-echarts" id="departStatistics"></div>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- <a-empty v-else/>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <!– 工作组统计and企业统计–>-->
|
|
||||||
<!-- <div class="container-box">-->
|
|
||||||
<!-- <!– 个人统计–>-->
|
|
||||||
<!-- <div class="container-item">-->
|
|
||||||
<!-- <div class="container-item-title">工作组统计（前10）</div>-->
|
|
||||||
<!-- <template v-if="workingGroupData.length > 0">-->
|
|
||||||
<!-- <div class="container-item-echarts" id="workingGroupStatistics"></div>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- <a-empty v-else/>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div class="container-item">-->
|
|
||||||
<!-- <div class="container-item-title">企业统计（前10）</div>-->
|
|
||||||
<!-- <template v-if="companyData.length > 0">-->
|
|
||||||
<!-- <div class="container-item-echarts" id="companyStatistics"></div>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- <a-empty v-else/>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </a-card>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<user-announcement-list :is-show-seach="true"></user-announcement-list>
|
|
||||||
<div class="download">
|
|
||||||
点击下载<span class="primary-color" @click="downloadManual">管理端使用手册</span>
|
|
||||||
<span style="margin-left: 10px">技术支持电话：022-84379290</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
|
||||||
import { homePageStatistics, homePageDataStatistics } from '../../api/incomePaymentsApi'
|
|
||||||
|
|
||||||
import UserAnnouncementList from '@views/system/UserAnnouncementList'
|
import UserAnnouncementList from '@views/system/UserAnnouncementList'
|
||||||
|
import SingleMonthEcharts from '@views/dashboard/SingleMonthEcharts'
|
||||||
|
import SingleMonthTotalEcharts from '@views/dashboard/SingleMonthTotalEcharts'
|
||||||
|
import DepartmentTotalEcharts from '@views/dashboard/DepartmentTotalEcharts'
|
||||||
|
import IncomeSortEcharts from '@views/dashboard/IncomeSortEcharts'
|
||||||
|
import AllMoneyTenEcharts from '@views/dashboard/AllMoneyTenEcharts'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Analysis',
|
name: 'Analysis',
|
||||||
components: {
|
components: {
|
||||||
UserAnnouncementList
|
UserAnnouncementList,
|
||||||
|
SingleMonthEcharts,
|
||||||
|
SingleMonthTotalEcharts,
|
||||||
|
DepartmentTotalEcharts,
|
||||||
|
IncomeSortEcharts,
|
||||||
|
AllMoneyTenEcharts
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 所领导 部门负责人 还是其他角色
|
||||||
|
roleCoe() {
|
||||||
|
return false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
// 数据统计数据
|
|
||||||
statisticsData: {},
|
|
||||||
// 屏幕宽度
|
|
||||||
screenWidth: document.body.clientWidth,
|
|
||||||
// 个人统计
|
|
||||||
personalData: [],
|
|
||||||
// 科室统计
|
|
||||||
departData: [],
|
|
||||||
// 工作组统计
|
|
||||||
workingGroupData: [],
|
|
||||||
// 企业统计
|
|
||||||
companyData: [],
|
|
||||||
// echartsOption
|
|
||||||
option: {
|
|
||||||
legend: {
|
|
||||||
type: 'plain',
|
|
||||||
orient: 'vertical',
|
|
||||||
width: 20,
|
|
||||||
right: 10,
|
|
||||||
top: 20,
|
|
||||||
bottom: 20,
|
|
||||||
itemGap: 30, // 图例间距
|
|
||||||
itemWidth: 13,
|
|
||||||
data: [],
|
|
||||||
formatter: function (name) {
|
|
||||||
return name.length > 7 ? name.substr(0, 7) + '...' : name
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
color: ['#117FFA', '#06A1B3', '#6D62FF', '#60C39A', '#31C5E1'],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['50%', '70%'],
|
|
||||||
left: 20,
|
|
||||||
width: '50%',
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center',
|
|
||||||
formatter: function (params) {
|
|
||||||
return params.name.length > 8 ? params.name.substr(0, 8) + '...' : params.name
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: '16',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// this.initDataStaticsData()
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.getStatisticsData().then(() => {
|
|
||||||
// this.initPersonalStatisticsEcharts()
|
|
||||||
// this.initDepartStatisticsEcharts()
|
|
||||||
// this.initWorkingGroupStatisticsEcharts()
|
|
||||||
// this.initCompanyStatisticsEcharts()
|
|
||||||
// })
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 下载使用手册
|
downloadManual() {
|
||||||
downloadManual(){
|
window.open('http://cwp.catarc.org.cn:8066/管理端使用手册.docx', '_self')
|
||||||
window.open('http://cwp.catarc.org.cn:8066/管理端使用手册.docx','_self')
|
|
||||||
},
|
},
|
||||||
getStatisticsData() {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
homePageStatistics().then(res => {
|
|
||||||
this.personalData = res.result.principalPeople
|
|
||||||
this.departData = res.result.depart
|
|
||||||
this.workingGroupData = res.result.payWorkingGroup
|
|
||||||
this.companyData = res.result.company
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
initDataStaticsData() {
|
|
||||||
homePageDataStatistics().then(res => {
|
|
||||||
this.statisticsData = res.result
|
|
||||||
// 2021-09-28 author:fac 后端修改了返回的数据格式 我加了toString
|
|
||||||
this.statisticsData.nowMonthShowAddAmount = res.result.nowMonthAddAmount.toString().slice(0, 3)
|
|
||||||
this.statisticsData.nowMonthShowAmount = res.result.nowMonthAmount.toString().slice(0, 3)
|
|
||||||
this.statisticsData.nowMonthShowMail = res.result.nowMonthMail.toString().slice(0, 3)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 初始化个人统计echarts
|
|
||||||
*/
|
|
||||||
initPersonalStatisticsEcharts() {
|
|
||||||
if (this.personalData.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let strData = this.personalData
|
|
||||||
let arr = []
|
|
||||||
strData.forEach(item => {
|
|
||||||
item.name = item.principalName
|
|
||||||
item.value = item.comeAllMoney
|
|
||||||
arr.push(item)
|
|
||||||
})
|
|
||||||
// IE不兼容的代码
|
|
||||||
// let strData = JSON.stringify(this.personalData)
|
|
||||||
// console.log(typeof strData)
|
|
||||||
// strData = strData.replaceAll('principalName', 'name').replaceAll('comeAllMoney', 'value')
|
|
||||||
// let arr = JSON.parse(strData)
|
|
||||||
arr.filter(tt => tt.value = Number(tt.value))
|
|
||||||
let legendData = []
|
|
||||||
arr.forEach(item => {
|
|
||||||
legendData.push(item.name)
|
|
||||||
})
|
|
||||||
let option = this.option
|
|
||||||
option.series[0].data = arr
|
|
||||||
option.legend.data = legendData
|
|
||||||
let personalBox = document.getElementById('personalStatistics')
|
|
||||||
let personalEchart = echarts.init(personalBox)
|
|
||||||
personalEchart.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
personalEchart.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 初始化科室统计echarts
|
|
||||||
*/
|
|
||||||
initDepartStatisticsEcharts() {
|
|
||||||
if (this.departData.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let strData = this.departData
|
|
||||||
let arr = []
|
|
||||||
strData.forEach(item => {
|
|
||||||
item.name = item.departName
|
|
||||||
item.value = item.comeAllMoney
|
|
||||||
arr.push(item)
|
|
||||||
})
|
|
||||||
// IE不兼容的代码
|
|
||||||
// let strData = JSON.stringify(this.departData)
|
|
||||||
// strData = strData.replaceAll('departName', 'name').replaceAll('comeAllMoney', 'value')
|
|
||||||
// let arr = JSON.parse(strData)
|
|
||||||
arr.filter(tt => tt.value = Number(tt.value))
|
|
||||||
let legendData = []
|
|
||||||
arr.forEach(item => {
|
|
||||||
legendData.push(item.name)
|
|
||||||
})
|
|
||||||
let option = this.option
|
|
||||||
option.series[0].data = arr
|
|
||||||
option.legend.data = legendData
|
|
||||||
let departBox = document.getElementById('departStatistics')
|
|
||||||
let departEchart = echarts.init(departBox)
|
|
||||||
departEchart.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
departEchart.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 初始化工作组统计echarts
|
|
||||||
*/
|
|
||||||
initWorkingGroupStatisticsEcharts() {
|
|
||||||
if (this.workingGroupData.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let strData = this.workingGroupData
|
|
||||||
let arr = []
|
|
||||||
strData.forEach(item => {
|
|
||||||
item.name = item.workGroup
|
|
||||||
item.value = item.comeAllMoney
|
|
||||||
arr.push(item)
|
|
||||||
})
|
|
||||||
// IE不兼容的代码
|
|
||||||
// let strData = JSON.stringify(this.workingGroupData)
|
|
||||||
// strData = strData.replaceAll('workGroup', 'name').replaceAll('comeAllMoney', 'value')
|
|
||||||
// let arr = JSON.parse(strData)
|
|
||||||
arr.filter(tt => tt.value = Number(tt.value))
|
|
||||||
let legendData = []
|
|
||||||
arr.forEach(item => {
|
|
||||||
legendData.push(item.name)
|
|
||||||
})
|
|
||||||
let option = this.option
|
|
||||||
option.series[0].data = arr
|
|
||||||
option.legend.data = legendData
|
|
||||||
let departBox = document.getElementById('workingGroupStatistics')
|
|
||||||
let departEchart = echarts.init(departBox)
|
|
||||||
departEchart.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
departEchart.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 初始化企业统计echarts
|
|
||||||
*/
|
|
||||||
initCompanyStatisticsEcharts() {
|
|
||||||
if (this.companyData.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let strData = this.companyData
|
|
||||||
let arr = []
|
|
||||||
strData.forEach(item => {
|
|
||||||
item.name = item.chargeCompanyName
|
|
||||||
item.value = item.comeAllMoney
|
|
||||||
arr.push(item)
|
|
||||||
})
|
|
||||||
// IE不兼容的代码
|
|
||||||
// let strData = JSON.stringify(this.companyData)
|
|
||||||
// strData = strData.replaceAll('chargeCompanyName', 'name').replaceAll('comeAllMoney', 'value')
|
|
||||||
// let arr = JSON.parse(strData)
|
|
||||||
arr.filter(tt => tt.value = Number(tt.value))
|
|
||||||
let legendData = []
|
|
||||||
arr.forEach(item => {
|
|
||||||
legendData.push(item.name)
|
|
||||||
})
|
|
||||||
console.log(arr)
|
|
||||||
let option = this.option
|
|
||||||
option.series[0].data = arr
|
|
||||||
option.legend.data = legendData
|
|
||||||
let departBox = document.getElementById('companyStatistics')
|
|
||||||
let departEchart = echarts.init(departBox)
|
|
||||||
departEchart.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
departEchart.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 工作区按钮跳转
|
|
||||||
* @param path
|
|
||||||
*/
|
|
||||||
workspaceJump(path) {
|
|
||||||
this.$router.push({
|
|
||||||
path: path
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style lang="less" scoped>
|
||||||
//上部分整体
|
// 全所收入统计 单月
|
||||||
.page-top {
|
.single-month,
|
||||||
|
.single-month-total {
|
||||||
|
width: 100%;
|
||||||
|
height: 700px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-t-10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
//各部分的title
|
// 科室总体统计
|
||||||
.home-part-title {
|
.depart-total {
|
||||||
font-size: 16px;
|
width: 64%;
|
||||||
font-family: PingFang SC, PingFang SC-Medium;
|
min-width: 650px;
|
||||||
font-weight: 500;
|
height: auto;
|
||||||
color: #666666;
|
background: #fff;
|
||||||
display: flex;
|
}
|
||||||
align-items: center;
|
// 分类统计
|
||||||
|
.income-sort {
|
||||||
& > img {
|
margin-left: 8px;
|
||||||
margin-right: 10px;
|
width: 35%;
|
||||||
}
|
min-width: 350px;
|
||||||
|
height: auto;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
// 合同金额前十
|
||||||
|
.all-money {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
//标题下横线
|
|
||||||
.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 {
|
|
||||||
display: inline-block;
|
|
||||||
max-height: 68px;
|
|
||||||
max-width: 68px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
max-width: 100%;
|
|
||||||
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;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//数据统计
|
|
||||||
.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 {
|
|
||||||
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 {
|
|
||||||
flex-shrink: 0;
|
|
||||||
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: 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.download {
|
.download {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-color {
|
.primary-color {
|
||||||
color:#069F99;
|
color: #069F99;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,193 @@
|
|||||||
|
<!--科室总体统计-->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">科室总体统计</div>
|
||||||
|
<div class="echarts-box" id="departmentTotal"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||||
|
import {getAction} from '@api/manage'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DepartmentTotalEcharts',
|
||||||
|
mixins: [JeroListMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disableMixinCreated: true,
|
||||||
|
url: {
|
||||||
|
list: '/statistics/allProjectStatistics/listDepartment',
|
||||||
|
},
|
||||||
|
// 给定当年作为来款年份默认查询条件
|
||||||
|
queryParam: {
|
||||||
|
year: new Date().getFullYear().toString()
|
||||||
|
},
|
||||||
|
lastQueryParam: {
|
||||||
|
year: new Date().getFullYear().toString()
|
||||||
|
},
|
||||||
|
echartsData: {
|
||||||
|
allMoney: [],
|
||||||
|
confirmAmount: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadData(1)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadData(arg) {
|
||||||
|
if (!this.url.list) {
|
||||||
|
this.$message.error('请设置url.list属性!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//加载数据 若传入参数1则加载第一页的内容
|
||||||
|
if (arg === 1) {
|
||||||
|
this.ipagination.current = 1
|
||||||
|
}
|
||||||
|
let params = this.getQueryParams()//查询条件
|
||||||
|
this.loading = true
|
||||||
|
getAction(this.url.list, params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.initEcharts(res.result.pageList.records)
|
||||||
|
}
|
||||||
|
if (res.code === 510) {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
this.loading = false
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initEcharts(data) {
|
||||||
|
console.log(data)
|
||||||
|
// 处理 x轴数据
|
||||||
|
let xData = data.reduce((pre, val) => {
|
||||||
|
return pre.concat(val.departName || '')
|
||||||
|
}, [])
|
||||||
|
// 处理y轴数据
|
||||||
|
data.map(item => {
|
||||||
|
this.echartsData.allMoney.push(item.allMoney)
|
||||||
|
this.echartsData.confirmAmount.push(item.confirmAmount)
|
||||||
|
})
|
||||||
|
|
||||||
|
let chartDom = document.getElementById('departmentTotal')
|
||||||
|
let myChart = echarts.init(chartDom)
|
||||||
|
let option
|
||||||
|
|
||||||
|
option = {
|
||||||
|
color:['#069F99','#FFA17A'],
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: '2%'
|
||||||
|
},
|
||||||
|
tooltip:{
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: params => {
|
||||||
|
// 获取xAxis data中的数据
|
||||||
|
let dataStr = ''
|
||||||
|
params.forEach(item => {
|
||||||
|
dataStr += `<div>
|
||||||
|
<div style="margin: 0 8px;">
|
||||||
|
<div>
|
||||||
|
<span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${item.color};border-radius: 3px"></span>
|
||||||
|
<span style="color:#666">${item.seriesName}</span>
|
||||||
|
</div>
|
||||||
|
<div style="color:#333;">${item.data}</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
return dataStr
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#999'
|
||||||
|
},
|
||||||
|
// 刻度线设置
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
data: xData
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'合同金额',
|
||||||
|
data: this.echartsData.allMoney,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle:{
|
||||||
|
borderRadius:[8,8,0,0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'确认收入金额',
|
||||||
|
data: this.echartsData.confirmAmount,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle:{
|
||||||
|
borderRadius:[8,8,0,0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,135 @@
|
|||||||
|
<!-- 分类统计-->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">收入分类统计 </div>
|
||||||
|
<div class="operator">
|
||||||
|
<span @click="toggleEcharts('allMoney')" class="operator-left" :class="{'active':activeIndex === 'allMoney'}">合同额</span>
|
||||||
|
<span @click="toggleEcharts('confirmAmount')" class="operator-right" :class="{'active':activeIndex === 'confirmAmount'}">收入额</span>
|
||||||
|
</div>
|
||||||
|
<div class="echarts-box" id="incomeSort"> </div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'IncomeSortEcharts',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeIndex:'allMoney'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initEcharts()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
toggleEcharts(key) {
|
||||||
|
this.activeIndex = key
|
||||||
|
|
||||||
|
},
|
||||||
|
initEcharts() {
|
||||||
|
let chartDom = document.getElementById('incomeSort')
|
||||||
|
let myChart = echarts.init(chartDom)
|
||||||
|
let option
|
||||||
|
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom:'2%',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['30%', '60%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: '40',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: 'Search Engine' },
|
||||||
|
{ value: 735, name: 'Direct' },
|
||||||
|
{ value: 580, name: 'Email' },
|
||||||
|
{ value: 484, name: 'Union Ads' },
|
||||||
|
{ value: 300, name: 'Video Ads' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.operator {
|
||||||
|
color: #069F99;
|
||||||
|
position: absolute;
|
||||||
|
user-select: none;
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
border: 1px solid #069F99;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
&-left {
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-right {
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: #069F99;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.echarts-box {
|
||||||
|
min-width: 300px;
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,392 @@
|
|||||||
|
<!--全所收入 单月统计echarts-->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<!-- echarts-->
|
||||||
|
<div class="title">全所收入统计 (单月)</div>
|
||||||
|
<div class="echarts-box" id="singleMonthEcharts"></div>
|
||||||
|
<!-- echarts-->
|
||||||
|
|
||||||
|
<!-- 表格区域beign -->
|
||||||
|
<div style="width: 100%">
|
||||||
|
<a-table
|
||||||
|
ref="table"
|
||||||
|
size="middle"
|
||||||
|
bordered
|
||||||
|
rowKey="projectId"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll="{x: 1500}"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:pagination="false"
|
||||||
|
:loading="loading"
|
||||||
|
@change="handleTableChange"
|
||||||
|
class="j-table-force-nowrap main-table">
|
||||||
|
|
||||||
|
<template slot="text" slot-scope="text">
|
||||||
|
<a-tooltip>
|
||||||
|
<template slot="title">{{ text }}</template>
|
||||||
|
<div class="table-text">{{ text }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="allMoney" slot-scope="text">
|
||||||
|
<a-tooltip>
|
||||||
|
<template slot="title">{{ formatMoney(text) }}</template>
|
||||||
|
<div class="table-text">{{ formatMoney(text) }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
<!-- 表格区域end -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||||
|
import {MonthData} from '@views/statisticalReport/statisticData'
|
||||||
|
import {getAction} from '@api/manage'
|
||||||
|
import {formatMoney} from '@/utils/formatMoney'
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '',
|
||||||
|
align: 'center',
|
||||||
|
width: 150,
|
||||||
|
dataIndex: 'indexName',
|
||||||
|
scopedSlots: {customRender: 'text'}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
MonthData.map(tt => {
|
||||||
|
columns.push({
|
||||||
|
title: tt.name,
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
dataIndex: tt.key,
|
||||||
|
scopedSlots: {customRender: 'allMoney'}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SingleMonthEcharts',
|
||||||
|
mixins: [JeroListMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
url: {
|
||||||
|
list: '/index/lineChartList'
|
||||||
|
},
|
||||||
|
disableMixinCreated:true,
|
||||||
|
echartsData:{
|
||||||
|
allMoney:[],
|
||||||
|
confirmAmount:[],
|
||||||
|
billMoney:[],
|
||||||
|
comeAllMoney:[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadData(1)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatMoney,
|
||||||
|
loadData(arg) {
|
||||||
|
if (!this.url.list) {
|
||||||
|
this.$message.error('请设置url.list属性!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//加载数据 若传入参数1则加载第一页的内容
|
||||||
|
if (arg === 1) {
|
||||||
|
this.ipagination.current = 1
|
||||||
|
}
|
||||||
|
let params = this.getQueryParams()//查询条件
|
||||||
|
this.loading = true
|
||||||
|
getAction(this.url.list, params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
let dataSource = res.result
|
||||||
|
// 树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
|
||||||
|
let tableData = [
|
||||||
|
{indexName: '合同金额'},
|
||||||
|
{indexName: '确认收入金额'},
|
||||||
|
{indexName: '开票金额'},
|
||||||
|
{indexName: '到账金额'},
|
||||||
|
]
|
||||||
|
|
||||||
|
dataSource.map((item, index) => {
|
||||||
|
let keyItem = MonthData.find(ele => Number(ele.value) === (index + 1))
|
||||||
|
if (keyItem) {
|
||||||
|
let key = keyItem.key
|
||||||
|
tableData[0][key] = item.allMoney // 合同金额
|
||||||
|
tableData[1][key] = item.confirmAmount // 确认收入金额
|
||||||
|
tableData[2][key] = item.billMoney // 开票金额
|
||||||
|
tableData[3][key] = item.comeAllMoney // 到账金额
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.initEchartsData(res.result)
|
||||||
|
// 初始化 echarts
|
||||||
|
this.initEcharts()
|
||||||
|
this.dataSource = tableData
|
||||||
|
console.log(this.dataSource)
|
||||||
|
|
||||||
|
}
|
||||||
|
if (res.code === 510) {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 将后端返回的数据 处理成 echarts需要的数据 格式
|
||||||
|
initEchartsData(data) {
|
||||||
|
data.map(item =>{
|
||||||
|
this.echartsData.allMoney.push(item.allMoney)
|
||||||
|
this.echartsData.confirmAmount.push(item.confirmAmount)
|
||||||
|
this.echartsData.billMoney.push(item.billMoney)
|
||||||
|
this.echartsData.comeAllMoney.push(item.comeAllMoney)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initEcharts() {
|
||||||
|
// 处理x轴数据
|
||||||
|
let xData = MonthData.reduce((pre, val) => {
|
||||||
|
return pre.concat(val.name)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
let chartDom = document.getElementById('singleMonthEcharts')
|
||||||
|
let myChart = echarts.init(chartDom)
|
||||||
|
let option
|
||||||
|
|
||||||
|
option = {
|
||||||
|
color: ['#069F99', '#FA9F79', '#728ECC', '#88C87E'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: params => {
|
||||||
|
// 获取xAxis data中的数据
|
||||||
|
let dataStr = ''
|
||||||
|
params.forEach(item => {
|
||||||
|
dataStr += `<div>
|
||||||
|
<div style="margin: 0 8px;">
|
||||||
|
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
|
||||||
|
<span>${item.seriesName}</span>
|
||||||
|
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
return dataStr
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['合同金额', '确认收入金额', '开票金额', '到账金额'],
|
||||||
|
right: '2%'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {},
|
||||||
|
xAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#999999'
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: true,
|
||||||
|
// 刻度线设置
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: xData
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f2f2f2'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '合同金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.allMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#1BCDC6',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1BCDC6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '确认收入金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.confirmAmount,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#EBAB91',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#EBAB91'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '开票金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.billMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#9CB7F2',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#9CB7F2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '到账金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.comeAllMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#B6F1AC',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#B6F1AC'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table-thead tr > th {
|
||||||
|
color: #050525;
|
||||||
|
font-weight: bold;
|
||||||
|
background: rgb(245,245,246);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
/deep/ .ant-table-tbody tr > td {
|
||||||
|
color: rgba(5, 5, 37, 0.8);
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid rgb(245,245,246);
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table-tbody tr > td:first-child {
|
||||||
|
color: #050525;
|
||||||
|
font-weight: bold;
|
||||||
|
background: rgb(245,245,246);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,391 @@
|
|||||||
|
<!--全所收入 累计统计echarts-->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<!-- echarts-->
|
||||||
|
<div class="title">全所收入统计 (累计)</div>
|
||||||
|
<div class="echarts-box" id="singleMonthTotalEcharts"></div>
|
||||||
|
<!-- echarts-->
|
||||||
|
|
||||||
|
<!-- 表格区域beign -->
|
||||||
|
<div style="width: 100%">
|
||||||
|
<a-table
|
||||||
|
ref="table"
|
||||||
|
size="middle"
|
||||||
|
bordered
|
||||||
|
rowKey="projectId"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll="{x: 1500}"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:pagination="false"
|
||||||
|
:loading="loading"
|
||||||
|
@change="handleTableChange"
|
||||||
|
class="j-table-force-nowrap main-table">
|
||||||
|
|
||||||
|
<template slot="text" slot-scope="text">
|
||||||
|
<a-tooltip>
|
||||||
|
<template slot="title">{{ text }}</template>
|
||||||
|
<div class="table-text">{{ text }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="allMoney" slot-scope="text">
|
||||||
|
<a-tooltip>
|
||||||
|
<template slot="title">{{ formatMoney(text) }}</template>
|
||||||
|
<div class="table-text">{{ formatMoney(text) }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
<!-- 表格区域end -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||||
|
import {MonthDataTotal} from '@views/statisticalReport/statisticData'
|
||||||
|
import {getAction} from '@api/manage'
|
||||||
|
import {formatMoney} from '@/utils/formatMoney'
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '',
|
||||||
|
align: 'center',
|
||||||
|
width: 150,
|
||||||
|
dataIndex: 'indexName',
|
||||||
|
scopedSlots: {customRender: 'text'}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
MonthDataTotal.map(tt => {
|
||||||
|
columns.push({
|
||||||
|
title: tt.name,
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
dataIndex: tt.key,
|
||||||
|
scopedSlots: {customRender: 'allMoney'}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SingleMonthEcharts',
|
||||||
|
mixins: [JeroListMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
url: {
|
||||||
|
list: '/index/cumulativeGraphList'
|
||||||
|
},
|
||||||
|
disableMixinCreated:true,
|
||||||
|
echartsData:{
|
||||||
|
allMoney:[],
|
||||||
|
confirmAmount:[],
|
||||||
|
billMoney:[],
|
||||||
|
comeAllMoney:[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadData(1)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatMoney,
|
||||||
|
loadData(arg) {
|
||||||
|
if (!this.url.list) {
|
||||||
|
this.$message.error('请设置url.list属性!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//加载数据 若传入参数1则加载第一页的内容
|
||||||
|
if (arg === 1) {
|
||||||
|
this.ipagination.current = 1
|
||||||
|
}
|
||||||
|
let params = this.getQueryParams()//查询条件
|
||||||
|
this.loading = true
|
||||||
|
getAction(this.url.list, params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
let dataSource = res.result
|
||||||
|
// 树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
|
||||||
|
let tableData = [
|
||||||
|
{indexName: '合同金额'},
|
||||||
|
{indexName: '确认收入金额'},
|
||||||
|
{indexName: '开票金额'},
|
||||||
|
{indexName: '到账金额'},
|
||||||
|
]
|
||||||
|
|
||||||
|
dataSource.map((item, index) => {
|
||||||
|
let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
|
||||||
|
if (keyItem) {
|
||||||
|
let key = keyItem.key
|
||||||
|
tableData[0][key] = item.allMoney // 合同金额
|
||||||
|
tableData[1][key] = item.confirmAmount // 确认收入金额
|
||||||
|
tableData[2][key] = item.billMoney // 开票金额
|
||||||
|
tableData[3][key] = item.comeAllMoney // 到账金额
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.initEchartsData(res.result)
|
||||||
|
// 初始化 echarts
|
||||||
|
this.initEcharts()
|
||||||
|
this.dataSource = tableData
|
||||||
|
|
||||||
|
}
|
||||||
|
if (res.code === 510) {
|
||||||
|
this.$message.warning(res.message)
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 将后端返回的数据 处理成 echarts需要的数据 格式
|
||||||
|
initEchartsData(data) {
|
||||||
|
data.map(item =>{
|
||||||
|
this.echartsData.allMoney.push(item.allMoney)
|
||||||
|
this.echartsData.confirmAmount.push(item.confirmAmount)
|
||||||
|
this.echartsData.billMoney.push(item.billMoney)
|
||||||
|
this.echartsData.comeAllMoney.push(item.comeAllMoney)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initEcharts() {
|
||||||
|
// 处理x轴数据
|
||||||
|
let xData = MonthDataTotal.reduce((pre, val) => {
|
||||||
|
return pre.concat(val.name)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
let chartDom = document.getElementById('singleMonthTotalEcharts')
|
||||||
|
let myChart = echarts.init(chartDom)
|
||||||
|
let option
|
||||||
|
|
||||||
|
option = {
|
||||||
|
color: ['#069F99', '#FA9F79', '#728ECC', '#88C87E'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: params => {
|
||||||
|
// 获取xAxis data中的数据
|
||||||
|
let dataStr = ''
|
||||||
|
params.forEach(item => {
|
||||||
|
dataStr += `<div>
|
||||||
|
<div style="margin: 0 8px;">
|
||||||
|
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
|
||||||
|
<span>${item.seriesName}</span>
|
||||||
|
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
return dataStr
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['合同金额', '确认收入金额', '开票金额', '到账金额'],
|
||||||
|
right: '2%'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {},
|
||||||
|
xAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#999999'
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: true,
|
||||||
|
// 刻度线设置
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: xData
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f2f2f2'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '合同金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.allMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#1BCDC6',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1BCDC6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '确认收入金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.confirmAmount,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#EBAB91',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#EBAB91'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '开票金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.billMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#9CB7F2',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#9CB7F2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '到账金额',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData.comeAllMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#B6F1AC',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#B6F1AC'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table-thead tr > th {
|
||||||
|
color: #050525;
|
||||||
|
font-weight: bold;
|
||||||
|
background: rgb(245,245,246);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
/deep/ .ant-table-tbody tr > td {
|
||||||
|
color: rgba(5, 5, 37, 0.8);
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid rgb(245,245,246);
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table-tbody tr > td:first-child {
|
||||||
|
color: #050525;
|
||||||
|
font-weight: bold;
|
||||||
|
background: rgb(245,245,246);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -11,4 +11,19 @@ export const MonthData = [
|
|||||||
{name: '10月', value: '10', key: 'October'},
|
{name: '10月', value: '10', key: 'October'},
|
||||||
{name: '11月', value: '11', key: 'November'},
|
{name: '11月', value: '11', key: 'November'},
|
||||||
{name: '12月', value: '12', key: 'December'},
|
{name: '12月', value: '12', key: 'December'},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const MonthDataTotal = [
|
||||||
|
{name: '1月累计', value: '01', key: 'January'},
|
||||||
|
{name: '2月累计', value: '02', key: 'February'},
|
||||||
|
{name: '3月累计', value: '03', key: 'March'},
|
||||||
|
{name: '4月累计', value: '04', key: 'April'},
|
||||||
|
{name: '5月累计', value: '05', key: 'May'},
|
||||||
|
{name: '6月累计', value: '06', key: 'June'},
|
||||||
|
{name: '7月累计', value: '07', key: 'July'},
|
||||||
|
{name: '8月累计', value: '08', key: 'August'},
|
||||||
|
{name: '9月累计', value: '09', key: 'September'},
|
||||||
|
{name: '10月累计', value: '10', key: 'October'},
|
||||||
|
{name: '11月累计', value: '11', key: 'November'},
|
||||||
|
{name: '12月累计', value: '12', key: 'December'},
|
||||||
]
|
]
|
||||||
Reference in New Issue
Block a user