337 lines
7.5 KiB
Vue
337 lines
7.5 KiB
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 :style="{color:'red'}">*</text>灾害发生时间:</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.otime"
|
|
: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="{'1':'一般险情','2':'较大险情','3':'重大险情','4':'特别重大险情'}[getRecord.severity]"
|
|
: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.address"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<text class="lf">经度:</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.lgtd"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<text class="lf">纬度:</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.lttd"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<text class="lf"><text :style="{color:'red'}">*</text>灾情描述:</text>
|
|
<div class="rf">
|
|
<u--textarea
|
|
v-model="getRecord.ddscrib"
|
|
: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.dpcount"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<text class="lf">失踪人数:</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.mpcount"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<text class="lf">转移人数:</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.spcount"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<text class="lf">损毁房屋(间):</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.chcount"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<text class="lf">直接经济损失(万元):</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.elose"
|
|
:disabled='true'
|
|
></u--input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<text class="lf">过程降雨量(mm):</text>
|
|
<div class="rf">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.pfrain"
|
|
: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">
|
|
<u--input
|
|
border="surround"
|
|
v-model="getRecord.reportTime"
|
|
: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" ></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 mtcd = this.getRecord.mtcd
|
|
console.log('mtcd',mtcd)
|
|
const res = await uni.$http.get('/gunshiApp/xfflood/iaCHsfwater/detail?mtcd='+mtcd)
|
|
this.imgList = res.data.data
|
|
console.log('res',res)
|
|
}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()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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%;
|
|
min-height: 40px;
|
|
text-align: right;
|
|
line-height: 38px;
|
|
padding-right: 10px;
|
|
}
|
|
.rf{
|
|
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>
|