Merge branch 'master' of ssh://10.153.19.150:29418/CanadaMes

wuyouming666

2023-09-06 a60d5d839e6f686990a92801b470a9aeaad31b4a

Merge branch 'master' of ssh://10.153.19.150:29418/CanadaMes

# Conflicts:
#	CanadaMes-ui/src/views/Electrical/Parameter.vue
#	springboot-vue3/src/main/java/com/example/springboot/config/AppRunnerConfig.java

 CanadaMes-ui/src/api/home.js

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

    })

}



export function Addglassid(glassid) {

    return request({

        url: '/home/Addglassid?glassid=' + glassid,

        method: 'get',

        data :""

    })

}


 CanadaMes-ui/src/img/bigcar01.png

 CanadaMes-ui/src/router/index.js

@@ -62,6 +62,10 @@
        component: () => import('../views/device/iostate')
      },
      {
        path: '/device/talkvue',
        component: () => import('../views/device/talkvue')
      },
      {
        path: '/device/control',
        component: () => import('../views/device/control')
      },
@@ -81,6 +85,10 @@
        path: '/Electrical/State',
        component: () => import('../views/Electrical/State')
      },
      {
        path: '/Electrical/alarm',
        component: () => import('../views/Electrical/alarm')
      },




 CanadaMes-ui/src/views/Electrical/Action.vue

@@ -8,21 +8,15 @@
      <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>

      <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>

      <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>

      <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>

    </el-breadcrumb>

    <div>Action</div>

    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ records }">

      <div class="kuai_sb" v-for="item in records" :key="item.id">

        <el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>

        <!-- <el-input v-model="item.zhuangtai" style="width: 80px;"></el-input> -->

        <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch>

    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">

      <div class="kuai_div" v-for="item in this.record.xyData" :key="item.name">

        <el-input v-model="item.name" style="width: 240px;" class="in_mc"></el-input>

        <!-- <el-input v-model="item[0]" style="width: 80px;"></el-input> -->

        <el-switch v-model="item.value" active-value="0" inactive-value="1"></el-switch>

      </div>





      <div class="kuai_div">

  <el-input style="width: 280px;" class="in_mc" value="conveyor Velocity(Auto SLOW)"></el-input>

  <el-input v-for="(param, index) in record.params[0]" :key="index" v-model="record.params[0][index]" style="width: 80px;"></el-input>

</div>

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

    </el-form>





@@ -30,34 +24,69 @@
</template>



<script >



let socket;

