rsmonitoring-app/pages/index/common/hcDetails.vue

<template>
	<view class="details">
		<view class="search">
			<uni-icons type="bars" size="30" @click="returnList"></uni-icons>
		</view>
		<scroll-view class="top-menu-view" scroll-x="true">
			<view class="menu-topic-view" v-for="(item, key) in tabOptions" :key="key" @click="active=key">
				<view :class="active==key ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <van-sticky :offset-top="-10">
			<van-tabs sticky v-model="active" class="tabs">
				<van-tab v-for="(item, key) in tabOptions" :key="key" :title="item">
				</van-tab>
			</van-tabs>
		</van-sticky> -->
		<view>
			<view class="hclist" v-if="active==0">
				<view class="menu-list">
					<view class="list-cell list-cell-arrow" v-for="(item, i) in jbxxs" :key="i">
						<view class="menu-item-box">
							<view>{{item.name}}</view>
							<view class="text-right">{{infoObj[item.prop]}}</view>
						</view>
					</view>
					<view class="list-cell list-cell-arrow" v-if="infoObj.qsxtif">
						<view>前期影像</view>
						{{infoObj.qsxtifimg}}
						<image class="yximage" :src="infoObj.qsxtifimg" mode="widthFix"></image>
					</view>
					<view class="list-cell list-cell-arrow" v-if="infoObj.hsxtif">
						<view>后期影像</view>
						<image class="yximage" :src="infoObj.hsxtifimg" mode="widthFix"></image>
					</view>
				</view>
				<!-- <van-cell v-for="(item, i) in jbxxs" :key="i" :title="item.name" :value="infoObj[item.prop]" /> -->
			</view>
			<view class="hclist" v-if="active==1">
				<scroll-view v-if="sheets.length" class="top-menu-view" scroll-x="true">
					<view class="menu-topic-view" v-for="ypitem in sheets" :key="ypitem.sheet"
						@click="ywyptab=ypitem.sheet">
						<view :class="ywyptab==ypitem.sheet ? 'menu-topic-act' : 'menu-topic'">
							<text class="menu-topic-text">{{ypitem.type}}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <van-tabs sticky v-if="sheets.length" v-model="ywyptab">
					<van-tab v-for="ypitem in sheets" :key="ypitem.sheet" :title="ypitem.type" :name="ypitem.sheet">
					</van-tab>
				</van-tabs> -->
				<view class="swiper-item" v-for="ypitem in sheets" :key="ypitem.sheet">
					<view v-if="ywyptab==ypitem.sheet">
						<img :src="ypitem.photo" width="100%" />
						压占{{ ypitem.type }}面积共{{ ypitem.mjj }}平方米
						<view class="list-cell">
							<uni-row>
								<uni-col :span="8" v-for="(item, i) in tdxzTable" :key="i">{{item.label}}</uni-col>
							</uni-row>
						</view>
						<view class="list-cell">
							<uni-row v-for="(row, index) in ypitem.data_list" :key="index">
								<uni-col :span="8" v-for="(item, i) in tdxzTable" :key="i">
									<div v-if="item.slot == 'ratio'">
										{{ ((row.yzmj / ypitem.yzmj) * 100).toFixed(2) }}%
									</div>
									<span v-else>{{ row[item.prop] }}</span>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</view>
			</view>
			<view class="hclist" v-show="active==2">
				<view class="example-body">
					<uni-file-picker ref="upsgfjsRef" limit="9" title="最多选择9张图片" v-model="fileList.sdfjs"
						:sizeType="['original']" @select="e=>selectfile(e,'sdfjs')"
						@delete="e=>fileDelete(e,'sdfjs')"></uni-file-picker>
				</view>

			</view>
			<view class="hclist" v-show="active==3">
				<uni-forms ref="checkRef" :model="checkform" labelWidth="80px">
					<uni-forms-item label="实际地类" name="dlbm">
						<uni-data-select v-model="checkform.dlbm" :localdata="decList"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="核查初判" name="decide">
						<uni-data-select v-model="checkform.decide" :localdata="hgxList"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="其它材料" name="fjs">
						<uni-file-picker ref="upfjsRef" title="添加照片或文件" v-model="fileList.fjs"
							@select="e=>selectfile(e,'fjs')" @delete="e=>fileDelete(e,'fjs')"></uni-file-picker>
					</uni-forms-item>
					<uni-forms-item label="其它说明" name="notes" required>
						<uni-easyinput v-model="checkform.notes" type="textarea" placeholder="请输入其它说明" />
					</uni-forms-item>
					<!-- <uni-forms-item label="数字签名" name="notes" required>
						<img v-if="checkform.dataUrl" :url="checkform.dataUrl"></img>
						<view style="width: 100% ;height: 250rpx;" v-else>
							<l-signature disableScroll ref="signatureRef" penColor="red" :penSize="5"
								:openSmooth="true"></l-signature>
							<button size="mini" @click="$refs.signatureRef.clear()">撤消</button>
							<button size="mini" @click="savesign">保存</button>
						</view>
					</uni-forms-item> -->
				</uni-forms>
			</view>
		</view>
		<div class="btns">
			<button type="primary" size="mini" @click=" toggle">举证说明</button>
			<button type="primary" size="mini" :disabled=" !qrdis" @click="affirm(0)">确认</button>
			<button type="primary" size="mini" :disabled=" !qrdis" @click="affirm(1)">退回</button>
			<button type="primary" size="mini" :disabled="!steps.find(x => x.auditflowStep=='WYDC')"
				@click="save">保存</button>
			<button type="primary" size="mini" :disabled=" !tjdis" @click="tj">提交</button>
		</div>
		<uni-popup ref="popup" background-color="#fff">
			<uni-popup-dialog type="info" title="举证说明" :content="nowobj.notes"></uni-popup-dialog>
		</uni-popup>
	</view>


