tsg-app/pages/gqzq/gqxx/qkForm.vue

<template>
	<view :style="{backgroundColor: 'rgba(247, 247, 247, 1)',height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar
			title="查看"
			:autoBack="true" 
			:titleStyle="{
				fontSize:'18px'
			}" 
			:height='44'
			:safeAreaInsetTop=true
			leftIconSize='20'
			leftIconColor='rgb(153, 153, 153)'
		>
		</u-navbar>
		<div class="bodyBg">
			<div class="mybody">
				<div class="myHead" v-if="list.length>1">
					<div class="paging">
						<view 
							class="paging_left"
							hover-class="is-hover" 
							hover-stay-time=100
							@click="changePage(false)"
							>{{index===0?'返回':'上一条'}}</view>
						<view 
							class="paging_right"
							hover-class="is-hover" 
							hover-stay-time=100
							@click="changePage(true)"
							>{{index===list.length-1?'返回':'下一条'}}</view>
					</div>
				</div>
				<div class="myscroll">
					<div :style="{height:'10px'}"></div>
					<div class="row">
						<text class="lf">上报时间:</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="getRecord.reportTime"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">工程类型:</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="{'1':'水库','2':'水电站'}[getRecord.projectType]"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf"><text :style="{color:'red'}">*</text>工程名称:</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="getRecord.projectName"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">是否发电:</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="{'0':'否','1':'是'}[getRecord.isPowerGeneration]"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">是否泄洪:</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="{'0':'否','1':'是'}[getRecord.isFloodRelease]"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">水位(m):</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="getRecord.waterLevel"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">入库流量(m³/s):</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="getRecord.inflowVolume"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">出库流量(m³/s):</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="getRecord.outflowVolume"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">其他运行情况:</text>
						<div class="rf">
							<u--textarea 
								v-model="getRecord.remark" 
								:disabled='true'
								height=300
							></u--textarea>
						</div>
					</div>
					<div class="row">
						<text class="lf">上报人:</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="getRecord.reporter"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">上报单位:</text>
						<div class="rf">
							<u--input
								border="surround"
								v-model="getRecord.reportUnit"
								:disabled='true'
							  ></u--input>
						</div>
					</div>
					<div class="row">
						<text class="lf">附件:</text>
						<div class="rf">
							<text v-if="imgList.length===0">{{getRecord.fileIds || '暂无数据'}}</text>
							<u-image 
								:style="{marginTop:'10px'}" 
								v-for="item in imgList" 
								:src="'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath" 
								width="100%" 
								mode="aspectFit" 
								@click="previewImage(0,'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath)"
							></u-image>
						</div>
					</div>
					<div :style="{height:'20vh'}"></div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				record:{},
				list:[],
				index:0,
				cs:'',
				imgList:[]
			}
		},
		created() {
			this.getState()
		},
		computed: {
			getRecord() {
				return this.list[this.index] || {}
			},
		},
		methods: {
			async getState() {
				try{
					const id = this.getRecord.id
					console.log('id',id)
					const res = await uni.$http.get('/gunshiApp/xfflood/xfProjectRun/detail?id='+id)
					this.imgList = res.data.data
					console.log('res2',res.data.data)
				}catch(e){
					this.$refs.uToast.show({
						type: 'error',
						title: '失败主题',
						message: "请求失败",
					})
				}
			},
			changePage(flag) {
				if(flag){
					if(this.index===this.list.length-1){
						uni.navigateBack()
					}else{
						this.index = this.index+1
						this.getState()
					}
				}else{
					if(this.index===0){
						uni.navigateBack()
					}else{
						this.index = this.index-1	
						this.getState()
					}
				}
			},
			previewImage(index,url) {
			      // 使用uni.previewImage预览图片
			      uni.previewImage({
			        current: index,
			        urls: [url]
			      });
			    }
		},
		onLoad(props){
			const record = JSON.parse(props.obj)
			this.index = record.myIndex
			this.list= record.list
		}
	}
</script>

<style lang="scss" scoped>
.bodyBg{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mybody{
	margin-top: 50px;
	padding-top: 10px;
	width: 97%;
	background-color: #ffffff;
}
.row{
	display: flex;
	margin-top: 5px;
}
.lf{
	// width: 30%;
	width: 6.5rem;
	min-height: 40px;
	text-align: right;
	line-height: 38px;
	padding-right: 10px;
}
.rf{
	flex: 1;
	// width: 70%;
	min-height: 40px;
	line-height: 36px;
	padding-right: 20px;
	padding-top: 1px;
}
.paging{
	position: relative;
	height: 30px;
	line-height: 30px;
	margin: 5px 50px 15px 50px;
	display: flex;
	text-align: center;
}
.paging_left{
	width: 50%;
	height: 100%;
	border: 1px solid #dadbde;
	border-right: 0;
	background: rgb(245, 247, 250);
	border-radius: 8px 0 0 8px;
}
.paging_right{
	width: 50%;
	height: 100%;
	border: 1px solid #dadbde;
	background: rgb(245, 247, 250);
	border-radius: 0 8px 8px 0;
}
.is-hover{
	background-color: #eee;
}
.myHead{
	margin-bottom: 0px;
	border-bottom: 1px solid #eee;
}
.myscroll{
	height: 90vh;
	overflow-y: scroll;
}
</style>