diff --git a/ant-design-vue-jeecg/src/components/procedure/zyProcess.vue b/ant-design-vue-jeecg/src/components/procedure/zyProcess.vue
new file mode 100644
index 00000000..c7de3d5b
--- /dev/null
+++ b/ant-design-vue-jeecg/src/components/procedure/zyProcess.vue
@@ -0,0 +1,90 @@
+<template>
+  <div style="padding: 15px 25px;">
+    <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>
+</template>
+<script>
+  export default {
+    name: 'zyProcess',
+    props:['data'],
+    data () {
+      return {
+        img:'',
+        img1:require('@/assets/9-2.png'),//默认图片
+        mp4:'',
+      }
+      },
+    methods: {
+    }
+  }
+</script>
+<style scoped>
+  .table{border-color:#d9d9d9;border-radius: 3px}
+  .table td{padding: 10px 20px;max-width: 380px; }
+  .table td span{color: #333}
+</style>
\ No newline at end of file
diff --git a/ant-design-vue-jeecg/src/views/process/ZyProcessComponentList.vue b/ant-design-vue-jeecg/src/views/process/ZyProcessComponentList.vue
index 464567b8..2bc5a4e2 100644
--- a/ant-design-vue-jeecg/src/views/process/ZyProcessComponentList.vue
+++ b/ant-design-vue-jeecg/src/views/process/ZyProcessComponentList.vue
@@ -75,7 +75,7 @@
             <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
             <a-menu slot="overlay">
               <a-menu-item>
-                <a @click="handleDetail(record)">详情</a>
+                <a @click="handleDetail(record.id)">详情</a>
               </a-menu-item>
               <a-menu-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
@@ -90,6 +90,7 @@
     </div>
 
     <zy-process-component-modal ref="modalForm" @ok="modalFormOk"></zy-process-component-modal>
+    <ZyProcessComponentFormDetail ref="ZyProcessComponentFormDetail"></ZyProcessComponentFormDetail>
   </a-card>
 </template>
 
@@ -99,13 +100,14 @@
   import { mixinDevice } from '@/utils/mixin'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import ZyProcessComponentModal from './modules/ZyProcessComponentModal'
+  import ZyProcessComponentFormDetail from './modules/ZyProcessComponentFormDetail'
   import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
 
   export default {
     name: 'ZyProcessComponentList',
     mixins:[JeecgListMixin, mixinDevice],
     components: {
-      ZyProcessComponentModal
+      ZyProcessComponentModal,ZyProcessComponentFormDetail
     },
     data () {
       return {
@@ -174,6 +176,9 @@
         fieldList.push({type:'string',value:'componentId',text:'部件',dictCode:'zy_cloths_component,parts_name,nums'})
         fieldList.push({type:'string',value:'processId',text:'工艺',dictCode:'zy_process,process_name,id'})
         this.superFieldList = fieldList
+      },
+      handleDetail(id){
+        this.$refs.ZyProcessComponentFormDetail.showModal(id)
       }
     }
   }
diff --git a/ant-design-vue-jeecg/src/views/process/modules/ZyProcessComponentFormDetail.vue b/ant-design-vue-jeecg/src/views/process/modules/ZyProcessComponentFormDetail.vue
new file mode 100644
index 00000000..78200417
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/process/modules/ZyProcessComponentFormDetail.vue
@@ -0,0 +1,83 @@
+<template>
+  <a-modal
+    title="标准作业指导书"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :width='1400'
+    @ok="handleOk"
+    @cancel="handleCancel"
+    style="display:flex;"
+  >
+    <table border="1" style="font-size:14px;" class="table" >
+      <tr>
+        <td style="text-align: center">部件:</td>
+        <td>{{model.componentId}}</td>
+      </tr>
+      <tr>
+        <td style="text-align: center">工艺:</td>
+        <td>{{model.processId}}</td>
+      </tr>
+      <tr>
+        <td style="text-align: center">是否瓶颈工序:</td>
+        <td>{{model.bottleneck}}</td>
+      </tr>
+    </table>
+
+  </a-modal>
+</template>
+
+<script>
+
+  import { httpAction, getAction } from '@/api/manage'
+  import { validateDuplicateValue } from '@/utils/util'
+
+  export default {
+    name: 'ZyProcessComponentFormDetail',
+    components: {
+    },
+    props: {
+
+    },
+    data () {
+      return {
+        model:{
+         },
+        visible: false,
+        confirmLoading: false,
+        img:'',//图片地址
+        img1:require('@/assets/9-2.png'),// 默认图片
+        mp4:'',//视频地址
+      }
+    },
+    methods: {
+      showModal(id) {
+        this.visible = true;
+        this.$http.get('/pro/zyProcessComponent/queryById?id='+id).then(
+          res=>{
+            this.model = 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.model')
+            console.log(this.model)
+          }
+        )
+      },
+      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;}
+  .table td span{color: #333}
+</style>
diff --git a/ant-design-vue-jeecg/src/views/process/modules/ZyProcessDetail.vue b/ant-design-vue-jeecg/src/views/process/modules/ZyProcessDetail.vue
index 56262f57..7270de0b 100644
--- a/ant-design-vue-jeecg/src/views/process/modules/ZyProcessDetail.vue
+++ b/ant-design-vue-jeecg/src/views/process/modules/ZyProcessDetail.vue
@@ -11,85 +11,21 @@
     >
       <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>
+        <!--组件--><zyProcess :data="data"></zyProcess>
       </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>
+      <!--      <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>
@@ -97,7 +33,9 @@
   </div>
 </template>
 <script>
+  import zyProcess from '@/components/procedure/zyProcess'
   export default {
+    components:{zyProcess},
     data() {
       return{
         ModalText: 'Content of the modal',
@@ -121,9 +59,10 @@
         this.$http.get('/base/zyProcess/queryById?id='+id).then(
           res=>{
             this.data = res.result
+            console.log('this.data')
+            console.log(this.data)
             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)
           }
         )
       },