From 5c7cb5853855af98e48c52263f122089126b07b2 Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Sat, 20 Jan 2024 17:45:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/astatistics/index.vue | 718 ++++++++++++++++++++++++++++++++
 src/views/test/index.vue        |  33 +-
 2 files changed, 737 insertions(+), 14 deletions(-)
 create mode 100644 src/views/astatistics/index.vue

diff --git a/src/views/astatistics/index.vue b/src/views/astatistics/index.vue
new file mode 100644
index 0000000..228ef71
--- /dev/null
+++ b/src/views/astatistics/index.vue
@@ -0,0 +1,718 @@
+<template>
+    <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
+
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>我的客户</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="customNum" class="chart"></div>
+        </el-card>
+
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>我的立项</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="projectApproved" class="chart"></div>
+        </el-card>
+
+
+
+
+
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>我的投标</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="main"></div>
+        </el-card>
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>项目合同</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="main2"></div>
+        </el-card>
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>项目回款</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="main3"></div>
+        </el-card>
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>采购合同</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="main4" class="chart"></div>
+        </el-card>
+
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>分包合同</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="main5" class="chart"></div>
+        </el-card>
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>项目付款</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="main6" class="chart"></div>
+        </el-card>
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>我的报销</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <div id="main7" class="chart"></div>
+        </el-card>
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>应收统计</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
+                <el-table-column type="selection" width="55" />
+                <el-table-column label="序号" type="index" width="55" />
+                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
+                <el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
+                <el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
+                <el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
+                <el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
+            </el-table>
+            <div class="flex justify-end mt-4">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+        <el-card style="width: 49.9%;">
+            <template #header>
+                <div class="card-header">
+                    <span>应付统计</span>
+                </div>
+            </template>
+            <div style="display: flex;justify-content: space-around;">
+                <div v-for=" item in customList" :key="item" style="text-align: center;">
+                    <div>{{ item.value }}</div>
+                    <div>{{ item.name }}</div>
+                </div>
+            </div>
+            <el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
+                <el-table-column type="selection" width="55" />
+                <el-table-column label="序号" type="index" width="55" />
+                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
+                <el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
+                <el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
+                <el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
+                <el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
+            </el-table>
+            <div class="flex justify-end mt-4">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+    </div>
+</template>
+
+
+
+<script setup>
+import * as echarts from 'echarts';
+import { onMounted } from "vue"
+import { reactive, ref } from "vue"
+import { usePaging } from '@/hooks/usePaging'
+import { apiProjectPreSalesMembersLists, } from '@/api/project_pre_sales_members'
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+    fetchFun: apiProjectPreSalesMembersLists,
+    // params: queryParams
+})
+getLists()
+const customList = reactive([
+    {
+        name: "客户总数",
+        value: 3
+    },
+    {
+        name: "客户总数",
+        value: 3
+    }, {
+        name: "客户总数",
+        value: 3
+    }, {
+        name: "客户总数",
+        value: 3
+    }, {
+        name: "客户总数",
+        value: 3
+    },
+])
+
+const customLists = reactive([
+    {
+        name: "客户总数",
+        value: 3
+    },
+    {
+        name: "客户总数",
+        value: 3
+    }, {
+        name: "客户总数",
+        value: 3
+    }, {
+        name: "客户总数",
+        value: 3
+    }, {
+        name: "客户总数",
+        value: 3
+    },
+])
+
+
+var app = {};
+const posList = [
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'inside',
+    'insideTop',
+    'insideLeft',
+    'insideRight',
+    'insideBottom',
+    'insideTopLeft',
+    'insideTopRight',
+    'insideBottomLeft',
+    'insideBottomRight'
+];
+app.configParameters = {
+    rotate: {
+        min: -90,
+        max: 90
+    },
+    align: {
+        options: {
+            left: 'left',
+            center: 'center',
+            right: 'right'
+        }
+    },
+    verticalAlign: {
+        options: {
+            top: 'top',
+            middle: 'middle',
+            bottom: 'bottom'
+        }
+    },
+    position: {
+        options: posList.reduce(function (map, pos) {
+            map[pos] = pos;
+            return map;
+        }, {})
+    },
+    distance: {
+        min: 0,
+        max: 100
+    }
+};
+app.config = {
+    rotate: 90,
+    align: 'left',
+    verticalAlign: 'middle',
+    position: 'insideBottom',
+    distance: 15,
+    onChange: function () {
+        const labelOption = {
+            rotate: app.config.rotate,
+            align: app.config.align,
+            verticalAlign: app.config.verticalAlign,
+            position: app.config.position,
+            distance: app.config.distance
+        };
+        myChart.setOption({
+            series: [
+                {
+                    label: labelOption
+                },
+                {
+                    label: labelOption
+                },
+                {
+                    label: labelOption
+                },
+                {
+                    label: labelOption
+                }
+            ]
+        });
+    }
+};
+const labelOption = {
+    show: true,
+    rich: {
+        name: {}
+    }
+};
+var option = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    legend: {
+        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+    },
+    toolbox: {
+        show: true,
+        orient: 'vertical',
+        left: 'right',
+        top: 'center',
+
+    },
+    xAxis: [
+        {
+            type: 'category',
+            axisTick: { show: false },
+            data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value'
+        }
+    ],
+    series: [
+        {
+            name: '名称',
+            type: 'bar',
+            barGap: 0,
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390]
+        },
+        // {
+        //     name: 'Steppe',
+        //     type: 'bar',
+        //     label: labelOption,
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: [220, 182, 191, 234, 290]
+        // },
+        // {
+        //     name: 'Desert',
+        //     type: 'bar',
+        //     label: labelOption,
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: [150, 232, 201, 154, 190]
+        // },
+        // {
+        //     name: 'Wetland',
+        //     type: 'bar',
+        //     label: labelOption,
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: [98, 77, 101, 99, 40]
+        // }
+    ]
+};
+
+
+let customoption = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    legend: {
+        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+    },
+    toolbox: {
+        show: true,
+        orient: 'vertical',
+        left: 'right',
+        top: 'center',
+
+    },
+    xAxis: [
+        {
+            type: 'category',
+            axisTick: { show: false },
+            data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value'
+        }
+    ],
+    series: [
+        {
+            name: '名称',
+            type: 'bar',
+            barGap: 0,
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390]
+        },
+        // {
+        //     name: 'Steppe',
+        //     type: 'bar',
+        //     label: labelOption,
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: [220, 182, 191, 234, 290]
+        // },
+        // {
+        //     name: 'Desert',
+        //     type: 'bar',
+        //     label: labelOption,
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: [150, 232, 201, 154, 190]
+        // },
+        // {
+        //     name: 'Wetland',
+        //     type: 'bar',
+        //     label: labelOption,
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: [98, 77, 101, 99, 40]
+        // }
+    ]
+};
+var option4 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    legend: {
+        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+    },
+    toolbox: {
+        show: true,
+        orient: 'vertical',
+        left: 'right',
+        top: 'center',
+
+    },
+    xAxis: [
+        {
+            type: 'category',
+            axisTick: { show: false },
+            data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value'
+        }
+    ],
+    series: [
+        {
+            name: '名称',
+            type: 'bar',
+            barGap: 0,
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390]
+        },
+        {
+            name: 'Steppe',
+            type: 'bar',
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290]
+        },
+        {
+            name: 'Desert',
+            type: 'bar',
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [150, 232, 201, 154, 190]
+        },
+        // {
+        //     name: 'Wetland',
+        //     type: 'bar',
+        //     label: labelOption,
+        //     emphasis: {
+        //         focus: 'series'
+        //     },
+        //     data: [98, 77, 101, 99, 40]
+        // }
+    ]
+};
+
+let option2 = {
+    title: {
+        text: '',
+        subtext: '',
+        left: 'center'
+    },
+    tooltip: {
+        trigger: 'item'
+    },
+
+    series: [
+        {
+            name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data: [
+                { value: 1048, name: 'Search Engine' },
+                { value: 735, name: 'Direct' },
+                { value: 580, name: 'Email' },
+                { value: 484, name: 'Union Ads' },
+                { value: 300, name: 'Video Ads' }
+            ],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }
+    ]
+};
+
+let value = 58; //图上角度数据
+let option3 = {
+    title: {
+        text: '{a|' + value + '}{c|%}',
+        x: 'center',
+        y: 'center',
+        textStyle: {
+            rich: {
+                a: {
+                    fontSize: 20,
+                    color: 'black',
+                    fontWeight: 'bold'
+                },
+                c: {
+                    fontSize: 20,
+                    color: 'black',
+                    fontWeight: 'normal'
+                }
+            }
+        }
+    },
+    series: [
+        //外环
+        {
+            name: "外环",
+            type: 'pie',
+            silent: true,
+            clockwise: true,
+            radius: ['70%', '75%'],
+            label: {
+                show: false,
+            },
+            labelLine: {
+                show: false
+            },
+            itemStyle: {
+                color: 'white',
+            },
+            data: [0]
+        },
+        //内环
+        {
+            name: "内环",
+            type: 'pie',
+            silent: true,
+            clockwise: true,
+            radius: ['45%', '46%'],
+            label: {
+                show: false,
+            },
+            labelLine: {
+                show: false
+            },
+            itemStyle: {
+                color: '#414f63',
+            },
+            data: [0]
+        },
+        //外环
+        {
+            name: '',
+            type: 'pie',
+            radius: ['55%', '65%'],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            label: {
+                show: false,
+            },
+            data: [
+                {
+                    value: value,
+                    itemStyle: {
+                        normal: {
+                            //外环发光
+                            borderWidth: 0.5,
+                            shadowBlur: 20,
+                            borderColor: '#4bf3f9',
+                            shadowColor: '#9bfeff',
+                            color: { // 圆环的颜色
+                                colorStops: [{
+                                    offset: 0,
+                                    color: '#15caff', // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#159bfe', // 100% 处的颜色
+                                }]
+                            },
+                        }
+                    }
+                },
+                {
+                    value: 100 - value,
+                    label: {
+                        normal: {
+                            show: false
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: "#364662"
+                        }
+                    }
+                }
+            ]
+        },
+    ]
+};
+
+
+
+
+
+
+
+
+const initChart = (id, opt) => {
+    var chartDom = document.getElementById(id);
+    var myChart = echarts.init(chartDom);
+    myChart.setOption(opt);
+}
+onMounted(() => {
+    initChart("customNum", customoption)
+    initChart("projectApproved", option2)
+
+    initChart("main", option3)
+    initChart("main2", option2)
+    initChart("main3", option)
+    initChart("main4", option)
+    initChart("main5", option)
+    initChart("main6", option4)
+    initChart("main7", option2)
+})
+</script>
+<style lang="scss" scoped>
+#main,
+#main2,
+#main3 {
+    width: 100%;
+    height: 300px;
+}
+
+.chart {
+    width: 100%;
+    height: 300px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/test/index.vue b/src/views/test/index.vue
index c0cc8c5..008a5a1 100644
--- a/src/views/test/index.vue
+++ b/src/views/test/index.vue
@@ -1,20 +1,24 @@
 <template>
-    <el-card style="display: flex;">
+    <el-card>
+        我的客户
         <div id="main"></div>
+    </el-card>
+
+    <el-card>
         <div id="main2"></div>
 
+
     </el-card>
 </template>
+
+
+
+
 <script setup>
-
-
 import * as echarts from 'echarts';
-
 import { onMounted } from "vue"
+
 var app = {};
-
-var option;
-
 const posList = [
     'left',
     'right',
@@ -98,7 +102,7 @@ const labelOption = {
         name: {}
     }
 };
-option = {
+var option = {
     tooltip: {
         trigger: 'axis',
         axisPointer: {
@@ -201,13 +205,14 @@ let option2 = {
     ]
 };
 
-onMounted(() => {
-    var chartDom = document.getElementById('main');
+const initChart = (id, opt) => {
+    var chartDom = document.getElementById(id);
     var myChart = echarts.init(chartDom);
-    option && myChart.setOption(option);
-    var chartDom2 = document.getElementById('main2');
-    var myChart2 = echarts.init(chartDom2);
-    option2 && myChart2.setOption(option2);
+    myChart.setOption(opt);
+}
+onMounted(() => {
+    initChart("main", option)
+    initChart("main2", option2)
 })
 </script>
 <style lang="scss" scoped>