mts / MTS-UI · Files

<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>{{ snData.projectName }}</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">工作令：</label>
            <label>{{ snData.workno }}</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">设备类型：</label>
            <label>{{ snData.devicetype }}</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">生产工厂：</label>
            <label>{{ snData.factorytype }}</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">SN：</label>
            <label>{{ snData.sn }}</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">项目编号：</label>
            <label>{{ snData.field0172 }}</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>{{ snData.field0048 }}</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">交期要求：</label>
            <label>{{ snData.field0050 }}</label>
          </div>
          <div class="top-d-w">
            <label class="lab-left">合同编号：</label>
            <label>{{ snData.field0068 }}</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="header" v-if="isreportData">
        <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>
          <table border="1" align="left">
            <tr>
              <td>平均原点偏移(mm)</td>
              <td>{{ reportData.averageOriginOffsetValue }}</td>
            </tr>
            <tr>
              <td>平均伸叉最大速度(m/min)</td>
              <td>{{ reportData.averageMaxSpeedValue }}[比较值: {{ reportData.averageMaxSpeed }}]</td>
            </tr>
            <tr>
              <td>平均回叉最大速度(m/min)</td>
              <td>{{ reportData.maxSpeedOfRetractionForkValue }} [比较值:{{ reportData.maxSpeedOfRetractionFork }}]
              </td>
            </tr>
            <tr>
              <td>平均伸叉偏移(mm)</td>
              <td>{{ reportData.extensionForkOffsetValue }} [比较值:
                左极限{{
                  reportData.leftlimit
                }};右极限{{ reportData.rightlimit }}]
              </td>
            </tr>
            <tr>
              <td>平均伸叉到位挠度(mm)</td>
              <td>{{ reportData.extensionForkArrivedDeflectionValue }}</td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 表格 -->
      <!--    <div class="center">我是表格</div>-->
      <div class="bottom">
        <div class="bottom-d" v-if="snData.azurl">
          <div style="height: 10%; ">安装视频</div>
          <div style="height: 90%;margin-top:1vh;">
            <video controls autoplay loop muted playsinlin
                   :src="snData.azurl"></video>
          </div>
        </div>
        <div class="bottom-d" v-if="snData.byurl">
          <div style="height: 10%; ">保养视频</div>
          <div style="height: 90%;margin-top:1vh;">
            <video controls autoplay loop muted playsinlin
                   :src="snData.byurl"></video>
          </div>
        </div>
      </div>
    </div>
    <task-info ref="taskForm"></task-info>
  </a-card>
</template>

<script>
import {getSnInfo} from '@/api/api';
import taskInfo from "./modules/taskInfo";
import TaskInfo from "./modules/taskInfo";

export default {
  name: "snInfo",
  components: {TaskInfo},
  data() {
    return {
      sn: '',
      snData: [],
      reportData: [],
      isreportData: false,
      dataSource: [],
      isdataSource: false,
      components: {taskInfo},
      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>