export default {

  name: "Action",

  name: "action",

  data () {

    return {

      records: [

        { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },

        { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },

        { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },

        { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "1" }

      ],

      record: {

        params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

        canshu: [

          'D01 VFD conveyor',

          'D02 VFD conveyor',

          'D03 VFD conveyor',

          'D04 VFD conveyor',

          'D05 VFD conveyor',

          'D06 VFD conveyor',

          'A01 VFD conveyor',

          'A02 VFD conveyor',

          'B01 VFD conveyor',

          'B02 VFD conveyor',

          'A01 SERVE TURN JOG+',

          'A02 SERVE TURN JOG-',

          'A01 SERVE TRAVEL JOG+',

          'A02 SERVE TRAVEL JOG-',

          'B01 SERVE TRAVEL JOG+',

          'B02 SERVE TRAVEL JOG-',

          'A01 SERVE TURN POS',

          'A02 SERVE TURN POS',

          'A01 SERVE TRAVEL POS',

          'A02 SERVE TRAVEL POS',

          'B01 SERVE TRAVEL POS',

          'B02 SERVE TRAVEL POS',

          'B01 YV TURN',

          'B01 YV UP DOWN',

          'B02 YV TURN',

          'B02 YV UP DOWN',

        ],

        xyData: [

          { name: 'D01 VFD conveyor', value: 0 },

          { name: "D02 VFD conveyor", value: 0 },

          { name: "D03 VFD conveyor", value: 0 },

          { name: "D04 VFD conveyor", value: 0 },

          { name: "B01 B02 TRAVEL JOG Velocity", value: 0 },

          { name: "conveyor Velocity(Manual)", value: 0 },

        ],

      },





      messagepack: {

        data: { taskname: "" }

      },



      record: {

      params: [0,0,0,0,0,0]

    },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

  },

  created () {

    this.init();

    //console.log(this.records);

  },

  methods: {

    init () {

      let viewname = "talkvue";

      let viewname = "Action";



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

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

@@ -77,11 +106,24 @@
        };

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

        socket.onmessage = function (msg) {

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

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

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

  console.log( this.record.params[0])

}.bind(this);



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

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



          this.record.params[0] = obj.acion[0].join(",");

          this.record.params[0] = this.record.params[0].split(",");



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

            // if (!this.record.xyData[a]) {

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

            // } else {

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

            // }

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

          }

          console.log(this.record.xyData)

          this.$forceUpdate();

        }.bind(this);

        //关闭事件

        socket.onclose = function () {

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

@@ -91,6 +133,7 @@
          console.log("websocket发生了错误");

        }

      }



    },

    send () {

      this.messagepack.data = { taskname: "前端到后台" };

@@ -107,10 +150,11 @@


</script>





<style>

.kuai_sb {

  width: 30%;

  margin-bottom: 15px;

.kuai_div {

  /* width: 30%; */

  margin-bottom: 30px;

}



.el-input {


 CanadaMes-ui/src/views/Electrical/Parameter.vue

@@ -149,4 +149,4 @@
  #btn_div .el-button {

  float: right;

  }

  </style>
  </style>


 CanadaMes-ui/src/views/Electrical/Sign.vue

@@ -8,15 +8,16 @@
      <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>

      <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>

      <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>

      <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>

    </el-breadcrumb>

    <div>Sign</div>

    <div style="padding-right: 30px;display: flex;flex-wrap: wrap;">

      <div class="kuai_sb" v-for="item in records" :key="item.id">

        <el-col class="deng" :class="getStatusClass(item.zhuangtai)">

    <div style="padding-right: 30px;display: flex;flex-wrap: wrap;" class="neir">

      <div class="kuai_sb" v-for="item in record.xyData" :key="item.name">

        <el-col class="deng" :class="getStatusClass(item.value, item.name)">

          <!-- <el-input v-model="item.zhuangtai" style="width: 280px;display: none;"

            class="in_mc"></el-input>-->

        </el-col>

        <el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>

        <el-input v-model="item.name" style="width: 280px;" class="in_mc"></el-input>



        <!-- <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch> -->

      </div>

@@ -27,29 +28,143 @@
</template>



<script >



let socket;

export default {

  name: "Sign",

  data () {

    return {

      records: [

        { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },

        { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },

        { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },

        { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "2" }

      ]

      record: {

        params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],

        xyData: [

          { name: 'D01.SR dec', value: 0 },

          { name: "D01.SR in pos", value: 0 },

          { name: "D02.SR dec", value: 0 },

          { name: "D02.SR in pos", value: 0 },

          { name: "D03.SR dec", value: 0 },

          { name: "D03.SR in pos", value: 0 },

        ],

        canshu: [

          'D01.SR dec',

          'D01.SR in pos',

          'D02.SR dec',

          'D02.SR in pos',

          'D03.SR into',

          'D03.SR dec',

          'D03.SR in pos',

          'D04.SR dec',

          'D04.SR in pos',

          'D05.SR dec',

          'D05.SR in pos',

          'D06.SR dec',

          'D06.SR in pos',

          'B01.SR out dec',

          'B01.SR out in pos',

          'B01.SR in dec',

          'B01.SR in in pos',

          'B01.SR turn on',

          'B01.SR turn off',

          'B01.SR up',

          'B01.SR down',

          'B02.SR out dec',

          'B02.SR out in pos',

          'B02.SR in dec',

          'B02.SR in in pos',

          'B02.SR turn on',

          'B02.SR turn off',

          'B02.SR up',

          'B02.SR down',

          'LED.red',

          'LED.green',

          'LED.yellow',

        ],



      },





      messagepack: {

        data: { taskname: "" }

      },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

  },

  created () {

    this.init();

  },

  methods: {

    getStatusClass (zhuangtai) {

      if (zhuangtai === "2") {

        return "dow";

      } else {

    getStatusClass (zhuangtai, mc) {



      if (mc === "LED.red" && zhuangtai === 0) {

        return "red";

      }

      if (mc === "LED.green" && zhuangtai === 0) {

        return "green";

      }

      if (mc === "LED.yellow" && zhuangtai === 0) {

        return "yellow"

      }

      if (zhuangtai === 0) {

        return "op";

      }

      else {

        return "dow";

      }











    },

    init () {

      let viewname = "Sign";



      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.record.params[0] = obj.sig[0];

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

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

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



          }

          this.$forceUpdate();



        }.bind(this);

        //关闭事件

        socket.onclose = function () {

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

        };

        //发生了错误事件

        socket.onerror = function () {

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

        }

      }

    },

    send () {

      this.messagepack.data = { taskname: "前端到后台" };

      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端，由服务端进行转发

    }

  }



@@ -67,6 +182,11 @@
  padding: 0;

}



/* .neir {

  height: 100%;

  overflow-y: auto;

} */



.el-input__inner {

  text-align: center;

  width: 100%;

@@ -74,7 +194,7 @@


.kuai_sb {

  text-align: center;

  width: 30%;

  width: 25%;

  margin-bottom: 15px;

}



@@ -111,4 +231,16 @@
.dow {

  background-color: #A0A0A0;

}



.red {

  background-color: red;

}



.geeen {

  background-color: #00ff22;

}



.yellow {

  background-color: yellow;

}

</style>

 CanadaMes-ui/src/views/Electrical/State.vue

@@ -8,19 +8,23 @@
      <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>

      <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>

      <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>

      <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>

    </el-breadcrumb>

    <div>State</div>





    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ records }">

    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="messagepack.data">

      <div id="btn_div">

        <el-button type="primary">下发参数</el-button>

        <el-button type="primary" @click="send()">Distribute</el-button>

        <!-- <button @click="send()">测试发送</button> -->

      </div>

      <div class="kuai_div" v-for="item in this.record.xyData" :key="item.name">

        <el-input style="width: 280px;" class="in_mc" v-model="item.name"></el-input>

        <el-input v-model="item.value" style="width: 80px;"></el-input>

      </div>



      <div class="kuai_div" v-for="item in records" :key="item.id">

        <el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>

        <el-input v-model="item.zhuangtai" style="width: 80px;"></el-input>

      </div>





    </el-form>





@@ -31,22 +35,105 @@


<script >



let socket;

export default {

  name: "State",

  data () {

    return {

      records: [

        { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },

        { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },

        { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },

        { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "2" }

      ]

      record: {

        params: [0, 0, 0, 0, 0, 0, 0, 0, 0,],

        xyData: [

          { name: 'D01.State', value: 0 },

          { name: 'D02.State', value: 0 },

          { name: 'B01.State', value: 0 },

          { name: 'B02.State', value: 0 },

          { name: 'A01.State', value: 0 },

          { name: 'A02.State', value: 0 },

          { name: 'D03.State', value: 0 },

          { name: 'D04.State', value: 0 },

          { name: 'D05.State', value: 0 },

          { name: 'D06.State', value: 0 },

        ],

        canshu: [

          'D01.State',

          'D02.State',

          'B01.State',

          'B02.State',

          'A01.State',

          'A02.State',

          'D03.State',

          'D04.State',

          'D05.State',

          'D06.State',

        ],



      },





      messagepack: {

        data: { taskname: "" }

      },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

  },

  created () {

    this.init();

  },

  methods: {

    init () {

      let viewname = "State";



      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.record.params[0] = obj.sta[0];

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

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

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

          }

          this.$forceUpdate();

          console.log(this.record.xyData);

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

          // console.log(this.records.canshu);



        }.bind(this);

        //关闭事件

        socket.onclose = function () {

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

        };

        //发生了错误事件

        socket.onerror = function () {

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

        }

      }

    },

    send () {

      this.messagepack.data = { taskname: "前端到后台" };

      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端，由服务端进行转发

    }



  }



}


 CanadaMes-ui/src/views/Electrical/alarm.vue

