637 lines
16 KiB
Vue
637 lines
16 KiB
Vue
<template>
|
||
<view class="bodyContainer">
|
||
<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="许可证详情"
|
||
leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
|
||
<view class="wrap-view wrap-top">
|
||
<view class="item title"> <text class="blueLine"></text>{{formData.cate_name}}作业许可证信息：</view>
|
||
<view class="item">
|
||
<view class="title">编号</view>
|
||
<view class="content">
|
||
<text>{{formData.number}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item" v-if="formData.level">
|
||
<view class="title">作业级别</view>
|
||
<view class="content">
|
||
<text>{{formData.level}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">预计开始</view>
|
||
<view class="content">
|
||
<text>{{formData.start_time}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">预计结束</view>
|
||
<view class="content">
|
||
<text>{{formData.end_time}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">节点</view>
|
||
<view class="content">
|
||
<text v-if="formData.ticket_ && formData.ticket_.state_">{{formData.ticket_.state_.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">作业部门</view>
|
||
<view class="content">
|
||
<text>{{formData.dept_do_.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">作业负责人</view>
|
||
<view class="content">
|
||
<text>{{formData.charger_.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">作业监护人</view>
|
||
<view class="content">
|
||
<text>{{formData.monitor_.name}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="item" v-if="formData.participant_&&formData.participant_.length>0">
|
||
<view class="title">可处理人</view>
|
||
<view class="content">
|
||
<text v-for="(val,index) in formData.participant_">{{val.name}} <text v-if="index!==formData.participant_.length-1">、</text></text>
|
||
</view>
|
||
</view> -->
|
||
<view class="item">
|
||
<view class="title">风险分析</view>
|
||
<view class="content">
|
||
<text v-for="item in formData.risks_checked_" :key="item.id">
|
||
{{item.name}}|
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">控制措施</view>
|
||
<view class="content">
|
||
<text v-for="item in formData.measures_checked_" :key="item.id">
|
||
{{item.name}}|
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">现场照片</view>
|
||
<view class="content">
|
||
<u-upload :custom-btn="true" :file-list="create_imgs_list" :show-progress="false" :auto-upload="false" :deletable="false"></u-upload>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">关闭照片</view>
|
||
<view class="content">
|
||
<u-upload :custom-btn="true" :file-list="close_imgs_list" :show-progress="false" :auto-upload="false" :deletable="false"></u-upload>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">监控状态</view>
|
||
<view class="content contentFlex">
|
||
<text v-if="formData.mtask_uid" style="width: 200upx;">进行中</text>
|
||
<text v-else style="width: 200upx;">未进行</text>
|
||
<text class="bindBtn" @click="mtaskStateChange('start')">开始</text>
|
||
<text class="bindBtn2" @click="mtaskStateChange('end')">停止</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrap-view wrap-top">
|
||
<view class="item title"> <text class="blueLine"></text>作业人员：</view>
|
||
<view class="workersWrap">
|
||
<view class="workersItem itemTitle">
|
||
<text class="workerCell">姓名</text>
|
||
<text class="workerCell">职责</text>
|
||
<text class="workerCell">证书</text>
|
||
<text class="workerCell">操作</text>
|
||
</view>
|
||
<view class="workersItem" v-for="item in workerList" :key="item.id">
|
||
<text class="workerCell" @click="viewWorker(item)" style="color:blue">{{item.worker_name}}</text>
|
||
<text class="workerCell">{{item.duty}}</text>
|
||
<!-- <text class="workerCell">{{item.certificates.length}}张</text> -->
|
||
<view class="workerCell">
|
||
<view class="certificate" @click="preView(cert.file)" style="color:blue" v-for="cert in item.certificates_" :key="cert.id">{{cert.number}}</view>
|
||
</view>
|
||
<view class="workerCell">
|
||
<text class="bindBtn" @click="bindBtl(item,10)" v-if="item.worker_.blt_===null||item.worker_.blt_===undefined">绑卡</text>
|
||
<text class="bindBtn" @click="bindBtl(item,20)" v-else>解绑</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrap-view wrap-top" v-if="formData.cate_code=='space'||formData.cate_code=='fire'||formData.cate_code=='clear'||formData.cate_code=='preheat'">
|
||
<view class="item title"> <text class="blueLine"></text>气体检测记录：</view>
|
||
<view class="checkWrap">
|
||
<view v-for="item1 in gasList" :key="item1.id" style="border-bottom: 1upx solid #dddddd;">
|
||
<view class="checkItem">
|
||
<text class="checkItemLable">检测部位：</text>
|
||
<text class="checkItemValue">{{item1.check_place}}</text>
|
||
</view>
|
||
<view class="checkItem">
|
||
<text class="checkItemLable">O₂：</text>
|
||
<text class="checkItemValue">{{item1.o2}}</text>
|
||
</view>
|
||
<view class="checkItem">
|
||
<text class="checkItemLable">检测人：</text>
|
||
<text class="checkItemValue">{{item1.checker_.name}}</text>
|
||
</view>
|
||
|
||
<view class="checkItem">
|
||
<text class="checkItemLable">CO：</text>
|
||
<text class="checkItemValue">{{item1.co}}</text>
|
||
</view>
|
||
<view class="checkItem">
|
||
<text class="checkItemLable">检验结论：</text>
|
||
<text class="checkItemValue" v-if="item1.is_ok">正常</text>
|
||
<text class="checkItemValue" v-else>异常</text>
|
||
</view>
|
||
<view class="checkItem" v-if="formData.cate_code=='fire'">
|
||
<text class="checkItemLable">可燃气体：</text>
|
||
<text class="checkItemValue">{{item1.lel}}</text>
|
||
</view>
|
||
<view class="checkItem" v-if="formData.cate_code=='space'||formData.cate_code=='clear'">
|
||
<text class="checkItemLable">H₂S：</text>
|
||
<text class="checkItemValue">{{item1.h2s}}</text>
|
||
</view>
|
||
<view class="checkItem" v-if="formData.cate_code=='preheat'">
|
||
<text class="checkItemLable">45℃：</text>
|
||
<text class="checkItemValue">{{item1.f5}}</text>
|
||
</view>
|
||
<view class="checkItem" style="width: 100%;">
|
||
<text class="checkItemLable">检测时间：</text>
|
||
<text class="checkItemValue">{{item1.check_time}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="workersItem itemTitle">
|
||
<text class="workerCell">检测部位</text>
|
||
<text class="workerCell">可燃气体(V%LEL)</text>
|
||
<text class="workerCell">检验结论</text>
|
||
</view>
|
||
<view class="workersItem" v-for="item1 in gasList" :key="item1.id">
|
||
<text class="workerCell">{{item1.check_place}}</text>
|
||
<text class="workerCell"></text>
|
||
<text class="workerCell">
|
||
<span v-if="item1.is_ok">正常</span>
|
||
<span v-else>异常</span>
|
||
</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view id="workerWrap" v-if="detailLimited">
|
||
<view class="workerContainer">
|
||
<view class="workerInfo">
|
||
<view class="infoTitle">姓名：</view><view>{{workerItem.worker_.name}}</view>
|
||
</view>
|
||
<view class="workerInfo">
|
||
<view class="infoTitle">手机：</view><view>{{workerItem.worker_.phone}}</view>
|
||
</view>
|
||
<view class="workerInfo">
|
||
<view class="infoTitle">工作职责：</view><view>{{workerItem.duty}}</view>
|
||
</view>
|
||
<view class="workerInfo">
|
||
<view class="infoTitle">证书编号：</view>
|
||
<view>
|
||
<view v-for="item in workerItem.certificates_"
|
||
style="color: blue;"
|
||
@click="preView(item.file)"
|
||
>{{item.number}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<icon class="closeDetailIcon" type="cancel" size="36" color="#fefefe" @click="closeWorkerDetail"/>
|
||
</view>
|
||
<view class="preBigImgWrap" v-if="preImg" @click="cancelPreImg">
|
||
<image class="bigImg" :src="preImgSrc" mode="widthFix"></image>
|
||
</view>
|
||
<!-- <img-view ref="imgPreView" :imgSrc="preImgSrc" @cancelPreView="cancelPreView"></img-view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "oplDetail",
|
||
data() {
|
||
return {
|
||
formData:{
|
||
number:'',
|
||
level:'',
|
||
start_time:'',
|
||
end_time:'',
|
||
ticket_:{},
|
||
dept_do_:{},
|
||
charger_:{},
|
||
monitor_:{},
|
||
risks_checked_:{},
|
||
measures_checked_:{},
|
||
mtask_uid:null
|
||
},
|
||
create_imgs_list: [],
|
||
close_imgs_list: [],
|
||
msOptions:{
|
||
"REVOKED": "已停止",
|
||
"STARTED": "进行中",
|
||
"SUCCESS": "已完成"
|
||
},
|
||
preImgSrc:'',
|
||
workerItem:{},
|
||
preImg:false,
|
||
detailLimited:false,
|
||
workerList:[],
|
||
gasList:[],
|
||
act_states: {
|
||
0: "草稿中",
|
||
1: "进行中",
|
||
2: "被退回",
|
||
3: "被撤回",
|
||
4: "已完成",
|
||
5: "已关闭",
|
||
},
|
||
}
|
||
},
|
||
onLoad(params) {
|
||
this.oplId = params.oplId;
|
||
this.getOpl();
|
||
this.getworkerList();//工作人员
|
||
this.getgasList();//气体检测记录
|
||
},
|
||
onShow() {
|
||
},
|
||
methods: {
|
||
cancelPreImg(){
|
||
this.preImg = false;
|
||
},
|
||
//获取工作operation
|
||
getOpl() {
|
||
//debugger;
|
||
let that = this;
|
||
that.$u.api.oplItem(that.oplId).then((res) => {
|
||
that.formData ={...res} ;
|
||
res.create_imgs_.forEach(item=>{
|
||
that.create_imgs_list.push({
|
||
url: that.vuex_host+item.path,
|
||
id:item.id,
|
||
})
|
||
})
|
||
res.close_imgs_.forEach(item=>{
|
||
that.close_imgs_list.push({
|
||
url: that.vuex_host+item.path,
|
||
id:item.id,
|
||
})
|
||
})
|
||
});
|
||
},
|
||
//
|
||
//获取工作人员
|
||
getworkerList() {
|
||
let that = this;
|
||
that.$u.api.oplWorker({opl: that.oplId, page: 0}).then(res => {
|
||
that.workerList =res;
|
||
})
|
||
},
|
||
//获取气体检测记录
|
||
getgasList(){
|
||
let that = this;
|
||
that.$u.api.oplGasList({opl: that.oplId, page: 0}).then(res => {
|
||
that.gasList =res;
|
||
})
|
||
},
|
||
mtaskStateChange(type){
|
||
let that = this;
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '正在处理...'
|
||
})
|
||
if(type==='start'){
|
||
that.$u.api.oplMtartMtask(that.oplId).then(res=>{
|
||
uni.hideLoading()
|
||
that.formData.mtask_uid=res.mtask_uid
|
||
}).catch(e=>uni.hideLoading())
|
||
}else{
|
||
that.$u.api.oplStopMtask(that.oplId).then(res=>{
|
||
uni.hideLoading()
|
||
that.formData.mtask_uid=null
|
||
}).catch(e=>uni.hideLoading())
|
||
}
|
||
},
|
||
//解绑卡
|
||
bindBtl(row,type){
|
||
let that = this;
|
||
let form = {};
|
||
form.type = type;
|
||
form.employee = row.worker_.id;
|
||
if(type==10){
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
form.code = res.result;
|
||
that.$u.api.thirdBltBind(form).then(res=>{
|
||
//debugger;
|
||
console.log(res)
|
||
uni.showToast({
|
||
title: res,
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
});
|
||
}else{
|
||
that.$u.api.thirdBltBind(form).then(res=>{
|
||
//debugger;
|
||
uni.showToast({
|
||
title: res,
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
viewWorker(item) {
|
||
this.workerItem = item;
|
||
this.detailLimited = true;
|
||
},
|
||
closeWorkerDetail(){
|
||
this.detailLimited = false;
|
||
this.workerItem = null;
|
||
},
|
||
preView(srcImg){
|
||
this.preImg = true;
|
||
if(srcImg=='' || srcImg == null){
|
||
uni.showToast({
|
||
title: '未上传证件照片',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
this.preImgSrc = this.vuex_host+srcImg;
|
||
console.log(this.preImgSrc)
|
||
// this.$refs.imgPreView.open();
|
||
},
|
||
cancelPreView(){
|
||
this.preImgSrc = '';
|
||
},
|
||
viewcertificate(item){
|
||
let vuex_host = this.vuex_host;
|
||
uni.showModal({
|
||
title: '证书',
|
||
content:item.name+'-'+item.number,
|
||
confirmText:'下载',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
//下载证书
|
||
console.log('点击下载');
|
||
console.log(item.file);
|
||
//debugger;
|
||
let downloadFileUrl = vuex_host+item.file;
|
||
console.log(vuex_host)
|
||
console.log(downloadFileUrl)
|
||
uni.downloadFile({
|
||
url:downloadFileUrl,
|
||
success:(data)=> {
|
||
console.log(data);
|
||
console.log('下载反馈');
|
||
|
||
if(data.statusCode==200){
|
||
uni.saveFile({
|
||
tempFilePath: data.tempFilePath,
|
||
success: function (ress) {
|
||
console.log('保存成功')
|
||
console.log(ress)
|
||
//debugger;
|
||
uni.showToast({
|
||
title: '文件已保存',
|
||
icon: 'none',
|
||
duration:3000,
|
||
})
|
||
//debugger;
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
fail(err) {
|
||
console.log(err.errMsg)
|
||
}
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
uni-page-body {
|
||
color: #303133;
|
||
font-size: 15px;
|
||
height: 100%;
|
||
background: #f3fbff;
|
||
}
|
||
.bodyContainer {
|
||
background-color: #f3fbff;
|
||
}
|
||
>>>.uni-navbar__header,
|
||
>>>.uni-status-bar {
|
||
background-image: linear-gradient(254deg,
|
||
#0ca7ee 0%,
|
||
#005aff 100%,
|
||
#2a8cff 100%,
|
||
#54bdff 100%),
|
||
linear-gradient(#e60012,
|
||
#e60012);
|
||
}
|
||
>>>uni-image{
|
||
height: 200upx;
|
||
width: 200upx;
|
||
}
|
||
.my-data {
|
||
background-color: #f3fbff;
|
||
padding-bottom: 227rpx;
|
||
}
|
||
|
||
.nav-bar>>>.uni-navbar-btn-text text {
|
||
font-size: 32rpx !important;
|
||
}
|
||
|
||
.wrap-view {
|
||
width: 720rpx;
|
||
margin: 0 auto;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
line-height: 94rpx;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 30rpx;
|
||
padding-bottom: 30upx;
|
||
}
|
||
.wrap-top{
|
||
line-height: 60upx;
|
||
margin-top: 20upx;
|
||
}
|
||
.item {
|
||
margin: 0rpx 32rpx;
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
}
|
||
.item.title{
|
||
height: 100upx;
|
||
line-height: 100upx;
|
||
border-bottom: 1upx solid #dddddd;
|
||
}
|
||
.item_bottom_border{
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.title {
|
||
color: #212121;
|
||
flex: 1;
|
||
}
|
||
|
||
.content {
|
||
flex: 3;
|
||
color: #666666;
|
||
}
|
||
.contentFlex{
|
||
display: flex;
|
||
/* justify-content: space-between; */
|
||
}
|
||
.workersWrap{
|
||
|
||
}
|
||
.checkWrap{
|
||
font-size: 28upx;
|
||
align-items:center;
|
||
padding: 10upx 20upx;
|
||
}
|
||
.checkItem{
|
||
width: 50%;
|
||
color: #212121;
|
||
display: inline-block;
|
||
}
|
||
.checkItemLable{
|
||
color: #212121;
|
||
width: 140upx;
|
||
display: inline-block;
|
||
text-align: right;
|
||
margin-right: 6upx;
|
||
}
|
||
.checkItemValue{
|
||
color: #666666;
|
||
}
|
||
.workersItem{
|
||
display: flex;
|
||
font-size: 28upx;
|
||
align-items:center;
|
||
}
|
||
|
||
.itemTitle{
|
||
height: 80upx;
|
||
font-size: 32upx;
|
||
line-height: 40upx;
|
||
}
|
||
.itemTitle>.workerCell{
|
||
color: #212121;
|
||
}
|
||
.workerCell{
|
||
flex: 1;
|
||
color: #666666;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
}
|
||
.blueLine{
|
||
height: 24upx;
|
||
width: 10upx;
|
||
background: #2a8cff;
|
||
margin-top: 39upx;
|
||
margin-right: 12upx;
|
||
}
|
||
.bindBtn{
|
||
width: 80upx;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
background: #2a8cff;
|
||
display: inline-block;
|
||
border-radius: 16upx;
|
||
color: #ffffff;
|
||
font-size: 25upx;
|
||
text-align: center;
|
||
margin-right: 20upx;
|
||
}
|
||
.bindBtn2{
|
||
width: 80upx;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
background: #ff0000;
|
||
display: inline-block;
|
||
border-radius: 16upx;
|
||
color: #ffffff;
|
||
font-size: 25upx;
|
||
text-align: center;
|
||
}
|
||
.certificate{
|
||
word-break:keep-all;
|
||
white-space:nowrap;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
}
|
||
|
||
#workerWrap{
|
||
height: 100%;
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(0,0,0,.6);
|
||
}
|
||
.workerContainer{
|
||
position: relative;
|
||
width: 90%;
|
||
left: 5%;
|
||
background: #ffffff;
|
||
padding: 40upx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
max-height: 80%;
|
||
overflow-y: scroll;
|
||
border-radius: 20upx;
|
||
}
|
||
.workerInfo{
|
||
display: flex;
|
||
margin: 20upx 0;
|
||
}
|
||
.infoTitle{
|
||
width: 170upx;
|
||
}
|
||
.closeDetailIcon{
|
||
position: absolute;
|
||
bottom: 5%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.preBigImgWrap{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
display: block;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
.bigImg{
|
||
min-width: 90%;
|
||
max-width: 100%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50% ,-50%);
|
||
}
|
||
</style>
|