| | |
| | | width: 10%;
|
| | | background-color: white;
|
| | | margin: 0px 8px 0px 8px;
|
| | | border: 1px black solid;
|
| | | border: 1px #EBEEF5 solid;
|
| | | text-align: center;
|
| | | padding: 5px;
|
| | | }
|
| | |
| | | padding: 3px;
|
| | | min-height: 40vh;
|
| | | }
|
| | |
|
| | | .el-footer {
|
| | | max-height: 60vh;
|
| | | padding: 0px;
|
| | | margin: 0px;
|
| | | }
|
| | |
|
| | | .green {
|
| | | background-color: green;
|
| | | }
|
| | |
| | | }
|
| | |
|
| | | .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>
|
| | |
| | | <!-- <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;">
|
| | |
| | | </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: [],
|
| | | 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() {
|
| | |
| | | });
|
| | | 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) {
|
| | |
| | | return "black gezi";
|
| | | }
|
| | | },
|
| | | //按订单出片
|
| | | getOrder() {
|
| | | 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(){
|
| | | |
| | | }
|
| | | }
|
| | | };
|