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

src/views/mediaStatistics/modules/salesfunnel.vue

@@ -1,9 +1,12 @@
 // 各模块文件存储占比
 <template>
   <div class="container normal-panel">
-    <div >
+    <div>
       <p class="title">销售漏斗图</p>
-      <div id="containerFunnel"></div>
+      <div class="re-panel">
+        <div id="containerFunnel"></div>
+      </div>
+      
     </div>
     <div>
     <p class="title">表格数据</p>
@@ -40,7 +43,8 @@
 </template>
 
 <script>
-import { Funnel } from '@antv/g2plot';
+import { Funnel,G2 } from '@antv/g2plot';
+const G = G2.getEngine('canvas');
 export default {
   data () {
     return {
@@ -51,16 +55,54 @@ export default {
   },
   methods:{
     renderPie() {
+      const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed'];
       this.chartPie = new Funnel('containerFunnel', {
         data: this.data,
-        width:800,
+        maxSize:0.3,
         xField: 'stagename',
         yField: 'sequence1',
+        shape: 'pyramid',
         dynamicHeight: false,
         legend: false,
         label: {
-          formatter: (datum) => {
-            return `${datum.stagename}:${datum.projectqty}`;
+          layout:"fixedOverlap",
+          position:'right',
+          offsetX:40,
+          content:(datum)=>{
+            const group = new G.Group({});
+            const content = ()=>{
+                if (this.tableData[0]) {
+                  const text = `${datum.stagename}  当前项目数: ${datum.projectqty} 项目数: ${this.tableData[0].projectqty} 转化率: ${((datum[Funnel.CONVERSATION_FIELD][1] / datum[Funnel.CONVERSATION_FIELD][0]) * 100).toFixed(2)}%  总投资金额: ${datum.totalinvestment} 总计项目预算: ${datum.budgetary} 总预计签约金额: ${datum.signamount_due}`
+                  const lines = text.split('  ');
+                  return lines.join('\n');
+                }
+            };
+            const color = ()=>{
+              let clr = ''
+              this.tableData.some((e,index) =>{
+                if (e.stagename == datum.stagename) {
+                  clr = colorArray[index]
+                }
+              })
+              if (clr == '') {
+                clr= '#666'
+              }
+              return clr
+            };
+            group.addShape({
+              type: 'text',
+              attrs: {
+                x: 30,
+                y: 0,
+                text: content(),
+                textAlign: 'left',
+                fontSize: 14,
+                textBaseline: 'top',
+                fill: color()
+              },
+            });
+            return group;
+            
           },
         },
         tooltip:{
@@ -79,16 +121,11 @@ export default {
             return content;
           },
         },
-        conversionTag: {
-          offsetX: -40,
-          offsetY:10,
-          formatter: (datum) => {
-            console.log(datum,'conversionTag')
-            return `${datum.stagename} 项目数:${datum.projectqty} 转化率:${((datum[Funnel.CONVERSATION_FIELD][1] / datum[Funnel.CONVERSATION_FIELD][0]) * 100).toFixed(2)}%`;
-          },
+        conversionTag: false,
+        funnelStyle: {
+          stroke: '#fff',
+          lineWidth: 3,
         },
-        // 关闭 conversionTag 转化率 展示
-        // conversionTag: false,
       });
       this.chartPie.render();
       this.getProportionOfFileModel()
@@ -118,10 +155,6 @@ export default {
 <style>
 </style>
 <style scoped>
-#containerFunnel{
-  width:1000px;
-  margin: 0 auto;
-}
 .title{
   height: 20px;
   line-height: 20px;

src/views/mediaStatistics/modules/salesfunnel1.vue

@@ -0,0 +1,145 @@
+// 各模块文件存储占比
+<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 { Mix } from '@antv/g2plot';
+let plot = null
+export default {
+
+  data () {
+    return {
+      chartPie:null,
+      tableData:[],
+      data:[{ stagename: '简历筛选', sequence1: 253 },]
+    }
+  },
+  methods:{
+    renderPie() {
+       plot = new Mix('containerFunnel', {
+        appendPadding: [8, 40, 8, 18],
+        syncViewPadding: true,
+        meta: {
+          value: { sync: true },
+        },
+        tooltip: { shared: true, showMarkers: false, showTitle: false },
+        plots: [
+          {
+            type: 'funnel',
+            options: {
+              data: this.data,
+              maxSize:0.5,
+              xField: 'stagename',
+              yField: 'sequence1',
+              shape: 'pyramid',
+              label: { position: 'right', style: { fill: 'rgba(0,0,0,0.65)' }, offsetX: 10 },
+              funnelStyle: { fillOpacity: 0.85 },
+              conversionTag:true,
+            },
+          },
+          {
+            type: 'funnel',
+            options: {
+              data: this.data,
+              maxSize:0.5,
+              xField: 'stagename',
+              yField: 'sequence1',
+              shape: 'pyramid',
+              conversionTag:false,
+              label: false,
+              funnelStyle: { lineWidth: 1, stroke: '#fff' },
+            },
+          },
+        ],
+        interactions: [{ type: 'element-active' }],
+      });
+      plot.render();
+      
+    },
+    async getProportionOfFileModel () {
+      let param = {
+        "id": 20230630151504,
+        "content": {
+            "where": {
+              "begindate": "",
+              "enddate":"",
+              "departmentid":""
+            }
+        }
+      }
+      const res = await this.$api.requested(param)
+      this.tableData = res.data
+      this.data = res.data
+      // plot.changeData(res.data)
+      this.renderPie()
+    }
+  },
+  mounted () {
+    // )
+    this.getProportionOfFileModel()
+  }
+}
+
+</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)
+}
+.re-panel{
+  position: relative;
+}
+.abs-panel {
+  font-size: 12px;
+  color:#000;
+  z-index: 999;
+}
+</style>