456 lines
12 KiB
Vue
456 lines
12 KiB
Vue
<template>
|
||
<view class="work-plan-details">
|
||
<u-navbar
|
||
class="u-navbar"
|
||
title="作业计划详情"
|
||
placeholder
|
||
@leftClick="leftClick"
|
||
leftIconColor="#fff"
|
||
bgColor="#00337A"
|
||
:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
|
||
/>
|
||
|
||
<uni-card :is-shadow="true" margin="6">
|
||
<view class="card-header">
|
||
<uni-icons type="list" size="16" style="color: #3f9dfd; margin-right: 8rpx"></uni-icons>
|
||
<text>
|
||
{{ queryInfo.proName }}
|
||
</text>
|
||
</view>
|
||
<view class="card-header">
|
||
<uni-icons type="calendar" size="16" style="margin-right: 8rpx"></uni-icons>
|
||
<view>{{ $moment().format('YYYY-MM-DD') }}</view>
|
||
</view>
|
||
</uni-card>
|
||
|
||
<uni-section title="今日作业计划" type="line">
|
||
<template v-slot:right>
|
||
<view @tap="onSearchAllPerson" style="color: #3f9dfd">全部人员</view>
|
||
</template>
|
||
<uni-card :is-shadow="true" margin="6">
|
||
<view v-for="item in todayWorkList" :key="item.contentId" @tap="onSearchWorkPerson(item.contentId)">
|
||
<view class="row-1">
|
||
<view>现场负责人</view>
|
||
<view>
|
||
<text>{{ item.xcfzr }}</text>
|
||
<!-- <text>{{ item.xcfzr.split('：')[1] }}</text> -->
|
||
</view>
|
||
<view>作业人员</view>
|
||
<view>{{ item.rys }}</view>
|
||
</view>
|
||
<view class="row-2">
|
||
<view>风险等级</view>
|
||
<view>{{ item.fxdj }}</view>
|
||
<view>执行情况</view>
|
||
<view>{{ item.state }}</view>
|
||
</view>
|
||
<view class="row-3">
|
||
<view style="padding: 8rpx 0">作业内容</view>
|
||
<view style="color: #000">{{ item.zynr }}</view>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
</uni-section>
|
||
|
||
<uni-section title="作业人员" type="line">
|
||
<uni-card :is-shadow="true" margin="6" padding="0">
|
||
<view class="work-person">
|
||
<view
|
||
:class="getPersonStyle(item)"
|
||
v-for="item in workPersonList"
|
||
:key="item.idNumber"
|
||
@tap="onClickTableTr(item.idNumber)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
</uni-section>
|
||
|
||
<uni-section title="人员持证" type="line">
|
||
<uni-card :is-shadow="true" margin="6" padding="0">
|
||
<view class="person-card">
|
||
<view
|
||
:class="getItemClass(index)"
|
||
v-for="(item, index) in holdCardList"
|
||
:key="index"
|
||
@tap="onQueryCardDetails(item)"
|
||
>
|
||
{{ item.certificateName }}({{ item.certificateNum }})
|
||
</view>
|
||
<!-- <view class="orange-border">低压电工作业（9）</view>
|
||
<view class="green-border">低压电工作业（9）</view>
|
||
<view class="blue-border">低压电工作业（9）</view>
|
||
<view class="orange-border">低压电工作业（9）</view> -->
|
||
</view>
|
||
</uni-card>
|
||
</uni-section>
|
||
|
||
<uni-section title="作业票、站班会照片" type="line" style="padding-bottom: 10rpx">
|
||
<uni-card :is-shadow="true" margin="6" padding="0">
|
||
<view class="img-container">
|
||
<view @tap="onPreviewImage(index)" v-for="(item, index) in standGuardList" :key="index">
|
||
<image
|
||
class="image-content"
|
||
:src="`${config.loginBaseUrl}ynPlan${item.imgPath}`"
|
||
mode="scaleToFill"
|
||
lazy-load="true"
|
||
></image>
|
||
|
||
<uni-icons style="color: #ccc" type="calendar" size="14">{{ item.crateTime }}</uni-icons>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
</uni-section>
|
||
|
||
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
|
||
<view class="popup-center">
|
||
<view class="popup-title">
|
||
<view>持证信息</view>
|
||
<uni-icons class="close-icon" style="color: #fff" type="close" size="26" @tap="onClosePopup"></uni-icons>
|
||
</view>
|
||
|
||
<uni-section title="持证人员列表" type="line">
|
||
<template v-slot:right>
|
||
<view
|
||
style="
|
||
padding: 10rpx;
|
||
border-radius: 12rpx;
|
||
border: 1px solid #3f9dfd;
|
||
color: #3f9dfd;
|
||
background-color: #d5e7f9;
|
||
"
|
||
>
|
||
{{ holdCardTitle }}
|
||
</view>
|
||
</template>
|
||
</uni-section>
|
||
|
||
<view class="table-th">
|
||
<view>持证名称</view>
|
||
<view>持证人姓名</view>
|
||
<view>工种</view>
|
||
</view>
|
||
|
||
<view style="padding: 5rpx">
|
||
<scroll-view style="height: 400rpx" scroll-y="true">
|
||
<view
|
||
class="table-tr"
|
||
v-for="item in holdCardDetailsList"
|
||
:key="item.idNumber"
|
||
@tap="onClickTableTr(item.idNumber)"
|
||
>
|
||
<view>{{ item.certificateName }}</view>
|
||
<view>{{ item.name }}</view>
|
||
<view>{{ item.gz }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getWorkPlanDetailsApi,
|
||
getWorkPersonnelApi,
|
||
getStandGuardImgApi,
|
||
getHoldCardInfoApi
|
||
} from '../../../api/phaseTwo/homePage'
|
||
import config from '@/config'
|
||
export default {
|
||
data() {
|
||
return {
|
||
queryInfo: {}, // 作业计划页面传递的参数
|
||
todayWorkList: [], // 今日计划
|
||
workPersonList: [], // 作业人员
|
||
holdCardList: [], // 持证信息
|
||
holdCardTitle: '',
|
||
holdCardDetailsList: [], // 持证信息详情
|
||
standGuardList: [
|
||
// { img_src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg', times: '9:20:06' },
|
||
// { img_src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', times: '9:20:06' }
|
||
], // 站班信息
|
||
contentId: '',
|
||
imgList: [], // 班组图片信息 作为预览使用
|
||
loading: false,
|
||
commonParams: {
|
||
proName: '',
|
||
day: this.$moment().format('YYYY-MM-DD')
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
getItemClass() {
|
||
return index => {
|
||
const styleIndex = index % 3
|
||
switch (styleIndex) {
|
||
case 0:
|
||
return 'blue-border'
|
||
case 1:
|
||
return 'orange-border'
|
||
case 2:
|
||
return 'green-border'
|
||
}
|
||
}
|
||
},
|
||
getPersonStyle() {
|
||
return item => {
|
||
const { kqState, userState } = item
|
||
|
||
if (userState == 1 && kqState == 1) return 'style_1' // 固定人员 打卡
|
||
if (userState == 1 && kqState != 1) return 'style_2' // 固定人员 未打卡
|
||
if (userState != 1 && kqState == 1) return 'style_3' // 临时人员 打卡
|
||
if (userState != 1 && kqState != 1) return 'style_4' // 临时人员 未打卡
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
leftClick() {
|
||
uni.navigateTo({ url: '/pages/realName/workPlan/index' })
|
||
},
|
||
/* 获取今日作业计划 */
|
||
async getTodayWorkPlan() {
|
||
const res = await getWorkPlanDetailsApi(this.commonParams)
|
||
this.todayWorkList = res.data
|
||
},
|
||
/* 获取人员信息 */
|
||
async getWorkPersonnelData() {
|
||
const contentIdParams = {
|
||
contentId: this.contentId
|
||
}
|
||
const params = Object.assign(this.commonParams, contentIdParams)
|
||
const res = await getWorkPersonnelApi(params)
|
||
const response = await getStandGuardImgApi(params)
|
||
|
||
this.workPersonList = res.data
|
||
console.log('人员信息---', res)
|
||
this.holdCardList = res.datac
|
||
this.standGuardList = response.data
|
||
|
||
this.imgList = this.standGuardList.map(e => {
|
||
return `${config.loginBaseUrl}ynPlan${e.imgPath}`
|
||
})
|
||
},
|
||
/* 点击作业计划时查询作业人员 */
|
||
onSearchWorkPerson(id) {
|
||
this.contentId = id
|
||
this.getWorkPersonnelData()
|
||
},
|
||
/* 查询持证信息 */
|
||
async onQueryCardDetails(item) {
|
||
this.holdCardTitle = `${item.certificateName}(${item.certificateNum})`
|
||
this.$refs.popup.open()
|
||
const params = Object.assign(this.commonParams, { certificateName: item.certificateName })
|
||
uni.showLoading({
|
||
title: '数据加载中'
|
||
})
|
||
const res = await getHoldCardInfoApi(params)
|
||
uni.hideLoading()
|
||
// console.log('resresres持证信息详情--', res)
|
||
this.holdCardDetailsList = res.data
|
||
},
|
||
/* 关闭持证信息弹框 */
|
||
onClosePopup() {
|
||
uni.hideLoading()
|
||
this.$refs.popup.close()
|
||
},
|
||
/* 持证详情列表点击事件 */
|
||
onClickTableTr(id) {
|
||
// 跳转人员信息页面
|
||
uni.navigateTo({ url: `/pages/realName/index/pages/personDetail?idNumber=${id}` })
|
||
},
|
||
/* 全部人员按钮 */
|
||
onSearchAllPerson() {
|
||
this.contentId = ''
|
||
this.getWorkPersonnelData()
|
||
},
|
||
/* 预览图片 */
|
||
onPreviewImage(index) {
|
||
uni.previewImage({
|
||
// urls: [
|
||
// 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
||
// 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
||
// ],
|
||
urls: this.imgList,
|
||
current: index,
|
||
loop: true
|
||
})
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const query = JSON.parse(options.query)
|
||
this.queryInfo = query
|
||
const { proName } = query
|
||
this.commonParams.proName = proName
|
||
this.getTodayWorkPlan().then(() => {
|
||
this.getWorkPersonnelData()
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.row-1,
|
||
.row-2 {
|
||
padding: 25rpx 0;
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
view {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.work-person {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
view {
|
||
width: 18%;
|
||
margin: 12rpx 0 12rpx calc(10% / 4);
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
text-align: center;
|
||
border-radius: 12rpx;
|
||
// background-color: #3f9dfd;
|
||
}
|
||
|
||
.style_1 {
|
||
background-color: #3f9dfd;
|
||
}
|
||
.style_2 {
|
||
border: 1px solid #3f9dfd;
|
||
color: #000;
|
||
}
|
||
.style_3 {
|
||
background-color: #fb1515;
|
||
}
|
||
.style_4 {
|
||
border: 1px solid #fb1515;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.work-person view:nth-child(5n + 1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.person-card {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
view {
|
||
width: calc(32%);
|
||
margin: 12rpx 0 12rpx calc(4% / 2);
|
||
box-sizing: border-box;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.blue-border {
|
||
border: 1px solid #3f9dfd;
|
||
color: #3f9dfd;
|
||
background-color: #d5e7f9;
|
||
}
|
||
.orange-border {
|
||
border: 1px solid #f5a208;
|
||
color: #f5a208;
|
||
background-color: #f7e3bf;
|
||
}
|
||
.green-border {
|
||
border: 1px solid #03af03;
|
||
color: #03af03;
|
||
background-color: #c5f3c5;
|
||
}
|
||
}
|
||
|
||
.person-card view:nth-child(3n + 1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.popup-center {
|
||
width: 90vw;
|
||
height: 50vh;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
.popup-title {
|
||
position: relative;
|
||
background-color: #3f9dfd;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 38rpx;
|
||
|
||
.close-icon {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.scroll-container {
|
||
width: 100%;
|
||
height: calc(100% - 100rpx);
|
||
}
|
||
|
||
.table-th {
|
||
display: flex;
|
||
view {
|
||
padding: 5rpx 0;
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.table-tr {
|
||
padding: 8rpx 0;
|
||
display: flex;
|
||
border-bottom: 1px solid #ccc;
|
||
view {
|
||
padding: 5rpx 0;
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.table-tr view:first-child {
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.img-container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
view {
|
||
width: 31%;
|
||
margin: 12rpx 0 12rpx calc(6% / 2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.image-content {
|
||
width: 100%;
|
||
height: 160rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img-container view:nth-child(3n + 1) {
|
||
margin-left: 0;
|
||
}
|
||
</style>
|