yos_web/src/SDrpManagement/performanceGoals/index.vue

<template>
  <normalLayout>
    <div class="container" slot="content">
      <el-select class="inline-16" v-model="type" placeholder="请选择类型" size="small" @change="listData" clearable>
        <el-option label="开票" value="1"></el-option>
        <el-option label="订单" value="2"></el-option>
        <el-option label="出货" value="3"></el-option>
      </el-select>
      <el-date-picker
        class="normal-margin inline-16"
        v-model="value3"
        type="year"
        value-format="yyyy"
        placeholder="选择年份"
        size="small"
        @change="listData">
      </el-date-picker>
      <el-select v-model="tradefield" placeholder="请选择选择领域" size="small" @change="listData" clearable>
        <el-option v-for="(item, index) in tradefieldOptions" :key="index" :label="item.tradefield"
          :value="item.tradefield">
        </el-option>
      </el-select>
      <div v-for="item in perfData" :key="item.index">
        <el-card class="normal-margin" shadow="none" :body-style="{padding:'10px'}">
          <div slot="header">{{item.tradefield}}</div>
          <p class="normal-title mt-10">月度目标</p>
          <el-table
            class="normal-margin"
            :data="item.month"
            style="width: 100%"
            size="mini"
            stripe
            border>
            <el-table-column
              prop="month"
              label="月份">
            </el-table-column>
            <el-table-column
              prop="a"
              label="实际完成">
            </el-table-column>
            <el-table-column
              prop="l"
              label="基本目标">
            </el-table-column>
            <el-table-column
              prop="h"
              label="挑战目标">
            </el-table-column>
            <el-table-column
              prop="pl"
              label="基本比">
              <template slot-scope="scope">
                {{scope.row.pl}}%
              </template>
            </el-table-column>
            <el-table-column
              prop="ph"
              label="挑战比">
               <template slot-scope="scope">
                {{scope.row.ph}}%
              </template>
            </el-table-column>
          </el-table>
          <p class="normal-title mt-10">季度目标</p>
          <el-table
            :data="item.quarter"
            style="width: 100%"
            size="mini"
            stripe
            border>
            <el-table-column
              prop="quarter"
              label="季度">
            </el-table-column>
            <el-table-column
              prop="a"
              label="实际完成">
            </el-table-column>
            <el-table-column
              prop="l"
              label="基本目标">
            </el-table-column>
            <el-table-column
              prop="h"
              label="挑战目标">
            </el-table-column>
            <el-table-column
              prop="pl"
              label="基本比">
               <template slot-scope="scope">
                {{scope.row.pl}}%
              </template>
            </el-table-column>
            <el-table-column
              prop="ph"
              label="挑战比">
               <template slot-scope="scope">
                {{scope.row.ph}}%
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </normalLayout>
</template>

<script>
export default {
  data () {
    return {
      perfData:[],
      tradefieldOptions:[],
      quarterData:{},
      tradefield:'',
      value3:String((new Date()).getFullYear()),
      type:'1'
    }
  },
  methods:{
    async listData () {
      this.perfData = []
      const res = await this.$api.requested({
        "id": 20230110151902,
        "content": {
            "type":this.type,//开票，订单，出货
            "where": {
              "year": this.value3,
              "tradefield": this.tradefield
            }
        },
      })
      res.data.forEach(element => {
        this.createTableData(element)
      });
    },
    async fieldData () {
      const res = await this.$api.requested({
        "id": 20221223141802,
        "content": {
          "pageSize": 999,
        }
      })
      this.tradefieldOptions = res.data
    },
    createTableData (data) {
      let arr = []
      let arr_s = []
      for (let index = 1; index < 13; index++) {
        arr.push({
          month:index + '月',
          a:data[`m${index}a`],
          l:data[`m${index}l`],
          h:data[`m${index}h`],
          pl:data[`m${index}pl`],
          ph:data[`m${index}ph`]
        })
      }
      for (let index = 1; index < 5; index++) {
        arr_s.push({
          quarter:index + '季度',
          a:data[`s${index}a`],
          l:data[`s${index}l`],
          h:data[`s${index}h`],
          pl:data[`s${index}pl`],
          ph:data[`s${index}ph`]
        })
      }
      this.perfData.push({
        tradefield:data.tradefield,
        month:arr,
        quarter:arr_s
      })
      console.log(this.perfData)
    }
  },
  mounted () {
    this.listData()
    this.fieldData()
  }
}

</script>
<style>
</style>