yos_web/src/HDrpManagement/customerPortrait/modules/detail.vue

<template>
  <el-drawer append-to-body :visible.sync="dialogFormVisible" size="97%">
    <div class="Mcontainer">
      <div style="background:#ffffff;padding:10px" v-if="Object.keys(baseInfo).length">
        <div class="Mcontainer-header">
          <div class="Mcontainer-header__left">
            <div style="width:60px;height: 60px;background:#F3F9FC;border-radius:10px;padding:10px">
              <img src="@/assets/customer.svg" style="width:100%;height:100%" alt="">
            </div>
            <div class="account">
              <p class="normal-title" style="font-size:18px">
                <el-tooltip class="item" effect="dark" :content="baseInfo.enterprisename" placement="top">
                  <p>{{ baseInfo.enterprisename }}</p>
                </el-tooltip>
              </p>
              <div class="Mtag">
                <el-tag size="small" v-for="(item,index) in baseInfo.sys_tag" :key="index + 'a'">{{ $t(item) }}</el-tag>
              </div>
            </div>
          </div>
          <div class="Mcontainer-header__right">
            <el-descriptions class="margin-top">
              <el-descriptions-item :label="$t('客户类型')">{{ $t(baseInfo.type?baseInfo.type:'--') }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`客户等级`)"><span style="color:#E85B5B;font-size:16px;font-weight:bold">{{ $t(baseInfo.grade?baseInfo.grade:'--') }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t(`合作状态`)"><span style="color:#3874f6">{{ $t(baseInfo.status?baseInfo.status:'--') }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t(`客户行业`)">{{ baseInfo.industry && baseInfo.industry.length>0?baseInfo.industry.join(','):'--'}}</el-descriptions-item>
              <el-descriptions-item :label="$t(`客户分类`)"><span style="color:#E85B5B;font-size:16px;font-weight:bold">{{ $t(baseInfo.customergrade?baseInfo.customergrade:'--') }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t('成交状态')"><span style="color:#E85B5B;font-size:16px;font-weight:bold">{{ $t(baseInfo.tradingstatus?baseInfo.tradingstatus:'--') }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t(`未跟进天数`)"><span style="color:#E85B5B;font-size:16px;font-weight:bold;margin-right: 10px">{{ baseInfo.subdate ? baseInfo.subdate  + $t('天') : baseInfo.subdate }}</span>
                <el-tooltip class="item" effect="dark" :content="$t(`未跟进天数=当前查询时间-最近跟进时间-节假日`)" placement="top">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </el-descriptions-item>
              <el-descriptions-item :label="$t('负责人')"><span style="color:#E85B5B;font-size:16px;font-weight:bold">{{ baseInfo.team.length && baseInfo.team.filter(item =>item.isleader == 1)[0].name }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t(`注册地址`)">{{ `${baseInfo.province}${baseInfo.city}${baseInfo.county}${baseInfo.address}` }} </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="MaccountInfo">
          <showIsNone :title="$t(`工商信息`)">
            <el-descriptions :column="2" border>
              <el-descriptions-item :label="$t(`法定代表人`)" label-class-name="my-label">{{ baseInfo2.legalPerson?baseInfo2.legalPerson:'--' }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`注册资本`)">{{ baseInfo2.regCapital?baseInfo2.regCapital:'--' }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`统一社会信用代码`)">{{ baseInfo2.taxNum?baseInfo2.taxNum:'--' }}</el-descriptions-item>

              <el-descriptions-item :label="$t(`工商注册号`)">{{ baseInfo2.regNumber?baseInfo2.regNumber:'--' }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`纳税人识别号`)">{{ baseInfo2.taxNum?baseInfo2.taxNum:'--' }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`行业大类`)">{{ $t(baseInfo2.industry?baseInfo2.industry:'--') }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`人员规模`)">{{ baseInfo2.staffNumRange?baseInfo2.staffNumRange:'--' }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`经营期限至`)">{{ baseInfo2.toTime?baseInfo2.toTime:'--' }}</el-descriptions-item>

              <el-descriptions-item :label="$t(`注册地址`)">
                <div style="max-width:500px">
                    <p>{{ baseInfo2.address?baseInfo2.address:'--' }}</p>
                </div>
              </el-descriptions-item>
              <el-descriptions-item :label="$t(`经营范围`)">
                <div style="max-width:500px">
                    <p>{{ $t(baseInfo2.businessScope?baseInfo2.businessScope:'--') }}</p>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </showIsNone>
        </div>
      </div>
      <div v-if="data" style="padding: 0 10px;">
        <!--跟进记录-->
        <div class="Mfollow">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">{{$t(`跟进记录`)}}</span>
              <myRadio :value1="param1.content" :value2="param1.content.where" key1="isAll"  @clickBtn="refreshTable('param1','fllow')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
            </div>
            <myCard
              :list="
              [
                {title:'跟进次数',value:$refs.fllow && $refs.fllow.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'最近跟进人',value:$refs.fllow && $refs.fllow.list[0] && $refs.fllow.list[0].name || '--',bg:'#E8F7EC',color:'#78B32B'},
                {title:'最近跟进时间',value:$refs.fllow && $refs.fllow.list[0] && $refs.fllow.list[0].createdate || '--',bg:'#F9F2E5',color:'#FF7603'},
                {title:'跟进频率',value:$refs.fllow && $refs.fllow.list[0] && $refs.fllow.list[0].followfrequency,descript:$t('定义：平均跟进天数；若有跟进次数，则按照：跟进频率=（首次跟进时间到当前时间的天数-节假日）÷跟进次数；'),bg:'#FDF3F3',color:'#E85B5B'},
              ]"
            >
            </myCard>

            <p style="font-size:14px;font-weight:bold;margin-bottom:10px" v-if="$refs.fllow && $refs.fllow.list[0] && $refs.fllow.list[0].followDetail.length">{{$t(`跟进人及次数`)}}</p>
            <div style="display:flex">
              <myTag
                v-for="(item,index) in $refs.fllow && $refs.fllow.list[0] && $refs.fllow.list[0].followDetail"
                :key="index + 'b'"
                :data="{title:item.name,descript:$t('跟进次数'),value:item.qty}"
              >
              </myTag>
            </div>

            <showIsNone :title="$t(`客户跟进记录明细`)">
            <pageTable
              ref="fllow"
              :tablecols="tool.tabelCol($route.name).clueFollow.tablecols"
              :param="param1"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <p v-if="scope.data.columnname === 'followname'">
                  <span v-if="scope.data.data.followname.length > 0">
                    <span v-for="(item,index) in scope.data.data.followname">
                      <span v-if="index === scope.data.data.followname.length -1">
                        {{$t(item)}}
                      </span>
                      <span v-else>
                        {{$t(item) + ','}}
                      </span>
                    </span>
                  </span>
                  <span v-else>--</span>
                </p>
                <div v-else style="text-wrap: wrap;word-wrap: break-word;white-space: normal;">
                  {{ $t(scope.data.data[scope.data.columnname]) || '--' }}
                </div>
              </template>
            </pageTable>
            </showIsNone>
          </el-card>
        </div>

        <!--项目-->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">{{$t(`项目`)}}</span>
              <myRadio :value1="param2.content" :value2="param2.content.where" key1="isAll" @clickBtn="refreshTable('param2','project')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
            </div>
            <myCard
              :list="
              [
                {title:'项目数',value:$refs.project && $refs.project.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'项目成交率',value:$refs.project && $refs.project.list && $refs.project.list[0] && $refs.project.list[0].cjl,bg:'#E8F7EC',color:'#78B32B'},
                {title:'总预计签约金额',value:unitCompile($refs.project && $refs.project.list && $refs.project.list[0] && $refs.project.list[0].allSignamount_due || '0'),bg:'#F9F2E5',color:'#FF7603'},
                // {title:'参与项目数',descript:'参与项目数：客户参与的项目数',value:$refs.project && $refs.project.list && $refs.project.list[0] && $refs.project.list[0].joinProjectQty,bg:'#FDF3F3',color:'#E899CC'},
              ]"
            ></myCard>
            <div id="Bar"></div>


            <showIsNone :title="$t(`项目明细`)">
            <pageTable
              ref="project"
              :tablecols="tool.tabelCol($route.name).competeProjectsTable.tablecols"
              :param="param2"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <div v-if="scope.data.columnname == 'stagecount'">
                  <el-tag size="small" v-for="(item,index) in scope.data.data.stagecount" :key="index">{{ $t(item.stagename) }}</el-tag>
                </div>
                <div v-else-if="scope.data.columnname == 'signamount_due'">
                  {{scope.data.data.signamount_due ? tool.formatAmount(scope.data.data.signamount_due,2,'￥'):'￥0.00'  }}
                </div>
                <div v-else-if="scope.data.columnname == 'scale'">
                  {{scope.data.data.scale ? $t(scope.data.data.scale) + $t(scope.data.data.unitname) : '--' }}
                </div>
                <div v-else-if="scope.data.columnname == 'status'" :style="tool.getStatusColor(scope.data.data[scope.data.columnname])">
                  {{$t(scope.data.data[scope.data.columnname])}}
                </div>
                <div v-else>
                  {{ $t(scope.data.data[scope.data.columnname]) || '--' }}
                </div>
              </template>
            </pageTable>
            </showIsNone>

          </el-card>
        </div>

        <!--报价单-->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">{{$t(`报价单`)}}</span>
              <myRadio :value1="param3.content" :value2="param3.content.where" key1="isAll" @clickBtn="refreshTable('param3','baojiadan')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
            </div>
            <myCard
              :list="
              [
                {title:'报价次数',value:$refs.baojiadan && $refs.baojiadan.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'最近报价金额',value:unitCompile($refs.baojiadan && $refs.baojiadan.list && $refs.baojiadan.list[0] && $refs.baojiadan.list[0].quotedpriceamount || '0'),bg:'#E8F7EC',color:'#78B32B'},
                {title:'最近报价时间',value:$refs.baojiadan && $refs.baojiadan.list && $refs.baojiadan.list[0] && $refs.baojiadan.list[0].submitdate || '--',bg:'#F9F2E5',color:'#FF7603'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`报价单明细`)">
            <pageTable
              ref="baojiadan"
              :tablecols="tool.tabelCol($route.name).quotedPriceTable2.tablecols"
              :param="param3"
              :custom="true"
            >
            <template v-slot:custom="scope">
              <div v-if="scope.data.columnname == 'specialoffer'" :style="{color:scope.data.data.specialoffer?tool.getStatusColor('是',true):tool.getStatusColor('否',true)}">
                {{ scope.data.data.specialoffer ? $t('是') : $t('否') }}
              </div>
              <div v-else-if="scope.data.columnname == 'quotedpriceamount'">
                {{scope.data.data.quotedpriceamount ? tool.formatAmount(scope.data.data.quotedpriceamount,2,'￥') : '￥0.00' }}
              </div>
              <div v-else-if="scope.data.columnname == 'begdate'">
                {{tool.getDataChange(scope.data.data.begdate) + $t(`至`) + tool.getDataChange(scope.data.data.enddate)}}
              </div>
              <div v-else>
                {{ $t(scope.data.data[scope.data.columnname]) }}
              </div>
            </template>
            </pageTable>
            </showIsNone>
          </el-card>
        </div>

        <!--合同-->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">{{$t(`合同`)}}</span>
              <myRadio :value1="param4.content" :value2="param4.content.where" key1="isAll" @clickBtn="refreshTable('param4','hetong')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
              <el-select style="margin-left:24px" v-model="param4.content.where.type" clearable size="mini" :placeholder="$t(`请选择合同类型`)" @change="typeChange('param4','hetong')">
                <el-option :label="$t(`全部`)" value=""></el-option>
                <el-option :label="$t(item.remarks)" :value="item.value" v-for="(item,index) in contractTypeList" :key="index + 'c'"></el-option>
              </el-select>
            </div>
            <myCard
              :list="
              [
                {title:'合同总数',value:$refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].allQty,bg:'#F3F9FC',color:'#3874F6'},
                {title:'合同金额',value:unitCompile($refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].sumSignAmount || '0'),bg:'#E8F7EC',color:'#78B32B'},
                {title:'进行中合同总数',value:$refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].inProgressQty || '0',bg:'#FDF3F3',color:'#E85B5B'},
                {title:'进行中合同金额',value:unitCompile($refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].inProgressAmount || '0'),bg:'#F9F2E5',color:'#FF7603'},
                {title:'到期合同数',value:$refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].expireQty,bg:'#F3F9FC',color:'#3874F6'},
                {title:'到期合同金额',value:unitCompile($refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].expireAmount || '0'),bg:'#E8F7EC',color:'#78B32B'},
                {title:'转订单合同数',value:$refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].convertOrderContractQty,bg:'#F9F2E5',color:'#FF7603'},
                {title:'转订单金额',value:unitCompile($refs.hetong && $refs.hetong.list && $refs.hetong.list[0] && $refs.hetong.list[0].convertOrderContractAmount || '0'),bg:'#F3F9FC',color:'#3874F6'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`合同明细`)">
            <pageTable
              ref="hetong"
              :tablecols="tool.tabelCol($route.name).contractTable2.tablecols"
              :param="param4"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <div v-if="scope.data.columnname == 'signAmount'">
                  {{scope.data.data.signAmount ? tool.formatAmount(scope.data.data.signAmount,2,'￥'):'￥0.00'  }}
                </div>
                <div v-else-if="scope.data.columnname == 'enddate'">
                  {{scope.data.data.begdate + $t('至') + scope.data.data.enddate }}
                </div>
                <div v-else-if="scope.data.columnname == 'status'" :style="tool.getStatusColor(scope.data.data[scope.data.columnname])">
                  {{$t(scope.data.data[scope.data.columnname])}}
                </div>
                <div v-else-if="scope.data.columnname == 'type'">
                  {{scope.data.data[scope.data.columnname] == '框架' ? '经销商合作协议':scope.data.data[scope.data.columnname] == '项目'?'项目协议'
                    :scope.data.data[scope.data.columnname] == '居间'?'居间协议':scope.data.data[scope.data.columnname] == '工具借用'?'工具借用协议':'直销客户合作协议'}}
                </div>
                <div v-else>
                  {{ $t(scope.data.data[scope.data.columnname]) || '--' }}
                </div>
              </template>
            </pageTable>
            </showIsNone>
          </el-card>
        </div>

        <!--订单-->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">{{$t(`订单`)}}</span>
              <myRadio :value1="param5.content" :value2="param5.content.where" key1="isAll" @clickBtn="refreshTable('param5','dingdan')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
              <el-select style="margin-left:24px" v-model="param5.content.where.type" clearable size="mini" :placeholder="$t(`请选择订单类型`)" @change="typeChange('param5','dingdan')">
                <el-option :label="$t(`全部`)" value=""></el-option>
                <el-option :label="$t(item.value)" :value="item.value" v-for="(item,index) in orderTypeList" :key="index + 'd'"></el-option>
              </el-select>
            </div>
            <myCard
              :list="
              [
                {title:'订单数量',value:$refs.dingdan && $refs.dingdan.list && $refs.dingdan.list[0] && $refs.dingdan.list[0].allOrderQty,bg:'#F3F9FC',color:'#3874F6'},
                {title:'订单总金额',value:unitCompile($refs.dingdan && $refs.dingdan.list && $refs.dingdan.list[0] && $refs.dingdan.list[0].allAmount || '0'),bg:'#E8F7EC',color:'#78B32B'},
                {title:'订单回款金额',value:unitCompile($refs.dingdan && $refs.dingdan.list && $refs.dingdan.list[0] && $refs.dingdan.list[0].cashbillAmount || '0'),bg:'#F9F2E5',color:'#FF7603'},
                {title:'订单未出货金额',value:unitCompile($refs.dingdan && $refs.dingdan.list && $refs.dingdan.list[0] && $refs.dingdan.list[0].allunAmount || '0'),bg:'#FDF3F3',color:'#E85B5B'},
                {title:'已出货未开票金额',value:unitCompile($refs.dingdan && $refs.dingdan.list && $refs.dingdan.list[0] && $refs.dingdan.list[0].uninvoicamount || '0'),bg:'#F9F2E5',color:'#FF7603'},
                {title:'已开票未回款金额',value:unitCompile($refs.dingdan && $refs.dingdan.list && $refs.dingdan.list[0] && $refs.dingdan.list[0].unwriteoffamount || '0'),bg:'#FDF3F3',color:'#E85B5B'},
                {title:'参与项目订单金额',descript:$t('参与项目订单金额：客户参与的项目的订单金额'),value:unitCompile($refs.dingdan && $refs.dingdan.list && $refs.dingdan.list[0] && $refs.dingdan.list[0].joinOrderAmount || '0'),bg:'#F3F9FC',color:'#3874F6'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`订单明细`)">
            <pageTable
              ref="dingdan"
              :tablecols="tool.tabelCol($route.name).orderTable.tablecols"
              :param="param5"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <div v-if="scope.data.columnname == 'sumamount'">
                  {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥0.00':'￥0.00'}}
                </div>
                <div v-else-if="scope.data.columnname == 'writeoffamount'">
                  {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥0.00':'￥0.00'}}
                </div>
                <div v-else-if="scope.data.columnname == 'unoutOrderamount'">
                  {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥0.00':'￥0.00'}}
                </div>
                <div v-else-if="scope.data.columnname == 'uninvoicamount'">
                  {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥0.00':'￥0.00'}}
                </div>
                <div v-else-if="scope.data.columnname == 'unwriteoffamount'">
                  {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥0.00':'￥0.00'}}
                </div>
                <div v-else-if="scope.data.columnname == 'returnamount'">
                  {{scope.data.data[scope.data.columnname]?tool.formatAmount(scope.data.data[scope.data.columnname],2,'￥'):scope.data.data[scope.data.columnname] == 0?'￥0.00':'￥0.00'}}
                </div>
                <div v-else-if="scope.data.columnname == 'status'" :style="tool.getStatusColor(scope.data.data[scope.data.columnname])">
                  {{$t(scope.data.data[scope.data.columnname])}}
                </div>
                <div v-else>
                  {{ $t(scope.data.data[scope.data.columnname]) || '--' }}
                </div>
              </template>
            </pageTable>
            </showIsNone>
          </el-card>
        </div>

        <!--服务-->
        <div class="Mproject" style="margin-top:10px">
          <el-card class="box-card">
            <div slot="header">
              <span class="myTitle">{{$t(`服务`)}}</span>
              <myRadio :value1="param6.content" :value2="param6.content.where" key1="isAll" @clickBtn="refreshTable('param6','fuwu')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
            </div>
            <myCard
              :list="
              [
                {title:'服务申请次数',value:$refs.fuwu && $refs.fuwu.list && $refs.fuwu.list[0] && $refs.fuwu.list[0].serviceOrderQty,bg:'#F3F9FC',color:'#3874F6'},
                {title:'服务工单次数',value:$refs.fuwu && $refs.fuwu.list && $refs.fuwu.list[0] && $refs.fuwu.list[0].workOrderQty,bg:'#E8F7EC',color:'#78B32B'},
                {title:'完工工单次数',value:$refs.fuwu && $refs.fuwu.list && $refs.fuwu.list[0] && $refs.fuwu.list[0].okWorkOrderQty,bg:'#FDF3F3',color:'#E85B5B'},
                {title:'最近服务时间',value:$refs.fuwu && $refs.fuwu.list && $refs.fuwu.list[0] && $refs.fuwu.list[0].createdate || '--',bg:'#F9F2E5',color:'#FF7603'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`服务工单明细`)">
            <pageTable
              ref="fuwu"
              :tablecols="tool.tabelCol($route.name).serveOrderTable.tablecols"
              :param="param6"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <div v-if="scope.data.columnname == 'status'" :style="tool.getStatusColor(scope.data.data[scope.data.columnname])">
                  {{$t(scope.data.data[scope.data.columnname])}}
                </div>
                <div v-else>
                  {{ scope.data.data[scope.data.columnname]?$t(scope.data.data[scope.data.columnname]):'--' }}
                </div>
              </template>
            </pageTable>
            </showIsNone>
          </el-card>
        </div>

        <div class="peopleInfo" v-if="Object.keys(baseInfo).length">
          <el-row>
            <el-col :span="12">
              <el-card class="box-card" style="margin-right:10px">
                <div slot="header">
                  <span class="myTitle">{{$t(`团队`)}}</span>
                </div>
                <div class="peopleInfo-content">
                  <div class="leader">
                    <p class="title" style="margin-bottom:10px">{{$t('负责人')}}</p>
                    <div class="content">
                      <div class="item" v-for="(item,index) in baseInfo.team.filter(item => item.isleader == 1)" :key="index + 'e'">
                        <div class="avatar">{{ item.name.substr(0,1) }}</div>
                        <div class="Info">
                          <div>
                            <p class="title">{{ item.name }}</p>
                            <p class="descript">{{$t(`账号`)}}：<span>{{ item.accountno }}</span></p>
                          </div>
                          <div>
                            <p class="descript">{{$t('部门') + '：'}}<span>{{ $t(item.depname) }}</span></p>
                            <p class="descript">{{$t(`职位`)}}：<span>{{ $t(item.position) }}</span></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="people">
                    <p class="title" style="margin-bottom:10px">{{$t('参与人')}}</p>
                    <div class="content">
                      <div class="item" v-for="(item,index) in baseInfo.team.filter(item => item.isleader == 0)" :key="index">
                        <div class="avatar">{{ item.name.substr(0,1) }}</div>
                        <div class="Info">
                          <div>
                            <p class="title">{{ item.name }}</p>
                            <p class="descript">{{$t(`账号`)}}：<span>{{ item.accountno }}</span></p>
                          </div>
                          <div>
                            <p class="descript">{{$t('部门') + '：'}}<span>{{ $t(item.depname) }}</span></p>
                            <p class="descript">{{$t(`职位`)}}：<span>{{ $t(item.position) }}</span></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header">
                  <span style="margin-right:10px;font-size: 14px;font-weight: bold;">{{$t(`联系人`)}}</span>
                </div>
                <div class="peopleInfo-content">
                  <div class="leader">
                    <div class="content" v-if="baseInfo.contacts.length">
                      <div class="item" v-for="(item,index) in baseInfo.contacts" :key="index + 'f'">
                        <div class="avatar">{{ item.name.substr(0,1) }}</div>
                        <div class="Info">
                          <div>
                            <p class="title">{{ item.name }}</p>
                            <p class="descript">{{$t(`账号`)}}：<span>{{ item.accountno }}</span></p>
                          </div>
                          <div>
                            <p class="descript">{{$t('部门') + '：'}}<span>{{ $t(item.depname) }}</span></p>
                            <p class="descript">{{$t(`职位`)}}：<span>{{ $t(item.position) }}</span></p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <el-empty :image-size="100" :description="$t('暂无数据')" v-else></el-empty>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

    </div>
  </el-drawer>
</template>

<script>
import pageTable from './pageTable'
import myTag from './myTag'
import showIsNone from './showIsNone'
import myCard from './myCrad.vue'
import myRadio from './myRadio'
import { Bar } from '@antv/g2plot'
export default {
  name: "index",
  components:{showIsNone,pageTable,myCard,myTag,myRadio},
  props:['data'],
  data() {
    return {
      dialogFormVisible:false,
      baseInfo:{},//基本信息
      baseInfo2:{},//工商信息
      //跟进记录
      param1: {
        "id": 20230713103904,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "isAll":0,
            "sa_customersid":this.$route.query.id,
          "where":{
            "begdate":'',
            "enddate":''
          }
        }
      },
      //关联项目
      param2: {
        "id": 20230713104004,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "isAll":0,
          "sa_customersid":this.$route.query.id,
          "where":{
            "stagename":"",
            "begdate":'',
            "enddate":''
          }
        }
      },
      //关联报价单
      param3: {
        "id": 20230713104104,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "isAll":0,
            "sa_customersid":this.$route.query.id,
          "where":{
            "begdate":'',
            "enddate":''
          }
        },

      },
      //关联合同
      param4: {
        "id": 20230713104204,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "isAll":0,
          "sa_customersid":this.$route.query.id,
          "where":{
            "type":"",
            "begdate":'',
            "enddate":''
          }
        }
      },
      //关联订单
      param5: {
        "id": 20230713104304,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "isAll":0,
          "sa_customersid":this.$route.query.id,
          "where":{
            "type":"",
            "begdate":'',
            "enddate":''
          }
        }
      },
      //服务工单
      param6: {
        "id": 20230713104404,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "isAll":0,
            "sa_customersid":this.$route.query.id,
          "where":{
            "begdate":'',
            "enddate":''
          }
        },

      },
      contractTypeList:[],
      orderTypeList:[],
      stageList:[],
    }
  },
  methods:{
    async getbaseInfo () {
      let res = await this.$api.requested({
        "id": 20230713103804,
        "content": {
            "sa_customersid":this.$route.query.id
        }
      })
      this.baseInfo = res.data
      console.log(this.baseInfo,'基本信息');

      let res2 = await this.$api.requested({
        "id": 2024060715002601,
        "content": {
            "companyName":this.baseInfo.enterprisename,
            "pageNumber":1,
            "pageSize":1
        }
      })
      this.baseInfo2 = res2.data
      console.log(this.baseInfo2,'工商信息');
    },
    async getSelectList () {
      const res = await this.$store.dispatch('optiontypeselect','contracttype')
      this.contractTypeList = res.data
      console.log(this.contractTypeList,'合同类型');

      const res2 = await this.$store.dispatch('optiontypeselect','ordertype')
      this.orderTypeList = res2.data
      this.orderTypeList.forEach((item,index)=>{
        if (item.value == '工具借用单'){
          this.orderTypeList.splice(index,1)
        }
      })


      /*获取阶段*/
      const res3 = await this.$api.requested({
        "id": 20221128143604,
        "content": {
          "pageNumber": 1,
          "pageSize": 9999,
          "where": {
            "condition": "",
            "allprojecttype":"",
            "projecttype":""
          }
        }
      })
      this.stageList = res3.data
    },
    refreshTable (param,el) {
      this[param].content.pageNumber = 1
      this.$refs[el] && this.$refs[el].listData()
    },
    typeChange(param,el) {
      this[param].content.pageNumber = 1
      this.$refs[el] && this.$refs[el].listData()
    },
    unitCompile (num) {
      if (num == 0) {
        return this.tool.formatAmount(num,0,'￥')
      } else {
        return this.tool.formatAmount(this.tool.unitConversion(num , 10000),2,'￥') +this.$t('万')
      }
    },
    /* 渲染表格 */
    renderer(data) {
      const piePlot = new Bar('Bar', {
        data:data.map(v=>{
          v.stagename = this.$t(v.stagename)
          return v
        }),
        xField: 'qty',
        yField: 'stagename',
        seriesField: 'stagename',
        legend: {
          position: 'top',
        },
        label: {
          // 可手动配置 label 数据标签位置
          position: 'right', // 'left', 'middle', 'right'
          offset: 4,
        },
      });
      piePlot.render();
    },
  },
  mounted() {
    this.getbaseInfo()
    this.getSelectList()
    // setTimeout(() => {
    //   if (this.$refs.project && this.$refs.project.list[0] && this.$refs.project.list[0].stagecount.length) {
    //     let Bar = document.querySelector('#Bar')
    //     Bar.style.height = '150px'
    //     this.renderer(this.$refs.project.list[0].stagecount)
    //   }
    // },2000)
  }
}
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.my-label {
  background: rgba(235, 245, 253, 1);
}
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 100;
}

