<template>
|
<view class="container">
|
|
<!--过程线图-->
|
<view class="card-view">
|
<card>
|
<view class="card-head" slot="insideHead">
|
<view class="title">
|
<u-button :customStyle="picValue=='gcxt'?btnCustomStyle:''" @click="picBtnClick('gcxt')"
|
size="small" text="过程线图"></u-button>
|
</view>
|
<view v-if="type == 'sy'" class="title">
|
<u-button :customStyle="picValue=='jrxt'?btnCustomStyle:''" @click="picBtnClick('jrxt')"
|
size="small" text="浸润线图"></u-button>
|
</view>
|
</view>
|
<view v-if="picValue == 'gcxt'" 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 :disabled="btnSelectValue != 2" @change="dateChange"
|
:clear-icon="false" :end="endDateTime" v-model="dateRange" type="daterange"
|
rangeSeparator="至">
|
</uni-datetime-picker>
|
</view>
|
|
<view class="card_box h df" style="background-color: #eaf2fc;padding: 0 10rpx;"
|
@click="predictVisible=true">
|
<view class="title">{{predictOption[predictIndex].name}}</view>
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
|
|
</view>
|
|
<view class="card-box j-c-s-a h btn-group df">
|
<u-button :customStyle="btnSelectValue==0?btnCustomStyle:''" @click="btnClick(0)" size="small"
|
text="近一月"></u-button>
|
<u-button :customStyle="btnSelectValue==1?btnCustomStyle:''" @click="btnClick(1)" size="small"
|
text="近一年"></u-button>
|
<u-button :customStyle="btnSelectValue==2?btnCustomStyle:''" @click="btnClick(2)" size="small"
|
text="自定义"></u-button>
|
</view>
|
|
<view v-if="type == 'bx'" style="justify-content: space-between;"
|
class="card-box j-c-s-a h btn-group df">
|
|
<view class="df">
|
<u-button v-if="displacementType=='水平位移'" :customStyle="direction=='上下游'?btnCustomStyle:''"
|
@click="directionClick('上下游')" size="small" text="上下游"></u-button>
|
<u-button v-if="displacementType=='水平位移'" :customStyle="direction=='左右岸'?btnCustomStyle:''"
|
@click="directionClick('左右岸')" size="small" text="左右岸"></u-button>
|
</view>
|
|
<view class="df">
|
<u-button :customStyle="displacementType=='水平位移'?btnCustomStyle:''"
|
@click="directionClick('水平位移')" size="small" text="水平位移"></u-button>
|
<u-button :customStyle="displacementType=='垂直位移'?btnCustomStyle:''"
|
@click="directionClick('垂直位移')" size="small" text="垂直位移"></u-button>
|
</view>
|
|
|
</view>
|
|
|
|
|
<echart v-if="!echartsLoading" initId="gcxt" :option="option"></echart>
|
<view v-else style="height: 500rpx;display: flex; justify-content: center;">
|
<u-loading-icon mode="semicircle" :show="echartsLoading" size="36"></u-loading-icon>
|
</view>
|
|
</view>
|
|
|
<view v-if="picValue == 'jrxt'" 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="dateJrxtChange" :clear-icon="false" :end="endDateTime"
|
v-model="dateJrxtRange" type="daterange" rangeSeparator="至">
|
</uni-datetime-picker>
|
</view>
|
|
<view class="card_box h df" style="background-color: #eaf2fc;padding: 0 10rpx;"
|
@click="flagVisible=true">
|
<view v-if="flagOption.length>0" class="title">{{flagOption[flagIndex].name}}</view>
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
</view>
|
|
<!-- <view class="play">
|
<u-button v-if="!playFlag" icon="play-right" class="custom-style" size="small"
|
@click="playBtn"></u-button>
|
<u-button v-else icon="pause" class="custom-style" size="small" @click="playBtn"></u-button>
|
</view> -->
|
|
<echart v-if="!echartsLoading" ref="jrxtEchart" initId="jrxt">
|
</echart>
|
<view v-else style="height: 500rpx;display: flex; justify-content: center;">
|
<u-loading-icon mode="semicircle" :show="echartsLoading" size="36"></u-loading-icon>
|
</view>
|
|
</view>
|
|
|
</card>
|
</view>
|
|
|
<my-select v-if="predictVisible" :show="predictVisible" type="radio" v-model="predictValue" popupTitle="请选择"
|
:dataLists="predictOption" @cancel="predictVisible=false" @submit="predictSelectSubmit">
|
</my-select>
|
|
<my-select v-if="flagVisible" :show="flagVisible" type="radio" v-model="flagValue" popupTitle="请选择"
|
:dataLists="flagOption" @cancel="flagVisible=false" @submit="flagSelectSubmit">
|
</my-select>
|
|
|
</view>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import echart from "@/components/echart/echart.vue"
|
import mySelect from "@/components/my-components/my-select.vue"
|
import card from "@/components/my-components/card.vue"
|
import {
|
getDbFutureData,
|
getSYBaseDetails,
|
getDsmSpgSpprmpList,
|
getBXBaseDetails
|
} from "@/api/dataCenter/dbSafety/dbSafety"
|
import uniDatetimePicker from "@/subPackage/dbSafety/components/uni-components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
|
import {
|
convertTimestampToDate,
|
} from "@/utils/date"
|
export default {
|
components: {
|
card,
|
echart,
|
mySelect,
|
uniDatetimePicker
|
},
|
data() {
|
return {
|
//过程线图配置项
|
option: {},
|
//浸润线图配置项
|
jrxtOption: {},
|
echartData: [],
|
stationData: [],
|
//预报数据
|
futureData: [],
|
res_cd: "42011640018",
|
|
tableHeader: [],
|
showStation: "",
|
|
type: "sy",
|
dateRange: [],
|
dateJrxtRange: [],
|
//日期最大选取时间
|
endDateTime: convertTimestampToDate(new Date()),
|
|
query: {},
|
jrxtQuery: {},
|
|
predictVisible: false,
|
predictValue: "",
|
predictIndex: 0,
|
predictOption: [{
|
name: "预测模型",
|
value: "",
|
index: 0
|
},
|
{
|
name: "Arima预测",
|
value: "Arima",
|
index: 1
|
},
|
{
|
name: "Hst预测",
|
value: "Hst",
|
index: 2
|
},
|
],
|
|
flagValue: "",
|
flagIndex: 0,
|
flagVisible: false,
|
flagOption: [],
|
|
btnSelectValue: 0,
|
|
btnCustomStyle: {
|
backgroundColor: '#eaf2fc',
|
color: '#666666'
|
},
|
|
picValue: "gcxt",
|
|
pointList: [],
|
|
echartsLoading: false,
|
|
//浸润线
|
currentIndex: 0,
|
playFlag: false,
|
//定时器
|
interval: null,
|
|
item: {},
|
|
//图类型。1、过程线图；2、分布图
|
bxType: 1,
|
dimensionality: 1,
|
direction: "上下游",
|
displacementType: "水平位移",
|
|
}
|
},
|
created() {},
|
mounted() {
|
|
},
|
onLoad(option) {
|
this.initDateTime()
|
this.item = JSON.parse(option.data)
|
this.type = option.type
|
console.log("项:", this.item)
|
console.log("类型:", this.type)
|
this.res_cd = this.item.reservoir.res_cd
|
|
if (this.type == 'sy') {
|
this.getData(this.query)
|
} else {
|
this.query.bx_wd = this.bxType
|
this.getBXBase(this.query)
|
}
|
},
|
onShow() {
|
|
},
|
|
watch: {
|
echartData: {
|
handler(newData, oldData) {
|
if (newData.length > 0 && JSON.stringify(newData) != JSON.stringify(oldData)) {
|
const echartsData = this.getAY(newData)
|
|
console.log(echartsData, "----")
|
|
this.$nextTick(() => {
|
this.initOption(echartsData)
|
})
|
}
|
},
|
immediate: true
|
},
|
|
picValue: {
|
handler(newVal, oldVal) {
|
if (newVal == "gcxt") {
|
this.getData(this.query)
|
} else {
|
this.getDsmSpgSpprmpList(this.jrxtQuery, true)
|
}
|
}
|
},
|
|
direction: {
|
handler(newData) {
|
if (this.echartData.length > 0) {
|
const echartsData = this.getAY(this.echartData)
|
|
this.$nextTick(() => {
|
this.initOption(echartsData)
|
})
|
}
|
},
|
},
|
|
displacementType: {
|
handler(newData) {
|
if (this.echartData.length > 0) {
|
const echartsData = this.getAY(this.echartData)
|
|
this.$nextTick(() => {
|
this.initOption(echartsData)
|
})
|
}
|
},
|
}
|
|
},
|
|
methods: {
|
|
directionClick(str) {
|
if (str == "上下游" || str == "左右岸") {
|
this.direction = str
|
} else {
|
this.displacementType = str
|
}
|
},
|
|
//获取变形数据
|
async getBXBase(params) {
|
const that = this
|
|
if (that.resCode == '') return
|
|
this.loading = true
|
|
this.tableData = []
|
this.echartData = []
|
this.extremeData = []
|
this.tableHeader = []
|
this.stationData = []
|
|
let dtObj = {}
|
let getParams = {}
|
|
if (this.bxType == 1) {
|
//判断两日期是否超过一年
|
dtObj = this.isTwoDateOverYear(params.start_tm, params.end_tm)
|
dtObj['dim_type'] = 'cd'
|
getParams.start_tm = params.start_tm
|
getParams.end_tm = params.end_tm
|
} else {
|
let dateStr = params.multiDate.map(item => dayjs(item).format('YYYY-MM-DD')).join(',')
|
|
if (that.multiDateType == 'months') {
|
dtObj.dt_flag = 'month'
|
} else if (that.multiDateType == 'years') {
|
dtObj.dt_flag = 'year'
|
}
|
|
getParams['tm_list'] = dateStr
|
}
|
|
const {
|
data: baseResData
|
} = await getBXBaseDetails({
|
res_cd: that.res_cd,
|
...getParams,
|
...dtObj
|
})
|
|
console.log("变形数据", baseResData)
|
baseResData.wy.forEach(item => {
|
item.de_value = item.de_value.toFixed(2)
|
item.dn_value = item.dn_value.toFixed(2)
|
item.du_value = item.du_value.toFixed(2)
|
|
let stationFlag = that.stationData.some(i => i == item.cd)
|
|
if (stationFlag != true) {
|
that.stationData.push(item.cd)
|
|
that.tableHeader.push({
|
cd: item.cd,
|
label: 'GN' + item.cd,
|
alt: String(item.alt),
|
x: 'station' + item.cd + 'x',
|
y: 'station' + item.cd + 'y',
|
u: 'station' + item.cd + 'u',
|
})
|
}
|
})
|
|
let echartArr = []
|
|
baseResData.dt_list.forEach(item => {
|
let obj = {}
|
|
if (params.bx_wd == 1) {
|
obj.tm = dtObj.dt_flag == "month" ? item.substr(0, 7) : item
|
} else {
|
if (that.multiDateType == 'dates') {
|
obj.tm = item
|
} else if (that.multiDateType == 'months') {
|
obj.tm = item.substr(0, 7)
|
} else if (that.multiDateType == 'years') {
|
obj.tm = item.substr(0, 4)
|
}
|
}
|
|
that.stationData.forEach(it => {
|
let wayData = baseResData.wy.find(i => i.dt == item && i.cd == it)
|
|
if (wayData && wayData != undefined) {
|
obj['station' + it + 'x'] = wayData.de_value
|
obj['station' + it + 'y'] = wayData.dn_value
|
obj['station' + it + 'u'] = wayData.du_value
|
} else {
|
obj['station' + it + 'x'] = ''
|
obj['station' + it + 'y'] = ''
|
obj['station' + it + 'u'] = ''
|
}
|
})
|
|
let rz = {}
|
|
let curRz = baseResData.rz.find(it => item == it.dt)
|
|
that.tableData.push({
|
...obj
|
})
|
|
if (curRz && curRz != undefined) {
|
rz.rz = curRz.rz
|
|
echartArr.push({
|
...obj,
|
...rz
|
})
|
} else {
|
rz.rz = ''
|
|
echartArr.push({
|
...obj,
|
...rz
|
})
|
}
|
|
})
|
|
that.futureData = []
|
that.dimensionality = params.bx_wd
|
if (that.predictValue != "") {
|
|
const res = await getDbFutureData({
|
resCd: that.res_cd,
|
type: 3, //变形
|
predictFlag: that.predictValue
|
})
|
console.log("预测数据：", res)
|
|
if (params.bx_wd == 1) {
|
if (that.predictValue == 'Arima') {
|
//预报数据处理
|
|
if (res.code != 200) return
|
//删除当天的时间数据
|
echartArr.splice(echartArr.length - 1, 1)
|
const lastData = echartArr[echartArr.length - 1]
|
res.data.forEach(v => {
|
const preList = []
|
v.predicts = v.predicts.map(v => {
|
v = JSON.parse(v)
|
v[1] = v[1].toFixed(2)
|
|
return v
|
})
|
//根据时间处理数据
|
v.predicts.reduce((prev, current) => {
|
//判断当前是否为空数组 是空数组直接添加比较项
|
if (prev.length > 0) {
|
//判断当前和第二个日期是否相等
|
const flag = prev[0].substring(0, 10) == current[0].substring(
|
0, 10)
|
if (flag) {
|
const index = preList.findIndex(v => v[0].substring(0,
|
10) == current[0].substring(0, 10))
|
preList[index] = current
|
} else {
|
preList.push(current)
|
}
|
return current
|
} else {
|
preList.push(current)
|
}
|
return current
|
}, [])
|
v.predicts = preList.map(v => {
|
v[0] = v[0].substring(0, 10)
|
return v
|
}).filter(itm => {
|
const itmDate = new Date(itm[0])
|
const yesterday = new Date()
|
yesterday.setDate(yesterday.getDate() - 1)
|
return itmDate > yesterday
|
})
|
})
|
let list = res.data.map(v => {
|
return {
|
pointId: v.pointId,
|
predicts: v.predicts,
|
type: v.type
|
}
|
})
|
const xList = []
|
const yList = []
|
const uList = []
|
if (list.length > 0) {
|
Object.keys(lastData).forEach(v => {
|
if (v.includes("x")) {
|
xList.push({
|
type: 3,
|
predicts: [
|
[lastData['tm'], lastData[v]]
|
],
|
pointId: `${v.substring(7, 9)}`
|
})
|
}
|
if (v.includes("y")) {
|
yList.push({
|
type: 4,
|
predicts: [
|
[lastData['tm'], lastData[v]]
|
],
|
pointId: `${v.substring(7, 9)}`
|
})
|
}
|
if (v.includes("u")) {
|
uList.push({
|
type: 5,
|
predicts: [
|
[lastData['tm'], lastData[v]]
|
],
|
pointId: `${v.substring(7, 9)}`
|
})
|
}
|
})
|
list = [...list, ...xList, ...yList, ...uList]
|
const {
|
integraList: expectList,
|
tm
|
} = that.BXexpectData(list)
|
that.futureData = expectList
|
echartArr.push(...(tm.map(v => {
|
return {
|
tm: v
|
}
|
})))
|
}
|
} else {
|
let tmList = []
|
const {
|
data: res
|
} = future
|
if (res.code != 200) return
|
//删除当天的时间数据
|
echartArr.splice(echartArr.length - 1, 1)
|
const lastData = echartArr[echartArr.length - 1]
|
let predicts = res.data.map(v => {
|
v.preWaterList = JSON.parse(v.preWaterList)
|
v.predictList = JSON.parse(v.predictList)
|
const tm = [...new Set(v.preWaterList.map(v => v.time))]
|
for (let i = 0; i < v.preWaterList.length; i++) {
|
for (let j = i + 1; j < v.preWaterList.length; j++) {
|
if (v.preWaterList[j].time == v.preWaterList[i].time) {
|
v.preWaterList.splice(i, 1)
|
v.predictList.splice(i, 1)
|
}
|
}
|
}
|
v.predicts = v.predictList.map((cl, index) => {
|
let clVlue = cl.toFixed(2)
|
return {
|
label: `GN${v.pointId}`,
|
data: [
|
[tm[index], clVlue]
|
]
|
}
|
})
|
tmList = tm
|
return {
|
type: v.type,
|
list: v.predicts,
|
}
|
})
|
const xList = []
|
const yList = []
|
const uList = []
|
if (predicts.length > 0) {
|
Object.keys(lastData).forEach(v => {
|
if (v.includes("x")) {
|
xList.push({
|
type: '3',
|
list: [{
|
label: `GN${v.substring(7, 9)}`,
|
data: [
|
[lastData['tm'], lastData[v]]
|
]
|
}],
|
})
|
}
|
if (v.includes("y")) {
|
yList.push({
|
type: '4',
|
list: [{
|
label: `GN${v.substring(7, 9)}`,
|
data: [
|
[lastData['tm'], lastData[v]]
|
]
|
}],
|
})
|
}
|
if (v.includes("u")) {
|
uList.push({
|
type: '5',
|
list: [{
|
label: `GN${v.substring(7, 9)}`,
|
data: [
|
[lastData['tm'], lastData[v]]
|
]
|
}],
|
})
|
}
|
})
|
that.futureData = []
|
predicts = [...predicts, ...xList, ...yList, ...uList]
|
that.futureData = that.BXhstPredictsDeal(predicts)
|
echartArr.push(...(tmList.map(v => {
|
return {
|
tm: v
|
}
|
})))
|
}
|
}
|
}
|
}
|
|
that.echartData = echartArr
|
console.log("最终数据", that.echartData)
|
|
},
|
|
//预报方法处理
|
BXexpectData(list) {
|
const deepList = JSON.parse(JSON.stringify(list))
|
const integraList = []
|
for (let key of deepList) {
|
const item = integraList.find(e => e.type == key.type)
|
if (item) {
|
item.list.push({
|
label: `GN${key.pointId}`,
|
data: key.predicts
|
})
|
} else {
|
integraList.push({
|
type: key.type,
|
list: [{
|
label: `GN${key.pointId}`,
|
data: key.predicts
|
}]
|
})
|
}
|
}
|
for (let j = 0; j < integraList.length; j++) {
|
const inteItem = integraList[j]
|
const maxNum = inteItem.list.length
|
const expectList = []
|
for (let i = 0; i < maxNum; i++) {
|
const index = expectList.findIndex(v => v.label == inteItem.list[i].label)
|
if (index > -1) {
|
//把合并后的时间添加到已经有的label的data里面的第一项
|
expectList[index].data.unshift(...inteItem.list[i].data.map(v => v))
|
} else {
|
expectList.push({
|
label: inteItem.list[i].label,
|
data: inteItem.list[i].data
|
})
|
}
|
}
|
inteItem.list = expectList
|
}
|
//拿到处理好的数据第一项的时间 时间都是一样的
|
let tm = integraList[0].list[0].data.map(v => v[0])
|
tm.splice(0, 1)
|
return {
|
integraList,
|
tm
|
}
|
},
|
|
//hst预报方法处理
|
BXhstPredictsDeal(list) {
|
let deepList = JSON.parse(JSON.stringify(list))
|
/*
|
处理deepList里的list的label相同的项合一
|
*/
|
const maxNum = Math.max(...deepList.map(v => v.list.length))
|
for (let j = 0; j < deepList.length; j++) {
|
const item = deepList[j]
|
item.list.reduce((prev, next, index) => {
|
if (next.label == prev.label) {
|
prev.data.push(...next.data.map(v => v))
|
item.list.splice(index, 1)
|
} else {
|
return next
|
}
|
return prev
|
}, {
|
label: "",
|
data: []
|
})
|
}
|
for (let i = 0; i < maxNum; i++) {
|
deepList.reduce((prev, next, index) => {
|
if (prev.type == next.type) {
|
prev.list.push(...next.list.map(v => v))
|
deepList.splice(index, 1)
|
return prev
|
} else return next
|
}, {
|
type: "",
|
list: []
|
})
|
}
|
/*
|
把deepList type相同的项合并
|
*/
|
for (let i = 0; i < deepList.length; i++) {
|
for (let j = i + 1; j < deepList.length; j++) {
|
if (deepList[i].type == deepList[j].type) {
|
deepList[i].list.push(...deepList[j].list.map(v => v))
|
deepList[j].list = []
|
}
|
}
|
}
|
deepList = deepList.filter(v => v.list.length > 0)
|
for (let idx = 0; idx < deepList.length; idx++) {
|
const integraList = []
|
const item = deepList[idx].list
|
item.forEach(itx => {
|
const inItem = integraList.find(v => v.label == itx.label)
|
if (inItem) {
|
inItem.data.unshift(...itx.data.map(v => v))
|
} else {
|
integraList.push({
|
label: itx.label,
|
data: itx.data
|
})
|
}
|
})
|
deepList[idx].list = integraList
|
const listLength = Math.max(...deepList[idx].list.map(v => v.data.length))
|
deepList[idx].list.forEach(v => {
|
if (v.data.length < listLength) {
|
for (let i = v.data.length; i < listLength; i++) {
|
v.data.push(['', null])
|
}
|
}
|
})
|
}
|
return deepList
|
},
|
|
//播放、暂停方法
|
playBtn() {
|
this.playFlag = !this.playFlag
|
// this.interval = null;
|
if (this.playFlag === true) {
|
if (this.currentIndex == this.tableData.length - 1) {
|
this.currentIndex = 0
|
}
|
this.interval = setInterval(() => {
|
if (this.currentIndex < this.tableData.length - 1) {
|
this.currentIndex++
|
|
this.updateOptions(...this.updataEchartsData(this.tableData[this.currentIndex]))
|
} else {
|
clearInterval(this.interval)
|
this.playFlag = !this.playFlag
|
}
|
}, 100)
|
} else {
|
if (this.interval) {
|
clearInterval(this.interval)
|
}
|
}
|
},
|
|
// 更新echarts中options的数据
|
updateOptions(data, chartdata, damX, damY, damWidth, waterWidth, checkWaterWidth) {
|
const that = this
|
|
let polyPoints = []
|
|
let piezometer_fracture = []
|
let pressureData = []
|
|
let pressLocation = [
|
[92, 86.6],
|
[112, 82.2],
|
[130, 78.8],
|
[150, 72],
|
]
|
|
data.forEach((item, index) => {
|
pressureData.push(item.spprwl)
|
|
piezometer_fracture.push([
|
pressLocation[index][0] - 0.5,
|
item.tbbtel - 2 < chartdata.damBotoomHeight ? chartdata.damBotoomHeight : item
|
.tbbtel - 2,
|
pressLocation[index][0] + 0.5,
|
pressLocation[index][1],
|
])
|
})
|
|
this.jrxtOption.series[2] = {
|
name: "当前水位",
|
type: "custom",
|
renderItem: function(params, api) {
|
polyPoints.push(api.coord([api.value(0), api.value(1)]))
|
var start = api.coord([0, chartdata.waterLevel])
|
|
return {
|
type: 'group',
|
children: [{
|
type: 'polygon',
|
shape: {
|
points: echarts.graphic.clipPointsByRect(polyPoints, {
|
x: params.coordSys.x,
|
y: params.coordSys.y,
|
width: params.coordSys.width,
|
height: params.coordSys.height
|
})
|
},
|
style: api.style({
|
fill: "rgb(58,138,122)",
|
stroke: 'transparent'
|
})
|
}, {
|
type: 'text',
|
style: {
|
text: '实测水位 ' + chartdata.waterLevel + "m▼",
|
x: start[0] + 10,
|
y: start[1] - 14,
|
fill: '#368AE6'
|
}
|
}]
|
}
|
},
|
data: [
|
[0, chartdata.damBotoomHeight],
|
[waterWidth, chartdata.waterLevel],
|
[0, chartdata.waterLevel],
|
],
|
z: 10
|
}
|
|
// 测压管渗压水位
|
this.jrxtOption.series[4].data = piezometer_fracture.map((item, index) => {
|
return [item[0], item[1], item[2], pressureData[index]]
|
}).filter((item, index) => pressureData[index] != '')
|
|
// 浸润线
|
this.jrxtOption.series[5].data = [
|
[waterWidth, chartdata.waterLevel],
|
[(damX[6] - damX[5]) / 2.4 + damX[5] - 1.6, chartdata.waterLevel],
|
...piezometer_fracture.map((item, index) => {
|
return [item[0], pressureData[index]]
|
}).filter((item, index) => pressureData[index] != ''),
|
[damX[damX.length - 1], chartdata.damBotoomHeight],
|
]
|
|
this.$nextTick(async () => {
|
const chart = await this.$refs.jrxtEchart.$refs.chart.init(echarts)
|
chart.setOption(this.jrxtOption, {
|
notMerge: true,
|
})
|
})
|
},
|
|
//获取断面下拉数据
|
getDsmSpgSpprmpList(params, flag = false) {
|
this.echartsLoading = true
|
|
if (flag == true) {
|
getDsmSpgSpprmpList({
|
res_cd: this.res_cd
|
}).then(res => {
|
|
console.log("断面数据：", res)
|
|
if (res.resultList.length == 0) {
|
|
this.$message({
|
message: '该水库暂无数据',
|
type: 'warning'
|
})
|
|
return
|
}
|
|
if (flag == true) {
|
let ind = 0
|
|
this.flagOption = res.resultList.reduce((pre, cur) => {
|
let flag = pre.some(item => cur.ch == item.value)
|
|
if (flag == true) {
|
return pre
|
} else {
|
pre.push({
|
name: cur.ch,
|
value: cur.ch,
|
index: ind
|
})
|
|
ind += 1
|
|
return pre
|
}
|
}, [])
|
|
|
this.$nextTick(() => {
|
if (this.resCode == '42011640018') {
|
this.flagValue = this.flagOption[1].value
|
this.flagIndex = this.flagOption[1].index
|
} else {
|
this.flagValue = this.flagOption[0].value
|
this.flagIndex = this.flagOption[0].index
|
}
|
|
params.flag = this.flagValue
|
|
this.getDsmSpgSpprmpList(params)
|
})
|
|
return
|
}
|
|
this.getDataAll(params)
|
})
|
} else {
|
this.getDataAll(params)
|
}
|
|
|
},
|
|
async getDataAll(params) {
|
const that = this
|
|
let start_tm = params.start_tm
|
let end_tm = params.end_tm
|
|
const {
|
resultList: baseAll
|
} = await getDsmSpgSpprmpList({
|
res_cd: that.res_cd
|
})
|
|
const {
|
data: pressAll
|
} = await getSYBaseDetails({
|
res_cd: that.res_cd,
|
start_tm: start_tm,
|
end_tm: end_tm
|
})
|
|
console.log(pressAll, "-------------")
|
|
let pressValArray = baseAll.filter(item => item.ch == params.flag).map(item => item.mpcd).sort((a,
|
b) => a - b)
|
|
pressValArray = pressAll.press.reduce((pre, cur) => {
|
let flagOne = pressValArray.some(item => item == cur.cd)
|
let flagTwo = pre.some(item => item == cur.cd)
|
|
if (flagOne && !flagTwo) {
|
pre.push(cur.cd)
|
}
|
|
return pre
|
}, [])
|
|
let list = pressAll.dt_list.map(item => {
|
let curRz = pressAll.rz.find(i => i.dt == item)
|
let water
|
|
if (curRz) {
|
water = curRz.rz
|
} else {
|
water = ''
|
}
|
|
return {
|
tm: item,
|
water,
|
pressData: []
|
}
|
})
|
|
pressAll.press.forEach(item => {
|
let flag = pressValArray.some(i => i == item.cd)
|
|
if (flag) {
|
list.forEach(listItem => {
|
if (listItem.tm == item.dt) {
|
let curPress = baseAll.find(i => i.mpcd == item.cd)
|
|
if (item.press_val == null) {
|
item.press_val = ''
|
}
|
|
listItem.pressData.push({
|
...curPress,
|
spprwl: Math.abs(item.press_val) > 0 ? item.press_val
|
.toFixed(2) : item.press_val,
|
rz: listItem.water
|
})
|
|
listItem['UPD' + item.cd] = Math.abs(item.press_val) > 0 ? item
|
.press_val.toFixed(2) : item.press_val
|
listItem['setUpd'] = true
|
} else {
|
return
|
}
|
})
|
}
|
})
|
|
that.tableData = list.filter(item => {
|
let arr = []
|
|
pressValArray.forEach(j => {
|
let allCur = baseAll.find(i => j == i.mpcd)
|
let itemCur = item.pressData.find(i => j == i.mpcd)
|
|
if (itemCur) {
|
arr.push(itemCur)
|
} else {
|
item['UPD' + j] = ''
|
|
arr.push({
|
...allCur,
|
spprwl: '',
|
rz: item.water
|
})
|
}
|
})
|
|
item.pressData = arr
|
|
return 'setUpd' in item
|
})
|
|
that.pointList = baseAll.filter(item => item.ch == params.flag).sort((a, b) => a.mpcd -
|
b.mpcd).map((item, index) => {
|
let x
|
if (index == 0) {
|
x = 950
|
} else if (index == 1) {
|
x = 1086
|
} else if (index == 2) {
|
x = 1294
|
}
|
|
return {
|
ptcd: 'UPD' + item.mpcd,
|
unit: 'm',
|
x
|
}
|
})
|
|
console.log("数据：", that.tableData)
|
that.echartsInit(...that.updataEchartsData(that.tableData[that.tableData.length - 1]))
|
|
|
},
|
|
echartsInit(data, chartdata, damX, damY, damWidth, waterWidth, checkWaterWidth) {
|
|
const that = this
|
//柱形图
|
|
let polyPoints = []
|
let piezometer_fracture = []
|
|
let pressureName = []
|
let pressureData = []
|
|
let pressLocation = [
|
[92, that.calculateAngleTwoBLength(damY[6] - damY[7], 15, damX[7] - 92, damY[7]) + 0.4],
|
[112, damY[7] + 0.4],
|
[130, that.calculateAngleTwoBLength(damY[8] - damY[9], 15, damX[9] - 130, damY[9]) + 0.4],
|
[150, 72],
|
]
|
|
data.forEach((item, index) => {
|
pressureName.push('UPD' + item.mpcd)
|
pressureData.push(item.spprwl == '' ? item.tbbtel : item.spprwl)
|
|
piezometer_fracture.push([
|
pressLocation[index][0] - 0.5,
|
item.tbbtel - 2 < chartdata.damBotoomHeight ? chartdata.damBotoomHeight : item
|
.tbbtel - 2,
|
pressLocation[index][0] + 0.5,
|
pressLocation[index][1],
|
])
|
})
|
|
|
|
this.jrxtOption = {
|
grid: {
|
left: '2%',
|
top: '10%',
|
right: '6%',
|
bottom: '4%',
|
containLabel: true,
|
},
|
toolbox: {
|
show: false
|
},
|
calculable: false,
|
xAxis: [{
|
type: 'value',
|
axisLabel: {
|
show: true
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
min: 0,
|
max: damWidth
|
}],
|
yAxis: [{
|
name: '断面高(m)',
|
type: 'value',
|
min: chartdata.damBotoomHeight,
|
scale: true,
|
max: chartdata.damTopHeight + 10,
|
axisLabel: {
|
formatter: function(value, index) {
|
return value.toFixed(0)
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
splitNumber: 5,
|
interval: (chartdata.damTopHeight + 10 - chartdata.damBotoomHeight) / 5
|
}],
|
series: [{
|
name: "均质坝",
|
type: 'line',
|
symbol: "none",
|
data: [
|
[damX[0], damY[0]],
|
[damX[1], damY[1]],
|
[damX[2], damY[2]],
|
|
[damX[3], damY[3]],
|
[damX[4], damY[4]],
|
[damX[5], damY[5]],
|
|
[damX[6], damY[6]],
|
[damX[7], damY[7]],
|
[damX[8], damY[8]],
|
|
[damX[9], damY[9]],
|
[damX[10], damY[10]],
|
[damX[11], damY[11]],
|
[damX[12], damY[12]],
|
],
|
areaStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0,
|
color: 'rgba(154,130,120, 1)',
|
|
}, {
|
offset: 1,
|
color: 'rgba(154,130,120, 1)',
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
},
|
}
|
},
|
lineStyle: {
|
color: "rgb(214,214,214)",
|
width: 4
|
},
|
},
|
{
|
name: "心墙坝",
|
type: 'line',
|
symbol: "none",
|
data: [
|
[damX[5], damY[0]],
|
[(damX[6] - damX[5]) / 2.4 + damX[5], (damY[6] - data[0].chec_fl_stag) / 2 +
|
data[0].chec_fl_stag
|
],
|
[damX[6] - (damX[6] - damX[5]) / 2.4, (damY[6] - data[0].chec_fl_stag) / 2 +
|
data[0].chec_fl_stag
|
],
|
[damX[6], damY[0]]
|
],
|
areaStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0,
|
color: 'rgba(206,145,120, 1)',
|
|
}, {
|
offset: 1,
|
color: 'rgba(206,145,120, 1)',
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
},
|
}
|
},
|
lineStyle: {
|
color: "rgb(214,214,214)",
|
width: 2
|
},
|
},
|
{
|
name: "当前水位",
|
type: "custom",
|
renderItem: function(params, api) {
|
polyPoints.push(api.coord([api.value(0), api.value(1)]))
|
var start = api.coord([0, chartdata.waterLevel])
|
|
return {
|
type: 'group',
|
children: [{
|
type: 'polygon',
|
shape: {
|
points: echarts.graphic.clipPointsByRect(
|
polyPoints, {
|
x: params.coordSys.x,
|
y: params.coordSys.y,
|
width: params.coordSys.width,
|
height: params.coordSys.height
|
})
|
},
|
style: api.style({
|
fill: "rgb(58,138,122)",
|
stroke: 'transparent'
|
})
|
}, {
|
type: 'text',
|
style: {
|
text: '实测水位 ' + chartdata.waterLevel + "m▼",
|
x: start[0] + 10,
|
y: start[1] - 14,
|
fill: '#368AE6'
|
}
|
}]
|
}
|
},
|
data: [
|
[0, chartdata.damBotoomHeight],
|
[waterWidth, chartdata.waterLevel],
|
[0, chartdata.waterLevel],
|
],
|
z: 10
|
},
|
{
|
name: "测压管轮廓",
|
type: "custom",
|
renderItem: function(params, api) {
|
// var categoryIndex = api.value(0);
|
var start = api.coord([api.value(0), api.value(1)])
|
var end = api.coord([api.value(2), api.value(3)])
|
var height = api.size([0, 1])[1] * (api.value(3) - api.value(1))
|
|
var rectShape = echarts.graphic.clipRectByRect({
|
x: start[0],
|
y: end[1],
|
width: end[0] - start[0],
|
height: height
|
}, {
|
x: params.coordSys.x,
|
y: params.coordSys.y,
|
width: params.coordSys.width,
|
height: params.coordSys.height
|
})
|
|
return {
|
type: 'group',
|
children: [{
|
type: 'rect',
|
shape: rectShape,
|
style: api.style({
|
fill: 'transparent',
|
stroke: '#928E85'
|
})
|
}, {
|
type: 'text',
|
style: {
|
text: pressureName[params.dataIndex],
|
fontSize: 16,
|
x: end[0] - 18,
|
y: end[1] - 18
|
}
|
}]
|
}
|
},
|
encode: {
|
x: [1, 3], // 表示维度 3、1 映射到 x 轴。
|
y: [2, 4] // 表示维度 2、4 映射到 y 轴。
|
},
|
data: piezometer_fracture,
|
z: 12
|
},
|
{
|
name: "渗压",
|
type: "custom",
|
renderItem: function(params, api) {
|
// var categoryIndex = api.value(0);
|
var start = api.coord([api.value(0), api.value(1)])
|
var end = api.coord([api.value(2), api.value(3)])
|
var height = api.size([0, 1])[1] * (api.value(3) - api.value(1))
|
|
var rectShape = echarts.graphic.clipRectByRect({
|
x: start[0],
|
y: end[1],
|
width: end[0] - start[0],
|
height: height
|
}, {
|
x: params.coordSys.x,
|
y: params.coordSys.y,
|
width: params.coordSys.width,
|
height: params.coordSys.height
|
})
|
|
return {
|
type: 'group',
|
children: [{
|
type: 'rect',
|
shape: rectShape,
|
style: api.style({
|
fill: "rgb(37,183,239)",
|
stroke: 'transparent'
|
})
|
}, {
|
type: 'text',
|
style: {
|
text: api.value(3) + 'm',
|
fontSize: 16,
|
x: start[0] + 16,
|
y: end[1] - 14
|
}
|
}]
|
}
|
},
|
encode: {
|
x: [1, 3], // 表示维度 3、1 映射到 x 轴。
|
y: [2, 4] // 表示维度 2、4 映射到 y 轴。
|
},
|
data: piezometer_fracture.map((item, index) => {
|
return [item[0], item[1], item[2], pressureData[index]]
|
}).filter((item, index) => pressureData[index] != ''),
|
z: 13
|
},
|
{
|
name: "浸润线",
|
type: 'line',
|
symbol: "none",
|
smooth: 0.2,
|
connectNulls: true,
|
data: [
|
[waterWidth, chartdata.waterLevel],
|
[(damX[6] - damX[5]) / 2.4 + damX[5] - 1.6, chartdata.waterLevel],
|
...piezometer_fracture.map((item, index) => {
|
return [item[0], pressureData[index]]
|
}).filter((item, index) => pressureData[index] != ''),
|
[damX[damX.length - 1], chartdata.damBotoomHeight],
|
],
|
lineStyle: {
|
color: "rgb(9,127,254)",
|
type: "solid",
|
// type: 'smooth',
|
z: 14
|
},
|
},
|
{
|
name: '校核洪水位one',
|
type: 'line',
|
symbol: 'arrow',
|
data: [
|
[0, data[0].chec_fl_stag],
|
[checkWaterWidth / 2, data[0].chec_fl_stag],
|
[checkWaterWidth, data[0].chec_fl_stag],
|
],
|
label: {
|
show: true,
|
position: 'top',
|
fontSize: 16,
|
formatter(params) {
|
if (params.dataIndex == 1) {
|
return `校核洪水位 ${data[0].chec_fl_stag}m▼`
|
} else {
|
return ''
|
}
|
}
|
},
|
lineStyle: {
|
type: 'dashed'
|
},
|
itemStyle: {
|
normal: {
|
color: 'red',
|
}
|
}
|
},
|
{
|
name: "校核洪水位",
|
type: 'line',
|
symbol: "none",
|
smooth: 0,
|
data: [
|
[checkWaterWidth, data[0].chec_fl_stag],
|
[(damX[6] - damX[5]) / 2.4 + damX[5], data[0].chec_fl_stag],
|
[damX[damX.length - 1], chartdata.damBotoomHeight],
|
],
|
lineStyle: {
|
color: "rgb(250, 0, 0)",
|
type: "solid"
|
},
|
z: 14,
|
}
|
]
|
}
|
|
this.echartsLoading = false
|
this.$nextTick(() => {
|
this.$refs.jrxtEchart.initOption(this.jrxtOption)
|
})
|
|
|
},
|
|
// 更新传入echarts的数据
|
updataEchartsData(introductionData) {
|
const that = this
|
|
let echartToLoad = introductionData.pressData.sort((a, b) => a.ofax - b.ofax)
|
|
// const baseHeight = echartToLoad[0].tb_dam_top_elevation - Math.min(...echartToLoad.map(item => item
|
// .tbbtel), echartToLoad[0].dam_height)
|
|
const baseHeight = Math.min(...echartToLoad.map(item => item.tbbtel - 4), (echartToLoad[0]
|
.tb_dam_top_elevation - echartToLoad[0].dam_height))
|
|
return [
|
echartToLoad,
|
{
|
damTopHeight: Math.ceil(echartToLoad[0].tb_dam_top_elevation),
|
damBotoomHeight: baseHeight,
|
waterLevel: echartToLoad[0].rz,
|
},
|
[0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, ],
|
[
|
baseHeight,
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 4),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 3),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 2),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 1),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 1),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 1),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 2),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 3),
|
Math.ceil(echartToLoad[0].tb_dam_top_elevation) - ((Math.ceil(echartToLoad[0]
|
.tb_dam_top_elevation) - baseHeight) / 5 * 4),
|
baseHeight
|
],
|
180,
|
that.calculableRightAngle((echartToLoad[0].rz - baseHeight), that.calculatingAngle(75,
|
echartToLoad[0].tb_dam_top_elevation - baseHeight)),
|
that.calculableRightAngle((echartToLoad[0].chec_fl_stag - baseHeight), that.calculatingAngle(75,
|
echartToLoad[0].tb_dam_top_elevation - baseHeight))
|
]
|
},
|
|
// 已知a角b边，求a边
|
calculableRightAngle(Blength, angle) {
|
let b_float = parseFloat(Blength)
|
|
let a_angle_float = parseFloat(angle)
|
|
let Alength = b_float * Math.tan(a_angle_float * Math.PI / 180)
|
|
return Alength
|
},
|
|
calculatingAngle(a, b) {
|
var a2 = Math.pow(a, 2)
|
var b2 = Math.pow(b, 2)
|
|
let c_float = Math.sqrt(a2 + b2)
|
|
return Math.asin(a / c_float) * 180 / Math.PI
|
},
|
|
// 已知角A, a边b边, 角b, b边, 求 角b的a边
|
calculateAngleTwoBLength(AngleOneA, AngleOneB, AngleTwoB, BHeight) {
|
const AngleOneA2 = Math.pow(AngleOneA, 2)
|
const AngleOneB2 = Math.pow(AngleOneB, 2)
|
|
let c_float = Math.sqrt(AngleOneA2 + AngleOneB2)
|
|
const AngleOnea = Math.asin(AngleOneA / c_float) * 180 / Math.PI
|
|
const AngleTwoA = AngleTwoB * Math.tan(AngleOnea * Math.PI / 180)
|
|
return AngleTwoA + BHeight
|
},
|
|
//按钮点击
|
btnClick(index) {
|
this.btnSelectValue = index
|
|
if (index == 0) {
|
this.initDateTime()
|
this.getData(this.query)
|
} else if (index == 1) {
|
let startTimestamp = new Date().getTime() - 1000 * 60 * 60 * 24 * 365
|
|
let startTime = convertTimestampToDate(new Date().setTime(startTimestamp), "yyyy-MM-dd")
|
let endTime = convertTimestampToDate(new Date(), "yyyy-MM-dd")
|
this.dateRange = [startTime, endTime]
|
this.query.start_tm = startTime
|
this.query.end_tm = endTime
|
this.getData(this.query)
|
}
|
|
},
|
|
//图类型选择
|
picBtnClick(value) {
|
this.picValue = value
|
},
|
|
//断面选择
|
flagSelectSubmit(value) {
|
console.log(value)
|
this.flagIndex = value.index
|
this.flagValue = value.value
|
this.flagVisible = !this.flagVisible
|
|
this.jrxtQuery.flag = this.flagValue
|
|
this.getDsmSpgSpprmpList(this.jrxtQuery)
|
|
},
|
|
//预测模型选择
|
predictSelectSubmit(value) {
|
this.predictIndex = value.index
|
this.predictValue = value.value
|
this.predictVisible = !this.predictVisible
|
this.getData(this.query)
|
},
|
|
//选择日期范围
|
dateChange(value) {
|
this.query.start_tm = value[0]
|
this.query.end_tm = value[1]
|
this.getData(this.query)
|
},
|
|
dateJrxtChange(value) {
|
this.jrxtQuery.start_tm = value[0]
|
this.jrxtQuery.end_tm = value[1]
|
this.getDsmSpgSpprmpList(this.jrxtQuery)
|
},
|
|
//初始化日期数据
|
initDateTime() {
|
let startTimestamp = new Date().getTime() - 1000 * 60 * 60 * 24 * 30
|
let startTime1Stamp = new Date().getTime() - 1000 * 60 * 60 * 24 * 3 * 30
|
|
let startTime = convertTimestampToDate(new Date().setTime(startTimestamp), "yyyy-MM-dd")
|
let startTime1 = convertTimestampToDate(new Date().setTime(startTime1Stamp), "yyyy-MM-dd")
|
let endTime = convertTimestampToDate(new Date(), "yyyy-MM-dd")
|
|
|
|
this.dateRange = [startTime, endTime]
|
this.dateJrxtRange = [startTime1, endTime]
|
|
this.query.start_tm = startTime
|
this.query.end_tm = endTime
|
|
this.jrxtQuery.start_tm = startTime1
|
this.jrxtQuery.end_tm = endTime
|
},
|
|
//初始化option
|
initOption(echartsData) {
|
this.option = {
|
color: echartsData.color,
|
tooltip: { //提示框组件
|
trigger: "axis",
|
backgroundColor: '#fff',
|
confine: true,
|
|
textStyle: {
|
color: '#000',
|
fontStyle: 'normal',
|
fontFamily: '微软雅黑',
|
fontSize: 16
|
}
|
},
|
grid: echartsData.grid,
|
dataZoom: echartsData.dataZoom,
|
legend: {
|
data: echartsData.legendData,
|
selected: echartsData.selectedData ? echartsData.selectedData : {},
|
...echartsData.lengthPosition
|
},
|
xAxis: {
|
data: echartsData.xAxisData,
|
axisLabel: {
|
show: true,
|
textStyle: {
|
// color: 'white', //X轴文字颜色
|
fontSize: 16
|
},
|
// interval: 0,
|
rotate: 0,
|
offset: 30,
|
formatter: echartsData.xFormatter
|
},
|
onZero: false,
|
},
|
yAxis: echartsData.yAxisData,
|
series: echartsData.seriesData,
|
}
|
|
this.echartsLoading = false
|
|
},
|
|
//获取展示数据
|
async getData(params) {
|
this.echartsLoading = true
|
|
const that = this
|
|
this.stationData = []
|
this.echartData = []
|
|
//判断两日期是否超过一年
|
const dtObj = this.isTwoDateOverYear(params.start_tm, params.end_tm)
|
|
const {
|
data: baseResData
|
} = await getSYBaseDetails({
|
res_cd: that.res_cd,
|
...params,
|
...dtObj
|
})
|
|
|
console.log("中台数据：", baseResData)
|
|
const cdSourceData = {}
|
|
//处理中台数据
|
baseResData.press.forEach(item => {
|
|
if (!cdSourceData[item.cd]) {
|
cdSourceData[item.cd] = item.cd_nm
|
}
|
//控制两位小数
|
if (item.press_val != null) item.press_val = item.press_val.toFixed(2)
|
|
let stationFlag = that.stationData.some(i => i == item.cd_nm)
|
|
if (stationFlag != true) {
|
that.stationData.push(item.cd_nm)
|
|
that.tableHeader.push({
|
cd: item.cd_nm,
|
label: item.cd_nm,
|
val: 'station' + item.cd_nm,
|
})
|
}
|
})
|
|
let echartArr = []
|
|
baseResData.dt_list.forEach(item => {
|
let obj = {}
|
|
obj.tm = dtObj.dt_flag == "month" ? item.substr(0, 7) : item
|
|
let curRz = baseResData.rz.find(it => item == it.dt)
|
|
if (curRz && curRz != undefined) {
|
obj.rz = curRz.rz
|
} else {
|
obj.rz = ''
|
}
|
|
let curRain = baseResData.rain.find(it => item == it.dt)
|
|
if (curRain && curRain != undefined) {
|
obj.drp = curRain.drp
|
} else {
|
obj.drp = ''
|
}
|
|
that.stationData.forEach(it => {
|
let wayData = baseResData.press.find(i => i.dt == item && i.cd_nm == it)
|
|
if (wayData && wayData != undefined) {
|
obj['station' + it] = wayData.press_val
|
} else {
|
obj['station' + it] = ''
|
}
|
})
|
|
echartArr.push({
|
...obj
|
})
|
})
|
|
//处理预测数据
|
that.futureData = []
|
//是否选择预测
|
if (that.predictValue != "") {
|
|
|
const res = await getDbFutureData({
|
resCd: that.res_cd,
|
type: 1,
|
predictFlag: that.predictValue
|
})
|
console.log("预测数据：", res)
|
|
|
//Arima预报数据处理
|
if (that.predictValue == 'Arima') {
|
|
if (res.code != 200) return
|
//删除当天的时间数据
|
echartArr.splice(echartArr.length - 1, 1)
|
const lastData = echartArr[echartArr.length - 1]
|
res.data.forEach(v => {
|
const preList = []
|
v.predicts = v.predicts.map(v => JSON.parse(v))
|
//根据时间处理数据
|
v.predicts.reduce((prev, current) => {
|
//判断当前是否为空数组 是空数组直接添加比较项
|
if (prev.length > 0) {
|
//判断当前和第二个日期是否相等
|
const flag = prev[0].substring(0, 10) == current[0].substring(0,
|
10)
|
if (flag) {
|
const index = preList.findIndex(v => v[0].substring(0, 10) ==
|
current[0].substring(0, 10))
|
preList[index] = current
|
} else {
|
preList.push(current)
|
}
|
return current
|
} else {
|
preList.push(current)
|
}
|
return current
|
}, [])
|
v.predicts = preList.map(v => {
|
v[0] = v[0].substring(0, 10)
|
return v
|
}).filter(itm => {
|
const itmDate = new Date(itm[0])
|
const yesterday = new Date()
|
yesterday.setDate(yesterday.getDate() - 1)
|
return itmDate > yesterday
|
})
|
})
|
const list = res.data.map(v => {
|
return {
|
pointId: v.pointId,
|
predicts: v.predicts
|
}
|
})
|
const expectList = that.expectData(list, cdSourceData)
|
that.futureData = []
|
expectList.forEach(v => {
|
const obj = {}
|
Object.keys(v).forEach(k => {
|
if (k != 'tm') {
|
obj[k] = v[k]
|
}
|
})
|
that.futureData.push(obj)
|
})
|
const obj = {}
|
Object.keys(lastData).forEach(v => {
|
if (v.includes("station")) {
|
obj[v] = lastData[v]
|
}
|
})
|
const lastTimeList = [{}]
|
Object.keys(obj).forEach(v => {
|
const cdNum = v.replace("station", "")
|
lastTimeList[0][cdNum] = obj[v]
|
})
|
that.futureData = [...lastTimeList, ...that.futureData]
|
echartArr.push(...(expectList.map(v => {
|
return {
|
tm: v.tm
|
}
|
})))
|
} else {
|
if (res.code != 200) return
|
//删除当天的时间数据
|
echartArr.splice(echartArr.length - 1, 1)
|
const lastData = echartArr[echartArr.length - 1]
|
res.data.forEach(v => {
|
|
v.preWaterList = JSON.parse(v.preWaterList)
|
v.predictList = JSON.parse(v.predictList)
|
})
|
const expectList = that.hstExpectData(res.data, cdSourceData)
|
that.futureData = []
|
expectList.forEach(v => {
|
const obj = {}
|
Object.keys(v).forEach(k => {
|
if (k != 'tm') {
|
obj[k] = v[k]
|
}
|
})
|
that.futureData.push(obj)
|
})
|
const obj = {}
|
Object.keys(lastData).forEach(v => {
|
if (v.includes("station")) {
|
obj[v] = lastData[v]
|
}
|
})
|
const lastTimeList = [{}]
|
Object.keys(obj).forEach(v => {
|
const cdNum = v.replace("station", "")
|
lastTimeList[0][cdNum] = obj[v]
|
})
|
that.futureData = [...lastTimeList, ...that.futureData]
|
echartArr.push(...(expectList.map(v => {
|
return {
|
tm: v.tm
|
}
|
})))
|
}
|
}
|
|
console.log("echart数据：", echartArr)
|
that.echartData = echartArr
|
|
},
|
|
//判断两日期是否相隔超过一年
|
isTwoDateOverYear(startTime, endTime) {
|
|
let dtObj = {}
|
var begin = new Date(startTime).getTime();
|
var end = new Date(endTime).getTime();
|
var day = (end - begin) / (24 * 60 * 60 * 1000);
|
|
if (day >= 365) {
|
//超过一年，返回月数据
|
dtObj.dt_flag = "month"
|
|
return dtObj;
|
} else {
|
return dtObj;
|
}
|
},
|
|
//Arima预报方法处理
|
expectData(list, cdSourceData) {
|
const deepList = JSON.parse(JSON.stringify(list))
|
const expectList = []
|
// 找到最大的预测数量
|
const maxPredicts = Math.max(...deepList.map(item => item.predicts.length))
|
// 遍历预测的数量
|
for (let i = 0; i < maxPredicts; i++) {
|
const predictItem = {}
|
|
// 遍历原始数组
|
for (let j = 0; j < deepList.length; j++) {
|
const point = deepList[j]
|
const predict = point.predicts[i]
|
|
if (predict) {
|
const stationKey = `${cdSourceData[point.pointId]}`
|
const tmKey = `tm`
|
|
// 添加预测值和日期到新的对象中
|
predictItem[stationKey] = predict[1]
|
predictItem[tmKey] = predict[0]
|
}
|
}
|
|
// 将新的对象添加到期望的数组中
|
expectList.push(predictItem)
|
}
|
return expectList
|
},
|
//Hst预报数据处理
|
hstExpectData(data, cdSourceData) {
|
const deepList = JSON.parse(JSON.stringify(data))
|
const expectList = []
|
let list = []
|
deepList.forEach(v => {
|
const tm = v.preWaterList.map(v => v.time)
|
const predictList = v.predictList.map((cl, index) => {
|
let clVlue = cl.toFixed(2)
|
return {
|
tm: tm[index],
|
value: clVlue
|
}
|
})
|
const obj = {
|
label: cdSourceData[v.pointId],
|
predictList
|
}
|
expectList.push(obj)
|
})
|
const max = Math.max(...(expectList.map(v => v.predictList.length)))
|
for (let i = 0; i < max; i++) {
|
const predictItem = {}
|
|
// 遍历处理完数据数组
|
for (let j = 0; j < expectList.length; j++) {
|
const point = expectList[j]
|
const predict = point.predictList[i]
|
if (predict) {
|
const stationKey = point.label
|
const tmKey = `tm`
|
// 添加预测值和日期到新的对象中
|
predictItem[stationKey] = predict.value
|
predictItem[tmKey] = predict.tm
|
}
|
}
|
|
// 将新的对象添加到期望的数组中
|
list.push(predictItem)
|
}
|
list.reduce((prev, next, index) => {
|
if (prev.tm == next.tm) {
|
prev.tm = ""
|
return next
|
}
|
return next
|
}, {
|
tm: ""
|
})
|
list = list.filter(v => v.tm)
|
return list
|
},
|
|
getAY(data, yMinValue, yMaxValue) {
|
const that = this
|
|
let color, legendData, xAxisData, yAxisData, seriesData, selectedData, dataZoom = [{
|
type: 'slider',
|
show: true,
|
height: 20,
|
bottom: '0%',
|
start: 0,
|
end: 100,
|
},
|
{
|
type: 'inside',
|
},
|
],
|
xFormatter = (e) => e,
|
grid = {
|
top: '25%',
|
left: '8%',
|
right: '6%',
|
bottom: '6%',
|
containLabel: true,
|
},
|
lengthPosition = {
|
top: 10,
|
left: 88
|
}
|
|
if (this.type == 'sl') {
|
color = ['#F49923', '#74A5D6', '#99E12A']
|
|
legendData = ['库水位']
|
selectedData = {
|
'库水位': true,
|
}
|
|
xAxisData = data.map(item => item.tm)
|
|
let rzMax = Math.max(...data.map(item => item.rz).filter(item => item != '' && item != null))
|
let rzMin = Math.min(...data.map(item => item.rz).filter(item => item != '' && item != null))
|
|
yAxisData = [{
|
type: 'value',
|
name: '渗流量(L/s)',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
},
|
{
|
type: 'value',
|
name: '库水位(m)',
|
min: Math.floor(rzMin - (rzMax - rzMin) / 10),
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
}
|
]
|
|
seriesData = [{
|
name: '库水位',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(item => item.rz),
|
yAxisIndex: 1,
|
}]
|
|
|
that.tableHeader.forEach(item => {
|
if (item.val in data[0]) {
|
legendData.push(item.label)
|
if (that.showStation == "") {
|
selectedData[item.label] = true
|
} else {
|
if (item.label == '测点' + that.showStation) {
|
selectedData[item.label] = true
|
} else {
|
selectedData[item.label] = false
|
}
|
}
|
seriesData.push({
|
name: item.label,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(it => it[item.val]),
|
})
|
}
|
})
|
} else if (this.type == 'sy') {
|
color = ['#02A6EF', '#FF1A00', '#74A5D6', '#99E12A', '#27FF7C', '#1A86FF', '#D6FF1C', '#582CFF',
|
'#9D21FF', '#F04605', '#FFE3A2', '#A0EAFF', '#FF8E8E'
|
]
|
|
legendData = ['雨量', '库水位']
|
selectedData = {
|
'雨量': true,
|
'库水位': true,
|
}
|
|
let drpMax = data.concat([]).sort((a, b) => b.drp - a.drp)[0].drp * 2
|
|
xAxisData = data.map(item => item.tm)
|
|
let rzMinArray = data.map(item => item.rz)
|
|
that.tableHeader.forEach(item => {
|
if (item.val in data[0]) {
|
rzMinArray.push(...data.map(it => it[item.val]))
|
}
|
})
|
|
if (this.futureData.length > 0) {
|
const expectList = Object.keys(this.futureData[0]).map(key => {
|
const nullData = []
|
//data长度-预测数据长度就是 不包含预测数据的长度
|
for (let i = 0; i < data.length - this.futureData.length; i++) {
|
nullData.unshift(null)
|
}
|
return {
|
label: key,
|
data: [...nullData, ...this.futureData.map((item) => item[key])],
|
}
|
})
|
expectList.forEach(item => {
|
rzMinArray.push(...item.data)
|
})
|
}
|
|
let rzMax = Math.max(...rzMinArray.filter(item => item != '' && item != null))
|
let rzMin = Math.min(...rzMinArray.filter(item => item != '' && item != null))
|
|
yAxisData = [{
|
type: 'value',
|
name: '水位(m)',
|
min: Math.floor(rzMin - (rzMax - rzMin) / 10),
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
},
|
{
|
type: 'value',
|
name: '雨量(mm)',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
nameLocation: 'start',
|
inverse: true,
|
max: drpMax,
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
}
|
]
|
|
seriesData = [{
|
name: '雨量',
|
type: 'bar',
|
barWidth: '30%',
|
data: data.map(item => item.drp),
|
barMaxWidth: 2,
|
yAxisIndex: 1,
|
},
|
{
|
name: '库水位',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(item => item.rz),
|
}
|
]
|
|
that.tableHeader.forEach(item => {
|
if (item.val in data[0]) {
|
legendData.push(item.label)
|
if (that.showStation == "") {
|
selectedData[item.label] = true
|
} else {
|
if (item.label == 'UPD' + that.showStation) {
|
selectedData[item.label] = true
|
} else {
|
selectedData[item.label] = false
|
}
|
}
|
seriesData.push({
|
name: item.label,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(it => it[item.val]),
|
})
|
}
|
})
|
|
if (this.futureData.length > 0) {
|
const expectList = Object.keys(this.futureData[0]).map(key => {
|
const nullData = []
|
//data长度-预测数据长度就是 不包含预测数据的长度
|
for (let i = 0; i < data.length - this.futureData.length; i++) {
|
nullData.unshift(null)
|
}
|
return {
|
label: key,
|
data: [...nullData, ...this.futureData.map((item) => item[key])],
|
}
|
})
|
expectList.forEach(item => {
|
const index = seriesData.findIndex(v => v.name == item.label)
|
const label = `预测${item.label}`
|
legendData.push(label)
|
if (that.showStation == "") {
|
selectedData[label] = true
|
} else {
|
if (label == '预测UPD' + that.showStation) {
|
selectedData[label] = true
|
} else {
|
selectedData[label] = false
|
}
|
}
|
seriesData.push({
|
name: label,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
data: item.data,
|
connectNulls: true,
|
lineStyle: {
|
normal: {
|
color: color[index],
|
width: 2,
|
type: "dashed"
|
}
|
},
|
itemStyle: {
|
color: color[index]
|
}
|
})
|
})
|
}
|
|
} else if (this.type == 'bx') {
|
color = ['#F49923', '#74A5D6', '#99E12A', '#27FF7C', '#1A86FF', '#D6FF1C', '#582CFF', '#9D21FF',
|
'#F04605', '#FFE3A2', '#A0EAFF', '#FF8E8E'
|
]
|
|
if (that.dimensionality == 1) {
|
legendData = ['库水位']
|
selectedData = {
|
'库水位': true
|
}
|
|
xAxisData = data.map(item => item.tm)
|
|
let rzMax = Math.max(...data.map(item => item.rz).filter(item => item != '' && item != null))
|
let rzMin = Math.min(...data.map(item => item.rz).filter(item => item != '' && item != null))
|
|
yAxisData = [{
|
type: 'value',
|
name: that.displacementType == '水平位移' ? that.direction + '水平位移(mm)' : '垂直位移(mm)',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
},
|
{
|
type: 'value',
|
name: '库水位(m)',
|
min: Math.floor(rzMin - (rzMax - rzMin) / 10),
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
}
|
]
|
|
seriesData = [{
|
name: '库水位',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(item => item.rz),
|
yAxisIndex: 1,
|
}]
|
|
if (that.displacementType == '水平位移') {
|
if (that.direction == '上下游') {
|
that.tableHeader.forEach(item => {
|
if (data[0][item.x] || data[0][item.x] === 0) {
|
legendData.push(item.label)
|
|
if (that.showStation == "") {
|
selectedData[item.label] = true
|
} else {
|
if (item.label == 'GN' + that.showStation) {
|
selectedData[item.label] = true
|
} else {
|
selectedData[item.label] = false
|
}
|
}
|
seriesData.push({
|
name: item.label,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(it => it[item.x]),
|
})
|
}
|
})
|
const xList = this.futureData.filter(v => v.type == '3')
|
if (xList.length > 0) {
|
xList[0].list.forEach(item => {
|
const index = seriesData.findIndex(v => v.name == item.label)
|
const label = `预测${item.label}`
|
const xData = item.data.map(v => v[1])
|
const length = data.length - xData.length
|
legendData.push(label)
|
if (that.showStation == "") {
|
selectedData[label] = true
|
} else {
|
if (label == '预测UPD' + that.showStation) {
|
selectedData[label] = true
|
} else {
|
selectedData[label] = false
|
}
|
}
|
for (var i = 0; i < length; i++) {
|
xData.unshift(null)
|
}
|
seriesData.push({
|
name: label,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
data: xData,
|
color: color[index],
|
connectNulls: true,
|
lineStyle: {
|
normal: {
|
color: color[index],
|
width: 2,
|
type: "dashed"
|
}
|
},
|
})
|
})
|
}
|
} else {
|
that.tableHeader.forEach(item => {
|
if (data[0][item.y] || data[0][item.y] === 0) {
|
legendData.push(item.label)
|
if (that.showStation == "") {
|
selectedData[item.label] = true
|
} else {
|
if (item.label == 'GN' + that.showStation) {
|
selectedData[item.label] = true
|
} else {
|
selectedData[item.label] = false
|
}
|
}
|
seriesData.push({
|
name: item.label,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(it => it[item.y]),
|
})
|
}
|
})
|
const yList = this.futureData.filter(v => v.type == '4')
|
if (yList.length > 0) {
|
yList[0].list.forEach(item => {
|
const index = seriesData.findIndex(v => v.name == item.label)
|
const xData = item.data.map(v => v[1])
|
const length = data.length - xData.length
|
for (var i = 0; i < length; i++) {
|
xData.unshift(null)
|
}
|
seriesData.push({
|
name: `预测${item.label}`,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
data: xData,
|
color: color[index],
|
connectNulls: true,
|
lineStyle: {
|
normal: {
|
color: color[index],
|
width: 2,
|
type: "dashed"
|
}
|
},
|
})
|
})
|
}
|
}
|
} else {
|
that.tableHeader.forEach(item => {
|
if (data[0][item.u] || data[0][item.u] === 0) {
|
legendData.push(item.label)
|
if (that.showStation == "") {
|
selectedData[item.label] = true
|
} else {
|
if (item.label == 'GN' + that.showStation) {
|
selectedData[item.label] = true
|
} else {
|
selectedData[item.label] = false
|
}
|
}
|
seriesData.push({
|
name: item.label,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(it => it[item.u]),
|
})
|
}
|
})
|
const zList = this.futureData.filter(v => v.type == '5')
|
if (zList.length > 0) {
|
zList[0].list.forEach(item => {
|
const index = seriesData.findIndex(v => v.name == item.label)
|
const xData = item.data.map(v => v[1])
|
const length = data.length - xData.length
|
for (var i = 0; i < length; i++) {
|
xData.unshift(null)
|
}
|
seriesData.push({
|
name: `预测${item.label}`,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
data: xData,
|
color: color[index],
|
connectNulls: true,
|
lineStyle: {
|
normal: {
|
color: color[index],
|
width: 2,
|
type: "dashed"
|
}
|
},
|
})
|
})
|
}
|
}
|
} else {
|
legendData = []
|
|
xAxisData = that.tableHeader.map(item => item.label)
|
|
yAxisData = [{
|
type: 'value',
|
name: that.displacementType == '水平位移' ? that.direction + '水平位移(mm)' : '垂直位移(mm)',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
}]
|
|
seriesData = []
|
|
if (that.displacementType == '水平位移') {
|
if (that.direction == '上下游') {
|
data.forEach(item => {
|
legendData.push(item.tm)
|
|
let arr = []
|
that.tableHeader.forEach(i => {
|
arr.push(item[i.x])
|
})
|
|
seriesData.push({
|
name: item.tm,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: arr,
|
})
|
})
|
} else {
|
data.forEach(item => {
|
legendData.push(item.tm)
|
|
let arr = []
|
that.tableHeader.forEach(i => {
|
arr.push(item[i.y])
|
})
|
|
seriesData.push({
|
name: item.tm,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: arr,
|
})
|
})
|
}
|
} else {
|
data.forEach(item => {
|
legendData.push(item.tm)
|
|
let arr = []
|
that.tableHeader.forEach(i => {
|
arr.push(item[i.u])
|
})
|
|
seriesData.push({
|
name: item.tm,
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: arr,
|
})
|
})
|
}
|
}
|
} else if (this.type == 'default') {
|
color = ['#02A6EF', '#F49923', '#74A5D6', '#99E12A', '#27FF7C', '#1A86FF', '#D6FF1C', '#582CFF',
|
'#9D21FF', '#F04605', '#FFE3A2', '#A0EAFF', '#FF8E8E'
|
]
|
|
grid = {
|
top: '12%',
|
left: '2%',
|
right: '5%',
|
bottom: '2%',
|
containLabel: true,
|
}
|
|
let drpMax = data.concat([]).sort((a, b) => b.drp - a.drp)[0].drp * 2
|
|
legendData = ['雨量', '库水位']
|
lengthPosition = {}
|
selectedData = {
|
'雨量': true,
|
'库水位': true,
|
}
|
|
xAxisData = data.map(item => item.tm)
|
|
yAxisData = [{
|
type: 'value',
|
name: '库水位(m)',
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
},
|
min: yMinValue,
|
max: yMaxValue
|
},
|
{
|
type: 'value',
|
name: '雨量(mm)',
|
splitLine: {
|
show: false,
|
lineStyle: {
|
type: 'dashed'
|
}
|
},
|
nameLocation: 'start',
|
inverse: true,
|
max: drpMax,
|
axisTick: {
|
show: true,
|
},
|
axisLine: {
|
show: true,
|
}
|
}
|
]
|
|
seriesData = [{
|
name: '雨量',
|
type: 'bar',
|
barWidth: '30%',
|
data: data.map(item => item.drp),
|
barMaxWidth: 2,
|
yAxisIndex: 1,
|
},
|
{
|
name: '库水位',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
barWidth: '30%',
|
connectNulls: true,
|
data: data.map(item => item.rz),
|
}
|
]
|
|
dataZoom = [{
|
type: 'slider',
|
show: false,
|
height: 20,
|
bottom: '0%',
|
start: 0,
|
end: 100,
|
},
|
{
|
type: 'inside',
|
},
|
]
|
|
xFormatter = (params) => {
|
let arr = params.split(' ')
|
|
if (arr.length > 1) {
|
return arr[0] + '\n' + arr[1]
|
} else {
|
return arr[0]
|
}
|
}
|
}
|
|
return {
|
color,
|
grid,
|
legendData,
|
xAxisData,
|
yAxisData,
|
seriesData,
|
dataZoom,
|
selectedData,
|
xFormatter
|
}
|
},
|
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
|
padding: 10rpx;
|
|
|
|
.card-view {
|
.card-head {
|
|
|
display: flex;
|
|
.title {
|
width: 200rpx;
|
}
|
}
|
|
.card-content {
|
.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;
|
}
|
}
|
|
.btn-group {}
|
}
|
}
|
|
}
|
|
.df {
|
display: flex;
|
}
|
|
.h {
|
min-height: 70rpx;
|
}
|
|
::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>
|
