优化了统计接口及图表库引入，提升了用户体验，提高了操作效率。

src/api/statistics.ts

@@ -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 })
+}

src/views/astatistics/index.vue

@@ -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"

src/views/statistic_cw/components/ProjectBid.vue

@@ -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>

src/views/statistic_cw/components/ProjectFund.vue

@@ -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>

src/views/statistic_cw/components/ProjectInvoice.vue

@@ -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>

src/views/statistic_cw/components/ProjectPayment.vue

@@ -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>

src/views/statistic_cw/index.vue

@@ -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>

src/views/statistic_gc/components/Project.vue

@@ -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>

src/views/statistic_gc/components/ProjectInvoice.vue

@@ -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>

src/views/statistic_gc/components/ProjectPayment.vue

@@ -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>

src/views/statistic_gc/components/problem.vue

@@ -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>

src/views/statistic_gc/index.vue

@@ -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>

src/views/statistic_sc/components/Project.vue

@@ -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>

src/views/statistic_sc/components/ProjectInvoice.vue

@@ -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>

src/views/statistic_sc/components/ProjectPayment.vue

@@ -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>

src/views/statistic_sc/index.vue

@@ -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>

src/views/statistic_xm/components/Project.vue

@@ -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>

src/views/statistic_xm/components/ProjectInvoice.vue

@@ -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>

src/views/statistic_xm/components/ProjectPayment.vue

@@ -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>

src/views/statistic_xm/index.vue

@@ -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>

src/views/statistic_zj/components/Project.vue

@@ -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>

src/views/statistic_zj/components/ProjectInvoice.vue

@@ -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>

src/views/statistic_zj/components/ProjectPayment.vue

@@ -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>

src/views/statistic_zj/index.vue

@@ -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>

src/views/statistic_zx/components/Project.vue

@@ -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>

src/views/statistic_zx/components/ProjectInvoice.vue

@@ -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>

src/views/statistic_zx/index.vue

@@ -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>