更新从后台往前端推送数据

ZengTao

2023-09-06 3879216b974b6a54232dd03017e0695186cea092

更新从后台往前端推送数据

 CanadaMes-ui/src/api/home.js

@@ -42,3 +42,11 @@
        data :""

    })

}



export function UpdateTask(types,shelf_rack) {

    return request({

        url: '/home/UpdateTask?types=' + types + '&shelf_rack'+shelf_rack,

        method: 'get',

        data :""

    })

}


 CanadaMes-ui/src/views/device/talkvue.vue

@@ -3,25 +3,22 @@

  <div>
    <button @click="send()">测试发送</button>
  <button @click="ttt()">测试发送</button>
    <button @click="ttt()">测试发送</button>

  </div>



</template>
    
<script>
let socket;
export default {
  name: "talkvue",
 

  data() {
    return {
      messagepack: {
        data: { taskname:"" }
        data: { taskname: "" }
      },
      qqqq:{},
      qqqq: {},
      queryInfo: {
        data: "1",
        pageSize: 10
@@ -30,7 +27,7 @@
  },
  created() {
    this.init();
    

  },
  methods:
  {
@@ -58,8 +55,8 @@
          console.log("收到数据====" + msg.data)

          // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
          this.qqqq= JSON.parse(msg.data);
console.log(this.qqqq);
          this.qqqq = JSON.parse(msg.data);
          console.log(this.qqqq);
        };
        //关闭事件
        socket.onclose = function () {
@@ -72,13 +69,13 @@
      }
    },
    send() {
      this.messagepack.data =  {taskname:"前端到后台"} ;
      this.messagepack.data = { taskname: "前端到后台" };
      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端，由服务端进行转发
    },
    ttt() {
      console.log(this.qqqq)
    },
    

  }
}
</script>

 CanadaMes-ui/src/views/home/index.vue

@@ -91,7 +91,7 @@
    background-size: 32px 66px;

    background-attachment: local;

    width: 32px;

    


    position: absolute;

    /* left: 116px; */

    /* left:1060px;18.88px */

@@ -102,10 +102,12 @@
.el-table th {

    padding: 8px 0;

}

