主界面添加警报信息显示

ZengTao

2023-09-08 8f0a3a1e8894617211b37e24ac0297dd5d9bd601

主界面添加警报信息显示

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

@@ -59,36 +59,36 @@
}



.gezi {

    height: 25px;

    width: 3.25px;

    height: 35px;

    width: 4.22px;

}



.gezi:nth-child(22),

.gezi:nth-child(43),

.gezi:nth-child(64),

.gezi:nth-child(85) {

    margin-left: 7.7px;

    margin-left: 10px;

}







.blocks {

    min-height: 49vh;

    min-height: 55vh;

    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-size: 1660px 560px;

    background-attachment: local;

    width: 1280px;

    width: 1660px;

}



.blocks-img {

    height: 100px;

    max-width: 100vw;

    background-repeat: no-repeat;

    background-size: 32px 66px;

    background-size: 46px 94px;

    background-attachment: local;

    width: 32px;



@@ -142,7 +142,7 @@
    <el-container>

        <!-- <el-header style="padding: 10px;"></el-header> -->

        <el-main>

            <div class="box">

            <div class="box" @click="dialogFormVisible2 = true">

                <div class="text">

                    Alarm:

                    <label v-for="item in this.alarm" :key="item['id']">

@@ -162,7 +162,7 @@
                    <el-table-column prop="glassId" label="Coming out glass ID"></el-table-column>

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

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

                    <el-table-column prop="lengthwidth" 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;" @click="endtask(0)">end

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

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

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

                    <el-table-column prop="lengthwidth" 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;" @click="endtask(1)">end

@@ -196,22 +196,22 @@
        </el-main>

        <el-footer>

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

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

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

                    <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 style="display:flex;position: absolute;float:left;z-index: 999;top:112px;left:885px;">

                    <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 style="display:flex;position: absolute;float:left;z-index: 999;top:154px;left:328px;">

                    <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 style="display:flex;position: absolute;float:left;z-index: 999;top:154px;left:885px;">

                    <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: '16px' }">



                </div>

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

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



                </div>

            </div>

@@ -254,6 +254,15 @@
                </span>

            </template>

        </el-dialog>

        <el-dialog :visible.sync="dialogFormVisible2" title="Ordering Information">

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

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

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

                <el-table-column prop="timeons" label="timeon"></el-table-column>



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

            </el-table>

        </el-dialog>

    </el-container>

</template>

  

@@ -261,13 +270,16 @@


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



import LanguageMixin from '../../lang/LanguageMixin'

let socket;

export default {

    name: "Home",

    data() {

        return {

            mixins: [LanguageMixin],

            dialogFormVisible: false,

            dialogFormVisible1: false,

            dialogFormVisible2: false,

            form: {

                orderno: "NG2210210",

                length: 800,

@@ -291,8 +303,8 @@
            order: "",

            glassid: "",

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

            car1: 116,

            car2: 187,

            car1: 150,

            car2: 242,

            incell: "",

            outcell: ""

        };

@@ -309,7 +321,6 @@
                console.log("您的浏览器不支持WebSocket");

            } else {

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



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

                if (socket != null) {

                    socket.close();

@@ -326,10 +337,9 @@


                    //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.car1 = 150 + 24.6 * obj.params[0][0];

                    this.car2 = 242 + 24.6 * obj.params[0][1];

                    this.tableData = obj.tableData[0];

                    this.cagelist1 = obj.cagelist1[0];

                    this.cagelist2 = obj.cagelist2[0];

@@ -401,7 +411,7 @@
        //根据格子状态修改颜色

        getStatusClass(state) {

            if (state == 0) {

                return "green gezi";

                return "gezi";

            } else if (state == 1) {

                return "blue gezi";

            } else if (state == 2) {

@@ -487,6 +497,16 @@
            }





        },

        formatDate(timestamp) {

            const date = new Date(timestamp);

            const year = date.getFullYear();

            const month = date.getMonth() + 1;

            const day = date.getDate();

            const hours = date.getHours();

            const minutes = date.getMinutes();

            const seconds = date.getSeconds();

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        }



    }


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

@@ -12,7 +12,7 @@
    private Integer tier;
    private String orderId;
    private String coating;
    private String lengthwidth;
    private String lengthWidth;

    public Integer id() {
        return id;
@@ -107,10 +107,10 @@
    }

    public String getLengthWidth() {
        return lengthwidth;
        return lengthWidth;
    }

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

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

@@ -2,11 +2,14 @@

import java.util.Date;


public class alarmmg {
  private Integer id;
  private String content;
  private Date timeon;
  private Date endTime;

  private String timeons;

  public void setid(Integer id) {
    this.id = id;
@@ -40,4 +43,12 @@
    return endTime;
  }

  public void settimeons(String timeons) {
    this.timeons = timeons;
  }

  public String gettimeons() {
    return timeons;
  }

}

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

@@ -10,7 +10,7 @@
@Mapper
public interface HomeMapper {
  //查询每个笼子的使用情况
  @Select("SELECT cage,round(round(sum(state)/42,2)*100) as cell,42-sum(state) as state FROM storage_cage group by cage")
  @Select("SELECT cage,ROUND(sum(case when state=1 or state=2 or state=3 then 1 else 0 end)/42*100) as cell,42-sum(case when state=1 or state=2 or state=3 then 1 else 0 end) as state FROM `storage_cage` group by cage")
  List<StorageCage> selectAll();

  // 查询1-5笼内层格子状态
@@ -62,6 +62,6 @@
  void UpdateCageTask2(@Param("cell") Integer cell);

  //获取报警信息
  @Select("select * from alarmmg where endTime is null")
  @Select("select id,content,timeon as timeons,endTime from alarmmg where endTime is null")
  List<alarmmg> SelectAlarmmgInfo();
}