yos_web/src/views/clueData/modules/digitalSigns.vue

<template>
  <div class="div-box-new-margin">
    <div class="div-box-new">
      <div style="font-size: 16px;color: #333333;margin-bottom: 20px">{{$t('线索数据概况')}}</div>
      <div class="div-border-new">
        <div class="item div-click" @click="onClick('线索总数')">
          <p class="title">{{list.total}}</p>
          <span class="content-font-new">{{$t('线索总数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('线索总数：包含待分配、已分配线索数。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('待分配未过期线索数')">
          <p class="title">{{ list.dfp }}</p>
          <span class="content-font-new">{{$t('待分配未过期线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('待分配未过期线索数：所有线索中，待分配未过期的线索数量。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('待跟进线索数')">
          <p class="title">{{ list.dgj }}</p>
          <span class="content-font-new">{{$t('待跟进线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('待跟进线索数：销售线索应用中，已分配给业务员，待跟进状态的线索数量。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('跟进中线索数')">
          <p class="title">{{ list.gjz }}</p>
          <span class="content-font-new">{{$t('跟进中线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('跟进中线索数：销售线索应用中，已分配给业务员，跟进中状态的线索数量。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('已转化线索数')">
          <p class="title">{{ list.yzh }}</p>
          <span class="content-font-new">{{$t('已转化线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('①已转化线索数：销售线索应用中，已分配给业务员，已转化状态的线索数量。')}}<br/>
              {{$t('②一条线索可进行两次转化：转化客户、转化项目，因此，已转化线索数≠转化客户线索数+转化项目线索数。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('已无效线索数')">
          <p class="title">{{ list.ywx }}</p>
          <span class="content-font-new">{{$t('已无效线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('已无效线索数：销售线索应用中，已分配给业务员，已无效状态的线索数量。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('待分配已过期线索数')">
          <p class="title">{{ list.ygq }}</p>
          <span class="content-font-new">{{$t('待分配已过期线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('待分配已过期线索数：所有线索中，待分配已过期的线索数量。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item">
          <p class="title">{{ Math.round(((list.gqbl * 100)*100)/100) }}%</p>
          <span class="content-font-new">{{$t('过期比例')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('过期比例=已过期线索数÷待分配线索数×100%')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('转化客户线索数')">
          <p class="title">{{ list.covercusomers }}</p>
          <span class="content-font-new">{{$t('转化客户线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('转化客户线索数：统计有转化客户操作的线索数')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('转化项目线索数')">
          <p class="title">{{ list.coverproject }}</p>
          <span class="content-font-new">{{$t('转化项目线索数')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('转化项目线索数：统计有转化项目操作的线索数')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item">
          <p class="title">{{ Math.round(((list.zhl*100)*100)/100) }}%</p>
          <span class="content-font-new">{{$t('线索转化率')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('线索转化率=已转化线索数÷线索总数×100%')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('线索成交数')">
          <p class="title">{{ list.dealqty }}</p>
          <span class="content-font-new">{{$t(`线索成交数`)}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t(`线索成交数：转化后有下订单的线索数量`)}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item" >
          <p class="title">{{ Math.round(((list.cjl*100)*100)/100) }}%</p>
          <span class="content-font-new">{{$t('线索成交率')}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t('线索成交率=转化后有下订单的线索数÷线索总数×100%')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('参与线索数')">
          <p class="title">{{ list.joinordercluesize }}</p>
          <span class="content-font-new">{{$t(`参与线索数`)}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t(`参与线索数：参与的并且至少有一次跟进的线索数量`)}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('参与线索转化数')">
          <p class="title">{{ list.joincoverorderclue }}</p>
          <span class="content-font-new">{{$t(`参与线索转化数`)}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t(`参与线索转化数：参与的并且至少有一次跟进的有发生转化的线索数量`)}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item">
          <p class="title">{{ Math.round(((list.joinordercluezhl*100)*100)/100) }}%</p>
          <span class="content-font-new">{{$t(`参与线索转化率`)}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t(`参与线索转化率=参与线索转化数 ÷ 参与线索数 ×100%`)}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item div-click" @click="onClick('参与线索成交数')">
          <p class="title">{{ list.joindealorderclue }}</p>
          <span class="content-font-new">{{$t(`参与线索成交数`)}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t(`参与线索成交数：参与的并且至少有一次跟进的转化后有下订单的线索数量`)}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
        <div class="item">
          <p class="title">{{ Math.round(((list.joinordercluecjl*100)*100)/100) }}%</p>
          <span class="content-font-new">{{$t(`参与线索成交率`)}}</span>
          <el-tooltip placement="top">
            <div slot="content">{{$t(`参与线索成交率=参与线索成交率 ÷ 参与线索数 ×100%`)}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
      </div>
    </div>
    <dataDetail ref="detailRef" :title="title" :param="paramDetail" :person="person" :departmentid="depment" :isleave="isleave" :layout="tablecols" height="calc(100vh - 230px)">
      <template #custom>
        <div class="mt-10 inline-16">
          <p class="search__label">{{$t('跟进状态')}}:</p>
          <el-select v-model="paramDetail.content.where.status" clearable class="inline-24" size="small" :placeholder="$t('请选择线索状态')" @change="selectChange">
            <el-option v-for="item in statusList" :label="$t(item.value)" :key="item.rowindex" :value="item.remarks">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10 inline-16">
          <p class="search__label">{{$t('领域')}}:</p>
          <el-select v-model="paramDetail.content.where.tradefield" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择领域')" @change="selectChange">
            <el-option v-for="item in tradefields" :label="$t(item.value)" :key="item.rowindex" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10 inline-16">
          <p class="search__label">{{$t('标签')}}:</p>
          <el-select v-model="paramDetail.content.where.tag" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择标签')" @change="selectChange" multiple>
            <el-option v-for="item in tagData" :label="$t(item.tag)" :key="item.tag" :value="item.tag">
            </el-option>
          </el-select>
        </div>
      </template>
    </dataDetail>
  </div>
</template>

<script>
import dataDetail from '@/template/dataDetail/index'
export default {
  name: "digitalSigns",
  components:{dataDetail},
  props:["person","depment","dateType","isleave","userName"],
  data(){
    return {
      list:[],
      title:'',
      tablecols:'',
      status:'',
      statusList:[],
      tradefield:'',
      tradefields:[],
      tagData:[],
      tag:'',
      paramDetail:{
        "id": 20241008125804,
        "content": {
          "dataid": '',
          "type": '',
          "username": "",
          "typemx": "",
          "pageNumber":1,
          "pageSize":100,
          "dateType":"",
          "where": {
            "isleave": "",
            "condition": "",
            "allocationstatus": "",
            "tradefield": "",
            "status": "",
            "tag": []
          }
        },
      },
      param:{
        "id": 20231014114204,
        "content": {
          "type": 0,
          "dataid": '',
          "dateType":'',
          "where":{
            "isleave":"1"
          }
        }
      }
    }
  },
  methods:{
    async listData(val,dateType){
      this.param.content.dataid = val
      this.param.content.dateType = dateType
      const res = await this.$api.requested(this.param)
      this.list = res.data
    },
    selectChange(){
      this.paramDetail.content.pageNumber = 1
      this.$refs.detailRef.listData()
    },
    onClick(title){
      this.title = this.dateType + '_' + title
      this.paramDetail.content.dataid = this.person?this.person == this.userName?JSON.parse(sessionStorage.getItem('active_account')).userid:this.person:this.depment
      this.paramDetail.content.type = this.person?'0':'1'
      this.paramDetail.content.typemx = title
      this.paramDetail.content.where.isleave = this.isleave
      this.paramDetail.content.dateType = this.dateType
      this.$refs.detailRef.onShow()
    },
    /*标签列表*/
    async tagList(){
      const res = await this.$api.requested({
        "id":20221013104401,
        "content":{
          "isExport":1,
          "pageNumber":1,
          "pageSize":100,
          "sys_systemtagid":14,
          "where":{
            "condition":""
          }
        }
      })
      this.tagData = res.data
    },
  },
  async created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).clueDetail.tablecols
    const res2 = await this.$store.dispatch('optiontypeselect','datafollowuptype')
    this.statusList = res2.data
    const res3 = await this.$store.dispatch('optiontypeselect','tradefield')
    this.tradefields = res3.data
    this.tagList()
  }
}
</script>

<style scoped>
  .div-box-new{
    margin-top: 16px;
    width: 100%;
   /* height: 210px;*/
    border-radius: 2px;
    border: 1px solid #e9e9e9;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: -1px -1px 5px 0px rgba(0, 0, 0, 0.2);
    padding: 16px
  }
  .div-border-new{
    /*margin:0 30px 0 30px;*/
    height: 250px
  }
  .div-border-new .item{
    height: 33%;
    width: 16.6%;
    float: left;
  }
  .div-border-new .item .title{
    font-size: 26px
  }
  .div-border-new .item .content-font-new{
    font-size: 14px;
    margin-right: 10px;
    color: #000000A6;
  }
  .div-click:hover{
    color: #3874f6 !important;
  }
</style>