133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
|
<view class="sssw-box">
|
|
<view class="time-ranger">
|
|
<uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger" @open="onPickerOpen" hide-second
|
|
:clear-icon="false" rangeSeparator="至"></uni-datetime-picker>
|
|
<view class="select-bar">
|
|
<uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
|
|
</uni-data-select>
|
|
</view>
|
|
</view>
|
|
<view class="realWater-content">
|
|
<qiun-data-charts canvasId="myChart1" type="line" :chartData="chartData.chartData" :echartsApp="true"
|
|
:eopts="chartData.eopts" />
|
|
</view>
|
|
<div class="tableHead">
|
|
<div class="td t1">序号</div>
|
|
<div class="td t2">时间</div>
|
|
<div class="td t3">实时雨量(mm)</div>
|
|
</div>
|
|
<div class="tableBody">
|
|
<div v-for="(item, index) in yllist" class="tableRow">
|
|
<div class="td t1">{{ index + 1 }}</div>
|
|
<div class="td t2">{{ item.tm ? item.tm.slice(0,16) : "" }}</div>
|
|
<div class="td t3">{{ item.drp === null ? '-' : item.drp }}</div>
|
|
</div>
|
|
<div :style="{ height: '80px' }">
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment"
|
|
import waterOptions from './ylOption'
|
|
import { sw } from './mock'
|
|
const stm = moment().subtract(1, 'days').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:00:00");
|
|
const etm = moment().set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:00:00");
|
|
export default {
|
|
props: {
|
|
stcd: String,
|
|
resCode: String,
|
|
},
|
|
data() {
|
|
return {
|
|
tm: [stm, etm],
|
|
list: [],
|
|
value: "",
|
|
chartData: waterOptions(),
|
|
yllist: sw,
|
|
chartOpts: {
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
onPickerOpen() {
|
|
this.chartOpts.tooltip.show = false
|
|
},
|
|
handleRanger(e) {
|
|
this.tm = [...e]
|
|
},
|
|
change(e) {
|
|
this.value = e;
|
|
this.chartOpts.tooltip.show = false
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.sssw-box {
|
|
.time-ranger {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.select-bar {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.realWater-content {
|
|
height: 320px;
|
|
}
|
|
|
|
.tableHead {
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
height: 50px;
|
|
background-color: #e4f2fe;
|
|
display: flex;
|
|
color: #208FEE;
|
|
}
|
|
|
|
.tableBody {
|
|
width: 100%;
|
|
height: calc(100vh - 214px);
|
|
background-color: #f7f7f7; //#ffffff;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.tableRow {
|
|
width: 100%;
|
|
height: 46px;
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.td {
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.t1 {
|
|
width: 25%;
|
|
}
|
|
|
|
.t2 {
|
|
width: 50%;
|
|
}
|
|
|
|
.t3 {
|
|
width: 25%;
|
|
}
|
|
|
|
}
|
|
</style> |