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" >{{$t('部门') +':'}}</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" >{{$t('业务员' +':')}}</label>
      <el-select v-model="person" filterable :placeholder="$t('请选择')" size="small" clearable @change="selectPerson">
        <el-option
            v-for="item in personnelList"
            :key="item.index"
            :label="$t(item.name)"
            :value="item.userid">
        </el-option>
      </el-select>
    </div>
    <div class="inline-16">
      <p class="search__label">{{$t('状态') +':'}}</p>
      <el-select v-model="isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="leaveChange" >
        <el-option :label="$t('在职')" value="1"></el-option>
        <el-option :label="$t('离职')" value="2"></el-option>
      </el-select>
    </div>
    <div class="inline-16">
      <p class="search__label">{{$t('领域') +':'}}</p>
      <el-select v-model="tradefield" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择领域')" @change="dataParam.content.where.tradefield = tradefield;projectParam.content.where.tradefield = tradefield;getProportionOfFileModel()">
        <el-option v-for="item in tradefields" :label="$t(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()">{{$t(`包含失败、结案项目`)}}</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==99?'primary':''" @click="dataChange(99)">{{$t(`全部`)}}</el-button>
        <el-button size="small" :type="dataParam.content.dateType==1?'primary':''" @click="dataChange(1)">{{$t(`近一年`)}}</el-button>
        <el-button size="small" :type="dataParam.content.dateType==2?'primary':''" @click="dataChange(2)">{{$t(`近九个月`)}}</el-button>
        <el-button size="small" :type="dataParam.content.dateType==3?'primary':''" @click="dataChange(3)">{{$t(`近六个月`)}}</el-button>
        <el-button size="small" :type="dataParam.content.dateType==4?'primary':''" @click="dataChange(4)">{{$t(`近三个月`)}}</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="$t('至')"
         :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')">
      </el-date-picker>
    </div>
    <div>
      <el-row>
        <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="14">
          <p class="title">{{$t(`销售漏斗图`)}}</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">{{$t(`表格数据`)}}</p>
            <tableNewTemp :layout="tablecolsData" :data="tableData" :opwidth="200" :custom="true" :headerOptions="['signamount_due','dealamount']">
              <template v-slot:header="scope">
                <div v-if="scope.column.columnname == 'signamount_due'">
                  <p>{{$t(`预计签约`)}}</p>
                  <p>{{$t(`金额(万元)`)}}</p>
                </div>
                <div v-if="scope.column.columnname == 'dealamount'">
                  <p>{{$t(`项目成交`)}}</p>
                  <p>{{$t(`金额(万元)`)}}</p>
                </div>
              </template>
              <template v-slot:customcol="scope">
                <div>
                  {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
                </div>
              </template>
            </tableNewTemp>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="siteid == 'HY' || siteid == 'YOSTEST1'">
      <p class="title">{{$t(`项目预计成交分析`)}}</p>
      <previousTwelveMonths :data="previousData"></previousTwelveMonths>
      <futureTwelveMonths ref="futureTwelveMonthsRef" style="margin-top: 15px"></futureTwelveMonths>
    </div>
    <div style="margin-top: 40px">
      <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:scope.column.data[[scope.column.columnname]] == '跟进中'?'#52c41a':tool.getStatusColor(scope.column.data[[scope.column.columnname]],true)}" >{{$t(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>{{$t(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>{{$t(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 tableNewTemp from '@/components/table/index10'
