560 lines
18 KiB
Vue
560 lines
18 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="暂无数据" show-overflow-tooltip show-summary
|
||
:summary-method="getSummaries" v-if="status == 0 || status == 1">
|
||
<el-table-column label="序号" align="center" type="index" width="70" />
|
||
<el-table-column label="单据号" align="center" prop="billNo" width="180" />
|
||
<el-table-column label="库存类型" align="center" prop="operationTypeName" width="150" />
|
||
<el-table-column label="订单编号" align="center" prop="sapNo" width="150" />
|
||
<el-table-column label="项目号" align="center" prop="xmNo" width="150" />
|
||
<el-table-column label="项目描述" align="center" prop="xmMs" width="150" />
|
||
<el-table-column label="物料号" align="center" prop="wlNo" width="100" />
|
||
<el-table-column label="物料描述" align="center" prop="wlMs" width="150" />
|
||
<el-table-column label="供应商名称" align="center" prop="gysMc" width="150" />
|
||
<el-table-column label="合同单价" align="center" prop="htDj" />
|
||
<el-table-column label="总计" align="center" prop="totalAmount" />
|
||
<el-table-column label="单位" align="center" prop="dw" />
|
||
<el-table-column label="实际入库数量" align="center" prop="realQty" width="120" />
|
||
<el-table-column label="库位码" align="center" prop="pcode" width="120" />
|
||
<el-table-column label="托盘码" align="center" prop="trayCode" />
|
||
<el-table-column label="身份码" align="center" prop="entityId" width="150" />
|
||
<el-table-column label="物资类型" align="center" prop="wlTypeName" />
|
||
<el-table-column label="场景" align="center" prop="sceneName" width="150" />
|
||
<el-table-column label="所属大库" align="center" prop="parentWarehouseName" width="150" />
|
||
<el-table-column label="所属小库" align="center" prop="warehouseName" width="150" />
|
||
<el-table-column label="入库类型" align="center" prop="operationTypeName" width="150" />
|
||
<el-table-column label="入库时间" align="center" prop="operationTime" width="150" />
|
||
<el-table-column label="还料时间" align="center" prop="returnTime" width="150">
|
||
<template #default="scope">
|
||
<span>{{ parseTime(scope.row.returnTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="库龄" align="center" prop="stockAge" />
|
||
|
||
|
||
|
||
<el-table-column label="备注" align="center" prop="remark" width="150" />
|
||
<el-table-column label="一次封样号" align="center" prop="fycde1" width="150" />
|
||
<el-table-column label="二次封样号" align="center" prop="fycde2" width="150" />
|
||
<!-- <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, getTotalStatistics, getStockList, inventoryList } 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,
|
||
warehouseCode: deviceObj.value.warehouseCode,
|
||
sceneId: deviceObj.value.sceneId,
|
||
}
|
||
if (status.value != 0) {
|
||
matchData.value = null
|
||
matchTotal.value = 0
|
||
return;
|
||
}
|
||
inventoryList(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
|
||
}
|
||
// 获取总计
|
||
const totalMoney = ref(null)
|
||
const pcodeCount = ref(null)
|
||
const sumQty = ref(null)
|
||
function getSummaries(param) {
|
||
const { columns, data } = param;
|
||
const sums = [];
|
||
columns.forEach((column, index) => {
|
||
if (index === 1) { // 第一列不进行合计操作，通常是序列号或选择框等非数值列。
|
||
sums[index] = '总计'; // 这里可以设置为其他文字或空字符串。
|
||
return;
|
||
} else if (index === 2) { // 第二列是金额列，进行求和操作。
|
||
sums[index] = '总金额：' + totalMoney.value;
|
||
} else if (index === 3) {
|
||
sums[index] = '共存于：' + pcodeCount.value + '个库位'
|
||
} else if (index === 4) {
|
||
sums[index] = '总数：' + sumQty.value
|
||
}
|
||
})
|
||
return sums
|
||
}
|
||
function getSumInfo() {
|
||
//统计信息
|
||
console.log(deviceObj.value,'deviceObj');
|
||
let rkInfo = JSON.parse(JSON.stringify({
|
||
warehouseCode: deviceObj.value.warehouseCode,
|
||
sceneId: deviceObj.value.sceneId,
|
||
}))
|
||
getTotalStatistics(rkInfo).then(response => {
|
||
totalMoney.value = response.data.totalAmount
|
||
pcodeCount.value = response.data.locationCount
|
||
sumQty.value = response.data.totalQuantity
|
||
});
|
||
}
|
||
getSumInfo()
|
||
// 使用 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> |