105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar :is-back="false" title="MWMS PDA" :background="background" />
|
||
<!--出入库月报表-->
|
||
<view class="bg-white">
|
||
<view class="rpt-up">
|
||
<view class="rpt-left">
|
||
<view class="rpt-left-title">出入库月报表</view>
|
||
<view class="rpt-left-detail" >查询当月的出入库履历</view>
|
||
</view>
|
||
<view class="rpt-right" @click="openInOutbackdrop">
|
||
<image src="../../static/img/saleRpt.png" ></image>
|
||
</view>
|
||
</view>
|
||
<!--横线-->
|
||
<view style="height:1upx;margin:-40upx 20upx 30upx 20upx;">
|
||
<image style="height: 1upx;width: 100%;" src="../../static/img/split_lin.png"></image>
|
||
</view>
|
||
<view class="rpt-next">
|
||
<view class="rpt-next-date">{{ currentTime }}</view>
|
||
<view class="rpt-next-more">查询报表数据 ></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!--客户分布统计表-->
|
||
<view class="rpt-head bg-white">
|
||
<view class="rpt-up">
|
||
<view class="rpt-left">
|
||
<view class="rpt-left-title">客户分布统计表</view>
|
||
<view class="rpt-left-detail">查询销售发货客户分布图</view>
|
||
</view>
|
||
<view class="rpt-right">
|
||
<image src="../../static/img/custRpt.png"></image>
|
||
</view>
|
||
</view>
|
||
<!--横线-->
|
||
<view style="height:1upx;margin:-40upx 20upx 30upx 20upx;">
|
||
<image style="height: 1upx;width: 100%;" src="../../static/img/split_lin.png"></image>
|
||
</view>
|
||
<view class="rpt-next">
|
||
<view class="rpt-next-date">{{ currentTime }}</view>
|
||
<view class="rpt-next-more">查询报表数据 ></view>
|
||
</view>
|
||
</view>
|
||
|
||
<fuibackdrop :show="show" closable @click="close">
|
||
<view class="rpt-right">
|
||
<image src="../../static/img/saleRpt.png"></image>
|
||
</view>
|
||
</fuibackdrop>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import fuibackdrop from "@/components/firstui/fui-backdrop/fui-backdrop.vue"
|
||
export default {
|
||
components: {
|
||
fuibackdrop
|
||
},
|
||
data() {
|
||
return {
|
||
currentTime: '',
|
||
show: false,
|
||
background: {
|
||
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
||
},
|
||
};
|
||
},
|
||
onReady() {
|
||
this.updateCurrentTime();
|
||
// 每秒更新一次时间
|
||
setInterval(this.updateCurrentTime, 1000);
|
||
},
|
||
methods: {
|
||
updateCurrentTime() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
|
||
const day = String(now.getDate()).padStart(2, '0');
|
||
const hours = String(now.getHours()).padStart(2, '0');
|
||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
//出入库报表遮罩
|
||
openInOutbackdrop() {
|
||
console.log("打开了遮罩")
|
||
this.show = true
|
||
},
|
||
//关闭遮罩通过show进行控制
|
||
close() {
|
||
this.show = false;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("../../css/rpt_list.css");
|
||
|
||
.bg-white {
|
||
background-color: #FFFFFF;
|
||
color: #7c7c7c;
|
||
}
|
||
</style>
|