307 lines
7.3 KiB
Vue
307 lines
7.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="nav_bar">
|
||
<!-- <u-navbar title="查看" @rightClick="rightClick" :autoBack="true">
|
||
</u-navbar> -->
|
||
<u-icon
|
||
name="arrow-left"
|
||
@click="rightClick"
|
||
color="#2979ff"
|
||
size="28"
|
||
></u-icon>
|
||
<view class="nav_bar_tit"> 查看 </view>
|
||
</view>
|
||
|
||
<!-- 上一条下一条 -->
|
||
<view class="tabs_h">
|
||
<div
|
||
class="leftTab"
|
||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||
@click="perClick(1)"
|
||
>
|
||
上一条
|
||
</div>
|
||
<div
|
||
class="rightTab"
|
||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||
@click="nextClick(2)"
|
||
>
|
||
下一条
|
||
</div>
|
||
</view>
|
||
|
||
<!-- info -->
|
||
<view class="info">
|
||
<u-form
|
||
labelPosition="left"
|
||
:model="infoForm"
|
||
ref="infoForm"
|
||
labelWidth="100"
|
||
>
|
||
<u-form-item
|
||
label="工程类型"
|
||
prop="projectType"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.projectType"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 工程名称 -->
|
||
<u-form-item
|
||
label="工程名称"
|
||
prop="projectName"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.projectName"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 是否发电 -->
|
||
<u-form-item
|
||
label="是否发电"
|
||
prop="isPowerGeneration"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.isPowerGeneration"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 是否泄洪 -->
|
||
<u-form-item
|
||
label="是否泄洪"
|
||
prop="isFloodRelease"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.isFloodRelease"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 水位(m) -->
|
||
<u-form-item label="水位(m)" prop="waterLevel" borderBottom ref="item3">
|
||
<u--input
|
||
v-model="infoForm.waterLevel"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 入库流量 (m³/s)： -->
|
||
<u-form-item
|
||
label="入库流量(m³/s)"
|
||
prop="inflowVolume"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.inflowVolume"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
|
||
<!-- 出库流量 (m³/s)： -->
|
||
<u-form-item
|
||
label="出库流量(m³/s)"
|
||
prop="outflowVolume"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.outflowVolume"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 其他运行情况 -->
|
||
<u-form-item
|
||
label="其他运行情况"
|
||
prop="remark"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--textarea
|
||
v-model="infoForm.remark"
|
||
placeholder="请输入内容"
|
||
disabled
|
||
></u--textarea>
|
||
</u-form-item>
|
||
<!-- 上报人 -->
|
||
<u-form-item label="上报人" prop="reporter" borderBottom ref="item3">
|
||
<u--input
|
||
v-model="infoForm.reporter"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 上报单位 -->
|
||
<u-form-item
|
||
label="上报单位"
|
||
prop="reportUnit"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.reportUnit"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 上报时间 -->
|
||
<u-form-item
|
||
label="上报时间"
|
||
prop="reportTime"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="infoForm.reportTime"
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
disabled
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 附件 -->
|
||
<u-form-item
|
||
label="附件"
|
||
prop="checkboxValue1"
|
||
borderBottom
|
||
ref="item3"
|
||
>
|
||
<image
|
||
:showLoading="true"
|
||
:src="src"
|
||
width="80px"
|
||
height="80px"
|
||
mode="aspectFit"
|
||
@click="toggleZoom"
|
||
:style="{ transform: `scale(${zoomed ? 2 : 1})` }"
|
||
></image>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import moment from 'moment'
|
||
export default {
|
||
props: ['info'],
|
||
data () {
|
||
return {
|
||
showTextTypeTab: 0,
|
||
src: '../../../static/tabs/bigImg.png',
|
||
infoForm: {
|
||
checkboxValue1: '水库',
|
||
reporter: '' // 上报人
|
||
},
|
||
zoomed: false
|
||
}
|
||
},
|
||
|
||
mounted () {
|
||
console.log('info', this.info)
|
||
this.infoForm = this.info
|
||
},
|
||
methods: {
|
||
// 切换图片放大状态的方法
|
||
toggleZoom () {
|
||
this.zoomed = !this.zoomed
|
||
},
|
||
perClick (val) {
|
||
this.showTextTypeTab = val
|
||
},
|
||
nextClick (val) {
|
||
this.showTextTypeTab = val
|
||
},
|
||
// 返回按钮
|
||
rightClick () {
|
||
console.log('rightClick')
|
||
this.$emit('rightClick', false)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
font-size: 14px;
|
||
background-color: #f3f5f8;
|
||
}
|
||
.tabs_h {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 56rpx;
|
||
line-height: 88rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
text-align: center;
|
||
}
|
||
.leftTab {
|
||
width: 80px;
|
||
}
|
||
.rightTab {
|
||
width: 80px;
|
||
}
|
||
.activetextTypeTab,
|
||
.activetextTypeTab:hover {
|
||
// border-bottom: 3rpx solid #2286f6;
|
||
color: #026be0;
|
||
}
|
||
|
||
.nav_bar {
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.nav_bar_tit {
|
||
text-align: center;
|
||
}
|
||
.info {
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
// text-align: right;
|
||
padding: 20px;
|
||
}
|
||
|
||
.fl {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: left;
|
||
}
|
||
.flsb {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.u-image {
|
||
width: 100%; /* 或者其他尺寸 */
|
||
transition: transform 0.3s; /* 平滑的放大效果 */
|
||
}
|
||
</style>
|