<template>
|
<div style="height: 600px;">
|
<div style="display: flex; flex-direction: row; align-items: center; margin-top: 20px;">
|
<span style="margin-left: 10px;" class="demonstration">{{ $t('reportmanage.productiontime') }}</span>
|
<el-date-picker style="margin-left: 10px;" v-model="timeRange" type="daterange" format="YYYY/MM/DD"
|
value-format="YYYY-MM-DD" :start-placeholder="$t('reportmanage.starttime')"
|
:end-placeholder="$t('reportmanage.endtime')" :default-time="defaultTime" />
|
<el-input v-model="report.targetSlot" style="margin-left: 15px;width: 150px" :placeholder="$t('rework.gridNumberEnter')"/>
|
<el-input v-model="report.width" style="margin-left: 15px;width: 150px" :placeholder="$t('searchOrder.inwidth')"/>
|
<el-input v-model="report.height" style="margin-left: 15px;width: 150px" :placeholder="$t('searchOrder.inheight')"/>
|
<!-- <el-select v-model="report.taskType" :placeholder="$t('reportmanage.ctype')" style="margin-left: 10px;">
|
<el-option :label="$t('reportmanage.all')" value="0"></el-option>
|
<el-option :label="$t('reportmanage.go')" value="1"></el-option>
|
<el-option :label="$t('reportmanage.nogo')" value="2"></el-option>
|
</el-select> -->
|
<el-select v-model="report.taskState" :placeholder="$t('reportmanage.cstate')" style="margin-left: 10px;width: 100px;">
|
<el-option :label="$t('reportmanage.all')" value="-1"></el-option>
|
<el-option :label="$t('reportmanage.scan')" value="0"></el-option>
|
<el-option :label="$t('reportmanage.feeding')" value="1"></el-option>
|
<el-option :label="$t('reportmanage.in')" value="2"></el-option>
|
<el-option :label="$t('reportmanage.car')" value="3"></el-option>
|
<el-option :label="$t('reportmanage.cage')" value="4"></el-option>
|
</el-select>
|
<el-select v-model="report.line" :placeholder="$t('reportmanage.cprocess')" style="margin-left: 10px;width: 100px;">
|
<el-option :label="$t('reportmanage.all')" value="0"></el-option>
|
<el-option :label="$t('reportmanage.oneline')" value="2001"></el-option>
|
<el-option :label="$t('reportmanage.twoline')" value="2002"></el-option>
|
</el-select>
|
|
<el-input v-model="timeInterval" style="margin-left: 15px;width: 100px" :placeholder="$t('reportmanage.timeInterval')"/>
|
<el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('reportmanage.inquire')
|
}}</el-button>
|
</div>
|
<el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
|
<div style="margin-bottom: 20px">
|
<el-row style="margin-top: -15px;margin-bottom: -2px;">
|
<el-col :span="3">
|
<div id="dta" style="font-size: 15px;">
|
<el-form-item :label="$t('reportmanage.totalCounts')" style="width: 14vw">
|
{{ totalCounts }}
|
</el-form-item>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div id="dt" style="font-size: 15px;">
|
<el-form-item :label="$t('reportmanage.totalAreas')" style="width: 14vw">
|
{{ totalAreas }}
|
</el-form-item>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div id="dt" style="font-size: 15px;">
|
<el-form-item :label="$t('reportmanage.totalDamages')" style="width: 14vw">
|
{{ totalDamages }}
|
</el-form-item>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div id="dt" style="font-size: 15px;">
|
<el-form-item :label="$t('reportmanage.totalTakes')" style="width: 14vw">
|
{{ totalTakes }}
|
</el-form-item>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div id="dt" style="font-size: 15px;">
|
<el-form-item :label="$t('reportmanage.workMinutes')" style="width: 14vw">
|
{{ totalMinutes }} min
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
|
<el-table height="700" ref="table" :data="reportData"
|
:header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
|
<el-table-column prop="id" align="center" :label="$t('reportmanage.id')"
|
min-width="120" />
|
<el-table-column prop="glassId" align="center" :label="$t('reportmanage.glassID')" min-width="130" />
|
<el-table-column prop="targetSlot" align="center" :label="$t('reportmanage.targetSlot')"
|
min-width="120" />
|
<el-table-column prop="line" align="center" :label="$t('reportmanage.line')" min-width="120" />
|
<el-table-column prop="taskState" align="center" :label="$t('reportmanage.state')" min-width="120" />
|
<el-table-column prop="width" align="center" :label="$t('reportmanage.width')" min-width="120" />
|
<el-table-column prop="height" align="center" :label="$t('reportmanage.height')"
|
min-width="120" />
|
<el-table-column prop="createTime" align="center" :label="$t('reportmanage.createTime')"
|
min-width="230" />
|
</el-table>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
<script setup>
|
import { Delete, Upload } from '@element-plus/icons-vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ref, onMounted, onBeforeUnmount, reactive, computed, shallowRef, onUnmounted, watchEffect } from "vue";
|
import request from "@/utils/request"
|
import { WebSocketHost, host } from '@/utils/constants'
|
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
|
import { useI18n } from 'vue-i18n'
|
const { t } = useI18n()
|
const report = ref({
|
targetSlot: '',
|
taskType: '0',
|
taskState: '-1',
|
line: '0',
|
width: '',
|
height: '',
|
});
|
const timeInterval= ref(120)
|
const reportData = ref([])
|
const endDate = new Date();
|
const startDate = new Date();
|
startDate.setDate(endDate.getDate()); // 获取一个星期前的时间
|
// 格式化为 "YYYY-MM-DD" 格式
|
const formatDate = (date) => {
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
return `${year}-${month}-${day}`;
|
};
|
|
const timeRange = ref([formatDate(startDate), formatDate(endDate)]);
|
const totalCounts = ref(0);
|
const totalAreas = ref(0);
|
const totalDamages = ref(0);
|
const totalTakes = ref(0);
|
|
const workHours = ref(0);
|
const totalMinutes = ref(0);
|
|
// 查询数据
|
const selectReportData = async () => {
|
const response = await request.post("/cacheVerticalGlass/bigStorageCageFeedTask/selectBigStorageCageFeedTask?startTime="+timeRange.value[0]+"&&endTime="+timeRange.value[1]+"", {
|
startTime: timeRange.value[0],
|
endTime: timeRange.value[1],
|
targetSlot: report.value.targetSlot,
|
width: report.value.width,
|
height: report.value.height,
|
taskType: report.value.taskType,
|
taskState: report.value.taskState,
|
line: report.value.line
|
})
|
if (response.code === 200) {
|
reportData.value = response.data;
|
let totalCount = 0;
|
let totalArea = 0;
|
let totalDamage = 0;
|
let totalTake = 0;
|
response.data.forEach(item => {
|
if(item.taskState == 4){
|
totalCount+=1;
|
totalArea+=item.width*item.height/1000000;
|
}
|
if(item.taskState == 8){
|
totalDamage+=1;
|
}
|
if(item.taskState == 9){
|
totalTake+=1;
|
}
|
});
|
totalCounts.value = totalCount;
|
totalAreas.value = totalArea.toFixed(2);
|
totalDamages.value = totalDamage;
|
totalTakes.value = totalTake;
|
ElMessage.success(response.message);
|
const workTime = calculateWorkTime(response.data);
|
console.log(workTime);
|
workHours.value = workTime.totalHours;
|
totalMinutes.value =workTime.totalMinutes;
|
} else {
|
ElMessage.error(response.message);
|
}
|
|
};
|
|
const calculateWorkTime = (tasks) =>{
|
// 处理空数据或非数组情况
|
if (!tasks || !Array.isArray(tasks) || tasks.length === 0) {
|
return {
|
totalSeconds: 0,
|
totalMinutes: 0,
|
totalHours: 0, // 确保初始化
|
periods: []
|
};
|
}
|
|
// 按时间排序任务
|
const sorted = [...tasks].sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
|
|
// 初始化变量
|
const periods = [];
|
let start = new Date(sorted[0].createTime);
|
let end = start;
|
|
// 遍历计算连续时段
|
for (let i = 1; i < sorted.length; i++) {
|
const prev = new Date(sorted[i - 1].createTime);
|
const curr = new Date(sorted[i].createTime);
|
const gap = (curr - prev) / 1000; // 间隔秒数
|
// alert(timeInterval.value)
|
if (gap <= timeInterval.value) {
|
end = curr;
|
} else {
|
periods.push({
|
start: new Date(start),
|
end: new Date(end),
|
duration: Math.round((end - start) / 1000)
|
});
|
start = curr;
|
end = curr;
|
}
|
}
|
|
// 添加最后一个时段
|
periods.push({
|
start: new Date(start),
|
end: new Date(end),
|
duration: Math.round((end - start) / 1000)
|
});
|
|
// 计算总时长
|
const totalSeconds = periods.reduce((sum, p) => sum + (p.duration > 0 ? p.duration : 0), 0);
|
|
// 确保所有时间字段都被定义
|
return {
|
totalSeconds: totalSeconds,
|
totalMinutes: Math.floor(totalSeconds / 60),
|
totalHours: (totalSeconds / 3600).toFixed(1), // 保留1位小数
|
periods: periods.map(p => ({
|
start: p.start.toLocaleString(),
|
end: p.end.toLocaleString(),
|
durationSeconds: p.duration,
|
durationMinutes: Math.floor(p.duration / 60)
|
}))
|
};
|
}
|
</script>
|