New file
@@ -0,0 +1,179 @@
<template>
  <div class="app">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
      <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>
      <el-button type="text">设备管理</el-button>
      <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>
      <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
      <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
      <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
      <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>
    </el-breadcrumb>
    <div>Alarm</div>
    <!-- <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
        <div class="kuai_div" v-for="item in this.record.xyData" :key="item[1]">
          <el-input v-model="item[1]" style="width: 240px;" class="in_mc"></el-input>
          <el-switch v-model="item[0]" active-value="0" inactive-value="1"></el-switch>
        </div>
      </el-form> -->

    <el-table :data="record.xyData" style="width: 100%">
      <el-table-column prop="xyData[1]" label="content" width="180">
      </el-table-column>
      <el-table-column prop="name" label="time-on" width="180">
      </el-table-column>
      <el-table-column prop="address" label="End Time">
      </el-table-column>
    </el-table>
  </div>
</template>

<script >

let socket;
export default {
  name: "alarm",
  data () {
    return {
      record: {
        params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        canshu: [
          'D01 VFD error',
          'D02 VFD error',
          'D03 VFD error',
          'D04 VFD conveyor',
          'D05 VFD conveyor',
          'D06 VFD conveyor',
          'A01 VFD conveyor',
          'A02 VFD conveyor',
          'B01 VFD conveyor',
          'B02 VFD conveyor',
          'A01 SERVE TURN JOG+',
          'A02 SERVE TURN JOG-',
          'A01 SERVE TRAVEL JOG+',
          'A02 SERVE TRAVEL JOG-',
          'B01 SERVE TRAVEL JOG+',
          'B02 SERVE TRAVEL JOG-',
          'A01 SERVE TURN POS',
          'A02 SERVE TURN POS',
          'A01 SERVE TRAVEL POS',
          'A02 SERVE TRAVEL POS',
          'B01 SERVE TRAVEL POS',
          'B02 SERVE TRAVEL POS',
          'B01 YV TURN',
          'B01 YV UP DOWN',
          'B02 YV TURN',
          'B02 YV UP DOWN',
        ],
        // canshu: [
        //   '1',
        //   '1',
        //   '0',
        //   '0',
        //   '0',
        //   '0'
        // ],
        xyData: [],
      },


      messagepack: {
        data: { taskname: "" }
      },
      queryInfo: {
        data: "1",
        pageSize: 10
      },

    }
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      let viewname = "Action";

      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.record.params[0] = obj.acion[0].join(",");
          this.record.params[0] = this.record.params[0].split(",");

          for (let a = 0; a <= this.record.params.length - 1; a++) {
            this.record.xyData[a] = [this.record.params[0][a], this.record.canshu[a]];
          }
          //console.log(this.record.params[0]);
          //console.log(this.record.xyData);
          this.$forceUpdate();
        }.bind(this);
        //关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
      }

    },
    send () {
      this.messagepack.data = { taskname: "前端到后台" };
      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端，由服务端进行转发
    }

  }

}





