yos_web/src/views/mediaStatistics/modules/salesfunnel.vue

// 各模块文件存储占比
<template>
  <div class="container normal-panel">
    <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>
    <div class="inline-16">
      <label  class="search__label" >业务员:</label>
      <el-select v-model="person" filterable placeholder="请选择" size="small" clearable @change="selectPerson">
        <el-option
            v-for="item in personnelList"
            :key="item.index"
            :label="item.name"
            :value="item.userid">
        </el-option>
      </el-select>
    </div>
    <div class="inline-16">
      <p class="search__label">状态:</p>
      <el-select v-model="isleave" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="leaveChange" :disabled="depment == ''">
        <el-option label="在职" value="1"></el-option>
        <el-option label="离职" value="2"></el-option>
      </el-select>
    </div>
    <div class="inline-16">
      <p class="search__label">领域:</p>
      <el-select v-model="tradefield" clearable style="margin-right:10px" size="small" placeholder="请选择领域" @change="dataParam.content.where.tradefield = tradefield;projectParam.content.where.tradefield = tradefield;getProportionOfFileModel()">
        <el-option v-for="item in tradefields" :label="item.value" :key="item.rowindex" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="inline-16">
      <el-checkbox v-model="unfinish" true-label="0" false-label="1" @change="dataParam.content.where.unfinish = unfinish;projectParam.content.where.unfinish = unfinish;getProportionOfFileModel()">包含失败、结案项目</el-checkbox>
    </div>
    <div class="inline-16" style="margin-top:0px;margin-bottom: 20px">
      <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==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>
      </el-button-group>
    </div>
    <div class="inline-16" style="margin-top:0px;margin-bottom: 20px">
      <el-date-picker
          size="small"
          v-model="dateSelect"
          @change="dateChange"
          type="daterange"
          :clearable="false"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div>
      <el-row>
        <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="14">
          <p class="title">销售漏斗图</p>
          <div class="re-panel">
            <div id="containerFunnel" style="height: calc(60vh)"></div>
          </div>
        </el-col>
        <el-col :offset="1" :xs="8" :sm="8" :md="8" :lg="8" :xl="9">
          <div>
            <p class="title">表格数据</p>
            <el-table
                :data="tableData"
                style="width: 100%"
                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="150">
              </el-table-column>
              <el-table-column
                  prop="projectqty"
                  label="项目数"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="signamount_due"
                  label="预计签约金额(万元)">
              </el-table-column>
              <el-table-column
                  prop="dealamount"
                  label="项目成交金额(万元)">
              </el-table-column>
            </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">
          <div v-if="scope.column.columnname === 'status'">
            <span style="color:#52c41a" v-if="scope.column.data[[scope.column.columnname]] == '跟进中'">{{scope.column.data[[scope.column.columnname]]}}</span>
            <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
            <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已失败'">{{scope.column.data[[scope.column.columnname]]}}</span>
            <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已结案'">{{scope.column.data[[scope.column.columnname]]}}</span>
          </div>
          <div v-else-if="scope.column.columnname === 'tag_sys'">
            <div v-for="item in scope.column.data.tag_sys" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
              <el-tag  color="#3874F6" size="mini" type="primary" effect="dark">
                <span>{{item}}</span>
              </el-tag>
            </div>
            <div v-for="item in scope.column.data.tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
              <el-tag color="#FA8C16" size="mini" type="warning" effect="dark">
                <span>{{item}}</span>
              </el-tag>
            </div>
          </div>
          <div v-else-if="scope.column.columnname === 'leader'">
            {{scope.data.column.leader[0] && scope.data.column.data.leader[0].name}}
          </div>
          <div v-else-if="scope.column.columnname === 'projecttype'">
            {{scope.column.data.projecttype + '-' + scope.column.data.projecttype_remarks}}
          </div>
          <div v-else-if="scope.column.columnname == 'totalinvestment'">
            <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'costofconstruction'">
            <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'budgetary'">
            <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'signamount_due'">
            <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'dealamount'">
            <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'begdate_due'">
            <span>{{scope.column.data[[scope.column.columnname]] ? scope.column.data[[scope.column.columnname]] !== 'NaN-NaN'?scope.column.data[[scope.column.columnname]]:'--' :'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'enddate_due'">
            <span>{{scope.column.data[[scope.column.columnname]] ? scope.column.data[[scope.column.columnname]] !== 'NaN-NaN'?scope.column.data[[scope.column.columnname]]:'--' :'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'scale'">
            <span>{{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]] + scope.column.data.unitname:'--'}}</span>
          </div>
          <div v-else>
            {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
          </div>
        </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="[20,50,100,150]"
            :page-size="20"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import tableTemp from '@/components/table/index8'
import { Funnel,G2 } from '@antv/g2plot';
const G = G2.getEngine('canvas');
export default {
  components:{tableTemp},
  data () {
    return {
      chartPie:null,
      flagIndex:'',
      /*tableHieght:'calc(100vh)',*/
      tableHieght:'857px',
      tableData:[],
      person:'',
      depment:'',
      dateType:"",
      projectTile:"",
      fullscreenLoading:false,
      total:0,
      sa_projstagemagid:'',
      data:[{ stagename: '简历筛选', sequence1: 253 },],
      activeName: '部门',
      dataid:'',
      range:'',
      pointValue:'',
      isDep:false,
      isPerson:false,
      visible:false,
      deplist:[],
      personnelList:[],
      projectList:[],
      tablecols:[],
      depmentParam:{
        "id": 20230620102004,
        "content": {
          "isleave":''
        }
      },
      dataParam:{
        "id": 20230630151504,
        "content": {
          "type":0, // 0 按人搜素 1 按部门搜索
          "dataid":0, // 人员id或部门id
          'dateType':1,
          "where": {
            "begindate": "",
            "begdate":"",
            "enddate":"",
            "departmentid":"",
            "tradefield":"",
            "isleave":"0",
            "unfinish":'1'
          }
        }
      },
      projectParam:{
        "id": 20230719085004,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "type": '',
          "dataid": '',
          "dateType": 1,
          "sa_projstagemagid":'',
          "where": {
            "begdate":"",
            "enddate":"",
            "tradefield":"",
            "isleave":"0",
            "unfinish":'1'
          }
        }
      },
      dateSelect:[],
      tradefield:'',
      isleave:'',
      tradefields:[],
      unfinish:'1'
    }
  },
  methods:{
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
      this.person = JSON.parse(window.sessionStorage.getItem('active_account')).name
      this.getProportion()
    },
    async getProportion () {
      const res = await this.$api.requested(this.dataParam)
      this.tableData = res.data
      sessionStorage.setItem('flagIndex',res.data.length)
      this.renderPie()
    },
    async personData(){
      const res = await this.$api.requested(this.depmentParam)
      this.personnelList = res.data.hr
    },
    leaveChange(){
      if (this.isleave){
        this.dataParam.content.where.isleave = this.isleave
        this.projectParam.content.where.isleave = this.isleave
        this.depmentParam.content.isleave = this.isleave
        this.personData()
        this.getProportionOfFileModel()
      }else {
        this.dataParam.content.where.isleave = 0
        this.projectParam.content.where.isleave = 0
        this.depmentParam.content.isleave = 0
        this.personData()
        this.getProportionOfFileModel()
      }

    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        if (node.subdep.length === 0){
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
          }
        }else {
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
            children: []
          }
        }
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    selectDep(val) {
      this.person = ''
      this.dataParam.content.type = 1
      this.dataParam.content.dataid = val[val.length -1]
      this.getProportionOfFileModel()
    },
    selectPerson(val){
      this.depment = ''
      this.isleave = ''
      this.dataParam.content.type = 0
      this.dataParam.content.dataid = val
      this.getProportionOfFileModel()
    },
    dataChange(val){
      this.dataParam.content.dateType = val
      this.projectParam.content.dateType = val
      if (val == '1'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }else if (val == '2'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 9, currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }else if (val == '3'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 6, currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }else if (val == '4'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 3, currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }
      this.getProportionOfFileModel()
    },
    dateSet(val){
      if (val == '1'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }else if (val == '2'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 9, currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }else if (val == '3'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 6, currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }else if (val == '4'){
        let currentDate = new Date(); // 获取当前日期
        let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 3, currentDate.getDate() + 1); // 计算起始日期
        let endDate = currentDate; // 结束日期为当前日期
        this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
      }
    },
    dateChange(){
      this.dataParam.content.dateType = 0
      this.dataParam.content.where.begdate = this.dateSelect[0]
      this.dataParam.content.where.enddate = this.dateSelect[1]
      this.projectParam.content.dateType = 0
      this.projectParam.content.where.begdate = this.dateSelect[0]
      this.projectParam.content.where.enddate = this.dateSelect[1]
      this.getProportionOfFileModel()
    },
    renderPie() {
      if (JSON.parse(sessionStorage.getItem('flagIndex')) === 7){
        const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed'];
        this.chartPie = new Funnel('containerFunnel', {
          data: this.tableData,
          maxSize:0.6,
          xField: 'stagename',
          yField: 'wide',
          shape: 'funnel',
          dynamicHeight: false,
          legend: false,
          interactions: [{ type: 'element-active'}],
          color:['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed','#fff'],
          label: {
            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} 项目数: ${datum.sequence1} 转化率: ${datum.zhl?Math.round((datum.zhl* 100)*100)/100 + '%':'--'}  预计签约金额: ${datum.signamount_due}万元  项目成交金额: ${datum.dealamount}万元`
                  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 == undefined) {
                  clr= '#ffffff'
                }
                return clr
              };
              group.addShape({
                type: 'text',
                attrs: {
                  x: 40,
                  y: 0,
                  text: content(),
                  textAlign: 'left',
                  fontSize: 14,
                  textBaseline: 'top',
                  fill: color()
                },
              });
              return group;
            },
          },

          tooltip:{
            customContent: (title, items) => {
              // 构建自定义内容
              const content = `<div>
              <ul style="padding:10px;">
                ${items.map((item) => `
                <li>
                <p style="margin-bottom:10px">${title}</p>
                <p>项目数:${item.data.projectqty}</p>
                </li>`).join('')}
              </ul>
            </div>`;

              return content;
            },
          },
          conversionTag: false,
          funnelStyle: {
            stroke: '#fff',
            lineWidth: 3,
          },
        });
        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.projectParam.content.pageNumber = 1
            this.projectParam.content.pageSize = 20
            this.getProjectList()
          }

        })
        this.getProportionOfFileModel()
      }else if(JSON.parse(sessionStorage.getItem('flagIndex')) === 8){
        const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed','#6FD26C'];
        this.chartPie = new Funnel('containerFunnel', {
          data: this.tableData,
          maxSize:0.6,
          xField: 'stagename',
          yField: 'wide',
          shape: 'funnel',
          dynamicHeight: false,
          legend: false,
          interactions: [{ type: 'element-active'}],
          color:['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed','#6FD26C','#fff'],
          label: {
            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} 项目数: ${datum.sequence1} 转化率: ${datum.zhl?Math.round((datum.zhl* 100)*100)/100 + '%':'--'}  预计签约金额: ${datum.signamount_due}万元  项目成交金额: ${datum.dealamount}万元`
                  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 == undefined) {
                  clr= '#ffffff'
                }
                return clr
              };
              group.addShape({
                type: 'text',
                attrs: {
                  x: 40,
                  y: 0,
                  text: content(),
                  textAlign: 'left',
                  fontSize: 14,
                  textBaseline: 'top',
                  fill: color()
                },
              });
              return group;
            },
          },

          tooltip:{
            customContent: (title, items) => {
              // 构建自定义内容
              const content = `<div>
              <ul style="padding:10px;">
                ${items.map((item) => `
                <li>
                <p style="margin-bottom:10px">${title}</p>
                <p>项目数:${item.data.projectqty}</p>
                </li>`).join('')}
              </ul>
            </div>`;

              return content;
            },
          },
          conversionTag: false,
          funnelStyle: {
            stroke: '#fff',
            lineWidth: 3,
          },
        });
        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.projectParam.content.pageNumber = 1
            this.projectParam.content.pageSize = 20
            this.getProjectList()
          }

        })
        this.getProportionOfFileModel()
      }else if(JSON.parse(sessionStorage.getItem('flagIndex')) === 6){
        const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa'];
        this.chartPie = new Funnel('containerFunnel', {
          data: this.tableData,
          maxSize:0.6,
          xField: 'stagename',
          yField: 'wide',
          shape: 'funnel',
          dynamicHeight: false,
          legend: false,
          interactions: [{ type: 'element-active'}],
          color:['#6395fa','#63daab','#657798','#f7c122','#7666fa','#fff'],
          label: {
            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} 项目数: ${datum.sequence1} 转化率: ${datum.zhl?Math.round((datum.zhl* 100)*100)/100 + '%':'--'}  预计签约金额: ${datum.signamount_due}万元  项目成交金额: ${datum.dealamount}万元`
                  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 == undefined) {
                  clr= '#ffffff'
                }
                return clr
              };
              group.addShape({
                type: 'text',
                attrs: {
                  x: 40,
                  y: 0,
                  text: content(),
                  textAlign: 'left',
                  fontSize: 14,
                  textBaseline: 'top',
                  fill: color()
                },
              });
              return group;
            },
          },

          tooltip:{
            customContent: (title, items) => {
              // 构建自定义内容
              const content = `<div>
              <ul style="padding:10px;">
                ${items.map((item) => `
                <li>
                <p style="margin-bottom:10px">${title}</p>
                <p>项目数:${item.data.projectqty}</p>
                </li>`).join('')}
              </ul>
            </div>`;

              return content;
            },
          },
          conversionTag: false,
          funnelStyle: {
            stroke: '#fff',
            lineWidth: 3,
          },
        });
        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.projectParam.content.pageNumber = 1
            this.projectParam.content.pageSize = 20
            this.getProjectList()
          }

        })
        this.getProportionOfFileModel()
      } else {
        /*const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed','#6FD26C','#DFC064'];*/
        const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed','#6FD26C','#DFC064'];
        this.chartPie = new Funnel('containerFunnel', {
          data: this.tableData,
          maxSize:0.6,
          xField: 'stagename',
          yField: 'wide',
          shape: 'funnel',
          dynamicHeight: false,
          legend: false,
          interactions: [{ type: 'element-active'}],
          color:['#6395fa','#63daab','#657798','#f7c122','#7666fa','#75cbed','#6FD26C','#DFC064','#fff'],
          label: {
            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} 项目数: ${datum.sequence1} 转化率: ${datum.zhl?Math.round((datum.zhl* 100)*100)/100 + '%':'--'}  预计签约金额: ${datum.signamount_due}万元  项目成交金额: ${datum.dealamount}万元`
                  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 == undefined) {
                  clr= '#ffffff'
                }
                return clr
              };
              group.addShape({
                type: 'text',
                attrs: {
                  x: 40,
                  y: 0,
                  text: content(),
                  textAlign: 'left',
                  fontSize: 14,
                  textBaseline: 'top',
                  fill: color()
                },
              });
              return group;
            },
          },

          tooltip:{
            customContent: (title, items) => {
              // 构建自定义内容
              const content = `<div>
              <ul style="padding:10px;">
                ${items.map((item) => `
                <li>
                <p style="margin-bottom:10px">${title}</p>
                <p>项目数:${item.data.projectqty}</p>
                </li>`).join('')}
              </ul>
            </div>`;

              return content;
            },
          },
          conversionTag: false,
          funnelStyle: {
            stroke: '#fff',
            lineWidth: 3,
          },
        });
        this.chartPie.render();
        document.addEventListener('click',(evt) => {
          const states = this.chartPie.getStates();
          let dataList = []
          dataList = states
          if (dataList.length > 0 && dataList[0].data.stagename !== ''){
            this.projectTile = dataList[0].data.stagename
            this.sa_projstagemagid = dataList[0].data.sa_projstagemagid
            this.projectParam.content.pageNumber = 1
            this.projectParam.content.pageSize = 20
            this.getProjectList()
          }

        })
        this.getProportionOfFileModel()
      }


    },
    async getProportionOfFileModel () {
      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.projectParam.content.pageNumber = 1
      this.projectParam.content.pageSize = 20
      this.getProjectList()
      sessionStorage.setItem('flagIndex',dataList.length)
      this.flagIndex = dataList.length
      this.chartPie.changeData(res.data)
      dataList.splice(dataList.length-1)
    },
    async getProjectList(){
      this.projectParam.content.type = this.dataParam.content.type
      this.projectParam.content.dataid = this.dataParam.content.dataid
      /*this.projectParam.content.dateType = this.dataParam.content.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()
    },
    /*获取领域*/
    async queryTradeField(){
      const res = await this.$store.dispatch('optiontypeselect','tradefield')
      this.tradefields = res.data
    }
  },
  mounted () {
   /* this.renderPie()*/
    this.departmentrtment()
    this.dateSet(1)
    this.queryTradeField()
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).projectTable.tablecols
  }
}

</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)*/
}
</style>