487 lines
14 KiB
Vue
487 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<el-header style="display: flex;align-items: center;justify-content: space-between;background-color: #9ebee5;">
|
|||
|
|
<div>{{ dataList[0] || '等待连接' }}</div>
|
|||
|
|
</el-header>
|
|||
|
|
<div style="display: flex;">
|
|||
|
|
<div style="width: 300px;display: flex;flex-direction: column;align-items: center;padding: 20px 0;">
|
|||
|
|
<el-avatar :size="100" :src="avatar" />
|
|||
|
|
<el-button type="primary" style="margin-top: 20px;" @click="startScan" v-show="matchStatus == 0">开始盘点</el-button>
|
|||
|
|
<el-button type="success" style="margin-top: 20px;" @click="startMatch" v-show="matchStatus == 1">开始匹配</el-button>
|
|||
|
|
<el-button type="primary" style="margin-top: 20px;" @click="stopTask" v-show="matchStatus == 1">停止盘点</el-button>
|
|||
|
|
<el-button type="info" style="margin-top: 20px;" @click="resetMatch" v-show="matchStatus == 2">重新盘点</el-button>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 300px;font-size: 18px;padding: 30px 0;">
|
|||
|
|
<div>
|
|||
|
|
设备IP：{{ deviceObj.ipAddress || "暂无" }}
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 20px;">
|
|||
|
|
设备端口：{{ deviceObj.port || "暂无" }}
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 20px;">
|
|||
|
|
总条目：{{ scanTotal || '暂无' }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 300px;font-size: 18px;padding: 30px 0;">
|
|||
|
|
<div>
|
|||
|
|
所属仓库：{{ deviceObj.warehouseName || "暂无" }}
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 20px;">
|
|||
|
|
所属场景：{{ deviceObj.sceneName || "暂无" }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex: 1;">
|
|||
|
|
<div id="chartsMain" style="height: 300px;padding: 20px 0;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-divider style="margin-top: 0;" />
|
|||
|
|
|
|||
|
|
<el-tabs type="border-card" v-model="activeTabName" @tab-click="changeTab">
|
|||
|
|
<el-tab-pane label="扫码列表" name="扫码">
|
|||
|
|
<div>共扫描到：{{ dataList.length > 0 ? dataList.length - 1 : 0 }}条</div>
|
|||
|
|
<div v-for="(item, index) in dataList" :key="index" style="text-align: center;">
|
|||
|
|
<div v-show="index != 0">
|
|||
|
|
{{ item }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-show="dataList.length == 1">
|
|||
|
|
<el-empty description="暂无数据" />
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="匹配列表" name="匹配" :disabled="matchStatus < 2">
|
|||
|
|
<el-select
|
|||
|
|
v-model="status"
|
|||
|
|
class="m-2"
|
|||
|
|
placeholder="Select"
|
|||
|
|
size="large"
|
|||
|
|
style="width: 200px"
|
|||
|
|
@change="changeStatus"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in statusList"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
<div style="margin: 20px 0">
|
|||
|
|
<el-text v-show="status == 0">当前为正常数据</el-text>
|
|||
|
|
<el-text v-show="status == 1">当前为未扫描到，但数据库里有的数据</el-text>
|
|||
|
|
<el-text v-show="status == 2">当前为已扫描到，但数据库里没有的数据</el-text>
|
|||
|
|
</div>
|
|||
|
|
<el-table :data="matchData" border empty-text="暂无数据" v-if="status == 0 || status == 1">
|
|||
|
|
<el-table-column prop="rkPcode" label="存放位置" />
|
|||
|
|
<el-table-column prop="realQty" label="数量" />
|
|||
|
|
<el-table-column prop="count" label="操作" class-name="small-padding fixed-width">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-button link type="primary" icon="View" @click="handleView(scope.row)">查看</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<el-table :data="matchData" border empty-text="暂无数据" v-if="status == 2">
|
|||
|
|
<el-table-column prop="rkPcode" label="存放位置" />
|
|||
|
|
</el-table>
|
|||
|
|
<div style="margin-top: 20px;width: 100%;display: flex;align-items: center;justify-content: flex-end;">
|
|||
|
|
<div style="margin-right: 20px;color: #606266;">共 {{ matchTotal }}条</div>
|
|||
|
|
<el-pagination background layout="prev, pager, next" :total="matchTotal" @change="chagePage" />
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
|
|||
|
|
<el-dialog v-model="taskView" title="详情" width="85%" draggable>
|
|||
|
|
<el-table :data="viewData" border empty-text="暂无数据">
|
|||
|
|
<el-table-column prop="sapNo" label="订单" />
|
|||
|
|
<el-table-column prop="wlNo" label="物料号" />
|
|||
|
|
<el-table-column prop="wlMs" label="物料描述" />
|
|||
|
|
<el-table-column prop="realQty" label="数量">
|
|||
|
|
<template #default="scope">{{ scope.row.realQty }}({{ scope.row.dw }})</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="xmMs" label="项目名称" />
|
|||
|
|
<el-table-column prop="gysMc" label="供应商" />
|
|||
|
|
<el-table-column prop="cangkuName" label="所属仓库" />
|
|||
|
|
<el-table-column prop="rkTime" label="入库时间">
|
|||
|
|
<template #default="scope">{{ parseTime(scope.row.rkTime, '{y}-{m}-{d}') }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<template #footer>
|
|||
|
|
<span class="dialog-footer">
|
|||
|
|
<el-button @click="taskView=false">关闭</el-button>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup name="AutoInventory">
|
|||
|
|
import { ElLoading } from 'element-plus';
|
|||
|
|
import { getTaskCount, getScan, getMatch, getChart, stopScan, getScanResult, getStockList } from "@/api/Inventory/autoInventory"
|
|||
|
|
import { ref, reactive, onMounted, onBeforeUnmount, markRaw } from "vue";
|
|||
|
|
import avatar from "@/assets/images/avatar.jpg"
|
|||
|
|
import { useRoute } from 'vue-router';
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
|
|||
|
|
const taskId = ref(null)
|
|||
|
|
const taskView = ref(false)
|
|||
|
|
const viewData = ref([])
|
|||
|
|
|
|||
|
|
const handleView = (row) => {
|
|||
|
|
// let obj = {
|
|||
|
|
// pageNum: 1,
|
|||
|
|
// pageSize: 100,
|
|||
|
|
// pcode: row.rkPcode
|
|||
|
|
// }
|
|||
|
|
console.log(row.rkPcode)
|
|||
|
|
getStockList(row.rkPcode).then(res => {
|
|||
|
|
console.log(res)
|
|||
|
|
viewData.value = res.data
|
|||
|
|
taskView.value = true
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取总条数
|
|||
|
|
const scanTotal = ref("")
|
|||
|
|
const getTotal = () => {
|
|||
|
|
let obj = {
|
|||
|
|
taskId: taskId.value
|
|||
|
|
}
|
|||
|
|
getTaskCount(obj).then(res => {
|
|||
|
|
scanTotal.value = res.data
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 开始盘点
|
|||
|
|
const startScan = async (formEl) => {
|
|||
|
|
let obj = {
|
|||
|
|
deviceId: deviceObj.value.deviceId
|
|||
|
|
}
|
|||
|
|
getScan(obj).then(res => {
|
|||
|
|
console.log('开始盘点')
|
|||
|
|
localStorage.setItem("scanTotal", scanTotal.value)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let chartInt = ref("")
|
|||
|
|
const status = ref(0) // 盘点状态
|
|||
|
|
const statusList = ref(
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
label: '正常',
|
|||
|
|
value: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '未扫到',
|
|||
|
|
value: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '无数据',
|
|||
|
|
value: 2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
) // 盘点状态
|
|||
|
|
const isSend = ref(false) // 是否正在发送
|
|||
|
|
const activeTabName = ref("扫码") // tab高亮
|
|||
|
|
const matchStatus = ref(0) //是否可以点击匹配列表
|
|||
|
|
const matchData = ref([]) // 匹配列表
|
|||
|
|
const isConnect = ref(true) // 是否自动重新重连websocket
|
|||
|
|
const deviceObj = ref({
|
|||
|
|
deviceId: 0,
|
|||
|
|
ipAddress: 0,
|
|||
|
|
port: 0,
|
|||
|
|
warehouseId: 0,
|
|||
|
|
});
|
|||
|
|
const matchTotal = ref(0);
|
|||
|
|
const queryParams = ref({
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
});
|
|||
|
|
let loadingInstance = null; //
|
|||
|
|
|
|||
|
|
|
|||
|
|
const warehouseList = ref([
|
|||
|
|
{value: 1, label: '1号仓库'},
|
|||
|
|
{value: 2, label: '2号仓库'},
|
|||
|
|
{value: 3, label: '3号仓库'},
|
|||
|
|
{value: 4, label: '4号仓库'},
|
|||
|
|
{value: 5, label: '5号仓库'}
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 开始匹配
|
|||
|
|
const startMatch = () => {
|
|||
|
|
queryParams.value.pageNum = 1
|
|||
|
|
status.value = 0
|
|||
|
|
activeTabName.value = "匹配"
|
|||
|
|
getMatchData()
|
|||
|
|
}
|
|||
|
|
// 重新盘点
|
|||
|
|
const resetMatch = () => {
|
|||
|
|
activeTabName.value = "扫码"
|
|||
|
|
matchStatus.value = 0
|
|||
|
|
scanTotal.value = ""
|
|||
|
|
let text = dataList.value[0]
|
|||
|
|
dataList.value = [text]
|
|||
|
|
}
|
|||
|
|
// 开始匹配/结束盘点/获取盘点列表
|
|||
|
|
const getMatchData = () => {
|
|||
|
|
let list = JSON.parse(JSON.stringify(dataList.value))
|
|||
|
|
let arr = list.splice(1)
|
|||
|
|
let obj = {
|
|||
|
|
ids: arr,
|
|||
|
|
deviceId: deviceObj.value.deviceId,
|
|||
|
|
taskId: taskId.value
|
|||
|
|
}
|
|||
|
|
getMatch(obj).then(res => {
|
|||
|
|
let text = dataList.value[0]
|
|||
|
|
dataList.value = [text]
|
|||
|
|
localStorage.removeItem("scanTotal")
|
|||
|
|
localStorage.setItem("dataList", JSON.stringify(dataList.value))
|
|||
|
|
matchStatus.value = 2
|
|||
|
|
getResultList()
|
|||
|
|
// 渲染图表
|
|||
|
|
let chartObj = {
|
|||
|
|
ids: arr,
|
|||
|
|
}
|
|||
|
|
getChart(chartObj).then(res => {
|
|||
|
|
console.log(res.data)
|
|||
|
|
chartInt.value.setOption({
|
|||
|
|
title: {
|
|||
|
|
text: '本次共计盘点到' + res.data.total + "个库位(库位货品数如下表)",
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: res.data.xdata,
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: res.data.ydata,
|
|||
|
|
type: 'bar',
|
|||
|
|
showBackground: true,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 匹配结果
|
|||
|
|
const getResultList = () => {
|
|||
|
|
let obj = {
|
|||
|
|
pageNum: queryParams.value.pageNum,
|
|||
|
|
pageSize: queryParams.value.pageSize,
|
|||
|
|
status: status.value,
|
|||
|
|
taskId: taskId.value
|
|||
|
|
}
|
|||
|
|
getScanResult(obj).then(res => {
|
|||
|
|
matchData.value = res.rows
|
|||
|
|
matchTotal.value = res.total
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 切换tab
|
|||
|
|
const changeTab = (tab) => {
|
|||
|
|
if (tab.props.label == '匹配列表') {
|
|||
|
|
queryParams.value.pageNum = 1
|
|||
|
|
status.value = 0
|
|||
|
|
getResultList()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 点击翻页
|
|||
|
|
const chagePage = (e) => {
|
|||
|
|
queryParams.value.pageNum = e
|
|||
|
|
getResultList()
|
|||
|
|
}
|
|||
|
|
// 切换盘点状态
|
|||
|
|
const changeStatus = function (e) {
|
|||
|
|
queryParams.value.pageNum = 1
|
|||
|
|
status.value = e
|
|||
|
|
getResultList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// websocket连接
|
|||
|
|
let webSocketPort = import.meta.env.VITE_APP_BASE_API + '/ws/socket'
|
|||
|
|
const dataList = ref([]); // 用于展示从 WebSocket 获取的消息
|
|||
|
|
let ws = null; // WebSocket 实例
|
|||
|
|
let reconnectTimeout = null; // 重连超时控制
|
|||
|
|
// 建立 WebSocket 连接
|
|||
|
|
const connectWebSocket = () => {
|
|||
|
|
ws = new WebSocket(webSocketPort); // 替换为实际的 WebSocket 服务 URL
|
|||
|
|
|
|||
|
|
ws.onopen = () => {
|
|||
|
|
console.log("WebSocket 连接已建立");
|
|||
|
|
send()
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onmessage = (event) => {
|
|||
|
|
console.log(event.data); // 接收到服务器推送的消息
|
|||
|
|
if (localStorage.getItem("scanTotal")) {
|
|||
|
|
scanTotal.value = localStorage.getItem("scanTotal")
|
|||
|
|
dataList.value = JSON.parse(localStorage.getItem("dataList"))
|
|||
|
|
console.log("获取", dataList.value)
|
|||
|
|
}
|
|||
|
|
if (!(dataList.value.some(e => e == event.data))) {
|
|||
|
|
if (dataList.value.findIndex(item => item.includes("连接")) >= 0 && event.data.includes("连接")) {
|
|||
|
|
let signIndex = dataList.value.findIndex(item => item.includes("连接"))
|
|||
|
|
dataList.value[signIndex] = event.data
|
|||
|
|
} else {
|
|||
|
|
dataList.value.push(event.data)
|
|||
|
|
}
|
|||
|
|
localStorage.setItem("dataList", JSON.stringify(dataList.value))
|
|||
|
|
console.log("存储", dataList.value)
|
|||
|
|
}
|
|||
|
|
if (dataList.value.length > 1) {
|
|||
|
|
matchStatus.value = 1
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onerror = (error) => {
|
|||
|
|
console.error("WebSocket 发生错误", error);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ws.onclose = (event) => {
|
|||
|
|
console.log("WebSocket 连接已关闭", event.code);
|
|||
|
|
if (isConnect.value) {
|
|||
|
|
handleReconnect(); // WebSocket 连接关闭时尝试重连
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
// 处理 WebSocket 连接断开后的重连
|
|||
|
|
const handleReconnect = () => {
|
|||
|
|
// 如果已经在重连，避免重复重连
|
|||
|
|
if (reconnectTimeout) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
reconnectTimeout = setTimeout(() => {
|
|||
|
|
console.log("正在尝试重新连接 WebSocket...");
|
|||
|
|
connectWebSocket();
|
|||
|
|
reconnectTimeout = null; // 重连后清除重连超时
|
|||
|
|
}, 5000); // 5 秒后重连
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取缓存数据
|
|||
|
|
const deviceInfo = localStorage.getItem("deviceInfo")
|
|||
|
|
if (deviceInfo) {
|
|||
|
|
deviceObj.value = JSON.parse(deviceInfo)
|
|||
|
|
loadingInstance = ElLoading.service({
|
|||
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|||
|
|
text: '正在连接设备...',
|
|||
|
|
});
|
|||
|
|
connectWebSocket(); // 组件加载时连接 WebSocket
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用 Websocket 发送消息
|
|||
|
|
const send = () => {
|
|||
|
|
let obj = {
|
|||
|
|
deviceId: deviceObj.value.deviceId,
|
|||
|
|
ip: deviceObj.value.ipAddress,
|
|||
|
|
port: deviceObj.value.port
|
|||
|
|
}
|
|||
|
|
loadingInstance.close();
|
|||
|
|
isSend.value = true
|
|||
|
|
ws.send(JSON.stringify(obj))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 停止盘点
|
|||
|
|
const stopTask = () => {
|
|||
|
|
let obj = {
|
|||
|
|
deviceId: deviceObj.value.deviceId
|
|||
|
|
}
|
|||
|
|
stopScan(obj).then(res => {
|
|||
|
|
console.log("停止盘点")
|
|||
|
|
matchStatus.value = 0
|
|||
|
|
let text = dataList.value[0]
|
|||
|
|
dataList.value = [text]
|
|||
|
|
localStorage.removeItem("scanTotal")
|
|||
|
|
localStorage.setItem("dataList", JSON.stringify(dataList.value))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const route = useRoute()
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
chartInt.value = markRaw(echarts.init(document.getElementById('chartsMain')))
|
|||
|
|
taskId.value = route.query.taskId
|
|||
|
|
getTotal()
|
|||
|
|
// chartInt.value.setOption({
|
|||
|
|
// title: {
|
|||
|
|
// text: '本次共计盘点到' + "10个库位(库位货品数如下表)",
|
|||
|
|
// },
|
|||
|
|
// tooltip: {
|
|||
|
|
// trigger: 'axis',
|
|||
|
|
// axisPointer: {
|
|||
|
|
// type: 'shadow'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// grid: {
|
|||
|
|
// left: '3%',
|
|||
|
|
// right: '4%',
|
|||
|
|
// bottom: '3%',
|
|||
|
|
// containLabel: true
|
|||
|
|
// },
|
|||
|
|
// xAxis: {
|
|||
|
|
// type: 'category',
|
|||
|
|
// // data: res.data.xdata,
|
|||
|
|
// data: ['G02-0102', 'G02-0101', 'G02-0103', 'G02-0104', 'G02-0105', 'G02-0106', 'G02-0107'],
|
|||
|
|
// axisTick: {
|
|||
|
|
// alignWithLabel: true
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// yAxis: {
|
|||
|
|
// type: 'value'
|
|||
|
|
// },
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// // data: res.data.ydata,
|
|||
|
|
// data: [120, 200, 150, 80, 70, 110, 130],
|
|||
|
|
// type: 'bar',
|
|||
|
|
// showBackground: true,
|
|||
|
|
// backgroundStyle: {
|
|||
|
|
// color: 'rgba(180, 180, 180, 0.2)'
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// ]
|
|||
|
|
// })
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
isConnect.value = false
|
|||
|
|
if (ws) {
|
|||
|
|
ws.close(); // 组件销毁时关闭 WebSocket 连接
|
|||
|
|
ws = null
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.text{
|
|||
|
|
font-size: 18px;
|
|||
|
|
padding: 30px 0;
|
|||
|
|
}
|
|||
|
|
.demo-tabs > .el-tabs__content {
|
|||
|
|
padding: 32px;
|
|||
|
|
color: #6b778c;
|
|||
|
|
font-size: 32px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
</style>
|