#

Junjie

2025-11-11 bfe469c7fa604a6431d58ea5e5143c959d76bd86

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

@@ -1,9 +1,22 @@
Vue.component('watch-crn-card', {
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,37 +58,43 @@
        </el-collapse>
    </div>
    `,
    props: ['param'],
  props: ["param"],
    data() {
        return {
            crnList: [],
            activeNames: '',
            searchCrnNo: ''
        }
      activeNames: "",
      searchCrnNo: "",
      showControl: true,
      controlParam: {
        crnNo: "",
        sourceLocNo: "",
        targetLocNo: "",
      },
    };
    },
    created() {
        setInterval(() => {
            this.getCrnStateInfo()
        },1000)
      this.getCrnStateInfo();
    }, 1000);
    },
    watch: {
        param: {
            handler(newVal, oldVal) {
                if(newVal.crnNo != 0) {
                    this.activeNames = newVal.crnNo
          this.activeNames = newVal.crnNo;
                }
            },
            deep: true,       // 深度监听嵌套属性
            immediate: true   // 立即触发一次（可选）
        }
      immediate: true, // 立即触发一次（可选）
    },
    },
    methods: {
        getCrnStateInfo() {
            let that = this
      let that = this;
            $.ajax({
                url: baseUrl + "/crn/table/crn/state",
                headers: {
                    'token': localStorage.getItem('token')
          token: localStorage.getItem("token"),
                },
                method: "post",
                success: (res) => {
@@ -83,20 +102,99 @@
                    if (res.code == 200) {
                        let list = res.data;

                        if (that.searchCrnNo == '') {
            if (that.searchCrnNo == "") {
                            that.crnList = list;
                        }else {
                            let tmp = []
              let tmp = [];
                            list.forEach((item) => {
                                if(item.crnNo == that.searchCrnNo) {
                                    tmp.push(item)
                  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",
            });
          }
        },
      });
    },
  },
});