yos_web/src/HManagement/serviceDataScreen/modules/jobData.vue

<template>
  <div>
    <borderTemplate borderBox="width: 31.250vw;height: 12.500vw;" title="作业数据" detailTitle="查看详情" @dialog="detailClick" systemappid="42" push_path="/dataanalysis">
      <template slot="operation">
        <div style="display: flex;justify-content: right;margin-top: -0.23vw;margin-left: 1.256vw">
          <el-select v-model="dateType"   size="small"  @change="dateTypeChange" :popper-append-to-body="false">
            <el-option :label="$t('本周')" value="本周"></el-option>
            <el-option :label="$t('本月')" value="本月"></el-option>
            <el-option :label="$t('上月')" value="上月"></el-option>
            <el-option :label="$t('本年')" value="本年"></el-option>
          </el-select>
        </div>
      </template>
      <template slot="content">
        <div class="box-style">
          <div class="box-border">
            <div class="justify-content-style-set">
              <div>
                <div class="data-font">{{list.xsxz}}</div>
                <div class="title">{{$t(`新增线索`)}}</div>
              </div>
              <div class="magin-10">
                <div class="data-font">{{list.xsgj}}</div>
                <div class="title">{{$t(`跟进线索`)}}</div>
              </div>
              <div class="magin-10">
                <div class="data-font">{{list.khxz}}</div>
                <div class="title">{{$t(`新增客户`)}}</div>
              </div>
              <div class="magin-10">
                <div class="data-font">{{list.khgj}}</div>
                <div class="title">{{$t(`客户跟进`)}}</div>
              </div>

              <div class="magin-10">
                <div class="data-font">{{list.lxxz}}</div>
                <div class="title">{{$t(`新增联系人`)}}</div>
              </div>
              <div class="magin-10">
                <div class="data-font">{{list.lxgj}}</div>
                <div class="title">{{$t(`联系人跟进`)}}</div>
              </div>
            </div>
            <div class="justify-content-style-set">
              <div>
                <div class="data-font">{{list.xmxz}}</div>
                <div class="title">{{$t(`新增项目`)}}</div>
              </div>

              <div class="magin-10">
                <div class="data-font">{{list.xmgj}}</div>
                <div class="title">{{$t(`项目跟进`)}}</div>
              </div >
            </div>
          </div>
        </div>
      </template>
    </borderTemplate>
  </div>
</template>

<script>
import borderTemplate from '../components/borderTemplate'
export default {
  name: "jobData",
  components:{borderTemplate},
  data(){
    return {
      dateType:'本月',
      param:{
        id:20230616131404,
        content:{
          dataType:'1',
          dataid:'',
          type:'',
          where:{
            isleave:''
          }
        }
      },
      list:{
        khgj:'',
        khxz:'',
        xmgj:'',
        xmxz:'',
        xsgj:'',
        xsxz:'',
        lxgj:'',
        lxxz:'',
      },
      listNew:""
    }
  },
  methods:{
    async listData(){
      const res = await this.$api.requested(this.param)
      this.listNew = res.data
      console.log(this.listNew,'数据1111222')
      this.dateTypeChange()
    },
    dateTypeChange(){
      if (this.dateType == '本月'){
        this.list.khgj = this.listNew.bykhgj
        this.list.khxz = this.listNew.bykhxz
        this.list.xmxz = this.listNew.byxmxz
        this.list.xmgj = this.listNew.byxmgj
        this.list.xsgj = this.listNew.byxsgj
        this.list.xsxz = this.listNew.byxsxz
        this.list.lxgj = this.listNew.bylxgj
        this.list.lxxz = this.listNew.bylxxz
      }else if (this.dateType == '本周') {
        this.list.khgj = this.listNew.bzkhgj
        this.list.khxz = this.listNew.bzkhxz
        this.list.xmxz = this.listNew.bzxmxz
        this.list.xmgj = this.listNew.bzxmgj
        this.list.xsgj = this.listNew.bzxsgj
        this.list.xsxz = this.listNew.bzxsxz
        this.list.lxgj = this.listNew.bzlxgj
        this.list.lxxz = this.listNew.bzlxxz
      }else if (this.dateType == '本年') {
        this.list.khgj = this.listNew.bnkhgj
        this.list.khxz = this.listNew.bnkhxz
        this.list.xmxz = this.listNew.bnxmxz
        this.list.xmgj = this.listNew.bnxmgj
        this.list.xsgj = this.listNew.bnxsgj
        this.list.xsxz = this.listNew.bnxsxz
        this.list.lxgj = this.listNew.bnlxgj
        this.list.lxxz = this.listNew.bnlxxz
      }else if (this.dateType == '上月'){
        this.list.khgj = this.listNew.sykhgj
        this.list.khxz = this.listNew.sykhxz
        this.list.xmxz = this.listNew.syxmxz
        this.list.xmgj = this.listNew.syxmgj
        this.list.xsgj = this.listNew.syxsgj
        this.list.xsxz = this.listNew.syxsxz
        this.list.lxgj = this.listNew.sylxgj
        this.list.lxxz = this.listNew.sylxxz
      }
    },
    detailClick(){
      this.$emit('dialog')
    },
  }
}
</script>

<style scoped>
.box-style{
  width: 28.921vw;
  height: 6.858vw;
  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.256vw;
  margin-bottom: 1.256vw;
}
.box-border{
  /*margin: 0vw 0 0.605vw 0vw;*/
  /*max-width: 28.521vw;*/
  /*max-height: 6.858vw;*/
  /*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-style .data-font{
  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-style .title{
  height: 0.833vw;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.625vw;
  color: #CFDCE5;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.justify-content-style-set{
  display: flex;
  justify-content:left;
  padding: 0.225vw 1.042vw 0 1.042vw;
}
.magin-10{
  margin-left: 1.782vw;
}
</style>