add

src/views/bid_industry_analysis/index.vue

@@ -0,0 +1,275 @@
+<template>
+    <el-card class="!border-none mb-4" shadow="never">
+        <el-form class="mb-[-16px]" inline>
+            <el-form-item label="图表类型">
+                <el-select v-model="chartType" placeholder="请选择图表类型" class="flex-1" @change="changeChartType">
+                    <el-option v-for="item in chartTypeList" :key="item.value" :label="item.name" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="图标宽度" prop="num">
+                <el-input v-model="chartWitdth" clearable type="number" @blur="chartResize" />
+            </el-form-item>
+            <el-form-item label="图标高度" prop="project">
+                <el-input v-model="chartHeight" clearable type="number" @blur="chartResize" />
+            </el-form-item>
+        </el-form>
+    </el-card>
+    <el-card style="min-height: 75vh;">
+        <div class="tit">行业投标分析</div>
+
+        <div id="main" style="margin: 0 auto;" :style="{ width: chartWitdth + 'px', height: chartHeight + 'px' }"></div>
+    </el-card>
+</template>
+
+<script lang="ts" setup name="">
+import * as echarts from 'echarts';
+import { ref, reactive, onMounted } from "vue";
+import { apibid_industry_analysis } from '@/api/marketing_bid_statistics'
+import { cloneDeep } from 'lodash-es';
+import { nextTick } from 'vue';
+
+var chartDom: any;
+var option: any;
+var myChart: any
+
+const chartWitdth = ref(1000)
+const chartHeight = ref(500)
+const chartType = ref(3)
+const chartTypeList = reactive([
+    {
+        name: '柱状图',
+        value: 1
+    },
+    {
+        name: '折线图',
+        value: 2
+    },
+    {
+        name: '饼状图',
+        value: 3
+    },
+    {
+        name: '漏斗图',
+        value: 4
+    },
+
+])
+
+// 柱状图
+let option1 = {
+    tooltip: {
+        trigger: 'item',
+    },
+    yAxis: {
+        type: 'value'
+    },
+    legend: {
+        data: ['总金额', '中标金额', '未中标金额']
+    },
+    xAxis: {
+        type: 'category',
+        // data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
+        data: []
+
+    },
+    series: [
+        // 总金额
+        // {
+        //     // name: '总金额',
+        //     data: [120, 200, 150, 80, 70, 110, 130],
+        //     type: 'bar',
+        // },
+        // // 中标金额
+        // {
+        //     name: '中标金额',
+        //     data: [10, 20, 50, 10, 32, 46, 55],
+        //     type: 'bar',
+        // },
+        // // 未中标金额
+        // {
+        //     name: '未中标金额',
+        //     data: [33, 47, 21, 80, 95, 35, 120],
+        //     type: 'bar',
+        // }
+    ],
+
+};
+
+
+
+// 折线图
+let option2 = {
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        data: ['总金额', '中标金额', '未中标金额']
+    },
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+    },
+    series: [
+        {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+        }
+    ]
+};
+
+// 饼图
+let option3 = {
+    tooltip: {
+        trigger: 'item'
+    },
+    legend: {
+        orient: 'vertical',
+        left: 'left',
+    },
+    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 option4 = {
+    tooltip: {
+        trigger: 'item',
+    },
+    // legend: {
+    //     data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+    // },
+    series: [
+        {
+            name: 'Funnel',
+            type: 'funnel',
+
+            sort: 'descending',
+            gap: 2,
+            label: {
+                show: true,
+                position: 'inside'
+            },
+            labelLine: {
+                length: 10,
+                lineStyle: {
+                    width: 1,
+                    type: 'solid'
+                }
+            },
+            itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 1
+            },
+            emphasis: {
+                label: {
+                    fontSize: 20
+                }
+            },
+            data: [
+                { value: 60, name: 'Visit' },
+                { value: 40, name: 'Inquiry' },
+                { value: 20, name: 'Order' },
+                { value: 80, name: 'Click' },
+                { value: 100, name: 'Show' }
+            ],
+        }
+    ]
+};
+let chartData: object;
+
+const getData = async (fetchFun: Function) => {
+    let res = await fetchFun()
+    chartData = res
+    option3.series[0].data = chartData.total_series.data.map((item, index) => ({
+        value: item,
+        name: chartData.column[index + 1]
+    }));
+    option = option3
+    initChart()
+}
+
+
+const initChart = () => {
+    myChart = echarts.init(chartDom);
+    myChart.setOption(option, true);
+}
+
+
+const changeChartType = async (e: any) => {
+    console.log(chartData, 'chartData')
+    switch (e) {
+        case 1:
+            option1.xAxis.data = Object.values(chartData.column)
+            let data = cloneDeep(chartData)
+            delete data.column
+            option1.series = Object.values(data)
+            option1.series.forEach(item => {
+                item.type = 'bar'
+            })
+            option = option1
+            break;
+        case 2:
+            option2.xAxis.data = option1.xAxis.data
+            option2.series = option1.series
+            option2.series.forEach(item => {
+                item.type = 'line'
+            })
+            option = option2
+            break;
+        case 3:
+            option = option3
+            break;
+        case 4:
+            option4.series[0].data = option3.series[0].data
+            option = option4
+            break;
+    }
+    initChart()
+}
+
+
+const chartResize = () => {
+    myChart.resize()
+}
+
+
+onMounted(() => {
+    chartDom = document.getElementById('main');
+
+    getData(apibid_industry_analysis);
+
+})
+
+
+
+</script>
+
+<style>
+.tit {
+    margin: 10px 0;
+    text-align: center;
+    font-size: 20px;
+}
+</style>

src/views/bid_margin_statistics/index.vue

