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>
      <el-row>
        <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="14">
          <div>
            <div class="title inline-16">
              {{$t(`销售漏斗图`)}}
            </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>
          <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" @selectStage="selectStage" :dataBoxData="dataBoxData" @clickChart="clickChart" @onCheck="onCheck"></futureTwelveMonths>
    </div>
    <div style="margin-top: 40px">
      <div style="display: flex;justify-content: space-between">
        <p class="title">
          {{projectTile}}
          <el-button style="margin-left: 15px" type="text" size="mini" v-if="siteid == 'HY' || siteid == 'YOSTEST1'" @click="restBtn">{{$t(`重置`)}}</el-button>
        </p>
        <exportFile :param="siteid == 'HY' || siteid == 'YOSTEST1'?transactionParam:projectParam" :columns="tablecols" :fileName="projectTile"></exportFile>
      </div>
      <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-if="scope.column.columnname == 'address'">
            <span>{{scope.column.data.province?scope.column.data.province + scope.column.data.city + scope.column.data.county + scope.column.data[[scope.column.columnname]]:'--'}}</span>
          </div>
          <div v-else-if="scope.column.columnname == 'projectname'">
            <el-button size="mini" type="text" @click="goDetail(scope.column.data)">{{scope.column.data[[scope.column.columnname]]}}</el-button>
          </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="siteid == 'HY' || siteid == 'YOSTEST1'?transactionParam.content.pageNumber: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'
