加拿大MES项目
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
clll
2023-09-13 36de27dcf89a1a651c6498f3dc4c8fd872ca3f92 
 CanadaMes-ui/src/views/home/index.vue


@@ -59,43 +59,68 @@


}







.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: 50vh;



    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;







    position: absolute;



    /* left: 116px; */



    /* left:1060px;18.88px */



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



}







.blocks-img2 {



    height: 100px;



    max-width: 100vw;



    background-repeat: no-repeat;



    background-size: 85px 100px;



    background-attachment: local;



    width: 100px;



    position: absolute;



    /* left: 116px; */



    /* left:1060px;18.88px */



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



}







.blocks-img3 {



    height: 90px;



    max-width: 100vw;



    background-repeat: no-repeat;



    background-size: 160px 40px;



    background-attachment: local;



    width: 160px;



    position: absolute;



    /* left: 116px; */



    /* left:1060px;18.88px */



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



}







.el-table td,



@@ -110,36 +135,79 @@


.el-table__empty-text {



    line-height: 41px;



}







.box {



    width: 90%;



    margin-left: 5%;



    height: 35px;



    color: red;



    font-size: 12px;



    overflow: hidden;



}







.text {



    width: auto;



    line-height: 35px;



    white-space: nowrap;



    animation: textScroll 20s linear infinite;



    margin: 0 auto;



}







@keyframes textScroll {



    0% {



        transform: translateX(100%);



    }







    100% {



        transform: translateX(-150%);



    }



}



</style>



