1

huangxiaoqiang

4 天以前 ec9c9add38591d7c7a2708ac43ed6b3fce1a4063

 ÏîÄ¿´úÂë/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,14 @@
  </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 - 59 : 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 +34,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" />
@@ -40,46 +43,112 @@
    </el-row>
  </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-dialog v-model="dialogVisible" title="堆垛机信息查看" :before-close="handleClose">
    <el-form ref="$form" :model="StackerCrane" label-position="left" label-width="120px" 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"
              ellipsis></j-el-description>
            <j-el-description :value="StackerCrane.Fault" 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_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-row :gutter="20" type="flex" justify="start" align="top" tag="div" style="margin-bottom: 10px;">
        <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>
      </el-row>
      <el-row :gutter="20" type="flex" justify="start" align="top" tag="div" style="margin-bottom: 10px;">
        <el-col :span="24" :offset="0" :push="0" :pull="0" tag="div">
          <el-form-item label="报警信息:">
            <j-el-description :value="StackerCrane.StackerAlarm" type="primary" ellipsis></j-el-description>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider />
      <h4 style="margin-bottom: 20px;">手动操作</h4>
      <el-form ref="form" :model="form" label-width="90px">
        <el-row :gutter="24" type="flex" justify="start" align="top" tag="div">
          <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
            <el-form-item label="坐标:">
              <!-- <j-el-description type="primary" ellipsis></j-el-description> -->
              <span style="font-size: 20px;color: #fc0303;">一楼库前出库坐标：2-1-1、 å…¥åº“坐标：3-1-1</span>
              <span style="font-size: 20px;color: #fc0303;">一楼库后出库坐标：3-1-34、入库坐标：2-1-34</span>
              <span style="font-size: 20px;color: #fc0303;">二楼库前出库坐标：2-2-1、 å…¥åº“坐标：3-2-1</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
          <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
            <el-form-item label="任务命令"  prop="TargetAddress">
              <el-select size="large" v-model="form.TaskType" placeholder="请选择任务命令">
                <el-option label="入库" value="17" />
                <el-option label="出库" value="18" />
                <el-option label="移库" value="20" />
                <el-option label="取货" value="24" />
                <el-option label="放货" value="48" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
          <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
            <el-form-item label="起点行列层:">
              <el-input size="large" v-model="form.SourceAddress" style="width: 800px" placeholder="请输入起点行列层" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
          <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
            <el-form-item label="终点行列层:">
              <el-input size="large" v-model="form.TargetAddress" style="width: 800px" placeholder="请输入终点行列层" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider />
      <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
        <el-col :span="8" :offset="0" :push="0" :pull="0" tag="div">
          <el-button type="primary" size="small" plain @click="start">
            <i class="el-icon-check">启动</i>
          </el-button>

        </el-col>
        <el-col :span="8" :offset="0" :push="0" :pull="0" tag="div">
          <el-button type="warning" size="small" plain @click="reset">
            <i class="el-icon-check">复位</i>
          </el-button>

        </el-col>
        <el-col :span="8" :offset="0" :push="0" :pull="0" tag="div">
          <el-button type="danger" size="small" plain @click="emergencyStop">
            <i class="el-icon-check">急停</i>
          </el-button>
        </el-col>
      </el-row>
    </el-form>
@@ -95,6 +164,7 @@
</template>

<script>
import { id } from "element-plus/es/locale";
import JElDescription from "./JElDescription";
export default {
  components: {
@@ -105,16 +175,24 @@
      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: "",
        DeviceCode: "",
        StackerAlarm:"",
      },
      form: {
        TaskType: "",
        SourceAddress: "",
        TargetAddress: "",
        DeviceCode: "",
      },
    };
  },
  props: {
@@ -125,37 +203,92 @@
  },
  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;
      this.StackerCrane.StackerAlarm = x.StackerAlarm;
      this.form.DeviceCode = x.DeviceCode;
    },
    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;
    },
    start() {
      this.fullscreenLoading = true;
      this.http.post("api/DeviceInfo/StackerHandTask", this.form)
        .then((x) => {
          if (!x.status) {
            this.$message.error(x.message);
          } else {
            this.$Message.success("堆垛机命令已下发");
            // $vue.success("成功.");
            this.show = false;
            $vue.refresh();
          }
        })
        .finally(() => {
          this.fullscreenLoading = false;
        });
    }, reset() {
      this.fullscreenLoading = true;
      this.http.post("api/DeviceInfo/StackerReset?DeviceCode=" + this.form.DeviceCode)
        .then((x) => {
          if (!x.status) {
            this.$message.error(x.message);
          } else {
            this.$Message.success("复位成功");
            // $vue.success("成功.");
            this.show = false;
            $vue.refresh();
          }
        })
        .finally(() => {
          this.fullscreenLoading = false;
        });
    },

    emergencyStop() {
      this.fullscreenLoading = true;
      this.http.post("api/DeviceInfo/StackerEmergencyStop?DeviceCode=" + this.form.DeviceCode)
        .then((x) => {
          if (!x.status) {
            this.$message.error(x.message);
          } else {
            this.$Message.success("急停已按下");
            // $vue.success("成功.");
            // this.show = false;
            // $vue.refresh();
          }
        })
        .finally(() => {
          this.fullscreenLoading = false;
        });
    }
  },
};
</script>
@@ -163,9 +296,9 @@
<style scoped>
.line-container {
  position: relative;
  height: 10px;
  height: 20px;
  background-color: #ecf5ff;
  width: 1570px;
  width: 960px;
}

.line {
@@ -177,11 +310,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 +324,42 @@
  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;
}