浏览代码

表格sop

pm 10 月之前
父节点
当前提交
570b0b1145
共有 1 个文件被更改,包括 82 次插入4 次删除
  1. 82 4
      src/views/mes/sop/sopm/NewSop.vue

+ 82 - 4
src/views/mes/sop/sopm/NewSop.vue

@@ -54,9 +54,32 @@
             <span>八大步骤</span>
           </div>
           <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
-            <div style="width:700px;height:600px;background: pink;">
-              <div style="width: 100%;height: 100px;background: yellow">
-                <div></div>
+            <div style="width:700px;height:600px;">
+              <div style="width: 100%;height: 100px;">
+                <div>
+                  <el-table :data="StepData">
+                    <el-table-column label=""  prop="step"></el-table-column>
+                    <el-table-column label=""  prop="number">
+                      <template slot-scope="scope">
+                        <span v-if="scope.row.number!==null">
+                          <i :class="scope.row.icon">{{scope.row.number}}</i>
+                        </span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label=""  prop="status">
+                      <template slot-scope="scope">
+                        <span v-if="scope.row.status!=='已执行'">
+                          <el-button type="primary" plain size="small">执行</el-button>
+                        </span>
+                        <span v-if="scope.row.status=='已执行'">
+                          <span style="width: 20px;height: 20px;border-radius: 50%;background:#6aabfb"></span>
+                          <span>{{scope.row.status}}</span>
+                        </span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label=""  prop="content" width="300"></el-table-column>
+                  </el-table>
+                </div>
               </div>
             </div>
           </div>
@@ -75,15 +98,70 @@ import {
 import {
   listTechnology
 } from '@/api/system/technology'
+import Template from '@/views/print/printtemplate/list.vue'
 
 export default {
   name: 'NewSop',
+  components: { Template },
   data() {
     return {
       sopStep: 'first',
       selectedOption: '',
       technologyList: [],
-      marsDeptList: []
+      marsDeptList: [],
+      StepData: [
+        {
+          step: '第1步',
+          status: '已执行',
+          number:null,
+          content: '识别所要完成的工作内容'
+        },
+        {
+          step: '第2步',
+          status: '已执行',
+          number:null,
+          content: '判断工作中锁设计的能量源及隔离方式'
+        },
+        {
+          step: '第3步',
+          status: '分配',
+          number:'4',
+          icon:'el-icon-user',
+          content: '通知所有受影响的人'
+        },
+        {
+          step: '第4步',
+          status: '已执行',
+          number: null,
+          content: '如果设备正在运行,按正常操作停机'
+        },
+        {
+          step: '第5步',
+          status: '执行',
+          number:'0',
+          icon:'el-icon-lock',
+          content: '上锁并挂牌'
+        },
+        {
+          step: '第6步',
+          status: '执行',
+          number:null,
+          content: '能量隔离证实'
+        },
+        {
+          step: '第7步',
+          status: '执行',
+          number:null,
+          content: '取锁前的检查'
+        },
+        {
+          step: '第8步',
+          status: '执行',
+          number:'0',
+          icon:'el-icon-unlock',
+          content: '拆除锁具,并把隔离开关恢复到正常位置'
+        }
+      ]
     }
 
   },