@@ -25,16 +25,16 @@
 import * as echarts from 'echarts';
 import { ref, reactive, onMounted } from "vue";
 import { useRoute } from 'vue-router';
-import { apibid_margin_list } from '@/api/financial_bid_statistics'
+import { apibid_margin_statistics } from '@/api/financial_bid_statistics'
 
 const route = useRoute()
 var chartDom: any;
 var option: any;
 var myChart: any
 
-const chartWitdth = ref(500)
+const chartWitdth = ref(1000)
 const chartHeight = ref(500)
-const chartType = ref(1)
+const chartType = ref(3)
 const chartTypeList = reactive([
     {
         name: '柱状图',
@@ -63,32 +63,34 @@ let option1 = {
     yAxis: {
         type: 'value'
     },
-    legend: {
+    // legend: {
-        data: ['总金额', '中标金额', '未中标金额']
+    //     // data: ['总金额', '中标金额', '未中标金额']
-    },
+    // },
     xAxis: {
         type: 'category',
-        data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
+        // data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
+        data: []
+
     },
     series: [
         // 总金额
         {
-            name: '总金额',
+            // name: '总金额',
             data: [120, 200, 150, 80, 70, 110, 130],
             type: 'bar',
         },
-        // 中标金额
+        // // 中标金额
-        {
+        // {
-            name: '中标金额',
+        //     name: '中标金额',
-            data: [10, 20, 50, 10, 32, 46, 55],
+        //     data: [10, 20, 50, 10, 32, 46, 55],
-            type: 'bar',
+        //     type: 'bar',
-        },
+        // },
-        // 未中标金额
+        // // 未中标金额
-        {
+        // {
-            name: '未中标金额',
+        //     name: '未中标金额',
-            data: [33, 47, 21, 80, 95, 35, 120],
+        //     data: [33, 47, 21, 80, 95, 35, 120],
-            type: 'bar',
+        //     type: 'bar',
-        }
+        // }
     ],
 
 };
@@ -197,10 +199,8 @@ let chartData: object;
 const getData = async (fetchFun: Function) => {
     let res = await fetchFun()
     chartData = res
-    // option1.xAxis.data = chartData.data.map(item => item.name)
+    option3.series[0].data = res.data
-    // option1.series[0].data = chartData.data.map(item => item.value)
+    option = option3
-    console.log(chartData, '保证金统计表')
-    option = option1
     initChart()
 }
 
@@ -212,6 +212,7 @@ const initChart = () => {
 
 
 const changeChartType = (e: any) => {
+    console.log(chartData, 'chartData')
     switch (e) {
         case 1:
             option1.xAxis.data = chartData.data.map(item => item.name)
@@ -224,7 +225,7 @@ const changeChartType = (e: any) => {
             option = option2
             break;
         case 3:
-            option3.series[0].data = res.data
+            option3.series[0].data = chartData.data
             option = option3
             break;
         case 4:
@@ -244,7 +245,7 @@ const chartResize = () => {
 
 onMounted(() => {
     chartDom = document.getElementById('main');
-    getData(apibid_margin_list);
+    getData(apibid_margin_statistics);
 
 })
 

src/views/bid_project_status/index.vue

@@ -25,14 +25,14 @@
 import * as echarts from 'echarts';
 import { ref, reactive, onMounted } from "vue";
 import { useRoute } from 'vue-router';
-import { apibid_project_status, apibid_project_number, apibid_project_analysis, apibid_industry_analysis } from '@/api/marketing_bid_statistics'
+import { apibid_project_status, apibid_project_number, apibid_project_analysis } from '@/api/marketing_bid_statistics'
 
 const route = useRoute()
 var chartDom: any;
 var option: any;
 var myChart: any
 
-const chartWitdth = ref(500)
+const chartWitdth = ref(1000)
 const chartHeight = ref(500)
 const chartType = ref(3)
 const chartTypeList = reactive([
@@ -63,32 +63,34 @@ let option1 = {
     yAxis: {
         type: 'value'
     },
-    legend: {
+    // legend: {
-        data: ['总金额', '中标金额', '未中标金额']
+    //     // data: ['总金额', '中标金额', '未中标金额']
-    },
+    // },
     xAxis: {
         type: 'category',
-        data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
+        // data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
+        data: []
+
     },
     series: [
         // 总金额
         {
-            name: '总金额',
+            // name: '总金额',
             data: [120, 200, 150, 80, 70, 110, 130],
             type: 'bar',
         },
-        // 中标金额
+        // // 中标金额
-        {
+        // {
-            name: '中标金额',
+        //     name: '中标金额',
-            data: [10, 20, 50, 10, 32, 46, 55],
+        //     data: [10, 20, 50, 10, 32, 46, 55],
-            type: 'bar',
+        //     type: 'bar',
-        },
+        // },
-        // 未中标金额
+        // // 未中标金额
-        {
+        // {
-            name: '未中标金额',
+        //     name: '未中标金额',
-            data: [33, 47, 21, 80, 95, 35, 120],
+        //     data: [33, 47, 21, 80, 95, 35, 120],
-            type: 'bar',
+        //     type: 'bar',
-        }
+        // }
     ],
 
 };
@@ -246,7 +248,6 @@ onMounted(() => {
     if (route.path.includes('bid_project_status')) getData(apibid_project_status);
     if (route.path.includes('bid_project_number')) getData(apibid_project_number);
     if (route.path.includes('bid_project_analysis')) getData(apibid_project_analysis);
-    if (route.path.includes('bid_industry_analysis')) getData(apibid_industry_analysis);
 
 })
 

src/views/financial_performance_money_apply/detail.js

@@ -65,7 +65,6 @@ const detailConfig = {
             column: 1
 
         },
-
         {
             label: "创建人",
             value: "create_user",