Merge remote-tracking branch 'origin/mergeBranch' into mergeBranch

src/router/index.js

@@ -125,8 +125,17 @@ let routes = [
           title: '业务员画像',
           ast_nav:true
         },
-        component: () => import(/!* webpackChunkName: "about" *!/ '@/components/mindmap/saler.vue')
-      }*/]
+        component: () => import(/* webpackChunkName: "about" */ '@/components/mindmap/saler.vue')
+      },{
+        path: '/salesfunnel',
+        name: 'salesfunnel',
+        meta: {
+          title: '销售漏斗',
+          ast_nav:true
+        },
+        component: () => import(/* webpackChunkName: "about" */ '@/views/mediaStatistics/modules/salesfunnel.vue')
+      }
+      ]
   }
 ];
 

src/views/mediaStatistics/modules/salesfunnel.vue

@@ -0,0 +1,113 @@
+// 各模块文件存储占比
+<template>
+  <div class="container normal-panel">
+    <div >
+      <p class="title">销售漏斗图</p>
+      <div id="containerFunnel"></div>
+    </div>
+    <div>
+    <p class="title">表格数据</p>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      size="small"
+      border>
+      <el-table-column
+        prop="stagename"
+        label="阶段"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="projectqty"
+        label="项目数"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="signamount_due"
+        label="签约金额(万元)">
+      </el-table-column>
+      <el-table-column
+        prop="totalinvestment"
+        label="总计预计投资金额(万元)">
+      </el-table-column>
+      <el-table-column
+        prop="budgetary"
+        label="项目预算(万元)">
+      </el-table-column>
+    </el-table>
+    </div> 
+  </div>
+</template>
+
+<script>
+import { Funnel } from '@antv/g2plot';
+export default {
+  data () {
+    return {
+      chartPie:null,
+      tableData:[]
+    }
+  },
+  methods:{
+    renderPie() {
+      this.chartPie = new Funnel('containerFunnel', {
+        data: [],
+        width:500,
+        xField: 'stagename',
+        yField: 'projectqty',
+        legend: false,
+        // label: {
+        //   formatter: (datum) => {
+        //     return `${(datum[Funnel.PERCENT_FIELD] * 100).toFixed(2)}%`;
+        //   },
+        // },
+        conversionTag: {
+          formatter: (datum) => {
+            return `${((datum[Funnel.CONVERSATION_FIELD][1] / datum[Funnel.CONVERSATION_FIELD][0]) * 100).toFixed(2)}%`;
+          },
+        },
+        // 关闭 conversionTag 转化率 展示
+        // conversionTag: false,
+      });
+      this.chartPie.render();
+      this.getProportionOfFileModel()
+    },
+    async getProportionOfFileModel () {
+      let param = {
+        "id": 20230630151504,
+        "content": {
+            "where": {
+              "begindate": "",
+              "enddate":"",
+              "departmentid":""
+            }
+        }
+      }
+      const res = await this.$api.requested(param)
+      this.tableData = res.data
+      this.chartPie.changeData(res.data)
+    }
+  },
+  mounted () {
+    this.renderPie()
+  }
+}
+
+</script>
+<style>
+</style>
+<style scoped>
+.title{
+  height: 20px;
+  line-height: 20px;
+  font-size: 14px;
+  text-indent: 7px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 20px;
+  border-left: .3rem solid #3874F6;
+}
+.container{
+  height:calc(100vh - 200px)
+}
+</style>