From 56fab901b298857ff4985b7429ef843c9a9d1471 Mon Sep 17 00:00:00 2001 From: wangfei <3597712270@qq.com> Date: 星期三, 28 八月 2024 16:20:02 +0800 Subject: [PATCH] 钢化模块打印功能,新增表格字段 --- UI-Project/src/views/largescreen/largescreen.vue | 513 +++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 335 insertions(+), 178 deletions(-) diff --git a/UI-Project/src/views/largescreen/largescreen.vue b/UI-Project/src/views/largescreen/largescreen.vue index abbf44e..024ff7a 100644 --- a/UI-Project/src/views/largescreen/largescreen.vue +++ b/UI-Project/src/views/largescreen/largescreen.vue @@ -1,61 +1,38 @@ <template> <el-card style="flex: 1;margin-left: 1px;margin-top: 10px;margin-right: 1px;" v-loading="loading"> - <el-scrollbar height="600px"> -<div id="top" style="height: 150px;display: flex;"> + <el-scrollbar height="800px"> + <div style="font-size: 20px;font-weight: bold;">{{ $t('large.loading') }}{{ temperingtotal }} </div> + <div id="top" style="height: 150px;display: flex; justify-content: center; align-items: center;"> <div class="echarts-container"> - <div v-for="(processData, index) in processesData" :key="index" class="echarts-item"> + <div v-for="(processData, index) in processesData" :key="index" class="echarts-item" @click="showDialog"> <div :id="'pieChart_' + index" class="pie-chart"></div> </div> </div> </div> <div style="display: flex;"> -<!-- <div id="centerleft" style="margin-top: 10px;height: 240px;width: 340px;background-color: #911005;"> - <el-table height="240" ref="table" width="340px" - @selection-change="handleSelectionChange" - :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> - <el-table-column fixed prop="orderId" align="center" :label="$t('large.number')" min-width="110" /> - <el-table-column prop="project" align="center" :label="$t('large.projectname')" min-width="100" /> - <el-table-column prop="responsibleProcess" align="center" :label="$t('large.responsibleprocess')" min-width="100" /> - <el-table-column prop="breakageQuantity" align="center" :label="$t('large.numberfractions')" min-width="110" /> - <el-table-column prop="patchProcesses" align="center" :label="$t('large.process')" min-width="100" /> - <el-table-column fixed="right" :label="$t('large.operate')" align="center" width="100"> - <template #default="scope"> - <el-button size="mini" type="text" plain @click="handleBinda">{{ $t('large.mes') }}</el-button> - </template> - </el-table-column> - </el-table> -</div> --> -<div id="parent" style="margin-top: 10px;margin-left: 150px; height: 240px;width: 1000px;"> - <img src="../../assets/dpxsa.png" alt="" style="margin-left: -10px; width: 100%;height: 100%;position: relative;"> - <div id="lipiana" v-show="woshia"></div> - <div id="lipianb" v-show="woshia"></div> - <div id="lipianc" v-show="woshic"></div> - <div id="lipiand" v-show="woshic"></div> - <div id="overlay" v-show="flake"></div> - <div id="overlayb" v-show="flakeb"></div> - <div id="overlayc" v-show="flakec"></div> - <div id="overlayd" v-show="flaked"></div> - <div id="longa" v-show="dalipiana"></div> - <div id="longb" v-show="dalipianb"></div> - <div id="shangpianji" v-show="shangpian"></div> - <div id="xiapianji1" v-show="xiapian1"></div> - <div id="xiapianji2" v-show="xiapian2"></div> - <div id="xiapianji3" v-show="xiapian3"></div> - <div id="xiapianji4" v-show="xiapian4"></div> - <div id="xiapianji5" v-show="xiapian5"></div> - <div id="xiapianji6" v-show="xiapian6"></div> +<div class="parter" style="margin-top: 10px;margin-left: 150px; height: 240px;width: 1000px;"> + <img src="../../assets/dpxsa.png" style="margin-left: -10px; width: 100%;height: 100%;" alt="Your Image"> + <div class="moving-rect lipiana" v-show="woshia"></div> + <div class="moving-rect lipianb" v-show="woshia"></div> + <div class="moving-rect lipianc" v-show="woshic"></div> + <div class="moving-rect lipiand" v-show="woshic"></div> + <div class="moving-rect overlaya" v-show="flake"></div> + <div class="moving-rect overlayb" v-show="flakeb"></div> + <div class="moving-rect overlayc" v-show="flakec"></div> + <div class="moving-rect longa" v-show="dalipiana"></div> + <div class="moving-rect longb" v-show="dalipianb"></div> + <div class="moving-rect shangpianji" v-show="shangpian"></div> + <div class="moving-rect xiapianji" v-show="xiapian"></div> + <div class="moving-rect xiapianji1" v-show="xiapian1"></div> + <div class="moving-rect xiapianji2" v-show="xiapian2"></div> + <div class="moving-rect xiapianji3" v-show="xiapian3"></div> + <div class="moving-rect xiapianji4" v-show="xiapian4"></div> + <div class="moving-rect xiapianji5" v-show="xiapian5"></div> + <div class="moving-rect xiapianji6" v-show="xiapian6"></div> </div> -<!-- <div id="centerright" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 240px;background-color: #911005;"> - <el-table height="240" ref="table" width="340px" - @selection-change="handleSelectionChange" - :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> - <el-table-column prop="projectNo" align="center" :label="$t('large.projectnumber')" min-width="50" /> - <el-table-column prop="projectName" align="center" :label="$t('large.projectname')" min-width="50" /> - </el-table> -</div> --> </div> -<div id="bottom" style="margin-top: 10px;height: 190px;background-color: #911005;"> -<el-table height="190" ref="table" +<div id="bottom" style="margin-top: 10px;height: 190px;"> +<el-table height="350" ref="table" @selection-change="handleSelectionChange" :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table-column prop="orderId" align="center" :label="$t('large.orderId')" min-width="50" /> @@ -86,18 +63,39 @@ </el-scrollbar> </el-card> <el-dialog v-model="blinda" top="5vh" width="85%"> - <el-table height="400" ref="table" + <el-table height="650" ref="table" @selection-change="handleSelectionChange" :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> <el-table-column prop="orderId" fixed align="center" :label="$t('large.orderId')" min-width="110" /> - <el-table-column prop="project" fixed align="center" :label="$t('large.project')" min-width="110" /> - <el-table-column prop="productName" fixed align="center" :label="$t('large.productname')" min-width="110" /> - <el-table-column prop="width" fixed align="center" :label="$t('large.width')" min-width="100" /> - <el-table-column prop="height" fixed align="center" :label="$t('large.height')" min-width="100" /> - <el-table-column prop="area" fixed align="center" :label="$t('large.are')" min-width="100" /> - <el-table-column prop="quantity" fixed align="center" :label="$t('large.number')" 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-column prop="project" align="center" :label="$t('large.project')" min-width="110" /> + <el-table-column prop="processId" align="center" :label="$t('large.cardnumber')" min-width="110" /> + <el-table-column prop="orderNumber" align="center" :label="$t('large.serialnumber')" min-width="110" /> + <el-table-column prop="productName" align="center" :label="$t('large.productname')" min-width="110" /> + <el-table-column prop="width" align="center" :label="$t('large.width')" min-width="100" /> + <el-table-column prop="height" align="center" :label="$t('large.height')" min-width="100" /> + <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="100" /> + <el-table-column prop="quantity" align="center" :label="$t('large.number')" min-width="110" /> + <el-table-column prop="numberPatches" align="center" :label="$t('large.numberpatches')" min-width="110" /> + <el-table-column prop="receivedQuantity" align="center" :label="$t('large.innumber')" min-width="110" /> + <el-table-column prop="terminationStatus" align="center" :label="$t('large.productstatus')" min-width="110" /> + <el-table-column + align="center" + :label="$t('large.productstatus')" + min-width="80" + prop="terminationStatus" + > + <template #default="scope"> + <el-tag + :type="scope.row.terminationStatus === 0 ? 'success' : 'danger'" + > + {{ scope.row.terminationStatus === 0 ? $t('large.right') : $t('large.stop') }} + </el-tag> + </template> + </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;"> @@ -105,11 +103,23 @@ </div> </template> </el-dialog> +<el-dialog v-model="blind" top="10vh" width="70%" > + <el-date-picker style="margin-left: 1px;" v-model="timeRange" type="daterange" format="YYYY/MM/DD" value-format="YYYY-MM-DD" + :start-placeholder="$t('large.starttime')" :end-placeholder="$t('large.endtime')" :default-time="defaultTime" /> + <el-button type="primary" style="margin-left: 10px;margin-top: -6px;" @click="selectReportData()">{{ $t('large.inquire') }}</el-button> + <div style="height: 550px;display: flex;margin-top: 10px;justify-content: center; align-items: center;"> + <div class="echarts-container"> + <div v-for="(processData, index) in dialogprocesses" :key="index" class="echarts-item"> + <div :id="'dialogPieChart_' + index" class="pie-chart"></div> + </div> + </div> + </div> + </el-dialog> </template> <script setup> import { Delete, Upload } from '@element-plus/icons-vue' import { ElMessage, ElMessageBox } from 'element-plus' -import { ref, onMounted , onBeforeUnmount, reactive, computed, shallowRef, onUnmounted, watchEffect } from "vue"; +import { ref, onMounted , onBeforeUnmount, reactive, computed, shallowRef, onUnmounted, watchEffect,nextTick } from "vue"; import request from "@/utils/request" import { WebSocketHost ,host} from '@/utils/constants' import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; @@ -121,22 +131,25 @@ const tableDatac = ref([]) const adjustedRects = ref([]); const chartRefs = ref([]); +const timeRange = ref([]) const flake = ref(false) const flakeb = ref(false) const flakec = ref(false) -const flaked = ref(false) const woshia = ref(false) const woshic = ref(false) const dalipiana = ref(false) const dalipianb = ref(false) const shangpian = ref(false) +const xiapian = ref(false) const xiapian1 = ref(false) const xiapian2 = ref(false) const xiapian3 = ref(false) const xiapian4 = ref(false) const xiapian5 = ref(false) const xiapian6 = ref(false) - +const blind = ref(false) +const temperingtotal = ref(0) + const thisProcess = ref(); // 鐢ㄤ簬瀛樺偍process_id鐨勫搷搴斿紡寮曠敤 // 瀹氫箟涓�涓搷搴斿紡寮曠敤鏉ュ瓨鍌ㄥ浘琛ㄥ疄渚� const chartDom = ref(null); @@ -147,6 +160,7 @@ await fetchFlowCardId(row.orderId); }; const processesData = ref([]); +const dialogprocesses = ref([]); const fetchFlowCardId = async (orderId) => { try { const response = await request.post('/loadGlass/order/order/selectOrderdetail',{ @@ -198,6 +212,8 @@ 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, @@ -220,37 +236,36 @@ flake.value = tasks.some(task => task.state == 1); flakeb.value = tasks.some(task => task.state == 2); flakec.value = tasks.some(task => task.state == 3); - flaked.value = tasks.some(task => task.state == 4); }; // 鍗у紡鐞嗙墖 const socketUrl3 = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlassIsRun`; const handleMessage3 = (data) => { - const tasks = data.taskCaches[0]; + const tasks = data.taskCaches[0]; woshia.value = tasks.some(task => task.line == 2001); woshic.value = tasks.some(task => task.line == 2002); - console.log(tasks); - }; // 澶х悊鐗囩 const socketUrl4 = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/isRun`; const handleMessage4 = (data) => { - const tasks = data.bigStorageCageDetailsOutTask[0]; - const taskss = data.bigStorageCageDetailsFeedTask[0]; + const tasks = data.bigStorageCageDetailsOutTask[0]; dalipiana.value = tasks.some(task => task.slot !== null && task.slot !== undefined); + const taskss = data.bigStorageCageDetailsFeedTask[0]; dalipianb.value = taskss.some(task => task.slot !== null && task.slot !== undefined); }; // 涓婄墖 const socketUrl5 = `ws://${WebSocketHost}:${host}/api/loadGlass/api/talk/loadGlassIsRun`; const handleMessage5 = (data) => { - if(data.engineering.length !==0 ){ - shangpian.value = true; -} -}; + const tasks = data.engineering; + shangpian.value = tasks.some(task => task.state == 1); + temperingtotal.value = data.engineering[0].engineerId + }; // 涓嬬墖 const socketUrl6 = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unLoadGlassIsRun`; const handleMessage6 = (data) => { const tasks = data.downWorkstation[0]; - if (tasks && tasks.length >= 6) { + const tasks1 = data.downGlassTask[0]; + xiapian.value = tasks1.some(task => task.thickness!== ''); + if (tasks && tasks.length >= 6) { xiapian1.value = tasks[0].racksNumber !== 0; xiapian2.value = tasks[1].racksNumber !== 0; xiapian3.value = tasks[2].racksNumber !== 0; @@ -297,7 +312,49 @@ } ] }; - + + chart.setOption(options); +}); +}; +const renderPieCharts1 = () => { +dialogprocesses.value.forEach((data, index) => { + const chart = echarts.init(document.getElementById('dialogPieChart_' + index)); + const options = { + title: { + text: `${data.thisProcess} `, + left: 'center', + }, + tooltip: { + trigger: 'item', + }, + series: [ + { + name: `${data.thisProcess} `, + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + data: [ + { value: data.completedQuantity, name: t('large.completedquantity') }, + { value: data.breakageQuantity, name: t('large.scrapquantity') } + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + }, + label: { + show: false, + position: 'center', + }, + labelLine: { + show: false + }, + } + ] + }; + chart.setOption(options); }); }; @@ -338,8 +395,34 @@ closeWebSocket5(); closeWebSocket6(); }); -</script> +function showDialog() { + blind.value = true; +} +// 鏌ヨ鏁版嵁 +const selectReportData = async () => { + const response = await request.post("/loadGlass/reporting_work/reporting-work/selectDamage", { + reportingWorkTime: timeRange.value[0], + reportingWorkTime2: timeRange.value[1], + }) + if (response.code === 200) { + console.log(response.data); + + dialogprocesses.value = response.data.map(rect => ({ + ...rect, + completedQuantity: rect.completedQuantity, + breakageQuantity: rect.breakageQuantity, + thisProcess: rect.thisProcess, + })); + await nextTick(); + renderPieCharts1(); + ElMessage.success(response.message); + } else { + ElMessage.error(response.message); + } +}; +</script> + <style scoped> .echarts-container { display: flex; @@ -355,162 +438,236 @@ width: 100%; height: 100%; } -#parent{ - position: relative; +.parter { + position: relative; + display: inline-block; /* 浣垮鍣ㄥぇ灏忛�傚簲鍥剧墖澶у皬 */ width: 1500px; margin-left: -300px } -#overlay{ - position: absolute; - z-index: 1; - width: 36px; - height: 10px; - background-color: #529b2e; - margin-top: -34px; - margin-left: -2px; +img { + display: block; /* 璁╁浘鐗囦互鍧楃骇鍏冪礌鏄剧ず */ + max-width: 100%; /* 纭繚鍥剧墖涓嶈秴鍑哄鍣� */ } -#overlayb{ - position: absolute; - z-index: 1; - width: 17px; - height: 115px; - background-color: #529b2e; - margin-top: -197px; - margin-left:4px; +.moving-rect { + width: 100px; + height: 50px; + position: absolute; } -#overlayc{ - position: absolute; - z-index: 1; - width: 16px; - height: 16px; - background-color: #529b2e; - margin-top: -243px; - margin-left: 5px; -} -#overlayd{ - position: absolute; - z-index: 1; - width: 37px; - height: 10px; - background-color: #529b2e; - margin-top: -238px; - margin-left: 70px; -} -#lipiana{ - position: absolute; - z-index: 1; - width: 100px; - height: 10px; - background-color: #529b2e; - margin-top: -57px; - margin-left: 365px; -} -#lipianb{ - position: absolute; - z-index: 1; - width: 20px; - height: 10px; - background-color: #529b2e; - margin-top: -72px; - margin-left: 492px; -} -#lipianc{ - position: absolute; - z-index: 1; - width: 100px; - height: 10px; - background-color: #529b2e; - margin-top: -32px; - margin-left: 410px; -} -#lipiand{ - position: absolute; - z-index: 1; - width: 30px; - height: 10px; - background-color: #529b2e; - margin-top: -47px; - margin-left: 539px; -} -#longa{ - position: absolute; +.longa{ z-index: 1; width: 33px; height: 5px; background-color: #529b2e; - margin-top: -20px; + margin-top: -15px; margin-left: 130px; } -#longb{ - position: absolute; +.longb{ z-index: 1; width: 33px; height: 5px; background-color: #529b2e; - margin-top: -20px; + margin-top: -15px; margin-left: 235px; } -#shangpianji{ - position: absolute; - z-index: 1; - width: 29px; - height: 10px; - background-color: #529b2e; - margin-top: -90px; - margin-left: 868px; -} -#xiapianji1{ - position: absolute; +.xiapianji1{ z-index: 1; width: 12px; height: 7px; background-color: #529b2e; - margin-top: -213px; + margin-top: -206px; margin-left: 173px; } -#xiapianji2{ - position: absolute; +.xiapianji2{ z-index: 1; width: 12px; height: 7px; background-color: #529b2e; - margin-top: -213px; + margin-top: -206px; margin-left: 217px; } -#xiapianji3{ - position: absolute; +.xiapianji3{ z-index: 1; width: 12px; height: 7px; background-color: #529b2e; - margin-top: -202px; + margin-top: -195px; margin-left: 196px; } -#xiapianji4{ - position: absolute; +.xiapianji4{ z-index: 1; width: 12px; height: 7px; background-color: #529b2e; - margin-top: -213px; + margin-top: -206px; margin-left: 270px; } -#xiapianji5{ - position: absolute; +.xiapianji5{ z-index: 1; width: 12px; height: 7px; background-color: #529b2e; - margin-top: -213px; + margin-top: -206px; margin-left: 314px; } -#xiapianji6{ - position: absolute; +.xiapianji6{ z-index: 1; width: 12px; height: 7px; background-color: #529b2e; - margin-top: -202px; + margin-top: -195px; margin-left: 293px; } +.xiapianji { + width: 20px; + height: 10px; + background-color: #529b2e; + top: 9px; + left: 200px; + transform: translateX(-50%); + animation: move-xiapianji 15s infinite; +} +@keyframes move-xiapianji { + 0% { + left: 200px; + } + 100% { + left: calc(100% - 700px); + } +} +.lipiana { + width: 15px; + height: 9px; + background-color: #529b2e; + top: 190px; + right: 530px; + transform: translateX(-50%); + animation: move-lipiana 15s infinite; +} +@keyframes move-lipiana { + 0% { + right: 530px; + } + 100% { + right: calc(100% - 350px); + } +} +.lipianb { + width: 18px; + height: 10px; + background-color: #529b2e; + top: 160px; + left: 502px; + transform: translateX(-50%); + animation: move-lipianb 15s infinite; +} +@keyframes move-lipianb { + 0% { + top: 160px; + } + 100% { + top: calc(100% - 55px); + } +} +.lipianc { + width: 15px; + height: 9px; + background-color: #529b2e; + top: 215px; + right: 490px; + transform: translateX(-50%); + animation: move-lipianc 15s infinite; +} +@keyframes move-lipianc { + 0% { + right: 490px; + } + 100% { + right: calc(100% - 350px); + } +} +.lipiand { + width: 25px; + height: 10px; + background-color: #529b2e; + top: 160px; + left: 555px; + transform: translateX(-50%); + animation: move-lipiand 15s infinite; +} +@keyframes move-lipiand { + 0% { + top: 160px; + } + 100% { + top: calc(100% - 40px); + } +} +.overlaya { + width: 15px; + height: 9px; + background-color: #529b2e; + top: 213px; + right: 800px; + transform: translateX(-50%); + animation: move-overlaya 15s infinite; +} +@keyframes move-overlaya { + 0% { + right: 880px; + } + 100% { + right: calc(100% - 15px); + } +} +.overlayb { + width: 20px; + height: 10px; + background-color: #529b2e; + top: 110px; + left: 13px; + transform: translateX(-50%); + animation: move-overlayb 15s infinite; +} +@keyframes move-overlayb { + 0% { + top: 160px; + } + 100% { + top: calc(100% - 190px); + } +} +.overlayc { + width: 20px; + height: 10px; + background-color: #529b2e; + top: 7px; + left: 13px; + transform: translateX(-50%); + animation: move-overlayc 15s infinite; +} +@keyframes move-overlayc { + 0% { + left: 20px; + } + 100% { + left: calc(100% - 900px); + } +} +.shangpianji { + width: 20px; + height: 10px; + background-color: #529b2e; + top: 157px; + right: 90px; + transform: translateX(-50%); + animation: move-shangpianji 15s infinite; +} +@keyframes move-shangpianji { + 0% { + right: 90px; + } + 100% { + right: calc(100% - 770px); + } +} </style> \ No newline at end of file -- Gitblit v1.8.0