/*
|
* @Author: Morpheus
|
* @Date: 2021-05-06 16:10:30
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2022-05-27 16:18:00
|
*/
|
<template>
|
<el-card class="riverway-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="riverway-content" v-loading="loading">
|
<!-- 文字概况 -->
|
<div class="text-overview">
|
<p v-html="textarea"></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="riverwayDetailPopupFlag"
|
class="riverway-detail-popup"
|
id="riverwayDetailPopup"
|
>
|
<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="true"
|
:baseDataList="baseDataList"
|
@changeDialogTable="changeTable"
|
@exportParent="exportExcel"
|
ref="dialogSearch"
|
></Dialog-search>
|
<div class="data-table">
|
<el-table
|
:data="
|
tableData.slice(
|
(currpage - 1) * pagesize,
|
currpage * pagesize
|
)
|
"
|
@row-click="flowWaterEcharts"
|
@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" sortable="custom" prop="WRZ" label="警戒水位(m)"></el-table-column>
|
<el-table-column align="center" sortable="custom" prop="Z" label="实时水位(m)"></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="变幅(m)"
|
prop="change"
|
v-if="realOrCustom"
|
></el-table-column>
|
<el-table-column align="center" label="类别" prop="type"></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="水位过程线"
|
:visible.sync="riverWaterFlag"
|
width="width"
|
:modal="false"
|
:modal-append-to-body="false"
|
:fullscreen="true"
|
class="river-popup"
|
>
|
<iframe :src="riverWaterUrl" frameborder="0"></iframe>
|
</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/River-Station-red-triangle.png'
|
import zcPng from '@/assets/img/River-Station-green-triangle.png'
|
|
import hdZc from '@/assets/img/sh-wyj.png'
|
import hdYj from '@/assets/img/fxyj.png'
|
|
import store from '@/store/' // 全局状态
|
|
// eslint-disable-next-line no-unused-vars
|
import bus from '@/api/bus.js' // 公共事件
|
|
import { getRiserwayList, customRiserwayList } from '@/api/riserway'
|
|
// 导出excel表格所需
|
// eslint-disable-next-line camelcase
|
import { export_json_to_excel } from '@/assets/libs/Export2Excel.js'
|
|
export default {
|
data () {
|
return {
|
// 站点相关数据弹窗变量
|
retailShowFlag: false,
|
retailTitle: '',
|
retailSrc: '',
|
|
boxShow: false,
|
// el-dialog
|
newOrCustomValue: '最新',
|
dialogVisible: false,
|
riverWaterFlag: false,
|
riverWaterUrl: '',
|
// 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()
|
],
|
tabData: [],
|
tableData: [],
|
currpage: 1,
|
pagesize: 20,
|
map2D: store.state.openlayers.map2D,
|
riverwayIconLayer: store.state.openlayers.riverwayIconLayer,
|
riverwayIconLayerYJ: store.state.openlayers.riverwayIconLayerYJ,
|
|
// 预警的数据
|
yjData: [],
|
// 正常的数据
|
zcData: [],
|
|
// 基本站得数据
|
baseDataList: [],
|
|
yjNum: 0,
|
zcNum: 0,
|
// 详情框是否显示
|
riverwayDetailPopupFlag: false,
|
// 详情内容
|
detailPopupContent: '',
|
// 图例信息
|
legendData: [
|
{
|
title: '河道水情图例',
|
content: [
|
{
|
label: '正常',
|
src: hdZc,
|
smallsrc: zcPng,
|
type: 'riverwayIconLayer',
|
value: 0,
|
class: 'text-green',
|
btnClass: 'btn-zc'
|
},
|
{
|
label: '超警',
|
src: hdYj,
|
smallsrc: yjPng,
|
type: 'riverwayIconLayerYJ',
|
value: 0,
|
class: 'text-red',
|
btnClass: 'btn-yj'
|
}
|
]
|
}
|
],
|
|
// 加载中状态
|
loading: true,
|
yjOrZc: ''
|
}
|
},
|
created () {
|
this.customTime[0] = this.timeOrTimeNum(this.customTime[0])
|
this.realData()
|
},
|
beforeMount () { },
|
mounted () {
|
this.$parent.resize('360px', '360px', true, '河道水情')
|
|
this.map2D.addLayer(this.riverwayIconLayer)
|
this.map2D.addLayer(this.riverwayIconLayerYJ)
|
|
this.$nextTick(function () {
|
this.map2D.on('pointermove', this.seleceFeature)
|
|
this.map2D.on('singleclick', this.layerClick)
|
})
|
},
|
methods: {
|
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.riverwayDetailPopupFlag = false
|
|
that.retailTitle = cont.STNM
|
that.retailShowFlag = true
|
that.retailSrc = `/retail/sitepopup/river.html?id=${cont.STCD}`
|
}
|
|
view.setCenter([Number(cont.LGTD), Number(cont.LTTD)])
|
|
view.setZoom(14)
|
}
|
},
|
|
boxResize (val) {
|
this.boxShow = val
|
|
this.$refs['layer-control'].layerControlResize(val)
|
},
|
// 控制图层显示隐藏事件
|
layerControl (item) {
|
if (item.type == 'riverwayIconLayer') {
|
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
|
},
|
pickerDateChange (e) { },
|
handleSizeChange (val) {
|
this.pagesize = val
|
},
|
handleCurrentChange (val) {
|
this.currpage = val
|
},
|
addPoint (item, icon) {
|
item.mapZindex = this.riverwayIconLayer.values_.zIndex
|
|
const iconFeature = new Feature({
|
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
|
name: 'riverway',
|
attributes: item
|
})
|
|
const iconStyle = new Style({
|
// text: new Text({ // 字体, 未成功, 浪费许多时间
|
// font: 'Normal ' + 12 + 'px ' + 'iconfont',
|
// text: "\e645",
|
// fill: new Fill({ color: "green" }),
|
// }),
|
|
image: new Icon({
|
scale: 0.3,
|
opacity: 1,
|
src: icon
|
// src: require('../../assets/Mark.png')
|
})
|
|
// new CircleStyle({ // 普通样式
|
// radius: 6,
|
// fill: new Fill({
|
// color: 'rgba(200, 155, 155, 0.8)'
|
// }),
|
// stroke: new Stroke({
|
// color: 'black',
|
// width: 0.3,
|
// })
|
// }),
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this.riverwayIconLayer.getSource().addFeature(iconFeature)
|
|
this.riverwayIconLayer.setVisible(true)
|
},
|
addPointYJ (item, icon) {
|
item.mapZindex = this.riverwayIconLayerYJ.values_.zIndex
|
|
const iconFeature = new Feature({
|
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
|
name: 'riverway',
|
attributes: item
|
})
|
|
const iconStyle = new Style({
|
// text: new Text({ // 字体, 未成功, 浪费许多时间
|
// font: 'Normal ' + 12 + 'px ' + 'iconfont',
|
// text: "\e645",
|
// fill: new Fill({ color: "green" }),
|
// }),
|
|
image: new Icon({
|
scale: 0.3,
|
opacity: 1,
|
src: icon
|
// src: require('../../assets/Mark.png')
|
})
|
|
// new CircleStyle({ // 普通样式
|
// radius: 6,
|
// fill: new Fill({
|
// color: 'rgba(200, 155, 155, 0.8)'
|
// }),
|
// stroke: new Stroke({
|
// color: 'black',
|
// width: 0.3,
|
// })
|
// }),
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this.riverwayIconLayerYJ.getSource().addFeature(iconFeature)
|
|
this.riverwayIconLayerYJ.setVisible(true)
|
},
|
|
// 最新数据
|
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
|
getRiserwayList().then((res) => {
|
const result = res.data.data[0]
|
this.textarea = result.text
|
|
this.$parent.updateText(this.textarea)
|
|
this.yjData = result.Yjlist
|
this.zcData = result.list
|
this.baseDataList = result.list1
|
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.Z && item.WRZ) {
|
item.limited = (item.Z - item.WRZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (item.Z == '') {
|
item.Z = '--'
|
} else if (item.Z == null || item.Z == undefined) {
|
item.Z = '--'
|
} else {
|
item.Z = Number(item.Z).toFixed(2)
|
}
|
|
if (item.WRZ == '') {
|
item.WRZ = '--'
|
} else if (item.WRZ == null || item.WRZ == undefined) {
|
item.WRZ = '--'
|
} else {
|
item.WRZ = Number(item.WRZ).toFixed(2)
|
}
|
|
var flag = false
|
this.baseDataList.forEach(it => {
|
if (item.STCD == it.STCD) {
|
flag = true
|
}
|
})
|
|
if (flag == true) {
|
item.type = '基本站'
|
} else {
|
item.type = '非基本站'
|
}
|
|
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.Z && item.WRZ) {
|
item.limited = (item.Z - item.WRZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (item.Z == '') {
|
item.Z = '--'
|
} else if (item.Z == null || item.Z == undefined) {
|
item.Z = '--'
|
} else {
|
item.Z = Number(item.Z).toFixed(2)
|
}
|
|
if (item.WRZ == '') {
|
item.WRZ = '--'
|
} else if (item.WRZ == null || item.WRZ == undefined) {
|
item.WRZ = '--'
|
} else {
|
item.WRZ = Number(item.WRZ).toFixed(2)
|
}
|
|
var flag = false
|
this.baseDataList.forEach(it => {
|
if (item.STCD == it.STCD) {
|
flag = true
|
}
|
})
|
|
if (flag == true) {
|
item.type = '基本站'
|
} else {
|
item.type = '非基本站'
|
}
|
|
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)
|
})
|
},
|
// 自定义数据
|
customBtn () {
|
if (this.realOrCustom == true) return
|
this.realOrCustom = true
|
this.searchCustom()
|
},
|
clearDataOrLayer () {
|
this.dialogVisible = false
|
this.loading = true
|
|
this.textarea = ''
|
|
this.$parent.updateText(this.textarea)
|
|
this.yjData = []
|
this.zcData = []
|
this.yjNum = 0
|
this.zcNum = 0
|
this.riverwayIconLayer.getSource().clear()
|
this.riverwayIconLayerYJ.getSource().clear()
|
},
|
// 打开弹框
|
openDialog (val) {
|
this.yjOrZc = val
|
if (val == 'yj') {
|
this.tableData = this.yjData
|
this.tabData = this.yjData
|
} else {
|
this.tableData = this.zcData
|
this.tabData = 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())
|
|
customRiserwayList(start, end).then((res) => {
|
const result = res.data.data[0]
|
var zcData = []
|
this.textarea = result.text
|
|
this.$parent.updateText(this.textarea)
|
|
this.yjNum = result.number
|
|
if (result.list.length > 0) {
|
zcData.push(result.list[0])
|
result.list.forEach((item, index) => {
|
var flag = false
|
zcData.forEach((it, ind) => {
|
if (item.STCD == it.STCD && item.Z <= it.Z) flag = true
|
})
|
if (flag == false) {
|
zcData.push(item)
|
}
|
})
|
}
|
|
this.zcData = zcData
|
|
this.zcNum = zcData.length
|
|
this.yjData = result.Yjlist
|
|
this.baseDataList = result.list1
|
|
if (this.yjData.length > 0) {
|
var b = []
|
this.yjData.forEach((item, index) => {
|
item.ind = index + 1
|
if (item.Z && item.WRZ) {
|
item.limited = (item.Z - item.WRZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (item.Z == '') {
|
item.Z = '--'
|
} else if (item.Z == null || item.Z == undefined) {
|
item.Z = '--'
|
} else {
|
item.Z = Number(item.Z).toFixed(2)
|
}
|
|
if (item.WRZ == '') {
|
item.WRZ = '--'
|
} else if (item.WRZ == null || item.WRZ == undefined) {
|
item.WRZ = '--'
|
} else {
|
item.WRZ = Number(item.WRZ).toFixed(2)
|
}
|
|
if (result.clist[item.STCD]) {
|
item.change = result.clist[item.STCD]
|
} else {
|
item.change = '--'
|
}
|
|
var flag = false
|
this.baseDataList.forEach(it => {
|
if (item.STCD == it.STCD) {
|
flag = true
|
}
|
})
|
|
if (flag == true) {
|
item.type = '基本站'
|
} else {
|
item.type = '非基本站'
|
}
|
|
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.Z && item.WRZ) {
|
item.limited = (item.Z - item.WRZ).toFixed(2)
|
} else {
|
item.limited = '--'
|
}
|
|
if (result.clist[item.STCD]) {
|
item.change = result.clist[item.STCD]
|
} else {
|
item.change = '--'
|
}
|
|
if (item.Z == '') {
|
item.Z = '--'
|
} else if (item.Z == null || item.Z == undefined) {
|
item.Z = '--'
|
} else {
|
item.Z = Number(item.Z).toFixed(2)
|
}
|
|
if (item.WRZ == '') {
|
item.WRZ = '--'
|
} else if (item.WRZ == null || item.WRZ == undefined) {
|
item.WRZ = '--'
|
} else {
|
item.WRZ = Number(item.WRZ).toFixed(2)
|
}
|
|
var flag = false
|
this.baseDataList.forEach(it => {
|
if (item.STCD == it.STCD) {
|
flag = true
|
}
|
})
|
|
if (flag == true) {
|
item.type = '基本站'
|
} else {
|
item.type = '非基本站'
|
}
|
|
if (
|
item.LGTD &&
|
item.LGTD != '' &&
|
item.LTTD &&
|
item.LTTD != '' &&
|
item.STCD != 62417605
|
) {
|
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.riverwayDetailPopupFlag = 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.WRZ} </li>`
|
that.detailPopupContent += `<li> 实时水位(m)：${cont.Z} </li>`
|
that.detailPopupContent += `<li> 超警戒水位(m)：${cont.limited} </li>`
|
that.detailPopupContent += `<li> 类别：${cont.type} </li>`
|
|
if (that.realOrCustom == true) {
|
that.detailPopupContent += `<li> 变幅(m)：${cont.change} </li>`
|
}
|
|
document.getElementById('riverwayDetailPopup').style.top =
|
e.pixel[1] + 70 + 'px'
|
document.getElementById('riverwayDetailPopup').style.right =
|
exctent[0] - e.pixel[0] + 10 + 'px'
|
that.riverwayDetailPopupFlag = true
|
}
|
}
|
},
|
// 数据导出
|
exportExcel () {
|
var tHeader = [
|
'序号',
|
'站码',
|
'站名',
|
'行政区',
|
'时间',
|
'警戒水位(m)',
|
'实时水位(m)',
|
'超警戒水位(m)',
|
'类别'
|
]
|
var filterVal = [
|
'ind',
|
'STCD',
|
'STNM',
|
'ADDVNM',
|
'TM',
|
'WRZ',
|
'Z',
|
'limited',
|
'type'
|
]
|
if (this.realOrCustom == true) {
|
tHeader.push('变幅(m)')
|
filterVal.push('change')
|
}
|
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
|
this.tabData = param
|
},
|
flowWaterEcharts (row) {
|
this.riverWaterFlag = true
|
this.riverWaterUrl = `/retail/popup/reservoirWater.html?stcd=${row.STCD}`
|
},
|
newOrCustomValueChange () {
|
if (this.newOrCustomValue == '最新') {
|
this.realData()
|
} else {
|
this.customBtn()
|
}
|
},
|
onSortChange ({ prop, order }) {
|
if (order != null && prop) {
|
var oneData = []
|
var twoData = []
|
this.tableData.forEach(item => {
|
console.log(item, item[prop])
|
if (item[prop] != '--' && item[prop] != null && item[prop] != undefined) {
|
oneData.push(item)
|
} else {
|
twoData.unshift(item)
|
}
|
})
|
oneData.sort(this.compare(prop, order))
|
|
this.tableData = [...oneData, ...twoData]
|
}
|
|
if (order == null) {
|
this.tableData = this.tabData
|
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.riverwayIconLayer.getSource().clear()
|
this.riverwayIconLayerYJ.getSource().clear()
|
|
this.map2D.removeLayer(this.riverwayIconLayer)
|
this.map2D.removeLayer(this.riverwayIconLayerYJ)
|
|
this.map2D.un('pointermove', this.seleceFeature)
|
this.map2D.un('singleclick', this.layerClick)
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