.el-table__empty-block{



.el-table__empty-block {

    min-height: 41px;

}

.el-table__empty-text{



.el-table__empty-text {

    line-height: 41px;

}

</style>

@@ -120,11 +122,11 @@
                <el-button type="warning" @click="getOrder()">Exit the glass by order number</el-button>

            </div>

            <div>

                <el-table :data="this.tasklist1" border style="width: 100%">

                <el-table :data="this.tasklist1" border style="width: 100%" >

                    <el-table-column prop="glassId" label="Coming out glass ID"></el-table-column>

                    <el-table-column :width="250" prop="cage" label="The Grille number being used"></el-table-column>

                    <el-table-column prop="orderId" label="Order Nmuber"></el-table-column>

                    <el-table-column prop="glasswidth" label="Length and width"></el-table-column>

                    <el-table-column prop="lengthwidth" label="Length and width"></el-table-column>

                    <el-table-column prop="coating" label="coating"></el-table-column>

                    <el-table-column label="Operate">

                        <el-button type="primary" style="padding: 4px 10px;font-size: 12px;">end task</el-button>

@@ -134,7 +136,7 @@
                    <el-table-column prop="glassId" label="Incoming glass ID"></el-table-column>

                    <el-table-column :width="250" prop="cage" label="The Grille number being used"></el-table-column>

                    <el-table-column prop="orderId" label="Order Nmuber"></el-table-column>

                    <el-table-column prop="glasswidth" label="Length and width"></el-table-column>

                    <el-table-column prop="lengthwidth" label="Length and width"></el-table-column>

                    <el-table-column prop="coating" label="coating"></el-table-column>

                    <el-table-column label="Operate">

                        <el-button type="primary" style="padding: 4px 10px;font-size: 12px;">end task</el-button>

@@ -168,10 +170,10 @@
                <div style="display:flex;position: absolute;float:left;z-index: 999;top:102px;left:682.5px;">

                    <div :class="getStatusClass(item.state)" v-for="item in cagelist4" :key="item['date']"></div>

                </div>

                <div class="blocks-img" :style="{ left: car1 + 'px' ,top: '10px'}">

                <div class="blocks-img" :style="{ left: car1 + 'px', top: '10px' }">



                </div>

                <div class="blocks-img" :style="{ left: car2 + 'px' ,top: '129px'}">

                <div class="blocks-img" :style="{ left: car2 + 'px', top: '129px' }">



                </div>

            </div>

@@ -205,8 +207,9 @@


import { home, home2, loadtask, InsertOrder, Addglassid } from "../../api/home";





let socket;

export default {

    name: "Home",

    data() {

        return {

            dialogFormVisible: false,

@@ -234,8 +237,68 @@
    },

    created() {

        this.load();

        this.init();

    },

    methods: {

        init() {

            let viewname = "Home";



            if (typeof (WebSocket) == "undefined") {

                console.log("您的浏览器不支持WebSocket");

            } else {

                //console.log("您的浏览器支持WebSocket");



                let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;

                if (socket != null) {

                    socket.close();

                    socket = null;

                }

                // 开启一个websocket服务

                socket = new WebSocket(socketUrl);

                //打开事件

                socket.onopen = function () {

                    console.log("websocket已打开");

                };

                //  浏览器端收消息，获得从服务端发送过来的文本消息

                socket.onmessage = function (msg) {



                    //console.log("收到数据====" + msg.data);

                    let obj = JSON.parse(msg.data);

                    //this.$set(this.record.params, 0, obj.params[0]);



                    this.car1 = 116 + 18.88 * obj.params[0][0];

                    this.car2 = 187 + 18.8 * obj.params[0][1];

                    this.tableData=obj.tableData[0];

                    this.cagelist1=obj.cagelist1[0];

                    this.cagelist2=obj.cagelist2[0];

                    this.cagelist3=obj.cagelist3[0];

                    this.cagelist4=obj.cagelist4[0];

                    this.tasklist1=obj.tasklist1[0];

                    this.tasklist2=obj.tasklist2[0];

                
                    // for (let a = 0; a <= this.record.params.length - 1; a++) {

                    //     // this.record.xyData[a] = [this.record.canshu[a], this.record.params[0][a]];

                    //     // this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };



                    //     // this.record.xyData[a].value = this.record.params[0][a];

                    //     this.car1=this.record.params[0][a];

                    //     console.log(this.record.params[0][a]);





                    // }

                    this.$forceUpdate();



                }.bind(this);

                //关闭事件

                socket.onclose = function () {

                    console.log("websocket已关闭");

                };

                //发生了错误事件

                socket.onerror = function () {

                    console.log("websocket发生了错误");

                }

            }

        },

        load() {

            home().then(res => {

                this.tableData = res.data.list;

@@ -255,8 +318,7 @@
            });

            loadtask(this.task2).then(res => {

                this.tasklist2 = res.data.list;

                this.car1 = 116 + 18.88 * 20;

                this.car2 = 187 + 18.8 * 30;

                
            });

        },

        //根据格子状态修改颜色

@@ -314,8 +376,9 @@
                });

            }

        },

        endtask(){

            
        endtask(type,shelfrack) {

            alert(type);

            alert(shelfrack);

        }

    }

};


 springboot-vue3/src/main/java/com/example/springboot/AuthorityApplication.java

@@ -2,12 +2,19 @@

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ConfigurableApplicationContext;

import com.example.springboot.component.WebSocketServer;

@SpringBootApplication
public class AuthorityApplication {

    public static void main(String[] args) {
        SpringApplication.run(AuthorityApplication.class, args);
        // SpringApplication.run(AuthorityApplication.class, args);

        SpringApplication springApplication = new SpringApplication(AuthorityApplication.class);
        ConfigurableApplicationContext configurableApplicationContext = springApplication.run(args);
        WebSocketServer.setApplicationContext(configurableApplicationContext);
    }

}

 springboot-vue3/src/main/java/com/example/springboot/component/Plchome.java

New file
@@ -0,0 +1,70 @@
package com.example.springboot.component;

import cn.hutool.json.JSONObject;

import java.util.List;

