gjerp_ui/src/views/dashboard/gjtj.vue

<template>
  <el-container>
    <el-header style="width: 100%; height: 35px;font-size: 12px">
      <el-form :inline="true" label-width="65px" label-position="left">
        <el-row>
          <el-col :span="4">
            <el-form-item label="月份:">
              <el-date-picker v-model="queryParam.beginTime" value-format="yyyy/MM" type="month"/>
            </el-form-item>
          </el-col>
          <el-col :span="20" style="text-align: right">
            <el-button type="success" @click="initList">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-container style="padding-top: 3px">
      <el-main>
        <div class="mytable">
          <vxe-grid
            id="id"
            ref="xGrid"
            border
            resizable
            keep-source
            :align="'center'"
            :height="height"
            :auto-resize="true"
            :columns="tableColumn"
            :data="list"
            :custom-config="{ storage: true }"
            highlight-current-row
            highlight-hover-row
            show-overflow
            :span-method="rowspanMethod"
            :scroll-y="{enabled: true}"
          >
            <template #default="{row,column}">
              <el-progress
                type="line"
                define-back-color="white"
                :show-text="false"
                :stroke-width="15"
                :percentage="row[column.property]"
                :color="row.gx==='计划'?'blue':'green'"
              ></el-progress>
            </template>
          </vxe-grid>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import {mapGetters} from 'vuex'
import XEUtils from 'xe-utils'

export default {
  name: 'Gjtj',
  data() {
    return {
      list: [],
      queryParam: {
        beginTime: '',
      },
      days: [],
      sunDays: [],
      height: '800px',
      tableColumn: [
        {field: 'dcCh', title: '船号', minWidth: "70",},
        {field: 'gx', title: '工序', minWidth: "70",},
      ],
    }
  },
  computed: {
    ...mapGetters(['name', 'bmbm'])
  },
  created() {
    this.queryParam.beginTime = new Date();
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    // this.initTable()
    this.initList()
  },
  methods: {
    initList() {
      this.initTable()
      const list = []
      const gx = ['计划', '技术准备', '上料', '抛丸', '理料', '划线', '切割', '曲面', '坡口', '打磨', '预配盘', '配盘']
      for (const item of gx) {
        const column = {dcCh: 'TK110-4', gx: item}
        this.days.forEach(day => {
          if (!this.sunDays.includes(day)) {
            column[day] = XEUtils.random(0, 100)
          }
        })
        list.push(column)
      }
      this.list = list
    },
    initTable() {
      const date = this.queryParam.beginTime||new Date();
      const days = XEUtils.getDayOfMonth(date);
      const _columns=[
        {field: 'dcCh', title: '船号', minWidth: "70",},
        {field: 'gx', title: '工序', minWidth: "70",},
      ]
      for (let i = 1; i <= days; i++) {
        const _day = XEUtils.getWhatMonth(date, 0, i);
        const day = XEUtils.toDateString(_day, 'yyyy/MM/dd')
        _columns.push({
          field: day, title: day, width: "150",
          slots: {
            // 使用插槽模板渲染
            default: 'default',
          }
          // cellRender: {
          //   name: 'bar',
          //   props: {
          //     bar: {
          //       max: 100
          //     },
          //     colors: ['blue', 'green'],
          //     label: {
          //       formatter: '{value}'
          //     }
          //   }
          // }
        })
        this.days.push(day)
        const _sunday6 = XEUtils.getWhatWeek(day, 0, 6, 0)
        const sunday6 = XEUtils.toDateString(_sunday6, 'yyyy/MM/dd');
        if (!this.sunDays.includes(sunday6)) {
          this.sunDays.push(sunday6)
        }
        const _sunday7 = XEUtils.getWhatWeek(day, 0, 7, 0)
        const sunday7 = XEUtils.toDateString(_sunday7, 'yyyy/MM/dd');
        if (!this.sunDays.includes(sunday7)) {
          this.sunDays.push(sunday7)
        }
      }
      this.tableColumn=_columns
    },
    rowspanMethod({row, _rowIndex, column, visibleData}) {
      let fields = ["dcCh"];
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return {rowspan: 0, colspan: 0};
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1};
          }
        }
      }
    },
    getHeight() {
      this.height = window.innerHeight - 122
    },
  }
}
</script>
<style lang="scss" scoped>

::v-deep .el-progress__text{
  display: none !important;
}

.el-header {
  margin: 0;
  padding: 5px;
  height: auto;

  .el-input {
    width: 140px;
  }

  .el-select {
    width: 140px;
  }

}

.el-container {
  padding: 0;
  margin: 0;
}

.el-main {
  padding: 0;
}

.el-col {
  padding: 0;
  height: 32px;
}

.el-aside {
  background: #fff;
  padding: 0
}

.el-container {
  padding: 0
}

.el-row {
}

.el-row:last-child {
  margin-bottom: 0;
}

.tableStyles {
  background: #0a76a4;
}

.my-dropdown {
  width: 400px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;

}

.mytable1 {

}

.borderClass {

}

.vxe-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}

.el-input {
  display: inline-block !important;
  position: relative !important;
  width: auto;
}

.keyword-lighten {
  color: #000;
  background-color: #FFFF00;
}

.vxe-textarea--inner {
  line-height: inherit;
}

.el-form-item__label-wrap {
  margin-left: 0px !important;
  float: left;
}

.fontClass {
  font-size: 12px;
  font-weight: bold;
}


</style>