307 lines
7.0 KiB
Vue
307 lines
7.0 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>
|