yos_web/src/views/salesData/modules/quotationAnalysis.vue

<template>
  <div class="div-box-new-margin" >
    <div class="div-border-box">
      <div class="div-line"></div>
      <div style="line-height: 22px;height: 22px;vertical-align: auto;margin-left: 16px">{{$t(`报价分析`)}}</div>
      <div class="container-div">
        <boxLine title="报价总次数" :data="totalqty" content="统计到当前查询时间为止的报价总次数（审核状态）" :windowWidth="windowWidth"></boxLine>
        <boxLine title="客户报价次数" :data="cusqty" content="统计到当前查询时间为止的客户报价总次数（审核状态）" :windowWidth="windowWidth"></boxLine>
        <boxLine title="项目报价次数" :data="proqty" content="统计到当前查询时间为止的项目报价总次数（审核状态）" :windowWidth="windowWidth"></boxLine>
        <boxLine title="报价总金额" :data="totalamount" content="统计到当前查询时间为止的报价总金额（审核状态）" :windowWidth="windowWidth"></boxLine>
        <boxLine title="客户报价金额" :data="cusamount" content="统计到当前查询时间为止的客户报价金额（审核状态）" :windowWidth="windowWidth"></boxLine>
        <boxLine title="项目报价金额" :data="proamount" content="统计到当前查询时间为止的项目报价金额（审核状态）" :windowWidth="windowWidth"></boxLine>
      </div>
      <div :style="{padding:padding,height: '451px',marginTop:'10px',background:'#fff'}" id="quotationAnalysisFull">
        <div class="out">
          <div class="mt-10" style="min-width: 220px;">{{$t(`近12月报价次数趋势分析`)}}</div>
          <div class="in">
            <div class="inline-16 mt-10">
              <departmentSalesperson ref="departmentSalesperson" class="inline-16" @depSelect="depSelect" @personSelect="personSelect" :isFull="isFull" :isNewDep="true"></departmentSalesperson>
            </div>
            <div class="mt-10 inline-16">
              <p class="search__label">{{$t('状态')}}:</p>
              <el-select v-model="plotParam.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="listData(plotParam.content.dataid,plotParam.content.where.isleave,'状态');queryQuotationModel(plotParam.content.dataid,plotParam.content.where.isleave,'状态')" >
                <el-option :label="$t('在职')" value="1"></el-option>
                <el-option :label="$t('离职')" value="2"></el-option>
              </el-select>
            </div>
            <div class="mt-10 inline-15">
              <span class="search__label inline-16">{{$t('分析日期')}}:</span>
              <el-date-picker
                  v-model="endDate"
                  type="date"
                  :clearable="false"
                  :append-to-body="!isFull"
                  @change="changeDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :range-separator="$t('至')"
                  :start-placeholder="$t('开始月份')"
                  :end-placeholder="$t('结束月份')">
              </el-date-picker>
            </div>
            <fullScreen  domId="quotationAnalysisFull" @onFull="onFull" @backFull="backFull"></fullScreen>
          </div>
        </div>
        <div class="chart">
<!--          <div id="quotationAnalysisChart" :style="{height: isFull?heightChart:windowWidth>1435?'90%':'90%'}"></div>-->
          <div id="quotationAnalysisChart" :style="{height: isFull?heightChart:windowWidth<1660?'90%':windowWidth<1676?'90%':'100%'}"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import boxLine from "@/views/salesData/components/boxLine1";
