yos_web/src/HDrpManagement/projectPortrait/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/project.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.projectname" placement="top">
                  <p>{{ baseInfo.projectname }}</p>
                </el-tooltip>
              </p>
              <div class="Mtag">
                <el-tag size="small" v-for="(item,index) in baseInfo.sys_tag" :key="index" style="margin-right:10px">{{ $t(item) }}</el-tag>
              </div>
            </div>
          </div>
          <div class="Mcontainer-header__right">
            <el-descriptions class="margin-top">
              <el-descriptions-item :label="$t('项目编号')">{{ baseInfo.projectnum }}</el-descriptions-item>
              <el-descriptions-item :label="$t('项目类型')">{{ baseInfo.projecttype }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`领域`)"><span style="color:#E85B5B;font-size:16px;font-weight:bold">{{ $t(baseInfo.tradefield) }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t(`预计签约金额(元)`)"> {{ tool.formatAmount(baseInfo.signamount_due || 0,2,'￥') }}</el-descriptions-item>
              <el-descriptions-item :label="$t('项目状态')"><span style="color:#3874f6">{{ $t(baseInfo.status) }}</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"> {{ $t(baseInfo.grade) }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t('品牌')"> {{ $t(baseInfo.brandname) }}</el-descriptions-item>
              <el-descriptions-item :label="$t('项目规模')"> {{ baseInfo.scale ? $t(baseInfo.scale) + $t(baseInfo.unitname) : '' }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`预计开工时间`)"> {{ baseInfo.begdate_due }}</el-descriptions-item>
              <el-descriptions-item :label="$t(`预计签约时间`)"> {{ baseInfo.signdate_due }}</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('项目阶段')"><span style="color:#E85B5B;font-size:16px;font-weight:bold">{{ $t(baseInfo.stagename) }}</span></el-descriptions-item>
              <el-descriptions-item :label="$t(`项目评估总分`)"><span style="color:#E85B5B;font-size:16px;font-weight:bold">{{ baseInfo.allsumscore }}</span> </el-descriptions-item>
              <el-descriptions-item :label="$t('项目地址')">
                <div style="max-width:500px">
                  {{ `${baseInfo.province}${baseInfo.city}${baseInfo.county}${baseInfo.address}` }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
      <div v-if="data" style="padding: 0 10px;">
        <!--项目评估-->
        <div class="Mproject" style="margin-top:10px">
          <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','pinggu')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
            </div>
            <myCard
              :list="
              [
                {title:'评估总分值',value:baseInfo.allsumscore,bg:'#F3F9FC',color:'#3874F6'},
                {title:'评估次数',value:$refs.pinggu && $refs.pinggu.total,bg:'#E8F7EC',color:'#78B32B'},
                {title:'最近评估时间',value:$refs.pinggu && $refs.pinggu.list && $refs.pinggu.list[0] && $refs.pinggu.list[0].createdate || '--',bg:'#F9F2E5',color:'#FF7603'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`项目评估记录明细`)">
            <pageTable
              ref="pinggu"
              :tablecols="tool.tabelCol($route.name).scoreTable.tablecols"
              :param="param1"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <div v-if="scope.data.columnname == 'partieobj'">
                  <div v-for="item in scope.data.data.parties" :key="item.sa_project_partiesid">
                    <el-tag size="mini">{{ $t(item.type) }}</el-tag>{{ item.enterprisename }}
                  </div>
                </div>
                <div v-else-if="scope.data.columnname == 'optionname'">
                  <div v-for="item in scope.data.data.parties" :key="item.sa_project_partiesid + 'a'">
                    <el-tag size="mini">{{ $t(item.optionname) }}</el-tag>
                  </div>
                </div>
                <div v-else>
                  {{ $t(scope.data.data[scope.data.columnname]) }}
                </div>
              </template>
            </pageTable>
            </showIsNone>
          </el-card>
        </div>

        <!--跟进记录-->
        <div class="Mfollow">
          <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','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:'定义：平均跟进天数；若有跟进次数，则按照：跟进频率=（首次跟进时间到当前时间的天数-节假日）÷跟进次数；',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
                style="margin-right:10px"
                v-for="(item,index) in $refs.fllow && $refs.fllow.list[0] && $refs.fllow.list[0].followDetail"
                :key="index + 'b'"
                :data="{title:item.name,descript:'跟进次数',value:item.qty}"
              >
              </myTag>
            </div>


            <showIsNone :title="$t(`项目跟进记录明细`)">
            <pageTable
              ref="fllow"
              :tablecols="tool.tabelCol($route.name).clueFollow.tablecols"
              :param="param2"
              :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>
                        {{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>
            </div>
            <myCard
              :list="
              [
                {title:'客户数',value:$refs.kehu && $refs.kehu.total,bg:'#F3F9FC',color:'#3874F6'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`客户明细`)">
            <pageTable
              ref="kehu"
              :tablecols="tool.tabelCol($route.name).customerTable2.tablecols"
              :param="param3"
            ></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>
            </div>
            <myCard
              :list="
              [
                {title:'项目竞争对手数',value:$refs.duishou && $refs.duishou.total,bg:'#F3F9FC',color:'#3874F6'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`竞争对手明细`)">
            <pageTable
              ref="duishou"
              :tablecols="tool.tabelCol($route.name).duishouTable.tablecols"
              :param="param4"
            ></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>
            </div>
            <myCard
              :list="
              [
                {title:'产品总数',value:$refs.productset && $refs.productset.total,bg:'#F3F9FC',color:'#3874F6'},
                {title:'产品总金额',value:unitCompile($refs.productset && $refs.productset.list && $refs.productset.list[0] && $refs.productset.list[0].itemSumAmount || 0),bg:'#E8F7EC',color:'#78B32B'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`产品类别及金额`)">
              <el-table
                :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
                size="mini"
                border
                :data="$refs.productset && $refs.productset.list && $refs.productset.list[0] && $refs.productset.list[0].itemsClassAmount"
                style="width: 100%">
                <el-table-column
                  prop="itemclassfullname"
                  :label="$t(`产品类别`)">

                </el-table-column>
                <el-table-column
                  prop="itemclassAmount"
                  :label="$t('金额')">
                  <template slot-scope="scope">
                    {{ tool.formatAmount(scope.row.itemclassAmount || 0,2,'￥') }}
                  </template>
                </el-table-column>
              </el-table>
            </showIsNone>

            <showIsNone :title="$t(`产品配置明细`)" style="margin-top:10px">
            <pageTable
              ref="productset"
              :tablecols="tool.tabelCol($route.name).projectSetTable2.tablecols"
              :param="param5"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <div v-if="scope.data.columnname == 'marketprice'">
                  {{scope.data.data.marketprice && tool.formatAmount(scope.data.data.marketprice || 0,2,'￥')  }}
                </div>
                <div v-else-if="scope.data.columnname == 'price'">
                  {{scope.data.data.price && tool.formatAmount(scope.data.data.price || 0,2,'￥')  }}
                </div>
                <div v-else-if="scope.data.columnname == 'amount'">
                  {{scope.data.data.amount && tool.formatAmount(scope.data.data.amount || 0,2,'￥')  }}
                </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','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).quotedPriceTable.tablecols"
              :param="param6"
              :custom="true"
            >
            <template v-slot:custom="scope">
              <div v-if="scope.data.columnname == 'specialoffer'">
                {{ scope.data.data.specialoffer ? $t('是') : $t('否') }}
              </div>
              <div v-else-if="scope.data.columnname == 'sumamount'">
                {{scope.data.data.sumamount && tool.formatAmount(scope.data.data.sumamount || 0,2,'￥')  }}
              </div>
              <div v-else-if="scope.data.columnname == 'begdate'">
                {{scope.data.data.begdate }}-{{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="param7.content" :value2="param7.content.where" key1="isAll" @clickBtn="refreshTable('param7','hetong')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
              <el-select style="margin-left:24px" v-model="param7.content.where.type" clearable size="mini" :placeholder="$t(`请选择合同类型`)" @change="typeChange('param7','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"></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,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:'#FDF3F3',color:'#E85B5B'},
                {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:'#E8F7EC',color:'#78B32B'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`合同明细`)">
            <pageTable
              ref="hetong"
              :tablecols="tool.tabelCol($route.name).contractTable2.tablecols"
              :param="param7"
              :custom="true"
            >
              <template v-slot:custom="scope">
                <div v-if="scope.data.columnname == 'signAmount'">
                  {{scope.data.data.signAmount && tool.formatAmount(scope.data.data.signAmount || 0,2,'￥')  }}
                </div>
                <div v-else-if="scope.data.columnname == 'enddate'">
                  {{scope.data.data.begdate + $t('至') + 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="param8.content" :value2="param8.content.where" key1="isAll" @clickBtn="refreshTable('param8','dingdan')" :btnOptions="[{label:'全部',value:1},{label:'本年',value:0}]">
              </myRadio>
            </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'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`订单明细`)">
            <pageTable
              ref="dingdan"
              :tablecols="tool.tabelCol($route.name).orderTable.tablecols"
              :param="param8"
              :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':'--'}}
                </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':'--'}}
                </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':'--'}}
                </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':'--'}}
                </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':'--'}}
                </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':'--'}}
                </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="param9.content" :value2="param9.content.where" key1="isAll" @clickBtn="refreshTable('param9','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:'#F9F2E5',color:'#FF7603'},
                {title:'最近服务时间',value:$refs.fuwu && $refs.fuwu.list && $refs.fuwu.list[0] && $refs.fuwu.list[0].createdate || '--',bg:'#FDF3F3',color:'#E85B5B'},
              ]"
            ></myCard>
            <showIsNone :title="$t(`服务工单明细`)">
            <pageTable
              ref="fuwu"
              :tablecols="tool.tabelCol($route.name).serveOrderTable.tablecols"
              :param="param9"
            ></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">
                        <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 class="myTitle">{{$t(`联系人`)}}</span>
                </div>
                <div class="peopleInfo-content">
                  <div class="leader">
                    <div class="content" v-if="baseInfo.contacts && baseInfo.contacts.length">
                      <div class="item" v-for="(item,index) in baseInfo.contacts" :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>
                    <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 '@/HDrpManagement/customerPortrait/modules/pageTable'
import showIsNone from '@/HDrpManagement/customerPortrait/modules/showIsNone'
import myCard from '@/HDrpManagement/customerPortrait/modules/myCrad'
import myTag from '@/HDrpManagement/customerPortrait/modules/myTag'
import myRadio from '@/HDrpManagement/customerPortrait/modules/myRadio'
export default {
  name: "index",
  components:{showIsNone,pageTable,myCard,myTag,myRadio},
  props:['data'],
  data() {
    return {
      dialogFormVisible:false,
      baseInfo:{},//基本信息
      //项目评估
      param1: {
        "id": 20230715112504,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "isAll":1,
            "sa_projectid":this.$route.query.id,
          "where":{
            "begdate":'',
            "enddate":''
          }
        },
      },
      //跟进记录
      param2: {
        "id": 20230715111804,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "isAll":1,
            "sa_projectid":this.$route.query.id,
          "where":{
            "begdate":'',
            "enddate":''
          }
        },
      },
      //关联客户
      param3: {
        "id": 20230715111904,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "sa_projectid":this.$route.query.id,
        }
      },
      //竞争对手
      param4: {
        "id": 20230715112004,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "sa_projectid":this.$route.query.id,
        }
      },
      //产品配置
      param5: {
        "id": 20230715112104,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "sa_projectid":this.$route.query.id
        }
      },
      //报价单
      param6: {
        "id": 20230715112204,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "isAll":1,
          "sa_projectid":this.$route.query.id,
          "where":{
            "type":"",
            "begdate":'',
            "enddate":''
          }
        }
      },
      //关联合同
      param7: {
        "id": 20230715112304,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "isAll":1,
          "sa_projectid":this.$route.query.id,
          "where":{
            "type":"",
            "begdate":'',
            "enddate":''
          }
        }
      },
      //订单
      param8: {
        "id": 20230715112404,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "isAll":1,
            "sa_projectid":this.$route.query.id,
            "where": {
              "begdate":'',
              "enddate":''
            }
        }
      },
      //服务
      param9: {
        "id": 20230716151004,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "isAll":1,
            "sa_projectid":this.$route.query.id,
            "where": {
              "begdate":'',
              "enddate":''
            }
        }
      },
      contractTypeList:[],
      orderTypeList:[],
      stageList:[]
    }
  },
  methods:{
    async getbaseInfo () {
      let res = await this.$api.requested({
        "id": 20230715111704,
        "content": {
            "sa_projectid":this.$route.query.id
        }
      })
      this.baseInfo = res.data[0]
      console.log(this.baseInfo,'基本信息');

    },
    async getSelectList () {
      const res = await this.$store.dispatch('optiontypeselect','contracttype')
      this.contractTypeList = res.data.filter(item => item.remarks != '经销商合作协议')

      console.log(this.contractTypeList,'合同类型');

      const res2 = await this.$store.dispatch('optiontypeselect','ordertype')
      this.orderTypeList = res2.data
      console.log(this.orderTypeList,'订单类型');

      /*获取阶段*/
      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('万')
      }
    },
  },
  mounted() {
    this.getbaseInfo()
    this.getSelectList()
  }
}
</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;
  overflow: hidden;
  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;
}
.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;
  white-space:nowrap;
}
.myTitle {
  margin-right:24px;
  font-size: 16px;
  font-weight: bold;
}
</style>