icore-pass/src/views/statisticalReport/components/tableItem.vue

<template>
  <div>
    <table v-show="false">
      <tr>
        <td colspan="22">达州钢铁每日船舶动态明细表</td>
      </tr>
    </table>

    <el-table
      :show-summary="isShowSum"
      :data="tableData"
      :height="height"
      style="width: 100%"
      :span-method="objectSpanMethod"
      :border="true"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column
        v-if="isShowBox"
        type="selection"
        width="50"
        align="center"
      >
      </el-table-column>
      <template>
        <column-item
          v-for="item in col"
          :key="item.label"
          :col="item"
        ></column-item>
      </template>
      <template #empty>
        <div class="empty" style="height:12.5rem;">
          <span class="empty-desc">暂无数据</span>
        </div>
      </template>
      <div slot="append" style="width: 100%">
        <!-- 下游港口库存 -->
        <div class="appendSlot" style="margin-top:20px">
          <span class="normalFirst"
            >下游港口库存<span style="color:blue">{{
              this.downStockMap.downStockTonnage
            }}</span
            ><span>吨:</span></span
          >
          <span
            v-for="item in downStockStringArr"
            :class="item.class"
            :key="item.value"
            >{{ item.value }}</span
          >
        </div>
        <el-divider></el-divider>
        <!-- 万港库存 -->
        <div class="appendSlot">
          <span class="normalFirst"
            >万港库存<span style="color:blue">{{
              this.stockMap.stockTonnage
            }}</span
            ><span>吨:</span></span
          >
          <span
            v-for="item in stockStringArr"
            :class="item.class"
            :key="item.value"
            >{{ item.value }}</span
          >
        </div>
        <el-divider></el-divider>
        <!-- 在途库存 -->
        <div class="appendSlot">
          <span class="normalFirst"
            >在途货物<span style="color:blue">{{
              this.runStockMap.runStockTonnage
            }}</span
            ><span>吨(含万港/待卸船舶):</span></span
          >
          <span
            v-for="item in runStockStringArr"
            :class="item.class"
            :key="item.value"
            >{{ item.value }}</span
          >
        </div>
        <el-divider></el-divider>
        <!-- 库存表 -->
        <table v-show="false">
          <tr>
            <td colspan="22">{{ downStockString }}</td>
          </tr>
          <tr>
            <td colspan="22">{{ stockString }}</td>
          </tr>
          <tr>
            <td colspan="22">{{ runStockString }}</td>
          </tr>
          <tr>
            <td colspan="22"></td>
          </tr>
        </table>

        <!-- 万州港装车数据 -->
        <div class="appendSlot">
          <el-table
            ref="loadTable"
            highlight-current-row
            border
            show-summary
            :data="loadTable"
            :span-method="objectSpanMethod1"
            :row-style="{ height: '40px' }"
            style="font-size: 18px"
          >
            <el-table-column label="万州港发货信息">
              <el-table-column
                align="center"
                prop="materialName"
                width="200px"
                label="物资名"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="resultForeignShipName"
                width="200px"
                label="船号"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="num"
                width="200px"
                label="装车量"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="time"
                width="200px"
                label="时间"
              >
              </el-table-column>
              <el-table-column width="200px" label="备注"> </el-table-column>
            </el-table-column>
            <el-table-column label="进口矿水联运情况简报">
              <el-table-column> </el-table-column>
              <el-table-column> </el-table-column>
              <el-table-column> </el-table-column>
              <el-table-column> </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <el-divider></el-divider>
        <!-- 等闸线 -->
        <div class="appendSlot">
          <el-table
            highlight-current-row
            border
            :data="controlLinesTable"
            :row-style="{ height: '40px' }"
            style="font-size: 12px"
          >
            <el-table-column label="控制线等闸船舶动态">
              <!-- 4 -->
              <el-table-column
                align="center"
                prop="lineDate4"
                width="100px"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="up4"
                width="80px"
                label="上行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="down4"
                width="80px"
                label="下行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="count4"
                width="80px"
                label="总计"
              >
              </el-table-column>
              <!-- 3 -->
              <el-table-column
                align="center"
                prop="lineDate3"
                width="100px"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="up3"
                width="80px"
                label="上行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="down3"
                width="80px"
                label="下行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="count3"
                width="80px"
                label="总计"
              >
              </el-table-column>
              <!-- 2 -->
              <el-table-column
                align="center"
                prop="lineDate2"
                width="100px"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="up2"
                width="80px"
                label="上行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="down2"
                width="80px"
                label="下行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="count2"
                width="80px"
                label="总计"
              >
              </el-table-column>
              <!-- 1 -->
              <el-table-column
                align="center"
                prop="lineDate1"
                width="100px"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="up1"
                width="80px"
                label="上行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="down1"
                width="80px"
                label="下行等闸数"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="count1"
                width="80px"
                label="总计"
              >
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-table>
  </div>
