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

<template>
  <div class="box-border">
    <div class="box-margin">
      <div class="box-content" 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 == '项目报价金额'">
                <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 class="box-margin" v-if="profileType && profileType.length > 0">
      <div class="box-content" 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>
</template>

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

<style scoped>
.box-border{
  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;
  overflow: auto;
  box-sizing: border-box;
  -ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
  scrollbar-width: none; /* 适用于 Firefox */
}
.box-border .box-margin{
  margin: 0 0 1.042vw 1.042vw;
  /*overflow: auto;*/
  box-sizing: border-box;
  /*-ms-overflow-style: none; !* 适用于 Internet Explorer 和旧版 Edge *!*/
  /*scrollbar-width: none; !* 适用于 Firefox *!*/
}
.box-margin .box-content{
  width: 6.609vw;
  height: 2.675vw;
  /* border: 1px solid #3fc9c9; */
  float: left;
  margin-right: 0.359vw;
  margin-top: 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>