<template>
|
<view>
|
<view class="tab">
|
<u-tabs :itemStyle="{width: '200rpx' ,height: '88rpx' }" :activeStyle="{color: '#99bada' }" lineWidth="60"
|
:current="currentIndex" :list="tabList" @click="tabClick">
|
</u-tabs>
|
</view>
|
<view class="main">
|
<view class="jbzl" v-if="currentIndex == 0">
|
<view class="basic-infomation">
|
<u-row>
|
<u-col span="12">
|
<view class="item text_area">
|
<view class="text_area_title">
|
行政区划：<text class="text">{{currentReservoir.region}}</text>
|
</view>
|
<view class="text_icon">
|
<u-icon name="map" color="#2979ff" size="28"></u-icon>
|
</view>
|
</view>
|
</u-col>
|
</u-row>
|
<u-row justify='space-evenly'>
|
<u-col span="5.9" textAlign="center">
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">工程规模:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.scale || '--'}}</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.gcgm" class="img-icon"></image>
|
</view>
|
</view>
|
</u-col>
|
|
<u-col span="5.9" textAlign="center">
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">集雨面积:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.rainArea || '--'}}km²</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.jymj" class="img-icon"></image>
|
</view>
|
</view>
|
</u-col>
|
</u-row>
|
|
<u-row justify='space-evenly'>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">死水位:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.deadSw || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.ssw" class="img-icon"></image>
|
</view>
|
</view>
|
|
|
</u-col>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">正常蓄水位:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.normalSw || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.zcxsw" class="img-icon"></image>
|
</view>
|
</view>
|
|
|
</u-col>
|
</u-row>
|
<u-row justify='space-evenly'>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">设计洪水位:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.designSw || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.sjhsw" class="img-icon"></image>
|
</view>
|
</view>
|
|
|
|
</u-col>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">校核洪水位:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.verifySw || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.jhhsw" class="img-icon"></image>
|
</view>
|
</view>
|
|
</u-col>
|
</u-row>
|
<u-row justify='space-evenly'>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">总库容:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.sumKr || '--'}}万m³</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.zkr" class="img-icon"></image>
|
</view>
|
</view>
|
|
|
</u-col>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">调洪库容:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.floodRegulationKr || '--'}}万m³</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.dhkr" class="img-icon"></image>
|
</view>
|
</view>
|
|
</u-col>
|
</u-row>
|
<u-row justify='space-evenly'>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">防洪库容:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.againstKr || '--'}}万m³</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.fhkr" class="img-icon"></image>
|
</view>
|
</view>
|
|
|
</u-col>
|
<u-col span="5.9">
|
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">兴利库容:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.workKr || '--'}}万m³</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.xlkr" class="img-icon"></image>
|
</view>
|
</view>
|
|
|
</u-col>
|
</u-row>
|
<u-row justify='space-evenly'>
|
<u-col span="5.9">
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">死库容:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.deadKr || '--'}}万m³</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.skr" class="img-icon"></image>
|
</view>
|
</view>
|
</u-col>
|
<u-col span="5.9">
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">汛限水位:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.mid_flood_flse_stag || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.xxsw" class="img-icon"></image>
|
</view>
|
</view>
|
</u-col>
|
</u-row>
|
<u-row justify='space-evenly'>
|
<u-col span="5.9">
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">防洪高水位:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.tb_flpr_high_stag || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.fhgsw" class="img-icon"></image>
|
</view>
|
</view>
|
</u-col>
|
<u-col span="5.9">
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">坝顶高程:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.tb_dam_top_elevation || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.bdgc" class="img-icon"></image>
|
</view>
|
</view>
|
</u-col>
|
</u-row>
|
<u-row justify='space-evenly'>
|
<u-col span="5.9">
|
<view class="item">
|
<view class="left">
|
<view class="up">
|
<text class="text">控制运行水位:</text>
|
</view>
|
<view class="down">
|
<text class="text">{{currentReservoir.tb_control_z || '--'}}m</text>
|
</view>
|
</view>
|
<view class="right">
|
<image :src="imgList.kzyxsw" class="img-icon"></image>
|
</view>
|
</view>
|
</u-col>
|
<u-col span="5.9">
|
|
</u-col>
|
</u-row>
|
</view>
|
<!-- <view class="select">
|
<view class="db" @click="navigatorDbDetail"><span class="text">大坝</span> </view>
|
<view class="yhd" @click="navigatorYhdDetail">溢洪道</view>
|
</view> -->
|
</view>
|
|
<view v-if="currentIndex == 1">
|
<!-- </u-empty> -->
|
<u-empty v-if='!currentReservoir.summary' textSize='24rpx' textColor='#BBBBBB' text="暂无工程概况"
|
:icon="imgList.gcgk">
|
</u-empty>
|
<view v-else class="gcgk_text">
|
{{currentReservoir.summary}}
|
</view>
|
<!-- 暂无工程概况 -->
|
</view>
|
|
<view class="swkrqx" v-if="currentIndex == 2">
|
<echart initId="kr" :option="krOption"></echart>
|
<view class="list">
|
<view class="itme-box">
|
<view class="h-table">
|
<view class="h-tr h-tr-2 h-thead ">
|
<view class="h-td">水位(m)</view>
|
<view class="h-td">库容(万m³)</view>
|
<!-- <view class="h-td">面积(km²)</view> -->
|
</view>
|
|
<view class="h-tr h-tr-2" v-for="(item,index) in tableList" :key="index">
|
<view class="h-td">{{item.sw ===0?0:(item.sw?item.sw:'--')}}</view>
|
<view class="h-td">{{item.kr ===0?0:(item.kr?item.kr:'--')}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
getReservoirSwKrLine,
|
reservoirDetail,
|
getReservoirBasicInfo
|
} from "@/api/dataCenter/reservoir/reservoir.js"
|
import echart from "@/components/echart/echart.vue"
|
export default {
|
components: {
|
echart
|
},
|
props: ['reservoirId'],
|
data() {
|
return {
|
imgList: {
|
gcgm: require("../static/img/reservoirImg/gcgm.png"),
|
jymj: require("../static/img/reservoirImg/jymj.png"),
|
ssw: require("../static/img/reservoirImg/ssw.png"),
|
zkr: require("../static/img/reservoirImg/zkr.png"),
|
zcxsw: require("../static/img/reservoirImg/zcxsw.png"),
|
sjhsw: require("../static/img/reservoirImg/sjhsw.png"),
|
jhhsw: require("../static/img/reservoirImg/jhhsw.png"),
|
dhkr: require("../static/img/reservoirImg/dhkr.png"),
|
fhkr: require("../static/img/reservoirImg/fhkr.png"),
|
xlkr: require("../static/img/reservoirImg/xlkr.png"),
|
skr: require("../static/img/reservoirImg/skr.png"),
|
xxsw: require("../static/img/reservoirImg/xxsw.png"),
|
fhgsw: require("../static/img/reservoirImg/fhgsw.png"),
|
bdgc: require("../static/img/reservoirImg/bdgc.png"),
|
kzyxsw: require("../static/img/reservoirImg/kzyxsw.png"),
|
|
gcgk: require("../static/img/reservoirImg/gcgk.png"),
|
},
|
currentIndex: 0,
|
textSize: "14",
|
tabList: [{
|
name: "基本资料"
|
},
|
{
|
name: "工程概况"
|
},
|
{
|
name: "水位库容曲线"
|
}
|
],
|
currentReservoir: {},
|
krOption: {},
|
krData: {},
|
tableList: [],
|
}
|
},
|
created() {
|
this.getReservoirInfomation()
|
this.loadKrData()
|
},
|
methods: {
|
tabClick(item) {
|
this.currentIndex = item.index
|
},
|
|
async getReservoirInfomation() {
|
const res = await reservoirDetail({
|
res_cd: this.reservoirId
|
})
|
let data = res.resultList[0]
|
this.currentReservoir = {
|
region: data.res_loc.split("-").join(""),
|
scale: data.eng_scal,
|
rainArea: "",
|
deadSw: "",
|
normalSw: "",
|
designSw: "",
|
verifySw: "",
|
sumKr: "",
|
floodRegulationKr: "",
|
againstKr: "",
|
workKr: "",
|
deadKr: "",
|
summary: data.summary
|
}
|
|
const res1 = await getReservoirBasicInfo({
|
res_cd: this.reservoirId
|
})
|
let info = res1.data[0]
|
this.currentReservoir.deadSw = info.tb_dead_stag
|
this.currentReservoir.normalSw = info.tb_norm_pool_stag
|
this.currentReservoir.designSw = info.tb_des_fl_stag
|
this.currentReservoir.verifySw = info.tb_chec_fl_stag
|
this.currentReservoir.sumKr = info.tot_cap
|
this.currentReservoir.floodRegulationKr = "--"
|
this.currentReservoir.againstKr = info.flco_cap
|
this.currentReservoir.workKr = info.ben_res_cap
|
this.currentReservoir.deadKr = info.dead_cap
|
this.currentReservoir.mid_flood_flse_stag = info.mid_flood_flse_stag
|
this.currentReservoir.tb_flpr_high_stag = info.tb_flpr_high_stag
|
this.currentReservoir.tb_dam_top_elevation = info.tb_dam_top_elevation
|
this.currentReservoir.tb_control_z = info.tb_control_z
|
},
|
async loadKrData() {
|
const res = await getReservoirSwKrLine({
|
res_guid: this.reservoirId
|
})
|
let data = res.data
|
this.krData = {
|
sw: [],
|
kr: []
|
}
|
this.tableList = []
|
data.sort((a, b) => a.stag - b.stag)
|
data.forEach(e => {
|
this.krData.sw.push(e.stag)
|
this.krData.kr.push(e.cap)
|
this.tableList.push({
|
sw: e.stag,
|
kr: e.cap
|
})
|
})
|
this.initKrOption(this.krData)
|
},
|
initKrOption(data) {
|
this.krOption = {
|
// tooltip: {
|
// trigger: 'axis',
|
// axisPointer: {
|
// type: 'cross',
|
// crossStyle: {
|
// color: '#999'
|
// }
|
// },
|
// formatter: function(params) {
|
// console.log(params, "paramsssss")
|
// var result = '水位：' + params[0].name + '(m)\n库容：' + params[0].value + '(10⁴m³)'
|
// return result
|
// }
|
// },
|
xAxis: [{
|
type: 'value',
|
name: '库容(10⁴m³)',
|
boundaryGap: false,
|
axisPointer: {
|
type: 'shadow',
|
},
|
minInterval: 20,
|
}],
|
yAxis: [{
|
type: 'category',
|
name: '水位(m)',
|
nameTextStyle: {
|
fontSize: 14,
|
vertivalAlign: "middle",
|
padding: [0, 26, 0, 0]
|
},
|
min: (val) => {
|
return val.min
|
},
|
max: (val) => {
|
return val.max
|
},
|
axisLine: {
|
show: true
|
},
|
data: data.sw
|
}],
|
series: [{
|
name: '水位',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
itemStyle: {
|
color: "#aecf89",
|
},
|
data: data.kr,
|
}],
|
grid: {
|
right: "25%",
|
bottom: "10%",
|
left: "15%"
|
}
|
}
|
},
|
navigatorDbDetail() {
|
let itemStr = JSON.stringify(this.currentReservoir)
|
let url = "/subPackage/realtimeMonitor/reservoir/dbDetail?item=" + itemStr
|
this.$u.func.globalNavigator(url, "navTo")
|
|
},
|
navigatorYhdDetail() {
|
let itemStr = JSON.stringify(this.currentReservoir)
|
let url = "/subPackage/realtimeMonitor/reservoir/yhdDetail?item=" + itemStr
|
this.$u.func.globalNavigator(url, "navTo")
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .u-row {
|
padding: 4rpx 0;
|
}
|
|
/* 引入表格样式表 */
|
@import "@/subPackage/rainWaterCondition/static/style/helang-table.scss";
|
|
.main {
|
// background-color: #f9f9fa;
|
padding: 0 !important;
|
margin: 0 !important;
|
|
.gcgk {
|
padding: 132rpx 0;
|
}
|
|
.gcgk_text {
|
background: #fff;
|
padding: 40rpx 0;
|
text-indent: 1em;
|
}
|
|
.h-table {
|
.h-tr {
|
border: 0 !important;
|
}
|
|
.h-td {
|
font-size: 26rpx;
|
|
border: 0 !important;
|
}
|
|
.h-thead {
|
background-color: #E1F3FF;
|
color: #51A4FA;
|
font-size: 26rpx;
|
font-weight: 700;
|
}
|
}
|
|
}
|
|
.jbzl {
|
.basic-infomation {
|
background-color: #fbfbfb;
|
margin-bottom: 50rpx;
|
|
.text_area {
|
height: 100rpx !important;
|
background-color: red;
|
padding: 4rpx 0;
|
display: flex;
|
align-items: center;
|
margin: 0 !important;
|
width: 100% !important;
|
|
.text_area_title {
|
color: #BBBBBB;
|
flex: 3;
|
text-align: center;
|
font-size: 30rpx;
|
|
.text {
|
color: #333333;
|
}
|
}
|
|
.text_icon {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
.item {
|
height: 166rpx;
|
// width: 340rpx;
|
display: flex;
|
background-color: #ffffff;
|
margin: 1rpx 0 1rpx 1rpx;
|
|
.left {
|
flex: 2;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.down {
|
padding-top: 12rpx;
|
}
|
}
|
|
.right {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.img-icon {
|
width: 60rpx;
|
height: 54rpx;
|
}
|
}
|
}
|
}
|
|
.select {
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
|
.db {
|
width: 354rpx;
|
height: 200rpx;
|
color: #1E8B83;
|
font-weight: 700;
|
background: url("../static/img/reservoirImg/db.png") no-repeat;
|
background-position: 100% 100%;
|
background-size: contain;
|
}
|
|
.yhd {
|
width: 354rpx;
|
height: 200rpx;
|
color: #648ABB;
|
font-weight: 700;
|
background: url("../static/img/reservoirImg/yhd.png") no-repeat;
|
background-position: 100% 100%;
|
background-size: contain;
|
}
|
|
.text {
|
padding: 30rpx 0 0 28rpx;
|
}
|
}
|
|
|
|
|
}
|
</style>
|