import { Funnel,G2 } from '@antv/g2plot';
const G = G2.getEngine('canvas');
import chartTemplate from '@/template/chartG2Template/Column'
import previousTwelveMonths from './previousTwelveMonths'
import futureTwelveMonths from './futureTwelveMonths'
export default {
  components:{tableTemp,tableNewTemp,chartTemplate,previousTwelveMonths,futureTwelveMonths},
  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:[],
      tablecolsData:[],
      depmentParam:{
        "id": 20230620102004,
        "content": {
          "isleave":'1'
        }
      },
      dataParam:{
        "id": 20230630151504,
        "content": {
          "type":0, // 0 按人搜素 1 按部门搜索
          "dataid":0, // 人员id或部门id
          'dateType':99,
          "where": {
            "begindate": "",
            "begdate":"",
            "enddate":"",
            "departmentid":"",
            "tradefield":"",
            "isleave":"1",
            "unfinish":'1'
          }
        }
      },
      projectParam:{
        "id": 20230719085004,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "type": '',
          "dataid": '',
          "dateType": 99,
          "sa_projstagemagid":'',
          "where": {
            "begdate":"",
            "enddate":"",
            "tradefield":"",
            "isleave":"1",
            "unfinish":'1'
          }
        }
      },
      dateSelect:[],
      tradefield:'',
      isleave:'1',
      tradefields:[],
      unfinish:'1',
      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid,
      previousData:[],
      futreData:[]
    }
  },
  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)
      if (this.siteid == 'HY' || this.siteid == 'YOSTEST1'){
        this.expectedTransaction(true)
      }
      this.renderPie()

    },
    async personData(){
      const res = await this.$api.requested(this.depmentParam)
      this.personnelList = res.data.hr
    },
    leaveChange(){
      this.person = ''
      if (this.isleave){
        this.dataParam.content.where.isleave = this.isleave
        this.dataParam.content.dataid = this.dataParam.content.type == 0?-1:this.dataParam.content.dataid
        this.projectParam.content.where.isleave = this.isleave
        this.projectParam.content.dataid = this.projectParam.content.type == 0?-1:this.projectParam.content.dataid
        this.depmentParam.content.isleave = this.isleave
        this.personData()
        this.getProportionOfFileModel()
      }else {
        this.dataParam.content.where.isleave = 0
        this.dataParam.content.dataid = this.dataParam.content.type == 0?-1:this.dataParam.content.dataid
        this.projectParam.content.where.isleave = 0
        this.projectParam.content.dataid = this.projectParam.content.type == 0?-1:this.projectParam.content.dataid
        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.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]]
      }else if (val == '99'){
        this.dateSelect = []
      }
      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]]
      }else if (val == '99'){
        this.dateSelect = []
      }
    },
    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.sequence1} 当前项目数: ${datum.projectqty} 转化率: ${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.sequence1} 当前项目数: ${datum.projectqty} 转化率: ${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.sequence1} 当前项目数: ${datum.projectqty} 转化率: ${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.sequence1} 当前项目数: ${datum.projectqty} 转化率: ${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)
      if (this.siteid == 'HY' || this.siteid == 'YOSTEST1'){
        this.expectedTransaction(false)
      }
    },
    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
    },
    /*项目成交数据*/
    async expectedTransaction(init){
      let param = {
        "id": 20241028162104,
        "content": {
          "type": "0",
          "dataid": "0",
          "where": {
            "tradefield": "",
            "isleave":""
          }
        }
      }
      param.content.type = this.dataParam.content.type
      param.content.dataid = this.dataParam.content.dataid
      param.content.where.tradefield = this.dataParam.content.where.tradefield
      param.content.where.isleave = this.dataParam.content.where.isleave
      const res = await this.$api.requested(param)
      console.log(res.data,'数据项目成交')
      this.previousData = [
        {
          title:'成交项目数',
          value:res.data.dealTotalCount,
          unit:'个',
          description:'当前状态为已成交，并且项目成交时间在前12个月（不含当前月）的项目数量',
          color:'#3874F6'
        },
        {
          title:'预计成交正偏差',
          title1:'项目',
          value1:res.data.positiveCount,
          unit1:'个',
          title2:'金额',
          value2:this.tool.formatAmount(this.tool.unitConversion(res.data.positiveOffsetAmount,10000),2),
          unit2:'万元',
          description:'依据：每个项目的偏差金额 = 项目成交金额 - 预计签约金额' + '\n' + ' ①项目：合计偏差金额为正数的项目数量' + '\n' + ' ②金额：合计每个项目的正数偏差金额',
          color:'#E6A23C'
        },
        {
          title:'项目成交金额合计',
          value:this.tool.formatAmount(this.tool.unitConversion(res.data.dealAmount,10000),2),
          unit:'万元',
          description:'合计当前状态为已成交，并且项目成交时间在前12个月（不含当前月）的项目订单金额',
          color: '#009966'
        },
        {
          title:'失败项目数',
          value:res.data.failTotalCount,
          unit:'个',
          description:'当前状态为已失败，并且失败操作时间在前12个月（不含当前月）的项目数量',
          color:'#3874F6'
        },
        {
          title:'预计成交负偏差',
          title1:'项目',
          value1:res.data.negativeCount,
          unit1:'个',
          title2:'金额',
          value2:this.tool.formatAmount(this.tool.unitConversion(res.data.negativeOffsetAmount,10000),2),
          unit2:'万元',
          description:'依据：每个项目的偏差金额 = 项目成交金额 - 预计签约金额' + '\n' + ' ①项目：合计偏差金额为负数的项目数量' + '\n' + ' ②金额：合计每个项目的负数偏差金额',
          color:'#E6A23C'
        },
        {
          title:'预计签约金额合计',
          value:this.tool.formatAmount(this.tool.unitConversion(res.data.signAmount,10000),2),
          unit:'万元',
          description:'合计当前状态为已成交，并且项目成交时间在前12个月（不含当前月）的项目预计签约金额',
          color: '#009966'
        },
        {
          title:'项目成交率',
          value:Math.round((res.data.dealRate * 100)*100)/100,
          unit:'%',
          description:'项目成交率 = 成交项目数 ÷ （成交项目数 + 失败项目数）×100%',
          color:'#3874F6'
        },
        {
          title:'预计成交准确率',
          value:Math.round((res.data.rightRate * 100)*100)/100,
          unit:'%',
          description:'依据：偏差率 = |（项目成交金额 - 预计签约金额）| ÷ 预计签约金额 × 100%' + '\n' + ' 预计成交准确率 = 偏差率≤15%的项目数 ÷ 成交项目数 × 100%',
          color:'#E6A23C'
        },
      ]
      this.futreData = res.data.array
      this.$refs.futureTwelveMonthsRef.chartData(init,this.futreData)
    },
  },
  mounted () {
   /* this.renderPie()*/
    this.departmentrtment()
    this.dateSet(99)
    this.queryTradeField()
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).projectTable.tablecols
    this.tablecolsData = this.tool.tabelCol(this.$route.name).tableDatas.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)*/
}
.statistics-box{
  width: 49%;
  background: #FFFFFF;
  box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16);
  border-radius: 10px 10px 10px 10px;
  box-sizing: border-box;
}
.statistics-box .statistics-box-title{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.screen-box{
  width: 100%;
  height: 302px;
  background: #FFFFFF;
  box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16);
  border-radius: 5px 5px 5px 5px;
  box-sizing: border-box;
}
.title-margin-15{
  margin-top: 15px;
}
.title-margin-5{
  margin-top: 5px;
}
.title-font-style1{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #888888;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.title-font-style2{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 18px;
  color: #009966;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.title-font-style3{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #003399;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.title-font-style4{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 12px;
  color: #009966;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.title-font-style5{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-top: 20px;
}
</style>