优化了统计接口及图表库引入，提升了用户体验，提高了操作效率。
This commit is contained in:
zmj
parent
24f56c44bd
commit
3673c21f3e
@ -31,4 +31,88 @@ export function apistatisticssubcontractingContract(params: any) {
|
||||
// 项目付款统计
|
||||
export function apistatisticsprojectPayment(params: any) {
|
||||
return request.get({ url: '/statistics.statistics/projectPayment', params })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 项目付款统计
|
||||
export function apistatisticoststatistics(params: any) {
|
||||
return request.get({ url: '/cost_project.cost_statistics/project', params })
|
||||
}
|
||||
|
||||
// 项目付款统计
|
||||
export function apistatisticoststatisticsamout(params: any) {
|
||||
return request.get({ url: '/cost_project.cost_statistics/amount', params })
|
||||
}
|
||||
|
||||
export function apistatisticoststatisticsinvoice(params: any) {
|
||||
return request.get({ url: '/cost_project.cost_statistics/invoice', params })
|
||||
}
|
||||
|
||||
|
||||
export function apistatistisupervision_statistics(params: any) {
|
||||
return request.get({ url: '/supervision_project.supervision_statistics/project', params })
|
||||
}
|
||||
|
||||
export function apistatistisupervision_statisticsproblem(params: any) {
|
||||
return request.get({ url: '/supervision_project.supervision_statistics/problem', params })
|
||||
}
|
||||
|
||||
export function apistatistisupervision_statisticsmonth_report(params: any) {
|
||||
return request.get({ url: '/supervision_project.supervision_statistics/month_report', params })
|
||||
}
|
||||
|
||||
export function apistatistisupervision_statisticsinvoice(params: any) {
|
||||
return request.get({ url: '/supervision_project.supervision_statistics/invoice', params })
|
||||
}
|
||||
|
||||
export function apistatistisupervision_statisticproject(params: any) {
|
||||
return request.get({ url: '/manage_basic.manage_statistics/project', params })
|
||||
}
|
||||
|
||||
export function apistatistisupervision_statisticinvoice(params: any) {
|
||||
return request.get({ url: '/manage_basic.manage_statistics/invoice', params })
|
||||
}
|
||||
|
||||
export function apistatistisupervision_statisticmeteredpayment(params: any) {
|
||||
return request.get({ url: '/manage_basic.manage_statistics/metered_payment', params })
|
||||
}
|
||||
|
||||
export function apistatisticonsult_statisticsproject(params: any) {
|
||||
return request.get({ url: '/consult_basic.consult_statistics/project', params })
|
||||
}
|
||||
|
||||
export function apistatisticonsult_statisticsinvoice(params: any) {
|
||||
return request.get({ url: '/consult_basic.consult_statistics/invoice', params })
|
||||
}
|
||||
|
||||
export function apistatistifinancial_statistics(params: any) {
|
||||
return request.get({ url: '/financial.financial_statistics/contracts', params })
|
||||
}
|
||||
|
||||
export function apistatistifinancial_statisticsinvoice(params: any) {
|
||||
return request.get({ url: '/financial.financial_statistics/invoice', params })
|
||||
}
|
||||
|
||||
export function apistatistifinancial_statisticsbid(params: any) {
|
||||
return request.get({ url: '/financial.financial_statistics/bid', params })
|
||||
}
|
||||
|
||||
|
||||
export function apistatistifinancial_statisticsfund(params: any) {
|
||||
return request.get({ url: '/financial.financial_statistics/fund', params })
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function apistatismarketing_statistics(params: any) {
|
||||
return request.get({ url: '/marketing.marketing_statistics/business', params })
|
||||
}
|
||||
|
||||
export function apistatismarketing_statisticscustom(params: any) {
|
||||
return request.get({ url: '/marketing.marketing_statistics/custom', params })
|
||||
}
|
||||
|
||||
|
||||
export function apistatismarketing_statisticscontract(params: any) {
|
||||
return request.get({ url: '/marketing.marketing_statistics/contract', params })
|
||||
}
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { reactive, ref } from "vue"
|
||||
import Custom from "./components/Custom.vue"
|
||||
import Project from "./components/Project.vue"
|
||||
|
||||
238
src/views/statistic_cw/components/ProjectBid.vue
Normal file
238
src/views/statistic_cw/components/ProjectBid.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>保证金统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectBid" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statisticsbid } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总保证金申请",
|
||||
value: () => {
|
||||
return baseData.value.total_margin_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度保证金申请",
|
||||
value: () => {
|
||||
return baseData.value.year_margin_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总保证金回收",
|
||||
value: () => {
|
||||
return baseData.value.total_margin_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin_recovery"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度保证金回收",
|
||||
value: () => {
|
||||
return baseData.value.year_margin_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_bid_margin_recovery"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总履约金申请",
|
||||
value: () => {
|
||||
return baseData.value.total_performance_money_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_apply"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度履约金申请",
|
||||
value: () => {
|
||||
return baseData.value.year_performance_money_apply
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_apply"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总履约金回收",
|
||||
value: () => {
|
||||
return baseData.value.total_performance_money_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_recovery"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度履约金回收",
|
||||
value: () => {
|
||||
return baseData.value.year_performance_money_recovery
|
||||
},
|
||||
url: "/financial/margin_management/financial_performance_money_recovery"
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statisticsbid({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.margin_apply_series.name, res.margin_recovery_series.name, res.performance_money_apply_series.name, res.performance_money_recovery_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.margin_apply_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.margin_apply_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.margin_recovery_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.margin_recovery_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.performance_money_apply_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.performance_money_apply_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.performance_money_recovery_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.performance_money_recovery_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectBid", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
206
src/views/statistic_cw/components/ProjectFund.vue
Normal file
206
src/views/statistic_cw/components/ProjectFund.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>借款还款</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectFund" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statisticsfund } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总用款",
|
||||
value: () => {
|
||||
return baseData.value.total_using
|
||||
},
|
||||
url: "/financial/fund_management/financial_using_funds"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度用款",
|
||||
value: () => {
|
||||
return baseData.value.year_using
|
||||
},
|
||||
url: "/financial/fund_management/financial_using_funds"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总借款",
|
||||
value: () => {
|
||||
return baseData.value.total_borrow
|
||||
},
|
||||
url: "/financial/fund_management/financial_borrow_money"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度借款",
|
||||
value: () => {
|
||||
return baseData.value.year_borrow
|
||||
},
|
||||
url: "/financial/fund_management/financial_borrow_money"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总还款",
|
||||
value: () => {
|
||||
return baseData.value.total_repayment
|
||||
},
|
||||
url: "/financial/fund_management/financial_repayment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度还款",
|
||||
value: () => {
|
||||
return baseData.value.year_repayment
|
||||
},
|
||||
url: "/financial/fund_management/financial_repayment"
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statisticsfund({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.using_series.name, res.borrow_series.name, res.repayment_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.using_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.using_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.borrow_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.borrow_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.repayment_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.repayment_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectFund", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
207
src/views/statistic_cw/components/ProjectInvoice.vue
Normal file
207
src/views/statistic_cw/components/ProjectInvoice.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目合同</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectContract" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_refund"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_refund"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/financial_settlement"
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectContract", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
176
src/views/statistic_cw/components/ProjectPayment.vue
Normal file
176
src/views/statistic_cw/components/ProjectPayment.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>合同金额</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistifinancial_statistics } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总数量",
|
||||
value: () => {
|
||||
return baseData.value.total_number
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度数量",
|
||||
value: () => {
|
||||
return baseData.value.year_number
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总签约金额",
|
||||
value: () => {
|
||||
return baseData.value.total_signed_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度签约金额",
|
||||
value: () => {
|
||||
return baseData.value.year_signed_amount
|
||||
},
|
||||
url: "/financial/invoice_and_receipt/contract_ledger"
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistifinancial_statistics({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.number_series.name, res.signed_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.number_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.number_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.signed_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.signed_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
21
src/views/statistic_cw/index.vue
Normal file
21
src/views/statistic_cw/index.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectBid></ProjectBid>
|
||||
<ProjectFund></ProjectFund>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
import ProjectBid from "./components/ProjectBid.vue"
|
||||
import ProjectFund from "./components/ProjectFund.vue"
|
||||
|
||||
|
||||
</script>
|
||||
78
src/views/statistic_gc/components/Project.vue
Normal file
78
src/views/statistic_gc/components/Project.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statistics } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatistisupervision_statistics()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
208
src/views/statistic_gc/components/ProjectInvoice.vue
Normal file
208
src/views/statistic_gc/components/ProjectInvoice.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目月报</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvince" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticsmonth_report } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总进度",
|
||||
value: () => {
|
||||
return baseData.value.total_schedule
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度进度",
|
||||
value: () => {
|
||||
return baseData.value.year_schedule
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总完成",
|
||||
value: () => {
|
||||
return baseData.value.total_complete
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度完成",
|
||||
value: () => {
|
||||
return baseData.value.year_complete
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总支付",
|
||||
value: () => {
|
||||
return baseData.value.total_payment
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度支付",
|
||||
value: () => {
|
||||
return baseData.value.year_payment
|
||||
},
|
||||
url: "/supervision/supervision_connect/supervision_project_monthly_report"
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticsmonth_report({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.schedule_series.name, res.complete_series.name, res.payment_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.schedule_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.schedule_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.complete_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.complete_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.payment_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.payment_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvince", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
207
src/views/statistic_gc/components/ProjectPayment.vue
Normal file
207
src/views/statistic_gc/components/ProjectPayment.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.year_settlement_amount.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
78
src/views/statistic_gc/components/problem.vue
Normal file
78
src/views/statistic_gc/components/problem.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 问题跟踪</span>
|
||||
</div>
|
||||
</template>
|
||||
<div id="projectProblem" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticsproblem } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatistisupervision_statisticsproblem()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectProblem", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
20
src/views/statistic_gc/index.vue
Normal file
20
src/views/statistic_gc/index.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<problem></problem>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import problem from "./components/problem.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
|
||||
|
||||
</script>
|
||||
91
src/views/statistic_sc/components/Project.vue
Normal file
91
src/views/statistic_sc/components/Project.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 业务性质</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatismarketing_statistics } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatismarketing_statistics()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
205
src/views/statistic_sc/components/ProjectInvoice.vue
Normal file
205
src/views/statistic_sc/components/ProjectInvoice.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>合同统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvoice" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatismarketing_statisticscontract } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总主合同数",
|
||||
value: () => {
|
||||
return baseData.value.total_zht
|
||||
},
|
||||
url: "/marketing/marketing_contract/marketing_contract"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度主合同数",
|
||||
value: () => {
|
||||
return baseData.value.year_zht
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总框架协议数",
|
||||
value: () => {
|
||||
return baseData.value.total_kjxy
|
||||
},
|
||||
url: "/marketing/marketing_contract/marketing_framework_agreement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度框架协议数",
|
||||
value: () => {
|
||||
return baseData.value.year_kjxy
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总补充协议数",
|
||||
value: () => {
|
||||
return baseData.value.total_bcxy
|
||||
},
|
||||
url: "/marketing/marketing_contract/marketing_supplementary_agreement"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度补充协议数",
|
||||
value: () => {
|
||||
return baseData.value.year_bcxy
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatismarketing_statisticscontract({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.zht_series.name, res.kjxy_series.name, res.bcxy_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.zht_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.zht_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.kjxy_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.kjxy_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.bcxy_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.bcxy_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvoice", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
144
src/views/statistic_sc/components/ProjectPayment.vue
Normal file
144
src/views/statistic_sc/components/ProjectPayment.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>客户统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatismarketing_statisticscustom } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总客户数",
|
||||
value: () => {
|
||||
return baseData.value.total_num
|
||||
},
|
||||
url: "/marketing/marketing_custom/marketing_custom"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度客户数",
|
||||
value: () => {
|
||||
return baseData.value.year_num
|
||||
},
|
||||
url: "/marketing/marketing_custom/marketing_custom"
|
||||
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatismarketing_statisticscustom({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.custom_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.custom_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.custom_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
19
src/views/statistic_sc/index.vue
Normal file
19
src/views/statistic_sc/index.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
|
||||
|
||||
</script>
|
||||
91
src/views/statistic_xm/components/Project.vue
Normal file
91
src/views/statistic_xm/components/Project.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticproject } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatistisupervision_statisticproject()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
208
src/views/statistic_xm/components/ProjectInvoice.vue
Normal file
208
src/views/statistic_xm/components/ProjectInvoice.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvince" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvince", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
174
src/views/statistic_xm/components/ProjectPayment.vue
Normal file
174
src/views/statistic_xm/components/ProjectPayment.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>计量支付</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatistisupervision_statisticmeteredpayment } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总进度",
|
||||
value: () => {
|
||||
return baseData.value.total_done
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度进度",
|
||||
value: () => {
|
||||
return baseData.value.year_done
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "总支付",
|
||||
value: () => {
|
||||
return baseData.value.total_payment
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度支付",
|
||||
value: () => {
|
||||
return baseData.value.year_payment
|
||||
},
|
||||
url: "/management/manage_invest/manage_metered_payment"
|
||||
|
||||
},
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatistisupervision_statisticmeteredpayment({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.complete_series.name, res.payment_series.name,]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.complete_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.complete_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.payment_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.payment_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
18
src/views/statistic_xm/index.vue
Normal file
18
src/views/statistic_xm/index.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
|
||||
|
||||
</script>
|
||||
92
src/views/statistic_zj/components/Project.vue
Normal file
92
src/views/statistic_zj/components/Project.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticoststatistics } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatisticoststatistics()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '我的立项',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
207
src/views/statistic_zj/components/ProjectInvoice.vue
Normal file
207
src/views/statistic_zj/components/ProjectInvoice.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目合同</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectContract" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticoststatisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatisticoststatisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.settlement_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectContract", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
176
src/views/statistic_zj/components/ProjectPayment.vue
Normal file
176
src/views/statistic_zj/components/ProjectPayment.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectPayment" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticoststatisticsamout } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总签约金额",
|
||||
value: () => {
|
||||
return baseData.value.total_signed_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总投资金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invest_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度签约金额",
|
||||
value: () => {
|
||||
return baseData.value.year_signed_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度投资金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invest_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatisticoststatisticsamout({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.signed_series.name, res.invest_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.signed_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.signed_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.invest_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invest_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectPayment", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
19
src/views/statistic_zj/index.vue
Normal file
19
src/views/statistic_zj/index.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectPayment></ProjectPayment>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectPayment from "./components/ProjectPayment.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
|
||||
|
||||
</script>
|
||||
91
src/views/statistic_zx/components/Project.vue
Normal file
91
src/views/statistic_zx/components/Project.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span> 项目立项</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { ...item.query } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div> -->
|
||||
<div id="projectApproved" class="chart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticonsult_statisticsproject } from '@/api/statistics'
|
||||
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const getData = async () => {
|
||||
let res = await apistatisticonsult_statisticsproject()
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: res.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
initChart("projectApproved", option2)
|
||||
}
|
||||
|
||||
|
||||
getData()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main,
|
||||
#main2,
|
||||
#main3 {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
208
src/views/statistic_zx/components/ProjectInvoice.vue
Normal file
208
src/views/statistic_zx/components/ProjectInvoice.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<el-card style="width: 49.9%;">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>项目开票</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:40px">
|
||||
<el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
|
||||
:placeholder="year" />
|
||||
</div>
|
||||
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<router-link :to="{
|
||||
path: item.url,
|
||||
query: item.query ? { year } : null
|
||||
}" v-for=" item in customList" :key="item" class="header-btn">
|
||||
<div>
|
||||
<div>{{ item.value() }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="ProjectInvince" class="chart" v-if="showChart"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { apistatisticonsult_statisticsinvoice } from '@/api/statistics'
|
||||
|
||||
const year = ref(new Date().getFullYear())
|
||||
const showChart = ref(true)
|
||||
|
||||
const customList = reactive([
|
||||
{
|
||||
name: "总开票金额",
|
||||
value: () => {
|
||||
return baseData.value.total_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度开票金额",
|
||||
value: () => {
|
||||
return baseData.value.year_invoice_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总回款金额",
|
||||
value: () => {
|
||||
return baseData.value.total_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度回款金额",
|
||||
value: () => {
|
||||
return baseData.value.year_refund_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "总结算金额",
|
||||
value: () => {
|
||||
return baseData.value.total_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
{
|
||||
name: "年度结算金额",
|
||||
value: () => {
|
||||
return baseData.value.year_settlement_amount
|
||||
},
|
||||
url: ""
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
const labelOption = {
|
||||
show: true,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = (id, opt) => {
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(opt);
|
||||
}
|
||||
|
||||
const baseData = ref({})
|
||||
|
||||
const getCustom = async () => {
|
||||
showChart.value = false
|
||||
let res = await apistatisticonsult_statisticsinvoice({ year: year.value })
|
||||
baseData.value = res
|
||||
showChart.value = true
|
||||
await nextTick()
|
||||
var option4 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [res.invoice_series.name, res.refund_series.name, res.settlement_series.name]
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: res.column
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: res.invoice_series.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.invoice_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.refund_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.refund_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: res.settlement_series.name,
|
||||
type: 'bar',
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: res.settlement_series.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
initChart("ProjectInvince", option4)
|
||||
}
|
||||
getCustom()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
background-color: #EDEFFF;
|
||||
}
|
||||
</style>
|
||||
17
src/views/statistic_zx/index.vue
Normal file
17
src/views/statistic_zx/index.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<Project></Project>
|
||||
<ProjectInvoice></ProjectInvoice>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import Project from "./components/Project.vue"
|
||||
import ProjectInvoice from "./components/ProjectInvoice.vue"
|
||||
|
||||
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user