From 37051424de7c4a97132fbb06e45df594790aabf9 Mon Sep 17 00:00:00 2001
From: wangxinhui <wangxinhui@hnkhzn.com>
Date: 星期二, 16 十二月 2025 18:40:38 +0800
Subject: [PATCH] 优化功能
---
项目代码/WCSClient/src/views/Home.vue | 1202 +++++++++++++++-----------------------------------------
1 files changed, 327 insertions(+), 875 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCSClient/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCSClient/src/views/Home.vue"
index c6990e4..962a6e8 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCSClient/src/views/Home.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCSClient/src/views/Home.vue"
@@ -1,890 +1,342 @@
<template>
- <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 { 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 {
- 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,
- },
- ],
+ <div class="container">
+ <div class="content-wrapper">
+ <!-- 鎺у埗闈㈡澘鍖哄煙 -->
+ <!-- <div class="form-group">
+ <label>鍖哄煙锛�</label>
+ <el-select
+ size="mini"
+ filterable
+ v-model="Area.shelf_code"
+ placeholder="璇烽�夋嫨"
+ class="full-width"
+ >
+ <el-option
+ v-for="item in slectData"
+ :value="item.shelf_code"
+ :label="item.house_name"
+ :key="item.house_name"
+ ></el-option>
+ </el-select>
+ </div> -->
+
+ <div class="form-group">
+ <div style="display:flex;flex-direction: column;">
+ <h4>璐т綅鎺�</h4>
+ <el-select
+ size="mini"
+ @change="SCChange"
+ v-model="Area.tunnel"
+ placeholder="璇烽�夋嫨鎺�"
+ class="full-width"
+ >
+ <el-option
+ v-for="item in scList"
+ :value="item"
+ :label="'绗�'+item+'鎺�'"
+ :key="item"
+ ></el-option>
+ </el-select>
+ <el-button type="success" class="refresh-btn" @click="GetViewData">
+ 鍒锋柊
+ </el-button>
+ </div>
- 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;
- });
- },
+ <div class="legend-section" style="margin-left: 20px;">
+ <h4>璇存槑</h4>
+ <div class="legend-grid">
+ <div
+ class="legend-item"
+ v-for="item in infoMsg"
+ :key="item.bgcolor"
+ >
+ <span
+ class="color-box"
+ :style="{ 'background-color': item.bgcolor }"
+ ></span>
+ <span class="legend-label">{{ item.msg }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 璐т綅灞曠ず鍖哄煙 -->
+ <div class="location-view">
+ <div
+ class="layer-container"
+ v-for="(item,index) in locationData"
+ :key="index"
+ >
+ <h3 class="layer-title">绗瑊{ item.layer }}灞�</h3>
+ <div class="row" >
+ <div
+ class="location-cell"
+ :style="{ 'background-color': GetBgColor(column) }"
+ v-for="(column,index) in item.locationObj" :key="index"
+ @mouseenter="showTooltip(column, $event)"
+ @mouseleave="hideTooltip"
+ >
+ {{ column.row }}-{{ column.column }}-{{ column.layer }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 鎮诞鎻愮ず妗� -->
+ <div
+ v-if="showTooltipFlag"
+ class="location-tooltip"
+ :style="{
+ left: tooltipPosition.x + 'px',
+ top: tooltipPosition.y + 'px',
+ }"
+ >
+ <div v-if="currentLocation">
+ <p><strong>璐т綅鍙�:</strong>{{ currentLocation.locationCode }}</p>
+ <p><strong>鏂欑鍙�:</strong>{{ currentLocation.barCode ? currentLocation.barCode :"鏃犳枡绠�" }}</p>
+ <p>
+ <strong>鎺掑垪灞�:</strong> {{ currentLocation.row }}鎺抺{
+ currentLocation.column
+ }}鍒梴{ currentLocation.layer }}灞�
+ </p>
+ <p><strong>鐘舵��:</strong> {{ getStatusText(currentLocation) }}</p>
+ <!-- <p>
+ <strong>绂佺敤:</strong>
+ {{ currentLocation.location_lock == 3 ? "鏄�" : "鍚�" }}
+ </p> -->
+ <!-- <p v-if="currentLocation.location_state > 0">
+ <strong>鐗╂枡缂栫爜:</strong>
+ {{ currentLocation.material_code || "鏃�" }}
+ </p>
+ <p v-if="currentLocation.location_state > 0">
+ <strong>鏁伴噺:</strong> {{ currentLocation.quantity || "鏃�" }}
+ </p> -->
+ </div>
+ </div>
+ </div>
+ </template>
+
+ <script>
+ import { ElButton } from "element-plus";
+import { el } from 'element-plus/es/locale';
+
+ export default {
+ data() {
+ return {
+ slectData: [],
+ scList: [],
+ Area: { house_name: "", tunnel: "", shelf_code: "" },
+ mian_height: "",
+ infoMsg: [
+ { bgcolor: "lightgreen", msg: "绌洪棽", state: 0 },
+ { bgcolor: "orange", msg: "鏈夎揣", state: 100 },
+ { bgcolor: "#2BB3D5", msg: "閿佸畾", state: 1 },
+ ],
+ locationData: [],
+ showTooltipFlag: false,
+ currentLocation: null,
+ tooltipPosition: { x: 0, y: 0 },
+ };
},
computed: {
-
+ GetBgColor() {
+ return (col) => {
+ var bgColor = "";
+ //浼樺厛鏄剧ず绂佺敤鐘舵��
+ if (col.location_lock > 0) {
+ this.infoMsg.forEach((el) => {
+ if (el.state === col.location_lock) {
+ bgColor = el.bgcolor;
+ }
+ });
+ }
+ else{
+ return "lightgreen";
+ }
+ return bgColor;
+ };
+ },
+ },
+ methods: {
+ GetViewData() {
+ var _this = this;
+ this.http
+ .post("/api/LocationInfo/GetLocationStatus?row=" + _this.Area.tunnel, {}, "鏌ヨ涓�")
+ .then((x) => {
+ _this.locationData = x.data;
+ });
+ },
+ // 鍒囨崲鎺�
+ SCChange() {
+ this.GetViewData();
+ },
+ showTooltip(location, event) {
+ this.currentLocation = location;
+ this.showTooltipFlag = true;
+
+ // 璁剧疆鎻愮ず妗嗕綅缃紝绋嶅井鍋忕Щ閬垮厤閬尅榧犳爣
+ this.tooltipPosition = {
+ x: event.clientX + 10,
+ y: event.clientY + 10,
+ };
+ },
+
+ hideTooltip() {
+ this.showTooltipFlag = false;
+ this.currentLocation = null;
+ },
+
+ getStatusText(location) {
+ // if (location.location_lock === 3) return "绂佺敤";
+ if (location.location_lock === 0) return "绌洪棽";
+ if (location.location_lock === 1) return "閿佸畾";
+ if (location.location_lock === 100) return "鏈夎揣";
+ // if (location.location_state > 0 && location.location_state < 100)
+ // return "閿佸畾";
+ return "鍏朵粬";
+ },
},
mounted() {
+ var mainHeight = document.getElementById("vol-main");
+ this.mian_height = mainHeight.offsetHeight - 40 + "px";
+ var _this = this;
+ //鍔犺浇涓嬫媺閫夐」
+ this.http.post("/api/LocationInfo/GetRow", {}, "鏌ヨ涓�").then((x) => {
+ //鍔犺浇绗竴涓尯鍩燂紝绗竴鎺�
+ // _this.Area.shelf_code = _this.slectData[0].shelf_code;
+ _this.scList = x.data;
+ _this.Area.tunnel = _this.scList[0];
+ _this.GetViewData();
+ });
},
- 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('娑堟伅瑙ｆ瀽澶辫触', 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 {
- height: 1800px;
-}
-
-.cardWidth {
+ components: { ElButton },
+ };
+ </script>
+
+ <style scoped>
+ .container {
+ display: flex;
+ flex-direction: column;
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 {
+ padding: 10px;
+ }
+
+ .header {
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;
+ margin-bottom: 20px;
+ }
+
+ .title {
+ font-size: 20px;
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;
+ margin: 0;
+ }
+
+ .content-wrapper {
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;
+ flex: 1;
+ min-height: 0;
+ padding: 10px;
+ }
+
+
+
+ .full-width {
+ width: 100%;
+ }
+
+ .refresh-btn {
+ margin-top: 10px;
+ width: 35%;
+ }
+
+
+ .legend-section h4 {
+ margin-bottom: 10px;
+ }
+
+ .legend-grid {
display: flex;
- justify-content: center;
+ grid-template-columns: 1fr;
+ gap: 8px;
+ }
+
+ .legend-item {
+ display: flex;
align-items: center;
- font-size: 9px;
- font-weight: bold;
- color: white;
-}
-
-
-.line-container {
- position: relative;
- height: 1280px;
- background-color: #ecf5ff;
+ }
+
+ .color-box {
+ display: inline-block;
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
+ margin-right: 8px;
+ border-radius: 3px;
+ }
+
+ .legend-label {
+ font-size: 13px;
+ }
+
+ .location-view {
+ flex: 1;
+ overflow: auto;
+ padding: 10px;
+ background-color: white;
+ border-radius: 4px;
+ }
+
+ .layer-container {
+ margin-bottom: 25px;
+ }
+
+ .layer-title {
+ margin: 0 0 10px 0;
+ font-size: 16px;
+ color: #333;
+ }
+
+ .row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 8px;
+ cursor: pointer;
+ }
+
+ .location-cell {
+ width: 66px;
+ height: 38px;
+ margin: 3px;
+ text-align: center;
+ font-size: 14px;
+ border-radius: 3px;
+ line-height: 38px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ }
+
+ .location-tooltip {
+ position: fixed;
+ z-index: 9999;
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 10px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ pointer-events: none;
+ max-width: 250px;
+ }
+
+ .location-tooltip p {
+ margin: 5px 0;
+ font-size: 13px;
+ line-height: 1.4;
+ }
+
+ .location-tooltip strong {
+ display: inline-block;
+ width: 70px;
+ color: #666;
+ }
+ .form-group{
+ display: flex;
+ }
+ </style>
\ No newline at end of file
--
Gitblit v1.9.3