</template>
<script>
import ColumnItem from './columnItem'
export default {
  name: 'TableItem',
  components: {
    ColumnItem
  },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 树型结构表头数据
    col: {
      type: Array,
      default: () => []
    },
    // 是否在表格下方显示合计
    isShowSum: {
      type: Boolean,
      default: false
    },
    // 判断单元格文字是居中还是左对齐显示,默认居中
    alignType: {
      type: String,
      default: 'center'
    },
    // 设置表格高度,固定表头
    height: {
      type: String,
      default: null // 默认不固定表头
    },
    // 判断是否显示多选框
    isShowBox: {
      type: Boolean,
      default: false // 默认不展示
    }
  },
  data() {
    return {
      stockString: null,
      downStockString: null,
      runStockString: null,
      stockStringArr: [],
      downStockStringArr: [],
      downStockMap: {},
      stockMap: {},
      runStockMap: {},
      runStockStringArr: [],
      spanArr: [],
      loadTable: [],
      controlLinesTable: []
    }
  },
  mounted() {
    this.getStockString()
    this.getDownStockString()
    this.getRunStockList()
    this.searchLoadData()
    this.getControlLines()
  },
  methods: {
    getStockString() {
      let that = this
      this.axios
        .post(
          '/api/v1/wmsh/getLoadPortStockList?apiId=158&pageSize=1000&pageNum=1'
        )
        .then(res => {
          console.log(res)
          if (res.status == '200') {
            let resultActualInstallations = 0
            res.data.data.list.forEach(e => {
              resultActualInstallations =
                resultActualInstallations + e.gmTonnage
            })
            console.log(res.data.data, '万港')
            this.stockMap.stockTonnage = `${resultActualInstallations.toFixed(
              2
            )}`
            let arr1 = []
            res.data.data.list.forEach(e => {
              let arr = []
              arr = res.data.data.list
                .map(e1 => {
                  if (e1.type == e.type && !arr.includes(e)) {
                    return e1
                  }
                })
                .filter(e2 => {
                  return typeof e2 !== 'undefined'
                })
              if (arr1.length == 0) {
                arr1.push(arr)
              } else {
                if (arr1[arr1.length - 1].sort().toString() != arr.toString()) {
                  arr1.push(arr)
                }
              }
            })
            console.log(arr1, 'arr1')
            let index = 2.1
            arr1.forEach(e => {
              this.stockStringArr.push({
                class: 'type',
                value: `${index.toFixed(1)}${e[0]['type']}${
                  e[0]['typeTotalTonnage']
                }吨:`
              })
              index = index + 0.1
              e.forEach(e1 => {
                this.stockStringArr.push({
                  class: 'normal',
                  value: `${e1['materialName']}/“${e1['resultForeignShipName']}”/${e1['gmTonnage']}吨;`
                })
              })
            })
            //处理打印字符串
            this.stockString='万港库存：'+this.stockMap.stockTonnage+"吨：";
            this.stockStringArr.forEach((item)=>{
              this.stockString+=item.value;
            });
          }
        })
    },
    getDownStockString() {
      let that = this
      this.axios.post('/api/v1/wmsh/getDownPortStockList').then(res => {
        console.log('下游港口吨位')
        console.log(res.data.data)
        if (res.status == '200') {
          console.log(res.data.data)
          let resultActualInstallations = 0
          res.data.data.forEach(e => {
            resultActualInstallations = resultActualInstallations + e.gmTonnage
          })
          this.downStockMap.downStockTonnage = `${resultActualInstallations.toFixed(
            2
          )}`
          let arr1 = []
          res.data.data.forEach(e => {
            let arr = []
            arr = res.data.data
              .map(e1 => {
                if (e1.type == e.type && !arr.includes(e)) {
                  return e1
                }
              })
              .filter(e2 => {
                return typeof e2 !== 'undefined'
              })
            if (arr1.length == 0) {
              arr1.push(arr)
            } else {
              if (arr1[arr1.length - 1].sort().toString() != arr.toString()) {
                arr1.push(arr)
              }
            }
          })
          console.log(arr1, 'arr1')
          let index = 1.1
          arr1.forEach(e => {
            this.downStockStringArr.push({
              class: 'type',
              value: `${index.toFixed(1)}${e[0]['type']}${
                e[0]['typeTotalTonnage']
              }吨:`
            })
            index = index + 0.1
            e.forEach(e1 => {
              this.downStockStringArr.push({
                class: 'normal',
                value: `${e1['portName']}/${e1['materialName']}/“${e1['resultForeignShipName']}”/${e1['gmTonnage']}吨;`
              })
            })
          })
          //处理打印字符串
          this.downStockString='下游港口库存：'+this.downStockMap.downStockTonnage+"吨：";
          this.downStockStringArr.forEach((item)=>{
            this.downStockString+=item.value;
          });
        }
      })
    },
    getRunStockList() {
      let that = this
      this.axios.post('/api/v1/wmsh/getRunStockList').then(res => {
        console.log(res)
        if (res.status == '200') {
          let resultActualInstallations = 0
          res.data.data.forEach(e => {
            resultActualInstallations = resultActualInstallations + e.gmTonnage
          })
          this.runStockMap.runStockTonnage = `${resultActualInstallations.toFixed(
            2
          )}`
          let arr1 = []
          res.data.data.forEach(e => {
            let arr = []
            arr = res.data.data
              .map(e1 => {
                if (e1.type == e.type && !arr.includes(e)) {
                  return e1
                }
              })
              .filter(e2 => {
                return typeof e2 !== 'undefined'
              })
            if (arr1.length == 0) {
              arr1.push(arr)
            } else {
              if (arr1[arr1.length - 1].sort().toString() != arr.toString()) {
                arr1.push(arr)
              }
            }
          })
          console.log(arr1, 'arr1')
          let index = 1.1
          arr1.forEach(e => {
            this.runStockStringArr.push({
              class: 'type',
              value: `${index.toFixed(1)}${e[0]['type']}${
                e[0]['typeTotalTonnage']
              }吨:`
            })
            index = index + 0.1
            e.forEach(e1 => {
              this.runStockStringArr.push({
                class: 'normal',
                value: `${e1['materialName']}:${e1['gmTonnage']}吨;`
              })
            })
          })
          //处理打印字符串
          this.runStockString='在途货物：'+this.runStockMap.runStockTonnage+"吨：";
          this.runStockStringArr.forEach((item)=>{
            this.runStockString+=item.value;
          });
        }
      })
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      let columnIndexList1 = [5]
      let columnIndexList2 = [6]
      let columnIndexList3 = [7]
      let columnIndexList4 = [8]
      if (columnIndexList1.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return 'color:#fff;cursor: pointer;background-color:red !important'
      }
      if (columnIndexList2.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return 'color:#fff;cursor: pointer;background-color:green !important'
      }
      if (columnIndexList3.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return 'color:#fff;cursor: pointer;background-color:blue !important'
      }
      if (columnIndexList4.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return 'color:#000;cursor: pointer;background-color:yellow !important '
      }
    },
    flitterData(arr) {
      var spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          // name 修改
          if (item.batchInfacoryId === arr[index - 1].batchInfacoryId) {
            // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.flitterData(this.tableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 1) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 4) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 2) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 3) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (row.type === 1) {
        return {
          rowspan: 1,
          colspan: 17
        }
      }
    },
    //查询装车数据
    searchLoadData() {
      let map = {}
      this.axios.post('/api/v1/tms/getLoadData', map).then(res => {
        if (res.data.code == '200') {
          this.getSpanArr(res.data.data)
          this.loadTable = res.data.data
          this.count = 0
          this.loadTable.forEach(item => {
            this.count += item.num
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.data
          })
        }
      })
    },
    //处理数据,得到合并数组
    getSpanArr(data) {
      this.spanArr = []
      for (let i = 0; i < data.length; i++) {
        if (i == 0) {
          this.spanArr.push(1)
          this.spanIndex = 0
        } else {
          // 判断当前行与前一行内容是否相同
          if (data[i].materialName == data[i - 1].materialName) {
            this.spanArr[this.spanIndex] += 1 // 相同的话，当前下标所代表的值加一，例如：第一列的前三行可合并
            this.spanArr.push(0) // 记录完毕后，再往数组里添加一个元素0，作为下一次合并的初始值
          } else {
            this.spanArr.push(1) // 否则，依旧是一行
            this.spanIndex = i
          }
        }
      }
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex] // 行数
        const _col = _row > 0 ? 1 : 0 // 列数
        return {
          rowspan: _row,
          colspan: _col
        }
      } else if (rowIndex === 0 && columnIndex === 3) {
        return {
          rowspan: this.loadTable.length,
          colspan: 1
        }
      }
    },
    //查询控制线数据
    getControlLines() {
      let map = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1
      }
      this.axios.post('/api/v1/tms/getControlLinesTable', map).then(res => {
        if (res.data.code == '200') {
          this.controlLinesTable = res.data.data
        } else {
          this.$message({
            type: 'error',
            message: res.data.data
          })
        }
      })
    }
  }
}
</script>
<style>
/* 处理表格表头和内容错位问题 */
.el-table th.gutter {
  display: table-cell !important;
}
.el-table th,
.el-table td {
  padding: 0.4375rem 0 !important;
}
</style>
<style lang="scss" scoped>
.el-table {
  .appendSlot {
    margin-left: 5%;
    font-size: 18px;
    line-height: 20px;
    .normalFirst {
      margin-left: 42px;
    }
    .normal {
      margin-left: 20px;
      font-weight: 500;
    }
    .type {
      margin-left: 20px;
      color: red;
      font-weight: 600;
      margin-right: 10px;
    }
    // display: flex;
    // // align-items: center;
    // // justify-content: center;
    .black {
      font-weight: 700;
    }
  }
}
</style>