486 lines
14 KiB
Vue
486 lines
14 KiB
Vue
<template>
|
||
<!--基本信息!-->
|
||
<el-main v-loading="mainLoading" style="margin-top: -10px;">
|
||
<div class="exportBtn" @click="handleExport">导出</div>
|
||
<div id="exportDiv" class="exportDiv">
|
||
<p style="font-weight: 600px;font-size: 18px;text-align: center;margin-top: 40px;">{{form.cate_name}}作业许可证<span>（{{ form.number }}）</span></p>
|
||
<p class="tables-title">作业信息</p>
|
||
<el-card shadow="hover">
|
||
<el-descriptions column=2 id="opl__opre">
|
||
<el-descriptions-item label="作业名称:">
|
||
{{ operationObj.name }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="作业区域:">
|
||
<span v-if="operationObj.area_">
|
||
{{ operationObj.area_.name }}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="生产状态:">
|
||
{{ operationObj.state_work }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="状态:">
|
||
{{ state_[operationObj.state] }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="预计开始:">
|
||
{{ operationObj.start_time }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="预计结束:">
|
||
{{ operationObj.end_time }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="属地部门:">
|
||
<span v-if="operationObj.dept_ter_">
|
||
{{operationObj.dept_ter_.name}}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="业务部门:">
|
||
<span v-if="operationObj.dept_bus_">
|
||
{{operationObj.dept_bus_.name}}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="协调员:">
|
||
<span v-if="operationObj.coordinator_">
|
||
{{operationObj.coordinator_.name}}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="监控设备:" v-if="operationObj.vchannels">
|
||
<span v-for="item in operationObj.vchannels_" :key="item.id">
|
||
{{ item.name}}({{item.code}})/
|
||
</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
<p class="tables-title">进度流程</p>
|
||
<el-card shadow="hover">
|
||
<work-step v-if="ticketDetail.state" ref="workStep" :ticket="ticketDetail"></work-step>
|
||
</el-card>
|
||
<p class="tables-title">许可证信息</p>
|
||
<el-card shadow="hover">
|
||
<el-descriptions column=2 id="opl__opre">
|
||
<el-descriptions-item label="编号:">
|
||
{{ form.number }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="作业级别:">
|
||
{{ form.level }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="开始时间:">
|
||
{{ form.start_time }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="结束时间:">
|
||
{{ form.end_time }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="状态:">
|
||
<span v-if="form.ticket_&&form.ticket_.state_" style="margin-right: 5px;">{{form.ticket_.state_.name }}</span>
|
||
<span :class="['btnState' ,form.ticket_.act_state===0?'nomalState':form.ticket_.act_state===1?'nomalState':form.ticket_.act_state===2?'dangerState':form.ticket_.act_state===3?'dangerState':form.ticket_.act_state===5?'dangerState':form.ticket_.act_state===4?'successState':'nomalState']"
|
||
v-if="form.ticket_&&form.ticket_.act_state">{{act_states[form.ticket_.act_state]}}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="作业部门:">
|
||
<span v-if="form.dept_do_">
|
||
{{form.dept_do_.name}}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="作业负责人:">
|
||
<span v-if="form.charger_">
|
||
{{form.charger_.name}}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="作业监护人:">
|
||
<span v-if="form.monitor_">
|
||
{{form.monitor_.name}}
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="风险分析:" span=2>
|
||
<span v-for="item in form.risks_checked_" :key="item.id">
|
||
{{item.name}}<el-divider direction="vertical"></el-divider>
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="控制措施:" span=2>
|
||
<span v-for="item in form.measures_checked_" :key="item.id">
|
||
{{item.name}}<el-divider direction="vertical"></el-divider>
|
||
</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="监控状态:" span=2 v-if="form.mtask_uid">
|
||
<span>进行中</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="现场照片:" span=2 v-if="form.create_imgs&&form.create_imgs.length>0">
|
||
<!-- <el-upload
|
||
v-model:file-list="create_imgs_list"
|
||
list-type="picture-card"
|
||
:auto-upload="false"
|
||
action="#"
|
||
:disabled="true"
|
||
>
|
||
</el-upload>-->
|
||
<el-image
|
||
v-for = "item in form.create_imgs_"
|
||
:key = "item.id"
|
||
style="margin-right: 8px;height: 120px;"
|
||
:src="item.path"
|
||
:preview-src-list="[item.path]"
|
||
fit="cover"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="关闭照片:" span=2 v-if="form.close_imgs&&form.close_imgs.length>0">
|
||
<el-image
|
||
v-for = "item in form.close_imgs_"
|
||
:key = "item.id"
|
||
style="margin-right: 8px;height: 146px;height:146px;"
|
||
:src="item.path"
|
||
:preview-src-list="[item.path]"
|
||
fit="cover"
|
||
/>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
<p class="tables-title">作业人员</p>
|
||
<table class="tables" cellspacing="0">
|
||
<tr class="tableTh tableThS">
|
||
<td class="tableTd">序号</td>
|
||
<td class="tableTd" style="width:100px">姓名</td>
|
||
<td class="tableTd" style="width:120px">工作职责</td>
|
||
<td class="tableTd" style="flex: auto;">证书</td>
|
||
<td class="tableTd" style="width:180px">创建时间</td>
|
||
</tr>
|
||
<tr v-if="workerData.length==0" class="noDataTr"> 无数据</tr>
|
||
<tr class="tableTr tableTrS" v-for="(item,index) in workerData" :key="item.id">
|
||
<td class="tableTd" >{{ index+1 }}</td>
|
||
<td class="tableTd" style="width:100px">{{ item.worker_.name }}</td>
|
||
<td class="tableTd" style="width:120px">{{ item.duty }}</td>
|
||
<td class="tableTd" style="flex: auto;">
|
||
<span v-for="cer in item.certificates_" :key="cer.number">{{cer.name}}-{{cer.number }}</span>
|
||
</td>
|
||
<td class="tableTd" style="width:180px">{{ item.create_time }}</td>
|
||
</tr>
|
||
</table>
|
||
<p class="tables-title">气体检测记录</p>
|
||
<table class="tables" cellspacing="0">
|
||
<tr class="tableTh tableThS">
|
||
<td class="tableTd">序号</td>
|
||
<td class="tableTd">检测部位</td>
|
||
<td class="tableTd">O₂（%）</td>
|
||
<td class="tableTd">CO</td>
|
||
<td class="tableTd" style="line-height: 18px;">可燃气体<span style="12px;font-weight:500">(V%LEL)</span></td>
|
||
<td class="tableTd">检验结论</td>
|
||
<td class="tableTd">检测人</td>
|
||
<td class="tableTd">检测时间</td>
|
||
<td class="tableTd">创建时间</td>
|
||
</tr>
|
||
<tr v-if="gasData.length==0" class="noDataTr"> 无数据</tr>
|
||
<tr class="tableTr tableTrS" v-for="(item,index) in gasData" :key="item.id">
|
||
<td class="tableTd">{{ index+1 }}</td>
|
||
<td class="tableTd">{{ item.check_place }}</td>
|
||
<td class="tableTd">{{ item.o2 }}</td>
|
||
<td class="tableTd">{{item.co}}</td>
|
||
<td class="tableTd">{{ item.lel }}</td>
|
||
<td class="tableTd">{{ is_ok_[item.is_ok] }}</td>
|
||
<td class="tableTd">{{ item.checker_.name }}</td>
|
||
<td class="tableTd">{{ item.check_time }}</td>
|
||
<td class="tableTd">{{ item.create_time }}</td>
|
||
</tr>
|
||
</table>
|
||
<p class="tables-title">处理日志</p>
|
||
<table class="tables" cellspacing="0">
|
||
<tr class="tableTh">
|
||
<td class="tableTd">进行状态</td>
|
||
<td class="tableTd attributeTd">操作类型</td>
|
||
<td class="tableTd attributeTd">操作属性</td>
|
||
<td class="tableTd">操作意见</td>
|
||
<td class="tableTd">操作人</td>
|
||
<!-- <td class="tableTd">电子签名</td> -->
|
||
<td class="tableTd">更新时间</td>
|
||
</tr>
|
||
<tr v-if="logsData.length==0" class="noDataTr"> 无处理日志</tr>
|
||
<tr class="tableTr" v-for="item in logsData" :key="item.id">
|
||
<td class="tableTd" v-if="item.participant_str==null">{{ item.state_.name }}</td>
|
||
<td class="tableTd attributeTd" v-if="item.participant_str==null">{{ typeOptions[item.intervene_type] }}</td>
|
||
<td class="tableTd attributeTd" v-if="item.participant_str==null">
|
||
<span v-if="item.transition_attribute == 1" class="successText">同意</span>
|
||
<span v-else-if="item.transition_attribute == 2" class="dangerText">拒绝</span>
|
||
<span v-else class="dangerText"></span>
|
||
</td>
|
||
<td class="tableTd" v-if="item.participant_str==null">{{ item.suggestion }}</td>
|
||
<td class="tableTd" v-if="item.participant_str==null">
|
||
<span v-if="item.participant_">{{item.participant_.name}}</span>
|
||
<span v-if="item.participant_str">{{item.participant_str}}</span>
|
||
<el-image v-if="item.participant_ && item.participant_.signature" :src="item.participant_.signature" style="width: 60px"></el-image>
|
||
<!-- <img style="width:60px;vertical-align: bottom;" src="./../../../public/img/signature.jpg"> -->
|
||
</td>
|
||
<td class="tableTd" v-if="item.participant_str==null">{{ item.update_time }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
</el-main>
|
||
</template>
|
||
|
||
<script>
|
||
import workStep from "./../../views/wf/steps.vue";
|
||
import PdfLoader from '@/utils/html2pdf';
|
||
export default {
|
||
name: "scFire",
|
||
components: {
|
||
workStep
|
||
},
|
||
props: {
|
||
id: { type: String, default: "" },
|
||
wfId: { type: String, default: "" },
|
||
},
|
||
data() {
|
||
return {
|
||
create_imgs_list: [],
|
||
close_imgs_list: [],
|
||
mainLoading: false,
|
||
issave: false, //控制基本信息提交
|
||
search: {
|
||
keyword: null,
|
||
},
|
||
form: {
|
||
id: "",
|
||
start_time: null,
|
||
end_time: null,
|
||
operation: "",
|
||
cate: "",
|
||
risks_checked: [],
|
||
},
|
||
oplcateCode: 'fire',
|
||
operationId: "",
|
||
oplId: "",
|
||
leveloptions: [
|
||
{id: 10, name: "特殊动火"},
|
||
{id: 20, name: "一级动火"},
|
||
{id: 30, name: "二级动火"},
|
||
],
|
||
ticketId:'',
|
||
ticketDetail:{},
|
||
operationObj:{},
|
||
workerData: [],
|
||
gasData: [],
|
||
logsData:[],
|
||
is_ok_: {
|
||
true: "正常",
|
||
false: "不正常",
|
||
},
|
||
state_: {
|
||
10: "创建中",
|
||
20: "审批中",
|
||
30: "待开始",
|
||
40: "进行中",
|
||
50: "已完成",
|
||
},
|
||
act_states: {
|
||
0: "草稿中",
|
||
1: "进行中",
|
||
2: "被退回",
|
||
3: "被撤回",
|
||
4: "已完成",
|
||
5: "已关闭",
|
||
},
|
||
typeOptions: {
|
||
0: "正常处理",
|
||
1: "转交",
|
||
2: "加签",
|
||
3: "加签完成",
|
||
4: "接单",
|
||
5: "评论",
|
||
6: "删除",
|
||
7: "强制关闭",
|
||
8: "强制修改状态",
|
||
9: "hook",
|
||
10: "撤回",
|
||
11: "抄送",
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
that.oplId = that.id; //许可证ID
|
||
|
||
this.$nextTick(()=>{
|
||
that.getOplData();
|
||
that.getworkerList();
|
||
that.getgasList();
|
||
|
||
})
|
||
},
|
||
methods: {
|
||
handleExport() {
|
||
let exportDiv = document.getElementById('exportDiv') // 需要导出部分页面的id名
|
||
this.pdfDownLoader = new PdfLoader(exportDiv, '作业许可证', 'exportDiv') // fileName -->导出文件名, question-table -->防止被截断的class名
|
||
this.pdfDownLoader.outPutPdfFn(this.form.number);
|
||
exportDiv.style.width = "100%"
|
||
|
||
},
|
||
|
||
//根据oplId，查许可证
|
||
getOplData() {
|
||
let that = this;
|
||
that.mainLoading = true;
|
||
that.$API.opm.opl.read.req(that.oplId).then((res) => {
|
||
that.mainLoading = false
|
||
that.form = res;
|
||
that.oplcateCode = res.cate_code;
|
||
that.ticketId = res.ticket;
|
||
that.operationId = res.operation; //zuoyeID
|
||
that.$API.wf.ticket.ticketItem.req(that.ticketId).then((ress) => {
|
||
that.ticketDetail = ress;
|
||
that.ticketDetailState = true;
|
||
}).catch(e=>{});
|
||
that.getOperation();
|
||
res.create_imgs_.forEach(item=>{
|
||
console.log(item)
|
||
that.create_imgs_list.push({
|
||
url: item.path,
|
||
name: '',
|
||
})
|
||
})
|
||
res.close_imgs_.forEach(item=>{
|
||
that.close_imgs_list.push({
|
||
url: item.path,
|
||
name: '',
|
||
})
|
||
})
|
||
that.$nextTick(()=>{
|
||
this.$API.wf.ticket.ticketFlowlogs.req(that.ticketId).then((res2) => {
|
||
if (res2.err_msg) {
|
||
} else {
|
||
that.logsData = res2;
|
||
}
|
||
});
|
||
})
|
||
}).catch(e=>{this.mainLoading=false});
|
||
},
|
||
getOperation() {
|
||
this.mainLoading = true;
|
||
this.$API.opm.operation.read
|
||
.req(this.operationId)
|
||
.then((res) => {
|
||
this.mainLoading = false;
|
||
this.operationObj = res;
|
||
})
|
||
.catch((e) => {
|
||
this.mainLoading = false;
|
||
});
|
||
},
|
||
//作业人员列表
|
||
getworkerList() {
|
||
this.$API.opm.worker.list.req({opl: this.oplId, page: 0}).then((res) => {
|
||
this.workerData = res;
|
||
});
|
||
},
|
||
//气体检测记录列表
|
||
getgasList() {
|
||
this.$API.opm.gas.list.req({opl: this.oplId, page: 0}).then((res) => {
|
||
this.gasData = res;
|
||
});
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.el-drawer__header {
|
||
margin-bottom: 0px;
|
||
}
|
||
.btnState{
|
||
font-size: 12px;
|
||
padding: 0 9px;
|
||
height: 24px;
|
||
line-height: 23px;
|
||
border-radius: 5px;
|
||
vertical-align: top;
|
||
display: inline-block;
|
||
}
|
||
.nomalState{
|
||
color: #536dfe;
|
||
border: 1px solid #dcdfe6;
|
||
}
|
||
.dangerState{
|
||
color: #FF0000;
|
||
border: 1px solid #fbe0e0;
|
||
}
|
||
.successState{
|
||
color: #14c532;
|
||
border: 1px solid #e6f3e6;
|
||
}
|
||
.successText{
|
||
color: #14c532;
|
||
}
|
||
.dangerText{
|
||
color: #FF0000;
|
||
}
|
||
.tables{
|
||
width: 100%;
|
||
color: #606266;
|
||
border-top: 1px solid #e4e7ed;
|
||
border-left: 1px solid #e4e7ed;
|
||
border-collapse: collapse;
|
||
}
|
||
.tables-title{
|
||
color: #303331;
|
||
font-size: 16px;
|
||
/* font-weight: 700; */
|
||
margin: 10px 0;
|
||
}
|
||
.tableTh,.tableTr{
|
||
display: flex;
|
||
}
|
||
.tableTh>td{
|
||
font-weight: 700;
|
||
/* color: #909399; */
|
||
height: 35px;
|
||
line-height: 35px;
|
||
padding: 0 5px;
|
||
/* background: #fafafa; */
|
||
}
|
||
.tableThS>td:first-child{
|
||
flex-shrink:0;
|
||
width: 70px;
|
||
}
|
||
|
||
.tableTr>td{
|
||
min-height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 5px;
|
||
}
|
||
.tableTrS>td:first-child{
|
||
flex-shrink:0;
|
||
width: 70px;
|
||
}
|
||
.tableTh>td.attributeTd{
|
||
flex-shrink:0;
|
||
width: 90px;
|
||
}
|
||
.tableTr>td.attributeTd{
|
||
flex-shrink:0;
|
||
width: 90px;
|
||
}
|
||
td{
|
||
width: 25%;
|
||
border-right: 1px solid #e4e7ed;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
}
|
||
.noDataTr{
|
||
text-align: center;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
border-right: 1px solid #e4e7ed;
|
||
}
|
||
.exportDiv{
|
||
margin-top: -30px;
|
||
}
|
||
.exportBtn{
|
||
width: 120px;
|
||
height: 40px;
|
||
color: #ffffff;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background: #438af4;
|
||
font-size: 18px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
/* box-shadow: 0 0 9px 0px rgba(0,0,0,.2); */
|
||
}
|
||
</style>
|