zd_wechatApp/pages/dangerous/dangerous.vue

<template>
	<!-- 危险作业工程 -->
	<view>
		<view class="background">

			<view class="uni-list">
				<view class="container">
					<view>
						工程名称
					</view>
					<view v-if="this.isEmpty(this.projectObj.enginName)" style="margin-top: 10;"
						@click="pickerShow('name')">
						<span style="color: darkgray;">请选择工程</span>
					</view>
					<view v-else style="margin-top: 10;" @click="pickerShow('name')">
						<span style="color: black;">{{projectObj.enginName}}</span>
					</view>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<view>
						工程地点
					</view>
					<view style="margin-top: 10;">
						<span style="color: black;">{{projectObj.enginAddre}}</span>
					</view>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<view>
						作业基本信息
					</view>
					<view style="margin-top: 10;">
						<span style="color: black;">{{projectObj.basicInformation}}</span>
					</view>
				</view>
			</view>

		</view>
		<view class="background">


			<view class="uni-list">
				<view class="container">
					<view>
						工程时间
					</view>
					<view v-if="isEmpty(this.projectTime)" style="margin-top: 10;" @click="openDatetimePicker">
						<span style="color: darkgray;">请选择工程时间</span>
					</view>
					<view v-else style="margin-top: 10;" @click="openDatetimePicker">
						<span style="color: black;">{{projectTime}}</span>
					</view>
				</view>
			</view>


			<view class="uni-list">
				<view class="container">

					<text>管径</text>
					<input class="uni-input" type="digit" v-model="projectObj.pipeDiameter" placeholder="请输入管径"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>管材</text>
					<input class="uni-input" type="text" v-model="projectObj.tubularProduct" placeholder="请输入管材"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>是否存在套管</text>
					<view>
						<span style="color: black;">{{bushingText}}</span>
						<switch v-if="isBushing" checked style="transform: scale(0.6,0.6);"
							@change="switchChangePipe" />
						<switch v-else style="transform: scale(0.6,0.6);" @change="switchChangePipe" />
					</view>
				</view>
			</view>


			<view class="uni-list">
				<view class="container">

					<text>管道压力</text>
					<input class="uni-input" type="digit" v-model="projectObj.pipePressure" placeholder="请输入管道压力"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>气源方向</text>
					<input class="uni-input" type="text" v-model="projectObj.gasSourceDirection" placeholder="请输入气源方向"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>作业位置</text>
					<input class="uni-input" type="text" v-model="projectObj.taskPosition" placeholder="请输入作业位置"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>作业相关阀门位置</text>
					<input class="uni-input" type="text" v-model="projectObj.valvePosition" placeholder="请输入作业相关阀门位置"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>压力报告</text>
					<input class="uni-input" type="text" v-model="projectObj.stressReport" placeholder="请输入压力报告"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>


			<view class="uni-list">
				<view class="container">

					<text>监理旁站记录</text>
					<input class="uni-input" type="text" v-model="projectObj.supervisionRecord" placeholder="请输入监理旁站记录"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>


			<view class="uni-list">
				<view class="container">

					<text>工作联系单</text>
					<input class="uni-input" type="text" v-model="projectObj.workContactForm" placeholder="请输入工作联系单"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>巡线确认单</text>
					<input class="uni-input" type="text" v-model="projectObj.linePatrolConfirmationForm"
						placeholder="请输入巡线确认单" maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>危险作业坑大小(长，宽，深)</text>
					<input class="uni-input" type="digit" v-model="projectObj.hazardousWorkPitsLong" placeholder="请输入长"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>

					<input class="uni-input" type="digit" v-model="projectObj.hazardousWorkPitsWide" placeholder="请输入宽"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>

					<input class="uni-input" type="digit" v-model="projectObj.hazardousWorkPitsDeep" placeholder="请输入深"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">

					<text>是否需要支护</text>
					<view>
						<span style="color: black;">{{needSupportText}}</span>
						<switch v-if="isNeedSupport" checked style="transform: scale(0.6,0.6);"
							@change="switchChangeSupport" />
						<switch v-else style="transform: scale(0.6,0.6);" @change="switchChangeSupport" />
					</view>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>作业坑内其他管道情况</text>
					<input class="uni-input" type="text" v-model="projectObj.otherPipelineConditionsWorkPit"
						placeholder="请输入作业坑内其他管道情况" maxlength="100"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>


			<view class="uni-list">
				<view class="container">
					<text>现场负责人</text>
					<input class="uni-input" type="text" v-model="projectObj.siteHead" placeholder="请输入现场负责人"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>现场负责人联系方式</text>
					<input class="uni-input" type="number" v-model="projectObj.siteHeadPhone" placeholder="请输入现场负责人联系方式"
						maxlength="11" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>作业人员信息</text>
					<input class="uni-input" type="text" v-model="projectObj.operatorInformation"
						placeholder="请输入作业人员信息" maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>检口</text>
					<input class="uni-input" type="text" v-model="projectObj.inspectionPort" placeholder="请输入检口"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>管道刷油</text>
					<input class="uni-input" type="text" v-model="projectObj.pipelinePainting" placeholder="请输入管道刷油"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>管道防腐</text>
					<input class="uni-input" type="text" v-model="projectObj.pipelineCorrosionProtection"
						placeholder="请输入管道防腐" maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>管道支护</text>
					<input class="uni-input" type="text" v-model="projectObj.pipelineSupport" placeholder="请输入管道支护"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>砌筑阀门井</text>
					<input class="uni-input" type="text" v-model="projectObj.masonryValveWell" placeholder="请输入砌筑阀门井"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>保护井</text>
					<input class="uni-input" type="text" v-model="projectObj.protectionWell" placeholder="请输入保护井"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>管件保护井砌筑</text>
					<input class="uni-input" type="text" v-model="projectObj.pipeProtectionWelMasonry"
						placeholder="请输入管件保护井砌筑" maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>回填</text>
					<input class="uni-input" type="text" v-model="projectObj.backfill" placeholder="请输入回填"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>夯实</text>
					<input class="uni-input" type="text" v-model="projectObj.tamp" placeholder="请输入夯实" maxlength="100"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>平整场地</text>
					<input class="uni-input" type="text" v-model="projectObj.levelingTheSite" placeholder="请输入平整场地"
						maxlength="100" style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>

			<view class="uni-list">
				<view class="container">
					<text>备注</text>
					<input class="uni-input" type="text" v-model="projectObj.remark" placeholder="请输入备注" maxlength="100"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="align-items" style="margin-bottom: 20px;">
					<view class="container" style="color: gainsboro;">*请上传文件</view>
					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
						<image src="/static/images/chooseimg.png" mode=""
							style="width: 100rpx; height: 100rpx; margin: 0 12rpx;; " @click="chooseFile()"></image>
						<view v-for="(item,index) in fileArr" :key="index" style="position: relative;">
							<view style="width: 100rpx; height: 100rpx; margin: 0 12rpx;">
								{{item.fileName}}
								<image :src="item.picUrl" mode=""
									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;">
								</image>

							</view>

							<view @click="removeFile(index)"
								style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
								<uni-icons type="close" color="darkgray" size="18"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="action-btn">
				<button @click="submit" class="btn cu-btn block bg-blue lg round">提交</button>
			</view>

			<SelectPicker :list="rows" @change="projectListSelect" v-if="open" @close="close" titleKey="name"
				subtitleKey="id" v-model="name"></SelectPicker>

			<yt-dateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2024" :end-year="2099"
				:time-hide="[true, true, true, true, true, true]" :time-label="['年', '月', '日', '时', '分', '秒']" />

		</view>
	</view>