</script>


<style>
.kuai_div {
  /* width: 30%; */
  margin-bottom: 30px;
}

.el-input {
  border: none;


  .el-input__inner {
    border: 1 solid black;
  }


}

.in_mc {
  .el-input__inner {
    border: none;
  }
}
</style>

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

@@ -9,7 +9,7 @@
    width: 10%;

    background-color: white;

    margin: 0px 8px 0px 8px;

    border: 1px black solid;

    border: 1px #EBEEF5 solid;

    text-align: center;

    padding: 5px;

}

@@ -31,11 +31,13 @@
    padding: 3px;

    min-height: 40vh;

}



.el-footer {

    max-height: 60vh;

    padding: 0px;

    margin: 0px;

}



.green {

    background-color: green;

}

@@ -57,34 +59,54 @@
}



.gezi {

    height: 23px;

    width: 1.74px;

    height: 25px;

    width: 3.25px;

}



.gezi:nth-child(22) {

    margin-left: 4px;

}



.gezi:nth-child(43) {

    margin-left: 4px;

}



.gezi:nth-child(64) {

    margin-left: 4px;

}



.gezi:nth-child(22),

.gezi:nth-child(43),

.gezi:nth-child(64),

.gezi:nth-child(85) {

    margin-left: 4px;

    margin-left: 7.7px;

}



