代码提交

huangxiaoqiang

2025-07-29 f23e0326aa05a1c5b47d4aec4c06e73d0d86b8e7

 ÏîÄ¿´úÂë/WCS/WIDESEAWCS_Client/src/views/LineComponent.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-row>
      <template v-for="item in 56" :key="item">
      <template v-for="item in 32" :key="item">
        <el-col :span="0.9">
          <span class="image-text"></span>
          <img src="../../public/货架.jpeg" />
@@ -9,7 +9,7 @@
      </template>
    </el-row>
    <el-row style="padding-bottom: 5px;">
      <template v-for="item in 56" :key="item">
      <template v-for="item in 32" :key="item">
        <el-col :span="0.9">
          <span class="image-text"></span>
          <img src="../../public/货架.jpeg" />
@@ -19,11 +19,12 @@
  </div>
  <div class="line-container">
    <div class="line"></div>
    <div class="dot" :style="{ right: dotPosition + 'px' }" ref="childDot" @click="mouseClick"></div>
    <!-- <div class="dot" :style="{ right: dotPosition + 'px' }" ref="childDot" @click="mouseClick"></div> -->
    <div :class="update()" :style="{ transform: `translateX(${StackerCrane.CurrentColumn<33?StackerCrane.CurrentColumn * 30-29:0}px)` }" ref="childDot" @click="mouseClick"></div>
  </div>
  <div>
    <el-row style="padding-top: 5px;">
      <template v-for="item in 56" :key="item">
      <template v-for="item in 32" :key="item">
        <el-col :span="0.9">
          <span class="image-text"></span>
          <img src="../../public/货架.jpeg" />
@@ -31,7 +32,7 @@
      </template>
    </el-row>
    <el-row style="padding-bottom: 5px;">
      <template v-for="item in 56" :key="item">
      <template v-for="item in 32" :key="item">
        <el-col :span="0.9">
          <span class="image-text"></span>
          <img src="../../public/货架.jpeg" />
@@ -41,17 +42,17 @@
  </div>

  <el-dialog v-model="dialogVisible" title="信息查看" :before-close="handleClose">
    <el-form ref="$form" :model="stackerItemInfo" label-position="left" label-width="100px" size="medium">
    <el-form ref="$form" :model="StackerCrane" label-position="left" label-width="100px" size="medium">
      <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
        <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
          <el-form-item label="设备编号：">
            <!-- <el-input v-model="equipNo"></el-input> -->
            <j-el-description :value="equipNo" type="primary" ellipsis></j-el-description>
            <j-el-description :value="StackerCrane.DeviceName" type="primary" ellipsis></j-el-description>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
          <el-form-item label="设备状态:">
            <j-el-description :value="stackerItemInfo.r_Stack_EquipmentStatus" type="primary"
            <j-el-description :value="StackerCrane.Fault" type="primary"
              ellipsis></j-el-description>
          </el-form-item>
        </el-col>
@@ -59,25 +60,25 @@
      <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
        <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
          <el-form-item label="工作模式:">
            <j-el-description :value="stackerItemInfo.r_Stack_WorkPattern" type="primary" ellipsis></j-el-description>
            <j-el-description :value="StackerCrane.Automatic" type="primary" ellipsis></j-el-description>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
          <el-form-item label="任务号：">
            <j-el-description :value="stackerItemInfo.r_Stack_tasknumber" type="primary" ellipsis></j-el-description>
            <j-el-description :value="StackerCrane.CurrentTaskNum" type="primary" ellipsis></j-el-description>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
        <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
          <el-form-item label="作业状态:">
            <j-el-description :value="stackerItemInfo.r_Stack_jobstate" type="primary" ellipsis></j-el-description>
            <j-el-description :value="StackerCrane.Running" type="primary" ellipsis></j-el-description>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
          <el-form-item label="当前行列层：">
            <j-el-description
              :value="stackerItemInfo.r_Stack_linenum + '-' + stackerItemInfo.r_Stack_olumnnum + '-' + stackerItemInfo.r_Stack_layernum"
              :value="StackerCrane.CurrentRow + '-' + StackerCrane.CurrentColumn + '-' + StackerCrane.CurrentLayer"
              type="primary" ellipsis></j-el-description>
          </el-form-item>
        </el-col>
