You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
512 lines
13 KiB
Vue
512 lines
13 KiB
Vue
<template>
|
|
<view class="body">
|
|
<view class="top_head">
|
|
<view class="text_des">
|
|
<text class="month_num">{{ nowTime.month }}</text>
|
|
<text class="month_text">月</text>
|
|
<text class="month_year">{{ nowTime.year }}</text>
|
|
<text class="point">.</text>
|
|
<text class="title">报工报表</text>
|
|
</view>
|
|
<uni-data-select v-if="auth.hasPermi('mes:produce-report-detail:replace')" class="select" v-model="userId" :localdata="userList" placement="top">
|
|
</uni-data-select>
|
|
<view class="top_desc">
|
|
<view>
|
|
<view class="text">上月报工汇总</view>
|
|
<view class="text-gray">总数</view>
|
|
<view class="remaining">{{ lastMonthSum.sumNumber }}</view>
|
|
<view class="row head_block">
|
|
<view class="flex_1">
|
|
<text class="text-gray">合格数</text>
|
|
<text class="text_green">{{ lastMonthSum.totalQualityNumber }}</text>
|
|
</view>
|
|
<view class="flex_1">
|
|
<text class="text-gray">废品数</text>
|
|
<text class="income">{{ lastMonthSum.totalWasteNumber }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="text">本月报工汇总</view>
|
|
<view class="text-gray">总数</view>
|
|
<view class="remaining">{{ thisMonthSum.sumNumber }}</view>
|
|
<view class="row head_block">
|
|
<view class="flex_1">
|
|
<text class="text-gray">合格数</text>
|
|
<text class="text_green">{{ thisMonthSum.totalQualityNumber }}</text>
|
|
</view>
|
|
<view class="flex_1">
|
|
<text class="text-gray">废品数</text>
|
|
<text class="income">{{ thisMonthSum.totalWasteNumber }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<view class="row_block">
|
|
<view class="the_title" style="justify-content: space-between;">
|
|
<view class="left_title">
|
|
<view class="title_icon"></view>
|
|
<text class="margin_stand-samll font-big wide">30天报工数据</text>
|
|
</view>
|
|
<view class="right_btn">
|
|
<view v-for="(item, index) in historyBtn" :key="index" :class="item.state ? 'active_btn' : ''"
|
|
@click="changeHistoryBtn(item.type)">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="charts-box" style="height: 200px;">
|
|
<qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :reshow="delayload"
|
|
:opts="{ xAxis: { itemCount: historyData.length, disableGrid: true, labelCount: 5 }, yAxis: { disableGrid: true, data: [{ disabled: true }] } }"
|
|
:chartData="historyData"/>
|
|
</view>
|
|
</view>
|
|
<view class="row_block">
|
|
<view class="the_title">
|
|
<view class="title_icon"></view>
|
|
<text class="margin_stand-samll font-big wide">最近30天计时列表</text>
|
|
</view>
|
|
<view class="detail_list">
|
|
<view v-for="(item, index) in detailList" :key="index" class="detail_item">
|
|
<view>
|
|
<view class="font-middle">报工日期</view>
|
|
<view class="font-small">{{ item.reportDay }}</view>
|
|
</view>
|
|
<view class="right_content">
|
|
<view class="hour">计时时长</view>
|
|
<view class="text-gray font-middle">{{ item.reportTime }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="end_block">
|
|
<view class="the_title" style="margin-bottom: 40rpx;">
|
|
<view class="title_icon"></view>
|
|
<text class="margin_stand-samll font-big wide">本月上月计时汇总</text>
|
|
</view>
|
|
<view class="flex_wrap">
|
|
<view>
|
|
<text class="text-gray" style="margin-right: 10px">上月总计时</text>
|
|
<text class="text_green">{{ sumReportTime.totalWasteNumber }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="text-gray" style="margin-right: 10px">本月总计时</text>
|
|
<text class="text_green">{{ sumReportTime.totalQualityNumber }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dataOne from '@/pages/json/1.json';
|
|
import { getDayReportTime, getLastMonthSum, getReportTime, getSumReportTime, getThisMonthSum } from "@/api/mes/report";
|
|
import useUserStore from "@/store/modules/user";
|
|
import Config from '@/pages/js/config'
|
|
import { ref, watch } from 'vue';
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import auth from "@/plugins/auth";
|
|
import {getOtherPersonalUser} from "@/api/mes/organization";
|
|
|
|
const now = new Date();
|
|
const nowTime = {
|
|
year: now.getFullYear(),
|
|
month: now.getMonth() + 1,
|
|
day: now.getDate()
|
|
};
|
|
|
|
const useStore = useUserStore()
|
|
const userId = ref()
|
|
userId.value = useStore.userId
|
|
const isCanvas2d = ref(Config.ISCANVAS2D)
|
|
|
|
let delayload = ref(false);
|
|
let historyData = ref({});
|
|
const reportTime = ref([])
|
|
const lastMonthSum = ref({});
|
|
const thisMonthSum = ref({});
|
|
const sumReportTime = ref({})
|
|
const detailList = ref([]);
|
|
|
|
const historyBtn = ref([
|
|
{
|
|
name: "总数",
|
|
state: true,
|
|
type: "sumNumber"
|
|
},
|
|
{
|
|
name: "合格数",
|
|
state: false,
|
|
type: "totalQualityNumber"
|
|
},
|
|
{
|
|
name: "废品数",
|
|
state: false,
|
|
type: "totalWasteNumber"
|
|
}
|
|
]);
|
|
|
|
const userList = ref([])
|
|
|
|
const getUserList = ()=> {
|
|
getOtherPersonalUser().then(response => {
|
|
userList.value = response.data
|
|
})
|
|
}
|
|
const handleChange = ()=>{
|
|
getLastMonthSumList()
|
|
getThisMonthSumList()
|
|
getReportTimeList()
|
|
getSumReportTimeList()
|
|
getDayReportTimeList()
|
|
}
|
|
|
|
watch(()=>userId.value, (newValue)=> {
|
|
if (newValue) {
|
|
handleChange()
|
|
}
|
|
})
|
|
|
|
const changeHistoryBtn = (type) => {
|
|
historyBtn.value.forEach(btn => {
|
|
btn.state = false;
|
|
});
|
|
for (let i = 0; i < historyBtn.value.length; i++) {
|
|
historyBtn.value[i].state = historyBtn.value[i].type === type;
|
|
}
|
|
if(type === 'sumNumber') {
|
|
dataOne.sumNumber.categories = []
|
|
dataOne.sumNumber.series[0].data = []
|
|
reportTime.value.forEach(item => {
|
|
dataOne.sumNumber.categories.push(`${new Date(item.reportDay).getMonth() + 1}月${new Date(item.reportDay).getDate()}日`)
|
|
dataOne.sumNumber.series[0].data.push(item.sumNumber)
|
|
})
|
|
historyData.value = dataOne.sumNumber
|
|
} else if (type === 'totalQualityNumber') {
|
|
dataOne.totalQualityNumber.categories = []
|
|
dataOne.totalQualityNumber.series[0].data = []
|
|
reportTime.value.forEach(item => {
|
|
dataOne.totalQualityNumber.categories.push(`${new Date(item.reportDay).getMonth() + 1}月${new Date(item.reportDay).getDate()}日`)
|
|
dataOne.totalQualityNumber.series[0].data.push(item.totalQualityNumber)
|
|
})
|
|
historyData.value = dataOne.totalQualityNumber
|
|
} else {
|
|
dataOne.totalWasteNumber.categories = []
|
|
dataOne.totalWasteNumber.series[0].data = []
|
|
reportTime.value.forEach(item => {
|
|
dataOne.totalWasteNumber.categories.push(`${new Date(item.reportDay).getMonth() + 1}月${new Date(item.reportDay).getDate()}日`)
|
|
dataOne.totalWasteNumber.series[0].data.push(item.totalWasteNumber)
|
|
})
|
|
historyData.value = dataOne.totalWasteNumber
|
|
}
|
|
}
|
|
|
|
// 30天报工数据
|
|
const defaultBtnIndex = ref(0)
|
|
const getReportTimeList = async () => {
|
|
defaultBtnIndex.value = 0;
|
|
historyBtn.value.forEach((btn, index) => {
|
|
btn.state = (index === defaultBtnIndex.value);
|
|
});
|
|
historyData.value= {}
|
|
reportTime.value = []
|
|
dataOne.sumNumber.categories = [];
|
|
dataOne.sumNumber.series[0].data = [];
|
|
const response = await getReportTime(userId.value);
|
|
reportTime.value = response.data;
|
|
reportTime.value.forEach(item => {
|
|
const month = new Date(item.reportDay).getMonth() + 1;
|
|
const day = new Date(item.reportDay).getDate();
|
|
dataOne.sumNumber.categories.push(`${month}月${day}日`);
|
|
dataOne.sumNumber.series[0].data.push(item.sumNumber);
|
|
});
|
|
historyData.value = dataOne.sumNumber;
|
|
}
|
|
|
|
// 上月报工汇总
|
|
const getLastMonthSumList = async () => {
|
|
const response = await getLastMonthSum(userId.value);
|
|
lastMonthSum.value = response.data;
|
|
}
|
|
|
|
// 本月报工汇总
|
|
const getThisMonthSumList = async () => {
|
|
const response = await getThisMonthSum(userId.value);
|
|
thisMonthSum.value = response.data;
|
|
}
|
|
|
|
// 本月上月计时汇总
|
|
const getSumReportTimeList = async () => {
|
|
const response = await getSumReportTime(userId.value);
|
|
sumReportTime.value = response.data;
|
|
}
|
|
|
|
// 最近30天计时列表
|
|
const getDayReportTimeList = async () => {
|
|
const response = await getDayReportTime(userId.value);
|
|
detailList.value = response.data;
|
|
}
|
|
|
|
onLoad(() => {
|
|
getUserList()
|
|
getReportTimeList()
|
|
getLastMonthSumList()
|
|
getThisMonthSumList()
|
|
getSumReportTimeList()
|
|
getDayReportTimeList()
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.body {
|
|
height: 100%;
|
|
background-color: #f1f1f1;
|
|
margin: 0;
|
|
padding-bottom: 20rpx;
|
|
|
|
.text_green {
|
|
color: #4ECDB6;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
|
|
.detail_list {
|
|
height: 700rpx;
|
|
overflow: auto;
|
|
color: #9E9E9E;
|
|
|
|
.detail_item {
|
|
display: flex;
|
|
margin: 20rpx 0;
|
|
align-items: center;
|
|
.right_content {
|
|
width: 75%;
|
|
text-align: center;
|
|
}
|
|
.hour {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right_btn {
|
|
float: right;
|
|
display: flex;
|
|
color: #ccc;
|
|
font-size: 22rpx;
|
|
|
|
view {
|
|
line-height: 50rpx;
|
|
height: 50rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.active_btn {
|
|
padding: 0 20rpx;
|
|
border: 1px solid #ccc;
|
|
border-radius: 40rpx;
|
|
}
|
|
}
|
|
|
|
.end_block {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
position: relative;
|
|
padding: 20rpx;
|
|
.flex_wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.row_block {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
position: relative;
|
|
padding: 20rpx;
|
|
|
|
&::after {
|
|
content: "";
|
|
height: 0;
|
|
width: 92%;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
left: 50%;
|
|
bottom: 0;
|
|
border-top: 1px dashed #ccc;
|
|
}
|
|
}
|
|
|
|
.the_title {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left_title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.title_icon {
|
|
background-color: #7E7E7E;
|
|
height: 40rpx;
|
|
width: 10rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.extend_rank {
|
|
width: 100%;
|
|
background-color: #F5F5F5;
|
|
box-sizing: border-box;
|
|
padding: 10rpx;
|
|
|
|
.rank_item {
|
|
width: 100%;
|
|
margin: 20rpx 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 10%;
|
|
}
|
|
|
|
text {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: block;
|
|
}
|
|
|
|
.name {
|
|
margin: 0 10rpx;
|
|
color: #7D7D7D;
|
|
width: 20%;
|
|
}
|
|
|
|
.desc {
|
|
width: 50%;
|
|
color: #ccc;
|
|
}
|
|
|
|
.money {
|
|
width: 20%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top_head {
|
|
position: relative;
|
|
height: 495rpx;
|
|
width: 100%;
|
|
padding: 110rpx 10rpx 0 10rpx;
|
|
background: url('@/static/images/icon/background.png') no-repeat center 0;
|
|
box-sizing: border-box;
|
|
|
|
.select {
|
|
position: absolute;
|
|
width: 240rpx;
|
|
top: 155rpx;
|
|
right: 30rpx;
|
|
:deep(.uni-select__input-text) {
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.top_desc {
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
margin-top: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.text {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #1783f2;
|
|
margin-bottom: 10px
|
|
}
|
|
.text-gray {
|
|
font-size: 28rpx;
|
|
color: #ccc;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.remaining {
|
|
font-size: 46rpx;
|
|
}
|
|
|
|
.flex_1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.head_block {
|
|
margin-top: 20rpx;
|
|
|
|
.income {
|
|
color: #E34B5E;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text_des {
|
|
height: 100rpx;
|
|
color: #fff;
|
|
font-weight: 900;
|
|
position: relative;
|
|
margin-left: 60rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
text {
|
|
display: inline-block;
|
|
height: 100%;
|
|
}
|
|
|
|
.month_num {
|
|
font-size: 90rpx;
|
|
}
|
|
|
|
.month_text {
|
|
font-size: 56rpx;
|
|
}
|
|
|
|
.month_year {
|
|
font-size: 22rpx;
|
|
position: absolute;
|
|
left: 60rpx;
|
|
top: 20rpx;
|
|
}
|
|
|
|
.point {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|