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

<template>
  <div>
    <borderTemplate borderBox="width: 31.250vw;height: 35.417vw;" title="销售面板" detailTitle="查看详情" @dialog="$emit('dialog')" systemappid="277" push_path="/salesData">
      <template slot="content">
        <div class="justify-content">
          <div class="justify-content-left">
            <div class="box-border">
              <el-button v-if="typeSelect == '订单'" type="primary" class="btn-select" @click="typeChange('订单')">{{$t(`订单`)}}</el-button>
              <el-button type="text" v-else class="btn-unSelect" @click="typeChange('订单')">{{$t(`订单`)}}</el-button>
            </div>
            <div class="box-border">
              <el-button type="primary" v-if="typeSelect == '出货'" class="btn-select" @click="typeChange('出货')">{{$t(`出货`)}}</el-button>
              <el-button type="text" class="btn-unSelect" v-else @click="typeChange('出货')">{{$t(`出货`)}}</el-button>
            </div>
            <div class="box-border">
              <el-button type="primary" v-if="typeSelect == '开票'" class="btn-select" @click="typeChange('开票')">{{$t(`开票`)}}</el-button>
              <el-button type="text" class="btn-unSelect" v-else @click="typeChange('开票')">{{$t(`开票`)}}</el-button>
            </div>
            <div class="box-border">
              <el-button type="primary" v-if="typeSelect == '回款'" class="btn-select" @click="typeChange('回款')">{{$t(`回款`)}}</el-button>
              <el-button type="text" class="btn-unSelect" v-else @click="typeChange('回款')">{{$t(`回款`)}}</el-button>
            </div>
          </div>
          <div>
            <el-select v-model="param.content.dateType" class="inline-16" 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>
        </div>
        <div class="content-style-pie">
          <div style="width: 7.292vw;height: 7.292vw;margin: 0.781vw 0 0 1.042vw;">
            <el-progress
                color="#6395fa"
                type="circle"
                :percentage="percentage"
                :stroke-width="15"
                :width="progressWidth"
                :format="format"
            ></el-progress>
          </div>
          <div class="content-style-content">
            <div class="font1">
              {{$t(`实际金额(元)`)}}
            </div>
            <div>
              <span class="font2">
                <span v-if="list.amount > 10000">
                  {{tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)}}
                  <span class="font3">{{$t(`万`)}}</span>
                </span>
                <span v-else>
                  {{tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)}}
                </span>
              </span>
            </div>
            <div>
              <span class="font4">{{$t(`年同比`)}}：</span>
              <span class="font5" style="margin-right: 0.417vw">{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span>
              <img style="vertical-align: middle" v-if="list.tbxsje > 0" width="8" height="7" src="../../../assets/icons/up.png" alt="">
              <img style="vertical-align: middle" v-if="list.tbxsje < 0" width="8" height="7" src="../../../assets/icons/down.png" alt="">
              <span class="font4" style="margin-left:1.042vw ">{{$t(`年环比`)}}：</span>
              <span class="font5" style="margin-right: 0.417vw">{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span>
              <img style="vertical-align: middle" v-if="list.hbxsje > 0" width="8" height="7" src="../../../assets/icons/up.png" alt="">
              <img style="vertical-align: middle" v-if="list.hbxsje < 0" width="8" height="7" src="../../../assets/icons/down.png" alt="">
            </div>
            <div class="font1" style="margin-top:1.042vw ">
              {{$t(`目标金额(元)`)}}
            </div>
            <div>
              <span class="font6">
                <span v-if="list.target_l > 10000">
                  {{tool.formatAmount(tool.unitConversion(list.target_l, 10000), 2)}}
                  <span class="font7">{{$t(`万`)}}</span>
                </span>
                <span v-else>
                  {{tool.formatAmount(tool.unitConversion(list.target_l, 10000), 2)}}
                </span>
              </span>
            </div>
            <div>
              <span class="font4">{{$t(`目标达成率`)}}：</span>
              <span class="font5">{{ Math.round((list.wcamount * 100)* 100) / 100 }}%</span>
              <span class="font4" style="margin-left:0.842vw">{{$t(`实际与目标差额`)}}：</span>
              <span class="font5" >
                <span v-if="list.unamount > 10000">
                  {{tool.formatAmount(tool.unitConversion(list.unamount, 10000), 2)}}
                  <span class="font5">{{$t(`万元`)}}</span>
                </span>
                <span v-else>
                  {{tool.formatAmount(tool.unitConversion(list.unamount, 10000), 2)}}
                   <span class="font5">{{$t(`元`)}}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
        <div style="margin-top: 1.042vw">
          <div style="display:flex;justify-content: right">
            <datePicker ref="pickerRef" type="year" @selectTime="pickerChange" format="yyyy" value_format="yyyy"></datePicker>
          </div>
          <div id="salesPanelChart" style="height: 14.5vw"></div>
        </div>
      </template>
    </borderTemplate>
  </div>
</template>

<script>
import borderTemplate from '../components/borderTemplate'
import {DualAxes} from "@antv/g2plot";
import datePicker from "../components/datePicker";
export default {
  name: "salesPanel",
  components:{borderTemplate,datePicker},
  data(){
    return {
      typeSelect:'订单',
      chartCustomerLine:null,
      param:{
        id:20231009125304,
        content:{
          dataid:'',
          datatype:'1',
          dateType:'本年',
          type:'',
          where:{
            isleave:''
          }
        }
      },
      list:'',
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      progressWidth: (9.65 * document.documentElement.clientWidth) / 100,
      percentage:0,
      paramChart:{
        "id": 20241009093604,
        "content": {
          "type": '',
          "dataid": '',
          "year": 2024,
          "datatype": 1,
          "where": {
            "isleave": ""
          }
        }
      },
      saledateRows:[],
      tbzzl:[],
    }
  },
  methods:{
    async listData(init,time){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.percentage = Math.round(this.list.wcamount * 100 * 100) / 100;
      if (init){
        this.renderPie()
      }else {
        // if (time){
        //   this.queryModel()
        // }
        this.queryModel()
      }
    },
    dateTypeChange(){
      this.listData(false,false)
    },
    pickerChange(val){
      this.paramChart.content.year = val
      this.listData(false,true)
    },
    typeChange(val){
      if (val == '订单'){
        this.typeSelect = '订单'
        this.param.content.datatype = 1
        this.paramChart.content.datatype = 1
      }else if (val == '出货'){
        this.typeSelect = '出货'
        this.param.content.datatype = 2
        this.paramChart.content.datatype = 2
      }else if (val == '开票'){
        this.typeSelect = '开票'
        this.param.content.datatype = 3
        this.paramChart.content.datatype = 3
      }else if (val == '回款'){
        this.typeSelect = '回款'
        this.param.content.datatype = 4
        this.paramChart.content.datatype = 4
      }
      this.listData()
    },
    format(percentage) {
      return this.$t("目标达成率") + '\n\n' + percentage + "%";
    },
    /*渲染图表*/
    async queryModel(){
      const res = await this.$api.requested(this.paramChart)
      this.saledateRows = res.data.saledateRows
      let lastYear = []
      let nowYear = []
      let k=0
      for (var i=0;i<res.data.saledateRows.length;i++){
        if (res.data.saledateRows[i].name === '去年同期金额'){
          lastYear[k]=res.data.saledateRows[i]
          k++
        }
      }
      let x=0
      for (var i=0;i<res.data.saledateRows.length;i++){
        if (res.data.saledateRows[i].name === '本年金额'){
          nowYear[x]=res.data.saledateRows[i]
          x++
        }
      }
      let saledateRows = nowYear.concat(lastYear)
      this.saledateRows = saledateRows.map((item)=>{
        let value = item.value/10000
        return {
          "date":item.date,
          "name":item.name + '(万元)',
          "value":value
          /*"value":item.value*/
        }
      })
      this.tbzzl = res.data.tbzzlRows.map((item)=>{
        return {
          "date":item.date,
          "name":item.name,
          "value":Math.round(((item.value *100)*100)/100)
        }
      })
      this.chartCustomerLine.changeData([this.saledateRows,this.tbzzl])
    },
    renderPie(){
      this.chartCustomerLine = new DualAxes('salesPanelChart', {
        data: [this.saledateRows,this.tbzzl],
        xField: 'date',
        yField: ['value','value'],
        xAxis:{
          label:{
            style:{
              fill:'#CFDCE5'
            }
          }
        },
        yAxis:{
          value:{
            label:{
              style:{
                fill:'#CFDCE5'
              }
            }
          }
        },
        geometryOptions: [
          {
            geometry: 'column',
            isGroup: true,
            seriesField: 'name',
            color:['#3685FC','#6CD2A1'],
            // label:{
            //   position:top,
            //   formatter: (datum) =>{
            //     return '¥' + this.tool.formatAmount(datum.value,2)
            //   }
            // }
          },
          {
            geometry: 'line',
            seriesField: 'name',
            color: '#ECB937',
            smooth: true,
            // label:{
            //   formatter: (datum) =>{
            //     return  datum.value + '%'
            //   }
            // }
          },
        ],
        tooltip: {
          formatter: (datum) => {
            return {
              name:datum.name,
              value:datum.name != '同比增长率'?'¥'+this.tool.formatAmount(datum.value,2):datum.value + '%'
            }
          },
        },
        legend:{
          itemName:{
            style:{
              fill:'#CFDCE5'
            }
          },
        }
      });
      this.chartCustomerLine.render();
      this.queryModel()
    },
  },
}
</script>
<style>
.justify-content{
  display: flex;
  justify-content: space-between;
  margin-top: 1.042vw;
}
.justify-content-left{
  display: flex;
  justify-content: left;
}
.justify-content-left .box-border{
  width: 3.125vw;
  height: 1.563vw;
  border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
  margin-right: 0.521vw;
  text-align: center;
}
.justify-content-left .box-border .btn-select{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.833vw;
  color: #E6F4FF;
  font-style: normal;
  text-transform: none;
}
.justify-content-left .box-border .btn-unSelect{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.729vw;
  color: #CFDCE5;
  font-style: normal;
  text-transform: none;
  text-align: center;
}
.content-style-pie{
  width: 29.167vw;
  height: 11.458vw;
  background: #001E41;
  box-shadow: 0.000vw 0.156vw 0.313vw 0.052vw rgba(0,0,0,0.16);
  border-radius: 5.729vw 5.729vw 0.313vw 5.729vw;
  border: 0.052vw solid #CFDCE5;
  margin-top: 1.042vw;
  box-sizing: border-box;
  display: flex;
  justify-content: left;
}
.content-style-content{
  margin-top: 0.917vw;
  margin-left: 4.250vw;
}
.content-style-content .font1{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.938vw;
  color: #CFDCE5;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.content-style-content .font2{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 1.250vw;
  color: #6CD2A1;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.content-style-content .font3{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 0.625vw;
  color: #6CD2A1;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.content-style-content .font4{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.625vw;
  color: #CFDCE5;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.content-style-content .font5{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.625vw;
  color: #E6F4FF;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.content-style-content .font6{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 1.250vw;
  color: #FFFFFF;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.content-style-content .font7{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 0.625vw;
  color: #FFFFFF;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
<style  scoped>
/deep/ .el-progress__text {
  position: absolute;
  top: 50%; /* 设置垂直居中 */
  left: 50%;
  transform: translateX(-50%) translateY(-50%); /* 移动到圆环中心 */
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 0.833vw !important;
  color: #E6F4FF !important;
  font-style: normal;
  text-transform: none;
}
  /deep/ .el-button--primary:focus, .el-button--primary:hover {
    background: #6090f8;
    border-color: #6090f8;
    color: #6090f8;
  }
  /deep/ .element.style {
    font-size: 15.9386px;
  }
::v-deep .el-progress__text {
  white-space: pre;
}
</style>