@@ -95,6 +96,7 @@
</template>

<script>
import { id } from "element-plus/es/locale";
import JElDescription from "./JElDescription";
export default {
  components: {
@@ -105,15 +107,15 @@
      x: 0, // åˆå§‹x值
      url: "api/Equipment/GetStackerInfoByNo",
      dialogVisible: false,
      stackerItemInfo: {
        r_Stack_EquipmentStatus: "",
        r_Stack_jobstate: "",
        r_Stack_layernum: "",
        r_Stack_linenum: "",
        r_Stack_olumnnum: "",
        r_Stack_tasknumber: "",
        r_Stack_WalkingLaserValue: "",
        r_Stack_WorkPattern: "",
      StackerCrane: {
        Automatic: "",
        Fault: "",
        CurrentLayer: "1",
        CurrentRow: "1",
        CurrentColumn: "1",
        CurrentTaskNum: "",
        Running: "",
        DeviceName: "",
      }
    };
  },
@@ -125,36 +127,38 @@
  },
  computed: {
    dotPosition() {
      return -this.x;
      return this.x;
    },
  },
  mounted() {
    this.moveDot(-this.x);
    this.moveDot(this.x);
  },
  methods: {
    moveDot(x) {
      const dot = this.$refs.childDot;
      dot.style.transform = `translateX(${-x}px)`;
        this.StackerCrane.Automatic=x.Automatic==null?"故障":x.Automatic;
            this.StackerCrane.Fault=x.Fault==null?"故障":x.Fault;
            this.StackerCrane.Running=x.Running==null?"故障":x.Running;
            this.StackerCrane.CurrentColumn=x.CurrentColumn==undefined?1:x.CurrentColumn;
            this.StackerCrane.CurrentLayer=x.CurrentLayer==undefined?1:x.CurrentLayer;
            this.StackerCrane.LevelPoint=x.LevelPoint;
            this.StackerCrane.DeviceName=x.DeviceName;
    },
    update(){
      if(this.StackerCrane.Automatic=="联机模式"&&this.StackerCrane.Fault!="故障"&&this.StackerCrane.Running=="待机"){
          return 'dot-Automatic ';
        }
        else if(this.StackerCrane.Automatic=="联机模式"&&this.StackerCrane.Fault!="故障"&&this.StackerCrane.Running=="运行中"){
          return 'dot-Running ';
        }else if(this.StackerCrane.Fault=="故障"){
          return 'dot-Fault ';
        }else{
          return 'dot-Fault ';
        }
      },
    mouseClick() {
      this.fullscreenLoading = true;
      this.dialogVisible = true;
      // å¤„理点击事件
      if (this.url != "") {
        this.http.post(this.url + "?equipNo=" + this.equipNo, null, "")
          .then((x) => {
            if (x.status) {
              this.stackerItemInfo = x.data;
            } else {
              this.$message({
                type: "error",
                message: x.message,
              });
            }
          });
      }
      this.fullscreenLoading = false;
      // this.dialogVisible = false;
    },
  },
};
@@ -163,9 +167,9 @@
<style scoped>
.line-container {
  position: relative;
  height: 10px;
  height: 20px;
  background-color: #ecf5ff;
  width: 1570px;
  width: 960px;
}

.line {
@@ -177,11 +181,11 @@
  background-color: #a0cfff;
}

.dot {
.dot-Running {
  position: absolute;
  top: -5px;
  width: 20px;
  height: 20px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #409eff;
  transition: transform 0.3s ease;
@@ -191,14 +195,41 @@
  font-size: 9px;
  font-weight: bold;
  color: white;
  /* background-image: url("../../public/堆垛机.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; */
}
.dot-Automatic {
  position: absolute;
  top: -5px;
  width: 25px;
  height: 25px;
  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: 25px;
  height: 25px;
  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;
}

img {
  width: 28px;
  width: 30px;
  height: 25px;
}