687 lines
15 KiB
Vue
687 lines
15 KiB
Vue
<template>
|
||
<view class="addIssue">
|
||
<view class="fixedheader">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
作业过程管控
|
||
</view>
|
||
</headers>
|
||
</view>
|
||
<view class="content" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
|
||
<view class="content-main1">
|
||
<view><text>{{workTicketCountInfo.ing}}</text> 张工作票正在施工中…</view>
|
||
<view></view>
|
||
</view>
|
||
<view class="content-main2">
|
||
<view class="main2_box1">
|
||
<view>
|
||
<view>{{workTicketCountInfo.notStarted}}</view>
|
||
<view>未开始</view>
|
||
</view>
|
||
<view>
|
||
<view>{{workTicketCountInfo.ing}}</view>
|
||
<view>施工中</view>
|
||
</view>
|
||
<view>
|
||
<view>{{workTicketCountInfo.done}}</view>
|
||
<view>已完工</view>
|
||
</view>
|
||
<view>
|
||
<view>{{workTicketCountInfo.pause}}</view>
|
||
<view>暂停中</view>
|
||
</view>
|
||
</view>
|
||
<view class="main2_box2">
|
||
<view @click="issueInvoiceShow = true">
|
||
<view>立即开票</view>
|
||
<view></view>
|
||
</view>
|
||
<view @click="navigateToDetail">
|
||
<view>所有工作票记录</view>
|
||
<view></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content-main3" v-if="workTicketList.length > 0">
|
||
<view class="main3_box" @click="onNavigateToDetail(item)" v-for="item in workTicketList" :key="item.id">
|
||
<view class="box-header">
|
||
<view>{{item.workTicketNumber}}</view>
|
||
<view>施工中</view>
|
||
</view>
|
||
<view class="box-item">
|
||
<view>类别</view>
|
||
<view>{{item.typeName}}</view>
|
||
</view>
|
||
<view class="box-content">
|
||
<view>作业内容</view>
|
||
<view @click.stop="item.expandMoreShow = !item.expandMoreShow">{{item.expandMoreShow ? '收起': '展开更多'}}
|
||
</view>
|
||
</view>
|
||
<view :class="{'webkit-clamp_2': !item.expandMoreShow}" class="box-content_detail">
|
||
{{item.workContent}}
|
||
</view>
|
||
<view class="box-item">
|
||
<view>施工场站</view>
|
||
<view>{{item.constructionAreaNames}}</view>
|
||
</view>
|
||
<view class="box-item">
|
||
<view>施工人员</view>
|
||
<view>{{item.operator}}</view>
|
||
</view>
|
||
<view class="box-item">
|
||
<view>施工计划时间</view>
|
||
<view>{{item.constructionTimeBegin}}至{{item.constructionTimeEnd}}</view>
|
||
</view>
|
||
<view class="box-bottom">
|
||
<view @click="onStateShow(2, item)">暂停作业</view>
|
||
<view @click="onStateShow(3, item)" class="btn-error">结束作业</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content-main3" v-else>
|
||
<view class="new-nodata">
|
||
<view></view>
|
||
<text>暂无数据...</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<u-popup v-model="issueInvoiceShow" :closeable="false" mode="bottom">
|
||
<view class="content-popup">
|
||
<view class="content-popup_header">
|
||
工作票类型
|
||
</view>
|
||
<scroll-view v-if="workTicketTypeList.length > 0" scroll-y="true" style="max-height: 600rpx;">
|
||
<TreeView :multiple="false" checked-bg-color="rgba(81,129,246,0.1)" :data="workTicketTypeList"
|
||
:children-key="'children'" :label-key="'typeName'" :id-key="'id'" v-model="checkedIds" />
|
||
</scroll-view>
|
||
<view class="new-nodata_height" v-else>
|
||
<view class="new-nodata">
|
||
<view></view>
|
||
<text>暂无数据...</text>
|
||
</view>
|
||
</view>
|
||
<view class="confrim-btn">
|
||
<view @click="issueInvoiceShow = false;">取消</view>
|
||
<view @click="onSubmit">确定</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-toast ref="uToast" />
|
||
<u-modal @cancel="onStateCancel" @confirm="onStateConfirm" v-model="stateShow"
|
||
:confirm-text="stateType == 2 ? '是,立即暂停' : '是，立即结束'" :show-cancel-button="true" cancel-text="不,继续作业">
|
||
<view class="slot-content">
|
||
<view class="content_main-box1" v-if="stateType == 2">
|
||
<view>
|
||
暂未全部施工完成，将进入暂停施工状态，待下次点击继续作业...
|
||
</view>
|
||
<view>
|
||
<u-icon name="info-circle"></u-icon>
|
||
<view>点击暂停作业后，则会下发指令到作业监控设备，关闭设备录像。</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_main-box1" v-else-if="stateType == 4">
|
||
<view>
|
||
作业已全部施工完成，点击结束作业
|
||
</view>
|
||
<view>
|
||
<u-icon name="info-circle"></u-icon>
|
||
<view>点击结束作业后，则会下发指令到作业监控设备，关闭设备录像并释放此设备</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TreeView from '@/components/tree-view/TreeView.vue';
|
||
export default {
|
||
components: {
|
||
TreeView
|
||
},
|
||
data() {
|
||
return {
|
||
mobileTopHeight: 0,
|
||
projectDetail: {},
|
||
issueInvoiceShow: false,
|
||
workTicketTypeList: [],
|
||
checkedIds: [],
|
||
workTicketList: [],
|
||
workTicketCountInfo: {
|
||
notStarted: 0,
|
||
ing: 0,
|
||
done: 0,
|
||
pause: 0
|
||
},
|
||
stateShow: false,
|
||
stateType: "",
|
||
stateInfo: {},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
|
||
this.getWorkTicketTypeListFn();
|
||
},
|
||
onShow() {
|
||
this.checkedIds = [];
|
||
this.getWorkTicketCountWorkTicketFn();
|
||
this.getWorkTicketListFn();
|
||
},
|
||
mounted() {
|
||
var that = this
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
||
uni.setStorageSync('systemInfo', res)
|
||
console.log(res)
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
// 打开详情
|
||
onNavigateToDetail(row) {
|
||
uni.navigateTo({
|
||
url: `./workTicketDetail?id=${row.id}`
|
||
})
|
||
},
|
||
onStateShow(type, row) {
|
||
this.stateType = type;
|
||
this.stateInfo = row,
|
||
this.stateShow = true;
|
||
},
|
||
onStateCancel() {
|
||
this.stateShow = false;
|
||
},
|
||
onStateConfirm() {
|
||
this.onChangeState(this.stateType, this.stateInfo);
|
||
this.stateShow = false;
|
||
},
|
||
navigateToDetail() {
|
||
uni.navigateTo({
|
||
url: './workTicketList'
|
||
})
|
||
},
|
||
onChangeState(operateStatus, item) {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
id: item.id,
|
||
operateStatus,
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicket/operateWorkTicket',
|
||
method: 'POST',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
that.getWorkTicketListFn();
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onSubmit() {
|
||
console.log(this.checkedIds);
|
||
if (this.checkedIds.length == 0) return this.showToast('请先选择作业票类型', 'warning');
|
||
this.issueInvoiceShow = false;
|
||
// this.checkedIds[0]
|
||
uni.navigateTo({
|
||
url: `./addWorkTicket?id=${this.checkedIds[0]}`
|
||
})
|
||
},
|
||
// 获取统计
|
||
getWorkTicketCountWorkTicketFn() {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicket/countWorkTicket',
|
||
method: 'POST',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
that.workTicketCountInfo = res.result;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 列表查询工作票信息
|
||
getWorkTicketListFn() {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
status: 2
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicket/list',
|
||
method: 'GET',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
that.workTicketList = res.result.map(item => {
|
||
return {
|
||
...item,
|
||
expandMoreShow: false,
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取工作票类型
|
||
getWorkTicketTypeListFn() {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
pageNo: 1,
|
||
pageSize: -1,
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicketType/tree/page',
|
||
method: 'GET',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
const resultList = res.result.records.map(item => {
|
||
return {
|
||
...item,
|
||
}
|
||
})
|
||
that.workTicketTypeList = [...resultList];
|
||
}
|
||
}
|
||
})
|
||
},
|
||
showToast(title, type) {
|
||
this.$refs.uToast.show({
|
||
title: title,
|
||
type: type,
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/deep/ .u-mode-center-box {
|
||
width: 698rpx !important;
|
||
|
||
.u-model__title {
|
||
padding: 0;
|
||
font-size: 32rpx;
|
||
color: #272D45;
|
||
height: 86rpx;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.u-model__content__message {
|
||
padding: 26rpx 26rpx 72rpx;
|
||
font-size: 28rpx;
|
||
color: #171717;
|
||
}
|
||
|
||
.u-model__footer__button {
|
||
height: 76rpx;
|
||
line-height: 76rpx;
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #5181F6;
|
||
}
|
||
|
||
.hairline-left {
|
||
background-color: #5181F6;
|
||
color: white !important;
|
||
}
|
||
|
||
.content_main-box1 {
|
||
padding: 26rpx 28rpx;
|
||
|
||
>view:first-child {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #171717;
|
||
}
|
||
|
||
>view:last-child {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
font-size: 24rpx;
|
||
color: #FFA026;
|
||
margin-top: 26rpx;
|
||
|
||
.u-icon {
|
||
font-size: 35rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .u-drawer-bottom {
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
}
|
||
|
||
.content-popup {
|
||
.content-popup_header {
|
||
height: 86rpx;
|
||
box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 30rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
uni-scroll-view {
|
||
margin: 26rpx 0;
|
||
}
|
||
.confrim-btn {
|
||
padding: 18rpx 26rpx;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
|
||
>view {
|
||
width: 50%;
|
||
height: 76rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
>view:first-child {
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
border-radius: 6rpx 0rpx 0rpx 6rpx;
|
||
color: #5181F6;
|
||
}
|
||
|
||
>view:last-child {
|
||
background-color: #5181F6;
|
||
border-radius: 0rpx 6rpx 6rpx 0rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-main3 {
|
||
padding: 26rpx;
|
||
min-height: 700rpx;
|
||
position: relative;
|
||
|
||
>.main3_box:not(:first-child) {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.main3_box {
|
||
padding: 30rpx 28rpx 140rpx;
|
||
background-color: white;
|
||
border-radius: 18rpx;
|
||
position: relative;
|
||
|
||
.box-bottom {
|
||
width: 100%;
|
||
padding: 0 26rpx;
|
||
height: 112rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
border-radius: 0 0 18rpx 18rpx;
|
||
justify-content: flex-end;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
>view {
|
||
padding: 10rpx 18rpx;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #3E89FD;
|
||
font-size: 28rpx;
|
||
color: #3E89FD;
|
||
}
|
||
|
||
>view:not(:first-child) {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.btn-error {
|
||
border-color: #ED2B29;
|
||
color: #ED2B29;
|
||
}
|
||
}
|
||
|
||
.box-content_detail {
|
||
font-size: 28rpx;
|
||
color: #4D4D4D;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.webkit-clamp_2 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/* 限制为两行 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.box-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 26rpx;
|
||
font-size: 28rpx;
|
||
|
||
>view:first-child {
|
||
color: #808080;
|
||
}
|
||
|
||
>view:last-child {
|
||
font-size: 24rpx;
|
||
color: #4D8EEC;
|
||
}
|
||
}
|
||
|
||
.box-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 26rpx;
|
||
font-size: 28rpx;
|
||
|
||
>view:first-child {
|
||
width: 168rpx;
|
||
margin-right: 26rpx;
|
||
color: #808080;
|
||
}
|
||
|
||
>view:last-child {
|
||
flex: 1;
|
||
color: #4D4D4D;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
/* 限制为两行 */
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>view:first-child {
|
||
font-weight: 800;
|
||
font-size: 30rpx;
|
||
color: #171717;
|
||
}
|
||
|
||
>view:last-child {
|
||
padding: 4rpx 20rpx;
|
||
background-color: #BED0FA;
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #F1F1F1;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #5181F6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-main2 {
|
||
padding: 26rpx;
|
||
background-color: #4B8DEC;
|
||
|
||
.main2_box1 {
|
||
display: flex;
|
||
color: white;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
|
||
>view {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
>view:first-child {
|
||
margin-bottom: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main2_box2 {
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>view {
|
||
width: 330rpx;
|
||
height: 124rpx;
|
||
padding: 0 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(3, 92, 181, 0.1);
|
||
border-radius: 16rpx;
|
||
|
||
>view:first-child {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
>view:last-child {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-image: url('@/static/workTicketManage/index-icon2.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
>view:last-child>view:last-child {
|
||
background-image: url('@/static/workTicketManage/index-icon3.png');
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-main1 {
|
||
padding: 26rpx 56rpx;
|
||
background-color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>view:first-child {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
/* 限制为两行 */
|
||
overflow: hidden;
|
||
|
||
>text {
|
||
font-size: 64rpx;
|
||
color: #4B8DEC;
|
||
font-weight: bold;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
>view:last-child {
|
||
width: 176rpx;
|
||
height: 180rpx;
|
||
background-image: url('@/static/workTicketManage/index-icon1.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.addIssue {
|
||
min-height: 100vh;
|
||
background-color: #F2F3F7;
|
||
}
|
||
|
||
.content {}
|
||
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
|
||
/deep/ .headerBox {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.headerName {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.new-nodata_height {
|
||
min-height: 500rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.new-nodata {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
>view {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
background-image: url('@/static/staffAttendance/nodata.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
>text {
|
||
font-size: 22rpx;
|
||
color: #808080;
|
||
margin-top: 60rpx;
|
||
}
|
||
}
|
||
</style> |