Merge branch 'change0706'
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>
|
||||
<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>-->
|
||||
<!-- 其他人展示消息-->
|
||||
<template v-if="roleCoe">
|
||||
<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>
|
||||
</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')">-->
|
||||
<!-- <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>-->
|
||||
<!-- 全所收入统计 累计-->
|
||||
<single-month-total-echarts class="single-month-total m-t-10"></single-month-total-echarts>
|
||||
<!-- 全所收入统计 累计-->
|
||||
|
||||
<!-- </a-card>-->
|
||||
<section class="wrap">
|
||||
<!-- 科室总体统计 -->
|
||||
<department-total-echarts class="depart-total m-t-10"></department-total-echarts>
|
||||
<!-- 科室总体统计 -->
|
||||
|
||||
<!-- <!– 数据统计–>-->
|
||||
<!-- <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>-->
|
||||
<!-- 收入分类统计 -->
|
||||
<income-sort-echarts class="income-sort m-t-10"></income-sort-echarts>
|
||||
<!-- 收入分类统计 -->
|
||||
</section>
|
||||
|
||||
<!-- <div class="data-statistics-container">-->
|
||||
<!-- <div class="data-statistics-item bg-payment">-->
|
||||
<!-- <div class="item-left">-->
|
||||
<!-- 本月新增收款项-->
|
||||
<!-- </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>
|
||||
<!-- 企业客户统计（合同额前十）-->
|
||||
<all-money-ten-echarts class="all-money m-t-10"></all-money-ten-echarts>
|
||||
<!-- 企业客户统计（合同额前十）-->
|
||||
</template>
|
||||
<!-- 所领导 部门领导展示统计图 -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { homePageStatistics, homePageDataStatistics } from '../../api/incomePaymentsApi'
|
||||
|
||||
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 {
|
||||
name: 'Analysis',
|
||||
components: {
|
||||
UserAnnouncementList
|
||||
UserAnnouncementList,
|
||||
SingleMonthEcharts,
|
||||
SingleMonthTotalEcharts,
|
||||
DepartmentTotalEcharts,
|
||||
IncomeSortEcharts,
|
||||
AllMoneyTenEcharts
|
||||
},
|
||||
computed: {
|
||||
// 所领导 部门负责人 还是其他角色
|
||||
roleCoe() {
|
||||
return false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
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: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
// this.initDataStaticsData()
|
||||
},
|
||||
mounted() {
|
||||
// this.getStatisticsData().then(() => {
|
||||
// this.initPersonalStatisticsEcharts()
|
||||
// this.initDepartStatisticsEcharts()
|
||||
// this.initWorkingGroupStatisticsEcharts()
|
||||
// this.initCompanyStatisticsEcharts()
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
// 下载使用手册
|
||||
downloadManual(){
|
||||
window.open('http://cwp.catarc.org.cn:8066/管理端使用手册.docx','_self')
|
||||
downloadManual() {
|
||||
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>
|
||||
|
||||
<style scoped lang="less">
|
||||
//上部分整体
|
||||
.page-top {
|
||||
<style lang="less" scoped>
|
||||
// 全所收入统计 单月
|
||||
.single-month,
|
||||
.single-month-total {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.m-t-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
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;
|
||||
}
|
||||
// 科室总体统计
|
||||
.depart-total {
|
||||
width: 64%;
|
||||
min-width: 650px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
}
|
||||
// 分类统计
|
||||
.income-sort {
|
||||
margin-left: 8px;
|
||||
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 {
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.primary-color {
|
||||
color:#069F99;
|
||||
color: #069F99;
|
||||
cursor: pointer;
|
||||
}
|
||||
</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: '11月', value: '11', key: 'November'},
|
||||
{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