|
|
@@ -1,25 +1,69 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div style="display:flex;justify-content:center;align-items:center;position:relative;" v-show="sopStep=='first'">
|
|
|
- <img style="width: 1250px;height:700px" src="@/assets/images/marsBg.png" alt="">
|
|
|
- <img style="position: absolute;width:35px;height: 35px;left: 620px;top:310px" src="@/assets/images/workPoint.png"
|
|
|
- alt="" @click="handelChange('second')"
|
|
|
- >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ v-show="sopStep == 'first'"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style="width: 1250px; height: 700px"
|
|
|
+ src="@/assets/images/marsBg.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ left: 620px;
|
|
|
+ top: 310px;
|
|
|
+ "
|
|
|
+ src="@/assets/images/workPoint.png"
|
|
|
+ alt=""
|
|
|
+ @click="handelChange('second')"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;"
|
|
|
- v-show="sopStep=='second'"
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ v-show="sopStep == 'second'"
|
|
|
>
|
|
|
- <el-table style="width: 50%;margin: 10px" :header-cell-style="{background:'#004d8c',color:'#FFFFFF'}"
|
|
|
- :data="technologyList"
|
|
|
+ <el-table
|
|
|
+ style="width: 50%; margin: 10px"
|
|
|
+ :header-cell-style="{ background: '#004d8c', color: '#FFFFFF' }"
|
|
|
+ :data="technologyList"
|
|
|
>
|
|
|
- <el-table-column type="selection" width="55" align="center"/>
|
|
|
- <el-table-column label="设备/工艺名称" align="center" prop="technologyName"></el-table-column>
|
|
|
- <el-table-column label="所属岗位" align="center" prop="workstationName"></el-table-column>
|
|
|
- <el-table-column label="设备/工艺类型" align="center" prop="technologyType"></el-table-column>
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column
|
|
|
+ label="设备/工艺名称"
|
|
|
+ align="center"
|
|
|
+ prop="technologyName"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="所属岗位"
|
|
|
+ align="center"
|
|
|
+ prop="workstationName"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="设备/工艺类型"
|
|
|
+ align="center"
|
|
|
+ prop="technologyType"
|
|
|
+ ></el-table-column>
|
|
|
</el-table>
|
|
|
<h2>sop类型</h2>
|
|
|
- <el-radio-group v-model="selectedOption" size="small"
|
|
|
- style="display: flex;flex-direction: column;align-items: flex-start;"
|
|
|
+ <el-radio-group
|
|
|
+ v-model="selectedOption"
|
|
|
+ size="small"
|
|
|
+ style="display: flex; flex-direction: column; align-items: flex-start"
|
|
|
>
|
|
|
<el-radio label="开收班" border style="margin: 10px">开收班</el-radio>
|
|
|
<el-radio label="清洁" border style="margin: 10px 10px">清洁</el-radio>
|
|
|
@@ -29,14 +73,17 @@
|
|
|
</el-radio-group>
|
|
|
<el-button @click="handelChange('third')">开始执行</el-button>
|
|
|
</div>
|
|
|
- <div style="position:relative;display: flex;" v-show="sopStep=='third'">
|
|
|
- <div class="left" style="width: 25%;display: flex;flex-direction: column">
|
|
|
+ <div style="position: relative; display: flex" v-show="sopStep == 'third'">
|
|
|
+ <div
|
|
|
+ class="left"
|
|
|
+ style="width: 25%; display: flex; flex-direction: column"
|
|
|
+ >
|
|
|
<div class="left-top">
|
|
|
<el-card class="box-card" style="margin: 10px">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>工艺/涉笔 工艺图</span>
|
|
|
</div>
|
|
|
- <img src="@/assets/images/techonlogy.png" alt="">
|
|
|
+ <img src="@/assets/images/techonlogy.png" alt="" />
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div class="left-bottom">
|
|
|
@@ -44,40 +91,63 @@
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>LOTO站信息</span>
|
|
|
</div>
|
|
|
- <img src="@/assets/images/sopPoint.png" alt="">
|
|
|
+ <img src="@/assets/images/sopPoint.png" alt="" />
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right" style="flex:1;">
|
|
|
- <el-card class="box-card" style="margin: 10px;height: 742px;">
|
|
|
+ <div class="right" style="flex: 1">
|
|
|
+ <el-card class="box-card" style="margin: 10px; height: 742px">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>八大步骤</span>
|
|
|
</div>
|
|
|
- <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
|
|
- <div style="width:700px;height:600px;">
|
|
|
- <div style="width: 100%;height: 100px;">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <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">
|
|
|
+ <el-table :data="StepData" show-header="false">
|
|
|
+ <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 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">
|
|
|
+ <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 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 v-if="scope.row.status == '已执行'">
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ display: inline-block;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ margin: 1%;
|
|
|
+ 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-column
|
|
|
+ label=""
|
|
|
+ prop="content"
|
|
|
+ width="300"
|
|
|
+ ></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -87,111 +157,103 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- listMarsDept
|
|
|
-} from '@/api/system/marsdept'
|
|
|
-import {
|
|
|
- listTechnology
|
|
|
-} from '@/api/system/technology'
|
|
|
-import Template from '@/views/print/printtemplate/list.vue'
|
|
|
+import { listMarsDept } from "@/api/system/marsdept";
|
|
|
+import { listTechnology } from "@/api/system/technology";
|
|
|
+import Template from "@/views/print/printtemplate/list.vue";
|
|
|
|
|
|
export default {
|
|
|
- name: 'NewSop',
|
|
|
+ name: "NewSop",
|
|
|
components: { Template },
|
|
|
data() {
|
|
|
return {
|
|
|
- sopStep: 'first',
|
|
|
- selectedOption: '',
|
|
|
+ sopStep: "first",
|
|
|
+ selectedOption: "",
|
|
|
technologyList: [],
|
|
|
marsDeptList: [],
|
|
|
StepData: [
|
|
|
{
|
|
|
- step: '第1步',
|
|
|
- status: '已执行',
|
|
|
- number:null,
|
|
|
- content: '识别所要完成的工作内容'
|
|
|
+ step: "第1步",
|
|
|
+ status: "已执行",
|
|
|
+ number: null,
|
|
|
+ content: "识别所要完成的工作内容",
|
|
|
},
|
|
|
{
|
|
|
- step: '第2步',
|
|
|
- status: '已执行',
|
|
|
- number:null,
|
|
|
- content: '判断工作中锁设计的能量源及隔离方式'
|
|
|
+ step: "第2步",
|
|
|
+ status: "已执行",
|
|
|
+ number: null,
|
|
|
+ content: "判断工作中锁设计的能量源及隔离方式",
|
|
|
},
|
|
|
{
|
|
|
- step: '第3步',
|
|
|
- status: '分配',
|
|
|
- number:'4',
|
|
|
- icon:'el-icon-user',
|
|
|
- content: '通知所有受影响的人'
|
|
|
+ step: "第3步",
|
|
|
+ status: "分配",
|
|
|
+ number: "4",
|
|
|
+ icon: "el-icon-user",
|
|
|
+ content: "通知所有受影响的人",
|
|
|
},
|
|
|
{
|
|
|
- step: '第4步',
|
|
|
- status: '已执行',
|
|
|
+ step: "第4步",
|
|
|
+ status: "已执行",
|
|
|
number: null,
|
|
|
- content: '如果设备正在运行，按正常操作停机'
|
|
|
+ content: "如果设备正在运行，按正常操作停机",
|
|
|
},
|
|
|
{
|
|
|
- step: '第5步',
|
|
|
- status: '执行',
|
|
|
- number:'0',
|
|
|
- icon:'el-icon-lock',
|
|
|
- content: '上锁并挂牌'
|
|
|
+ step: "第5步",
|
|
|
+ status: "执行",
|
|
|
+ number: "0",
|
|
|
+ icon: "el-icon-lock",
|
|
|
+ content: "上锁并挂牌",
|
|
|
},
|
|
|
{
|
|
|
- step: '第6步',
|
|
|
- status: '执行',
|
|
|
- number:null,
|
|
|
- content: '能量隔离证实'
|
|
|
+ step: "第6步",
|
|
|
+ status: "执行",
|
|
|
+ number: null,
|
|
|
+ content: "能量隔离证实",
|
|
|
},
|
|
|
{
|
|
|
- step: '第7步',
|
|
|
- status: '执行',
|
|
|
- number:null,
|
|
|
- content: '取锁前的检查'
|
|
|
+ step: "第7步",
|
|
|
+ status: "执行",
|
|
|
+ number: null,
|
|
|
+ content: "取锁前的检查",
|
|
|
},
|
|
|
{
|
|
|
- step: '第8步',
|
|
|
- status: '执行',
|
|
|
- number:'0',
|
|
|
- icon:'el-icon-unlock',
|
|
|
- content: '拆除锁具，并把隔离开关恢复到正常位置'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
-
|
|
|
+ step: "第8步",
|
|
|
+ status: "执行",
|
|
|
+ number: "0",
|
|
|
+ icon: "el-icon-unlock",
|
|
|
+ content: "拆除锁具，并把隔离开关恢复到正常位置",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getList()
|
|
|
+ this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
getList() {
|
|
|
const data = {
|
|
|
pages: 1,
|
|
|
- size: -1
|
|
|
- }
|
|
|
- listTechnology(data).then(res => {
|
|
|
- console.log(res, 'technologyList')
|
|
|
- this.technologyList = res.data.records
|
|
|
- })
|
|
|
- listMarsDept(data).then(res => {
|
|
|
- console.log(res, 'marsDeptList')
|
|
|
- this.marsDeptList = res.data.records
|
|
|
- })
|
|
|
+ size: -1,
|
|
|
+ };
|
|
|
+ listTechnology(data).then((res) => {
|
|
|
+ console.log(res, "technologyList");
|
|
|
+ this.technologyList = res.data.records;
|
|
|
+ });
|
|
|
+ listMarsDept(data).then((res) => {
|
|
|
+ console.log(res, "marsDeptList");
|
|
|
+ this.marsDeptList = res.data.records;
|
|
|
+ });
|
|
|
},
|
|
|
handelChange(val) {
|
|
|
- console.log(val)
|
|
|
- this.sopStep = val
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ console.log(val);
|
|
|
+ this.sopStep = val;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
</style>
|
