payy-app/views/entRiskPoint/details/details.vue

<template>
	<view class="entRiskPoint-details-wrap">
		<view class="rp-head">
			<view class="top_name">
				<text class="rpName">{{baseInfo.riskPointTitle}}</text>
				<text class="rpl" :class="'rpl-'+baseInfo.riskPointLevel">{{getlevelStr(baseInfo.riskPointLevel)}}</text>
				<text class="rpls">图标</text>
			</view>
			<view class="image-content">
				<image class="rp-image"
					mode='scaleToFill'
					:src="baseInfo.riskPointPhoto" @error="imageError"></image>
			</view>		
<!-- 			<button class="upload" type="default" @click="upload" >
				<text class="zhcx-iconfont zhcx-icon-paizhao"></text>
			</button>	 -->		
		</view>
		<view class="table-wrap">
			<view class="table-title">
				<view class="tab-item"  @click="changeTab(index)"
				        v-for="(item,index) in items" 
						:key="index" 
						:class="tabIndex === index?'active':''" 
						>
					<text>{{item}}</text>
				</view>
			</view>
			<view class="table-contain">
				<view class="table-cont" v-if="tabIndex===0">
					<!-- 基本信息 -->
					　　<view class="baseInfo">
							<text>名称：{{baseInfo.riskPointTitle}}</text>
						</view>
					　　<view class="baseInfo">
							<text>编号：{{baseInfo.riskPointCode}}</text>
						</view>
					　　<view class="baseInfo">
							<text>部门：{{baseInfo.groupName}}</text>
						</view>
					　　<view class="baseInfo">
							<text>责任人：{{baseInfo.riskPointTitle}}</text>
						</view>
					　　<view class="baseInfo">
							<text>位置：{{baseInfo.riskPointAddr}}</text>
						</view>
					　　<view class="baseInfo">
							<text>等级：{{getlevelStr(baseInfo.riskPointLevel)}}</text>
						</view> 
					　  <view class="baseInfo desc">
							<text>描述：</text>
							<view class="desc-txt">{{baseInfo.riskPointDesc}}</view>
						</view> 　　
				</view>
				<view class="table-cont" v-else-if="tabIndex===1">
					<!-- 风险信息 -->
					　　<view v-for="item in dataHazardList" class="baseInfo">
						<text class="uni-title">名称：{{item.hazardTitle}}</text>
						<text class="uni-title rpl">等级：{{getlevelStr(item.hazardLevel)}}</text>
					</view>
				</view>
				<!-- 隐患信息 -->
				<view class="table-cont" v-else-if="tabIndex===2">
					　　2信息
				</view>
				<!-- 指导书信息 -->
				<view class="table-cont" v-else-if="tabIndex===3">
					　　3信息
				</view>
				<!-- 检查记录信息 -->
				<view class="table-cont" v-else-if="tabIndex===4">
					　　检查记录信息1
				</view>				
			</view>		
		</view>
		<view class="button-bottom">
			<button class="button danger" @click="addDanger(queryConditions.riskPointId)">上报隐患</button>
			<button class="button" @click="inspection">立刻巡检</button>
		</view>
	</view>
