CostumingPlatform/ant-design-vue-jeecg/src/views/process/modules/ZyProcessDetail.vue

<template>
  <div>
    <a-modal
      title="标准作业指导书"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width='1400'
      @ok="handleOk"
      @cancel="handleCancel"
      style="display:flex;"
    >
      <div style="width: 96%;margin:0 auto 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 30px">
        <h1 style="text-align: center;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px">黄淮学院服装智能制造管理平台 - <span>基本工序</span></h1>
        <div style="width:100%;height:100%;display: flex;align-items: start;justify-content: space-between;margin-bottom: 20px;" class="coin">
          <img :src="img == ''?img:img1" style="width:32%;">
          <table border="1" style="width: 66%;height:100%;font-size:14px;margin-bottom: 20px" class="table">
            <tr>
              <td><span>工序代码：</span>{{data.processCode}}</td>
              <td><span>工序名称：</span>{{data.processName}}</td>
              <td><span>工序时间：</span>{{data.processTime}}</td>
              <td><span>工序单价：</span>{{data.price}}</td>
            </tr>
            <tr>
              <td><span>工序等级：</span>{{data.grade}}</td>
              <td><span>面料代码：</span>{{data.fabricNum}}</td>
              <td><span>面料等级：</span>{{data.fabricGrade}}</td>
              <td><span>针距(厘米)：</span>{{data.needlePitch}}</td>
            </tr>
            <tr>
              <td><span>机器名称：</span>{{data.machineId}}</td>
              <td><span>手工宽放：</span>{{data.manualWide}}</td>
              <td><span>手工时间：</span>{{data.manualTime}}</td>
              <td><span>机器转速：</span>{{data.machineSpeed}}</td>
            </tr>
            <tr>
              <td><span>机器宽放：</span>{{data.machineWide}}</td>
              <td><span>机器时间：</span>{{data.machineTime}}</td>
              <td><span>机器浮于：</span>{{data.machineFloat}}</td>
              <td><span>绑包宽放：</span>{{data.bundleWide}}</td>
            </tr>
            <tr>
              <td><span>绑包时间：</span>{{data.bundleTime}}</td>
              <td><span>部件表名：</span>{{data.componentId}}</td>
              <td><span>是否瓶颈：</span>{{data.isBottleneck}}</td>
              <td><span>企业名称：</span>{{data.enterpriseId}}</td>
            </tr>
            <tr>
              <td><span>工具名称：</span>{{data.toolId}}</td>
              <td><span>款式名称：</span>{{data.styleId}}</td>
              <td><span>工段代码：</span>{{data.worksectionCode}}</td>
              <td><span>合同号：</span>{{data.totalManualTmu}}</td>
            </tr>
            <tr>
              <td><span>合计(手工TMU)：</span>{{data.totalManualTmu}}</td>
              <td><span>合计(机器TMU)：</span>{{data.totalMachineTmu}}</td>
              <td><span>合计(手工秒)：</span>{{data.totalMaunal}}</td>
              <td><span>合计(机器秒)：</span>{{data.totalMachine}}</td>
            </tr>
          </table>
        </div>
        <div style="width:100%;height:100%;display: flex;align-items: start;justify-content: space-between">
          <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:32%;"/>
          <p v-else style="padding-top: 20px"> 暂无视频</p>
          <table border="1" style="width: 66%;height:100%;font-size:14px;margin-bottom: 20px" class="table">
            <tr>
              <td style="text-align: center;width: 120px"><span>工艺描述：</span></td>
              <td><span>{{data.processDescribe}}</span></td>
            </tr>
            <tr>
              <td style="text-align: center;width: 120px"><span>做工说明：</span></td>
              <td>{{data.mkExplain}}</td>
            </tr>
            <tr>
              <td style="text-align: center;width: 120px"><span>品质要求：</span></td>
              <td>{{data.qualityRequire}}</td>
            </tr>
          </table>
        </div>
      </div>
      <a-card :title="`动作`+(index+1)" v-for="(item,index) in data.zyClothAction" :key="item.id" :headStyle="headStyle">
        <div style="width:100%;height:20px;display:flex;font-size:18px">
          <table  border="1" style="width: 100%;height:50px;margin-top:-1%;" >
            <tr>
              <td style="width:20%">编号：{{item.nums}}</td>
              <td style="width:20%">频率：{{item.freq}}</td>
              <td style="width:20%">机器TMU：{{item.machineTmu}}</td>
              <td style="width:20%">手工TMU：{{item.machineTmu}}</td>
              <td style="width:20%">描述：{{item.descr}}</td>
            </tr>
          </table>
        </div>
      </a-card>
      <div style="width: 96%;margin:0 auto 30px">
        <h2 style="text-align: left;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px">基础动作</h2>
      </div>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
        selectId:'2',
        img:'',
        img1:require('@/assets/9-2.png'),//默认图片
        mp4:'',
        data:{},
        headStyle:{
          height:'10px'
        }
      }
    },
    created(){
    },
    methods: {
      showModal(id) {
        this.visible = true;
        this.$http.get('/base/zyProcess/queryById?id='+id).then(
          res=>{
            this.data = res.result
            this.img = "http://10.100.200.112/jeecg-boot/sys/common/static/"+this.data.image;
            this.mp4 = "http://10.100.200.112/jeecg-boot/sys/common/static/"+this.data.vedio;
            console.log(this.data)
          }
        )
      },
      handleOk() {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 1);
      },
      handleCancel() {
        this.visible = false;
      },
    },
  }
</script>
<style scoped>
  .table{border-color:#d9d9d9;border-radius: 3px}
  .table td{padding: 10px 20px;max-width: 380px;white-space:nowrap}
  .table td span{color: #333}
</style>