368 lines
8.5 KiB
Vue
368 lines
8.5 KiB
Vue
<template>
|
||
<a-modal
|
||
v-model:visible="visible"
|
||
title="新增原材料详情"
|
||
:mask-closable="false"
|
||
:esc-to-close="false"
|
||
:width="1200"
|
||
:style="{ height: '80vh' }"
|
||
draggable
|
||
@before-ok="save"
|
||
@close="reset"
|
||
>
|
||
<div class="detail-container">
|
||
<div class="left-section">
|
||
<div class="weight-input">
|
||
<label>称重重量(g)</label>
|
||
<a-input v-model="weightValue" placeholder="等待电子秤数据..." disabled />
|
||
</div>
|
||
<div class="camera-section">
|
||
<div class="image-container">
|
||
<img
|
||
:src="imgData.imgUrl"
|
||
alt="宇视摄像头实时画面"
|
||
style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;"
|
||
/>
|
||
<div v-if="cameraStatus === 'error'" class="video-overlay error">
|
||
<icon-close-circle-fill style="color: #ff4d4f; font-size: 24px;" />
|
||
<span>连接异常</span>
|
||
<a-button size="small" type="primary" @click="enterCamera">重试</a-button>
|
||
</div>
|
||
<div v-if="cameraStatus === 'entering'" class="video-overlay">
|
||
<a-spin />
|
||
<span style="margin-left: 8px;">加载中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="confirm-button">
|
||
<a-button type="primary" @click="handleConfirm">确定</a-button>
|
||
</div>
|
||
</div>
|
||
<div class="right-section">
|
||
<div class="detail-list">
|
||
<a-table :columns="detailColumns" :data="detailList" :pagination="false" bordered>
|
||
<template #imgUrl="{ record }">
|
||
<a-image width="80" height="60" :src="record.imgUrl" />
|
||
</template>
|
||
<template #action="{ record }">
|
||
<a-button type="text" status="danger" @click="handleDeleteDetail(record)">
|
||
删除
|
||
</a-button>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import { getCaptureImage, getEnterWeighPage, getLeaveWeighPage } from '@/apis/weightManage/ys'
|
||
import { weighAHStart, weighAHStop } from '@/apis/weightManage/weightManage'
|
||
import { saveFullWorkOrderDetail } from '@/apis/fullWorkOrder/fullWorkOrder'
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'save-success'): void
|
||
}>()
|
||
|
||
const visible = ref(false)
|
||
const weightValue = ref('')
|
||
const cameraStatus = ref<'idle' | 'entering' | 'entered' | 'error'>('idle')
|
||
const fullWorkOrder = ref('')
|
||
|
||
const imgData = reactive({
|
||
imgUrl: 'http://localhost:6609/file/ys/carousel.jpg',
|
||
baseUrl: 'http://localhost:6609/file/ys/carousel.jpg'
|
||
})
|
||
|
||
let imageRefreshTimer: any = null
|
||
|
||
const detailList = ref<any[]>([])
|
||
|
||
const detailColumns = [
|
||
{ title: '称重重量(g)', dataIndex: 'weight', key: 'weight' },
|
||
{ title: '截图', dataIndex: 'imgUrl', key: 'imgUrl', slotName: 'imgUrl' },
|
||
{ title: '操作', dataIndex: 'action', key: 'action', slotName: 'action', width: 80 }
|
||
]
|
||
|
||
// WebSocket连接
|
||
const ws = ref<WebSocket | null>(null)
|
||
const wsConnected = ref(false)
|
||
|
||
// 建立WebSocket连接（电子称）
|
||
const establishWebSocket = () => {
|
||
try {
|
||
const wsUrl = 'ws://localhost:6609/ws/scale'
|
||
ws.value = new WebSocket(wsUrl)
|
||
|
||
ws.value.onopen = () => {
|
||
wsConnected.value = true
|
||
}
|
||
|
||
ws.value.onmessage = (event) => {
|
||
try {
|
||
if (event.data) {
|
||
weightValue.value = event.data
|
||
}
|
||
} catch (error) {
|
||
console.error('WebSocket消息解析失败:', error)
|
||
}
|
||
}
|
||
|
||
ws.value.onclose = () => {
|
||
wsConnected.value = false
|
||
}
|
||
|
||
ws.value.onerror = (error) => {
|
||
console.error('WebSocket错误:', error)
|
||
wsConnected.value = false
|
||
Message.error('称重连接失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('建立WebSocket连接失败:', error)
|
||
Message.error('无法建立称重连接')
|
||
}
|
||
}
|
||
|
||
// 关闭WebSocket连接（电子称）
|
||
const closeWebSocket = () => {
|
||
if (ws.value) {
|
||
ws.value.close()
|
||
ws.value = null
|
||
wsConnected.value = false
|
||
}
|
||
}
|
||
|
||
// 连接电子称
|
||
const connectScale = async () => {
|
||
try {
|
||
await weighAHStart()
|
||
establishWebSocket()
|
||
} catch (error) {
|
||
console.error('连接电子称失败:', error)
|
||
Message.error('与电子称的连接建立失败')
|
||
}
|
||
}
|
||
|
||
// 断开电子称
|
||
const disconnectScale = async () => {
|
||
try {
|
||
await weighAHStop()
|
||
} catch (error) {
|
||
console.error('断开电子称失败:', error)
|
||
}
|
||
closeWebSocket()
|
||
}
|
||
|
||
const reset = () => {
|
||
weightValue.value = ''
|
||
detailList.value = []
|
||
fullWorkOrder.value = ''
|
||
}
|
||
|
||
const enterCamera = async () => {
|
||
cameraStatus.value = 'entering'
|
||
try {
|
||
await getEnterWeighPage()
|
||
cameraStatus.value = 'entered'
|
||
} catch (error) {
|
||
console.error('进入摄像头页面失败:', error)
|
||
cameraStatus.value = 'error'
|
||
}
|
||
}
|
||
|
||
const leaveCamera = async () => {
|
||
try {
|
||
await getLeaveWeighPage()
|
||
} catch (error) {
|
||
console.error('离开摄像头页面失败:', error)
|
||
}
|
||
}
|
||
|
||
const onAdd = async (id: string) => {
|
||
reset()
|
||
fullWorkOrder.value = id
|
||
visible.value = true
|
||
// 独立连接电子称和摄像头
|
||
await Promise.all([
|
||
enterCamera(),
|
||
connectScale()
|
||
])
|
||
}
|
||
|
||
const handleConfirm = async () => {
|
||
if (!weightValue.value || weightValue.value.trim() === '') {
|
||
Message.error('电子秤称重结果为空！')
|
||
return
|
||
}
|
||
|
||
try {
|
||
const data = {
|
||
type: 2,
|
||
}
|
||
// todo
|
||
const response = await getCaptureImage(data)
|
||
// const response = {
|
||
// data: 'http://localhost:6609/file/ys/workOrder/fullOrder_1774322914630.jpg',
|
||
// }
|
||
if (response && response.data) {
|
||
const newItem = {
|
||
key: Date.now().toString(),
|
||
weight: weightValue.value,
|
||
imgUrl: response.data
|
||
}
|
||
detailList.value.push(newItem)
|
||
weightValue.value = ''
|
||
Message.success('添加成功')
|
||
} else {
|
||
Message.error('抓图失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('抓图失败:', error)
|
||
Message.error('抓图失败')
|
||
}
|
||
}
|
||
|
||
const handleDeleteDetail = (record: any) => {
|
||
detailList.value = detailList.value.filter(item => item.key !== record.key)
|
||
Message.success('删除成功')
|
||
}
|
||
|
||
const save = async () => {
|
||
if (detailList.value.length === 0) {
|
||
Message.error('请至少添加一条详情记录')
|
||
return false
|
||
}
|
||
|
||
try {
|
||
const data = detailList.value.map(item => ({
|
||
weight: item.weight,
|
||
imgUrl: item.imgUrl,
|
||
fullWorkOrderId: fullWorkOrder.value,
|
||
}))
|
||
|
||
|
||
const res = await saveFullWorkOrderDetail(data)
|
||
if (res.code === '0') {
|
||
Message.success('保存成功')
|
||
emit('save-success')
|
||
return true
|
||
} else {
|
||
Message.error(res.msg || '保存失败')
|
||
return false
|
||
}
|
||
} catch (error) {
|
||
console.error('保存失败:', error)
|
||
Message.error('保存失败')
|
||
return false
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
if (imageRefreshTimer) {
|
||
clearInterval(imageRefreshTimer)
|
||
imageRefreshTimer = null
|
||
}
|
||
leaveCamera()
|
||
})
|
||
|
||
watch(visible, async (newVal) => {
|
||
if (newVal) {
|
||
imageRefreshTimer = setInterval(() => {
|
||
imgData.imgUrl = `${imgData.baseUrl}?t=${Date.now()}`
|
||
}, 1500)
|
||
} else {
|
||
// 独立断开电子称和摄像头
|
||
await Promise.all([
|
||
leaveCamera(),
|
||
disconnectScale()
|
||
])
|
||
if (imageRefreshTimer) {
|
||
clearInterval(imageRefreshTimer)
|
||
imageRefreshTimer = null
|
||
}
|
||
}
|
||
})
|
||
|
||
defineExpose({ onAdd })
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.detail-container {
|
||
display: flex;
|
||
height: 100%;
|
||
gap: 20px;
|
||
}
|
||
|
||
.left-section {
|
||
width: 45%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.weight-input {
|
||
label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.camera-section {
|
||
flex: 1;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.image-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.video-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
gap: 10px;
|
||
}
|
||
|
||
.video-overlay.error {
|
||
background: rgba(255, 77, 79, 0.2);
|
||
}
|
||
|
||
.confirm-button {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.right-section {
|
||
width: 55%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.detail-list {
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
</style> |