import org.springframework.context.ConfigurableApplicationContext;

import com.example.springboot.entity.StorageCage;
import com.example.springboot.mapper.HomeMapper;

public class Plchome extends Thread {

    private HomeMapper homeMapper;

    @Override
    public void run() {
        while (this != null) {
            try {
                Thread.sleep(10000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            JSONObject jsonObject = new JSONObject();
            
            homeMapper = WebSocketServer.applicationContext.getBean(HomeMapper.class);
            // 笼子使用情况
            List<StorageCage> tableData = homeMapper.selectAll();
            jsonObject.append("tableData", tableData);
            //格理片笼格子状态
            List<StorageCage> cagelist1 = homeMapper.selectRack1();
            List<StorageCage> cagelist2 = homeMapper.selectRack2();
            List<StorageCage> cagelist3 = homeMapper.selectRack3();
            List<StorageCage> cagelist4 = homeMapper.selectRack4();
            jsonObject.append("cagelist1", cagelist1);
            jsonObject.append("cagelist2", cagelist2);
            jsonObject.append("cagelist3", cagelist3);
            jsonObject.append("cagelist4", cagelist4);
            //进出片任务
            List<StorageCage> tasklist1=homeMapper.selectinout(2);
            List<StorageCage> tasklist2=homeMapper.selectinout(3);
            jsonObject.append("tasklist1", tasklist1);
            jsonObject.append("tasklist2", tasklist2);

            //读去Plc进片车与出片车位置
            // List<String> addressList = new ArrayList<>();
            // addressList.add("DB100.DBW0");
            // addressList.add("DB100.DBW2");
            // List<Short> paramlist = S7control.getinstance().ReadWord(addressList);
            // jsonObject.append("params", paramlist);

            jsonObject.append("params", new short[] { 30, 40, });
            WebSocketServer sendwServer = WebSocketServer.sessionMap.get("Home");

            if (sendwServer != null) {
                sendwServer.sendMessage(jsonObject.toString());
            }

            // JSONObject jsonObject = new JSONObject();
            // jsonObject.append("params", new short[] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
            // 11, });
            // WebSocketServer sendwServer = WebSocketServer.sessionMap.get("Home");
            // if (sendwServer != null) {
            // sendwServer.sendMessage(jsonObject.toString());
            // }

        }
    }
}

 springboot-vue3/src/main/java/com/example/springboot/component/WebSocketServer.java

@@ -4,6 +4,8 @@
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

import org.apache.catalina.core.ApplicationContext;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@@ -16,8 +18,8 @@
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.stereotype.Component;


import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
@@ -25,6 +27,17 @@
@ServerEndpoint(value = "/api/talk/{username}")
@Component
public class WebSocketServer {

    // @Autowired
    // HomeMapper homeMapper;

    static ConfigurableApplicationContext applicationContext;
 
    //解决无法注入mapper问题  //使用方法 homeMapper=WebSocketServer.applicationContext.getBean(HomeMapper.class);
    public static void setApplicationContext(ConfigurableApplicationContext configurableApplicationContext) {
        WebSocketServer.applicationContext = configurableApplicationContext;
    }


   private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
    private List<String> messages;
@@ -86,6 +99,7 @@
         jsonObject.set("message", text);
        this.messages.add(text);
         this.sendMessage(jsonObject.toString()); //JSONUtil.toJsonStr(jsonObject)
         
    }

    @OnError
@@ -122,6 +136,7 @@

    public List<String> getMessages() {
        return messages;
        
    }

    public void clearMessages() {

 springboot-vue3/src/main/java/com/example/springboot/config/AppRunnerConfig.java

@@ -7,6 +7,7 @@

import com.example.springboot.component.PlcHold;
import com.example.springboot.component.Plcaction;
import com.example.springboot.component.Plchome;

@Component
@Order(1)
@@ -20,5 +21,8 @@
    new PlcHold().start();

    new Plcaction().start();

    new Plchome().start();
    
  }
}

