snInfo.vue 7.15 KB
<template>
  <a-card>
    <div class="content">
      <div class="logo">
        <div>
          <img style="width: 100%;height:100%" src="../assets/huaheng.png" alt=""/>
        </div>
      </div>
      <div class="top">
        <div class="top-d">
          <div class="top-d-w">
            <label class="lab-left"
                   style="font-weight: 800;
                         margin-left: -1.4vw;
                         font-size: 4vw;">货叉信息</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">项目名称:</label>
            <label> </label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">工作令:</label>
            <label> </label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">设备类型:</label>
            <label></label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">生产工厂:</label>
            <label></label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">SN:</label>
            <label></label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">项目编号:</label>
            <label></label>
          </div>
        </div>
      </div>
      <div class="header">
        <div class="top-d">
          <div class="top-d-w">
            <label class="lab-left"
                   style="font-weight: 800;
                         margin-left: -1.4vw;
                         font-size: 4vw;">客户信息</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">客户名称:</label>
            <label></label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">交期要求:</label>
            <label></label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">合同编号:</label>
            <label></label>
          </div>
        </div>
      </div>

      <div class="header" v-if="isdataSource">
        <div class="top-d">
          <div class="top-d-w">
            <label class="lab-left"
                   style="font-weight: 800;
                         margin-left: -1.4vw;
                         font-size: 4vw;">历史运行数据</label>
          </div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :customRow="clickThenSelect"
            :dataSource="dataSource">

         <span slot="forktype2" slot-scope="status">
          <a-tag :key="forktype2">
            {{ forktype2Text(forktype2) }}
          </a-tag>
        </span>

            <span slot="taskstatus" slot-scope="taskstatus">
          <a-tag :key="taskstatus">
            {{ taskstatusText(taskstatus) }}
          </a-tag>
        </span>


          </a-table>
        </div>
      </div>

       

      <!-- 表格 -->
      <!--    <div class="center">我是表格</div>-->
      
    </div> 
  </a-card>
</template>

<script> 
export default {
  name: "snInfo",
  components: {},
  data() {
    return {
      sn: '',
      snData: [],
      reportData: [],
      isreportData: false,
      dataSource: [],
      isdataSource: false,
      components: {},
      columns: [
        {
          title: '货叉型号',
          align: "center",
          dataIndex: 'containercode',
          key: 'containercode',
          ellipsis: true
        },
        //{
        //   title: '货叉类型',
        //   align: 'center',
        //   dataIndex: 'forktype2',
        //   key: 'forktype2',
        //   ellipsis: true,
        //   scopedSlots: {customRender: 'forktype2'}},
        {
          title: '目标运行数',
          align: 'center',
          dataIndex: 'targetnumber',
          key: 'targetnumber',
          ellipsis: true
        }, {
          title: '实际运行数',
          align: 'center',
          dataIndex: 'runnumber',
          key: 'runnumber',
          ellipsis: true,
        }, {
          title: '任务状态',
          align: 'center',
          dataIndex: 'taskstatus',
          key: 'taskstatus',
          ellipsis: true,
          scopedSlots: {customRender: 'taskstatus'}
        }
      ],
    }
  },
  created() {
    var params = {};
    location.search.substr(1).split('&').forEach(function (item) {
      var s = item.split('=');
      params[s[0]] = s[1];
    });
    this.sn = params.sn
    let params2 = {
      'sn': this.sn
    }
    // getSnInfo(params2).then(res => {
    //   this.snData = res.result.projectsn;
    //   this.reportData = res.result.report;
    //   this.dataSource = res.result.taskForkList;
    //   if (JSON.stringify(this.reportData) != "{}") {
    //     this.isreportData = true
    //   }
    //   if (JSON.stringify(this.dataSource) != "{}") {
    //     this.isdataSource = true
    //   }
    // })
  },
  methods: {
    forktype2Text(type) {
      if (type == '1') {
        return '单伸'
      } else {
        return '双伸'
      }
    },
    taskstatusText(status) {
      if (status == '1') {
        return '任务创建'
      } else if (status == '15') {
        return '任务执行中'
      } else if (status == '100') {
        return '任务完成'
      }
    },
    clickThenSelect(record, index) {
      return {
        on: {
          click: () => {
            this.$refs.taskForm.edit(record);
          }
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.content {
  width: 99.1%;
  height: 100%;
  border: 1px solid #fff;
  margin: 0 auto;
  background-color: #fff;
  overflow: auto;
}

.logo {
  height: 5%;
  margin-top: 10px;

  div {
    width: 50%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
  }
}

.top-d {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 1vh 0;
  //border: 1px solid red;
  .top-d-w {

    display: flex;
    height: 25%;
  }
}

.lab-left {
  font-size: 3.2vw;
  text-align: center;
  width: 30%;
  // border: 1px saddlebrown solid;
  font-weight: 600;
}

.lab-left2 {
  font-size: 3.5vw;
  text-align: center;
  /* width: 60%; */
  margin-left: 0.1vw;
  font-weight: 600;
}

.labe-right-text {
  font-size: 3vw;
}

.lab-right {
  width: 90%;
  border: 1px rgb(86, 70, 157) solid;
}

.top {
  width: 95%;
  height: 15%;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #f7f7f7;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
}

.header {
  width: 95%;
  height: 15%;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #f7f7f7;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
}

.center {
  width: 95%;
  height: 25%;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #f7f7f7;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
}

.bottom {
  width: 95%;
  height: 45%;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #f7f7f7;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;

  .bottom-d {
    height: 50%;
  }

  video {
    width: 97.5%;
    height: 95%;
    padding-left: 0.6vw;
    padding-right: 0.6vw;
    border-radius: 7px;
    padding-top: 0.6vw;
    object-fit: cover;
  }
}
</style>