From 850105e8cdf0d048ef843d87520513ac77a64200 Mon Sep 17 00:00:00 2001
From: huangxiaoqiang <huangxiaoqiang@hnkhzn.com>
Date: 星期三, 23 七月 2025 21:21:53 +0800
Subject: [PATCH] 代码提交
---
项目代码/WCS/WIDESEAWCS_Client/src/views/Home.vue | 816 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 778 insertions(+), 38 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/Home.vue"
index 000c4e7..8852039 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/Home.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/Home.vue"
@@ -1,51 +1,791 @@
<template>
- <div class="title"></div>
- <el-container>
- <!-- <el-header >杩愯鏃ュ織</el-header> -->
- <el-main>
- <el-card v-for="(log, index) in logs" :key="index" class="log-card" :style="{ color: log.color }">
- <div :style="{ color: log.color }">{{ log.logEntry }}</div>
- <div :style="{ color: log.color }">{{ log.time }}</div>
- </el-card>
- </el-main>
- </el-container>
+ <div class="title">
+ <el-row style="height:100%">
+ <el-col :span="16">
+ <!-- 鍫嗗灈鏈� -->
+ <div style="position: relative; top: 50px;">
+ <div class="stackerDiv">
+ <div class="stackDivName">涓�鍙峰爢鍨涙満</div>
+ <LineComponent :x="xValue1" ref="lineComponent1" :equipNo="1"></LineComponent>
+ </div>
+ <el-divider></el-divider>
+ <div class="stackerDiv">
+ <div class="stackDivName">浜屽彿鍫嗗灈鏈�</div>
+ <LineComponent :x="xValue2" ref="lineComponent2" :equipNo="2"></LineComponent>
+ </div>
+ <div class="stackerDiv">
+ <div class="stackDivName">涓夊彿鍫嗗灈鏈�</div>
+ <LineComponent :x="xValue2" ref="lineComponent2" :equipNo="2"></LineComponent>
+ </div>
+ <div class="stackerDiv">
+ <div class="stackDivName">鍥涘彿鍫嗗灈鏈�</div>
+ <LineComponent :x="xValue2" ref="lineComponent2" :equipNo="2"></LineComponent>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="cardWidthrow">
+ <el-col :span="7">
+ <div class="cardWidth">
+ <div>
+ <span style="position: relative; top: 100px;left: 10px;">绗竴灞傚墠</span>
+ <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" />
+ </div>
+ </div>
+ </div>
+ <!-- <el-divider class="divider"></el-divider>
+ <div>
+ <span style="position: relative; top: 120px;left: 30px;">绗簩灞�</span>
+ <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" url="api/Equipment/GetLineInfoByNo"
+ :condition="line.condition" />
+ </div>
+ </div>
+ </div>
+ <el-divider class="divider"></el-divider>
+ <div>
+ <span style="position: relative; top: 120px;left: 30px;">绗笁灞�</span>
+ <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" url="api/Equipment/GetLineInfoByNo"
+ :condition="line.condition" />
+ </div>
+ </div>
+ </div> -->
+ </div>
+ </el-col>
+ <!-- <el-col :span="12">
+ <div>
+ <span style="position: relative; top: 120px;left: 30px;">绗洓灞�</span>
+ <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" url="api/Equipment/GetLineInfoByNo"
+ :condition="line.condition" />
+ </div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div>
+ <span style="position: relative; top: 120px;left: 30px;">绗簲灞�</span>
+ <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" url="api/Equipment/GetLineInfoByNo"
+ :condition="line.condition" />
+ </div>
+ </div>
+ </div>
+ </el-col> -->
+ </el-row>
+ </div>
</template>
<script>
-import { ref, onMounted } from 'vue'
-import eventBus from "@/uitils/eventBus";
-
+import { ref, reactive } from "vue";
+import LineInfoCopy from "./LineInfocopy.vue";
+import LineComponent from './LineComponent.vue';
+import eventBus from "../uitils/eventBus";
export default {
- setup() {
- const logs = ref([]);
- onMounted(() => {
- eventBus.on('Logs', eventData => {
- if (logs.value.length > 500) {
- logs.value = [];
- }
- const logEntry = "鏃ュ織淇℃伅锛�" + eventData.log
- const time = "鏃堕棿锛�" + eventData.time
- logs.value.unshift({ logEntry: logEntry, time: time, color: eventData.color });
-
- // logs.value.unshift(logEntry);
- });
- });
- return {
- logs
- }
- }
-}
+ data() {
+ return {
+ //#region 绗竴灞�
+ linescopy1: [
+ //#region 绗竴鎺�
+ {
+ equipNo: "1103",
+ imgType: "1",
+ positionX: 1,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "1102",
+ imgType: "1",
+ positionX: 2,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2103",
+ imgType: "1",
+ positionX: 2,
+ positionY: 1,
+ condition: false,
+ },
+ // {
+ // equipNo: "2102",
+ // imgType: "1",
+ // positionX: 5,
+ // positionY: 1,
+ // condition: false,
+ // },
+ //#endregion
+
+ //#region 绗簩鎺�
+ {
+ equipNo: "1104",
+ imgType: "1",
+ positionX: 1,
+ positionY: 4,
+ condition: false,
+ },
+ {
+ equipNo: "1101",
+ imgType: "1",
+ positionX: 2,
+ positionY: 4,
+ condition: false,
+ },
+ {
+ equipNo: "2104",
+ imgType: "1",
+ positionX: 2,
+ positionY: 4,
+ condition: false,
+ },
+ // {
+ // equipNo: "2101",
+ // imgType: "1",
+ // positionX: 5,
+ // positionY: 2,
+ // condition: false,
+ // },
+ //#endregion
+
+ ],
+ //#endregion
+
+ //#region 绗簩灞�
+ linescopy2: [
+ //#region 绗竴鎺�
+ {
+ equipNo: "1204",
+ imgType: "1",
+ positionX: 1,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "1203",
+ imgType: "1",
+ positionX: 2,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2204",
+ imgType: "1",
+ positionX: 4,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2203",
+ imgType: "1",
+ positionX: 5,
+ positionY: 1,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗簩鎺�
+ {
+ equipNo: "1205",
+ imgType: "1",
+ positionX: 1,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "1202",
+ imgType: "1",
+ positionX: 2,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2205",
+ imgType: "1",
+ positionX: 4,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2202",
+ imgType: "1",
+ positionX: 5,
+ positionY: 2,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗笁鎺�
+ {
+ equipNo: "1206",
+ imgType: "1",
+ positionX: 1,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "1201",
+ imgType: "1",
+ positionX: 2,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2205",
+ imgType: "1",
+ positionX: 4,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2201",
+ imgType: "1",
+ positionX: 5,
+ positionY: 3,
+ condition: false,
+ },
+ //#endregion
+
+ ],
+ //#endregion
+
+ //#region 绗笁灞�
+ linescopy3: [
+ //#region 绗竴鎺�
+ {
+ equipNo: "1304",
+ imgType: "1",
+ positionX: 1,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "1303",
+ imgType: "1",
+ positionX: 2,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2304",
+ imgType: "1",
+ positionX: 4,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2303",
+ imgType: "1",
+ positionX: 5,
+ positionY: 1,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗簩鎺�
+ {
+ equipNo: "1305",
+ imgType: "1",
+ positionX: 1,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "1302",
+ imgType: "1",
+ positionX: 2,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2305",
+ imgType: "1",
+ positionX: 4,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2302",
+ imgType: "1",
+ positionX: 5,
+ positionY: 2,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗笁鎺�
+ {
+ equipNo: "1306",
+ imgType: "1",
+ positionX: 1,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "1301",
+ imgType: "1",
+ positionX: 2,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2305",
+ imgType: "1",
+ positionX: 4,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2301",
+ imgType: "1",
+ positionX: 5,
+ positionY: 3,
+ condition: false,
+ },
+ //#endregion
+
+ ],
+ //#endregion
+
+ //#region 绗洓灞�
+ linescopy4: [
+ //#region 绗竴鎺�
+ {
+ equipNo: "1404",
+ imgType: "1",
+ positionX: 1,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "1403",
+ imgType: "1",
+ positionX: 2,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2404",
+ imgType: "1",
+ positionX: 4,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2403",
+ imgType: "1",
+ positionX: 5,
+ positionY: 1,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗簩鎺�
+ {
+ equipNo: "1405",
+ imgType: "1",
+ positionX: 1,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "1402",
+ imgType: "1",
+ positionX: 2,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2405",
+ imgType: "1",
+ positionX: 4,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2402",
+ imgType: "1",
+ positionX: 5,
+ positionY: 2,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗笁鎺�
+ {
+ equipNo: "1406",
+ imgType: "1",
+ positionX: 1,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "1401",
+ imgType: "1",
+ positionX: 2,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2405",
+ imgType: "1",
+ positionX: 4,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2401",
+ imgType: "1",
+ positionX: 5,
+ positionY: 3,
+ condition: false,
+ },
+ //#endregion
+
+ ],
+ //#endregion
+
+ //#region 绗簲灞�
+ linescopy5: [
+ //#region 绗竴鎺�
+ {
+ equipNo: "1504",
+ imgType: "1",
+ positionX: 1,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "1503",
+ imgType: "1",
+ positionX: 2,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2504",
+ imgType: "1",
+ positionX: 4,
+ positionY: 1,
+ condition: false,
+ },
+ {
+ equipNo: "2503",
+ imgType: "1",
+ positionX: 5,
+ positionY: 1,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗簩鎺�
+ {
+ equipNo: "1505",
+ imgType: "1",
+ positionX: 1,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "1502",
+ imgType: "1",
+ positionX: 2,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2505",
+ imgType: "1",
+ positionX: 4,
+ positionY: 2,
+ condition: false,
+ },
+ {
+ equipNo: "2502",
+ imgType: "1",
+ positionX: 5,
+ positionY: 2,
+ condition: false,
+ },
+ //#endregion
+
+ //#region 绗笁鎺�
+ {
+ equipNo: "1506",
+ imgType: "1",
+ positionX: 1,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "1501",
+ imgType: "1",
+ positionX: 2,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2505",
+ imgType: "1",
+ positionX: 4,
+ positionY: 3,
+ condition: false,
+ },
+ {
+ equipNo: "2501",
+ imgType: "1",
+ positionX: 5,
+ positionY: 3,
+ condition: false,
+ },
+ //#endregion
+
+ ],
+ //#endregion
+
+ xValue1: 0,
+ xValue2: 0,
+ timer1: null, // 瀹氭椂鍣ㄥ彉閲�
+ timer2: null, // 瀹氭椂鍣ㄥ彉閲�
+ result1: 0,
+ result1: 1,
+ };
+ },
+ components: {
+ LineInfoCopy,
+ LineComponent,
+ },
+ 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);
+ },
+ async increase() {
+ this.xValue1 += 100;
+ this.xValue2 += 100;
+ // let abc = this.xValue + 100;
+ // for (this.xValue; this.xValue < abc; this.xValue++) {
+ // await this.delay(10);
+ if (this.xValue1 > 1120) {
+ this.xValue1 = 1120;
+ this.xValue2 = 1120;
+ }
+ this.$nextTick(() => {
+ this.$refs.lineComponent1.moveDot(this.xValue1);
+ });
+ this.$nextTick(() => {
+ this.$refs.lineComponent2.moveDot(this.xValue2);
+ });
+ // }
+ },
+ async decrease() {
+ this.xValue1 -= 100;
+ this.xValue2 -= 100;
+ if (this.xValue1 < 0) {
+ this.xValue1 = 0;
+ this.xValue2 = 0;
+ }
+ // let abc = this.xValue - 100;
+ // for (this.xValue; this.xValue > abc; this.xValue--) {
+ // await this.delay(10);
+ this.$nextTick(() => {
+ this.$refs.lineComponent1.moveDot(this.xValue1);
+ });
+ this.$nextTick(() => {
+ this.$refs.lineComponent2.moveDot(this.xValue2);
+ });
+ // }
+ },
+ delay(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ },
+ startTimer() {
+ // 寮�鍚畾鏃跺櫒锛屾瘡3绉掓墽琛屼竴娆�
+ this.timer1 = setInterval(() => {
+ // 鎵ц瀹氭椂鍣ㄧ殑鎿嶄綔
+ this.methodofexecution(1)
+ if (this.result1 <= 0) {
+ this.result1 = 0
+ }
+ this.$nextTick(() => {
+ this.$refs.lineComponent1.moveDot(this.result1);
+ });
+ }, 3000);
+ // 寮�鍚畾鏃跺櫒锛屾瘡3绉掓墽琛屼竴娆�
+ this.timer2 = setInterval(() => {
+ // 鎵ц瀹氭椂鍣ㄧ殑鎿嶄綔
+ this.methodofexecution(2)
+ if (this.result2 <= 0) {
+ this.result2 = 0
+ }
+ this.$nextTick(() => {
+ this.$refs.lineComponent2.moveDot(this.result2);
+ });
+ }, 3000);
+ },
+ stopTimer() {
+ // 鍏抽棴瀹氭椂鍣�
+ clearInterval(this.timer1);
+ clearInterval(this.timer2);
+ },
+ //鑾峰彇骞惰绠楀爢鍨涙満浣嶇疆
+ methodofexecution(equipNo, data, x) {
+ if (x) {
+ let WalkingLaserValue = data.r_Stack_WalkingLaserValue;
+ let Value = ((WalkingLaserValue - 1200) / 50) + 10
+ if (equipNo === 1) {
+ this.result1 = Value
+ }
+ else if (equipNo === 2) {
+ this.result2 = Value
+ }
+ } else {
+ // this.$message({
+ // type: "error",
+ // message: "x.message",
+ // });
+ }
+ }
+ },
+ computed: {
+
+ },
+ mounted() {
+ // 鍒濆鍖栭〉闈㈡椂寮�鍚畾鏃跺櫒
+ // this.startTimer();
+ // // 鐩戝惉璺敱鍙樺寲
+ // this.$router.beforeEach((to, from, next) => {
+ // this.stopTimer(); // 鍏抽棴瀹氭椂鍣�
+ // next(); // 缁х画璺敱瀵艰埅
+ // });
+ },
+ created() {
+ eventBus.on('stackerData', eventData => {
+ // 鏇存柊缁勪欢鐨勬暟鎹�
+ this.methodofexecution(parseInt(eventData.plcName, 10), eventData.data, true)
+ const lineComponentsMap = {
+ 1: 'lineComponent1',
+ 2: 'lineComponent2',
+ };
+
+ const resultsMap = {
+ 1: this.result1,
+ 2: this.result2,
+ };
+
+ const componentKey = lineComponentsMap[eventData.plcName];
+ const result = resultsMap[eventData.plcName];
+
+ if (componentKey && result !== undefined) {
+ this.$nextTick(() => {
+ this.$refs[componentKey].moveDot(result);
+ });
+ }
+ });
+
+ eventBus.on("LineData", eventData => {
+ const stationMap = {
+ "11": this.linescopy1,
+ "10": this.linescopy1,
+ "12": this.linescopy2,
+ "22": this.linescopy2,
+ "13": this.linescopy3,
+ "23": this.linescopy3,
+ "14": this.linescopy4,
+ "24": this.linescopy4,
+ "15": this.linescopy5,
+ "25": this.linescopy5
+ };
+
+ var station = eventData.station_code;
+ var layer = station.substring(0, 2);
+
+ if (stationMap[layer]) {
+ stationMap[layer].forEach((line) => {
+ if (line.equipNo === station) {
+ line.condition = eventData.r_Line_HasPallet === 1;
+ }
+ })
+ }
+ })
+
+ for (let i = 1; i < 6; i++) {
+ this.methodofexecution(i, null, false)
+ }
+ },
+};
</script>
<style scoped>
+/* .positionY-group {
+ margin-bottom: 10px;
+} */
.title {
- line-height: 70vh;
- text-align: center;
- font-size: 28px;
- color: orange;
+ height: 800px;
+ margin-left: 20px;
}
-.log-card {
- margin-bottom: 10px;
+.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: 40%;
+ 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: 1600px;
+ padding-left: 3px;
+}
+
+.stackDivName {
+ text-align: center;
+ color: rgba(0, 195, 255, 0.822);
+ margin-bottom: 12px;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3