From c6e8b600398de38b6684f5fa1eaaaade8562859b Mon Sep 17 00:00:00 2001 From: wangxinhui <wangxinhui@hnkhzn.com> Date: 星期六, 20 九月 2025 15:16:56 +0800 Subject: [PATCH] Merge branch 'master' of http://115.159.85.185:8098/r/ZhiHuiQiCe/LongDeLiLiKu --- 项目代码/WCS/WCSClient/src/views/Home.vue | 893 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 881 insertions(+), 12 deletions(-) diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/Home.vue" index 820437a..f834133 100644 --- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/Home.vue" +++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/Home.vue" @@ -1,24 +1,893 @@ <template> - <div class="title"></div> + <div class="title"> + <el-row :gutter="20" style="height:85%"> + <el-col :span="8"> + <span style="position: relative; top: 100px;left: 30px;"> + <h4>涓�妤艰澶囩洃鎺�</h4> + </span> + <el-row :gutter="20" style="height:1000px"> + <el-col :span="8"> + <div> + <div v-for="(group, index) in groupedLines(linescopy7)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" + url="api/Equipment/GetLineInfoByNo" /> + </div> + </div> + <div style="margin-top: 118px;"></div> + <div v-for="(group, index) in groupedLines(linescopy8)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" + url="api/Equipment/GetLineInfoByNo" /> + </div> + </div> + <div style="margin-top: 115px;"></div> + <div v-for="(group, index) in groupedLines(linescopy9)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" + url="api/Equipment/GetLineInfoByNo" /> + </div> + </div> + <div style="margin-top: 112px;"></div> + <div v-for="(group, index) in groupedLines(linescopy10)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" /> + </div> + </div> + <div style="margin-top: 109px;"></div> + <div v-for="(group, index) in groupedLines(linescopy11)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" /> + </div> + </div> + <div style="margin-top: 107px;"></div> + <div v-for="(group, index) in groupedLines(linescopy12)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" /> + </div> + </div> + </div> + </el-col> + + <el-col :span="8"> + <div> + <div v-for="(group, index) in groupedLines(linescopy1)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" + url="api/Equipment/GetLineInfoByNo" /> + </div> + </div> + <div style="margin-top: 108px;"></div> + <div v-for="(group, index) in groupedLines(linescopy2)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" + url="api/Equipment/GetLineInfoByNo" /> + </div> + </div> + <div style="margin-top: 58px;"></div> + <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" + url="api/Equipment/GetLineInfoByNo" /> + </div> + </div> + <div style="margin-top: 58px;"></div> + <div v-for="(group, index) in groupedLines(linescopy4)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" /> + </div> + </div> + <div style="margin-top: 115px;"></div> + <div v-for="(group, index) in groupedLines(linescopy5)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" /> + </div> + </div> + <div style="margin-top: 115px;"></div> + <div v-for="(group, index) in groupedLines(linescopy6)" :key="index"> + <div class="positionY-group"> + <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" + :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" + :positionY="line.positionY" :condition="line.condition" /> + </div> + </div> + </div> + </el-col> + </el-row> + + </el-col> + <el-col :span="8"> + <!-- 鍫嗗灈鏈� --> + <div style="position: relative; top: 50px;"> + <div class="stackerDiv"> + <div class="stackDivName">涓�鍙峰爢鍨涙満</div> + <LineComponent :x="xValue1" ref="stacker1" :equipNo="SC01"></LineComponent> + </div> + <el-divider></el-divider> + <div class="stackerDiv"> + <div class="stackDivName">浜屽彿鍫嗗灈鏈�</div> + <LineComponent :x="xValue2" ref="stacker2" :equipNo="SC02"></LineComponent> + </div> + <el-divider></el-divider> + <div class="stackerDiv"> + <div class="stackDivName">涓夊彿鍫嗗灈鏈�</div> + <LineComponent :x="xValue3" ref="stacker3" :equipNo="SC03"></LineComponent> + </div> + <el-divider></el-divider> + <div class="stackerDiv"> + <div class="stackDivName">鍥涘彿鍫嗗灈鏈�</div> + <LineComponent :x="xValue4" ref="stacker4" :equipNo="SC04"></LineComponent> + </div> + <el-divider></el-divider> + <div class="stackerDiv"> + <div class="stackDivName">浜斿彿鍫嗗灈鏈�</div> + <LineComponent :x="xValue5" ref="stacker5" :equipNo="SC05"></LineComponent> + </div> + <el-divider></el-divider> + <div class="stackerDiv"> + <div class="stackDivName">鍏彿鍫嗗灈鏈�</div> + <LineComponent :x="xValue6" ref="stacker6" :equipNo="SC06"></LineComponent> + </div> + </div> + </el-col> + </el-row> + + + </div> + </template> <script> -import { ref, reactive } from 'vue' +import { onMounted, ref, reactive } from "vue"; +import LineInfo from "./LineInfo.vue"; +import LineInfoCopy from "./LineInfocopy.vue"; +import LineComponent from './LineComponent.vue'; +import JElDescription from "./JElDescription"; +import { useWebSocket } from '@/uitils/websocket'; export default { - setup() { - return { + data() { + return { + ws: null, // WebSocket瀹炰緥 + messages: [], // 娑堟伅鍒楄〃 + status: { // 杩炴帴鐘舵�� + isConnected: false, + error: null + }, + linescopy1: [ + { + equipNo: "1005", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + { + equipNo: "1006", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, - } - } -} + { + equipNo: "1007", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + }, + { + equipNo: "1008", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + } + ], + linescopy2: [ + { + equipNo: "1009", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + { + equipNo: "1010", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + + { + equipNo: "1011", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + }, + { + equipNo: "1025", + imgType: "1", + positionX: 0.6, + positionY: 21, + condition: false, + }, + { + equipNo: "1012", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + } + ], + linescopy3: [ + { + equipNo: "1017", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + { + equipNo: "1018", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + + { + equipNo: "1019", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + }, + { + equipNo: "1026", + imgType: "1", + positionX: 0.6, + positionY: 21, + condition: false, + }, + { + equipNo: "1020", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + } + ], + linescopy4: [ + { + equipNo: "1021", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + { + equipNo: "1022", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + + { + equipNo: "1023", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + }, + { + equipNo: "1024", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + } + ], + linescopy5: [ + { + equipNo: "1031", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + { + equipNo: "1032", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + + { + equipNo: "1033", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + }, + { + equipNo: "1034", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + } + ], + linescopy6: [ + { + equipNo: "1035", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + { + equipNo: "1036", + imgType: "1", + positionX: 0.6, + positionY: 8, + condition: false, + }, + + { + equipNo: "1037", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + }, + { + equipNo: "1038", + imgType: "1", + positionX: 0.6, + positionY: 20, + condition: false, + } + ], + linescopy7: [ + { + equipNo: "1001", + imgType: "1", + positionX: 5, + positionY: 8, + condition: false, + }, + { + equipNo: "1002", + imgType: "1", + positionX: 5, + positionY: 8, + condition: false, + }, + + { + equipNo: "1003", + imgType: "1", + positionX: 5, + positionY: 20, + condition: false, + }, + { + equipNo: "1004", + imgType: "1", + positionX: 5, + positionY: 20, + condition: false, + }, + ], + linescopy8: [ + { + equipNo: "1039", + imgType: "1", + positionX: 6, + positionY: 8, + condition: false, + }, + { + equipNo: "1040", + imgType: "1", + positionX: 6, + positionY: 16, + condition: false, + }, + ], + linescopy9: [ + { + equipNo: "1013", + imgType: "1", + positionX: 6, + positionY: 8, + condition: false, + }, + { + equipNo: "1014", + imgType: "1", + positionX: 6, + positionY: 16, + condition: false, + }, + ], + linescopy10: [ + { + equipNo: "1015", + imgType: "1", + positionX: 6, + positionY: 8, + condition: false, + }, + { + equipNo: "1016", + imgType: "1", + positionX: 6, + positionY: 16, + condition: false, + }, + ], + linescopy11: [ + { + equipNo: "1027", + imgType: "1", + positionX: 6, + positionY: 8, + condition: false, + }, + { + equipNo: "1028", + imgType: "1", + positionX: 6, + positionY: 16, + condition: false, + }, + + ], + linescopy12: [ + { + equipNo: "1029", + imgType: "1", + positionX: 6, + positionY: 8, + condition: false, + }, + { + equipNo: "1030", + imgType: "1", + positionX: 6, + positionY: 16, + condition: false, + }, + ], + + StackerCrane: { + Automatic: "", + Fault: "", + CurrentLayer: "", + CurrentRow: "1", + CurrentColumn: "", + CurrentTaskNum: "", + Running: "", + DeviceName: "", + DeviceCOde: "", + StackerAlarm: "", + }, + RGVFirst: false, + RGVSecond: false, + RGVThird: false, + xValue1: 0, + xValue2: 0, + xValue3: 0, + xValue4: 0, + xValue5: 0, + xValue6: 0, + timer1: null, // 瀹氭椂鍣ㄥ彉閲� + timer2: null, // 瀹氭椂鍣ㄥ彉閲� + RGV01: { + Automatic: "", + Fault: "", + LevelPoint: 0, + CurrentTaskNum: "", + Running: "", + DeviceName: "", + DeviceCode: "RGV01", + Alarm: "", + }, + RGV02: { + Automatic: "", + Fault: "", + LevelPoint: 1280, + CurrentTaskNum: "", + Running: "", + DeviceName: "", + DeviceCode: "RGV02", + Alarm: "", + }, + RGV03: { + Automatic: "", + Fault: "", + LevelPoint: 0, + CurrentTaskNum: "", + Running: "", + DeviceName: "", + DeviceCode: "RGV03", + Alarm: "", + }, + formRGV: { + TaskType: "", + SourceAddress: "", + TargetAddress: "", + DeviceCode: "", + }, + }; + }, + components: { + LineInfoCopy, + LineInfo, + LineComponent, + JElDescription, + }, + methods: { + groupedLines(linescopy) { + const groups = {}; + linescopy.forEach((line) => { + const positionY = line.positionY; + if (!groups[positionY]) { + groups[positionY] = { + positionY, + lines: [], + }; + } + groups[positionY].lines.push(line); + }); + return Object.values(groups); + }, + mouseClickRGVFirst() { + this.fullscreenLoading = true; + this.RGVFirst = true; + this.fullscreenLoading = false; + }, + mouseClickSecond() { + this.fullscreenLoading = true; + this.RGVSecond = true; + this.fullscreenLoading = false; + }, + mouseClickThird() { + this.fullscreenLoading = true; + this.RGVThird = true; + this.fullscreenLoading = false; + }, + SendCommand(x) { + this.fullscreenLoading = true; + this.formRGV.DeviceCode = x; + this.http.post("api/DeviceInfo/RGVHandTask", this.formRGV) + .then((x) => { + if (!x.status) { + this.$message.error(x.message); + } else { + this.$Message.success(x.message); + $vue.refresh(); + } + }) + .finally(() => { + this.fullscreenLoading = false; + }); + }, + RGVReset(x) { + this.fullscreenLoading = true; + this.http.post("api/DeviceInfo/RGVReset?DeviceCode=" + x, null, "") + .then((x) => { + if (!x.status) { + this.$message.error(x.message); + } else { + this.$Message.success(x.message); + + } + }) + .finally(() => { + this.fullscreenLoading = false; + }); + }, + RGVemergencyStop(x) { + this.fullscreenLoading = true; + this.http.post("api/DeviceInfo/RGVemergencyStop?DeviceCode=" + x, null, "") + .then((x) => { + if (!x.status) { + this.$message.error(x.message); + } else { + this.$Message.success(x.message); + + } + }) + .finally(() => { + this.fullscreenLoading = false; + }); + }, + RGVPause(x) { + this.fullscreenLoading = true; + this.http.post("api/DeviceInfo/RGVPause?DeviceCode=" + x, null, "") + .then((x) => { + if (!x.status) { + this.$message.error(x.message); + } else { + this.$Message.success(x.message); + } + }) + .finally(() => { + this.fullscreenLoading = false; + }); + }, + RGVCancel(x) { + this.fullscreenLoading = true; + this.http.post("api/DeviceInfo/RGVCancel?DeviceCode=" + x, null, "") + .then((x) => { + if (!x.status) { + this.$message.error(x.message); + } else { + this.$Message.success(x.message); + } + }) + .finally(() => { + this.fullscreenLoading = false; + }); + }, + RGVInitialize(x) { + this.fullscreenLoading = true; + this.http.post("api/DeviceInfo/RGVInitialize?DeviceCode=" + x, null, "") + .then((x) => { + if (!x.status) { + this.$message.error(x.message); + } else { + this.$Message.success(x.message); + } + }) + .finally(() => { + this.fullscreenLoading = false; + }); + }, + }, + computed: { + + }, + mounted() { + }, + created() { + + this.ws = new WebSocket('ws://localhost:9260/'); + + this.ws.onmessage = (event) => { + try { + const data = JSON.parse(event.data); + console.log('鏀跺埌娑堟伅:', data); + // 澶勭悊娑堟伅... + } catch (e) { + console.error('娑堟伅瑙f瀽澶辫触', e); + } + }; + const stackerComponentsMap = { + "SC01": 'stacker1', + "SC02": 'stacker2', + "SC03": 'stacker3', + "SC04": 'stacker4', + "SC05": 'stacker5', + "SC06": 'stacker6', + }; + // const componentKey = stackerComponentsMap[data.R_PP_Status]; + // if (componentKey) { + // this.StackerCrane.Automatic = data; + // this.StackerCrane.Fault = data; + // this.StackerCrane.Running = data; + // this.StackerCrane.CurrentColumn = data; + // this.StackerCrane.CurrentLayer = data; + // this.StackerCrane.LevelPoint = data; + // this.StackerCrane.DeviceName = data; + // this.StackerCrane.DeviceCode = data; + // this.StackerCrane.CurrentTaskNum = data; + // this.StackerCrane.StackerAlarm = data; + + // this.$nextTick(() => { + // this.$refs[componentKey].moveDot(this.StackerCrane); + // }); + // } + const stationMap = { + "SC011F": this.linescopy1, + "SC021F": this.linescopy2, + "SC031F": this.linescopy3, + "SC041F": this.linescopy4, + "SC051F": this.linescopy5, + "SC061F": this.linescopy6, + "SC071F": this.linescopy7, + "SC081F": this.linescopy8, + "SC091F": this.linescopy9, + "SC101F": this.linescopy10, + "SC111F": this.linescopy11, + "SC121F": this.linescopy12, + "SC012F": this.linescopy13, + "SC022F": this.linescopy13, + "SC032F": this.linescopy13, + "SC042F": this.linescopy13, + "SC052F": this.linescopy13, + "SC062F": this.linescopy13, + "SC072F": this.linescopy13, + "SC082F": this.linescopy14, + }; + + // var station = eventData.stationChildCode; + // if (stationMap[eventData.roadway]) { + // stationMap[eventData.roadway].forEach((line) => { + // if (line.equipNo === station) { + // line.condition = eventData.inStock; + // } + // }) + // } + }, +}; </script> <style scoped> +/* .positionY-group { + margin-bottom: 10px; +} */ .title { - line-height: 70vh; - text-align: center; - font-size: 28px; - color: orange; + height: 1800px; } -</style> \ No newline at end of file + +.cardWidth { + height: 100%; + width: 100%; + box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); +} + +.cardWidthrow { + height: 00%; + width: 100%; + /* margin-top: 10px; */ + box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); +} + +.divider { + top: 50px; +} + +.layerSize { + position: absolute; + top: 100px; + left: 30px; + color: fuchsi +} + +.stackerDiv { + border: 1px solid rgba(0, 195, 255, 0.822); + width: 980px; + padding-left: 3px; +} + +.stackDivName { + text-align: center; + color: rgba(0, 195, 255, 0.822); + margin-bottom: 12px; +} + +.dot-Running { + position: absolute; + top: -5px; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #409eff; + transition: transform 0.3s ease; + display: flex; + justify-content: center; + align-items: center; + font-size: 9px; + font-weight: bold; + color: white; +} + +.dot-Automatic { + position: absolute; + top: -5px; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #0df705; + transition: transform 0.3s ease; + display: flex; + justify-content: center; + align-items: center; + font-size: 9px; + font-weight: bold; + color: white; +} + +.dot-Fault { + position: absolute; + top: -5px; + width: 20px; + height: 20px; + /* right:0px; */ + border-radius: 50%; + background-color: #f80410; + transition: transform 0.3s ease; + display: flex; + justify-content: center; + align-items: center; + font-size: 9px; + font-weight: bold; + color: white; +} + + +.line-container { + position: relative; + height: 1280px; + background-color: #ecf5ff; + width: 20px; + top: 30px; + left: 200px +} + +.RGVline { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background-color: #a0cfff; +} + +.line { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background-color: #a0cfff; +} + +.line-containerThird { + position: absolute; + height: 20px; + background-color: #ecf5ff; + width: 1330px; + /* margin-top:180px; */ + top: 180px; + + left: 300px; +} + +.lineThird { + /* position: absolute; */ + height: 1px; + /* margin-top:180px; */ + background-color: #a0cfff; +}</style> \ No newline at end of file -- Gitblit v1.9.3