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

<template>
  <div>
    <borderTemplate borderBox="width: 31.250vw;height: 15.104vw;" title="逾期账款" detailTitle="查看详情" @dialog="$emit('dialog')"  systemappid="286" push_path="/accountsReceivable">
      <template slot="operation">
        <div style="padding-left: 0.521vw">
          <el-radio v-model="param.content.querytype" label="2" @input="listData">{{$t(`按业务员`)}}</el-radio>
          <el-radio v-model="param.content.querytype" label="1" @input="listData">{{$t(`按客户`)}}</el-radio>
        </div>
      </template>
      <template slot="content">
        <div class="justify-style">
          <boxTemplate title="总应收" :data="list.sumallaoverduemount"></boxTemplate>
          <boxTemplate title="逾期1月以内" :data="list.sumonemonthamount"></boxTemplate>
        </div>
        <div class="justify-style">
          <boxTemplate title="逾期1~3月" :data="list.sumthreemonthamount"></boxTemplate>
          <boxTemplate title="逾期3月以上" :data="list.sumupthreemonthamount"></boxTemplate>
        </div>
      </template>
    </borderTemplate>
  </div>
</template>

<script>
import borderTemplate from '../components/borderTemplate'
import boxTemplate from "../components/boxTemplate";
export default {
  name: "accountsReceivable",
  components:{borderTemplate,boxTemplate},
  data(){
    return {
      param:{
        "id": 20241009101204,
        "content": {
          "type": '',
          "dataid": '',
          "querytype": '2',
          "where": {
            "isleave": ""
          }
        }
      },
      list:''
    }
  },
  methods:{
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      console.log(this.list,'应收账款')
    }
  }
}
</script>

<style scoped>
.justify-style{
  display: flex;
  justify-content: space-between;
  margin-top: 1.042vw;
}
/deep/ .el-radio__inner {
  width: 1.250vw;
  height: 1.250vw;
  position: relative;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  background: linear-gradient(356deg, #00244D 0%, #001E41 100%);
  box-shadow: 0.000vw 0.104vw 0.208vw 0.052vw rgba(0,0,0,0.15);
  border-radius: 0.833vw;
  border: 0.104vw solid #3D73BA;
  opacity: 0.8;
}
/deep/ .el-radio__label {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.729vw;
  color: #E6F4FF;
  line-height: 0.000vw;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 0.521vw;
}
/deep/ .el-radio__input.is-checked+.el-radio__label {
  color: #E6F4FF;
}
/deep/ .el-radio__inner::after {
  width: 0.625vw;
  height: 0.625vw;
  border-radius: 100%;
  background-color: #3685FC;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease-in;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #3685FC;
  background: none;
}
</style>