CostumingPlatform/ant-design-vue-jeecg/src/views/wuliugldg/diaogua.vue

<template>
  <div>
    <a-modal
      title="详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width='1500'
      @ok="handleOk"
      @cancel="handleCancel"
      style="display:flex;"
    >
  <div class="diaogua">
    <div class="top">
      <h1>黄淮服装智能制造实训平台人机排位图</h1><span class="number">编号：{{number}}</span>
      <div class="d-flex">
        <p class="group">组别:{{group}}</p>
      </div>
    </div>
    <div class="main">
      <el-descriptions border :column='4'>
        <el-descriptions-item label="日期 ">{{data.date}}</el-descriptions-item>
        <el-descriptions-item label="出库地点 ">{{data.retrievalLocation}}</el-descriptions-item>
        <el-descriptions-item label="接收人 ">{{data.receiver}}</el-descriptions-item>
        <el-descriptions-item label="运送人 ">{{data.carrier}}</el-descriptions-item>
        <el-descriptions-item label="订单号 ">{{data.orderCode}}</el-descriptions-item>
        <el-descriptions-item label="工单号">{{data.workOrderCode}}</el-descriptions-item>
        <el-descriptions-item label="物品编号 ">{{data.serialNumber}}</el-descriptions-item>
        <el-descriptions-item label="物品名称">{{data.itemName}}</el-descriptions-item>
      </el-descriptions>
      <table border="1" cellspacing="0" class="table" >
        <!-- 表头 -->
        <tr>
          <th>站位</th>
          <th>车间物流</th>
          <th>站位</th>
        </tr>
        <tr>
          <td style="width: 20%;">
            <ul class="one">
              <li style="height:33px;"></li>
              <li v-for="(num1,index) in list1" :key="index" ref="listnum1">{{num1}}</li>
            </ul>
          </td>
          <td rowspan="16" class="two" style="width: 60%;">
            <div>
              <img src="@/assets/row1.jpg" alt="" class="img1">
              <img src="@/assets/row2.jpg" alt="" class="img2">
            </div>
          </td>
          <td style="width: 20%;">
            <ul class="three">
              <li v-for="(num2,index) in list2" :key="index" ref="listnum2">{{num2}}</li>
              <li style="height:33px;"></li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>成品框</td>
          <td>操作台</td>
        </tr>
      </table>
    </div>
  </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'diaogua',
    components: {
    },
    data(){
      return{
        ModalText: 'Content of the modal',
        selectId:'2',
        data:{},
        headStyle:{
          height:'10px'
        },
        visible: false,
        confirmLoading: false,
        // 编号
        number:'SRS-05',
        // 组别
        group:2,
        list1:[16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,],
        list2:[15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,],
        tableData1: [
          {date: '16'},
          {date: '17'},
          {date: '18'},
          {date: '19'},
          {date: '20'},
          {date: '21'},
          {date: '22'},
          {date: '23'},
          {date: '24'},
          {date: '25'},
          {date: '26'},
          {date: '27'},
          {date: '28'},
          {date: '29'},
          {date: '30'},
        ],
        tableData2: [
          {date: '15'},
          {date: '14'},
          {date: '13'},
          {date: '12'},
          {date: '11'},
          {date: '10'},
          {date: '9'},
          {date: '8'},
          {date: '7'},
          {date: '6'},
          {date: '5'},
          {date: '4'},
          {date: '3'},
          {date: '2'},
          {date: '1'},
        ]
      }
    },
    methods: {
      showModal(id) {
        // console.log(this.selectId)
        this.visible = true;
        this.$http.get('/logisticsplanning/logisticsPlanning/selectById?id='+id).then(
          res=>{
            this.data = res.result;
            console.log(this.data);
            this.initStyle();
          }
        )
      },
      handleOk(e) {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        console.log(this.data);
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 1);
      },
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
      initStyle(){
/*        this.$refs.listnum1[0].style.backgroundColor="#f5222d";
        this.$refs.listnum1[1].style.backgroundColor="#f5222d";
        this.$refs.listnum1[2].style.backgroundColor="#f5222d";
        this.$refs.listnum1[3].style.backgroundColor="#f5222d";
        this.$refs.listnum1[4].style.backgroundColor="#f5222d";
        this.$refs.listnum1[5].style.backgroundColor="#f5222d";
        this.$refs.listnum1[6].style.backgroundColor="#f5222d";
        this.$refs.listnum1[7].style.backgroundColor="#f5222d";
        this.$refs.listnum1[8].style.backgroundColor="#f5222d";*/
        this.$refs.listnum1[9].style.backgroundColor="#f5222d";
/*        this.$refs.listnum1[10].style.backgroundColor="#f5222d";*/
        this.$refs.listnum1[11].style.backgroundColor="#f5222d";
/*        this.$refs.listnum1[12].style.backgroundColor="#f5222d";
        this.$refs.listnum1[13].style.backgroundColor="#f5222d";
        this.$refs.listnum1[14].style.backgroundColor="#f5222d";*/

/*        this.$refs.listnum2[0].style.backgroundColor="#f5222d";
        this.$refs.listnum2[1].style.backgroundColor="#f5222d";*/
        this.$refs.listnum2[2].style.backgroundColor="#f5222d";
/*        this.$refs.listnum2[3].style.backgroundColor="#f5222d";
        this.$refs.listnum2[4].style.backgroundColor="#f5222d";
        this.$refs.listnum2[5].style.backgroundColor="#f5222d";
        this.$refs.listnum2[6].style.backgroundColor="#f5222d";
        this.$refs.listnum2[7].style.backgroundColor="#f5222d";
        this.$refs.listnum2[8].style.backgroundColor="#f5222d";
        this.$refs.listnum2[9].style.backgroundColor="#f5222d";
        this.$refs.listnum2[10].style.backgroundColor="#f5222d";
        this.$refs.listnum2[11].style.backgroundColor="#f5222d";
        this.$refs.listnum2[12].style.backgroundColor="#f5222d";*/
        this.$refs.listnum2[13].style.backgroundColor="#f5222d";
/*        this.$refs.listnum2[14].style.backgroundColor="#f5222d";*/
      }
    }

  }
</script>

<style scoped>
  *{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  html{font-size: 62.5%;}
  .d-flex{display: flex;justify-content: space-between;}
  .diaogua{width: 100%;margin: 0 auto;background-color: #fff;}
  .top{width: 100%;height: 10rem;position: relative;}
  .top h1{width: 100%;height: 6rem;line-height: 6rem;text-align: center;}
  .top .number{position: absolute;right: 2rem;top: 3rem;}
  .top>div{width: 100%;height:4rem;}
  .top .group{text-align: right;width: 100%;margin-right: 2rem;}
  .main .table{border-color:'#EBEEF5';width: 16%;margin: 0 auto;}
  .table tr th, .table tr td { border-color:#EBEEF5;text-align: center; }
  .main .table tr{width: 100%!important;}

  .main .table tr .two>div{width:90%;margin: 0 auto;height: 35rem;border: 1rem solid #002060;border-radius:7rem;display: flex;justify-content: space-between;align-items: center;}
  .main .table tr .two>div img{width: 32.5px;height: 165px;}
  .main  ul li{width: 100%;height: 6.25%;border: 0.1rem solid #000;border-bottom: none;box-sizing: border-box;background-color: #FFCC99;font-size: 1.4rem;font-weight: bold;}
  .main  ul li:last-child{border-bottom:0.1rem solid #000;}

</style>