import { Line,G2 } from '@antv/g2plot';
import departmentSalesperson from "@/views/salesData/components/departmentSalesperson";
import fullScreen from "@/views/salesData/components/fullScreen";
const G = G2.getEngine('canvas');
const seriesKey = 'series';
const valueKey = 'value';
const meta = {
  date: {
    alias: '日期',
  },
  oldtotalqty: {
    alias: '去年同期报价总数量',
  },
  oldproqty: {
    alias: '去年同期项目报价数量',
  },
  newproqty:{
    alias: '项目报价数量'
  },
  newtotalqty:{
    alias: '报价总数量'
  },
  oldcusqty:{
    alias: '去年同期客户报价数量'
  },
  newcusqty:{
    alias: '客户报价数量'
  }
};
export default {
  name: "quotationAnalysis",
  props:['dataid','windowWidth','scrollHeight'],
  components:{boxLine,departmentSalesperson,fullScreen},
  data(){
    return {
      chartLine:null,
      "proqty": '',//项目报价总数
      "proamount": '',//项目报价金额
      "cusqty": '',//客户报价总数
      "totalamount": '',//报价总金额
      "totalqty": '',//报价总数量
      "cusamount": '',//客户报价金额,
      param:{
        "id": 20231011201004,
        "content": {
          "type": '0',//0人员 1部门
          "dataid": '',
          "where":{
            "isleave":'1'
          }
        }
      },
      plotParam:{
        "id": 20231011154704,
        "content": {
          "type": 0,//0人员 1部门
          "dataid": '',
          "enddate": "", //分析日期
          "where":{
            "isleave":'1'
          }
        }
      },
      plotList:[],
      endDate:new Date().getFullYear() + '-' +  (new Date().getMonth() + 1) + '-' + new Date().getDate(),
      padding:'0',
      heightChart:'100%',
      isFull:false
    }
  },
  methods:{
    async listData(val,type,state){
      if (state == '状态'){
        this.$refs.departmentSalesperson.person = ''
        this.param.content.type = 1
        this.param.content.dataid = this.$refs.departmentSalesperson.depmentid ? this.$refs.departmentSalesperson.depmentid : -1
      }else {
        this.param.content.dataid = val?val : this.dataid
      }
      this.param.content.where.isleave = type
      const res = await this.$api.requested(this.param)
      this.proqty = res.data.proqty
      this.proamount = res.data.proamount
      this.cusqty = res.data.cusqty
      this.totalamount = res.data.totalamount
      this.totalqty = res.data.totalqty
      this.cusamount = res.data.cusamount
      state == '状态' ?this.personData(this.$refs.departmentSalesperson.depmentid):''
    },
    /*获取报价分析数据*/
    async queryQuotation(val,type) {
   /*   this.plotParam.content.dataid = val || this.dataid
      console.log(this.endDate)
      this.plotParam.content.enddate = this.endDate
      const res = await this.$api.requested(this.plotParam)
      this.plotList=res.data*/
      this.renderPie(val,type)
    },
    /*渲染图表数据*/
    async queryQuotationModel(val,type,state) {
      if (state == '状态'){
        this.plotParam.content.dataid = this.plotParam.content.type == 0?-1:val
      }else {
        this.plotParam.content.dataid = val?val : this.dataid
      }
      this.plotParam.content.enddate = this.endDate
      this.plotParam.content.where.isleave = type
      const res = await this.$api.requested(this.plotParam)
      this.plotList=res.data
      this.chartLine.changeData(this.processData(this.plotList, ['newtotalqty', 'newcusqty','newproqty','oldtotalqty','oldcusqty','oldproqty']))
    },
    processData(data, yFields) {
      const result = [];
      data.forEach((d) => {
        yFields.forEach((yField) => {
          const name = this.$t(meta?.[yField]?.alias || yField) ;
          result.push({ ...d, date: d.date, [seriesKey]: name, [valueKey]: d[yField] });
        });
      });
      return result;
    },
    renderPie(val,type){
      this.chartLine = new Line('quotationAnalysisChart',{
        data:this.processData(this.plotList, ['newtotalqty', 'newcusqty','newproqty','oldtotalqty','oldcusqty','oldproqty']),
        xField: 'date',
        yField: valueKey,
        seriesField: seriesKey,
        smooth: true,
        label:{
          // 可手动配置 label 数据标签位置
          position: 'top', // 'top', 'bottom', 'middle',
          // 配置样式
          layout: [],
        }
        /*label: {
          // 可手动配置 label 数据标签位置
          position: 'top', // 'top', 'bottom', 'middle',
          // 配置样式
          layout: [{ type: 'hide-overlap' }],
         /!* formatter: (item) => item.value + '%',*!/
        },*/
      });
      this.chartLine.render()
      this.queryQuotationModel(val,type)
    },
    changeDate(){
      this.queryQuotationModel()
    },
    /*选择部门*/
    depSelect(val){
      this.plotParam.content.type = 1
      this.param.content.type = 1
      this.plotParam.content.dataid = val?val:-1
      this.dataid = val?val:-1
      this.listData(this.dataid,this.plotParam.content.where.isleave)
      this.queryQuotationModel(this.dataid,this.plotParam.content.where.isleave)
      this.personData(this.dataid)
    },
    /*选择业务员*/
    personSelect(val){
      if (val || this.$refs.departmentSalesperson.depmentid){
        this.plotParam.content.type = val?0:1
        this.param.content.type = val?0:1
        this.plotParam.content.dataid = val?val:this.$refs.departmentSalesperson.depmentid
        this.dataid = val?val:this.$refs.departmentSalesperson.depmentid
      }else {
        this.plotParam.content.type = 1
        this.param.content.type = 1
        this.plotParam.content.dataid = -1
        this.dataid = -1
      }
      this.listData(this.dataid,this.plotParam.content.where.isleave)
      this.queryQuotationModel(this.dataid,this.plotParam.content.where.isleave)
    },
    /*获取新的业务员列表*/
    async personData(depid){
      let param = {
        id: 20230620102004,
        content: {
          isleave:this.plotParam.content.where.isleave,
          depid:depid
        },
      }
      const res = await this.$api.requested(param)
      this.$refs.departmentSalesperson.personnelList = res.data.hr
    },
    /*全屏*/
    onFull(){
      this.heightChart = this.windowWidth > 1144 ?'calc(100vh - 80px)':'calc(100vh - 115px)'
      this.padding = '16px'
      this.isFull = true
    },
    /*退出全屏*/
    backFull(val){
      /*this.heightChart = '100%'*/
      this.padding = '0'
      this.isFull = false
      this.$emit('backFull',val)
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
  .div-line{
    background: #4F7BFD;
    height: 20px;
    width: 5px;
    float: left;
  }
  .container-div{
    display: flex;
    flex-wrap: wrap;
    margin: 10px 18px 0 0;
  }
</style>