1051 lines
22 KiB
Vue

<template>
<view class="addIssue">
<view class="fixedheader">
<headers :showBack="true" :themeType="true">
<view class="headerName">
风险点设置
</view>
</headers>
</view>
<view class="content" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
<view class="content_main">
<!-- <view class="header-title">基础信息</view> -->
<view class="main-box">
<view class="box1">
<view>风险描述:</view>
<view class="textarea">
<u-input :clearable="false" v-model="workTicketInfo.riskSituationDescription"
:maxlength="200" placeholder="请输入" type="textarea" :border="true" />
<view class="textarea_text">
<text>{{workTicketInfo.riskSituationDescription.length}}</text>/200</view>
</view>
</view>
<view class="box1">
<view>有效时间:</view>
<view>
<view class="changetime" @click="constructionTimeShow = true">
<view class="changetime_icon"></view>
<view>{{ workTicketInfo.effectiveTimeBegin }}</view>
<view>-</view>
<view>{{ workTicketInfo.effectiveTimeEnd }}</view>
<view class="changetime_icon"></view>
</view>
<u-calendar v-model="constructionTimeShow" mode="range" :max-date="'2300-01-01'"
@change="onConstructionTimeChange"></u-calendar>
</view>
</view>
<view class="box1">
<view>区域/部位:</view>
<view>
<u-input v-model="workTicketInfo.areaLocation" placeholder="请输入" type="text"
:border="true" />
</view>
</view>
<view class="box1">
<view>活动频次:</view>
<view><u-input v-model="workTicketInfo.activityFrequency" placeholder="请输入" type="number"
:border="true" /></view>
</view>
<view class="box1">
<view>责任区域:</view>
<view @click="onClickType(1)">
<u-input disabled style="pointer-events:none" :value="workTicketInfo.specificResponsibilityAreaNames"
type="text" :border="true" placeholder="请选择" />
</view>
</view>
</view>
</view>
<view class="confrim-btn">
<view @click="onNavigateBack">取消</view>
<view @click="getworkTicketEditFn">保存</view>
</view>
</view>
<u-popup :mask-close-able="false" v-model="constructionAreasShow" :closeable="false" mode="bottom">
<view class="content-popup">
<view class="content-popup_header">
责任区域
</view>
<scroll-view v-if="qualityRegionList.length > 0" scroll-y="true" style="max-height: 600rpx;">
<TreeView @node-click="onConstructionAreasClick" :multiple="true"
checked-bg-color="rgba(81,129,246,0.1)" :data="qualityRegionList" :children-key="'children'"
:label-key="'regionName'" :id-key="'id'" :value="constructionAreasList" />
</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="onCancelClick(1)">取消</view>
<view @click="onSubmitType(1)">确定</view>
</view>
</view>
</u-popup>
<u-toast ref="uToast" />
</view>
</template>
<script>
import TreeView from '@/components/tree-view/TreeView.vue';
import {
handleAuthScan
} from "@/common/permissionTips"
export default {
components: {
TreeView
},
data() {
return {
mobileTopHeight: 0,
projectDetail: {},
issueInvoiceShow: false,
workTicketInfo: {
riskSituationDescription: "",
effectiveTimeBegin: "",
effectiveTimeEnd: "",
specificResponsibilityAreaIds: [],
specificResponsibilityAreaNames: "",
areaLocation: "",
activityFrequency: "",
},
// 区域
qualityRegionList: [],
constructionAreasList: [],
constructionAreasNameList: [],
constructionAreasShow: false,
constructionTimeShow: false,
riskListPointId: "",
}
},
onLoad(opts) {
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
console.log(1111, opts, this.projectDetail)
this.riskListPointId = opts.id;
this.getWorkTicketQueryByIdFn();
this.getQualityRegionListFn();
},
onShow() {
let that = this
},
mounted() {
var that = this
uni.getSystemInfo({
success(res) {
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
uni.setStorageSync('systemInfo', res)
console.log(res)
}
})
},
methods: {
// 通过id查询管控清单信息
getWorkTicketQueryByIdFn() {
let that = this;
let data = {
projectSn: this.projectDetail.projectSn,
id: this.riskListPointId,
};
this.sendRequest({
url: 'xmgl/riskListPoint/queryById',
method: 'GET',
data: data,
success: res => {
if (res.code == 200) {
this.workTicketInfo = {
...res.result,
specificResponsibilityAreaIds: res.result.specificResponsibilityAreaIds ?
res.result
.specificResponsibilityAreaIds.split(',') : [],
specificResponsibilityAreaNames: res.result.specificResponsibilityAreaNames,
};
}
}
})
},
// 编辑管控清单
getworkTicketEditFn() {
let that = this;
let data = {
...this.workTicketInfo,
specificResponsibilityAreaIds: this.workTicketInfo.specificResponsibilityAreaIds.join(','),
projectSn: this.projectDetail.projectSn,
};
console.log(data)
this.sendRequest({
url: 'xmgl/riskListPoint/edit',
method: 'POST',
data: data,
success: res => {
if (res.code == 200) {
that.showToast('编辑成功', 'success');
that.onNavigateBack();
}
}
})
},
// 取消
onNavigateBack() {
uni.navigateBack({
delta: 1
})
},
// 获取时间
onConstructionTimeChange(event) {
console.log(event)
this.workTicketInfo.effectiveTimeBegin = event.startDate;
this.workTicketInfo.effectiveTimeEnd = event.endDate;
},
// 多选下拉 1区域 2单位 3人员
onClickType(type) {
if (type == 1) {
this.constructionAreasList = this.workTicketInfo.specificResponsibilityAreaIds.map(item => item);
this.constructionAreasNameList = this.workTicketInfo.specificResponsibilityAreaNames ? this
.workTicketInfo
.specificResponsibilityAreaNames.split(',') : [];
this.constructionAreasShow = true;
}
},
// 区域
onConstructionAreasClick(id, checked, label) {
console.log(id, checked, label)
const idx = this.constructionAreasList.indexOf(id);
if (checked && idx === -1) {
this.constructionAreasList.push(id);
this.constructionAreasNameList.push(label);
} else if (!checked && idx !== -1) {
this.constructionAreasList.splice(idx, 1);
this.constructionAreasNameList.splice(idx, 1);
}
console.log(1122, this.constructionAreasNameList, this.constructionAreasList)
},
onSubmitType(type) {
if (type == 1) {
console.log(11233, this.constructionAreasNameList)
this.workTicketInfo.specificResponsibilityAreaIds = [...this.constructionAreasList];
this.workTicketInfo.specificResponsibilityAreaNames = this.constructionAreasNameList.join(',');
this.constructionAreasShow = false;
}
},
onCancelClick(type) {
if (type == 1) {
this.constructionAreasList = [...this.workTicketInfo.specificResponsibilityAreaIds];
this.constructionAreasShow = false;
}
},
// 获取责任区域
getQualityRegionListFn() {
let that = this;
let data = {
projectSn: this.projectDetail.projectSn,
pageNo: 1,
pageSize: -1,
};
this.sendRequest({
url: 'xmgl/qualityRegion/tree/page',
method: 'POST',
data: data,
success: res => {
if (res.code == 200) {
that.qualityRegionList = res.result.records;
}
}
})
},
showToast(title, type) {
this.$refs.uToast.show({
title: title,
type: type,
})
},
},
}
</script>
<style scoped lang="scss">
.content {
.content_main2 {
background-color: white;
min-height: calc(100vh - 88rpx - 180rpx);
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 94rpx;
>view:first-child {
width: 502rpx;
height: 336rpx;
background-image: url('@/static/workTicketManage/index-icon11.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.edit_img {
background-image: url('@/static/workTicketManage/index-icon12.png') !important;
}
>view:nth-child(2) {
font-weight: 500;
font-size: 28rpx;
color: #171717;
margin-top: 30rpx;
}
>view:nth-child(3) {
font-size: 24rpx;
color: #FFA026;
margin-top: 26rpx;
display: flex;
align-items: flex-start;
.u-icon {
font-size: 36rpx;
}
}
}
.content_main1 {
margin-top: 26rpx;
padding-bottom: 138rpx;
// background-color: white;
// min-height: calc(100vh - 88rpx - 180rpx - 26rpx);
.content_main-box {
height: 224rpx;
background-color: #FFFFFF;
padding: 26rpx;
margin-top: 20rpx;
>view:last-child {
margin-top: 22rpx;
display: flex;
align-items: center;
>image {
width: 80rpx;
height: 104rpx;
border-radius: 6rpx;
}
>view:last-child {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 40rpx;
height: 104rpx;
>view {
display: flex;
>view:first-child {
width: 84rpx;
font-size: 28rpx;
color: #4D4D4D;
text-align: right;
}
>view:last-child {
margin-left: 40rpx;
font-size: 28rpx;
color: #4D4D4D;
}
}
}
}
>view:first-child {
display: flex;
align-items: center;
justify-content: space-between;
>view:first-child {
font-weight: 800;
font-size: 30rpx;
color: #171717;
}
image {
width: 32rpx;
height: 32rpx;
}
.u-icon {
font-size: 40rpx;
color: #EA3941;
}
}
}
.header-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 26rpx;
background-color: white;
>view:first-child {
font-weight: 500;
font-size: 30rpx;
color: #1A1A1A;
}
>view:last-child {
display: flex;
align-items: center;
>view:first-child {
width: 40rpx;
height: 40rpx;
background-image: url('@/static/workTicketManage/index-icon10.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
>view:last-child {
font-weight: 500;
font-size: 24rpx;
color: #4D8EEC;
margin-left: 20rpx;
}
}
}
}
.content_main {
margin-top: 26rpx;
padding-bottom: 138rpx;
background-color: white;
.main-box {
padding: 0 16rpx;
>.box2 {
flex-direction: column;
margin-top: 0 !important;
>view:first-child {
width: 192rpx !important;
}
.imgBox_wrap_list {
flex-direction: column;
align-items: flex-start !important;
margin-left: 142rpx;
.addImgBox_text {
margin-top: 20rpx;
margin-bottom: 10rpx;
font-size: 24rpx;
color: #808080;
}
.addImgBox_btn {
width: 184rpx;
height: 66rpx;
background-color: #5181F6;
border-radius: 6rpx;
font-size: 28rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.imgBox_list {
width: 550rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14rpx 26rpx 14rpx 40rpx;
>view:first-child {
display: flex;
align-items: center;
.u-icon {
font-size: 40rpx;
color: #B3B3B3;
}
>view:last-child {
margin-left: 14rpx;
width: 320rpx;
font-size: 24rpx;
color: #808080;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
>.u-icon {
font-size: 32rpx;
color: #7AC756;
}
}
.imgBox_list_active {
>view:first-child {
.u-icon,
>view:last-child {
color: #5181F6;
}
}
>.u-icon {
color: #B3B3B3;
}
}
.imgBox_list:nth-child(even) {
background-color: #FBFBFB;
}
.imgBox_list:nth-child(odd) {
background-color: #FFFFFF;
}
}
.imgBox_wrap {
display: flex;
flex-wrap: wrap;
margin-left: 192rpx;
flex: 1;
>view:not(:last-child) {
margin-right: 26rpx;
}
>view {
margin-bottom: 20rpx;
}
.imgBox {
width: 112rpx;
height: 120rpx;
display: inline-flex;
position: relative;
border-radius: 8rpx;
.img {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.deleteImg {
position: absolute;
right: -20rpx;
top: -20rpx;
color: #fff;
width: 20rpx;
height: 20rpx;
background-image: url('@/static/workTicketManage/index-icon9.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.addImgBox {
width: 118rpx;
height: 120rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 2rpx solid #D8DBE8;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
.icon-add {
width: 40rpx;
height: 40rpx;
}
}
}
}
>.box1:not(:first-child) {
margin-top: 20rpx;
}
>.box1 {
display: flex;
align-items: flex-start;
font-size: 28rpx;
font-weight: 500;
>view:first-child {
width: 164rpx;
color: #808080;
height: 68rpx;
display: flex;
align-items: center;
>text {
color: #FF0000;
}
}
>view:last-child {
color: #4D4D4D;
min-height: 68rpx;
display: flex;
align-items: center;
}
}
/deep/ .u-input {
width: 550rpx;
height: 68rpx;
line-height: 68rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #D8DBE8;
}
.changetime {
width: 550rpx;
height: 68rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #D8DBE8;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 34rpx;
font-size: 28rpx;
color: #4D4D4D;
.changetime_icon {
width: 36rpx;
height: 36rpx;
background-image: url('@/static/workTicketManage/index-icon7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.textarea {
position: relative;
/deep/ .u-input {
// height: 160rpx;
line-height: 68rpx;
min-height: 160rpx !important;
height: initial;
padding-bottom: 20px !important;
}
.textarea_text {
position: absolute;
right: 20rpx;
bottom: 20rpx;
font-size: 22rpx;
color: #B3B3B3;
}
}
}
.header-title {
padding: 12rpx 16rpx;
font-weight: 500;
font-size: 30rpx;
color: #1A1A1A;
border-bottom: 2rpx solid #EFF3F7;
}
}
.confrim-btn {
width: 100%;
padding: 18rpx 26rpx;
background-color: #FFFFFF;
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
display: flex;
position: fixed;
bottom: 0;
z-index: 1;
>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;
}
}
}
/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;
}
}
/deep/ .u-drawer-bottom {
border-radius: 32rpx 32rpx 0 0;
}
.content-popup {
.content-popup_main {
padding: 26rpx 0;
>view {
width: 100%;
height: 80rpx;
background-color: #FFFFFF;
font-weight: 500;
font-size: 30rpx;
color: #1A1A1A;
display: flex;
align-items: center;
justify-content: center;
}
>view:not(:first-child) {
margin-top: 20rpx;
}
.popup_main_active {
background-color: rgba(81, 129, 246, 0.1);
color: #5181F6;
}
}
uni-scroll-view {
margin: 26rpx 0;
}
.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;
}
.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;
}
}
}
.addIssue {
min-height: 100vh;
background-color: #FFFFFF;
}
/deep/ .u-steps {
background-color: #FFFFFF;
padding: 26rpx;
.u-steps__item {
flex: unset;
.u-steps__item__dot {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
background-color: #F4333C !important;
position: relative;
}
.u-steps__item__dot::after {
content: "";
width: 40rpx;
height: 40rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.u-steps__item:nth-child(1) .u-steps__item__line {
width: 230rpx;
left: 80%;
}
.u-steps__item:nth-child(1) .u-steps__item__dot {
background-color: #008DE4 !important;
}
.u-steps__item:nth-child(1) .u-steps__item__dot::after {
background-image: url('@/static/workTicketManage/index-icon4.png');
}
.u-steps__item:nth-child(2) {
flex: 1;
.u-steps__item__line {
width: 220rpx;
left: 57%;
.u-line {
border-color: #F4353E !important;
border-bottom: 4rpx solid #F4353E !important;
}
}
.u-steps__item__dot::after {
background-image: url('@/static/workTicketManage/index-icon5.png');
}
}
.u-steps__item:nth-child(3) .u-steps__item__dot::after {
background-image: url('@/static/workTicketManage/index-icon6.png');
}
.u-steps__item__line {
top: calc(72rpx / 2) !important;
.u-line {
border-color: #038EE4 !important;
border-bottom: 4rpx solid #038EE4 !important;
}
}
.u-steps__item__text--row {
font-weight: 500;
font-size: 30rpx;
color: #1A1A1A !important;
margin-top: 12rpx;
}
}
/deep/ .steps_1 {
.u-steps__item:nth-child(2) .u-steps__item__dot {
background-color: #008DE4 !important;
}
.u-steps__item:nth-child(2) .u-steps__item__line .u-line {
border-color: #038EE4 !important;
border-bottom: 4rpx solid #038EE4 !important;
}
}
/deep/ .steps_2 {
.u-steps__item:nth-child(3) .u-steps__item__dot {
background-color: #008DE4 !important;
}
}
/deep/ .steps_3 {
.u-steps__item:nth-child(1) .u-steps__item__line {
width: 520rpx;
left: 80%;
}
.u-steps__item:nth-child(2) .u-steps__item__line {
opacity: 0;
}
.u-steps__item:nth-child(2) .u-steps__item__dot {
opacity: 0;
}
}
.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;
}
}
.content_main-box1 {
height: 224rpx;
// background-color: #FFFFFF;
padding: 26rpx;
/deep/ .uni-checkbox-input {
width: 32rpx;
height: 32rpx;
}
>view:last-child {
margin-top: 22rpx;
display: flex;
align-items: center;
>image {
width: 80rpx;
height: 104rpx;
border-radius: 6rpx;
}
>view:last-child {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 40rpx;
height: 104rpx;
>view {
display: flex;
>view:first-child {
width: 84rpx;
font-size: 28rpx;
color: #4D4D4D;
text-align: right;
}
>view:last-child {
margin-left: 40rpx;
font-size: 28rpx;
color: #4D4D4D;
}
}
}
}
>view:first-child {
display: flex;
align-items: center;
justify-content: space-between;
>view:first-child {
font-weight: 800;
font-size: 30rpx;
color: #171717;
}
>view:last-child {
width: 90rpx;
height: 42rpx;
background-color: rgba(71, 195, 147, 0.1);
border-radius: 76rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 21rpx;
color: #47C393;
}
.boundalready {
background-color: rgba(113, 75, 0, 0.1) !important;
color: #714B00 !important;
}
}
}
</style>