<template>
  <div>
    <div id="loadingDocuments" class="loading-Documents">
      <el-row style="border: 1px solid #000000;background: #d9d9d9;-webkit-print-color-adjust: exact;">
        <div>
          <div class="title">
            <div class="logo"/>
            <div class="title-text">CAIT-SH 充电宝车间生产日报</div>
            <div class="border-div title-right-div"> &nbsp;&nbsp;{{ date }}</div>
          </div>
        </div>
      </el-row>
      <div class="border-div">【安全领域】</div>
      <div class="border-div">
        <div style="width: 140px;text-align: center;font-size: 20px;line-height: 160px;font-weight: bold">安全绿十字
        </div>
        <div style="width: 1160px"/>
        <div class="accident-list">
          <div class="item">
            <div class="color" style="background-color: #00b050"/>
            无事故
          </div>
          <div class="item">
            <div class="color" style="background-color: #5b9bd5"/>
            微伤事故
          </div>
          <div class="item">
            <div class="color" style="background-color: #ffc000"/>
            轻伤事故
          </div>
          <div class="item">
            <div class="color" style="background-color: #ff0000"/>
            重伤事故
          </div>
        </div>
        <div class="greenSpot">●</div>
      </div>
      <div class="border-div">【各工艺段生产实绩】</div>
      <div class="border-div blue-bgc">
        <div style="width: 140px"/>
        <div style="width: 140px"/>
        <div style="width: 440px">日实绩</div>
        <div style="width: 440px">月累计</div>
        <div style="width: 440px">计划完成量</div>
      </div>
      <div>
        <el-table
          v-loading="loadingDocumentsLoading"
          ref="table"
          :data="tableData1"
          :span-method="complexSpanMethod1"
          :cell-style="{borderColor:'#bdd7ee'}"
          :header-cell-style="{borderColor: '#bdd7ee'}"
          class="loading-Documents-table"
          size="mini"
          style="width: 1600px"
          border>
          <el-table-column align="center" label="项目" width="140px">
            <template slot-scope="scope">
              {{ scope.row.项目 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="工段" width="140px">
            <template slot-scope="scope">
              {{ scope.row.工段 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="日计划" width="150px">
            <template slot-scope="scope">
              {{ scope.row.日计划 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="日交付" width="148px">
            <template slot-scope="scope">
              {{ scope.row.日交付 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="日差异" width="140px">
            <template slot-scope="scope">
              {{ scope.row.日差异 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="月计划" width="150px">
            <template slot-scope="scope">
              {{ scope.row.月计划 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="月交付" width="150px">
            <template slot-scope="scope">
              {{ scope.row.月交付 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="月差异" width="140px">
            <template slot-scope="scope">
              {{ scope.row.月差异 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划" width="140px">
            <template slot-scope="scope">
              {{ scope.row.计划 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="实绩" width="140px">
            <template slot-scope="scope">
              {{ scope.row.实绩 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划完成率(%)" width="159px">
            <template slot-scope="scope">
              {{ scope.row.计划完成率 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="border-div">【各工艺段在制】</div>
      <div class="border-div blue-bgc">
        <div style="width: 140px"/>
        <div style="width: 290px">模组</div>
        <div style="width: 288px">总装</div>
        <div style="width: 300px">检测</div>
        <div style="width: 140px"/>
        <div style="width: 140px"/>
        <div style="width: 140px"/>
        <div style="width: 159px"/>
      </div>
      <div>
        <el-table
          v-loading="loadingDocumentsLoading"
          ref="table"
          :data="tableData2"
          :cell-style="{borderColor:'#bdd7ee'}"
          :header-cell-style="{borderColor: '#bdd7ee'}"
          class="loading-Documents-table"
          size="mini"
          style="width: 1600px"
          border>
          <el-table-column align="center" label="生产区域" width="140px">
            <template slot-scope="scope">
              {{ scope.row.生产区域 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="模组" width="140px">
            <template slot-scope="scope">
              {{ scope.row.模组 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="模组下线" width="150px">
            <template slot-scope="scope">
              {{ scope.row.模组下线 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="总装" width="148px">
            <template slot-scope="scope">
              {{ scope.row.总装 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="总装下线" width="140px">
            <template slot-scope="scope">
              {{ scope.row.总装下线 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="检测" width="150px">
            <template slot-scope="scope">
              {{ scope.row.检测 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="检测下线" width="150px">
            <template slot-scope="scope">
              {{ scope.row.检测下线 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="" width="140px">
            <template slot-scope="scope"/>
          </el-table-column>
          <el-table-column align="center" label="" width="140px">
            <template slot-scope="scope"/>
          </el-table-column>
          <el-table-column align="center" label="" width="140px">
            <template slot-scope="scope"/>
          </el-table-column>
          <el-table-column align="center" label="" width="159px">
            <template slot-scope="scope"/>
          </el-table-column>
        </el-table>
      </div>
      <div class="border-div">【明日计划】</div>
      <div class="border-div blue-bgc">
        <div style="width: 140px">工段</div>
        <div style="width: 438px">模组</div>
        <div style="width: 440px">总装</div>
        <div style="width: 420px">检测</div>
        <div style="width: 159px"/>
      </div>
      <div>
        <el-table
          v-loading="loadingDocumentsLoading"
          ref="table"
          :data="tableData3"
          :span-method="complexSpanMethod3"
          :cell-style="{borderColor:'#bdd7ee'}"
          :header-cell-style="{borderColor: '#bdd7ee'}"
          class="loading-Documents-table"
          size="mini"
          style="width: 1600px"
          border>
          <el-table-column align="center" label="工段" width="140px">
            <template slot-scope="scope">
              {{ scope.row.工段 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品编码" width="140px">
            <template slot-scope="scope">
              {{ scope.row.模组产品编码 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" width="150px">
            <template slot-scope="scope">
              {{ scope.row.模组数量 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="148px">
            <template slot-scope="scope">
              {{ scope.row.模组状态 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品编码" width="140px">
            <template slot-scope="scope">
              {{ scope.row.总装产品编码 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" width="150px">
            <template slot-scope="scope">
              {{ scope.row.总装数量 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="150px">
            <template slot-scope="scope">
              {{ scope.row.总装状态 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品编码" width="140px">
            <template slot-scope="scope">
              {{ scope.row.检测产品编码 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" width="140px">
            <template slot-scope="scope">
              {{ scope.row.检测数量 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="140px">
            <template slot-scope="scope">
              {{ scope.row.检测状态 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="" width="159px">
            <template slot-scope="scope"/>
          </el-table-column>
        </el-table>
      </div>
      <div class="border-div">【当日主要生产异常】</div>
      <div>
        <el-table
          v-loading="loadingDocumentsLoading"
          ref="table"
          :data="tableData4"
          :cell-style="{backgroundColor:'#ffff00'}"
          :header-cell-style="{borderColor: '#bdd7ee'}"
          class="loading-Documents-table"
          size="mini"
          style="width: 1600px"
          border>
          <el-table-column align="center" label="停线工段" width="140px">
            <template slot-scope="scope">
              {{ scope.row.停线工段 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="停线工位" width="140px">
            <template slot-scope="scope">
              {{ scope.row.停线工位 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="停线类型" width="150px">
            <template slot-scope="scope">
              {{ scope.row.停线类型 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="日期" width="148px">
            <template slot-scope="scope">
              {{ scope.row.日期 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="停线开始" width="140px">
            <template slot-scope="scope">
              {{ scope.row.停线开始 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="停线结束" width="150px">
            <template slot-scope="scope">
              {{ scope.row.停线结束 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="停线内容" width="150px">
            <template slot-scope="scope">
              {{ scope.row.停线内容 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="责任单位" width="140px">
            <template slot-scope="scope">
              {{ scope.row.责任单位 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="停线时长/min" width="140px">
            <template slot-scope="scope">
              {{ scope.row.停线时长 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否返工" width="140px">
            <template slot-scope="scope">
              {{ scope.row.是否返工 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品编码" width="159px">
            <template slot-scope="scope">
              {{ scope.row.产品编码 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'LoadingDocuments',
  directives: {
    print
  },
  data() {
    return {
      date: '2024/10/25',
      loadingDocumentsLoading: false,
      tableData1: [

        {
          项目: '充电宝',
          工段: '模组',
          日计划: '50',
          日交付: '20',
          日差异: '30',
          月计划: '2000',
          月交付: '800',
          月差异: '600',
          计划: '300',
          实绩: '280',
          计划完成率: '92'
        },
        {
          项目: '充电宝',
          工段: '模组',
          日计划: '50',
          日交付: '20',
          日差异: '30',
          月计划: '2000',
          月交付: '800',
          月差异: '600',
          计划: '300',
          实绩: '280',
          计划完成率: '92'
        },
        {
          项目: '充电宝',
          工段: '模组',
          日计划: '50',
          日交付: '20',
          日差异: '30',
          月计划: '2000',
          月交付: '800',
          月差异: '600',
          计划: '300',
          实绩: '280',
          计划完成率: '92'
        }
      ],
      tableData2: [
        {
          生产区域: '在制基准',
          模组: 'DEST010',
          模组下线: '234',
          总装: '234',
          总装下线: '234',
          检测: '234',
          检测下线: '234'
        }, {
          生产区域: '在制基准',
          模组: 'DEST010',
          模组下线: '234',
          总装: '234',
          总装下线: '234',
          检测: '234',
          检测下线: '234'
        }, {
          生产区域: '在制基准',
          模组: 'DEST010',
          模组下线: '234',
          总装: '234',
          总装下线: '234',
          检测: '234',
          检测下线: '234'
        }
      ],
      tableData3: [

        {
          工段: '计划',
          模组产品编码: 'TLE20240912001',
          模组数量: '23',
          模组状态: '进行中',
          总装产品编码: '213',
          总装数量: '234',
          总装状态: '未开始',
          '检测产品编码': '234',
          检测数量: '234',
          检测状态: '已完成'
        },
        {
          工段: '计划',
          模组产品编码: 'TLE20240912001',
          模组数量: '23',
          模组状态: '进行中',
          总装产品编码: '213',
          总装数量: '234',
          总装状态: '未开始',
          '检测产品编码': '234',
          检测数量: '234',
          检测状态: '已完成'
        },
        {
          工段: '计划',
          模组产品编码: 'TLE20240912001',
          模组数量: '23',
          模组状态: '进行中',
          总装产品编码: '213',
          总装数量: '234',
          总装状态: '未开始',
          '检测产品编码': '234',
          检测数量: '234',
          检测状态: '已完成'
        }
      ],
      tableData4: [
        {
          停线工段: 'T01',
          停线工位: 'OP010',
          停线类型: '物流停机',
          日期: '2024-09-11',
          停线开始: '12:23:42',
          停线结束: '13:26:42',
          停线内容: '物料未达',
          责任单位: '物流',
          停线时长: '3',
          是否返工: '是',
          产品编码: 'Test001'
        }, {
          停线工段: 'T01',
          停线工位: 'OP010',
          停线类型: '物流停机',
          日期: '2024-09-11',
          停线开始: '12:23:42',
          停线结束: '13:26:42',
          停线内容: '物料未达',
          责任单位: '物流',
          停线时长: '3',
          是否返工: '是',
          产品编码: 'Test001'
        }, {
          停线工段: 'T01',
          停线工位: 'OP010',
          停线类型: '物流停机',
          日期: '2024-09-11',
          停线开始: '12:23:42',
          停线结束: '13:26:42',
          停线内容: '物料未达',
          责任单位: '物流',
          停线时长: '3',
          是否返工: '是',
          产品编码: 'Test001'
        }, {
          停线工段: 'T01',
          停线工位: 'OP010',
          停线类型: '物流停机',
          日期: '2024-09-11',
          停线开始: '12:23:42',
          停线结束: '13:26:42',
          停线内容: '物料未达',
          责任单位: '物流',
          停线时长: '3',
          是否返工: '是',
          产品编码: 'Test001'
        }
      ]
    }
  },
  mounted() {
    // this.getLoadingDocuments()
  },
  methods: {
    complexSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || row.项目 !== this.tableData1[rowIndex - 1].项目) {
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.tableData1.length; i++) {
            if (this.tableData1[i].项目 === row.项目) {
              rowspan++
            } else {
              break
            }
          }
          return {
            rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    complexSpanMethod3({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || row.项目 !== this.tableData3[rowIndex - 1].项目) {
          let rowspan = 1
          for (let i = rowIndex + 1; i < this.tableData3.length; i++) {
            if (this.tableData3[i].项目 === row.项目) {
              rowspan++
            } else {
              break
            }
          }
          return {
            rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 根据条件设置背景颜色
      if (columnIndex === '5' && row.判定 === 'OK') {
        return 'background-color: #92d050;-webkit-print-color-adjust: exact;'
      }
      return ''
    },
    getLoadingDocuments() {
      this.loadingDocumentsTableData = [
        { 类别: 'TL10安规测试', 测试方法: '设备判定', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试22', 测试方法: '设备判定', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试333', 测试方法: '设备判定', 检测要求: '测试PASS', 工具设备: '测试设备33', 判定: 'OK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'NOK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定22', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定22', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定22', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定22', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定22', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' },
        { 类别: 'TL10安规测试', 测试方法: '设备判定22', 检测要求: '测试PASS', 工具设备: '测试设备', 判定: 'OK' }
      ]
      // const param = []
      // const Data = this.CreateData('11', 'CATL_基础_装车单检查内容_查询', param)
      // this.ExecDatabase(Data).then(response => {
      //   if (response.data.length > 0) {
      //     this.loadingDocumentsTableData = response.data
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="scss">

.loading-Documents {
  width: 1600px;
  border: 1px solid #00893d;

  ::v-deep .el-input__inner {
    border: none !important;
    border-radius: 0px;
    border-bottom: 1px solid #bdd7ee !important
  }

  .loading-Documents-table {
    border: 1px solid #000;
  }

  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
  }

  ::v-deep .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
  }

}

::v-deep .el-table {
  margin: 0;
}

::v-deep .el-table tr {
  height: 20px !important;
}

::v-deep .el-table th {
  height: 10px !important;
}

::v-deep .el-table th.el-table__cell {
  background-color: #bdd7ee !important;
  color: #000;
  height: 10px !important;
  -webkit-print-color-adjust: exact;
}

#loadingDocuments {
  background-color: #fff;

  .title {
    text-align: center;
    position: relative;
    height: 80px;
    line-height: 80px;

    .logo {
      width: 220px;
      height: 50px;
      top: 15px;
      left: 20px;
      background: url("../../../../static/leftPic.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
    }

    .title-text {
      width: 1600px;
      font-size: 30px;
      font-weight: 700;
    }

    .title-right-div {
      position: absolute;
      right: 0;
      top: 0;
      width: 160px;
      color: rgba(24, 28, 147, 1);
      font-weight: 700;
      font-size: 24px;
      text-align: center;
    }
  }

  .border-div {
    border: 1px solid #000;
    display: flex;

    > div {
      border: 1px solid #000;
      text-align: center;
    }
  }

  .blue-bgc {
    background-color: #bdd7ee;
  }

  .accident-list {
    height: 160px;
    width: 140px;
    padding-top: 30px;

    .item {
      display: flex;
      margin: 5px 0;

      .color {
        width: 40px;
        height: 15px;
        border: 1px solid #000;
        margin: 3px 10px;
      }
    }
  }

  .greenSpot {
    font-size: 30px;
    text-align: center;
    line-height: 160px;
    width: 160px;
    float: right;
    color: #00b050;
  }

  ::v-deep .el-table tr td {
    page-break-inside: avoid; /* 避免在单元格内分页 */
  }
}
</style>

