57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<template>
|
|
<view :style="{height:'100vh',overflow:'hidden'}">
|
|
<u-status-bar></u-status-bar>
|
|
<u-navbar
|
|
title="生态流量监控"
|
|
:autoBack="true"
|
|
:titleStyle="{
|
|
fontSize:'18px'
|
|
}"
|
|
:height='44'
|
|
:safeAreaInsetTop=true
|
|
leftIconSize='20'
|
|
leftIconColor='rgb(153, 153, 153)'
|
|
>
|
|
</u-navbar>
|
|
<view class="" style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0;">
|
|
<view style="display: flex;padding: 20px;background-color: #fff;align-items: center;">
|
|
<u--input v-model="start" shape='circle'
|
|
style="background-color: #f0f0f0;height: 30px;text-align: center;" border='none' @focus="show = true;"></u--input>
|
|
-
|
|
<u--input v-model="end" shape='circle'
|
|
style="background-color: #f0f0f0;height:30px;" border='none' @focus="show = true;"></u--input>
|
|
<text style="color: #006cff; margin-left: 10px;">搜索</text>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <u-calendar :show="show" mode="single" @confirm="confirm" @cancel='cancel' @close="show=false"></u-calendar> -->
|
|
<u-datetime-picker :show="show" mode="datetime" @confirm="confirm" @cancel='cancel' @close="show=false" v-modal="stm"></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import moment from 'moment';
|
|
export default {
|
|
data(){
|
|
return{
|
|
show:false,
|
|
start:moment().subtract(1,"weeks").format("YYYY-MM-DD HH"),
|
|
end:moment().format("YYYY-MM-DD HH")
|
|
}
|
|
},
|
|
computed:{
|
|
stm(){
|
|
return moment()
|
|
}
|
|
},
|
|
methods:{
|
|
confirm(e) {
|
|
console.log(e);
|
|
this.start = moment(e.value).format("YYYY-MM-DD HH")
|
|
this.show = false
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
}
|
|
}
|
|
</script> |