no message
HUOJIN\92525
parent
1e9b7415ac
commit
30130f5111
|
|
@ -37,7 +37,7 @@
|
|||
<div class="scan-content">
|
||||
<div class="scan-code">{{ scanData.stockCode }}</div>
|
||||
<button class="pallet-btn">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none">
|
||||
<path
|
||||
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
|
||||
></path>
|
||||
|
|
@ -48,6 +48,7 @@
|
|||
</section>
|
||||
|
||||
<section class="info-grid">
|
||||
<!-- 任务类型 -->
|
||||
<div class="info-card type-card">
|
||||
<div class="card-label">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
|
|
@ -61,6 +62,7 @@
|
|||
<div class="card-value value-purple">{{ scanData.taskType }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作站 -->
|
||||
<div class="info-card dest-card">
|
||||
<div class="card-label">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
|
|
@ -71,6 +73,17 @@
|
|||
</div>
|
||||
<div class="card-value value-pink">{{ scanData.endCode }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务数 - 新增卡片 -->
|
||||
<div class="info-card task-count-card">
|
||||
<div class="card-label">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 8h16M4 12h16M4 16h16"></path>
|
||||
</svg>
|
||||
<span>任务数 TOTAL TASKS</span>
|
||||
</div>
|
||||
<div class="card-value value-blue">{{ totalTasks }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="remark-section">
|
||||
|
|
@ -91,17 +104,24 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { showConveyorLine } from '@/views/conveyorLine/ConveyorLine.api';
|
||||
import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const userStore = useUserStore();
|
||||
let userInfo = userStore.getUserInfo;
|
||||
|
||||
// 模拟数据 (您可以替换为真实 Props 或 API 数据)
|
||||
const scanData = ref({
|
||||
stockCode: '',
|
||||
taskType: '',
|
||||
endCode: '',
|
||||
endCode: userInfo.username,
|
||||
izAll: '',
|
||||
description: '',
|
||||
description: '无任务'
|
||||
});
|
||||
|
||||
// 新增：总任务数
|
||||
const totalTasks = ref(0);
|
||||
|
||||
// 时间处理
|
||||
const now = ref(dayjs());
|
||||
const updateTime = () => {
|
||||
|
|
@ -122,24 +142,33 @@
|
|||
clearInterval(timer);
|
||||
});
|
||||
|
||||
async function queryData() {
|
||||
const conveyorLine = '3F-F1-ELE-02L-L';//3F-F1-ELE-01L-L
|
||||
const res = await showConveyorLine(conveyorLine);
|
||||
scanData.value = {
|
||||
stockCode: res.stockCode,
|
||||
taskType: res.taskType,
|
||||
endCode: res.endCode,
|
||||
izAll: res.izAll,
|
||||
description: res.description,
|
||||
};
|
||||
console.log('数据：' , res);
|
||||
const glob = useGlobSetting();
|
||||
function initWebSocket() {
|
||||
//let userName = '3F-F1-ELE-01L-L';
|
||||
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
||||
const url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userInfo.username;
|
||||
connectWebSocket(url);
|
||||
onWebSocket(onWebSocketMessage);
|
||||
}
|
||||
|
||||
// 定时更新查询数据
|
||||
setInterval(() => {
|
||||
console.log('更新数据');
|
||||
queryData();
|
||||
}, 3000);
|
||||
function onWebSocketMessage(data) {
|
||||
if(data.cmd==="conveyorLineData"){
|
||||
scanData.value = {
|
||||
stockCode: data.data.stockCode,
|
||||
taskType: data.data.taskType,
|
||||
endCode: data.data.endCode,
|
||||
izAll: data.data.izAll,
|
||||
description: data.data.description
|
||||
};
|
||||
}else if(data.cmd==="conveyorLineCount"){
|
||||
totalTasks.value=data.totalTasks
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initWebSocket();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -329,7 +358,7 @@
|
|||
color: #536dfe;
|
||||
padding: 10px 24px;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -344,10 +373,10 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* 任务卡片栅格 */
|
||||
/* 任务卡片栅格 - 三列布局 */
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽布局 */
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
|
|
@ -364,14 +393,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* !* 增加一点微弱的渐变光晕背景 *!
|
||||
.type-card {
|
||||
background: radial-gradient(circle at 100% 0%, rgba(111, 66, 193, 0.1) 0%, transparent 50%), #11111a;
|
||||
}
|
||||
.dest-card {
|
||||
background: radial-gradient(circle at 100% 0%, rgba(232, 62, 140, 0.1) 0%, transparent 50%), #11111a;
|
||||
}*/
|
||||
|
||||
.card-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -394,7 +415,6 @@
|
|||
}
|
||||
|
||||
/* 高亮颜色 */
|
||||
|
||||
.value-purple {
|
||||
color: #00d2ff;
|
||||
text-shadow: 0 0 15px rgba(0, 210, 255, 0.15);
|
||||
|
|
@ -406,6 +426,11 @@
|
|||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.value-blue {
|
||||
color: #0088cc; /* 蓝色 */
|
||||
text-shadow: 0 0 15px rgba(0, 136, 204, 0.15);
|
||||
}
|
||||
|
||||
/* 底部备注 */
|
||||
.remark-section {
|
||||
background-color: rgba(255, 255, 255, 0.02);
|
||||
|
|
|
|||
Loading…
Reference in New Issue