366 lines
9.4 KiB
Vue
366 lines
9.4 KiB
Vue
<template>
|
|
<!-- 自定义工作台头部 -->
|
|
<NavBar :count="state.count" :title="'工作台'"></NavBar>
|
|
<view
|
|
class="contaner"
|
|
:style="{
|
|
marginTop: navbarRect.height + navbarRect.top + 'px',
|
|
height: navbarRect.safeHeight + 'px',
|
|
}"
|
|
>
|
|
<!-- 筛选条件 -->
|
|
<view class="time-filter">
|
|
<up-text
|
|
v-for="item in timeList"
|
|
:key="item.id"
|
|
:text="item.name"
|
|
:color="`${
|
|
stateNew.filterTimeValue === item.name ? '#00DCEE' : '#999999'
|
|
}`"
|
|
:size="'32rpx'"
|
|
@click="handleFilter(item)"
|
|
></up-text>
|
|
</view>
|
|
<!-- 数据汇总面板 -->
|
|
<view class="summary">
|
|
<view class="panel" v-for="(item, index) in summaryList" :key="index">
|
|
<image
|
|
:src="`${url}/static/pages/${item.imgUrl}`"
|
|
/>
|
|
<view class="box">
|
|
<view class="num">{{ formatMoney(item.num, 2) }}</view>
|
|
<view class="title">{{ item.title }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 其他核心模块 -->
|
|
<view class="core-content">
|
|
<view>
|
|
<text class="title">收货入库</text>
|
|
<up-grid :border="false">
|
|
<up-grid-item
|
|
v-for="(item, index) in stateNew.receiveList"
|
|
:key="index"
|
|
@click="handleClick(item)"
|
|
>
|
|
<up-badge
|
|
max="99"
|
|
:value="item.num"
|
|
:absolute="true"
|
|
:offset="[10, 10]"
|
|
></up-badge>
|
|
<up-image
|
|
:src="`${url}/static/110/home/${item.icon}`"
|
|
width="184rpx"
|
|
height="162rpx"
|
|
></up-image>
|
|
<view class="name">{{ item.title }}</view>
|
|
</up-grid-item>
|
|
</up-grid>
|
|
</view>
|
|
<view style="margin: 30rpx 0rpx">
|
|
<text class="title title-shipment">出货销售</text>
|
|
<up-grid :border="false">
|
|
<up-grid-item
|
|
v-for="(item, index) in stateNew.shipmentList"
|
|
:key="index"
|
|
@click="handleClick(item)"
|
|
>
|
|
<up-badge
|
|
max="99"
|
|
:value="item.num"
|
|
:absolute="true"
|
|
:offset="[10, 10]"
|
|
></up-badge>
|
|
<up-image
|
|
:src="`${url}/static/110/home/${item.icon}`"
|
|
width="184rpx"
|
|
height="162rpx"
|
|
></up-image>
|
|
<view class="name">{{ item.title }}</view>
|
|
</up-grid-item>
|
|
</up-grid>
|
|
</view>
|
|
</view>
|
|
<!-- <up-empty
|
|
v-if="
|
|
!isShowModule(receiveList.concat(shipmentList)) &&
|
|
!isShowModule(appList)
|
|
"
|
|
mode="permission"
|
|
icon="http://cdn.uviewui.com/uview/empty/permission.png"
|
|
:text="'暂无相关权限, 请联系管理员'"
|
|
>
|
|
</up-empty> -->
|
|
</view>
|
|
|
|
<TabBar />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { timeList, homeInitData, url } from "@/utils/data";
|
|
import { useMemberStore } from "@/store/index";
|
|
import {
|
|
MessageApi,
|
|
ProfileApi,
|
|
ReceiveApi,
|
|
ShipmentApi,
|
|
} from "@/services/index";
|
|
import { formatMoney } from "@/utils";
|
|
import { onBackPress, onShow } from "@dcloudio/uni-app";
|
|
import pinia from "@/store";
|
|
import { timeRange } from "@/utils";
|
|
const store = useMemberStore(pinia);
|
|
const navbarRect = reactive({
|
|
height: 42,
|
|
top: 48,
|
|
safeHeight: 500,
|
|
});
|
|
|
|
const getSafeHeight = () => {
|
|
// #ifdef APP-PLUS || MP-WEIXIN
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
navbarRect.safeHeight =
|
|
res.windowHeight - 50 - navbarRect.top - navbarRect.height;
|
|
},
|
|
});
|
|
// #endif
|
|
};
|
|
|
|
const stateNew = reactive({
|
|
filterTimeValue: "本月",
|
|
receiveList: homeInitData.receiveList,
|
|
shipmentList: homeInitData.shipmentList,
|
|
startTime: timeRange(3).startTime + " 00:00:00",
|
|
endTime: timeRange(3).endTime + " 23:59:59",
|
|
});
|
|
const handleFilter = (item: { id: number; name: string }) => {
|
|
stateNew.filterTimeValue = item.name;
|
|
const range = timeRange(item.id);
|
|
stateNew.startTime = range.startTime + " 00:00:00";
|
|
stateNew.endTime = range.endTime + " 23:59:59";
|
|
// 获取数据面板信息
|
|
getSummery();
|
|
};
|
|
|
|
const summaryList = reactive([
|
|
{
|
|
title: "总收货/KG",
|
|
num: 0,
|
|
imgUrl: "01.png",
|
|
},
|
|
{
|
|
title: "收货总支出/元",
|
|
num: 0,
|
|
imgUrl: "02.png",
|
|
},
|
|
{
|
|
title: "总出货/KG",
|
|
num: 0,
|
|
imgUrl: "03.png",
|
|
},
|
|
{
|
|
title: "出货总收入/元",
|
|
num: 0,
|
|
imgUrl: "04.png",
|
|
},
|
|
]);
|
|
const state = reactive({
|
|
count: 0,
|
|
});
|
|
|
|
// H获取数据面板信息
|
|
const getSummery = () => {
|
|
// 收货入库相关信息
|
|
ReceiveApi.countOrderByMonth({
|
|
startTime: stateNew.startTime,
|
|
endTime: stateNew.endTime,
|
|
}).then((res) => {
|
|
if (res.code === 200) {
|
|
const {
|
|
totalReceipt,
|
|
totalExpenditure,
|
|
toBePriced,
|
|
toBeTare,
|
|
audit,
|
|
toBePaid,
|
|
} = res.data;
|
|
summaryList[0].num = totalReceipt;
|
|
summaryList[1].num = totalExpenditure;
|
|
stateNew.receiveList[0].num = toBePriced;
|
|
stateNew.receiveList[1].num = toBeTare;
|
|
stateNew.receiveList[2].num = audit;
|
|
stateNew.receiveList[3].num = toBePaid;
|
|
}
|
|
});
|
|
// 出货相关信息
|
|
ShipmentApi.countOrderByMonth({
|
|
startTime: stateNew.startTime,
|
|
endTime: stateNew.endTime,
|
|
}).then((res) => {
|
|
if (res.code === 200) {
|
|
const {
|
|
totalShipment,
|
|
totalIncome,
|
|
toBeShipped,
|
|
roughWeight,
|
|
shipmentReview,
|
|
toBeSettled,
|
|
} = res.data;
|
|
summaryList[2].num = totalShipment;
|
|
summaryList[3].num = totalIncome;
|
|
stateNew.shipmentList[0].num = toBeShipped;
|
|
stateNew.shipmentList[1].num = roughWeight;
|
|
stateNew.shipmentList[2].num = shipmentReview;
|
|
stateNew.shipmentList[3].num = toBeSettled;
|
|
}
|
|
});
|
|
};
|
|
const init = () => {
|
|
// 消息统计
|
|
MessageApi.getUserNoticeInfoNumVo().then((res: any) => {
|
|
if (res.code === 200) {
|
|
state.count = res.data.unreadNoticeNum;
|
|
}
|
|
});
|
|
// 获取数据面板信息
|
|
getSummery();
|
|
// 重新获取权限
|
|
ProfileApi.getUserInfo().then((res: any) => {
|
|
if (res.code === 200) {
|
|
store.setProfile({ ...res.data, token: store.profile.token });
|
|
}
|
|
});
|
|
};
|
|
const handleClick = (item: any) => {
|
|
uni.navigateTo({
|
|
url: item.path, // 要跳转到的页面路径
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
// #ifdef MP-WEIXIN
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
navbarRect.height = menuButtonInfo.height;
|
|
navbarRect.top = menuButtonInfo.top;
|
|
getSafeHeight();
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
navbarRect.safeHeight = (systemInfo.safeArea as any).height;
|
|
getSafeHeight();
|
|
// #endif
|
|
});
|
|
onShow(() => {
|
|
if (store.profile?.token) {
|
|
init();
|
|
} else {
|
|
// 当应用启动时，检查是否已显示过启动页
|
|
if (Boolean(uni.getStorageSync("hasLaunched"))) {
|
|
// 如果已显示过，不再显示启动页
|
|
uni.reLaunch({
|
|
url: "/pagesLogin/login/index",
|
|
});
|
|
} else {
|
|
// 如果未显示过，标记为已显示，并保存到存储
|
|
uni.setStorageSync("hasLaunched", true);
|
|
uni.reLaunch({ url: "/pagesLaunch/index" });
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.contaner {
|
|
padding: 17rpx;
|
|
/* #ifdef H5 */
|
|
height: calc(100vh - 67px - 70px) !important;
|
|
/* #endif */
|
|
overflow: auto;
|
|
.time-filter {
|
|
display: flex;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16rpx 130rpx;
|
|
> view {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.summary {
|
|
.panel {
|
|
width: 50%;
|
|
display: inline-block;
|
|
height: 155rpx;
|
|
position: relative;
|
|
// background: url('/static/img/01.png');
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.box {
|
|
position: absolute;
|
|
padding: 20rpx 0rpx 0rpx 40rpx;
|
|
margin-top: -155rpx;
|
|
.num {
|
|
font-size: 40rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.title {
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.core-content {
|
|
padding: 22rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
|
border-radius: 13rpx;
|
|
position: relative;
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
padding-left: 20rpx;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
margin-top: 6px;
|
|
margin-left: -20rpx;
|
|
width: 6rpx;
|
|
height: 26rpx;
|
|
background: #22d594;
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
|
border-radius: 3rpx;
|
|
}
|
|
}
|
|
.title-shipment {
|
|
&::before {
|
|
content: "";
|
|
background: #ff782b;
|
|
}
|
|
}
|
|
.name {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
::v-deep.u-grid-item {
|
|
padding: 22rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
::v-deep.u-badge {
|
|
z-index: 999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|