销售漏斗

src/components/table/index5.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
-    <el-table ref="table" :row-class-name="tableClassName" highlight-current-row :data="data"  size="mini"  :height="height ==''?data.length <= 4?'260px':data.length <= 20?'':'calc(100vh - 420px)':height"  @row-click="rowClick" style="width:100%;min-height:260px;max-height: calc(100vh - 420px)" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
+    <el-table ref="table" :row-class-name="tableClassName" highlight-current-row :data="data"  size="mini"  :height="height ==''?data.length <= 4?'260px':data.length <= 20?'':'calc(100vh - 420px)':height"  @row-click="rowClick"
+              style="width:100%;min-height:260px;max-height: calc(100vh - 420px)" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
               :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border @selection-change="selectionChange" >
       <el-table-column
           type="selection"
@@ -32,7 +33,7 @@ export default {
     custom:是否启用自定义结构;
     opwidth:操作列宽度
   */
-  props:['layout','data','custom','height','fixedName','width','checkbox','loading'],
+  props:['layout','data','custom','height','fixedName','width','checkbox'],
   data () {
     return {
       list:[],

src/views/mediaStatistics/modules/salesfunnel.vue

@@ -1,7 +1,7 @@
 // 各模块文件存储占比
 <template>
   <div class="container normal-panel">
-    <div class="inline-16" style="margin-top:20px;margin-bottom: 50px">
+    <div class="inline-16" style="margin-top:0px;margin-bottom: 20px">
       <label  class="search__label" >部门:</label>
       <el-cascader ref="selectdep" size="small" v-model="depment" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep"  clearable></el-cascader>
     </div>
@@ -18,7 +18,7 @@
     </div>
     <div class="inline-16">
       <el-button-group>
-        <el-button size="small" :type="dataParam.content.dateType==1?'primary':''" @click="dataChange(1)">近一年</el-button>
+        <el-button size="small" :type="dataParam.content.dateType==1?'primary':''" @click="dataChange(1)" >近一年</el-button>
         <el-button size="small" :type="dataParam.content.dateType==2?'primary':''" @click="dataChange(2)">近九个月</el-button>
         <el-button size="small" :type="dataParam.content.dateType==3?'primary':''" @click="dataChange(3)">近六个月</el-button>
         <el-button size="small" :type="dataParam.content.dateType==4?'primary':''" @click="dataChange(4)">近三个月</el-button>
@@ -29,7 +29,7 @@
         <el-col :span="14">
           <p class="title">销售漏斗图</p>
           <div class="re-panel">
-            <div id="containerFunnel" style="height: calc(100vh - 500px)"></div>
+            <div id="containerFunnel" style="height: calc(60vh)"></div>
           </div>
         </el-col>
         <el-col :span="10">
@@ -37,14 +37,15 @@
             <p class="title">表格数据</p>
             <el-table
                 :data="tableData"
-                style="width: 100%"
-                width="900px"
+                style="width: 500px"
                 size="small"
+                :header-cell-style="{height:'60px',fontWeight:'400',fontSize:'22px',color:'#333333',background:'#ddebf7'}"
+                :cell-style="{height:'40px',fontWeight:'400',fontSize:'18px'}"
                 border>
               <el-table-column
                   prop="stagename"
                   label="阶段"
-                  width="120">
+                  width="180">
               </el-table-column>
               <el-table-column
                   prop="projectqty"
@@ -58,25 +59,69 @@
             </el-table>
           </div>
         </el-col>
+<!--        <el-col :span="24" style="margin-top: 20px">
+          <p class="title">{{projectTile}}</p>
+          <tableTemp :layout="tablecols" :data="projectList" :opwidth="200" :custom="true"  :height="tableHieght">
+            <template v-slot:customcol="scope">
+              <p>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'&#45;&#45;'}}</p>
+            </template>
+          </tableTemp>
+          <div class="container normal-panel" style="text-align:right">
+            <el-pagination
+                background
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="projectParam.content.pageNumber"
+                :page-sizes="[10, 10, 50, 100]"
+                :page-size="10"
+                layout="total,sizes, prev, pager, next, jumper"
+                :total="total">
+            </el-pagination>
+          </div>
+        </el-col>-->
       </el-row>
-
-
     </div>
-
+    <div>
+      <p class="title">{{projectTile}}</p>
+      <tableTemp :layout="tablecols" :data="projectList" :opwidth="200" :custom="true"  :height="tableHieght">
+        <template v-slot:customcol="scope">
+          <p>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'&#45;&#45;'}}</p>
+        </template>
+      </tableTemp>
+      <div  style="text-align:right;margin-top: 10px">
+        <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="projectParam.content.pageNumber"
+            :page-sizes="[10, 10, 50, 100]"
+            :page-size="10"
+            layout="total,sizes, prev, pager, next, jumper"
+            :total="total">
+        </el-pagination>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import tableTemp from '@/components/table/index5'
 import { Funnel,G2 } from '@antv/g2plot';
 const G = G2.getEngine('canvas');
 export default {
+  components:{tableTemp},
   data () {
     return {
       chartPie:null,
+      tableHieght:'calc(10vh)',
       tableData:[],
       person:'',
       depment:'',
       dateType:"",
+      projectTile:"",
+      fullscreenLoading:false,
+      total:0,
+      sa_projstagemagid:'',
       data:[{ stagename: '简历筛选', sequence1: 253 },],
       activeName: '部门',
       dataid:'',
@@ -87,6 +132,8 @@ export default {
       visible:false,
       deplist:[],
       personnelList:[],
+      projectList:[],
+      tablecols:[],
       depmentParam:{
         "id": 20230620102004,
         "content": {
@@ -104,6 +151,17 @@ export default {
             "departmentid":""
           }
         }
+      },
+      projectParam:{
+        "id": 20230719085004,
+        "content": {
+          "pageNumber": 1,
+          "pageSize": 10,
+          "type": '',
+          "dataid": '',
+          "dateType": '',
+          "sa_projstagemagid":''
+        }
       }
     }
   },
@@ -169,18 +227,15 @@ export default {
       return arr
     },
     selectDep(val) {
-      console.log(val)
       this.person = ''
       this.dataParam.content.type = 1
-      this.dataParam.content.dataid = val[0]
+      this.dataParam.content.dataid = val[val.length -1]
       this.getProportionOfFileModel()
     },
     selectPerson(val){
-      console.log(val)
       this.depment = ''
       this.dataParam.content.type = 0
       this.dataParam.content.dataid = val
-      console.log(this.dataParam)
       this.getProportionOfFileModel()
     },
     dataChange(val){
@@ -188,15 +243,16 @@ export default {
       this.getProportionOfFileModel()
     },
     renderPie() {
-      const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed'];
+      const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed','#6FD26C','#DFC064'];
       this.chartPie = new Funnel('containerFunnel', {
-        data: this.data,
+        data: this.tableData,
         maxSize:0.6,
         xField: 'stagename',
-        yField: 'sequence1',
+        yField: 'wide',
         shape: 'pyramid',
         dynamicHeight: false,
         legend: false,
+        interactions: [{ type: 'element-active'}],
         label: {
           layout:"fixedOverlap",
           position:'right',
@@ -205,7 +261,7 @@ export default {
             const group = new G.Group({});
             const content = ()=>{
                 if (this.tableData[0]) {
-                  const text = `${datum.stagename}  当前项目数: ${datum.projectqty} 项目数: ${this.tableData[0].projectqty} 转化率: ${datum.zhl?Math.round((datum.zhl* 100)*100)/100 + '%':'--'}  预计签约金额: ${datum.signamount_due}万元`
+                  const text = `${datum.stagename}  当前项目数: ${datum.projectqty} 项目数: ${datum.sequence1} 转化率: ${datum.zhl?Math.round((datum.zhl* 100)*100)/100 + '%':'--'}  预计签约金额: ${datum.signamount_due}万元`
                   const lines = text.split('  ');
                   return lines.join('\n');
                 }
@@ -242,7 +298,7 @@ export default {
           customContent: (title, items) => {
             // 构建自定义内容
             const content = `<div>
-              <ul style="padding:10px">
+              <ul style="padding:10px;">
                 ${items.map((item) => `
                 <li>
                 <p style="margin-bottom:10px">${title}</p>
@@ -261,6 +317,18 @@ export default {
         },
       });
       this.chartPie.render();
+      document.addEventListener('click',(evt) => {
+        const states = this.chartPie.getStates();
+        let dataList = []
+        dataList = states
+        if (dataList.length > 0){
+          this.projectTile = dataList[0].data.stagename
+          this.sa_projstagemagid = dataList[0].data.sa_projstagemagid
+          this.getProjectList()
+        }
+
+      })
+
       /*this.departmentrtment()*/
       this.getProportionOfFileModel()
     },
@@ -277,15 +345,41 @@ export default {
           }
         }
       }*/
-      console.log(this.dataParam,'dataParam')
       const res = await this.$api.requested(this.dataParam)
       this.tableData = res.data
+      let dataList = []
+      dataList = res.data
+      this.sa_projstagemagid = dataList[0].sa_projstagemagid
+      this.projectTile = dataList[0].stagename
+      this.getProjectList()
       this.chartPie.changeData(res.data)
-    }
+    },
+    async getProjectList(){
+      this.projectParam.content.type = this.dataParam.type
+      this.projectParam.content.dataid = this.dataParam.dataid
+      this.projectParam.content.dateType = this.dataParam.dateType
+      this.projectParam.content.sa_projstagemagid = this.sa_projstagemagid
+      const res = await this.$api.requested(this.projectParam)
+      this.projectList = res.data
+      this.total = res.total
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.projectParam.content.pageSize = val
+      this.getProjectList()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.projectParam.content.pageNumber = val
+      this.getProjectList()
+    },
   },
   mounted () {
    /* this.renderPie()*/
     this.departmentrtment()
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).projectTable.tablecols
   }
 }
 
@@ -304,6 +398,6 @@ export default {
   border-left: .3rem solid #3874F6;
 }
 .container{
-  height:calc(100vh - 180px)
+ /* height:calc(100vh)*/
 }
 </style>