.block {





.blocks {

    min-height: 50vh;

    max-width: 100vw;  
    background-image: url('xmjc.png');

    margin: 0px;

    background-repeat:no-repeat ;

    background-size:100% 100%;

    background-attachment:local;

    max-width: 100vw;

    background-image: url('../../img/xmjc.png');

    margin: 0 auto;

    background-repeat: no-repeat;

    /* background-size: 100% 100%; */

    background-size: 1280px 377px;

    background-attachment: local;

    width: 1280px;

}



.blocks-img {

    height: 100px;

    max-width: 100vw;

    background-repeat: no-repeat;

    background-size: 32px 66px;

    background-attachment: local;

    width: 32px;

    
    position: absolute;

    /* left: 116px; */

    /* left:1060px;18.88px */

    background-image: url('../../img/bigcar01.png');

}



.el-table td,

.el-table th {

    padding: 8px 0;

}

.el-table__empty-block{

    min-height: 41px;

}

.el-table__empty-text{

    line-height: 41px;

}

</style>

<template>

@@ -92,25 +114,31 @@
        <!-- <el-header style="padding: 10px;"></el-header> -->

        <el-main>

            <div style="display:flex;justify-content: space-around;width: 95%;margin: 0 auto;">

                <el-input style="width:15%;" placeholder="Enter the glass lD"></el-input>

                <el-button type="primary">Manually feed the glass</el-button>

                <el-input style="width:15%;" placeholder="Enter the glass lD" v-model="glassid"></el-input>

                <el-button type="primary" @click="showform()">Manually feed the glass</el-button>

                <el-input style="width:15%;" placeholder="Enter the order number" v-model="order"></el-input>

                <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-column prop="glassId" label="Coming out glass ID"></el-table-column>

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

                    <el-table-column label="Order number">orderNo</el-table-column>

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

                    <el-table-column prop="address" label="coating"></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="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>

                    </el-table-column>

                </el-table>

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

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

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

                    <el-table-column label="Order number">orderNo</el-table-column>

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

                    <el-table-column prop="address" label="coating"></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="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>

                    </el-table-column>

                </el-table>

            </div>

            <div style="padding: 10px;display: flex;height:85px;">

@@ -126,45 +154,82 @@
                </div>

            </div>

        </el-main>

        <el-footer> 
                <div class="block" style="text-align: center;position: relative;">

                    <div style="display:flex;position: absolute;float:left;z-index: 999;top:71px;left:136px;">

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

                    </div>

                    <div style="display:flex;position: absolute;float:left;z-index: 999;top:71px;left:366px;">

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

                    </div>

                    <div style="display:flex;position: absolute;float:left;z-index: 999;top:96px;left:136px;">

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

                    </div>

                    <div style="display:flex;position: absolute;float:left;z-index: 999;top:96px;left:366px;">

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

                    </div>

                </div> 
        <el-footer>

            <div class="blocks" style="position: relative;">

                <div style="display:flex;position: absolute;float:left;z-index: 999;top:76px;left:253px;">

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

                </div>

                <div style="display:flex;position: absolute;float:left;z-index: 999;top:76px;left:682.5px;">

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

                </div>

                <div style="display:flex;position: absolute;float:left;z-index: 999;top:102px;left:253px;">

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

                </div>

                <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>

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



                </div>

            </div>

        </el-footer>

        <el-dialog :visible.sync="dialogFormVisible" title="Please confirm the information">

            <el-form :model="form" label-width="100px" style="padding-right: 30px">

                <el-form-item label="Order">

                    <el-input v-model="form.orderno" autocomplete="off" />

                </el-form-item>

                <el-form-item label="length">

                    <el-input v-model="form.length" autocomplete="off" />

                </el-form-item>

                <el-form-item label="width">

                    <el-input v-model="form.width" autocomplete="off" />

                </el-form-item>

                <el-form-item label="coating">

                    <el-input v-model="form.coating" autocomplete="off" />

                </el-form-item>

            </el-form>

            <template #footer>

                <span class="dialog-footer">

                    <el-button @click="cancal()">cancal</el-button>

                    <el-button @click="sbumitglassid()" type="primary">confirm</el-button>

                </span>

            </template>

        </el-dialog>

    </el-container>

</template>

  

<script>



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

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





export default {

    data() {

        return {

            dialogFormVisible: false,

            form: {

                orderno: "NG2210210",

                length: 800,

                width: 1000,

                coating: "red",

            },

            tableData: [],

            cagelist1: [],

            cagelist2: [],

            cagelist3: [],

            cagelist4: [],

            form: {},

            task1: 3,

            task2: 4,

            task1: 2,

            task2: 3,

            tasklist1: [],

            tasklist2: [],

            src: "./img/xmjc.png",

            order: ""

            order: "",

            glassid: "",

            url: "../../img/bigcar01.png",

            car1: 116,

            car2: 187

        };

    },

    created() {

@@ -183,13 +248,19 @@
            });

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

                this.tasklist1 = res.data.list;

                console.log(this.tasklist1);

            });

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

                this.tasklist2 = res.data.list;

            });

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

                this.tasklist2 = res.data.list;

                this.car1 = 116 + 18.88 * 20;

                this.car2 = 187 + 18.8 * 30;

            });

        },

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

        getStatusClass(state) {

            //每各格子不同状态不同颜色

            if (state == 0) {

                return "green gezi";

            } else if (state == 1) {

@@ -202,17 +273,48 @@
                return "black gezi";

            }

        },

        //按订单出片

        getOrder() {

            if(this.order!=""){

            if (this.order != "") {

                InsertOrder(this.order).then(res => {

                    if (res.data.message == 200) {

                        this.$message.success("Operation successful");

                    } else {

                        this.$message.success("operation failed");

                        this.$message.success("There is no such order");

                    }

                    this.load();

                });

            }



        },

        showform() {

            this.form =

            {

                orderno: "NG2210210",

                length: 800,

                width: 1000,

                coating: "red",

            };

            this.dialogFormVisible = true;

        },

        cancal() {

            this.dialogFormVisible = false;

            this.form = {};

        },

        //手动上片

        sbumitglassid() {

            if (this.glassid != "") {

                Addglassid(this.glassid).then(res => {

                    if (res.data.message2 == 200) {

                        this.$message.success("Operation successful");

                        this.cancal();

                    } else {

                        this.$message.success("There are currently tasks");

                    }

                });

            }

        },

        endtask(){

            

        }

    }


 CanadaMes-ui/src/views/home/xmjc.png