<template>



    <el-container>



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



        <el-main>



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



                <div class="text">



                    Alarm:



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



                        {{ item['content'] }}



                    </label>



                </div>



            </div>



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



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



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



                <el-button type="primary" @click="showform()">{{ $t('Manually feed the glass') }}</el-button>



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



                <el-button type="warning" @click="showform1();">{{ $t('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 :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="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>



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



                    <el-table-column prop="glassId" :label="$t('Coming out glass ID')"></el-table-column>



                    <el-table-column :width="250" prop="cage" :label="$t('The Cage number being used')"></el-table-column>



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



                    <el-table-column prop="orderId" :label="$t('Order Nmuber')"></el-table-column>



                    <el-table-column prop="lengthWidth" :label="$t('Length and width')"></el-table-column>



                    <el-table-column prop="coating" :label="$t('coating')"></el-table-column>



                    <el-table-column :label="$t('Operate')">



                        <template slot-scope='scope'>



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



                                @click="endtask(0, scope.row.glassId, scope.row.cell)">{{ $t('end task') }}</el-button>



                        </template>



                    </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 :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="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>



                    <el-table-column prop="glassId" :label="$t('Incoming glass ID')"></el-table-column>



                    <el-table-column :width="250" prop="cage" :label="$t('The Cage number being used')"></el-table-column>



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



                    <el-table-column prop="orderId" :label="$t('Order Nmuber')"></el-table-column>



                    <el-table-column prop="lengthWidth" :label="$t('Length and width')"></el-table-column>



                    <el-table-column prop="coating" :label="$t('coating')"></el-table-column>



                    <el-table-column :label="$t('Operate')">



                        <template slot-scope='scope'>



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



                                @click="endtask(1, scope.row.glassId, scope.row.cell)">{{ $t('end task') }}</el-button>



                        </template>



                    </el-table-column>



                </el-table>



            </div>



@@ -158,67 +226,124 @@


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



                <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']"



                        @click="showcageinfo(item['cage'])"></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 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']"



                        @click="showcageinfo(item['cage'])"></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 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']"



                        @click="showcageinfo(item['cage'])"></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 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']"



                        @click="showcageinfo(item['cage'])"></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 class="blocks-img" :style="{ left: car1 + 'px', top: '16px' }"></div>



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



                <div class="blocks-img2" :style="{ left: '912px', top: '366px' }"></div>



                <div class="blocks-img3" :style="{ left: '875px', top: '455px' }"></div>



            </div>



        </el-footer>



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



        <el-dialog :visible.sync="dialogFormVisible" :title="$t('Please confirm the glass information')">



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



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



                <el-form-item :label="$t('order')">



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



                </el-form-item>



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



                <el-form-item :label="$t('length')">



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



                </el-form-item>



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



                <el-form-item :label="$t('width')">



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



                </el-form-item>



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



                <el-form-item :label="$t('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>



                    <el-button @click="cancal()">{{ $t('cancal') }}</el-button>



                    <el-button @click="sbumitglassid()" type="primary">{{ $t('confirm') }}</el-button>



                </span>



            </template>



        </el-dialog>



        <el-dialog :visible.sync="dialogFormVisible1" :title="$t('Please confirm the Ordering Information')">



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



                <el-form-item :label="$t('order')">



                    <el-input v-model="form1.order" autocomplete="off" />



                </el-form-item>



                <el-form-item :label="$t('number')">



                    <el-input v-model="form1.number" autocomplete="off" />



                </el-form-item>



            </el-form>



            <template #footer>



                <span class="dialog-footer">



                    <el-button @click="cancal1()">{{ $t('cancal') }}</el-button>



                    <el-button @click="getOrder();" type="primary">{{ $t('confirm') }}</el-button>



                </span>



            </template>



        </el-dialog>



        <el-dialog :visible.sync="dialogFormVisible2" :title="$t('Alarm Information')">



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



                <el-table-column prop="id" :label="$t('id')"></el-table-column>



                <el-table-column prop="content" :label="$t('content')"></el-table-column>



                <el-table-column prop="timeons" :label="$t('timeon')"></el-table-column>



                <el-table-column prop="endTime" :label="$t('endTime')"></el-table-column>



            </el-table>



        </el-dialog>



        <el-dialog :visible.sync="dialogFormVisible3" :title="$t('Cage Details')">



            <el-table :data="this.cageinfo" :height="700" border style="width: 100%;overflow: auto;">



                <el-table-column :width="150" prop="cage" :label="$t('The Cage number')"></el-table-column>



                <el-table-column prop="cell" :label="$t('cell')"></el-table-column>



                <el-table-column prop="tier" :label="$t('tier')"></el-table-column>



                <el-table-column prop="glassId" :label="$t('glassid')"></el-table-column>



                <el-table-column :width="130" prop="orderId" :label="$t('order number')"></el-table-column>



                <el-table-column :width="150" prop="lengthWidth" :label="$t('Length and width')"></el-table-column>



                <el-table-column prop="coating" :label="$t('coating')"></el-table-column>



                <el-table-column :width="140" :label="$t('Operate')">



                    <template slot-scope='scope'>



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



                            @click="deleteglass(scope.row.glassId, scope.row.state)">{{ $t('delete') }}</el-button>



                        <!-- <el-button type="primary" style="padding: 4px 10px;font-size: 12px;" @click="open">{{ $t('delete')



                        }}</el-button> -->



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



                            @click="outglass(scope.row.glassId, scope.row.state)">{{ $t('out') }}</el-button>



                    </template>



                </el-table-column>



            </el-table>



        </el-dialog>



    </el-container>



</template>



  


<script>







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



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











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



let socket;



export default {



    name: "Home",



    data() {



        return {



            mixins: [LanguageMixin],



            dialogFormVisible: false,



            dialogFormVisible1: false,



            dialogFormVisible2: false,



            dialogFormVisible3: false,



            form: {



                orderno: "NG2210210",



                length: 800,



                width: 1000,



                coating: "red",



            },



            form1: {



                order: "NG2210210",



                number: 800,



            },



            alarm: [],



            tableData: [],



            cagelist1: [],



            cagelist2: [],



@@ -231,8 +356,10 @@


            order: "",



            glassid: "",



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



            car1: 116,



            car2: 187



            car1: 150,



            car2: 242,



            cageinfo: [],



            cage: 0



        };



    },



    created() {



@@ -247,7 +374,6 @@


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



            } else {



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







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



                if (socket != null) {



                    socket.close();



@@ -264,28 +390,23 @@






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



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



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



                    if (obj.params != null) {



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



                    this.cagelist3 = obj.cagelist3[0];



                    this.cagelist4 = obj.cagelist4[0];



                    this.tasklist1 = obj.tasklist1[0];



                    this.tasklist2 = obj.tasklist2[0];



                    this.alarm = obj.alarmmg[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] };



                    SelectCageInfo(this.cage).then(res => {



                        this.cageinfo = res.data.cageinfo;



                    });







                    //     // 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);



@@ -311,20 +432,29 @@


            });



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



                this.tasklist1 = res.data.list;



                console.log(this.tasklist1);



                if (res.data.list.length > 0) {



                    this.incell = this.tasklist1[0]['cell'];



                }



            });



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



                this.tasklist2 = res.data.list;



                if (res.data.list.length > 0) {



                    this.outcell = this.tasklist2[0]['cell'];



                }







            });



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



                this.tasklist2 = res.data.list;



                






            });



            SelectAlarmmgInfo().then(res => {



                this.alarm = res.data.alarmmg;



            });



        },



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



        getStatusClass(state) {



            if (state == 0) {



                return "green gezi";



                return "gezi";



            } else if (state == 1) {



                return "blue gezi";



            } else if (state == 2) {



@@ -337,51 +467,144 @@


        },



        //按订单出片



        getOrder() {



            if (this.order != "") {



            if (this.form1.order != "") {



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



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



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



                        this.dialogFormVisible1 = false;



                        this.$message.success(this.$t('Operation successful'));







                    } else {



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



                        this.$message.success(this.$t('There is no glass for this order'));



                    }



                    this.load();



                });



            }







        },



        //手动上片



        sbumitglassid() {



            if (this.form.order != "") {



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



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



                        this.$message.success(this.$t('Operation successful'));



                        this.cancal();



                    } else if (res.data.message2 == 500) {



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



                    }



                    else if (res.data.message2 == 300) {



                        this.$message.success(this.$t('There is no such glass'));



                    }



                    else if (res.data.message2 == 400) {



                        this.$message.success(this.$t('There is no such grid'));



                    }



                });



            }



        },



        showform() {



            this.form =



            {



                orderno: "NG2210210",



                length: 800,



                width: 1000,



                coating: "red",



            };



            this.dialogFormVisible = true;



            if (this.glassid != "") {



                this.form =



                {



                    orderno: "NG2210210",



                    length: 800,



                    width: 1000,



                    coating: "red",



                };



                this.dialogFormVisible = true;



            }



        },



        showform1() {



            if (this.order != "") {



                this.form1 =



                {



                    order: "NG2210210",



                    number: 800,



                };



                this.dialogFormVisible1 = 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");



        cancal1() {



            this.dialogFormVisible1 = false;



            this.form1 = {};



        },



        endtask(type, glassid, cell) {



            this.$confirm(this.$t('Are you sure to perform this operation ?'), this.$t('prompt'), {



                confirmButtonText: this.$t('Yes'),



                cancelButtonText: this.$t('No'),



                type: 'warning'



            }).then(() => {



                UpdateTask(type, glassid, cell).then(res => {



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



                        this.$message.success(this.$t('Operation successful'));



                    }



                });



            }



            }).catch(() => {



                this.$message({



                    type: 'info',



                    message: this.$t('Operation canceled')



                });



            });







        },



        endtask(type,shelfrack) {



            alert(type);



            alert(shelfrack);



        showcageinfo(cage) {



            this.cage = cage;



            SelectCageInfo(cage).then(res => {



                this.cageinfo = res.data.cageinfo;



                this.dialogFormVisible3 = true;



            });



        },



        deleteglass(glassid, state) {



            this.$confirm(this.$t('Are you sure to perform this operation ?'), this.$t('prompt'), {



                confirmButtonText: this.$t('Yes'),



                cancelButtonText: this.$t('No'),



                type: 'warning'



            }).then(() => {



                if (state == 1) {



                    DeleteByGlassID(glassid).then(res => {



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



                            this.$message.success(this.$t('Operation successful'));



                        }



                    });



                } else {



                    this.$message.success(this.$t('No delete allowed'));



                }



            }).catch(() => {



                this.$message({



                    type: 'info',



                    message: this.$t('Operation canceled')



                });



            });



        },



        outglass(glassid, state) {



            this.$confirm(this.$t('Are you sure to perform this operation ?'), this.$t('prompt'), {



                confirmButtonText: this.$t('Yes'),



                cancelButtonText: this.$t('No'),



                type: 'warning'



            }).then(() => {



                if (state == 1) {



                    OutByGlassID(glassid).then(res => {



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



                            this.$message.success(this.$t('Operation successful'));



                        }



                    });



                } else {



                    this.$message.success(this.$t('No out allowed'));



                }



            }).catch(() => {



                this.$message({



                    type: 'info',



                    message: this.$t('Operation canceled')



                });



            });







        }



    }



};







}







</script>