#

Junjie

2025-11-11 bfe469c7fa604a6431d58ea5e5143c959d76bd86

 src/main/webapp/views/components/WatchCrnCard.js

@@ -1,9 +1,22 @@
Vue.component('watch-crn-card', {
    template: `
Vue.component("watch-crn-card", {
  template: `
    <div>
        <div style="display: flex;margin-bottom: 10px;">
            <div style="width: 100%;">堆垛机监控</div>
            <div style="width: 100%;text-align: right;display: flex;"><el-input size="mini" v-model="searchCrnNo" placeholder="请输入堆垛机号"></el-input><el-button @click="getCrnStateInfo" size="mini">查询</el-button></div>
        </div>
        <div style="margin-bottom: 10px;">
            <div style="margin-bottom: 5px;">
               <el-button @click="openControl" size="mini">控制中心</el-button>
            </div>
            <div v-if="showControl" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                <div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.crnNo" placeholder="堆垛机号"></el-input></div>
                <div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.sourceLocNo" placeholder="源点"></el-input></div>
                <div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.targetLocNo" placeholder="目标点"></el-input></div>
                <div style="margin-bottom: 10px;"><el-button @click="controlCommandTransport()" size="mini">取放货</el-button></div>
                <div style="margin-bottom: 10px;"><el-button @click="controlCommandMove()" size="mini">移动</el-button></div>
                <div style="margin-bottom: 10px;"><el-button @click="controlCommandTaskComplete()" size="mini">任务完成</el-button></div>
            </div>
        </div>
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(item) in crnList" :name="item.crnNo">
@@ -45,58 +58,143 @@
        </el-collapse>
    </div>
    `,
    props: ['param'],
    data() {
        return {
            crnList: [],
            activeNames: '',
            searchCrnNo: ''
  props: ["param"],
  data() {
    return {
      crnList: [],
      activeNames: "",
      searchCrnNo: "",
      showControl: true,
      controlParam: {
        crnNo: "",
        sourceLocNo: "",
        targetLocNo: "",
      },
    };
  },
  created() {
    setInterval(() => {
      this.getCrnStateInfo();
    }, 1000);
  },
  watch: {
    param: {
      handler(newVal, oldVal) {
        if (newVal.crnNo != 0) {
          this.activeNames = newVal.crnNo;
        }
      },
      deep: true, // 深度监听嵌套属性
      immediate: true, // 立即触发一次（可选）
    },
    created() {
        setInterval(() => {
            this.getCrnStateInfo()
        },1000)
    },
    watch: {
        param: {
            handler(newVal, oldVal) {
                if(newVal.crnNo != 0) {
                    this.activeNames = newVal.crnNo
                }
            },
            deep: true,       // 深度监听嵌套属性
            immediate: true   // 立即触发一次（可选）
        }
    },
    methods: {
        getCrnStateInfo() {
            let that = this
            $.ajax({
                url: baseUrl + "/crn/table/crn/state",
                headers: {
                    'token': localStorage.getItem('token')
                },
                method: "post",
                success: (res) => {
                    // 堆垛机信息表获取
                    if (res.code == 200) {
                        let list = res.data;

                        if (that.searchCrnNo == '') {
                            that.crnList = list;
                        }else {
                            let tmp = []
                            list.forEach((item) => {
                                if(item.crnNo == that.searchCrnNo) {
                                    tmp.push(item)
                                }
                            })
                            that.crnList = tmp;
                        }
                    }
                }
            })
  },
  methods: {
    getCrnStateInfo() {
      let that = this;
      $.ajax({
        url: baseUrl + "/crn/table/crn/state",
        headers: {
          token: localStorage.getItem("token"),
        },
    }
});
        method: "post",
        success: (res) => {
          // 堆垛机信息表获取
          if (res.code == 200) {
            let list = res.data;

            if (that.searchCrnNo == "") {
              that.crnList = list;
            } else {
              let tmp = [];
              list.forEach((item) => {
                if (item.crnNo == that.searchCrnNo) {
                  tmp.push(item);
                }
              });
              that.crnList = tmp;
            }
          }
        },
      });
    },
    openControl() {
      this.showControl = !this.showControl;
    },
    controlCommandTransport() {
      let that = this;
      //取放货
      $.ajax({
        url: baseUrl + "/crn/command/take",
        headers: {
          token: localStorage.getItem("token"),
        },
        contentType: "application/json",
        method: "post",
        data: JSON.stringify(that.controlParam),
        success: (res) => {
          if (res.code == 200) {
            that.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            that.$message({
              message: res.msg,
              type: "warning",
            });
          }
        },
      });
    },
    controlCommandMove() {
      let that = this;
      $.ajax({
        url: baseUrl + "/crn/command/move",
        headers: {
          token: localStorage.getItem("token"),
        },
        contentType: "application/json",
        method: "post",
        data: JSON.stringify(that.controlParam),
        success: (res) => {
          if (res.code == 200) {
            that.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            that.$message({
              message: res.msg,
              type: "warning",
            });
          }
        },
      });
    },
    controlCommandTaskComplete() {
      let that = this;
      $.ajax({
        url: baseUrl + "/crn/command/taskComplete",
        headers: {
          token: localStorage.getItem("token"),
        },
        contentType: "application/json",
        method: "post",
        data: JSON.stringify(that.controlParam),
        success: (res) => {
          if (res.code == 200) {
            that.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            that.$message({
              message: res.msg,
              type: "warning",
            });
          }
        },
      });
    },
  },
});