yos_web/src/HManagement/serviceDataScreen/components/profileTemplate.vue

<template>
  <div class="box-border-box">
    <div class="box-border">
      <div class="box-margin">
        <div class="box-content" style="float: left" v-for="item in dataProfile" :key="item.index">
          <div class="justify">
            <el-popover
                v-if="item.tips"
                :append-to-body="false"
                placement="top-start"
                width="200"
                trigger="hover"
            >
              <template slot="default">
              <span v-if="item.title == '已转化线索数'">
                {{$t('①已转化线索数：销售线索应用中，已分配给业务员，已转化状态的线索数量。')}}<br/>
                {{$t('②一条线索可进行两次转化：转化客户、转化项目，因此，已转化线索数≠转化客户线索数+转化项目线索数。')}}
              </span>
                <span v-else>
                {{item.tips}}
              </span>
              </template>
              <div slot="reference">
                <div class="value-style">
              <span v-if="item.title == '报价总金额' || item.title == '客户报价金额' || item.title == '项目报价金额' || item.title == '关联客户成交金额' || item.title == '关联项目成交金额'">
                <span v-if="item.value > 10000" >
                  {{tool.formatAmount(tool.unitConversion(item.value,10000),2)}}<span style="font-size: 0.729vw">{{$t('万元')}}</span>
                </span>
                <span v-else>
                  {{tool.formatAmount(item.value,2)}}<span style="font-size: 0.729vw">{{$t(' 元')}}</span>
                </span>
              </span>
                  <span v-else>{{item.value}}</span>
                </div>
                <div class="title-style">{{item.title}}</div>
              </div>
            </el-popover>
            <div v-else>
              <div class="value-style">
              <span v-if="item.title == '报价总金额' || item.title == '客户报价金额' || item.title == '项目报价金额'">
                <span v-if="item.value > 10000" >
                  {{tool.formatAmount(tool.unitConversion(item.value,10000),2)}}<span style="font-size: 0.729vw">{{$t('万元')}}</span>
                </span>
                <span v-else>
                  {{tool.formatAmount(item.value,2)}}<span style="font-size: 0.729vw">{{$t(' 元')}}</span>
                </span>
              </span>
                <span v-else>{{item.value}}</span>
              </div>
              <div class="title-style">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="float: left" class="box-margin" v-if="profileType && profileType.length > 0">
        <div class="box-content" style="float: left" v-for="k in profileType" :key="k.index">
          <div class="justify">
            <el-popover
                v-if="k.value == '无分类客户'"
                :append-to-body="false"
                placement="top-start"
                width="200"
                trigger="hover"
            >
              <template slot="default">
              <span v-if="k.value == '无分类客户'">
               {{$t('无分类客户数：统计没有客户分类信息的客户数量')}}<br/>
              </span>
              </template>
              <div slot="reference">
                <div class="value-style">{{k.qty}}</div>
                <div class="title-style">{{k.value}}</div>
              </div>
            </el-popover>
            <div v-else>
              <div class="value-style">{{k.qty}}</div>
              <div class="title-style">{{k.value}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "profileTemplate",
  props:['dataProfile','profileType']
}
</script>

<style scoped>
.box-border-box{
  width: 29.167vw;
  height: 11.146vw;
  background: #001E41;
  box-shadow: 0.000vw 0.156vw 0.313vw 0.052vw rgba(0,0,0,0.16);
  border-radius: 0.313vw 0.313vw 0.313vw 0.313vw;
  border: 0.052vw solid #CFDCE5;
  margin-top: 1.042vw;
}
.box-border{
  margin: 0.705vw 0 1.042vw 1.042vw;
  max-width: 28.167vw;
  max-height: 9.646vw;
  overflow: auto;
}
.box-border::-webkit-scrollbar {
  width: 0.313vw;
  height: 0.313vw;
  background-color: transparent;
}
.box-border::-webkit-scrollbar-track {
  background-color: transparent;
  background-color: rgb(15, 43, 87);
}
.box-border::-webkit-scrollbar-thumb {
  border-radius: 0.156vw;
  background-image: linear-gradient(135deg, #c0c7cc, #c0c7cc);
}
.box-border .box-margin{
  box-sizing: border-box;
}
.box-margin .box-content{
  width: 8.609vw;
  height: 2.675vw;
  margin-right: 0.245vw;
  margin-bottom: 0.705vw;
}
.box-margin .justify {
  display: flex;justify-content: space-between;
}
.justify .value-style {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 1.250vw;
  color: #3685FC;
  text-align: left;
  font-style: normal;
  text-transform: none;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}
.justify .title-style{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.625vw;
  color: #CFDCE5;
  text-align: left;
  font-style: normal;
  text-transform: none;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}
</style>