 springboot-vue3/src/main/java/com/example/springboot/controller/HomeController.java

@@ -76,8 +76,17 @@
        }else{
            map.put("message2","200");
            //调用伍上片函数

        }
        return Result.success(map);
    }

    @GetMapping("/UpdateTask")
    public Result UpdateTask(Integer types,Integer shelf_rack){
        Map<String, Object> map = new HashMap<>();
        homeMapper.UpdateTask(types,shelf_rack);
        map.put("message2","200");
        return Result.success(map);
    }

    
}

 springboot-vue3/src/main/java/com/example/springboot/entity/StorageCage.java

@@ -9,15 +9,19 @@
    private Double glasswidth;
    private Double glassheight;
    private String state;
    private Integer tier;  
    private Integer tier;
    private String orderId;
    private String coating;
    private String lengthwidth;

    public Integer id() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getId() {
        return id;
    }
@@ -29,14 +33,15 @@
    public void setGlassId(String glassId) {
        this.glassId = glassId;
    }
     public String getOrderId() {

    public String getOrderId() {
        return orderId;
    }

    public void setOrderId(String orderId) {
        this.orderId = orderId;
    }
    

    public Integer getCage() {
        return cage;
    }
@@ -53,16 +58,6 @@
        return cell;
    }

    

    // public String getHeighth() {
    //     return height;
    // }

    // public void setHeight(String height) {
    //     this.height = height;
    // }

    public Double getWidth() {
        return width;
    }
@@ -71,7 +66,7 @@
        this.width = width;
    }

     public String getState() {
    public String getState() {
        return state;
    }

@@ -79,26 +74,43 @@
        this.state = state;
    }

      public Integer getTier() {
    public Integer getTier() {
        return tier;
    }

    public void setTier(Integer tier) {
        this.tier = tier;
    }
     public Double getGlassWidth() {

    public Double getGlassWidth() {
        return glasswidth;
    }

    public void setGlassWidth(Double glasswidth) {
        this.glasswidth = glasswidth;
    }

    public Double getGlassHeight() {
        return glassheight;
    }
  

    public void setGlassHeight(Double glassheight) {
        this.glassheight = glassheight;
    }
  

    public String getCoating() {
        return coating;
    }

    public void setCoating(String coating) {
        this.coating = coating;
    }

    public String getLengthWidth() {
        return lengthwidth;
    }

    public void setLengthWidth(String lengthwidth) {
        this.lengthwidth = lengthwidth;
    }
}

 springboot-vue3/src/main/java/com/example/springboot/entity/StorageTask.java

@@ -6,6 +6,7 @@
    private String cataskStatege;
    private String shelfRack;
    private String loadrack;
    

    public Integer id() {
        return id;
@@ -49,6 +50,6 @@
        this.loadrack = loadrack;
    }


    

}

 springboot-vue3/src/main/java/com/example/springboot/mapper/HomeMapper.java

@@ -28,7 +28,7 @@
    List<StorageCage> selectRack4();

    // 根据任务类型查询当前正在出片，进片的玻璃信息
    @Select("select * from storage_cage where state=#{task_type} limit 1")
    @Select("select *,concat(glasswidth,' x ',glassheight) as lengthwidth from storage_cage where state=#{task_type} limit 1")
    List<StorageCage> selectinout(@Param("task_type") Integer task_type);

    // 查询是否存在此订单
@@ -36,7 +36,7 @@
    short SelectOrder(@Param("orderid") String orderid);

    // @Insert("insert into order_out(orderid) values('#{orderid}')")
    @Insert("INSERT INTO `canadames`.`order_out`( `order_id`,`mod_time`) VALUES ( #{orderid},now())")
    @Insert("INSERT INTO `canadames`.`order_out`( `orderid`,`mod_time`) VALUES ( #{orderid},now())")
    void InsertOrder(String orderid);

    //停止按当前订单出片
@@ -46,4 +46,8 @@
    //查询是否存在正在上片的任务
    @Select("select count(*) from storage_task where task_state=0 and task_type=1")
    short SelectOutTask();

    //手动完成任务
    @Select("update storage_task set state=1 where shelf_rack=#{shelf_rack} and task_type=#{task_type} and task_state=0")
    short SelectOutTask(@Param("task_type") Integer task_type,@Param("shelf_rack") Integer shelf_rack);
}