tft-fe/src/views/siteMonitoring/productionLineStatus.vue

<template>
  <div>
    <div class="top-box">
      <production-line-diagram></production-line-diagram>
    </div>
    <el-row class="bottom-box" :gutter="10">
      <el-col :span="4" class="area">
        <span class="title">终检单元</span>
        <base-table
          :page="listQuery1.current"
          :limit="listQuery1.size"
          :pageWidth="40"
          :table-props="tableProps1"
          :table-data="tableData1"
          :max-height="tableH"
        />
      </el-col>
      <el-col :span="6" class="area">
        <span class="title">面磨后清洗单元</span>
        <base-table
          :page="listQuery1.current"
          :limit="listQuery1.size"
          :pageWidth="40"
          :table-props="tableProps1"
          :table-data="tableData3"
          :max-height="tableH"
        />
      </el-col>
      <el-col :span="6" class="area">
        <span class="title">面磨单元</span>
        <base-table
          :page="listQuery2.current"
          :limit="listQuery2.size"
          :pageWidth="40"
          :table-props="tableProps2"
          :table-data="tableData4"
          :max-height="tableH"
        />
      </el-col>
      <el-col :span="4" class="area">
        <span class="title">磨边后清洗单元</span>
        <base-table
          :page="listQuery2.current"
          :limit="listQuery2.size"
          :pageWidth="40"
          :table-props="tableProps2"
          :table-data="tableData5"
          :max-height="tableH2"
        />
        <span class="title">边检单元</span>
        <base-table
          :page="listQuery2.current"
          :limit="listQuery2.size"
          :pageWidth="40"
          :table-props="tableProps2"
          :table-data="tableData5"
          :max-height="tableH2"
        />
      </el-col>
      <el-col :span="4" class="area">
        <span class="title">精切磨边单元</span>
        <base-table
          :page="listQuery1.current"
          :limit="listQuery1.size"
          :pageWidth="40"
          :table-props="tableProps2"
          :table-data="tableData6"
          :max-height="tableH"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { tableHeight } from './../../utils'
import ProductionLineDiagram from './components/ProductionLineDiagram.vue'
const tableProps1 = [
  {
    prop: 'name',
    label: '设备名称',
    minWidth: 98
  },
  {
    prop: 'glassID',
    label: '玻璃ID',
    minWidth: 98
  }
]
const tableProps2 = [
  {
    prop: 'name',
    label: '设备名称',
    minWidth: 98
  },
  {
    prop: 'glassID',
    label: '玻璃ID',
    minWidth: 98
  }
]
export default {
  name: 'ProductionLineStatus',
  data() {
    return {
      listQuery1: {
        current: 1,
        size: 10
      },
      listQuery2: {
        current: 1,
        size: 5
      },
      tableH: tableHeight(450),
      tableH2: (tableHeight(238) * 0.708 - 50) / 2,
      tableProps1,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableProps2,
      tableData4: [],
      tableData5: [],
      tableData6: []
    }
  },
  components: { ProductionLineDiagram },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(450)
      this.tableH2 = (tableHeight(238) * 0.708 - 50) / 2
    })
    this.getTableMsg()
  },
  methods: {
    getTableMsg() {
      let arr = []
      for (let i = 0; i < 16; i++) {
        let obj = {}
        obj.id = i
        obj.name = '测试' + i
        arr.push(obj)
      }
      this.tableData1 = arr
      this.tableData2 = arr
      this.tableData3 = arr
      this.tableData4 = arr
      this.tableData5 = arr
      this.tableData6 = arr
    }
  }
}
</script>
<style lang="scss" scoped>
.top-box,
.bottom-box {
  background-color: #fff;
  margin: 8px 16px 0 !important;
  border-radius: 4px;
}
.top-box {
  height: calc((100vh - 90px - 50px - 16px) * 0.292);
}
.bottom-box {
  height: calc((100vh - 90px - 50px - 16px) * 0.708);
  padding: 0 16px 16px;
  .area {
    .title {
      display: inline-block;
      font-size: 14px;
      color: #000000;
      margin: 14px 0;
    }
    .title::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #0b58ff;
      border-radius: 1px;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
}
</style>