</template>
<script>
	import {
		getEntRiskPointDetails,
		getEntRiskPointHazard
	} from '@/api/entRiskPoint.js';
	import {
		levelConversion
	} from '@/libs/tool.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				items: ["基本信息", "危险源"],//, "隐患", "指导书", "检查记录"
				baseInfo:{
					riskPointTitle:"",
					riskPointCode:"",
					riskPointAddr:"",
					riskPointLevel:"",
					riskPointDesc:"",
					riskPointPhoto:""
				},
				dataHazardList: [],
				queryConditions: {
					page: 1,
					limit: 10,
					total: 0,
					keywords: '',
					riskPointId: ''
				}
			}
		},
		//监听上个页面传回来参数
		onLoad(options) {
			//调用页面请求数据接口
			if(!options)return;
			this.queryConditions.riskPointId = options.id
			this.getList(options);
		},
		methods: {
			changeTab(e) {
				this.tabIndex = e
				if (this.tabIndex === 1) {
					//风险信息
					this.getHazard(this.queryConditions.riskPointId)
				} else if (this.tabIndex === 2) {
					//隐患信息
				} else if (this.tabIndex === 3) {
					//如果是作业就是作业指导书，如果是设备就是操作规程，名字要区别
				}
			},
			//数据请求分页列表
			getList(options) {
				getEntRiskPointDetails(options.id).then((res) => {
					this.baseInfo = res.data
				})
			}, //数据请求分页列表
			getHazard(id) {
				getEntRiskPointHazard(id).then((res) => {
					this.dataHazardList = res.data
				})
			},
			//隐患分页
			getDanger(id) {
				getEntRiskPointHazard(id).then((res) => {
					this.dataHazardList = res.data
				})
			},
			//数字等级转换字符方法
			getlevelStr(level) {
				return levelConversion(level)
			},
			upload(){
				//上传图片
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'], //拍照
					success(res) {
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							// this.uploadSubmit(filePath)
						}
					}
				});				
			},
			// uploadSubmit(filePath) {
			// 	upload({ filePath}).then((res) => {
			// 		let result=JSON.parse(res);
			// 		if(result.code===0){
			// 			let path=result.data;
			// 			this.formData.attachList =[path];					
			// 		}else{
			// 			uni.showToast({
			// 				title: result.msg||"上传失败"
			// 			})						
			// 		}

			// 	}).catch((msg) => {
			// 		uni.showToast({
			// 			title: "上传失败"
			// 		})
			// 	})
			// },			
			//隐患上报
			addDanger(riskPointId) {
				uni.navigateTo({
					url: '/views/danger/riskPointDanger?riskPointId=' + riskPointId
				})
			},
			//立即巡检
			inspection(){
				let riskPointId=this.queryConditions.riskPointId;
				uni.navigateTo({
					url: '/views/entRiskPointCheck/index?id=' + riskPointId
				})				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.entRiskPoint-details-wrap{
		padding:0 26upx 100upx;
		background-color: #fff;
		min-height:100vh;
		.rp-head{
			&{
				padding-bottom: 20upx;
			}
			.top_name {
				padding:20upx 0;
				.rpl {
					position: absolute;
					padding: 0upx 10upx;
					right: 0upx;
					&-1{
						color: red;
					}
					
					&-2{
						color: yellow;
					}
					&-3{
						color: #ff6100;
					}
					&-4{
						color: blue;
					}
				}
				.rpls {
					position: absolute;
					padding: 0upx 10upx;
					right: 60upx;
				}				
			}	
			.image-content{
				.rp-image{
					display: block;
					width: 300upx;
					height: 300upx; 
					background-color: #eeeeee;
				}
			}
			.upload{
				margin-top: 20upx;
				padding: 0;
				height: 90upx;
				line-height: 90upx;
				.zhcx-iconfont{
					color: #333;
					font-size: 30px;
				}
			}
		}
		.table-wrap{
			.table-title{
				display: flex;
				.tab-item {
					height: 80upx;
					line-height: 80upx;
					flex-grow: 1;
					text-align: center;
					transition: 0.3s;
					&.active{
						color: #FFFFFF;
						background: #00A0FF;					
					}
				}			
			}
			.table-contain{
				.table-cont {
					.baseInfo {
						height: 78upx;
						line-height: 78upx;
						border-bottom: 2upx solid #EDE1D9;
						&.desc{
							height: auto;
							line-height: 1.5;
							min-height: 78upx;
							border-bottom: none;
							padding-top: 16upx;
							display: flex;
							justify-content: flex-start;
							.desc-txt{
								width: 600upx;
								word-break: break-word;
							}
						}
					}				
				}				
			}
		}
		.button-bottom {
			position: fixed;
			bottom: 20upx;
			right: 1upx;
			width: 60%;
			.button {
				display: inline-block;
				background-color: #00aaff;
				background-image: linear-gradient(#aaffff, #00aaff);
				color: white;
				padding: 3upx 20upx;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 30upx;
				margin: 15upx 2upx;
				cursor: pointer;
				width: 45%;
			}
			.danger {
				background-color: #ffaa00;
				background-image: linear-gradient(#ffaa00, #e66465);
				margin-right: 15upx;
			}		
		}		
	}
</style>