11-mes-new/src/views/FactoryManage/RealtimeDataOfOrder.vue

<!--
 * @Author: lb
 * @Date: 2022-06-22 14:00:17
 * @LastEditors: lb
 * @LastEditTime: 2022-06-22 14:00:17
 * @Description: 订单生产实时数据
-->
<template>
  <div class="app-container" style="padding: 24px;">
    <small-title v-if="dataList.length <= 0">
      {{ $t('module.factory.realtime.order.pageName') }}
    </small-title>

    <el-row
      v-for="(order, index) in dataList"
      v-else
      :key="index"
      style="margin: 0; padding-bottom: 64px;"
      class="horizontal-table"
    >
      <el-row>
        <el-col :key="index + '--el-col'">
          <!-- title  -->
          <div class="prefixed-title">
            <ul class="title-list">
              <li>
                {{ $t('module.factory.realtime.order.name') }}:
                <span class="title-value">{{ order.orderName }}</span>
              </li>
              <li>
                {{ $t('module.factory.realtime.order.pName') }}:
                <span class="title-value">{{ order.productName }}</span>
              </li>
              <li>
                {{ $t('module.factory.realtime.order.pSpecs') }}:
                <span class="title-value">{{ order.productSize }}</span>
              </li>
              <li>
                {{ $t('module.factory.realtime.order.pLine') }}:
                <span class="title-value">{{ order.productionLine }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <!-- table  -->
          <!-- style="background: #f0f0f0; margin-top: 8px; padding-top: 8px; display: inline-block; max-width: 100%; border-left: 1px solid #e6ebf5;" -->
          <base-table
            :key="`${index}-basetable`"
            style="display: inline-block; max-width: 100%;"
            :show-header="false"
            :border="true"
            :table-config="order.dynamicProps ? order.dynamicProps : [{ label: '', prop: '' }]"
            :table-data="order.dynamicData ? order.dynamicData : []"
          />
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
// import i18n from '@/lang'
import BaseTable from '@/components/BaseTable'
import fetchList from '@/api/factory-manage/realtimeData'
import moment from 'moment'
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
export default {
  name: 'RealtimeOrder',
  components: { BaseTable, SmallTitle },
  data() {
    return {
      loopHelper: null,
      dataList: [],
      listLoading: true
    }
  },
  created() {
    this.getList()

    this.loopHelper = setInterval(() => {
      this.getList()
    }, 1000 * 60 * 5) // 5 mins
  },
  beforeDestroy() {
    if (this.loopHelper) {
      clearInterval(this.loopHelper)
    }
  },
  methods: {
    // 创造公用组件所必须的props
    createTableProps(length) {
      const modalProp = { prop: 'fakeProp', label: 'fake-label-' }
      const fakeProps = []
      fakeProps.push({
        prop: 'headerProp',
        label: 'header-label',
        isFixed: true,
        width: 160
      })
      for (let i = 0; i < length; i++) {
        fakeProps.push({ prop: modalProp.prop + i, label: modalProp.label + i, width: 160 })
      }
      return fakeProps
    },
    // 对服务器传来的数据进行处理
    modifyData(detArray) {
      const row1 = {}
      const row2 = {}
      const row3 = {}
      const row4 = {}
      const row5 = {}

      Object.defineProperty(row1, 'headerProp', { value: '内容', enumerable: true, writable: true })
      Object.defineProperty(row2, 'headerProp', { value: '上片数量', enumerable: true, writable: true })
      Object.defineProperty(row3, 'headerProp', { value: '下片数量', enumerable: true, writable: true })
      Object.defineProperty(row4, 'headerProp', { value: '报废数量', enumerable: true, writable: true })
      Object.defineProperty(row5, 'headerProp', { value: '合格率', enumerable: true, writable: true })

      detArray.forEach((o, i) => {
        Object.defineProperty(row1, `fakeProp${i}`, {
          value: moment(o.recordTime).format('YYYY-MM-DD HH:mm:ss'),
          enumerable: true,
          writable: true
        })
        Object.defineProperty(row2, `fakeProp${i}`, { value: o.inputNum, enumerable: true, writable: true })
        Object.defineProperty(row3, `fakeProp${i}`, { value: o.outputNum, enumerable: true, writable: true })
        Object.defineProperty(row4, `fakeProp${i}`, { value: o.scrapNum, enumerable: true, writable: true })

        const passRate = o.passRate ?? '-'
        Object.defineProperty(row5, `fakeProp${i}`, {
          value: passRate === '-' ? '-' : passRate + '%',
          enumerable: true,
          writable: true
        })
      })

      return [row1, row2, row3, row4, row5]
    },

    getList() {
      // this.listLoading = true

      fetchList('order').then(response => {
        if (response.data) {
          this.dataList = response.data
          this.dataList.push({
            orderName: '22订单',
            productName: 'xxx光伏玻璃2.0B',
            productSize: '2*1128*2272',
            productionLine: 'C线 D线 A线',
            det: Array(3).fill({
              inputNum: '-259730',
              outputNum: '-772443',
              passRate: 100,
              recordTime: '2022-09-06T14:00:00',
              scrapNum: '0',
              sumInputNum: '259730',
              sumOutputNum: '772443'
            })
          })
          this.transformData()
        } else {
          this.dataList.splice(0)
          this.$message({
            message: '没有查询到相关数据!',
            type: 'error',
            duration: 2000
          })
        }
      })
    },

    transformData() {
      this.dataList.forEach((o, i) => {
        o.dynamicProps = this.createTableProps(o.det.length)
        o.dynamicData = this.modifyData(o.det)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.prefixed-title {
  width: 100%;
  font-size: 16px;
  line-height: 1;
  // font-weight: 700;
  color: #777;
  position: relative;
  margin-left: 16px;
  margin-bottom: 8px;
}

.prefixed-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: -16px;
  display: inline-block;
  width: 4px;
  height: 100%;
  background-color: #0b58ff;
  border-radius: 2px;
}

ul.title-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

  li {
    // flex: 1 1;
    margin-right: 88px;
    padding: 2px 0;
    color: rgba($color: #000000, $alpha: 0.65);
    font-weight: bold;

    span {
      font-weight: unset;
      // color: #000;
      color: rgba($color: #666, $alpha: 0.75);
      font-weight: 400;
      font-size: 1rem;
    }
  }
}
// [class^=el-table_1_column_]
.horizontal-table >>> tr.el-table__row:first-child {
  background-color: #fafafa;
  color: #000;
}
</style>