1

huangxiaoqiang

3 天以前 3296ae7c136f405db78c395635e72efa1c0d0125

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

@@ -1,131 +1,325 @@
<template>
  <div>
    <el-popover placement="bottom" :title="equipNo" width="200" trigger="click">
      <template #reference>
        <div :style="{
          color: equipNoFontColor,
          width: width,
          height: height,
          left: left,
          top: top,
          margin_top: marginTop
        }" style="position: absolute" @click="mouseClick">
          <img v-if="imgType == '1'" src="../../public/lines.png" style="width: 40px" />
          <img v-if="imgType == '1'" src="../../public/lines2.png" style="width: 40px" />
          <label v-if="equipNo != ''" style="position: relative; margin-left: 5px; top: -35px;font-size: 12px;">{{
            equipNo }}</label>
        </div>
      </template>
      <el-row>
        <el-col :span="12">是否有盘:</el-col>
        <el-col :span="12">{{ lineItemInfo.r_Line_HasPallet }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">托盘条码</el-col>
        <el-col :span="12">{{ lineItemInfo.r_Line_Barcode }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">目标位置</el-col>
        <el-col :span="12">{{ lineItemInfo.r_Line_Target }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">任务号</el-col>
        <el-col :span="12">{{ lineItemInfo.r_Line_TaskNum }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">报警代码</el-col>
        <el-col :span="12">{{ lineItemInfo.r_Line_ErrorCode }}</el-col>
      </el-row>
    </el-popover>
  </div>
   <div :class="update()" :style="{ left: left, top: top, marginBottom: 0 + 'px', marginTop: 0 + 'px' }"
      @click="mouseClick" v-loading.fullscreen.lock="fullscreenLoading">
      <img v-if="imgType === '2'" src="../../public/lines.png" />
      <img v-if="imgType === '1'" src="../../public/lines2.png" />
      <label v-if="equipNo" class="equip-no">{{ equipNo }}</label>
   </div>
   <el-dialog v-model="dialogVisible" title="输送线信息查看" :before-close="handleClose">
      <el-form ref="$form" :model="lineItemInfo" 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="设备编号：">
                  <j-el-description :value="equipNo" 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="lineItemInfo.inStock" 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="lineItemInfo.taskNumm" 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="lineItemInfo.alarm" type="primary" ellipsis></j-el-description>
               </el-form-item>
            </el-col>
         </el-row>

      </el-form><el-divider />
      <h4 style="margin-bottom: 20px;">手动操作</h4>
      <el-form ref="form" :model="form" label-width="100px">
         <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="1" />
                     <el-option label="出库" value="2" />
                  </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.TargetAddress" 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="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="primary" size="small" plain @click="SendCommand">
               <i class="el-icon-check">发送命令</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="warning" size="small" plain @click="ConveyorLineReset">
               <i class="el-icon-check">复位</i>
            </el-button>

         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineEmergencyStop">
               <i class="el-icon-check">停止</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineReturn">
               <i class="el-icon-check">退回</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineCancel">
               <i class="el-icon-check">取消任务</i>
            </el-button>
         </el-col>
         <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
            <el-button type="danger" size="small" plain @click="ConveyorLineInitialize">
               <i class="el-icon-check">工位初始化</i>
            </el-button>
         </el-col>
      </el-row>
      <template #footer>
         <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
               ç¡®è®¤
            </el-button>
         </div>
      </template>
   </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import JElDescription from "./JElDescription";
export default defineComponent({
  props: {
    equipNoFontColor: {
      type: String,
      default: "blue",
    },
    width: {
      type: String,
      default: "40px",
    },
    height: {
      type: String,
      default: "40px",
    },
    equipNo: {
      type: String,
      default: "0",
    },
    imgType: {
      type: String,
      default: "1",
    },
    positionX: {
      type: Int32Array,
      default: 1,
    },
    positionY: {
      type: Int32Array,
      default: 1,
    },
    url: {
      type: String,
      default: "",
    },
    marginTop: {
      type: String,
      default: "10px",
    }
    // mouseClick: {
    //   type: Function,
    //   default: function () {
    //     alert(this.equipNo);
    //   },
    // },
  },
  data() {
    return {
      left: "20px",
      top: "260px",
      lineItemInfo: {
        r_Line_Barcode: "",
        r_Line_HasPallet: "",
        r_Line_TaskNum: "",
        r_Line_ErrorCode: "",
        r_Line_Target: "",
      },
    };
  },
  mounted: function () {
    var axisX = (this.positionX - 1) * 40 + 100;
    this.left = axisX + "px";
   components: {
      JElDescription
   },
   props: {
      equipNoFontColor: {
         type: String,
         default: "blue",
      },
      equipNo: {
         type: String,
         default: "0",
      },
      imgType: {
         type: String,
         default: "1",
      },
      positionX: {
         type: Int32Array,
         default: 1,
      },
      positionY: {
         type: Int32Array,
         default: 1,
      },
      url: {
         type: String,
         default: "",
      },
      condition: {
         type: Boolean,
         default: false,
      },
   },
   data() {
      return {
         left: "500px",
         top: "400px",
         dialogVisible: false,
         lineItemInfo: {
            inStock: "",
            taskNum: "",
            alarm: "",
         },
         form: {
            TaskType: "",
            TargetAddress: "",
            DeviceCode: "",
         },
      };
   },
   mounted() {
      const axisX = (this.positionX - 1) * 40 + 100;
      const axisY = (this.positionY - 1) + 50;
      this.$nextTick(() => {
         this.left = `${axisX}px`;
         this.top = `${axisY}px`;
      });
   },
   methods: {
      mouseClick() {
         this.fullscreenLoading = true;
         this.dialogVisible = true;
         // å¤„理点击事件
         this.http.post("api/DeviceInfo/GetConveyorLineInfo?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (x.status) {
                  this.lineItemInfo = x.data;
               } else {
                  this.$message({
                     type: "error",
                     message: x.message,
                  });
               }
            });

    var axisY = (this.positionY - 1) * 40 + 50;
    this.top = axisY + "px";
  },
  methods: {
    mouseClick() {
      if (this.url != "") {
        this.http
          .post(this.url + "?equipNo=" + this.equipNo, null, "")
          .then((x) => {
            if (x.status) {
              this.lineItemInfo = x.data;
            } else {
              this.$message({
                type: "error",
                message: x.message,
              });
            }
          });
      }
    },
  },
         this.fullscreenLoading = false;
      },

      SendCommand() {
         this.fullscreenLoading = true;
         this.form.DeviceCode=this.equipNo;
         this.http.post("api/DeviceInfo/ConveyorLineHandTask" ,this.form)
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      }, 
      ConveyorLineReset() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineReset?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);

               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      ConveyorLineEmergencyStop() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineEmergencyStop?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);

               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      }, 
      ConveyorLineReturn() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineReturn?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      ConveyorLineCancel() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineCancel?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      ConveyorLineInitialize() {
         this.fullscreenLoading = true;
         this.http.post("api/DeviceInfo/ConveyorLineInitialize?DeviceChildCode=" + this.equipNo, null, "")
            .then((x) => {
               if (!x.status) {
                  this.$message.error(x.message);
               } else {
                  this.$Message.success(x.message);
               }
            })
            .finally(() => {
               this.fullscreenLoading = false;
            });
      },
      update() {
         return !this.condition ? 'custom-img' : 'custom-img-color'
      },
      startTimer() {
         // å¼€å¯å®šæ—¶å™¨ï¼Œæ¯3秒执行一次
         this.timer1 = setInterval(() => {
            update();
         }, 500);
      },
   },
});
</script>

<style scoped></style>
<style scoped>
.custom-img {
   position: relative;
   display: inline-block;
   /* background-color:  #d9ecff ; */
}

.custom-img-color {
   position: relative;
   display: inline-block;
   background-color: #05fa7f;
   color: white;
   text-align: center;
}

/* .custom-img-color::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #05fa7f;
  border-radius: 50%;  
} */

.custom-img img {
   width: 40px;
   height: 40px;
}

.custom-img-color img {
   width: 40px;
   height: 40px;
}

.equip-no {
   position: absolute;
   top: 15px;
   font-size: 12px;
   margin-left: -35px;
}
</style>