Binary files differ

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

@@ -2,40 +2,65 @@

import java.util.List;

import javax.websocket.Session;

import cn.hutool.json.JSONArray;
import cn.hutool.json.JSONObject;

public class PlcHold extends Thread {
    @Override
    public void run() {
        while (this != null) {
            try {
  @Override
  public void run() {
    while (this != null) {
      try {

                Thread.sleep(2000);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            List<Boolean> bitlist = S7control.getinstance().ReadBits("DB2.0.0", 100);
        Thread.sleep(10000);
      } catch (InterruptedException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
      }
      List<Boolean> bitlist = S7control.getinstance().ReadBits("DB2.0.0", 100);

            List<Short> paramlist = S7control.getinstance().ReadWord("DB100.6", 1);
      List<Short> paramlist = S7control.getinstance().ReadWord("DB100.6", 1);

            //查询数据库
            //推送到前端
      // 查询数据库
      // 推送到前端

            JSONObject jsonObject = new JSONObject();
            jsonObject.append("params", new short[] { 0, 1, 2, 3, 4, 5 });
            WebSocketServer sendwServer = WebSocketServer.sessionMap.get("talkvue");
            if (sendwServer != null) {
                sendwServer.sendMessage(jsonObject.toString());
            }
      // Parameter
      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("Parameter");
      if (sendwServer != null) {
        sendwServer.sendMessage(jsonObject.toString());
      }

      // Action
      // JSONObject jsonObject2 = new JSONObject();
      // jsonObject2.append("acion",
      // new short[] { 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
      // 1, 1, 1, 0, 0, });
      // WebSocketServer sendwServer2 = WebSocketServer.sessionMap.get("Action");
      // if (sendwServer2 != null) {
      // sendwServer2.sendMessage(jsonObject2.toString());
      // }

            JSONObject jsonObject2 = new JSONObject();
            jsonObject2.append("params", new short[] { 0, 3, 2, 3, 4, 5 });
            WebSocketServer sendwServer2 = WebSocketServer.sessionMap.get("action");
            if (sendwServer2 != null) {
                sendwServer2.sendMessage(jsonObject2.toString());
            }
        }
      // Sign
      JSONObject jsonObject3 = new JSONObject();
      jsonObject3.append("sig",
          new short[] { 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0,
              1, });
      WebSocketServer sendwServer3 = WebSocketServer.sessionMap.get("Sign");
      if (sendwServer3 != null) {
        sendwServer3.sendMessage(jsonObject3.toString());
      }

      // State
      JSONObject jsonObject4 = new JSONObject();
      jsonObject4.append("sta", new short[] { 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, });
      WebSocketServer sendwServer4 = WebSocketServer.sessionMap.get("State");
      if (sendwServer4 != null) {
        sendwServer4.sendMessage(jsonObject4.toString());
      }

    }
  }
}

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

@@ -5,21 +5,26 @@
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;


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

@Component
@Order(1)
public class AppRunnerConfig implements ApplicationRunner{
    @Override
    public void run(ApplicationArguments args) throws Exception {
        // TODO Auto-generated method stub
       //
       System.out.println("启动完成");
public class AppRunnerConfig implements ApplicationRunner {
  @Override
  public void run(ApplicationArguments args) throws Exception {
    // TODO Auto-generated method stub
    //
    System.out.println("启动完成");

    new PlcHold().start();
    new Plcaction().start();


        new Plcaction().start();


    }
}

  }



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

@@ -44,6 +44,7 @@
        return Result.success(map);
    }
    
    
    @GetMapping("/loadinout")    
    public Result selectinout(Integer types){
        List<StorageCage> storageCageinout=homeMapper.selectinout(types);
@@ -65,4 +66,18 @@
        }
        return Result.success(map);
    }

