gjerp_ui/src/views/cxtj/new_index.vue

<template>
  <el-container>
    <el-container style="padding-top: 10px">
      <el-container>
        <el-main>
          <VxeGrid ref="bFangRef" v-bind="gridOptions" />
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import XEUtils from 'xe-utils'
import {getData} from "@/api/kban";

export default {
  name:'CXTJ',
  data(){
    return{
      gridOptions:{
        align:'center',
        border: true,
        resizable: true,
        keepSource:true,
        size:'mini',
        showOverflow: true,
        editConfig:{trigger: 'click', mode: 'cell', showStatus: true},
        highlightCurrentRow:true,
        columns:[],
        data:[],
      },
    }
  },
  created(){
    const columns0=[
      { type: 'seq', width: 60, title: '序号' },
      { field: 'kua', title: '跨',},
      { field: 'c', title: '完成率',},
      { field: 'n', title: '未完成率',},
    ]

    const columns1=[
      { type: 'seq', width: 60, title: '序号' },
      { field: 'label', title: '跨',},
      { field: 'quantity', title: '数量',},
      { field: 'weight', title: '重量',formatter:this.weightFormat},
    ]
    const path=this.$route.path
    switch (path){
      case '/scgl/jh/cxtj_rikwc':
      case '/scgl/jh/cxtj_zkwc':
      case '/scgl/jh/cxtj_ykwc':
        this.gridOptions.columns=columns0
        break
      case '/scgl/jh/cxtj_rikcl':
      case '/scgl/jh/cxtj_zkcl':
      case '/scgl/jh/cxtj_ykcl':
        this.gridOptions.columns=columns1
    }

  },
  mounted(){
    const path=this.$route.path
    switch (path){
      case '/scgl/jh/cxtj_rikwc':
        this.init('riwc')
        break
      case '/scgl/jh/cxtj_zkwc':
        this.init('zhouwc')
        break
      case '/scgl/jh/cxtj_ykwc':
        this.init('yuewc')
        break
      case '/scgl/jh/cxtj_rikcl':
        this.init('ricl')
        break
      case '/scgl/jh/cxtj_zkcl':
        this.init('zhoucl')
        break
      case '/scgl/jh/cxtj_ykcl':
        this.init('yuecl')
        break
    }
  },
  methods: {
    init(type) {
      getData().then(res => {
        const _data = JSON.parse(res.data)

        let begin = XEUtils.toDateString(XEUtils.now(), 'yyyy/MM/dd')
        let end = XEUtils.toDateString(XEUtils.getWhatDay(XEUtils.now(), 1), 'yyyy/MM/dd')
        const endOfMonth = XEUtils.toDateString(XEUtils.getWhatMonth(XEUtils.now(), 0, 'last'), 'yyyy/MM/dd')
        switch (type) {
          case 'riwc':
            console.log(111)
            this.gridOptions.data = this.完成率计算(_data, begin, end, endOfMonth).point
            break
          case 'zhouwc':
            begin = XEUtils.toDateString(XEUtils.getWhatWeek(XEUtils.now(), 0, 1, 0), 'yyyy/MM/dd')
            end = XEUtils.toDateString(XEUtils.getWhatWeek(XEUtils.now(), 1, 1, 0), 'yyyy/MM/dd')
            this.gridOptions.data = this.完成率计算(_data, begin, end, endOfMonth).point
            break
          case 'yuewc':
            begin = XEUtils.toDateString(XEUtils.getWhatMonth(XEUtils.now(), 0, 'first'), 'yyyy/MM/dd')
            end = XEUtils.toDateString(XEUtils.getWhatMonth(XEUtils.now(), 0, 'last'), 'yyyy/MM/dd')
            this.gridOptions.data = this.完成率计算(_data, begin, end, endOfMonth).point
            break
          case 'ricl':
            this.gridOptions.data = this.完成率计算(_data, begin, end, endOfMonth).wc
            break
          case 'zhoucl':
            begin = XEUtils.toDateString(XEUtils.getWhatWeek(XEUtils.now(), 0, 1, 0), 'yyyy/MM/dd')
            end = XEUtils.toDateString(XEUtils.getWhatWeek(XEUtils.now(), 1, 1, 0), 'yyyy/MM/dd')
            this.gridOptions.data = this.完成率计算(_data, begin, end, endOfMonth).wc
            break
          case 'yuecl':
            begin = XEUtils.toDateString(XEUtils.getWhatMonth(XEUtils.now(), 0, 'first'), 'yyyy/MM/dd')
            end = XEUtils.toDateString(XEUtils.getWhatMonth(XEUtils.now(), 0, 'last'), 'yyyy/MM/dd')
            this.gridOptions.data = this.完成率计算(_data, begin, end, endOfMonth).wc
            break
        }
      })
    },
    完成率计算(data, date, nextDate, endOfMonth) {

      const wc = [], point = []

      const 一跨完成数据 = data.filter(item => item.qgfkrq >= date && item.qgfkrq < nextDate && item.zyq1 === '二区' && ['7', '8','9'].includes(item.kw))
      const 一跨计划数量 = data.filter(item => item.qgjhrq >= date && item.qgjhrq < endOfMonth && item.zyq1 === '二区' && ['7', '8','9'].includes(item.kw)).length

      let 一跨完成率 = '0'
      if (一跨计划数量) {
        一跨完成率 = (一跨完成数据.length / 一跨计划数量 * 100).toFixed(2)
      }

      point.push({kua: '1跨', c: 一跨完成率, n: 一跨完成率 > 100 ? '0' : (100 - 一跨完成率).toFixed(2)})

      wc.push({
        label: '1跨', quantity: 一跨完成数据.length, weight: 一跨完成数据.reduce((accumulator, currentValue) => {
          return accumulator + (currentValue?.bcshzl || 0) / 1000;
        }, 0)
      },)

      const 二跨完成数据 = data.filter(item => item.qgfkrq >= date && item.qgfkrq < nextDate && item.zyq1 === '三区')
      const 二跨计划数量 = data.filter(item => item.qgjhrq >= date && item.qgjhrq < endOfMonth && item.zyq1 === '三区').length

      let 二跨完成率 = '0.00'
      if (二跨计划数量) {
        二跨完成率 = (二跨完成数据.length / 二跨计划数量 * 100).toFixed(2)
      }

      point.push({kua: '2跨', c: 二跨完成率, n: 二跨完成率 > 100 ? '0' : (100 - 二跨完成率).toFixed(2)})

      wc.push({
        label: '2跨', quantity: 二跨完成数据.length, weight: 二跨完成数据.reduce((accumulator, currentValue) => {
          return accumulator + (currentValue.bcshzl || 0) / 1000;
        }, 0)
      },)

      const 三跨完成数据 = data.filter(item => item.qgfkrq >= date && item.qgfkrq < nextDate && item.zyq1 === '二区' && ['6', '13', '14'].includes(item.kw))
      const 三跨计划数量 = data.filter(item => item.qgjhrq >= date && item.qgjhrq < endOfMonth && item.zyq1 === '二区' && ['6', '13', '14'].includes(item.kw)).length

      let 三跨完成率 = '0.00'
      if (三跨计划数量) {
        三跨完成率 = (三跨完成数据.length / 三跨计划数量 * 100).toFixed(2)
      }

      point.push({kua: '3跨', c: 三跨完成率, n: 三跨完成率 > 100 ? '0' : (100 - 三跨完成率).toFixed(2)})

      wc.push({
        label: '3跨', quantity: 三跨完成数据.length, weight: 三跨完成数据.reduce((accumulator, currentValue) => {
          return accumulator + (currentValue.bcshzl || 0) / 1000;
        }, 0)
      },)

      const 四跨完成数据 = data.filter(item => item.qgfkrq >= date && item.qgfkrq < nextDate && item.zyq1 === '四区')
      const 四跨计划数量 = data.filter(item => item.qgjhrq >= date && item.qgjhrq < endOfMonth && item.zyq1 === '四区').length

      const _四跨完成数据 = data.filter(item => item.qgfkrq>='2025/05/26 00:00:00' && item.zyq1 === '四区')
      console.log(_四跨完成数据,date)

      let 四跨完成率 = '0.00'
      if (四跨计划数量) {
        四跨完成率 = (四跨完成数据.length / 四跨计划数量 * 100).toFixed(2)
      }

      point.push({kua: '4,5,6跨', c: 四跨完成率, n: 四跨完成率 > 100 ? '0' : (100 - 四跨完成率).toFixed(2)})

      wc.push({
        label: '4、5、6跨', quantity: 四跨完成数据.length, weight: 四跨完成数据.reduce((accumulator, currentValue) => {
          return accumulator + (currentValue.bcshzl || 0) / 1000;
        }, 0)
      },)

      return {point, wc}
    },
    weightFormat({cellValue}) {
      return XEUtils.toNumber(cellValue).toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-col {
  padding: 0;
}
.el-aside {
  background: #fff;
  padding: 0;
}
.el-container {
  padding: 0;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.tableStyles {
  background: #0a76a4;
}
.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}
::v-deep .mytable .vxe-input {
  display: flex !important;
}
::v-deep .el-form-item{
  margin-bottom: 0px !important;
}
</style>