</template>

<script>
	import SelectPicker from '../../components/selectPicker/select_picker.vue'
	import {
		getToken
	} from '../../utils/auth';

	import {
		getDangerousWorkProjectList,
		getDangerousWorkProjectDetails,
		updateDangerousWorkProject
	} from '@/api/common'
	export default {
		components: {
			SelectPicker
		},
		data() {
			return {
				headers: {
					Authorization: "Bearer " + getToken()
				},
				projectValue: {},
				projectId: "",
				projectName: "",
				projectPosition: "",
				projectInfoContent: "",

				projectTime: "",
				pipeSize: "",
				pipeMaterial: "",
				isBushing: false,
				bushingText: "否",
				pipePressure: "",
				direction: "",
				workPosition: "",
				valvePosition: "",
				stressReport: "",
				supervisionSiteRecord: "",
				workContactForm: "",
				linePatrolForm: "",
				workHoleLong: "",
				workHoleWide: "",
				workHoleHeight: "",
				isNeedSupport: false,
				needSupportText: "否",
				otherPipelineCondition: "",
				siteLeaderName: "",
				siteLeaderPhone: "",
				workPersonInfo: "",
				inspectionPort: "",
				pipelineOil: "", //管道刷油
				pipelineCorrosion: "", //管道腐蚀
				masonryValveWell: "", //砌筑阀门井
				protectionWell: "", //保护井
				pipeProtectionwellMasonry: "", //管件保护井砌筑
				backfill: "", //回填
				tamp: "", //夯实
				levelSite: "", //平整场地
				file: [], // 附件
				pics: [], // 附件返回
				rows: [],
				open: false,
				projectObj: {},
				currentTime: "",
				fileArr: [],
			}
		},
		created() {
			this.currentTime = this.traversalTime(new Date().getTime()); //在data里定义变量-nowTime
		},
		methods: {
			isEmpty(str) {
				return (!str || 0 === str.length);
			},
			pickerShow(e) {
				if (e == 'name') {
					this.open = true;
					let param = {};
					getDangerousWorkProjectList(param).then(res => {
						this.rows = res.data;
					})
				}
			},
			changeSelect(e) {

			},
			close() {
				this.open = false;
			},
			projectListSelect(item, index) {
				this.open = false;
				getDangerousWorkProjectDetails(item.id).then(res => {
					this.projectObj = res.data;
					this.projectTime = this.projectObj.enginTime;
					// if (this.isEmpty(this.projectTime)) {
					// 	this.projectTime = this.currentTime;
					// 	this.projectObj.enginTime = this.currentTime;
					// }

					this.isNeedSupport = this.projectObj.needSupport == "1";
					if (this.isNeedSupport) {
						this.needSupportText = "是";
					} else {
						this.needSupportText = "否";
					}

					this.isBushing = this.projectObj.casingPresent == "1";
					if (this.isBushing) {
						this.bushingText = "是";
					} else {
						this.bushingText = "否";
					}

					this.fileArr = this.projectObj.pics;
				})
			},
			switchChangePipe(e) {
				this.isBushing = e.detail.value;
				if (this.isBushing) {
					this.projectObj.casingPresent = "1";
					this.bushingText = "是";
				} else {
					this.projectObj.casingPresent = "0";
					this.bushingText = "否";
				}
				console.log("bush:" + this.isBushing + this.bushingText)
			},
			switchChangeSupport(e) {
				this.isNeedSupport = e.detail.value;
				if (this.isNeedSupport) {
					this.projectObj.needSupport = '1';
					this.needSupportText = "是";
				} else {
					this.projectObj.needSupport = '0';
					this.needSupportText = "否";
				}
				console.log("bush:" + this.isNeedSupport + this.needSupportText)
			},
			chooseFile() {
				let _this = this;
				console.log('文件' + _this.headers);
				uni.chooseMessageFile({
					// sizeType: ['album', 'camera'],
					type: 'all',
					extension: ['dwg', 'dwt', 'doc', 'docx', 'xls', 'xlsx', 'jpg', 'png', 'jpeg', 'mp4'],
					success(resp) {
						resp.tempFiles.forEach((item, index) => {
							const task = uni.uploadFile({
								url: _this.$HTTP + `/obs`,
								filePath: item.path,
								name: 'file',
								formData: {},
								header: _this.headers,

								success: res => {
									// 判断是否json字符串，将其转为json格式
									// console.log("结果", res)
									let data = JSON.parse(res.data);

									if (![200].includes(data.code)) {
										_this.$modal.msg(data.msg)
									} else {
										if (_this.progress === 100) {
											console.log('_this.progress', _this.progress)
											console.log('res--', res)
											_this.fileArr.push({
												'fileName': item.name,
												'picUrl': data.data.url,
											})
											debugger
											console.log("xxx_" + data.data.url);
											_this.$modal.msg('上传成功！')
										}
									}
								},
								fail: e => {
									console.log(e)
									_this.$modal.msg('上传失败！')
									//_this.uploadError(index, e);
								},
								complete: res => {
									uni.hideLoading();
									_this.uploading = false;

								}
							});
							task.onProgressUpdate(res => {
								_this.progress = res.progress;
								console.log('onProgressUpdate', res)
								console.log('task.onProgressUpdate', _this.progress)
								uni.showLoading({
									title: '上传中'
								})
								if (_this.progress != 100) {
									_this.loading = false
									console.log('_this.loading false', _this.loading)
								} else {
									_this.loading = true
									console.log('_this.loading true', _this.loading)
								}
							});

						})

					},
				})
			},
			removeFile(index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该文件？',
					success: (res) => {
						if (res.confirm) {
							this.fileArr.splice(index, 1)
							console.log('this.fileArr', this.fileArr)
						}
					}
				})
			},
			submit() {
				if(this.fileArr.length<=0){
					this.$modal.msg('请选择附件')
					return;
				}
				this.projectObj.enginTime = this.projectTime;
				this.projectObj.pics = this.fileArr;
				updateDangerousWorkProject(this.projectObj).then(res => {
					this.$modal.msg(res.msg);
					uni.navigateBack();
				})
			},
			handleSubmit(e) {
				this.projectTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
				this.projectObj.enginTime = this.projectTime;
			},
			// 打开picker
			openDatetimePicker() {
				if (this.isEmpty(this.projectObj.id)) {
					this.$modal.msg('请选择工程')
				} else {
					this.$refs.myPicker.show();
				}
			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},
			//获取当前时间
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let mm = time.getMinutes();
				let s = time.getSeconds();
				return y + '-' + this.addTimes(m) + '-' + this.addTimes(d) + ' ' + this.addTimes(h) + ':' + this.addTimes(
					mm) + ':' + this.addTimes(s);
			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		margin-left: 10px;
		margin-top: 10px;
		margin-right: 10px;
		align-items: flex-start;
		justify-content: space-between;
	}

	.marginLeft5 {
		margin-left: 5px;
	}

	.title-txt {
		font-size: 15px;
		font-weight: bold;
		color: black;
	}

	.content-txt {
		font-size: 10px;
		font-weight: bold;
		color: black;
	}

	.background {
		margin: 8px;
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
	}

	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-cell-left {
		white-space: nowrap;
		font-size: 28rpx;
	}

	.centered {
		text-align: center;
		background-color: #e2f4ff;

	}

	.text {
		background-color: #e2f4ff;
		height: 20rpx;
	}

	.view_bg_build {
		background-color: #e2f4ff;
		padding: 10rpx;
		margin: 20rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #000000;
		text-align: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.name {
		flex: 0;
		font-size: 14px;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.table-item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.block-iv {
		width: 10px;
		height: 10px;
	}

	.btn {
		margin-top: 40px;
		margin-right: 20px;
		margin-bottom: 120px;
		margin-left: 20px;
		height: 45px;
	}

	.number {
		display: flex;
		/* 水平居中显示子元素 */
		align-items: flex-start;
		/* 垂直居中显示子元素 */
		justify-content: space-between;
		/* 左右间距等于间距大小 */
		padding: 10px;
		/* 设置padding以提高视觉效果 */
	}

	.textarea {
		margin-top: 10upx;
		width: 100%;
		border: 1rpx solid red;
		min-height: 100upx;
		line-height: 20px;
	}

	.text {
		font-size: 16px;
		color: #333;
	}


	input {
		flex-grow: 1;
		font-size: 28rpx;
		color: #808080;
	}
</style>