/*
|
* @Author: Morpheus
|
* @Date: 2021-05-06 16:10:30
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2022-07-21 17:48:24
|
*/
|
<template>
|
<el-card class="reservoir-box">
|
<!-- 头部 -->
|
<div v-show="boxShow" class="header">
|
<el-radio v-model="newOrCustomValue" @change="newOrCustomValueChange" label="最新">最新</el-radio>
|
<el-radio v-model="newOrCustomValue" @change="newOrCustomValueChange" label="自定义">自定义</el-radio>
|
</div>
|
|
<!-- 搜索条件等 -->
|
<div v-show="realOrCustom && boxShow" class="search-condition">
|
<el-date-picker
|
v-model="customTime"
|
type="datetimerange"
|
format="yyyy-MM-dd HH"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
size="small"
|
:editable="false"
|
@change="pickerDateChange"
|
></el-date-picker>
|
<el-button size="small" type="primary" @click="searchCustom" icon="el-icon-search">查询</el-button>
|
</div>
|
|
<div v-show="boxShow" class="reservoir-content" v-loading="loading">
|
<!-- 文字概况 -->
|
<div class="text-overview">
|
<p v-html="textarea" @click="retailOpen($event)"></p>
|
</div>
|
<div class="statistics">
|
<div>
|
超汛限水位：
|
<el-button @click="openDialog('yj')" type="danger" size="small">{{ yjNum }}</el-button>
|
</div>
|
<div>
|
正常水位：
|
<el-button @click="openDialog('zc')" type="success" size="small">{{ zcNum }}</el-button>
|
</div>
|
</div>
|
</div>
|
|
<div
|
v-show="reservoirDetailPopupFlag"
|
class="reservoir-detail-popup"
|
id="reservoirDetailPopup"
|
>
|
<ul v-html="detailPopupContent"></ul>
|
</div>
|
|
<layerControl ref="layer-control" :legendsDetail="legendData"></layerControl>
|
|
<el-dialog
|
title
|
:visible.sync="dialogVisible"
|
width="width"
|
:modal="false"
|
:modal-append-to-body="false"
|
:fullscreen="true"
|
>
|
<!-- 数据表格 -->
|
<Dialog-search
|
slot="title"
|
:yjOrZc="yjOrZc"
|
:yjData="yjData"
|
:zcData="zcData"
|
:baseData="false"
|
@changeDialogTable="changeTable"
|
@exportParent="exportExcel"
|
ref="dialogSearch"
|
></Dialog-search>
|
<div class="dialog-data-table">
|
<el-table
|
:data="
|
tableData.slice(
|
(currpage - 1) * pagesize,
|
currpage * pagesize
|
)
|
"
|
@sort-change="onSortChange"
|
style="width: 100%"
|
>
|
<el-table-column align="center" prop="ind" label="序号" width="60"></el-table-column>
|
<el-table-column align="center" prop="STCD" label="站码"></el-table-column>
|
<el-table-column align="center" prop="STNM" label="站名"></el-table-column>
|
<el-table-column align="center" prop="ADDVNM" label="行政区"></el-table-column>
|
<el-table-column align="center" prop="TM" label="时间" width="180"></el-table-column>
|
<el-table-column align="center" prop="FSLTDZ" sortable="custom" label="汛限水位(m)"></el-table-column>
|
<el-table-column align="center" prop="RZ" sortable="custom" label="实时水位(m)"></el-table-column>
|
<el-table-column
|
align="center"
|
prop="RZchange"
|
label="昨日水位对比(m)"
|
v-if="!realOrCustom"
|
></el-table-column>
|
|
<el-table-column align="center" label="趋势" v-if="!realOrCustom">
|
<template slot-scope="scope">
|
<img :src="scope.row.icon" style="height: 20px;" alt />
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
align="center"
|
sortable="custom"
|
label="超汛限水位(m)"
|
prop="limited"
|
></el-table-column>
|
|
<el-table-column align="center" sortable="custom" label="蓄水量(10⁶m³)" prop="W"></el-table-column>
|
|
<el-table-column align="center" sortable="custom" label="蓄满率(%)" prop="XML"></el-table-column>
|
|
<!-- <el-table-column align="center"
|
sortable='custom'
|
label="变幅(m)"
|
prop="change"
|
v-if="realOrCustom">
|
</el-table-column>-->
|
</el-table>
|
<div ref="tablePagination">
|
<el-pagination
|
:pager-count="5"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
background
|
:page-sizes="[20, 40, 60, 100]"
|
layout="sizes, prev, pager, next"
|
:current-page="currpage"
|
:page-size="pagesize"
|
:total="tableData.length"
|
></el-pagination>
|
</div>
|
</div>
|
</el-dialog>
|
|
<el-dialog
|
:title="retailTitle"
|
:visible.sync="retailShowFlag"
|
width="width"
|
:modal="false"
|
:modal-append-to-body="false"
|
:fullscreen="true"
|
class="retail-popup"
|
>
|
<iframe :src="retailSrc" frameborder="0"></iframe>
|
</el-dialog>
|
</el-card>
|
</template>
|
|
<script>
|
import Feature from 'ol/Feature.js'
|
import Point from 'ol/geom/Point.js'
|
import { Icon, Style } from 'ol/style.js'
|
|
import yjPng from '@/assets/img/Reservoir-Station-red.png'
|
import zcPng from '@/assets/img/Reservoir-Station-green.png'
|
|
import skZc from '@/assets/img/sh-wyj.png'
|
import skYj from '@/assets/img/fxyj.png'
|
|
import store from '@/store/' // 全局状态
|
|
// eslint-disable-next-line no-unused-vars
|
import bus from '@/api/bus.js' // 公共事件
|
|
import { getList, customList } from '@/api/reservoir'
|
|
// 导出excel表格所需
|
// eslint-disable-next-line camelcase
|
import { export_json_to_excel } from '@/assets/libs/Export2Excel.js'
|
|
import iconone from '@/assets/img/icon-arrow1.png'
|
import icontwo from '@/assets/img/icon-arrow2.png'
|
import iconthree from '@/assets/img/icon-arrow3.png'
|
|
export default {
|
data () {
|
return {
|
boxShow: false,
|
newOrCustomValue: '最新',
|
// 水库详情相关
|
retailTitle: '',
|
retailShowFlag: false,
|
retailSrc: '',
|
// el-dialog
|
dialogVisible: false,
|
// real or custom
|
realOrCustom: true,
|
textarea: '',
|
pickerOptions: {
|
shortcuts: [
|
{
|
text: '最近一周',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(
|
start.getTime() - 3600 * 1000 * 24 * 7
|
)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近一个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(
|
start.getTime() - 3600 * 1000 * 24 * 30
|
)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近三个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(
|
start.getTime() - 3600 * 1000 * 24 * 90
|
)
|
picker.$emit('pick', [start, end])
|
}
|
}
|
]
|
},
|
// 保存自定义时间
|
customTime: [
|
new Date().setTime(new Date().getTime() - 3600 * 1000),
|
new Date()
|
],
|
tableData: [],
|
currpage: 1,
|
pagesize: 20,
|
map2D: store.state.openlayers.map2D,
|
reservoirIconLayer: store.state.openlayers.reservoirIconLayer,
|
reservoirIconLayerYJ: store.state.openlayers.reservoirIconLayerYJ,
|
// 预警的数据
|
yjData: [],
|
// 正常的数据
|
zcData: [],
|
yjNum: 0,
|
zcNum: 0,
|
// 详情框是否显示
|
reservoirDetailPopupFlag: false,
|
// 详情内容
|
detailPopupContent: '',
|
// 图例信息
|
legendData: [
|
{
|
title: '水库水情图例',
|
content: [
|
{
|
label: '正常',
|
src: skZc,
|
smallsrc: zcPng,
|
type: 'reservoirIconLayer',
|
value: 0,
|
class: 'text-green',
|
btnClass: 'btn-zc'
|
},
|
{
|
label: '超汛限',
|
src: skYj,
|
smallsrc: yjPng,
|
type: 'reservoirIconLayerYJ',
|
value: 0,
|
class: 'text-red',
|
btnClass: 'btn-yj'
|
}
|
]
|
}
|
],
|
// 加载中
|
loading: true,
|
yjOrZc: ''
|
}
|
},
|
created () {
|
this.customTime[0] = this.timeOrTimeNum(this.customTime[0])
|
this.loading = true
|
this.realData()
|
},
|
beforeMount () { },
|
mounted () {
|
this.$parent.resize('360px', '360px', true, '水库水情')
|
|
this.map2D.addLayer(this.reservoirIconLayer)
|
this.map2D.addLayer(this.reservoirIconLayerYJ)
|
|
this.$nextTick(function () {
|
this.map2D.on('pointermove', this.seleceFeature)
|
|
this.map2D.on('singleclick', this.layerClick)
|
})
|
},
|
methods: {
|
boxResize (val) {
|
this.boxShow = val
|
this.$refs['layer-control'].layerControlResize(val)
|
},
|
// 控制图层显示隐藏事件
|
layerControl (item) {
|
if (item.type == 'reservoirIconLayer') {
|
this.legendData[0].content[0].btnClass == '' ? this.legendData[0].content[0].btnClass = 'btn-zc' : this.legendData[0].content[0].btnClass = ''
|
} else {
|
this.legendData[0].content[1].btnClass == '' ? this.legendData[0].content[1].btnClass = 'btn-yj' : this.legendData[0].content[1].btnClass = ''
|
}
|
|
this[item.type].setVisible(!this[item.type].getVisible())
|
},
|
timeOrTimeNum (timestamp) {
|
var date = new Date(timestamp)
|
var Y = date.getFullYear()
|
var M = ((date.getMonth() + 1) < 10) ? ('0' + (date.getMonth() + 1)) : ((date.getMonth() + 1))
|
var D = (date.getDate() < 10) ? ('0' + date.getDate()) : (date.getDate())
|
|
var time = new Date(Y + '/' + M + '/' + D + ' 08:00:00').getTime()
|
return time
|
},
|
retailOpen (e) {
|
if (e.target.nodeName == 'STRONG') {
|
this.retailTitle = e.target.innerText
|
this.retailShowFlag = true
|
this.retailSrc = `/retail/popup/reservoir.html?stcd=${e.target.attributes.stcd.value}`
|
}
|
},
|
|
pickerDateChange (e) { },
|
handleSizeChange (val) {
|
this.pagesize = val
|
},
|
handleCurrentChange (val) {
|
this.currpage = val
|
},
|
addPoint (item, icon) {
|
item.mapZindex = this.reservoirIconLayer.values_.zIndex
|
|
const iconFeature = new Feature({
|
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
|
name: 'reservoir',
|
attributes: item
|
})
|
|
const iconStyle = new Style({
|
|
image: new Icon({
|
scale: 0.24,
|
opacity: 1,
|
src: icon
|
// src: require('../../assets/Mark.png')
|
})
|
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this.reservoirIconLayer.getSource().addFeature(iconFeature)
|
|
this.reservoirIconLayer.setVisible(true)
|
},
|
addPointYJ (item, icon) {
|
item.mapZindex = this.reservoirIconLayerYJ.values_.zIndex
|
|
const iconFeature = new Feature({
|
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
|
name: 'reservoir',
|
attributes: item
|
})
|
|
const iconStyle = new Style({
|
|
image: new Icon({
|
scale: 0.24,
|
opacity: 1,
|
src: icon
|
// src: require('../../assets/Mark.png')
|
})
|
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this.reservoirIconLayerYJ.getSource().addFeature(iconFeature)
|
|
this.reservoirIconLayerYJ.setVisible(true)
|
},
|
layerClick (e) {
|
// 在点击时获取像素区域
|
const that = this
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
|
var view = that.map2D.getView()
|
|
if (features.length > 0) {
|
var ind = 0
|
var cont = null
|
|
features.forEach(item => {
|
if (item.values_.name) {
|
if (item.values_.attributes.mapZindex > ind) {
|
ind = item.values_.attributes.mapZindex
|
cont = item.values_.attributes
|
}
|
}
|
})
|
|
if (cont != undefined && cont != null) {
|
that.reservoirDetailPopupFlag = false
|
that.retailTitle = cont.STNM
|
that.retailShowFlag = true
|
that.retailSrc = `/retail/popup/reservoir.html?stcd=${cont.STCD}`
|
}
|
|
view.setCenter([Number(cont.LGTD), Number(cont.LTTD)])
|
|
view.setZoom(14)
|
}
|
},
|
// 最新数据
|
realData () {
|
if (this.realOrCustom == false) return
|
this.clearDataOrLayer()
|
this.legendData[0].content[0].value = 0
|
this.legendData[0].content[1].value = 0
|
this.legendData[0].content[0].btnClass = 'btn-zc'
|
this.legendData[0].content[1].btnClass = 'btn-yj'
|
this.realOrCustom = false
|
getList().then((res) => {
|
const result = res.data.data[0]
|
this.textarea = result.text
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$廖坊/,
|
"<strong class='text-tab' stcd='62401300'>廖坊"
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '</strong>')
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$洪门/,
|
"<strong class='text-tab' stcd='62403400'>洪门"
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '</strong>')
|
|
if (this.textarea.indexOf('$$$$$洪门') != -1) {
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$洪门/, '洪门'
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '')
|
}
|
|
if (this.textarea.indexOf('$$$$$廖坊') != -1) {
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$廖坊/, '廖坊'
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '')
|
}
|
|
this.$parent.updateText(this.textarea)
|
|
this.yjData = result.Yjlist
|
this.zcData = result.list
|
this.yjNum = result.Yjlist.length
|
this.zcNum = result.list.length
|
this.yjData.length > 0 &&
|
this.yjData.forEach((item, index) => {
|
item.ind = index + 1
|
|
if (item.FDL && item.W) {
|
item.XML = (item.W / item.FDL * 100).toFixed(2)
|
} else {
|
item.XML = '--'
|
}
|
|
if (item.W) {
|
item.W = Number(item.W).toFixed(2)
|
} else {
|
item.W = '--'
|
}
|
|
if (item.RZ && item.FSLTDZ) {
|
item.limited = (item.RZ - item.FSLTDZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (item.RZ == '') {
|
item.RZ = '--'
|
} else if (item.RZ == null || item.RZ == undefined) {
|
item.RZ = '--'
|
} else {
|
item.RZ = Number(item.RZ).toFixed(2)
|
}
|
|
if (item.FSLTDZ == '') {
|
item.FSLTDZ = '--'
|
} else if (item.FSLTDZ == null || item.FSLTDZ == undefined) {
|
item.FSLTDZ = '--'
|
} else {
|
item.FSLTDZ = Number(item.FSLTDZ).toFixed(2)
|
}
|
|
if (item.RZS == 0) {
|
item.RZchange = '--'
|
} else {
|
item.RZchange = (item.RZ - item.RZS).toFixed(3)
|
}
|
|
if (item.RZchange > 0) {
|
item.icon = icontwo
|
} else if (item.RZchange < 0) {
|
item.icon = iconthree
|
} else {
|
item.icon = iconone
|
}
|
|
if (
|
item.LGTD &&
|
item.LGTD != '' &&
|
item.LTTD &&
|
item.LTTD != ''
|
) {
|
this.addPointYJ(item, yjPng)
|
}
|
})
|
|
this.zcData.length > 0 &&
|
this.zcData.forEach((item, index) => {
|
item.ind = index + 1
|
|
if (item.FDL && item.W) {
|
item.XML = (item.W / item.FDL * 100).toFixed(2)
|
} else {
|
item.XML = '--'
|
}
|
|
if (item.W) {
|
item.W = Number(item.W).toFixed(2)
|
} else {
|
item.W = '--'
|
}
|
|
if (item.RZ && item.FSLTDZ) {
|
item.limited = (item.RZ - item.FSLTDZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (item.RZ == '') {
|
item.RZ = '--'
|
} else if (item.RZ == null || item.RZ == undefined) {
|
item.RZ = '--'
|
} else {
|
item.RZ = Number(item.RZ).toFixed(2)
|
}
|
|
if (item.FSLTDZ == '') {
|
item.FSLTDZ = '--'
|
} else if (item.FSLTDZ == null || item.FSLTDZ == undefined) {
|
item.FSLTDZ = '--'
|
} else {
|
item.FSLTDZ = Number(item.FSLTDZ).toFixed(2)
|
}
|
|
if (item.RZS == 0) {
|
item.RZchange = '--'
|
} else {
|
item.RZchange = (item.RZ - item.RZS).toFixed(3)
|
}
|
|
if (item.RZchange > 0) {
|
item.icon = icontwo
|
} else if (item.RZchange < 0) {
|
item.icon = iconthree
|
} else {
|
item.icon = iconone
|
}
|
|
if (
|
item.LGTD &&
|
item.LGTD != '' &&
|
item.LTTD &&
|
item.LTTD != ''
|
) {
|
this.addPoint(item, zcPng)
|
}
|
})
|
|
this.legendData[0].content[0].value = this.zcNum
|
this.legendData[0].content[1].value = this.yjNum
|
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
})
|
},
|
// 自定义数据
|
customData () {
|
if (this.realOrCustom == true) return
|
this.realOrCustom = true
|
this.searchCustom()
|
},
|
clearDataOrLayer () {
|
this.dialogVisible = false
|
this.loading = true
|
this.textarea = ''
|
this.$parent.updateText('')
|
this.yjData = []
|
this.zcData = []
|
this.yjNum = 0
|
this.zcNum = 0
|
this.reservoirIconLayer.getSource().clear()
|
this.reservoirIconLayerYJ.getSource().clear()
|
},
|
// 大型水库放前面
|
sortArr (array) {
|
var arr = []
|
|
array.forEach((item, index) => {
|
if (item.STNM.indexOf('洪门') != -1 || item.STNM.indexOf('廖坊') != -1) {
|
arr.concat(array.splice(index, 1))
|
}
|
})
|
|
arr.concat(array)
|
|
return arr
|
},
|
// 打开弹框
|
openDialog (val) {
|
this.yjOrZc = val
|
|
if (val == 'yj') {
|
this.tableData = this.sortArr(this.yjData)
|
} else {
|
this.tableData = this.sortArr(this.zcData)
|
}
|
this.$refs.dialogSearch.inputOrSelectClear()
|
this.dialogVisible = true
|
},
|
// 自定义时，点击查询按钮
|
searchCustom () {
|
if (this.customTime.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
this.clearDataOrLayer()
|
this.legendData[0].content[0].value = 0
|
this.legendData[0].content[1].value = 0
|
this.legendData[0].content[0].btnClass = 'btn-zc'
|
this.legendData[0].content[1].btnClass = 'btn-yj'
|
const startTime = new Date(this.customTime[0])
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
this.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(startTime.getDate()) +
|
' ' +
|
this.disposeTime(startTime.getHours()) +
|
':' +
|
this.disposeTime(startTime.getMinutes()) +
|
':' +
|
this.disposeTime(startTime.getSeconds())
|
|
const endTime = new Date(this.customTime[1])
|
const end =
|
endTime.getFullYear() +
|
'-' +
|
this.disposeTime(endTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(endTime.getDate()) +
|
' ' +
|
this.disposeTime(endTime.getHours()) +
|
':' +
|
this.disposeTime(endTime.getMinutes()) +
|
':' +
|
this.disposeTime(endTime.getSeconds())
|
|
customList(start, end).then((res) => {
|
const result = res.data.data[0]
|
this.textarea = result.text
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$廖坊/,
|
"<strong class='text-tab' stcd='62401300'>廖坊"
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '</strong>')
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$洪门/,
|
"<strong class='text-tab' stcd='62403400'>洪门"
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '</strong>')
|
|
if (this.textarea.indexOf('$$$$$洪门') != -1) {
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$洪门/, '洪门'
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '')
|
}
|
|
if (this.textarea.indexOf('$$$$$廖坊') != -1) {
|
this.textarea = this.textarea.replace(
|
/\$\$\$\$\$廖坊/, '廖坊'
|
)
|
this.textarea = this.textarea.replace(/&&&&&/, '')
|
}
|
|
this.$parent.updateText(this.textarea)
|
|
this.yjData = result.Yjlist
|
this.zcData = result.list
|
this.yjNum = result.number
|
this.zcNum = result.list.length
|
|
if (this.yjData.length > 0) {
|
var b = []
|
this.yjData.forEach((item, index) => {
|
item.ind = index + 1
|
|
if (item.FDL && item.W) {
|
item.XML = (item.W / item.FDL * 100).toFixed(2)
|
} else {
|
item.XML = '--'
|
}
|
|
if (item.W) {
|
item.W = Number(item.W).toFixed(2)
|
} else {
|
item.W = '--'
|
}
|
|
if (item.RZ && item.FSLTDZ) {
|
item.limited = (item.RZ - item.FSLTDZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (item.RZ == '') {
|
item.RZ = '--'
|
} else if (item.RZ == null || item.RZ == undefined) {
|
item.RZ = '--'
|
} else {
|
item.RZ = Number(item.RZ).toFixed(2)
|
}
|
|
if (item.FSLTDZ == '') {
|
item.FSLTDZ = '--'
|
} else if (item.FSLTDZ == null || item.FSLTDZ == undefined) {
|
item.FSLTDZ = '--'
|
} else {
|
item.FSLTDZ = Number(item.FSLTDZ).toFixed(2)
|
}
|
|
if (result.clist[item.STCD]) {
|
item.change = result.clist[item.STCD]
|
} else {
|
item.change = '--'
|
}
|
|
if (
|
item.LGTD &&
|
item.LGTD != '' &&
|
item.LTTD &&
|
item.LTTD != ''
|
) {
|
if (this.yjData.length > 1) {
|
var a = item
|
|
var c = true
|
for (
|
var i = this.yjData.length - 1;
|
i > index;
|
i--
|
) {
|
if (
|
item.STCD == this.yjData[i].STCD &&
|
new Date(item.TM).valueOf() >
|
new Date(
|
this.yjData[i].TM
|
).valueOf()
|
) {
|
a = this.yjData[i]
|
}
|
}
|
b.forEach((bitem) => {
|
if (bitem.STCD == a.STCD) {
|
c = false
|
} else {
|
}
|
})
|
if (c == true) {
|
b.push(a)
|
this.addPointYJ(a, yjPng)
|
}
|
} else this.addPointYJ(item, yjPng)
|
}
|
})
|
}
|
|
this.zcData.length > 0 &&
|
this.zcData.forEach((item, index) => {
|
item.ind = index + 1
|
|
if (item.FDL && item.W) {
|
item.XML = (item.W / item.FDL * 100).toFixed(2)
|
} else {
|
item.XML = '--'
|
}
|
|
if (item.W) {
|
item.W = Number(item.W).toFixed(2)
|
} else {
|
item.W = '--'
|
}
|
|
if (item.RZ && item.FSLTDZ) {
|
item.limited = (item.RZ - item.FSLTDZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (item.RZ == '') {
|
item.RZ = '--'
|
} else if (item.RZ == null || item.RZ == undefined) {
|
item.RZ = '--'
|
} else {
|
item.RZ = Number(item.RZ).toFixed(2)
|
}
|
|
if (item.FSLTDZ == '') {
|
item.FSLTDZ = '--'
|
} else if (item.FSLTDZ == null || item.FSLTDZ == undefined) {
|
item.FSLTDZ = '--'
|
} else {
|
item.FSLTDZ = Number(item.FSLTDZ).toFixed(2)
|
}
|
|
if (result.clist[item.STCD]) {
|
item.change = result.clist[item.STCD]
|
} else {
|
item.change = '--'
|
}
|
if (
|
item.LGTD &&
|
item.LGTD != '' &&
|
item.LTTD &&
|
item.LTTD != ''
|
) {
|
this.addPoint(item, zcPng)
|
}
|
})
|
|
this.legendData[0].content[0].value = this.zcNum
|
this.legendData[0].content[1].value = this.yjNum
|
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
})
|
},
|
// 处理时间补零操作
|
disposeTime (s) {
|
return s < 10 ? '0' + s : s
|
},
|
seleceFeature (e) {
|
// 在点击时获取像素区域
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
|
this.reservoirDetailPopupFlag = false
|
const that = this
|
const exctent = e.map.values_.size
|
|
if (features.length > 0) {
|
var ind = 0
|
var cont = null
|
|
features.forEach(item => {
|
if (item.values_.name) {
|
if (item.values_.attributes.mapZindex > ind) {
|
ind = item.values_.attributes.mapZindex
|
cont = item.values_.attributes
|
}
|
}
|
})
|
|
if (cont != undefined) {
|
that.detailPopupContent = ''
|
that.detailPopupContent += `<li> 站码：${cont.STCD} </li>`
|
that.detailPopupContent += `<li> 站点：${cont.STNM} </li>`
|
that.detailPopupContent += `<li> 行政区：${cont.ADDVNM} </li>`
|
that.detailPopupContent += `<li> 时间：${cont.TM} </li>`
|
that.detailPopupContent += `<li> 汛限水位(m)：${cont.FSLTDZ} </li>`
|
that.detailPopupContent += `<li> 实时水位(m)：${cont.RZ} </li>`
|
that.detailPopupContent += `<li> 超汛限水位(m)：${cont.limited} </li>`
|
that.detailPopupContent += `<li> 蓄水量(10⁶m³)：${cont.W} </li>`
|
that.detailPopupContent += `<li> 蓄满率(%)：${cont.XML} </li>`
|
|
if (that.realOrCustom == true) {
|
// that.detailPopupContent += `<li> 变幅(m)：${cont.change} </li>`
|
} else {
|
that.detailPopupContent += `<li> 昨日水位对比(m)：${cont.RZchange} </li>`
|
}
|
|
document.getElementById('reservoirDetailPopup').style.top =
|
e.pixel[1] + 70 + 'px'
|
document.getElementById('reservoirDetailPopup').style.right =
|
exctent[0] - e.pixel[0] + 10 + 'px'
|
that.reservoirDetailPopupFlag = true
|
}
|
}
|
},
|
// 数据导出
|
exportExcel () {
|
var tHeader = [
|
'序号',
|
'站码',
|
'站名',
|
'行政区',
|
'时间',
|
'汛限水位(m)',
|
'实时水位(m)',
|
'超汛限水位(m)',
|
'蓄水量(10⁶m³)',
|
'蓄满率(%)'
|
]
|
|
var filterVal = [
|
'ind',
|
'STCD',
|
'STNM',
|
'ADDVNM',
|
'TM',
|
'FSLTDZ',
|
'RZ',
|
'limited',
|
'W',
|
'XML'
|
]
|
if (this.realOrCustom == true) {
|
// tHeader.push('变幅(m)')
|
// filterVal.push('change')
|
} else {
|
tHeader.push('昨日水位对比(m)')
|
filterVal.push('RZchange')
|
}
|
var filename = '水库水情数据表格'
|
var data = this.formatJson(filterVal, this.tableData)
|
export_json_to_excel({
|
header: tHeader,
|
data,
|
filename
|
})
|
},
|
formatJson (filterVal, tableData) {
|
return tableData.map((v) => {
|
return filterVal.map((j) => {
|
return v[j]
|
})
|
})
|
},
|
// changeTable修改dialog表格数据
|
changeTable (param) {
|
this.currpage = 1
|
this.tableData = param
|
},
|
newOrCustomValueChange () {
|
if (this.newOrCustomValue == '最新') {
|
this.realData()
|
} else {
|
this.customData()
|
}
|
},
|
onSortChange ({ prop, order }) {
|
this.tableData.sort(this.compare(prop, order))
|
|
this.tableData.forEach((item, index) => {
|
item.ind = index + 1
|
})
|
},
|
compare (property, order) {
|
if (order == 'ascending') {
|
return function (a, b) {
|
var value1 = a[property]
|
var value2 = b[property]
|
return value1 - value2
|
}
|
} else {
|
return function (a, b) {
|
var value1 = a[property]
|
var value2 = b[property]
|
return value2 - value1
|
}
|
}
|
}
|
},
|
destroyed () {
|
this.$parent.resize('0%', '0', false)
|
this.$parent.updateText('')
|
|
this.reservoirIconLayer.getSource().clear()
|
this.reservoirIconLayerYJ.getSource().clear()
|
|
this.map2D.removeLayer(this.reservoirIconLayer)
|
this.map2D.removeLayer(this.reservoirIconLayerYJ)
|
|
this.map2D.un('pointermove', this.seleceFeature)
|
this.map2D.un('singleclick', this.layerClick)
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
