| | |
| | | </el-table-column> |
| | | <el-table-column prop="packType" align="center" :label="$t('large.quantity')" min-width="110" /> |
| | | <el-table-column prop="projectNo" align="center" :label="$t('large.projectnumber')" min-width="110" /> |
| | | <!-- <el-table-column prop="processingNote" fixed align="center" :label="$t('large.method')" min-width="110" /> --> |
| | | <!-- <el-table-column prop="deliveryDate" fixed align="center" :label="$t('large.deliveryDate')" min-width="130" /> --> |
| | | </el-table> |
| | | <template #footer> |
| | | <div id="dialog-footer" style="text-align: center;"> |
| | |
| | | import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService'; |
| | | import {useI18n} from 'vue-i18n' |
| | | import * as echarts from 'echarts'; |
| | | |
| | | const {t} = useI18n() |
| | | const tableData = ref([]) |
| | | const tableDatab = ref([]) |
| | |
| | | const xiapian6 = ref(false) |
| | | const blind = ref(false) |
| | | const temperingtotal = ref(0) |
| | | |
| | | const thisProcess = ref(); // 用于存储process_id的响应式引用 |
| | | // 定义一个响应式引用来存储图表实例 |
| | | const thisProcess = ref(); |
| | | const chartDom = ref(null); |
| | | let chartInstance = null; |
| | | const blinda = ref(false) |
| | |
| | | } |
| | | } |
| | | catch (error) { |
| | | // 处理错误 |
| | | console.error(error); |
| | | } |
| | | } |
| | |
| | | let socket6 = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`; |
| | | const handleMessage = (data) => { |
| | | // tableData.value = data.awaitingRepairs[0] |
| | | tableDatab.value = data.DoingTask[0] |
| | | tableDatac.value = data.orders[0] |
| | | socket.onmessage = (event) => { |
| | | const data = JSON.parse(event.data); |
| | | console.log(data.device[0]); |
| | | |
| | | processesData.value = data.device[0].map(rect => ({ |
| | | ...rect, |
| | | completedQuantity: rect.completedQuantity, |
| | |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | chart.setOption(options); |
| | | }); |
| | | }; |
| | |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | chart.setOption(options); |
| | | }); |
| | | }; |
| | |
| | | reportingWorkTime2: timeRange.value[1], |
| | | }) |
| | | if (response.code === 200) { |
| | | console.log(response.data); |
| | | |
| | | dialogprocesses.value = response.data.map(rect => ({ |
| | | ...rect, |
| | | completedQuantity: rect.completedQuantity, |
| | |
| | | })); |
| | | await nextTick(); |
| | | renderPieCharts1(); |
| | | |
| | | ElMessage.success(response.message); |
| | | } else { |
| | | ElMessage.error(response.message); |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | </script> |
| | | <style scoped> |
| | | .echarts-container { |
| | | display: flex; |
| | |
| | | height: 100%; |
| | | } |
| | | .parter { |
| | | position: relative; |
| | | display: inline-block; /* 使容器大小适应图片大小 */ |
| | | width: 1500px; |
| | | margin-left: -300px |
| | | position: relative; |
| | | display: inline-block; /* 使容器大小适应图片大小 */ |
| | | width: 1500px; |
| | | margin-left: -300px |
| | | } |
| | | img { |
| | | display: block; /* 让图片以块级元素显示 */ |
| | | max-width: 100%; /* 确保图片不超出容器 */ |
| | | display: block; /* 让图片以块级元素显示 */ |
| | | max-width: 100%; /* 确保图片不超出容器 */ |
| | | } |
| | | .moving-rect { |
| | | width: 100px; |
| | | height: 50px; |
| | | position: absolute; |
| | | width: 100px; |
| | | height: 50px; |
| | | position: absolute; |
| | | } |
| | | .longa{ |
| | | z-index: 1; |
| | |
| | | margin-left: 293px; |
| | | } |
| | | .xiapianji { |
| | | width: 20px; |
| | | height: 10px; |
| | | background-color: #529b2e; |
| | | top: 9px; |
| | | left: 200px; |
| | | transform: translateX(-50%); |
| | | animation: move-xiapianji 15s infinite; |
| | | width: 20px; |
| | | height: 10px; |
| | | background-color: #529b2e; |
| | | top: 9px; |
| | | left: 200px; |
| | | transform: translateX(-50%); |
| | | animation: move-xiapianji 15s infinite; |
| | | } |
| | | @keyframes move-xiapianji { |
| | | 0% { |