cbsl-app/pages/simpleResviror/ysqxx/sssw.vue

78 lines
1.7 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="myChart" type="line" :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
</view>
</view>
</template>
<script>
import moment from "moment"
import waterOptions from './swOption'
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(),
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;
}
}
</style>