    @GetMapping("/Addglassid")
    public Result Addglassid(Integer glassid){
        Map<String, Object> map = new HashMap<>();
        short taskno=homeMapper.SelectOutTask();
        if(taskno>0){
            map.put("message2","500");
        }else{
            map.put("message2","200");
            //调用伍上片函数

        }
        return Result.success(map);
    }
}

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

New file
@@ -0,0 +1,96 @@
package com.example.springboot.controller;

import com.example.springboot.common.Result;
import com.example.springboot.entity.StorageCage;
import com.example.springboot.mapper.SpianMapper;
import com.example.springboot.service.SpianService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("/spian")

 
public class SpianController {
    
    @Autowired
    SpianMapper spianMapper;
    
    
    @Autowired
    SpianService spianservice;
    //出片任务
@GetMapping("/all2")
    public Result selectdd(String orderid){

         StorageCage cageout=spianMapper.selectOut(orderid);
         //判断玻璃可直接出片时
         //玻璃内外片
         
         int cage =cageout.getCage();
         int cell =cageout.getCell();
         int tier =cageout.getTier();
         double width=cageout.getWidth();
         if(tier==2){
                return Result.success("执行出片");  
         }
         else{  
           int state= spianMapper.selectGlassState(cage,cell);
            //判断内片是否需要调拨
            if(state==0){
             return Result.success("状态为0,直接出片");  
             }else{
              //玻璃需要调拨时
               
               return Result.success("状态为1,需要被调拨");  
             }
        }
    
}

   @GetMapping("/all")
   //进片任务,传订单id
   //按订单优先进片
    public Result selectAll(String orderid){
        //return spianMapper.selectAll(); 
        int cage1;
        //String orderid="A001";
        //获取订单相关度最高的笼子排序
        List<StorageCage> storageCage=spianMapper.selectAll(orderid);
        for (StorageCage storageCage2 : storageCage) {
            //保存订单优先顺序笼子号
            cage1=storageCage2.getCage();
            //判断该笼子号相邻最大的空格数
            int cages=spianMapper.selectCage(cage1);
            //判断选中笼子是否有空格
            StorageCage cages1=spianMapper.selectCage1(cage1);
            if(cages>1 &&cages1.getTier()!=null){
                return Result.success(cages1);
            }
            
             
        }         
        return Result.success("0");      
      
    }
    

    @PostMapping("/save")
    public Result save(@RequestBody StorageCage spian){
        spianservice.Save(spian);
        return Result.success();
    }





}   

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

@@ -23,7 +23,6 @@
    public void setOrderId(String orderid) {
        this.orderid = orderid;
    }

    public String getOrderId() {
        return orderid;
    }
@@ -31,7 +30,6 @@
    public void setState(Integer state) {
        this.state = state;
    }

    public Integer getState() {
        return state;
    }
@@ -39,7 +37,6 @@
    public void setModTime(Date modtime) {
        this.modtime = modtime;
    }

    public Date getModTime() {
        return modtime;
    }

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

@@ -3,13 +3,14 @@
public class StorageCage {
    private Integer id;
    private String glassId;
    private String cage;
    private String cell;
    //private String height;
    private String width;
    private Integer cage;
    private Integer cell;
    private Double width;
    private Double glasswidth;
    private Double glassheight;
    private String state;
    private String tier;

    private Integer tier;  
    private String orderId;