</template>
<script>
	import {
		TIFF
	}
	from 'tiff.js';
	import {
		uploadFile
	} from '@/utils/choose.js'
	import {
		getDkjbxx,
		getDkjbywy,
		getStep,
		hcWork,
		getHcInfo,
		getdecTree,
	} from "@/api/dkjbxx.js";
	import {
		getdict
	} from "@/api/apis.js";

	import {
		jbxxs,
		tdxzTable,
	} from "../config";
	export default {
		name: "list",
		data() {
			return {
				nowobj: {},
				active: 0,
				tabOptions: ['基本信息', '业务研判', '实地拍照', '核查信息'],
				loading: false,
				steps: [],
				qrdis: false,
				tjdis: false,
				jbxxs: jbxxs,
				tdxzTable: tdxzTable,
				activeName: "jbxx",
				infoObj: {},
				activities: [],
				//业务研判
				ywyptab: "1",
				sheets: [],
				//上传拍照
				fileList: {},
				checkform: {},
				decList: [],
				hgxList: []

			};
		},
		mounted() {
			// this.getsteps()
		},
		methods: {
			handleClick(val) {
				if (val) this.nowobj = val
				this.getsteps();
				this.reset();
				this.getInfos(this.nowobj);
				this.getdict()
			},
			getInfos(val) {
				let id = val.dkjdxxId
				getDkjbxx(id).then((res) => {
					this.infoObj = res.data;
					// this.loadAndConvertTIFF(this.infoObj.qsxtif, 'qsxtif')
					// this.loadAndConvertTIFF(this.infoObj.hsxtif, 'hsxtif')
					console.log(this.infoObj, 'this.infoObj')
				});
				getDkjbywy(id).then((res) => {
					if (res.data) {
						this.sheets = JSON.parse(res.data.sheetJson);
						this.ywyptab = this.sheets[0].sheet;
					}
				});
				getHcInfo({
					dkid: this.nowobj.dkjdxxId,
					auditflowStep: 'WYDC',
					auditflowId: this.nowobj.auditflowId,
					// fieldworkId: this.nowobj.id,

				}).then((res) => {
					if (res.data) {
						this.checkform = res.data[0]
						this.checkform.fieldworkId = this.nowobj.id
						this.checkform.fjs.map(f =>
							this.fileList.fjs.push({
								name: 'fjsimg',
								url: f.fjPreview
							})
						)
						this.checkform.sdfjs.map(f =>
							this.fileList.sdfjs.push({
								name: 'sgfjsimg',
								url: f.fjPreview
							})
						)
					}

				});
			},
			getdict() {
				this.decList = [];
				this.hgxList = [];
				getdecTree({
					dictType: '3DDLBM'
				}).then((res) => {
					res.data.map(di => {
						this.decList.push({
							value: di.dictValue,
							text: di.dictLabel
						})
					})

				});
				getdict({
					dictType: 'hgx_decide'
				}).then((res) => {
					res.rows.map(di => {
						this.hgxList.push({
							value: di.dictValue,
							text: di.dictLabel
						})
					})
				});
			},
			returnList() {
				this.$emit('returnList')
			},
			getsteps() {
				this.steps = [];
				getStep({
					dkjdxxId: this.nowobj.dkjdxxId
				}).then((res) => {
					this.steps = res.data;
					this.qrdis = this.steps.find((x) => x.auditflowStep.includes('WYQR'))

					// this.tjdis = this.steps.find((x) => x.auditflowStep=='WYDC')
					this.tjdis = this.steps.find((x) => x.auditflowStep.includes('WYTJ'))

				});
			},
			loadAndConvertTIFF(url, name) {
				if (!url) return
				// console.log(TIFF, 'TIFF')
				fetch(url).then(function(tiff) {
					var image = tiff.toRGBAImage(); // 转换为RGBA格式的图像数据
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					var imageData = ctx.createImageData(image.getWidth(), image.getHeight());
					imageData.data.set(image.getData().buffer);
					ctx.putImageData(imageData, 0, 0);
					this.infoObj[name + img] = canvas.toDataURL('image/png'); // 转换为PNG格式以便显示
				}.bind(this));
			},
			reset() {
				this.checkform = {
					fieldworkId: this.nowobj.id,
					dlbm: "",
					dlmc: "",
					decide: "",
					notes: "",
					auditflowStep: "WYDC",
					fjs: [],
					sdfjs: []
				}
				this.fileList = {
					fjs: [],
					sdfjs: []
				}
			},
			afterRead(files, detail) {
				// files.forEach(element => {
				//   setTimeout(() => {
				//     element.status = null;
				//   }, 2000);
				// });
			},
			toggle() {
				this.$refs.popup.open('center')
			},
			affirm(confirmState) {
				uni.$globalData = this.nowobj
				this.$tab.navigateTo('/pages/index/common/affirm?confirmState=' + confirmState)
			},
			save() {
				let a = this.decList.find(d => d.value == this.checkform.dlbm)
				if (a) this.checkform.dlmc = a.text;
				console.log(this.checkform, 'fjs')
				this.$refs.checkRef.validate().then(res => {
					hcWork(this.checkform).then(response => {
						this.$modal.msgSuccess("保存成功")
						this.getsteps()
					})
				})
			},
			savesign() {
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						console.log(res, '---')
						uploadFile(res.tempFilePath, (data) => {
							this.checkform.dataUrl = data.path
						})
					}
				})
			},
			tj() {
				uni.$globalData = this.nowobj
				console.log('[zzxxzzzx]', uni.$globalData, )
				console.log('[zzxxx]', this.nowobj, )
				this.$tab.navigateTo('/pages/index/common/tjDialog')
			},
			selectfile(e, fname) {
				let _this = this
				//e.tempFilePaths
				e.tempFiles.map(item => {
					_this.fileList[fname].push({
						name: fname + 'img',
						url: item.path
					})
					uploadFile(item.path, (data) => {
						console.log(data, 'data')
						if (data) {
							_this.checkform[fname].push({
								fjPath: data.path,
								fjSize: Number((item.size / 1024 / 1024).toFixed(2)),
								fjType: item.fileType
							});

						} else _this.fileList[fname].pop()
					})

				})
			},
			fileDelete(e, fname) {
				let index = this.fileList[fname].findInex(f => f.url == e.tempFilePath)
				this.fileList[fname].splice(index, 1)
				this.checkform[fname].splice(index, 1);
			}
		},
	};
</script>

<style lang="scss">
	.details {
		width: 100%;

		.uni-icons {
			position: absolute;
			right: 20rpx;
			top: 70rpx;
		}

		// position: relative;
		.tabs {
			margin-bottom: 20rpx;
		}

		.hclist {
			height: 40vh;
			overflow-x: hidden;
			overflow-y: auto;
			background: #fff;
			padding: 10rpx;

			.yximage {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.btns {
			width: 100%;
			position: absolute;
			bottom: 20rpx;
			display: flex;
		}

	}
</style>
<style scoped lang="scss">
	@import "./tabs.scss";

	.menu-list {
		margin: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>