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">线索数据概况</div>
      <div class="div-border-new">
        <div class="item">
          <p class="title">{{list.total}}</p>
          <span class="content-font-new">线索总数</span>
          <el-tooltip placement="top">
            <div slot="content">线索总数：包含待分配、已分配线索数。</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">{{ list.dfp }}</p>
          <span class="content-font-new">待分配线索数</span>
          <el-tooltip placement="top">
            <div slot="content">待分配线索数：公海线索应用中，待分配状态的线索数量。</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">{{ list.dgj }}</p>
          <span class="content-font-new">待跟进线索数</span>
          <el-tooltip placement="top">
            <div slot="content">待跟进线索数：销售线索应用中，已分配给业务员，待跟进状态的线索数量。</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">{{ list.gjz }}</p>
          <span class="content-font-new">跟进中线索数</span>
          <el-tooltip placement="top">
            <div slot="content">跟进中线索数：销售线索应用中，已分配给业务员，跟进中状态的线索数量。</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">{{ list.yzh }}</p>
          <span class="content-font-new">已转化线索数</span>
          <el-tooltip placement="top">
            <div slot="content">①已转化线索数：销售线索应用中，已分配给业务员，已转化状态的线索数量。<br/>
              ②一条线索可进行两次转化：转化客户、转化项目，因此，已转化线索数≠转化客户线索数+转化项目线索数。</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">{{ list.ywx }}</p>
          <span class="content-font-new">已无效线索数</span>
          <el-tooltip placement="top">
            <div slot="content">已无效线索数：销售线索应用中，已分配给业务员，已无效状态的线索数量。</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">{{ list.ygq }}</p>
          <span class="content-font-new">已过期线索数</span>
          <el-tooltip placement="top">
            <div slot="content">已过期线索数：公海线索应用中，未分配到期的已过期状态的线索数量。</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">过期比例</span>
          <el-tooltip placement="top">
            <div slot="content">过期比例=已过期线索数÷待分配线索数×100%</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">{{ list.covercusomers }}</p>
          <span class="content-font-new">转化客户线索数</span>
          <el-tooltip placement="top">
            <div slot="content">转化客户线索数：统计有转化客户操作的线索数</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">{{ list.coverproject }}</p>
          <span class="content-font-new">转化项目线索数</span>
          <el-tooltip placement="top">
            <div slot="content">转化客户线索数：统计有转化项目操作的线索数</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">线索转化率</span>
          <el-tooltip placement="top">
            <div slot="content">线索转化率=已转化线索数÷线索总数×100%</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">线索成交率</span>
          <el-tooltip placement="top">
            <div slot="content">线索成交率=转化后有下订单的线索数÷线索总数×100%</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "digitalSigns",
  data(){
    return {
      list:[],
      param:{
        "id": 20231014114204,
        "content": {
          "type": 0,
          "dataid": '',
        }
      }
    }
  },
  methods:{
    async listData(val){
      this.param.content.dataid = val
      const res = await this.$api.requested(this.param)
      this.list = res.data
    }
  }
}
</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: 150px
  }
  .div-border-new .item{
    height: 50%;
    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;
  }
</style>