import exportFile from '@/components/export_file/index5'
export default {
  components:{tableTemp,tableNewTemp,chartTemplate,previousTwelveMonths,futureTwelveMonths,exportFile},
  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',
          "depid":''
        }
      },
      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:[],
      transactionParam:{
        "id": 20241028162104,
        "content": {
          "type": "0",
          "dataid": "0",
          "stagename":[],
          "signdate_due":'',
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "tradefield": "",
            "isleave":"",
            "unfinish":'1'
          }
        }
      },
      dataBoxData:[]
    }
  },
  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.depmentParam.content.depid = res.data.dep[0].departmentid
      // this.personData()
      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] ? val[val.length -1] : -1
      this.depmentParam.content.depid = val[val.length -1] ? val[val.length -1] : -1
      this.personData()
      this.getProportionOfFileModel()
    },
    selectPerson(val){
      // this.depment = ''
      if (val || this.depment[this.depment.length -1]){
        this.dataParam.content.type = val ? 0 : 1
        this.dataParam.content.dataid = val ? val : this.depment[this.depment.length -1]
      }else {
        this.dataParam.content.type = 0
        this.dataParam.content.dataid = -1
      }

      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();
        if (this.siteid != 'HY' && this.siteid != 'YOSTEST1'){
          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();
        if (this.siteid != 'HY' && this.siteid != 'YOSTEST1'){
          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();
        if (this.siteid != 'HY' && this.siteid != 'YOSTEST1'){
          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();
        if (this.siteid != 'HY' && this.siteid != 'YOSTEST1'){
          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
      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)
      }else {
        this.getProjectList()
      }
    },
    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} 条`);
      if (this.siteid == 'HY' || this.siteid == 'YOSTEST1'){
        this.transactionParam.content.pageSize = val
        this.queryProject(this.transactionParam.content.signdate_due)
      }else {
        this.projectParam.content.pageSize = val
        this.getProjectList()
      }

    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      if (this.siteid == 'HY' || this.siteid == 'YOSTEST1'){
        this.transactionParam.content.pageNumber = val
        this.queryProject(this.transactionParam.content.signdate_due)
      }else {
        this.projectParam.content.pageNumber = val
        this.getProjectList()
      }

    },
    /*获取领域*/
    async queryTradeField(){
      const res = await this.$store.dispatch('optiontypeselect','tradefield')
      this.tradefields = res.data
    },
    restBtn(){
      this.transactionParam.content.signdate_due = ''
      this.expectedTransaction(false)
    },
    /*项目成交数据*/
    async expectedTransaction(init){
      this.transactionParam.content.type = this.dataParam.content.type
      this.transactionParam.content.dataid = this.dataParam.content.dataid
      this.transactionParam.content.where.tradefield = this.dataParam.content.where.tradefield
      this.transactionParam.content.where.isleave = this.dataParam.content.where.isleave
      const res = await this.$api.requested(this.transactionParam)
      console.log(res.data,'数据项目成交')
      if (res.code == 0){
        this.tool.showMessage(res,()=>{})
      }else {
        this.previousData = [
          {
            title:'成交项目数',
            value:res.data?res.data[0].extradata.dealTotalCount:"",
            unit:'个',
            description:'当前状态为已成交，并且项目成交时间在前12个月（不含当前月）的项目数量',
            color:'#3874F6'
          },
          {
            title:'预计成交正偏差',
            title1:'项目',
            value1:res.data?res.data[0].extradata.positiveCount:"",
            unit1:'个',
            title2:'金额',
            value2:this.tool.formatAmount(this.tool.unitConversion(res.data?res.data[0].extradata.positiveOffsetAmount:"",10000),2),
            unit2:'万元',
            description:this.$t('依据：每个项目的偏差金额 = 项目成交金额 - 预计签约金额') + '\n ①' + this.$t('项目：合计偏差金额为正数的项目数量') + '\n ②' + this.$t('金额：合计每个项目的正数偏差金额'),
            color:'#E6A23C'
          },
          {
            title:'项目成交金额合计',
            value:this.tool.formatAmount(this.tool.unitConversion(res.data?res.data[0].extradata.dealAmount:'',10000),2),
            unit:'万元',
            description:'合计当前状态为已成交，并且项目成交时间在前12个月（不含当前月）的项目订单金额',
            color: '#009966'
          },
          {
            title:'失败项目数',
            value:res.data?res.data[0].extradata.failTotalCount:"",
            unit:'个',
            description:'当前状态为已失败，并且失败操作时间在前12个月（不含当前月）的项目数量',
            color:'#3874F6'
          },
          {
            title:'预计成交负偏差',
            title1:'项目',
            value1:res.data?res.data[0].extradata.negativeCount:"",
            unit1:'个',
            title2:'金额',
            value2:this.tool.formatAmount(this.tool.unitConversion(res.data?res.data[0].extradata.negativeOffsetAmount:"",10000),2),
            unit2:'万元',
            description:this.$t('依据：每个项目的偏差金额 = 项目成交金额 - 预计签约金额') + '\n ①' + this.$t('项目：合计偏差金额为负数的项目数量') + '\n ②' + this.$t('金额：合计每个项目的负数偏差金额'),
            color:'#E6A23C'
          },
          {
            title:'预计签约金额合计',
            value:this.tool.formatAmount(this.tool.unitConversion(res.data?res.data[0].extradata.signAmount:"",10000),2),
            unit:'万元',
            description:'合计当前状态为已成交，并且项目成交时间在前12个月（不含当前月）的项目预计签约金额',
            color: '#009966'
          },
          {
            title:'项目成交率',
            value:res.data?Math.round((res.data[0].extradata.dealRate * 100)*100)/100:"",
            unit:'%',
            description:'项目成交率 = 成交项目数 ÷ （成交项目数 + 失败项目数）×100%',
            color:'#3874F6'
          },
          {
            title:'预计成交准确率',
            value:res.data?Math.round((res.data[0].extradata.rightRate * 100)*100)/100:"",
            unit:'%',
            description:this.$t('依据：偏差率 = |（项目成交金额 - 预计签约金额）| ÷ 预计签约金额 × 100%') + '\n ' + this.$t('预计成交准确率 = 偏差率≤15%的项目数 ÷ 成交项目数 × 100%'),
            color:'#E6A23C'
          },
        ]
        this.dataBoxData = [
          {
            title:'预计签约金额合计',
            value:this.tool.formatAmount(this.tool.unitConversion(res.data?res.data[0].extradata.sumsignamount_due:"",10000),2),
            unit:'万元',
            description:'合计未来12个月的项目预计签约金额',
            color: '#3874F6'
          },
          {
            title:'预计成交金额合计',
            value:this.tool.formatAmount(this.tool.unitConversion(res.data?res.data[0].extradata.sumdealamount_due:"",10000),2),
            unit:'万元',
            description:'合计未来12个月的项目预计成交金额',
            color: '#E6A23C'
          },
        ]
        this.futreData = res.data?res.data[0].extradata.array:""
        this.$refs.futureTwelveMonthsRef.chartData(init,this.futreData)
        this.projectList = res.data
        this.total = res.total
        this.projectTile = this.$t('全部') + this.$t('_预计成交项目') + '(' + res.total + ')'
      }
    },
    selectStage(val){
      this.transactionParam.content.stagename = val
      this.expectedTransaction(false)
    },
    onCheck(val){
      this.transactionParam.content.where.unfinish = val
      this.expectedTransaction(false)
    },
    clickChart(date){
      this.transactionParam.content.signdate_due = date
      this.transactionParam.content.pageNumber = 1
      this.queryProject(date)
    },
    async queryProject(date){
      this.transactionParam.content.type = this.dataParam.content.type
      this.transactionParam.content.dataid = this.dataParam.content.dataid
      this.transactionParam.content.where.tradefield = this.dataParam.content.where.tradefield
      this.transactionParam.content.where.isleave = this.dataParam.content.where.isleave
      const res = await this.$api.requested(this.transactionParam)
      this.projectList = res.data
      this.total = res.total
      this.projectTile = date + this.$t('_预计成交项目') + '(' + res.total + ')'
    },
    goDetail(data){
      let route = this.$route
      if (route.path !== '/projectChangeDetail') {
        this.oldRoute = {path:route.path,query:route.query}
        this.$store.dispatch('setHistoryRouter',this.oldRoute)
      }
      this.$store.dispatch("changeDetailDrawer", true);
      this.$router.push({
        path:'/projectChangeDetail',
        query:{
          id:data.sa_projectid,
          rowindex:data.rowindex,
        }
      })
    }
  },
  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>