<template>
|
<view class="container">
|
<view class="customizeBar">
|
<u-navbar title="实时监测" placeholder :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff" bgColor="#5887f9"
|
safeAreaInsetTop @leftClick="navBarLeftClick">
|
</u-navbar>
|
</view>
|
<!-- 占位 -->
|
<!-- <view style="height: 88rpx;"></view> -->
|
|
<view class="top-bar">
|
<mySearch v-if="mySearchShow" :defaultValue="adBase" :keyWord="query.res_nm" @getKey="getSearchKey"
|
@regionChange="regionChange" @basinChange="basinChange">
|
</mySearch>
|
<uFilter :top="filterTop" :menuList="dropDownData" :defaultModel="defaultSelected" @submit='dropDownConfirm'
|
@reset='resetDropDown'></uFilter>
|
</view>
|
<!-- <view style="height: 160rpx;">
|
|
</view> -->
|
<view v-if="adBase" class="top-box">
|
<view class="flood-limit-total">
|
<u-icon name="volume" color="#ff0000" size="19"></u-icon>
|
下方水库超汛限总数<span class="total-number">{{floodLimitTotal}}</span>座
|
</view>
|
</view>
|
<view class="reservoir-list">
|
<view style="padding: 15rpx;" v-for="(item,index) in reservoirList" :key="index">
|
<card>
|
<view class="head" slot="insideHead">
|
<view class="left">
|
<view class="name">
|
<text>{{item.res_nm}}</text>
|
<span style="color: #1180ff;"
|
v-show="item.is_gate&&item.is_gate.indexOf('有闸') != -1">(有闸)</span>
|
</view>
|
<view class="status" v-if="item.is_danger_res == 'true'">
|
<text>(病)</text>
|
</view>
|
<view class="video-box" v-if="item.is_video == '1'">
|
<view class="icon">
|
<image class="img-icon"
|
src="@/subPackage/realtimeMonitor/static/img/realtimeMonitiorImg/video.png">
|
</image>
|
</view>
|
</view>
|
</view>
|
<view class="right">
|
<view>{{isNull(item.oth_reg_cd)}}</view>
|
</view>
|
</view>
|
<view @click="goReservoirDetail(item)" class="content" slot="content">
|
<view class="info">
|
<view class="text" v-if="item.is_over !='未超汛'"
|
:style="{color:(Number(item.over_z)>0?'#F00':'#000')}">比汛限：{{isNull(item.over_z)}}m
|
</view>
|
<view class="location">{{item.regionName}}</view>
|
</view>
|
<view class="warp_box">
|
<view class="left" style="font-size: 0;">
|
<view>
|
<image lazy-load class="reservoir-img"
|
:src="item.current_site_image&&item.current_site_image.url !=''?item.current_site_image.url:'https://sk.hubeishuiyi.cn/business/img/emptyImg.514374af.png'">
|
</image>
|
</view>
|
</view>
|
|
<view class="list_right">
|
<view class="line">
|
<view class="item item1">
|
<view class="l">当前水位:</view>
|
<view class="r" :style="{color:item.over_z>0?'#FF1818':''}">
|
<text> {{isNull(item.rz)}}m</text>
|
<text v-if="item.powerIconShow" class="iconfont"
|
:class="item.iconClass"></text>
|
</view>
|
</view>
|
<view class="item item2">
|
<view class="item">
|
<view class="l">今日雨量:</view>
|
<view class="r">{{isNull(item.cur_drp)}}mm</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="line">
|
<view class="item item1">
|
<view class="l">汛限水位:</view>
|
<view class="r">{{isNull(item.flse_lim_stag)}}m</view>
|
</view>
|
<view class="item item2">
|
<view class="l">比汛限:</view>
|
<view class="r" :style="{color:item.over_z>0?'#FF1818':''}">
|
{{isNull(item.over_z)}}m
|
</view>
|
</view>
|
</view>
|
|
<view v-if="item.control_z" class="line">
|
<view class="item item1">
|
<view class="l">控制水位:</view>
|
<view class="r">{{isNull(item.control_z)}}m</view>
|
</view>
|
<view class="item item2">
|
<view class="l">比控制:</view>
|
<view class="r">
|
{{item.control_z?(item.rz-item.control_z).toFixed(2):'--'}}m
|
</view>
|
</view>
|
</view>
|
|
<view class="line">
|
<view class="item item1">
|
<view class="l">堰顶高程:</view>
|
<view class="r">{{isNull(item.weir_top_elev)}}m</view>
|
</view>
|
<view class="item item2">
|
<view class="l">坝顶高程:</view>
|
<view class="r">{{isNull(item.dam_top_elevation)}}m</view>
|
</view>
|
</view>
|
|
<view class="line">
|
<view class="item item1">
|
<view class="l">24h预报:</view>
|
<view class="r">--</view>
|
</view>
|
<view class="item item2">
|
<view class="l">昨日雨量:</view>
|
<view class="r">{{isNull(item.ytr_drp)}}mm</view>
|
</view>
|
</view>
|
|
<view class="line">
|
<view class="item">
|
<view class="l">纳雨量:</view>
|
<view class="r"> --(到汛限) | --(到坝顶)</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
<view class="footer" slot="insideFooter">
|
<view>
|
<text class="text-time">{{item.tm}}</text>
|
</view>
|
<view class="btn-group">
|
<view @click="collect(item)" style="margin-right: 20rpx;" v-if="item.isCollect == 2"
|
class="btn">
|
<view class="icon">
|
<u-icon name="star" color='#1180ff'></u-icon>
|
</view>
|
<view>
|
<text class="text btn">收藏</text>
|
</view>
|
</view>
|
<view @click="collect(item)" style="margin-right: 20rpx;" v-if="item.isCollect == 1"
|
class="btn">
|
<view class="icon">
|
<u-icon name="star-fill" color='#1180ff'></u-icon>
|
</view>
|
<view>
|
<text class="text btn">取消收藏</text>
|
</view>
|
</view>
|
<view class="btn">
|
<view class="icon">
|
<image class="img-icon"
|
src="@/subPackage/realtimeMonitor/static/img/realtimeMonitiorImg/navigator.png">
|
</image>
|
</view>
|
<view @click="locationNav(item)">
|
<text class="text btn">定位</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</card>
|
|
</view>
|
|
<u-loading-page :loading="loading"></u-loading-page>
|
<u-loading-icon text="加载中" textSize="18" :show="showLoading"></u-loading-icon>
|
</view>
|
|
|
</view>
|
</template>
|
|
<script>
|
import uFilter from "@/subPackage/realtimeMonitor/components/filterBar.vue"
|
import mySearch from "@/subPackage/realtimeMonitor/components/my-search.vue"
|
import regionSelect from "@/components/my-components/regionSelect.vue"
|
import card from "@/components/my-components/card.vue"
|
import PopupGroup from "@/subPackage/realtimeMonitor/components/popup-group.vue"
|
import {
|
reservoirList,
|
getSKResInfoZRainApi
|
} from "@/api/dataCenter/reservoir/reservoir"
|
import {
|
convertTimestampToDate
|
} from "@/utils/date"
|
import {
|
isInRole
|
} from "../utils"
|
import {
|
getMyCollect,
|
updateCollect
|
} from "@/api/system/user"
|
import store from "@/store/index.js"
|
import {
|
bizDictionary
|
} from "@/api/system/dict"
|
export default {
|
components: {
|
card,
|
mySearch,
|
regionSelect,
|
PopupGroup,
|
uFilter
|
},
|
data() {
|
return {
|
exceptionType: '1',
|
filterPopVisible: false,
|
reservoirList: [],
|
loading: false,
|
showLoading: false,
|
bottomLoading: false,
|
pages: {
|
pageSize: 12,
|
pageNo: 1
|
},
|
query: {
|
eng_scal: "",
|
is_danger: "",
|
is_video: "",
|
},
|
isCollect: "",
|
|
floodLimitTotal: '',
|
adBase: uni.getStorageSync("adCodeBase"),
|
//下拉选项
|
dropDownData: [{
|
label: "排序",
|
prop: "is_order",
|
type: "line",
|
children: [{
|
label: "超汛幅度降序",
|
value: "1"
|
},
|
{
|
label: "水位涨幅降序",
|
value: "2"
|
},
|
{
|
label: "1小时雨量降序",
|
value: "3"
|
},
|
{
|
label: "今日雨量降序",
|
value: "4"
|
},
|
{
|
label: "注册登记码",
|
value: "5"
|
},
|
]
|
},
|
{
|
label: "筛选",
|
prop: "filter",
|
type: "check",
|
children: [{
|
label: "是否有数据",
|
type: "radio",
|
prop: "data_sta",
|
option: [{
|
label: "全部",
|
value: ""
|
},
|
{
|
label: "有数据",
|
value: "1"
|
},
|
{
|
label: "无数据",
|
value: "0"
|
},
|
],
|
},
|
{
|
label: "溢洪道是否有闸",
|
type: "radio",
|
prop: "gate",
|
option: [{
|
label: "全部",
|
value: ''
|
},
|
{
|
label: "有闸",
|
value: '1'
|
},
|
{
|
label: "无闸",
|
value: '2'
|
},
|
{
|
label: "其他",
|
value: '0'
|
}
|
],
|
},
|
{
|
label: "工程规模",
|
type: "radio",
|
prop: "eng_scal",
|
option: [{
|
label: "全部",
|
value: ""
|
},
|
{
|
label: "大（1）型",
|
value: "大（1）型",
|
},
|
{
|
label: "大（2）型",
|
value: "大（2）型"
|
},
|
{
|
label: "中型",
|
value: "中型"
|
},
|
{
|
label: "小（1）型",
|
value: "小（1）型"
|
},
|
{
|
label: "小（2）型",
|
value: "小（2）型"
|
},
|
]
|
},
|
{
|
label: "是否病险",
|
type: "radio",
|
prop: "is_danger",
|
option: [{
|
label: "全部",
|
value: ""
|
},
|
{
|
label: "是",
|
value: "true",
|
},
|
{
|
label: "否",
|
value: "false"
|
},
|
]
|
},
|
{
|
label: "是否视频",
|
type: "radio",
|
prop: "is_video",
|
option: [{
|
label: "全部",
|
value: ""
|
},
|
{
|
label: "有",
|
value: "1",
|
},
|
{
|
label: "无",
|
value: "0"
|
},
|
]
|
},
|
{
|
label: "测站类型",
|
type: "radio",
|
prop: "flag",
|
option: [{
|
label: "全部",
|
value: ''
|
},
|
{
|
label: "省级平台",
|
value: '物联网'
|
},
|
{
|
label: "地方平台",
|
value: '老库'
|
},
|
{
|
label: "水文系统",
|
value: '水文'
|
}
|
]
|
},
|
{
|
label: "标签",
|
type: "checkbox",
|
prop: "label",
|
option: []
|
},
|
{
|
label: "水位状态",
|
type: "checkbox",
|
prop: "riverStatus",
|
option: [{
|
label: "超汛限水位",
|
value: 'is_over_z'
|
},
|
{
|
label: "低于死水位",
|
value: 'is_over_dead'
|
},
|
{
|
label: "超校核水位",
|
value: 'is_over_chec'
|
},
|
{
|
label: "超设计水位",
|
value: 'is_over_des'
|
},
|
{
|
label: "低于校核水位",
|
value: 'is_low_chec'
|
},
|
{
|
label: "低于设计水位",
|
value: 'is_low_des'
|
}
|
],
|
}
|
]
|
},
|
{
|
label: '是否收藏',
|
type: 'line',
|
prop: "collect",
|
children: [{
|
label: "全部",
|
value: ""
|
},
|
{
|
label: "收藏",
|
value: "1"
|
}
|
]
|
},
|
],
|
//默认选中
|
defaultSelected: {},
|
//记录选择的水位状态
|
queryProp: [],
|
mySearchShow: false,
|
publicPath: "https://sk.hubeishuiyi.cn/business/",
|
userInRole: false,
|
|
collectResIds: "",
|
}
|
},
|
created() {},
|
onLoad(option) {
|
this.initDict()
|
if (option.searchKey) {
|
this.query.res_nm = option.searchKey
|
}
|
this.userInRole = isInRole()
|
|
if (option.region) {
|
this.adBase = JSON.parse(option.region)
|
} else {
|
this.adBase = uni.getStorageSync("adCodeBase")
|
}
|
this.regionChange(this.adBase)
|
|
},
|
onReachBottom() {
|
if (this.showLoading) {
|
return
|
}
|
if (!this.adBase) return
|
this.showLoading = true
|
this.pages.pageNo += 1
|
reservoirList(this.pages.pageSize, this.pages.pageNo, Object.assign(this.getResIds(), this.query))
|
.then(res => {
|
let data = res.data.data
|
data.forEach(item => {
|
item.regionName = this.convertRegion(item)
|
item.tm = item.tm ? convertTimestampToDate(item.tm, "MM-dd hh:mm") : ""
|
item.current_site_image = ''
|
item.current_site_image_index = ''
|
item.imagesArray = []
|
|
if (item.station_image && item.station_image.trim().length > 0) {
|
|
let arr = []
|
|
if (item.station_image.indexOf(',') != -1) {
|
arr = item.station_image.split(',').map(arrItem => {
|
if (arrItem.indexOf('~') != -1) {
|
if (arrItem.split('~').length > 2) {
|
arrItem = arrItem.split('~')
|
} else {
|
let cur = arrItem.split('~')
|
cur.push(this.publicPath + 'img/emptyImg.514374af.png')
|
arrItem = cur
|
}
|
}
|
|
return arrItem
|
})
|
} else {
|
if (item.station_image.indexOf('~') != -1) {
|
if (item.station_image.split('~').length > 2) {
|
arr = [item.station_image.split('~')]
|
} else {
|
let cur = item.station_image.split('~')
|
cur.push(this.publicPath + 'img/emptyImg.514374af.png')
|
arr = [cur]
|
}
|
}
|
}
|
|
if (arr && arr.length > 0) {
|
arr.forEach(arrItem => {
|
|
let urlStr = arrItem[2]
|
|
if (urlStr.indexOf('http://183.95.190.143:9096/images') != -
|
1) {
|
urlStr = urlStr.replace(
|
'http://183.95.190.143:9096/images',
|
'https://sk.hubeishuiyi.cn/imgWLW/images')
|
}
|
|
if (urlStr.indexOf('http://223.75.53.106:8891/skjgimages') != -
|
1) {
|
urlStr = urlStr.replace(
|
`http://223.75.53.106:8891/skjgimages`,
|
`https://sk.hubeishuiyi.cn/imgLK/skjgimages`)
|
}
|
|
item.imagesArray.push({
|
title: arrItem[1],
|
url: urlStr
|
})
|
})
|
}
|
|
item.current_site_image = item.imagesArray.length > 0 ? item.imagesArray[0] :
|
''
|
item.current_site_image_index = item.imagesArray.length > 0 ? 0 : ''
|
item.current_site_image.url = item.current_site_image.url.replace(/\\/g, "/");
|
|
}
|
|
if (item.rz && item.rz_1h) {
|
item.powerIconShow = true
|
if (item.rz - item.rz_1h > 0) {
|
item.iconClass = 'icon-wendushangsheng'
|
} else if (item.rz - item.rz_1h < 0) {
|
item.iconClass = 'icon-wenduxiajiang'
|
}
|
} else {
|
item.powerIconShow = false
|
}
|
})
|
this.listInCollect(data)
|
this.reservoirList = this.reservoirList.concat(data)
|
this.showLoading = false
|
})
|
},
|
methods: {
|
|
basinChange(basin) {
|
this.query.bas_cd = basin.code
|
this.getReservoirList(this.pages.pageSize, 1, this.query)
|
this.getWaterListNumber(this.adBase, {
|
...this.query,
|
})
|
},
|
|
navBarLeftClick() {
|
this.$u.func.globalNavigator("", "navBack")
|
},
|
//行政区划转换
|
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("-")
|
},
|
|
//初始化字典
|
initDict() {
|
bizDictionary({
|
code: "RES_LABEL"
|
}).then(res => {
|
let data = res.data
|
let obj = this.dropDownData[1].children.find(e => e.label == "标签")
|
|
data.forEach(e => {
|
obj.option.push({
|
label: e.dictValue,
|
value: `'${e.dictKey}'`
|
})
|
})
|
|
this.initDefault()
|
})
|
|
},
|
|
//判断当前集合是否在收藏里
|
listInCollect(list) {
|
let collectResIds = this.userInfo.detail.collect
|
if (list.length > 0) {
|
list.forEach(res => {
|
res.isCollect = collectResIds.indexOf(res.res_cd) > -1 ? 1 : 2
|
})
|
}
|
},
|
|
collect(item) {
|
let params = {
|
userId: this.userInfo.user_id,
|
resId: item.res_cd,
|
status: item.isCollect == 1 ? 2 : 1
|
}
|
updateCollect(params).then(res => {
|
//提示
|
if (params.status == 1) {
|
this.$u.func.showToast("收藏成功")
|
} else {
|
this.$u.func.showToast("取消成功")
|
}
|
let data = res.data
|
if (JSON.stringify(data) == "{}") {
|
data = ""
|
}
|
this.userInfo.detail.collect = data
|
store.commit("SET_USER_INFO", this.userInfo)
|
this.listInCollect(this.reservoirList)
|
})
|
},
|
|
dropDownConfirm(data) {
|
let objKey = Object.keys(data)
|
objKey.forEach(key => {
|
if (data["label"] && key == "label") {
|
this.query.label = data[key].join(",")
|
} else if (key == "riverStatus") {
|
|
let typeArr = ['is_over_z', 'is_over_dead', 'is_over_chec', 'is_over_des', 'is_low_chec',
|
'is_low_des'
|
]
|
|
typeArr.forEach(item => {
|
let flag = data[key].some(i => item == i)
|
if (flag) {
|
this.query[item] = 1
|
} else {
|
if (item in this.query) delete this.query[item]
|
}
|
})
|
|
} else if (key == "collect") {
|
|
if (data[key] == 1) {
|
//收藏
|
this.isCollect = true
|
getMyCollect(this.userInfo.user_id).then(res => {
|
let data = res.data
|
if (JSON.stringify(data) != '{}') {
|
this.userInfo.detail.collect = data
|
store.commit("SET_USER_INFO", this.userInfo)
|
}
|
})
|
|
} else {
|
//全部
|
this.isCollect = false
|
}
|
|
} else {
|
this.query[key] = data[key]
|
}
|
})
|
this.getReservoirList(this.pages.pageSize, 1, this.query)
|
this.getWaterListNumber(this.adBase, {
|
...this.query,
|
})
|
},
|
|
initDefault() {
|
this.defaultSelected = {
|
is_order: "1",
|
data_sta: "",
|
gate: "",
|
eng_scal: "",
|
is_danger: "",
|
is_video: "",
|
flag: "",
|
collect: "",
|
label: "",
|
}
|
let typeArr = ['is_over_z', 'is_over_dead', 'is_over_chec', 'is_over_des', 'is_low_chec', 'is_low_des']
|
|
typeArr.forEach(e => {
|
delete this.query[e]
|
})
|
|
Object.assign(this.query, this.defaultSelected)
|
},
|
|
resetDropDown() {
|
this.initDefault()
|
this.getReservoirList(this.pages.pageSize, 1, this.query)
|
this.getWaterListNumber(this.adBase, {
|
...this.query,
|
})
|
},
|
|
getResIds() {
|
if (this.isCollect) {
|
this.collectResIds = this.userInfo.detail.collect ? this.userInfo.detail.collect : 0
|
this.collectResIds = this.collectResIds.split(",").map(e => `'${e}'`).join(",")
|
} else {
|
this.collectResIds = ""
|
}
|
return {
|
res_cds: this.collectResIds
|
}
|
},
|
|
getReservoirList(pageSize, pageNo, params = {}) {
|
if (this.reservoirList == 0) {}
|
if (!this.adBase) return
|
|
this.mySearchShow = true
|
this.loading = true
|
Object.assign(params, this.query, this.getResIds())
|
reservoirList(pageSize, pageNo, params).then(res => {
|
let data = res.data.data
|
data.forEach(item => {
|
item.regionName = this.convertRegion(item)
|
item.tm = item.tm ? convertTimestampToDate(item.tm, "MM-dd hh:mm") : ""
|
item.current_site_image = ''
|
item.current_site_image_index = ''
|
item.imagesArray = []
|
if (item.station_image && item.station_image.trim().length > 0) {
|
let arr = []
|
if (item.station_image.indexOf(',') != -1) {
|
arr = item.station_image.split(',').map(arrItem => {
|
if (arrItem.indexOf('~') != -1) {
|
if (arrItem.split('~').length > 2) {
|
arrItem = arrItem.split('~')
|
} else {
|
let cur = arrItem.split('~')
|
cur.push(this.publicPath + 'img/emptyImg.514374af.png')
|
arrItem = cur
|
}
|
}
|
|
return arrItem
|
})
|
} else {
|
if (item.station_image.indexOf('~') != -1) {
|
if (item.station_image.split('~').length > 2) {
|
arr = [item.station_image.split('~')]
|
} else {
|
let cur = item.station_image.split('~')
|
cur.push(this.publicPath + 'img/emptyImg.514374af.png')
|
arr = [cur]
|
}
|
}
|
}
|
|
if (arr && arr.length > 0) {
|
arr.forEach(arrItem => {
|
|
let urlStr = arrItem[2]
|
|
if (urlStr.indexOf('http://183.95.190.143:9096/images') != -
|
1) {
|
urlStr = urlStr.replace(
|
'http://183.95.190.143:9096/images',
|
'https://sk.hubeishuiyi.cn/imgWLW/images')
|
}
|
|
if (urlStr.indexOf('http://223.75.53.106:8891/skjgimages') != -
|
1) {
|
urlStr = urlStr.replace(
|
`http://223.75.53.106:8891/skjgimages`,
|
`https://sk.hubeishuiyi.cn/imgLK/skjgimages`)
|
}
|
|
item.imagesArray.push({
|
title: arrItem[1],
|
url: urlStr
|
})
|
})
|
}
|
item.current_site_image = item.imagesArray.length > 0 ? item.imagesArray[0] :
|
''
|
item.current_site_image_index = item.imagesArray.length > 0 ? 0 : ''
|
|
item.current_site_image.url = item.current_site_image.url.replace(/\\/g, "/");
|
|
|
}
|
|
if (item.rz && item.rz_1h) {
|
item.powerIconShow = true
|
if (item.rz - item.rz_1h > 0) {
|
item.iconClass = 'icon-wendushangsheng'
|
} else if (item.rz - item.rz_1h < 0) {
|
item.iconClass = 'icon-wenduxiajiang'
|
}
|
} else {
|
item.powerIconShow = false
|
}
|
|
|
})
|
this.listInCollect(data)
|
this.reservoirList = data
|
this.loading = false
|
}).catch(err => {
|
this.loading = false
|
})
|
},
|
|
/**
|
* 跳转到水库详情
|
*/
|
goReservoirDetail(item) {
|
let data = {
|
id: item.res_cd,
|
name: item.res_nm,
|
}
|
let url = "/subPackage/realtimeMonitor/reservoir/detail?item=" + JSON.stringify(data)
|
this.$u.func.globalNavigator(url, "navTo")
|
},
|
|
regionChange(region) {
|
// this.clearQuery()
|
if (region.adGrad == 4) {
|
this.query.town_cd = region.adCode
|
delete this.query.city_cd
|
delete this.query.county_cd
|
}
|
//市
|
if (region.adGrad == 2) {
|
this.query.city_cd = region.adCode
|
delete this.query.county_cd
|
delete this.query.town_cd
|
}
|
//区
|
if (region.adGrad == 3) {
|
this.query.county_cd = region.adCode
|
delete this.query.city_cd
|
delete this.query.town_cd
|
}
|
if (region.adGrad == 1) {
|
delete this.query.city_cd
|
delete this.query.county_cd
|
delete this.query.town_cd
|
}
|
this.adBase = region
|
this.getReservoirList(this.pages.pageSize, 1, this.query)
|
this.getWaterListNumber(region, {
|
...this.query,
|
})
|
|
},
|
|
clearQuery() {
|
this.query = {}
|
},
|
|
getSearchKey(key) {
|
this.query.res_nm = key
|
this.getReservoirList(this.pages.pageSize, 1, this.query)
|
this.getWaterListNumber(this.adBase, this.query)
|
},
|
|
locationNav(item) {
|
uni.openLocation({
|
latitude: item.res_lat,
|
longitude: item.res_lon,
|
scale: 15,
|
name: item.res_nm
|
});
|
},
|
getWaterListNumber(regionData, obj, res_nm) {
|
if (!this.adBase) return
|
let params = {}
|
if (regionData.adGrad == 2) {
|
params.city_cd = regionData.adCode
|
delete params.county_cd
|
delete params.town_cd
|
} else if (regionData.adGrad == 3) {
|
params.county_cd = regionData.adCode
|
delete params.city_cd
|
delete params.town_cd
|
} else if (regionData.adGrad == 4) {
|
params.town_cd = regionData.adCode
|
delete params.county_cd
|
delete params.city_cd
|
}
|
getSKResInfoZRainApi({
|
...params,
|
...obj,
|
...this.getResIds(),
|
}).then(res => {
|
let data = res.data[0]
|
|
if (data.over_flse_cnt) {
|
this.floodLimitTotal = data.over_flse_cnt
|
} else {
|
this.floodLimitTotal = 0
|
}
|
|
})
|
},
|
},
|
|
computed: {
|
isNull() {
|
return (prop) => {
|
if (prop === 0 || prop) {
|
return prop
|
} else {
|
return "--"
|
}
|
}
|
},
|
filterTop() {
|
const info = uni.getWindowInfo()
|
const statusBar = info.statusBarHeight
|
return 69 - (statusBar / 2)
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/deep/ .u-icon__icon {
|
position: static !important;
|
}
|
|
.container {
|
min-height: 100vh;
|
// overflow: hidden;
|
}
|
|
.top-bar {
|
width: 100%;
|
display: flex;
|
justify-content: space-around;
|
// position: fixed;
|
// top: 200rpx;
|
flex-direction: column;
|
position: -webkit-sticky;
|
position: sticky;
|
top: calc(var(--status-bar-height) + 80rpx);
|
// top: 80rpx;
|
}
|
|
.top-box {
|
display: flex;
|
|
.img-icon {
|
height: 45rpx;
|
width: 45rpx;
|
position: static;
|
|
::v-deep img {
|
position: static;
|
}
|
}
|
|
.flood-limit-total {
|
padding: 20rpx 10rpx;
|
color: #ff0000;
|
font-size: 26rpx;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
background-color: #3c9cff2e;
|
|
/deep/ .u-icon__icon {
|
position: static;
|
}
|
|
.total-number {
|
color: #ff0000;
|
margin: 0 10rpx;
|
}
|
}
|
|
}
|
|
.head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.left {
|
display: flex;
|
font-size: 50rpx;
|
|
.name {
|
color: #333333;
|
font-family: PingFang-SC-Heavy;
|
font-size: 35rpx;
|
}
|
|
.status {
|
color: #FF5757;
|
font-weight: bold;
|
font-size: 35rpx;
|
font-family: PingFang-SC-Heavy;
|
}
|
|
.video-box {
|
font-size: 30rpx;
|
display: flex;
|
margin-left: 10rpx;
|
color: #40b8ff;
|
cursor: pointer;
|
|
.img-icon {
|
height: 45rpx;
|
width: 45rpx;
|
position: static;
|
|
::v-deep img {
|
position: static;
|
}
|
}
|
}
|
}
|
|
.right {
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #BBBBBB;
|
|
.text {
|
width: 320rpx;
|
height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #BBBBBB;
|
line-height: 28px;
|
}
|
}
|
|
}
|
|
.content {
|
|
.info {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.text {
|
// width: 140rpx;
|
height: 20rpx;
|
font-size: 20rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #FF4A4A;
|
line-height: 17rpx;
|
}
|
|
.location {
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #BBBBBB;
|
}
|
}
|
|
|
|
.warp_box {
|
display: flex;
|
align-items: center;
|
|
// justify-content: center;
|
.left {
|
width: 50%;
|
|
|
|
.reservoir-img {
|
// width: 300rpx;
|
width: 100%;
|
height: 250rpx;
|
position: static;
|
|
::v-deep img {
|
position: static;
|
}
|
}
|
|
}
|
|
.right {
|
width: 50%;
|
|
.text {
|
width: 160rpx;
|
height: 20px;
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #333333;
|
line-height: 28rpx;
|
}
|
}
|
|
.list_right {
|
width: 84%;
|
font-size: 24rpx;
|
line-height: 30rpx;
|
margin-left: 20rpx;
|
|
.line {
|
display: flex;
|
// justify-content: space-between;
|
|
.item {
|
display: flex;
|
width: 50%;
|
line-height: 48rpx;
|
align-items: center;
|
white-space: nowrap;
|
}
|
|
.item1 {
|
width: 55%;
|
}
|
|
.item2 {
|
width: 40%;
|
}
|
}
|
}
|
|
}
|
|
}
|
|
.footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.text-time {
|
width: 238rpx;
|
height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #BBBBBB;
|
line-height: 28rpx;
|
}
|
|
.btn-group {
|
display: flex;
|
align-items: center;
|
|
.btn {
|
display: flex;
|
align-items: center;
|
|
.img-icon {
|
height: 22rpx;
|
width: 22rpx;
|
position: static;
|
|
::v-deep img {
|
position: static;
|
}
|
}
|
|
.text {
|
// width: 48rpx;
|
height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #333333;
|
line-height: 28rpx;
|
}
|
|
}
|
}
|
}
|
</style>
|
