<template>
|
<view style="padding: 20rpx;">
|
<view class="img">
|
<u-swiper :loading="swiperLoading" keyName="image_url" showTitle :list="imgList" imgMode="heightFix"
|
height="500rpx" @change="change" @click="previewImg" autoplay>
|
<view slot="indicator" class="indicator-num">
|
<text v-if="imgList.length >0"
|
class="indicator-num__text">{{ current + 1 }}/{{ imgList.length }}</text>
|
</view>
|
</u-swiper>
|
</view>
|
<view class="tabSkName">
|
<view class="tab_item_station" @click="bindPickerChange(item,index)" :class="{'active':index==stationIndex}"
|
v-for="(item,index) in stationList" :key="item.value">
|
{{item.label}}
|
</view>
|
</view>
|
<view class="info">
|
<view class="wrap">
|
<view class="wrap_item">
|
<view class="title">行政区划：<span class="text">{{currentReservoir.region}}</span></view>
|
<view v-if="currentReservoir.res_lon" class="right_icon" @click="locationNav">
|
<u-icon name="map" color="#2979ff" size="22"></u-icon>
|
</view>
|
</view>
|
<view class="wrap_item">
|
<view class="title">更新时间：<span class="text">{{currentReservoir.updateTime}}</span></view>
|
</view>
|
</view>
|
</view>
|
|
<view class="basic-info">
|
<view class="top">
|
<view class="left_box">
|
<view class="box_item">
|
<view class="item">
|
<view class="value">
|
{{currentReservoir.sw}}米
|
</view>
|
<view class="label">
|
水位
|
</view>
|
</view>
|
<view class="item">
|
<view class="value" style="text-align: center;">
|
<!-- {{currentReservoir.kr}}万方 --> --
|
</view>
|
<view class="label">
|
蓄水量
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="line"></view>
|
<view class="right_item_icon">
|
<u-button v-if="userInfo.role_name.indexOf('gly')> -1 || userInfo.role_name.indexOf('admin') > -1"
|
@click="navigatorReportFlood()" style="width: 40rpx" type="primary" text="报汛"
|
size="small"></u-button>
|
<u-icon v-else name="bookmark" color="#b7ded8" size="28"></u-icon>
|
</view>
|
</view>
|
<view class="bottom">
|
<view class="up">
|
<view class="left">
|
<text>堰顶高程:{{currentReservoir.ydHeight ? currentReservoir.ydHeight:'--'}}米</text>
|
</view>
|
<view class="right">
|
<text>汛限水位:{{currentReservoir.limitSw ? currentReservoir.limitSw :'--'}}米</text>
|
</view>
|
<view class="right">
|
<text>总库容:{{currentReservoir.kr?currentReservoir.kr:'--'}}万m³</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="basic-info rain-info">
|
<view class="top">
|
<view class="left_box">
|
<view class="box_item">
|
<view class="item">
|
<view class="value">
|
{{currentReservoir.nowRainfall}}毫米
|
</view>
|
<view class="label">
|
今日降雨
|
</view>
|
</view>
|
<view class="item">
|
<view class="value">
|
{{currentReservoir._24Rainfall}}毫米
|
</view>
|
<view class="label">
|
昨日降雨
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="line"></view>
|
<view class="right_item_icon">
|
<image class="img-icon" src="../static/img/realtimeMonitiorImg/rain.png"></image>
|
</view>
|
</view>
|
</view>
|
|
<view class="sw-info">
|
<view class="top">
|
<view class="left_box">
|
<view class="box_item">
|
<view v-if="JSON.stringify(wlw) != '{}'" class="item w45">
|
<view class="label">
|
新站水位:
|
</view>
|
<view class="value">
|
{{wlw.rz || '--'}}米
|
</view>
|
</view>
|
<view v-if="JSON.stringify(wlw) != '{}'" class="item w45">
|
<view class="label">
|
时间:
|
</view>
|
<view class="value">
|
{{wlw.time?wlw.time: "--"}}
|
</view>
|
</view>
|
|
<view v-if="JSON.stringify(lk) != '{}'" class="item w45">
|
<view class="label">
|
老站水位:
|
</view>
|
<view class="value">
|
{{lk.rz || '--'}}米
|
</view>
|
</view>
|
<view v-if="JSON.stringify(lk) != '{}'" class="item w45">
|
<view class="label">
|
时间:
|
</view>
|
<view class="value">
|
{{lk.time?lk.time: "--"}}
|
</view>
|
</view>
|
|
<view v-if="JSON.stringify(shuiwen) != '{}'" class="item w45">
|
<view class="label">
|
水文水位:
|
</view>
|
<view class="value">
|
{{shuiwen.rz || '--'}}米
|
</view>
|
</view>
|
<view v-if="JSON.stringify(shuiwen) != '{}'" class="item w45">
|
<view class="label">
|
时间:
|
</view>
|
<view class="value">
|
{{shuiwen.time?shuiwen.time: "--"}}
|
</view>
|
</view>
|
|
<view class="item w45">
|
<view class="label">
|
人工上报:
|
</view>
|
<view class="value">
|
{{reportFloodRecord.personRz}}米
|
</view>
|
</view>
|
<view class="item w45">
|
<view class="label">
|
时间:
|
</view>
|
<view class="value">
|
{{reportFloodRecord.updateTime}}
|
</view>
|
</view>
|
<!-- <view class="item w45">
|
<view class="label">
|
图片识别:
|
</view>
|
<view class="value">
|
{{"--"}}
|
</view>
|
</view>
|
<view class="item w45">
|
<view class="label">
|
时间:
|
</view>
|
<view class="value">
|
{{"--"}}
|
</view>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!--水位过程线-->
|
<view class="card-view">
|
<card>
|
<view class="card-head" slot="insideHead">
|
<view>
|
<u--text size="20" bold text="水位过程线"></u--text>
|
</view>
|
</view>
|
<view class="card-content" slot="content">
|
<view class="card_box j-c-s-a h" style="padding: 20rpx 0;">
|
<view class="date" style="background-color: #eaf2fc;">
|
<uni-datetime-picker @change="czSqChange" :clear-icon="false" :end="endDateTime"
|
v-model="sqDatetimerange" type="datetimerange" rangeSeparator="至">
|
<view class='data-item'>
|
<view>
|
{{converTime(sqDatetimerange[0])}}
|
</view>
|
至
|
<view>
|
{{converTime(sqDatetimerange[1])}}
|
</view>
|
</view>
|
</uni-datetime-picker>
|
</view>
|
<view class="card_box h" style="background-color: #eaf2fc;padding: 0 10rpx;"
|
@click="flagVisible=true">
|
<view class="title">{{flagOption[flagIndex].name}}</view>
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
<view v-if="userInRole" class="card_box h" style="background-color: #eaf2fc;padding: 0 10rpx; "
|
@click="sqVisible=true">
|
<view class="title">{{czOptionList[sqIndex].name}}</view>
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
</view>
|
<echart v-if="!sqEchartLoading" ref="swgcx" initId="swgcx" :option="swgcxOption"></echart>
|
<view v-else style="height: 500rpx;display: flex; justify-content: center;">
|
<u-loading-icon mode="semicircle" :show="sqEchartLoading" size="36"></u-loading-icon>
|
</view>
|
</view>
|
</card>
|
</view>
|
|
<!--雨量直方图-->
|
<view class="card-view">
|
<card>
|
<view class="card-head" slot="insideHead">
|
<view>
|
<u--text size="20" bold text="雨量直方图"></u--text>
|
</view>
|
</view>
|
<view class="card-content" slot="content">
|
<view class="card_box j-c-s-a h" style="padding: 20rpx 0;">
|
<view class="date" style="background-color: #eaf2fc;">
|
<uni-datetime-picker @change="czYqChange" :clear-icon="false" v-model="yqDatetimerange"
|
:end="endDateTime" type="datetimerange" rangeSeparator="至">
|
|
<view class='data-item'>
|
<view>
|
{{converTime(yqDatetimerange[0])}}
|
</view>
|
至
|
<view>
|
{{converTime(yqDatetimerange[1])}}
|
</view>
|
</view>
|
|
</uni-datetime-picker>
|
</view>
|
<view class="card_box h" style="background-color: #eaf2fc;padding: 0 10rpx;"
|
@click="intvVisible=true">
|
<view class="title">{{intvOption[intvIndex].name}}</view>
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
|
<view v-if="userInRole" class="card_box h" style="background-color: #eaf2fc;padding: 0 10rpx;"
|
@click="yqVisible=true">
|
<view class="title">{{czOptionList[yqIndex].name}}</view>
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
|
</view>
|
|
<echart v-if="!yqEchartLoading" ref="ylzft" initId="ylzft" :option="ylzftOption"></echart>
|
<view v-else style="height: 500rpx;display: flex; justify-content: center;">
|
<u-loading-icon mode="semicircle" :show="yqEchartLoading" size="36"></u-loading-icon>
|
</view>
|
|
</view>
|
</card>
|
</view>
|
|
<my-select v-if="flagVisible" :show="flagVisible" type="radio" v-model="flagValue" popupTitle="请选择"
|
:dataLists="flagOption" @cancel="flagVisible=false" @submit="flagSelectSubmit">
|
</my-select>
|
|
<my-select v-if="intvVisible" :show="intvVisible" type="radio" v-model="intvValue" popupTitle="请选择"
|
:dataLists="intvOption" @cancel="intvVisible=false" @submit="intvSelectSubmit">
|
</my-select>
|
|
<my-select v-if="sqVisible" :show="sqVisible" type="radio" v-model="sqValue" popupTitle="请选择"
|
:dataLists="czOptionList" @cancel="sqVisible=false" @submit="sqSelectSubmit">
|
</my-select>
|
<my-select v-if="yqVisible" :show="yqVisible" type="radio" v-model="yqValue" popupTitle="请选择"
|
:dataLists="czOptionList" @cancel="yqVisible=false" @submit="yqSelectSubmit">
|
</my-select>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
convertTimestampToDate,
|
getTimeBefore,
|
timestampToMinute,
|
timestampToTime
|
} from "@/utils/date"
|
import card from "@/components/my-components/card.vue"
|
import echart from "@/components/echart/echart.vue"
|
import mySelect from "@/components/my-components/my-select.vue"
|
import uniDataSelect from "./uni-components/uni-data-select/components/uni-data-select/uni-data-select.vue"
|
import uniDatetimePicker from "./uni-components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
|
import {
|
reservoirRealtimeSw,
|
reservoirList,
|
getReservoirImage,
|
getReservoirBasicInfo,
|
getStation
|
} from "@/api/dataCenter/reservoir/reservoir.js"
|
import {
|
ylzftData,
|
getSKResZLastChildApi,
|
getYqStation,
|
getStation as getStationList,
|
} from "@/api/dataCenter/rainWaterCondition/rainWaterCondition.js"
|
import {
|
getLatestRecord
|
} from "@/api/reportFlood/reportFloodRecord"
|
import {
|
isInRole
|
} from "../utils"
|
import {
|
hsybData
|
} from "@/api/hsyb"
|
export default {
|
components: {
|
card,
|
echart,
|
mySelect,
|
uniDataSelect,
|
uniDatetimePicker,
|
},
|
props: {
|
reservoirId: {
|
type: String,
|
required: true
|
}
|
},
|
computed: {
|
converTime() {
|
return time => {
|
return convertTimestampToDate(time, "MM-dd hh")
|
}
|
}
|
},
|
data() {
|
return {
|
endDateTime: convertTimestampToDate(new Date()),
|
lk: {},
|
wlw: {},
|
shuiwen: {},
|
current: 0,
|
imgList: [],
|
currentReservoir: {
|
region: "",
|
updateTime: "",
|
sw: "",
|
limitSw: "",
|
nowRainfall: "",
|
_24Rainfall: "",
|
bdHeight: 0,
|
ydHeight: "",
|
kr: "",
|
st_cd_rain: "",
|
},
|
reservoirBasicInfo: {},
|
//判断数据来源
|
flag: "",
|
swiperLoading: false,
|
|
//水情测站显示
|
sqVisible: false,
|
sqValue: "",
|
sqResource: "",
|
sqIndex: 0,
|
//雨情测站显示
|
yqIndex: 0,
|
yqValue: "",
|
yqResource: "",
|
yqVisible: false,
|
|
//获取测站数据
|
czOptionList: [{
|
name: "老站",
|
index: 0
|
}],
|
//预测时间列表
|
pridictionTmList: [],
|
//预测数据列表
|
pridictionDaList: [],
|
sqEchartLoading: true,
|
swgcxOption: {
|
color: ["#FF8B07", "#1180ff", "#f800e8", "#08dca9", "green", "black", "brown", "red", "#FF8B07"],
|
tooltip: {
|
trigger: 'axis',
|
},
|
xAxis: {
|
type: 'category',
|
data: [],
|
axisLabel: { //x轴文字的配置
|
color: "#999999", //x轴内容文字颜色
|
},
|
axisTick: {
|
alignWithLabel: true,
|
// interval: 0
|
}
|
},
|
yAxis: [{
|
name: "水位(m)",
|
type: 'value',
|
}, ],
|
series: [{
|
name: "水位",
|
// yAxisIndex: 0,
|
data: [],
|
type: 'line',
|
smooth: 'true',
|
showSymbol: false
|
},
|
{
|
type: "line",
|
name: "汛限水位",
|
markLine: {
|
symbol: 'none',
|
data: [{
|
lineStyle: {
|
type: "dashed"
|
},
|
label: {
|
position: "middle",
|
fontWeight: 'bold',
|
color: "#1180ff",
|
formatter(params) {
|
return `汛限水位 ${params.value}m`
|
}
|
},
|
yAxis: ""
|
}, ]
|
}
|
},
|
{
|
type: "line",
|
name: "死水位",
|
markLine: {
|
symbol: 'none',
|
data: [{
|
lineStyle: {
|
type: "dashed"
|
},
|
label: {
|
position: "insideStartTop",
|
distance: 5,
|
fontWeight: 'bold',
|
formatter(params) {
|
return `死水位 ${params.value}m`
|
}
|
},
|
yAxis: ""
|
}, ]
|
}
|
},
|
{
|
type: "line",
|
name: "正常水位",
|
markLine: {
|
symbol: 'none',
|
data: [{
|
lineStyle: {
|
type: "dashed"
|
},
|
label: {
|
position: "insideStartBottom",
|
fontWeight: 'bold',
|
formatter(params) {
|
return `正常水位 ${params.value}m`
|
}
|
},
|
yAxis: ""
|
}, ]
|
}
|
},
|
{
|
type: "line",
|
name: "设计水位",
|
markLine: {
|
symbol: 'none',
|
data: [{
|
lineStyle: {
|
type: "dashed"
|
},
|
label: {
|
position: "insideMiddleTop",
|
fontWeight: 'bold',
|
formatter(params) {
|
return `设计水位 ${params.value}m`
|
}
|
},
|
yAxis: ""
|
}, ]
|
}
|
},
|
{
|
type: "line",
|
name: "校核水位",
|
markLine: {
|
symbol: 'none',
|
data: [{
|
lineStyle: {
|
type: "dashed"
|
},
|
label: {
|
position: "insideEndTop",
|
fontWeight: 'bold',
|
formatter(params) {
|
return `校核水位 ${params.value}m`
|
}
|
},
|
yAxis: ""
|
}, ]
|
}
|
},
|
{
|
type: "line",
|
name: "坝顶高程",
|
markLine: {
|
symbol: 'none',
|
data: [{
|
lineStyle: {
|
type: "dashed"
|
},
|
label: {
|
position: "insideEndBottom",
|
fontWeight: 'bold',
|
formatter(params) {
|
return `坝顶高程 ${params.value}m`
|
}
|
},
|
yAxis: ""
|
}, ]
|
}
|
},
|
{
|
type: "line",
|
name: "堰顶高程",
|
markLine: {
|
symbol: 'none',
|
data: [{
|
lineStyle: {
|
type: "dashed"
|
},
|
label: {
|
position: "insideStartBottom",
|
fontWeight: 'bold',
|
formatter(params) {
|
return `堰顶高程 ${params.value}m`
|
}
|
},
|
yAxis: ""
|
}, ]
|
}
|
},
|
{
|
name: '预报水位(m)',
|
type: 'line',
|
data: [],
|
// min: 0,
|
// max: 200,
|
lineStyle: {
|
normal: {
|
type: "dotted"
|
}
|
},
|
smooth: true,
|
showSymbol: false
|
},
|
],
|
// dataZoom: {
|
// show: true,
|
// realtime: true,
|
// start: 75,
|
// end: 100,
|
// },
|
grid: {
|
top: "30%",
|
left: '15%',
|
bottom: "11%",
|
right: '5%',
|
// containLabel: true
|
},
|
legend: {
|
selected: {
|
"水位": true,
|
"汛限水位": true,
|
"堰顶高程": false,
|
"坝顶高程": false,
|
"校核水位": false,
|
"设计水位": false,
|
"正常水位": false,
|
"死水位": false,
|
},
|
// left: "100",
|
align: "right",
|
data: ["水位", "汛限水位", "坝顶高程", "堰顶高程", "校核水位", "设计水位", "正常水位", "死水位"],
|
// '入库流量',
|
padding: [20, 0, 0, 0],
|
textStyle: {
|
fontSize: 10
|
},
|
},
|
},
|
swgcxData: {
|
xTime: [],
|
yLineSw: [],
|
yLineKr: [],
|
},
|
sqDatetimerange: getTimeBefore(24),
|
//时段类型相关数据
|
flagOption: [{
|
name: "实时",
|
value: "1",
|
index: 0,
|
},
|
{
|
name: "整点",
|
value: "2",
|
index: 1,
|
},
|
{
|
name: "八时",
|
value: "3",
|
index: 2,
|
},
|
],
|
flagIndex: 0,
|
flagValue: "1",
|
flagVisible: false,
|
sqQuery: {
|
flag: 1
|
},
|
yqDatetimerange: getTimeBefore(24),
|
|
yqQuery: {
|
intv: 1
|
},
|
//小时类型
|
intvOption: [{
|
name: "1小时",
|
value: 1,
|
index: 0
|
},
|
{
|
name: "3小时",
|
value: 3,
|
index: 1
|
},
|
{
|
name: "6小时",
|
value: 6,
|
index: 2
|
},
|
{
|
name: "12小时",
|
value: 12,
|
index: 3
|
},
|
{
|
name: "24小时",
|
value: 24,
|
index: 4
|
},
|
],
|
intvVisible: false,
|
intvIndex: 0,
|
intvValue: 1,
|
|
yqEchartLoading: false,
|
ylzftOption: {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
animation: false,
|
label: {
|
backgroundColor: '#505765'
|
}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: [],
|
axisTick: {
|
alignWithLabel: true,
|
// interval: 0
|
},
|
axisLabel: {
|
formatter: value => {
|
if (value.indexOf("-") > -1) {
|
//日期换行
|
let arr = value.split(" ")
|
let temp = arr[1] + "\n" + arr[0]
|
return temp
|
} else {
|
return value
|
}
|
}
|
},
|
},
|
// dataZoom: {
|
// show: true,
|
// realtime: true,
|
// start: 75,
|
// end: 100
|
// },
|
yAxis: [{
|
name: "雨量(mm)",
|
type: 'value'
|
}, ],
|
series: [{
|
name: "雨量",
|
data: [],
|
type: 'bar',
|
barWidth: 10,
|
}],
|
grid: {
|
top: '10%',
|
left: '14%',
|
bottom: '14%',
|
right: '5%',
|
// containLabel: true
|
},
|
legend: {
|
selected: {},
|
align: "right",
|
data: [],
|
padding: [5, 0, 0, 0],
|
textStyle: {
|
fontSize: 10
|
},
|
},
|
},
|
ylzftData: {
|
xTime: [],
|
yBarValue: [],
|
},
|
stationList: [],
|
stationIndex: 0,
|
//人工报汛
|
reportFloodRecord: {},
|
//水位站
|
waterStation: "",
|
waterStationList: [],
|
//雨量站
|
rainStation: "",
|
rainStationList: [],
|
userInRole: false,
|
|
sqLoadingStop: true
|
}
|
},
|
created() {
|
this.userInRole = isInRole()
|
},
|
mounted() {
|
this.initGetStation()
|
this.getReportFlood()
|
this.getReservoirDetail()
|
this.getTxStation()
|
},
|
onLoad(option) {},
|
onShow() {
|
this.getReportFlood()
|
},
|
options: {
|
styleIsolation: 'shared'
|
},
|
watch: {
|
flag: {
|
handler(val) {
|
if (val) {
|
this.getSwData()
|
this.getRainData()
|
}
|
}
|
}
|
},
|
methods: {
|
timeFormatter(tm, flag) {
|
let time = ""
|
let tmArr = tm.split(" ")
|
if (flag == "sq") {
|
if (tm.indexOf("00:00") > -1) {
|
//0点显示日期
|
return tm
|
} else {
|
time = tmArr[1]
|
return time
|
}
|
} else if (flag == "yq") {
|
if (tm.indexOf("00:00") > -1) {
|
//0点显示日期
|
return tm
|
} else {
|
time = tmArr[1]
|
return time
|
}
|
}
|
},
|
|
//获取报汛记录数据
|
getReportFlood() {
|
getLatestRecord(this.reservoirId).then(res => {
|
let data = res.data
|
if (JSON.stringify(data) != '{}') {
|
this.reportFloodRecord = res.data
|
this.reportFloodRecord.updateTime = convertTimestampToDate(this.reportFloodRecord
|
.updateTime,
|
"MM-dd hh:mm")
|
} else {
|
this.reportFloodRecord.personRz = "--"
|
this.reportFloodRecord.updateTime = "--"
|
}
|
})
|
},
|
//报汛页面跳转
|
navigatorReportFlood() {
|
let url = "/subPackage/realtimeMonitor/reservoir/reportFlood?reservoirId=" + this.reservoirId
|
this.$u.func.globalNavigator(url, "navTo")
|
},
|
//uni自带定位
|
locationNav() {
|
uni.openLocation({
|
latitude: this.currentReservoir.res_lat,
|
longitude: this.currentReservoir.res_lon,
|
scale: 15
|
});
|
},
|
//获取雨量数据
|
getRainData() {
|
getYqStation({
|
res_cd: this.reservoirId
|
}).then(res => {
|
let data = res.resultList
|
this.rainStation = data.filter(e => e.guid == this.flag)[0]
|
|
if (this.rainStation) {
|
this.yqValue = this.rainStation.guid
|
this.yqResource = this.rainStation.sys_resource
|
this.yqIndex = this.czOptionList.findIndex(e => e.value == this.flag)
|
this.getYqDataListByList()
|
}
|
})
|
},
|
//获取雨情数据
|
getYqDataListByList(param = {}) {
|
this.yqEchartLoading = true
|
const that = this
|
const [start_tm, end_tm] = this.yqDatetimerange
|
let params = {
|
res_cd: this.currentReservoir.id,
|
start_tm: start_tm,
|
end_tm: end_tm,
|
st_cd: this.yqValue,
|
resource_flag: this.yqResource
|
}
|
Object.assign(params, param)
|
ylzftData(1, 100000, Object.assign(params, that.yqQuery)).then(res => {
|
let data = res.data.data
|
let value = []
|
let tm = []
|
let val = {}
|
if (data) {
|
data.sort((a, b) => new Date(a.tm) - new Date(b.tm))
|
data = data.filter(e => {
|
return (convertTimestampToDate(e.tm)) != params.end_tm
|
})
|
data.forEach(e => {
|
e.tm = this.timeFormatter(convertTimestampToDate(e.tm, "MM-dd hh:mm"), "yq")
|
tm.push(e.tm)
|
value.push(e.drp)
|
})
|
|
val.xAxis = tm
|
val.yAxis = value
|
this.initYlzftOption(val)
|
}
|
})
|
},
|
//获取图片测站
|
async getTxStation() {
|
const obj = {
|
res_cd: this.reservoirId
|
}
|
const res = await getStation(obj)
|
let arr = []
|
res.data && res.data.length > 0 && res.data.forEach(val => {
|
const skList = val.imagest_name.split(",")
|
skList.forEach(item => {
|
let [value, label, type, hasImg, time] = item.split("：")
|
const obj = {
|
value,
|
label,
|
hasImg,
|
time
|
}
|
arr.push(obj)
|
})
|
})
|
const timeStamp = new Date().getTime() - 12 * 60 * 60 * 1000
|
const start_tm = convertTimestampToDate(new Date(timeStamp), "yyyy-MM-dd ") + " 00:00:00"
|
const end_tm = convertTimestampToDate(new Date())
|
arr = arr.filter(v => v.hasImg == 'Y')?.filter(v => v.time >= start_tm && v.time <= end_tm)
|
if (arr.length > 0) {
|
this.stationList = arr
|
this.currentReservoir.imagest_cd = arr[0].value
|
this.getImage()
|
} else {
|
this.imgList = ["https://sk.hubeishuiyi.cn/business//img/emptyImg.514374af.png"]
|
}
|
},
|
|
bindPickerChange(item, index) {
|
this.current = 0
|
this.stationIndex = index
|
this.currentReservoir.imagest_cd = item.value
|
this.getImage()
|
},
|
|
change(e) {
|
this.current = e.current
|
},
|
|
//轮播图
|
previewImg(e) {
|
let imgArr = this.imgList.map(v => v.image_url)
|
uni.previewImage({
|
current: e, //预览图片的下标
|
urls: imgArr, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以,
|
})
|
},
|
|
convertResource(flag) {
|
if (flag == "物联网") {
|
return "wlw"
|
} else if (flag == "老库") {
|
return "lk"
|
} else if (flag == "水文") {
|
return "sw"
|
}
|
|
return flag
|
},
|
|
//获取新站老站水位
|
getSwData() {
|
getSKResZLastChildApi({
|
res_cd: this.reservoirId
|
}).then(res => {
|
let data = res.data.data
|
this.waterStation = data.filter(e => {
|
return e.st_cd == this.flag
|
})[0]
|
this.sqValue = this.waterStation.st_cd
|
this.sqResource = this.convertResource(this.waterStation.resource_flag)
|
this.sqIndex = this.czOptionList.findIndex(e => e.value == this.flag)
|
this.getSqDataListByList()
|
console.log(data, "----------------")
|
//渲染新老库水位数据
|
data.forEach(e => {
|
console.log(e, 'eeeee')
|
if (e.resource_flag == "物联网") {
|
//有新站取新站
|
if (JSON.stringify(this.wlw) == '{}') {
|
this.wlw = e
|
this.wlw.time = convertTimestampToDate(e.tm, "MM-dd hh:mm")
|
} else if (e.rz) {
|
this.wlw = e
|
this.wlw.time = convertTimestampToDate(e.tm, "MM-dd hh:mm")
|
}
|
} else if (e.resource_flag == "老库") {
|
this.lk = e
|
this.lk.time = convertTimestampToDate(e.tm, "MM-dd hh:mm")
|
} else if (e.resource_flag == "水文") {
|
//如果后续有主站
|
if (JSON.stringify(this.wlw) != '{}' && e.is_main_rsvr == 1) {
|
this.shuiwen = e
|
this.shuiwen.time = convertTimestampToDate(e.tm, "MM-dd hh:mm")
|
} else {
|
//先拿水文的数据
|
this.shuiwen = e
|
this.shuiwen.time = convertTimestampToDate(e.tm, "MM-dd hh:mm")
|
}
|
}
|
})
|
})
|
},
|
|
//获取水情数据
|
async getSqDataListByList(param = {}) {
|
this.sqEchartLoading = true
|
const [start_dt, end_dt] = this.sqDatetimerange
|
let params = {
|
res_cd: this.reservoirId,
|
start_dt: start_dt,
|
end_dt: end_dt,
|
st_cd: this.sqValue,
|
resource_flag: this.sqResource
|
}
|
reservoirRealtimeSw(Object.assign(params, param, this.sqQuery)).then(res => {
|
let data = res.data
|
let value = []
|
let time = []
|
let val = {}
|
//时间升序
|
data = data.sort(function(a, b) {
|
return new Date(a.tm) - new Date(b.tm)
|
})
|
data.forEach(e => {
|
if (e.rz == 0 || e.rz == "") {
|
e.rz = null
|
}
|
e.tm = timestampToMinute(new Date(e.tm).getTime())
|
value.push(e.rz)
|
time.push(e.tm)
|
})
|
|
val.yAxis = value
|
val.xAxis = time
|
this.initSwgcxOption(val)
|
})
|
},
|
|
//获取水库详情数据
|
async getReservoirDetail() {
|
const res = await reservoirList(1, 1, {
|
res_cd: this.reservoirId
|
})
|
let data = res.data.data[0]
|
this.flag = data.st_cd
|
this.currentReservoir = {
|
id: this.reservoirId,
|
name: data.res_nm,
|
region: this.convertRegion(data),
|
updateTime: convertTimestampToDate(data.tm, "yyyy-MM-dd hh:mm"),
|
sw: data.rz,
|
limitSw: data.flse_lim_stag,
|
nowRainfall: data.cur_drp ? data.cur_drp : 0,
|
_24Rainfall: data.ytr_drp ? data.ytr_drp : 0,
|
bdHeight: 0,
|
ydHeight: data.weir_top_elev,
|
kr: data.tot_cap,
|
res_lon: data.res_lon,
|
res_lat: data.res_lat,
|
}
|
this.initSwBasicInfoOption()
|
},
|
|
//行政区划转换
|
convertRegion(item) {
|
let arr = []
|
if (item.city_nm) {
|
arr.push(item.city_nm)
|
}
|
if (item.county_nm) {
|
arr.push(item.county_nm)
|
}
|
if (item.town_nm) {
|
arr.push(item.town_nm)
|
}
|
return arr.join("")
|
},
|
|
//获取图片数据
|
getImage() {
|
this.imgList = []
|
this.swiperLoading = true
|
const timeStamp = new Date().getTime() - 12 * 60 * 60 * 1000
|
let params = {
|
start_tm: convertTimestampToDate(new Date(timeStamp), "yyyy-MM-dd") + " 00:00:00",
|
end_tm: convertTimestampToDate(new Date()),
|
res_cd: this.currentReservoir.id,
|
imagest_cd: this.currentReservoir.imagest_cd
|
}
|
getReservoirImage(params).then(res => {
|
let data = res.data.data
|
data.sort((a, b) => b.tm - a.tm)
|
if (data.length > 0) {
|
data.forEach(val => {
|
if (val.image_url && val.image_url.indexOf(
|
'http://183.95.190.143:9096/images') != -1) {
|
val.image_url = val.image_url.replace('http://183.95.190.143:9096/images',
|
'https://sk.hubeishuiyi.cn/imgWLW/images')
|
}
|
|
if (val.image_url && val.image_url.indexOf(
|
'http://223.75.53.106:8891/skjgimages') != -1) {
|
val.image_url = val.image_url.replace(
|
`http://223.75.53.106:8891/skjgimages`,
|
`https://sk.hubeishuiyi.cn/imgLK/skjgimages`)
|
}
|
if (val.image_url && val.sys_resource == 'hk') {
|
val.image_url = 'https://sk.hubeishuiyi.cn/haik-camera-img/' + val
|
.image_url
|
}
|
val.title = convertTimestampToDate(val.tm, "yyyy-MM-dd hh:mm")
|
|
if (val.image_url) {
|
val.image_url = val.image_url.replace(/\\/g, "/");
|
}
|
})
|
this.imgList = data
|
this.swiperLoading = false
|
} else {
|
this.imgList = ["https://sk.hubeishuiyi.cn/business//img/emptyImg.514374af.png"]
|
this.swiperLoading = false
|
}
|
})
|
},
|
//初始化基础数据
|
async initSwBasicInfoOption() {
|
const resData = {
|
res_cd: this.reservoirId
|
}
|
const tbRes = await getReservoirBasicInfo(resData)
|
let tbData = tbRes.data[0]
|
//死水位
|
this.reservoirBasicInfo.dead_stag = tbData.tb_dead_stag || 0
|
//正常水位
|
this.reservoirBasicInfo.norm_pool_stag = tbData.tb_norm_pool_stag || 0
|
//设计水位
|
this.reservoirBasicInfo.des_fl_stag = tbData.tb_des_fl_stag || 0
|
//校核水位
|
this.reservoirBasicInfo.chec_fl_stag = tbData.tb_chec_fl_stag || 0
|
//坝顶高程
|
this.reservoirBasicInfo.dam_top_elevation = tbData.tb_dam_top_elevation || 0
|
//堰顶高程
|
this.reservoirBasicInfo.weir_top_elev = this.currentReservoir.ydHeight || 0
|
|
this.swgcxOption.series[1].markLine.data[0].yAxis = this.currentReservoir.limitSw
|
this.swgcxOption.series[2].markLine.data[0].yAxis = this.reservoirBasicInfo.dead_stag
|
this.swgcxOption.series[3].markLine.data[0].yAxis = this.reservoirBasicInfo.norm_pool_stag
|
this.swgcxOption.series[4].markLine.data[0].yAxis = this.reservoirBasicInfo.des_fl_stag
|
this.swgcxOption.series[5].markLine.data[0].yAxis = this.reservoirBasicInfo.chec_fl_stag
|
this.swgcxOption.series[6].markLine.data[0].yAxis = this.reservoirBasicInfo.dam_top_elevation
|
this.swgcxOption.series[7].markLine.data[0].yAxis = this.reservoirBasicInfo.weir_top_elev
|
},
|
//预报水位
|
async sqGetpredictionInfo() {
|
const now = timestampToTime(new Date().getTime())
|
const tomorrow = timestampToTime(new Date().getTime() + 60 * 60 * 1000 * 24)
|
const jsonInfo = this.reservoirId
|
const res = await hsybData(jsonInfo)
|
if (!res.success) return
|
this.pridictionDaList = []
|
this.pridictionTmList = []
|
if (res.data && res.data.length > 0) {
|
//判断当天是否有第二天的数据
|
let hasTomorrow = res.data.findIndex(v => v[0].includes("/"))
|
if (hasTomorrow > -1) {
|
res.data[hasTomorrow][0] = tomorrow + res.data[hasTomorrow][0].substring(5)
|
}
|
res.data.forEach((v, index) => {
|
//对第二天数据进行处理
|
if (index > hasTomorrow && hasTomorrow > -1) {
|
res.data.splice(index, 1, [tomorrow + res.data[index][0], v[1], v[2], new Date(
|
tomorrow + res.data[index][0]).getTime()])
|
} else if (hasTomorrow == -1) {
|
v[0] = now + v[0]
|
} else if (index < hasTomorrow && hasTomorrow > -1) {
|
v[0] = now + v[0]
|
}
|
v[3] = new Date(v[0]).getTime()
|
})
|
const defaultNowTm = this.sqDatetimerange[1].substring(0, 16)
|
const index = res.data.sort((a, b) => a[3] - b[3]).map(v => v[0]).findIndex(v => v == defaultNowTm)
|
this.pridictionTmList = res.data.sort((a, b) => a[3] - b[3]).map(v => v[0]).slice(index, res.data
|
.length)
|
this.pridictionDaList = res.data.sort((a, b) => a[3] - b[3]).map(v => v[2]).slice(index, res.data
|
.length)
|
}
|
},
|
//初始化水位过程线echart
|
async initSwgcxOption(data) {
|
await this.sqGetpredictionInfo()
|
let xAxis = data.xAxis
|
for (let i = 0; i < xAxis.length; i++) {
|
this.pridictionDaList.unshift(null)
|
}
|
//去除相同的时间
|
xAxis = [...new Set([...xAxis, ...this.pridictionTmList])]
|
const dealXAxis = xAxis.map(v => {
|
if (v.includes("00:00")) {
|
v = v.substring(5, 17)
|
} else {
|
v = v.substring(11, 16)
|
}
|
return v
|
})
|
//获取最大水位
|
const maxWater = Math.max(...data.yAxis)
|
const minWater = Math.min(...data.yAxis)
|
const numberData = [
|
maxWater,
|
this.currentReservoir.limitSw,
|
this.reservoirBasicInfo.dead_stag,
|
this.reservoirBasicInfo.norm_pool_stag,
|
this.reservoirBasicInfo.des_fl_stag,
|
this.reservoirBasicInfo.chec_fl_stag,
|
this.reservoirBasicInfo.dam_top_elevation,
|
this.reservoirBasicInfo.weir_top_elev,
|
minWater
|
].filter(v => v > 0)
|
//最大值
|
const max = Math.max(...numberData)
|
|
//最小值
|
const min = Math.min(...numberData)
|
this.swgcxOption.yAxis = [{
|
name: "水位(m)",
|
type: 'value',
|
min: (min - 0.7).toFixed(2),
|
max: (val) => {
|
return (max + 0.5).toFixed(2);
|
}
|
}]
|
|
this.swgcxOption.series[0].data = data.yAxis
|
this.swgcxOption.series[8].data = this.pridictionDaList
|
this.swgcxOption.xAxis.data = dealXAxis
|
this.sqEchartLoading = false
|
},
|
|
//初始化雨量直方图echart
|
initYlzftOption(data) {
|
if (data.xAxis) {
|
this.ylzftOption.xAxis.data = data.xAxis
|
}
|
this.ylzftOption.series[0].data = data.yAxis
|
this.yqEchartLoading = false
|
},
|
|
//水情时间选择
|
czSqChange(e) {
|
this.getSqDataListByList()
|
},
|
//水情时段类型切换
|
flagSelectSubmit(e) {
|
this.flagIndex = e.index
|
this.flagVisible = false
|
this.flagValue = e.value
|
this.sqQuery.flag = e.value
|
this.getSqDataListByList()
|
},
|
//雨情时间选择
|
czYqChange(e) {
|
this.getYqDataListByList()
|
},
|
//雨情小时类型切换
|
intvSelectSubmit(e) {
|
this.intvIndex = e.index
|
this.intvVisible = false
|
this.intvValue = e.value
|
this.yqQuery.intv = e.value
|
this.getYqDataListByList()
|
},
|
//水情测点切换
|
sqSelectSubmit(e) {
|
this.sqIndex = e.index
|
this.sqVisible = false
|
this.sqValue = e.value
|
this.sqResource = e.sys_resource
|
this.getSqDataListByList()
|
},
|
//雨情测点切换
|
yqSelectSubmit(e) {
|
this.yqIndex = e.index
|
this.yqVisible = false
|
this.yqValue = e.value
|
this.yqResource = e.sys_resource
|
this.getYqDataListByList()
|
},
|
|
//初始化监测站数据
|
async initGetStation() {
|
const obj = {
|
res_cd: this.reservoirId
|
}
|
const {
|
resultList
|
} = await getStationList(obj)
|
const arr = []
|
resultList.forEach((val, index) => {
|
const obj = {
|
name: `${val.sys_resource == 'wlw' ? `新站` : val.sys_resource == 'lk'?'老站':'水文'}`,
|
value: val.guid,
|
index: index,
|
sys_resource: val.sys_resource
|
}
|
arr.push(obj)
|
})
|
if (arr.length > 0) {
|
this.czOptionList = this.getTypeStation(arr)
|
// this.sqValue = this.czOptionList[0].value
|
// this.yqValue = this.czOptionList[0].value
|
}
|
},
|
//处理有多个新站或者老站的数据
|
getTypeStation(data) {
|
if (data.length <= 0) return []
|
//获取老站数据
|
const lkList = data.filter(v => v.sys_resource == 'lk')
|
//获取新站数据
|
const xkList = data.filter(v => v.sys_resource == 'wlw')
|
//获取水文数据
|
const swList = data.filter(v => v.sys_resource == 'sw')
|
this.dealStation(lkList)
|
this.dealStation(xkList)
|
this.dealStation(swList)
|
return [...lkList, ...xkList, ...swList].sort((a, b) => a.index - b.index)
|
},
|
dealStation(list) {
|
if (list.length <= 1) return
|
list.forEach((v, index) => v.name = v.name + (index + 1))
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/deep/ .u-swiper__indicator {
|
left: 20rpx !important;
|
top: 20rpx !important;
|
bottom: 0 !important;
|
}
|
|
.w45 {
|
width: 45%;
|
}
|
|
.flex {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.left {
|
font-size: 28rpx;
|
flex: 0.9;
|
width: 100%;
|
|
.title {
|
flex: 1;
|
}
|
}
|
|
.right {
|
font-size: 28rpx;
|
flex: 1;
|
}
|
}
|
|
.img {
|
|
height: 500rpx;
|
margin: 10rpx 0;
|
border-radius: 10rpx;
|
|
.indicator {
|
@include flex(row);
|
justify-content: center;
|
|
&__dot {
|
height: 12rpx;
|
width: 12rpx;
|
border-radius: 200rpx;
|
background-color: rgba(255, 255, 255, 0.35);
|
margin: 0 10rpx;
|
transition: background-color 0.3s;
|
|
&--active {
|
background-color: #ffffff;
|
}
|
}
|
}
|
|
.indicator-num {
|
padding: 4rpx 0;
|
background-color: rgba(0, 0, 0, 0.35);
|
border-radius: 200rpx;
|
width: 70rpx;
|
@include flex;
|
justify-content: center;
|
|
&__text {
|
color: #FFFFFF;
|
font-size: 24rpx;
|
}
|
}
|
}
|
|
.tabSkName {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
|
.tab_item_station {
|
padding: 10rpx;
|
height: 60rpx;
|
box-sizing: border-box;
|
color: black;
|
font-size: 24rpx;
|
max-width: 180rpx;
|
white-space: nowrap; //不换行
|
overflow: hidden; //超出部分隐藏
|
text-overflow: ellipsis; //文本溢出显示省略号
|
}
|
|
.active {
|
color: #1180ff;
|
border-bottom: 1px solid #1180ff;
|
}
|
}
|
|
.info {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.wrap {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: column;
|
justify-content: center;
|
width: 100%;
|
|
.wrap_item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 30rpx;
|
padding: 10rpx 0;
|
|
.title {
|
color: #BBBBBB;
|
/* flex: 1; */
|
align-items: center;
|
display: flex;
|
|
.text {
|
display: flex;
|
color: #333333;
|
}
|
}
|
|
.right_icon {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
|
.text {
|
display: flex;
|
}
|
}
|
|
.basic-info {
|
background-color: #f2fafc;
|
border-radius: 15rpx;
|
font-family: PingFang SC;
|
margin-bottom: 20rpx;
|
|
.top {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
font-family: PingFang SC;
|
|
.left_box {
|
flex: 3;
|
|
.box_item {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-evenly;
|
|
.item {
|
padding: 16rpx;
|
|
.label {
|
text-align: center;
|
padding-top: 10rpx;
|
}
|
}
|
}
|
}
|
|
.line {
|
width: 4rpx;
|
height: 60rpx;
|
background: #C6EAE6;
|
}
|
|
.right_item_icon {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
|
.img-icon {
|
width: 50rpx;
|
height: 50rpx;
|
}
|
}
|
}
|
|
.bottom {
|
|
.up {
|
padding-bottom: 20rpx;
|
display: flex;
|
margin-top: -10rpx;
|
align-items: center;
|
justify-content: space-between;
|
padding: 32rpx 10rpx;
|
font-size: 28rpx;
|
}
|
|
.down {
|
margin-left: 50rpx;
|
padding-bottom: 20rpx;
|
}
|
}
|
|
// .item {
|
// display: flex;
|
// }
|
}
|
|
.rain-info {
|
background-color: #f2f8ff;
|
border-radius: 15rpx;
|
margin-bottom: 20rpx;
|
|
.item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.down {
|
font-size: 30rpx;
|
}
|
}
|
}
|
|
.sw-info {
|
background-color: #f2f8ff;
|
border-radius: 15rpx;
|
margin-bottom: 20rpx;
|
|
.top {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
font-family: PingFang SC;
|
|
.left_box {
|
flex: 3;
|
|
.box_item {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-evenly;
|
font-size: 34rpx;
|
|
.item {
|
padding: 16rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.label {
|
text-align: center;
|
}
|
}
|
}
|
}
|
|
.right_item_icon {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
|
.img-icon {
|
width: 50rpx;
|
height: 50rpx;
|
}
|
}
|
}
|
}
|
|
.card-head {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.j-c-s-a {
|
justify-content: space-between;
|
}
|
|
.h {
|
min-height: 70rpx;
|
}
|
|
.card_box {
|
display: flex;
|
align-items: center;
|
flex-shrink: 0;
|
|
margin: 0px 5px;
|
|
.date {
|
flex: 1;
|
|
.data-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
min-height: 70rpx;
|
font-size: 28rpx;
|
|
>view {
|
flex: 1;
|
text-align: center;
|
}
|
}
|
|
// width: 440rpx;
|
}
|
|
.title {
|
font-size: 28rpx;
|
}
|
}
|
|
|
|
::v-deep .uni-date-x--border {
|
border: none !important;
|
}
|
|
/deep/ .uni-date-editor--x {
|
border: none !important;
|
}
|
|
/deep/ .datetime-picker--uni-date-x {
|
background-color: #eaf2fc !important;
|
}
|
|
/deep/ .uni-date-x {
|
background-color: #eaf2fc !important;
|
}
|
|
/deep/ .uni-date-x .icon-calendar {
|
display: none;
|
}
|
</style>
|