/deep/.el-drawer {
  background:#F5F5F5 !important;
}
/deep/.el-drawer__header{
  display: none !important;
}

/deep/.el-descriptions-item__cell {
  padding: 8px 8px 0px 8px !important;
}

/deep/.el-card__header,/deep/.el-card__body {
  padding: 10px !important;
}
.Mcontainer .Mcontainer-header {
  display: flex;
  align-items: center;
}
.Mcontainer .Mcontainer-header .Mcontainer-header__left {
  display: flex;
  max-width: 350px;
  min-width: 350px;
  align-items: center;
  padding-right: 20px;
}
.Mcontainer .Mcontainer-header .Mcontainer-header__right {
  flex: 100;
  border-left: 1px solid #cccccc;
  padding-left: 20px;
}
.Mcontainer .Mcontainer-header .Mcontainer-header__left .account{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
  flex: 100;
}
.Mcontainer .Mcontainer-header .Mcontainer-header__left .account .Mtag{
  margin-top: 5px;
}

.Mcontainer .Mfollow{
  margin-top: 10px;
}

.Mcontainer .peopleInfo {
  margin-top: 10px;
  padding-bottom: 10px;
}
.peopleInfo-content {
  display: flex;
  flex-direction: column;
  height: 300px;
  overflow-y: scroll;
}
.peopleInfo-content::-webkit-scrollbar {
  display: none;
}
.peopleInfo-content .leader {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.peopleInfo-content .leader .title {
  font-size: 14px;
}
.peopleInfo-content .leader .content {
  display: flex;
  flex-wrap: wrap;
}
.peopleInfo-content .leader .content .item {
  display: flex;
  align-items: center;
  margin: 0 20px 10px 0;
}
.peopleInfo-content .leader .content .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  background: #3874F6;
  margin-right: 10px;
  color: #ffffff;
}
.peopleInfo-content .leader .content .Info {
  display: flex;
  flex-direction: column;
}
.peopleInfo-content .leader .content .Info div {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #cccccc;
}


.peopleInfo-content .people {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.peopleInfo-content .people .title {
  font-size: 14px;
  white-space:nowrap;
}
.peopleInfo-content .people .content {
  display: flex;
  flex-wrap:wrap;
}
.peopleInfo-content .people .content .item {
  display: flex;
  align-items: center;
  margin: 0 20px 10px 0;
}
.peopleInfo-content .people .content .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  background: #3874F6;
  margin-right: 10px;
  color: #ffffff;
}
.peopleInfo-content .people .content .Info {
  display: flex;
  flex-direction: column;
}
.peopleInfo-content .people .content .Info div {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #cccccc;
}

.peopleInfo-content .people {}

.descript {
  font-size: 12px;
  color: #cccccc;
  margin-right: 20px;
  white-space:nowrap;
}
.title {
  font-size: 14px;
  color: #000000;
  margin-right: 10px;
}
.myTitle {
  margin-right:24px;
  font-size: 16px;
  font-weight: bold;
}
</style>