<template>
|
<view class="container">
|
<!--顶部导航栏-->
|
<view class="customizeBar">
|
<u-navbar placeholder title="变形监测" autoBack bgColor="#5887f9" titleStyle="color:#ffffff"
|
leftIconColor="#ffffff" safeAreaInsetTop>
|
</u-navbar>
|
</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 class="data-list">
|
<view class="data-item" v-for="(item,index) in dataList" :key="index">
|
<dataItem :item="item" type="bx">
|
|
</dataItem>
|
</view>
|
|
|
<u-loading-page :loading="loadingPage"></u-loading-page>
|
<u-loading-icon text="加载中" textSize="18" :show="loadingIcon"></u-loading-icon>
|
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import uFilter from "@/subPackage/dbSafety/components/filterBar.vue"
|
import mySearch from "@/subPackage/dbSafety/components/my-search.vue"
|
import dataItem from "@/subPackage/dbSafety/components/dataItem.vue"
|
import {
|
bizDictionary
|
} from "@/api/system/dict"
|
import {
|
dropDownData
|
} from "@/subPackage/dbSafety/const/dropDownData.js"
|
import {
|
getLatestSySlData
|
} from "@/api/dataCenter/dbSafety/dbSafety"
|
import {
|
reservoirList
|
} from "@/api/dataCenter/reservoir/reservoir"
|
export default {
|
components: {
|
mySearch,
|
uFilter,
|
dataItem
|
},
|
|
data() {
|
return {
|
//当用户没有行政区划时为false，隐藏搜索框
|
mySearchShow: true,
|
//当前登录用户的行政区划
|
adBase: uni.getStorageSync("adCodeBase"),
|
//查询参数
|
query: {},
|
//下拉选项
|
dropDownData: dropDownData,
|
//默认选中
|
defaultSelected: {},
|
|
//列表数据
|
dataList: [],
|
|
page: {
|
pageSize: 48,
|
pageNo: 1
|
},
|
|
loadingPage: false,
|
loadingIcon: false,
|
}
|
},
|
computed: {
|
//自适应计算筛选栏高度
|
filterTop() {
|
const info = uni.getWindowInfo()
|
const statusBar = info.statusBarHeight
|
return 69 - (statusBar / 2)
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
|
},
|
onLoad(option) {
|
this.initDict()
|
},
|
onShow() {
|
|
},
|
onReachBottom() {
|
this.page.pageNo += 1
|
this.getDataList()
|
},
|
methods: {
|
//初始化字典
|
initDict() {
|
bizDictionary({
|
code: "RES_LABEL"
|
}).then(res => {
|
let data = res.data
|
let obj = this.dropDownData[0].children.find(e => e.label == "标签")
|
obj.option = []
|
|
data.forEach(e => {
|
obj.option.push({
|
label: e.dictValue,
|
value: `${e.dictKey}`
|
})
|
})
|
this.initDefault()
|
this.buildRegion(this.adBase)
|
})
|
},
|
|
//初始化默认选择
|
initDefault() {
|
this.defaultSelected = {
|
//排序
|
is_order: "1",
|
//是否有数据
|
is_has_data: "y",
|
//工程规模
|
eng_scal: "",
|
//是否病险
|
danger_stat: "",
|
//标签
|
label_str: "",
|
//收藏
|
collect: "",
|
}
|
|
Object.assign(this.query, this.defaultSelected)
|
|
},
|
|
//获取输入框搜索条件
|
getSearchKey(key) {
|
this.query.res_nm = key
|
this.reload()
|
},
|
|
//行政区划改变
|
regionChange(region) {
|
this.buildRegion(region)
|
},
|
|
//流域变更
|
basinChange(basin) {
|
console.log("流域：", basin)
|
this.query.bas_guid = basin.name
|
this.reload()
|
},
|
|
//下拉选择项
|
dropDownConfirm(data) {
|
console.log("下拉选择项:", data)
|
this.page.pageNo = 1
|
|
let objKey = Object.keys(data)
|
|
objKey.forEach(key => {
|
if (data["label_str"] && key == "label_str") {
|
this.query[key] = data[key].join(",")
|
} else {
|
this.query[key] = data[key]
|
}
|
})
|
console.log(this.query, "---------")
|
this.getDataList()
|
},
|
|
//重置下拉选项
|
resetDropDown() {
|
this.initDefault()
|
this.reload()
|
},
|
|
//重新加载
|
reload() {
|
this.page.pageNo = 1
|
this.getDataList()
|
},
|
|
//获取列表数据
|
async getDataList() {
|
|
if (this.page.pageNo == 1) {
|
this.dataList = []
|
this.loadingPage = !this.loadingPage
|
} else {
|
this.loadingIcon = !this.loadingIcon
|
}
|
|
let params = {}
|
Object.assign(params, this.query, this.page, this.getResIds())
|
|
console.log("查询条件", Object.assign(params, this.query, this.page, this.getResIds()))
|
|
const res = await getLatestSySlData(params)
|
let data = res.data
|
console.log(res, "-----")
|
|
let arr = await this.buildArr(data)
|
this.dataList = this.dataList.concat(arr)
|
|
if (this.page.pageNo == 1) {
|
this.loadingPage = !this.loadingPage
|
} else {
|
this.loadingIcon = !this.loadingIcon
|
}
|
|
console.log("最终数据", this.dataList)
|
},
|
|
getResIds() {
|
if (this.query.collect == 1) {
|
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_str: this.collectResIds
|
}
|
},
|
|
//构建arr
|
async buildArr(data) {
|
let resCds = []
|
let arr = []
|
|
//遍历sy列表
|
data.sy.forEach((sy, index) => {
|
|
//判断sl列表中是否有相同的res_cd
|
const sl = data.sl.find(v => v.res_cd === sy.res_cd)
|
|
//有则把sl数据添加进arr中
|
if (sl) {
|
arr.push({
|
sy: sy,
|
sl: sl
|
})
|
} else {
|
arr.push({
|
sy: sy,
|
sl: {}
|
})
|
}
|
|
resCds.push(sy.res_cd)
|
})
|
|
arr.forEach(item => {
|
item.sy.children.sort((a, b) => a.cd - b.cd)
|
|
item.sy.children.forEach(item => {
|
if (item.trend == '1') {
|
item.iconClass = 'icon-wendushangsheng'
|
} else if (item.trend == '-1') {
|
item.iconClass = 'icon-wenduxiajiang'
|
} else if (item.trend == '0') {
|
item.iconClass = 'icon-a-youjiantouzhixiangyoujiantou'
|
}
|
})
|
})
|
|
//遍历渗流数组
|
data.sl.forEach((sl, index) => {
|
|
//判断arr中是否已有相同的sl数据
|
const sy = arr.find(v => {
|
|
if (v.sl.res_cd) {
|
return v.sl.res_cd === sl.res_cd
|
} else {
|
return false
|
}
|
})
|
if (sy) {
|
|
} else {
|
arr.push({
|
sy: {},
|
sl: sl
|
})
|
}
|
resCds.push(sl.res_cd)
|
})
|
|
console.log(arr, "------------")
|
console.log(resCds, "/*/*/*")
|
const res_cds = resCds.map(e => `'${e}'`).join(",")
|
const res = await reservoirList(999, 1, {
|
res_cds
|
})
|
|
let reservoirData = res.data.data
|
//循环arr，从reservoirData中获取当前水位，昨日雨量
|
arr.forEach(item => {
|
reservoirData.forEach(reservoir => {
|
if (item.sy.res_cd == reservoir.res_cd || item.sl.res_cd == reservoir.res_cd) {
|
|
|
reservoir.current_site_image = ''
|
reservoir.current_site_image_index = ''
|
reservoir.imagesArray = []
|
|
if (reservoir.station_image && reservoir.station_image.trim().length > 0) {
|
|
let arr = []
|
|
if (reservoir.station_image.indexOf(',') != -1) {
|
arr = reservoir.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 (reservoir.station_image.indexOf('~') != -1) {
|
if (reservoir.station_image.split('~').length > 2) {
|
arr = [reservoir.station_image.split('~')]
|
} else {
|
let cur = reservoir.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`
|
)
|
}
|
|
reservoir.imagesArray.push({
|
title: arrItem[1],
|
url: urlStr
|
})
|
})
|
}
|
|
reservoir.current_site_image = reservoir.imagesArray.length > 0 ?
|
reservoir.imagesArray[0] :
|
''
|
reservoir.current_site_image_index = reservoir.imagesArray.length > 0 ?
|
0 : ''
|
reservoir.current_site_image.url = reservoir.current_site_image.url
|
.replace(/\\/g, "/");
|
}
|
|
|
|
|
|
|
if (reservoir.rz && reservoir.rz_1h) {
|
reservoir.powerIconShow = true
|
if (reservoir.rz - reservoir.rz_1h > 0) {
|
reservoir.iconClass = 'icon-wendushangsheng'
|
} else if (reservoir.rz - reservoir.rz_1h < 0) {
|
reservoir.iconClass = 'icon-wenduxiajiang'
|
}
|
} else {
|
reservoir.powerIconShow = false
|
}
|
item.reservoir = reservoir
|
}
|
})
|
})
|
return arr
|
},
|
|
//对行政区划进行处理
|
buildRegion(region) {
|
delete this.query.city_cd
|
delete this.query.county_cd
|
delete this.query.town_cd
|
|
if (region.adGrad == 4) {
|
this.query.town_cd = region.adCode
|
}
|
//市
|
if (region.adGrad == 2) {
|
this.query.city_cd = region.adCode
|
}
|
//区
|
if (region.adGrad == 3) {
|
this.query.county_cd = region.adCode
|
}
|
|
this.adBase = region
|
|
this.reload()
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
|
.container {
|
min-height: 100vh;
|
}
|
|
.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;
|
}
|
}
|
</style>
|