    public Integer id() {
        return id;
@@ -28,20 +29,27 @@
    public void setGlassId(String glassId) {
        this.glassId = glassId;
    }
     public String getOrderId() {
        return orderId;
    }

    public void setOrderId(String orderId) {
        this.orderId = orderId;
    }
    
    public String getCage() {
    public Integer getCage() {
        return cage;
    }

    public void setGage(String cage) {
    public void setGage(Integer cage) {
        this.cage = cage;
    }

    public void setCell(String cell) {
    public void setCell(Integer cell) {
        this.cell = cell;
    }

    public String getCell() {
    public Integer getCell() {
        return cell;
    }

@@ -55,11 +63,11 @@
    //     this.height = height;
    // }

    public String getWidth() {
    public Double getWidth() {
        return width;
    }

    public void setWidth(String width) {
    public void setWidth(Double width) {
        this.width = width;
    }

@@ -71,13 +79,26 @@
        this.state = state;
    }

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

    public void setTier(String tier) {
    public void setTier(Integer tier) {
        this.tier = tier;
    }
     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;
    }
  
}

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

@@ -36,9 +36,14 @@
    short SelectOrder(@Param("orderid") String orderid);

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

    //停止按当前订单出片
    @Update("update order_out set state=1 where state=0")
    void updateOrder();
    
    //查询是否存在正在上片的任务
    @Select("select count(*) from storage_task where task_state=0 and task_type=1")
    short SelectOutTask();
}

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

New file
@@ -0,0 +1,47 @@
package com.example.springboot.mapper;
import org.apache.ibatis.annotations.*;

import com.example.springboot.common.Result;
import com.example.springboot.entity.StorageCage;
import com.example.springboot.entity.StorageTask;
import com.example.springboot.entity.StorageCage;

import java.util.List;

@Mapper

public interface SpianMapper {
    //判断相邻笼子是否有空格  
    @Select("select COUNT(if(a.state1=0,cell,null))as cell from (select *,max(state)as state1 from storage_cage a  GROUP BY cage,cell)as a where (a.cage=#{cage1}-1 or a.cage=#{cage1}+1)and if(#{cage1}<6,a.cage>0 and a.cage<6,a.cage>5) GROUP BY cage ORDER BY cell desc LIMIT 1")
     int selectCage(int  cage1);
     
     //@Select("(select*from storage_cage as a  where a.state=0 and cage%2=0 ORDER BY id LIMIT 1)union (select a.* from storage_cage a inner join  (select cage,if(shu2=1,shu3,shu5) as gezi from ( select  cage, count(case when state1=1 and state2=0 then cell else null end)as shu1,  count(case when state1=0 then cell else null end) as shu2, min(case when state1=1 and state2=0 then cell else null end) as shu3, min(case when state1=0 then cell else null end) as shu4, min(case when state1=0 or state2=0 then cell else null end) as shu5 from  (select *,max(state) as state1,min(state) as state2 from storage_cage group by cage,cell) as a where  cage%2!=0  GROUP BY cage HAVING shu2>1 or (shu2=1 and shu1>0)  ) as sss limit 1)as b on a.cage=b.cage and a.cell=b.gezi and a.state=0 order by tier limit 1) ORDER BY id LIMIT 1;")
    //获取订单号排序的空订单笼子
     @Select("select cage,COUNT(if(order_id=#{glassid},order_id,null))as orderid from storage_cage where (order_id=#{glassid} or ''='') GROUP BY cage ORDER BY orderid desc; ")
     List<StorageCage> selectAll(String glassid);

     //判断该笼子是否有合适宽度空格
     @Select("select COUNT(*),cage,cell,tier from storage_cage where cage=#{cage1} and state=0 and width>=1500 ORDER BY cell,tier")
     StorageCage selectCage1(int  cage1);

    //@Update("update longzi set glass_id = #{glass_id}, width = #{width}, state = #{state} where cell = #{cell}")
    @Update("update longzi set glass_id =123, width =1600, state =1 where cell =24")
     void  update();
    
    @Insert("insert into storage_task(task_type,task_state,shelf_rack,load_rack)values(#{storage_task},#{task_state},#{shelf_rack},#{load_rack})")
     void insert(StorageTask storageTask);
    
    //出片任务查询
    @Select("select cage,cell,tier from storage_cage as a where a.order_id=#{orderId} and state=1 order by cage desc,tier desc,cell desc LIMIT 1")
     StorageCage selectOut(String  orderId);
    //判断出片为1时，是否可直接出片
    @Select("select state from storage_cage where cage=#{cage} and cell=#{cell} and tier=2;")
     int selectGlassState(int  cage,int cell);
     //判断
     @Select("select cage,cell,max(state)as shu from storage_cage where width>=#{width} and cage>#{cage1} and cage<#{cage2} GROUP BY cage,cell HAVING shu=0;")
     int selectGlassCage(double width,int cage1,int cage2);
     
    // @Insert("insert into user(name, date, address, user_no) values (#{name}, #{date}, #{address}, #{userNo})")
    // void insert (Spian spian);
    
}

 springboot-vue3/src/main/java/com/example/springboot/service/SpianService.java

New file
@@ -0,0 +1,21 @@
package com.example.springboot.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

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

@Service
public class SpianService {
    @Autowired
    private SpianMapper spianMapper;
    public void Save(StorageCage spian){
        if(spian.getId()==null){
            spianMapper.update();
        }else{
            spianMapper.update();
        }
    }
    
}