From baef763e1319d58eda668a5cac6edd8a150defd8 Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期二, 05 九月 2023 17:00:59 +0800
Subject: [PATCH] Merge branch 'master' of ssh://10.153.19.150:29418/CanadaMes
---
CanadaMes-ui/src/views/home/index.vue | 450 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 299 insertions(+), 151 deletions(-)
diff --git a/CanadaMes-ui/src/views/home/index.vue b/CanadaMes-ui/src/views/home/index.vue
index da35287..a6d1c92 100644
--- a/CanadaMes-ui/src/views/home/index.vue
+++ b/CanadaMes-ui/src/views/home/index.vue
@@ -1,176 +1,324 @@
<style>
-*{
- margin:0;
- padding:0;
-
+* {
+ margin: 0;
+ padding: 0;
}
-.occupy{
- height:100%;
- width:10%;
- background-color:white;
+
+.occupy {
+ height: 100%;
+ width: 10%;
+ background-color: white;
margin: 0px 8px 0px 8px;
- border:1px black solid;
- text-align:center;
+ border: 1px #EBEEF5 solid;
+ text-align: center;
padding: 5px;
}
-.el-col{
- margin-top:7px;
+
+.el-col {
+ margin-top: 4px;
}
-.biao{
- font-size:12px;
+
+.biao {
+ font-size: 12px;
}
-.zhi{
- font-size:18px;
+
+.zhi {
+ font-size: 18px;
font-weight: bold;
}
-.el-main{
- --el-main-padding: 0px;
+
+.el-main {
+ padding: 3px;
+ min-height: 40vh;
}
-.green{
- background-color:green;
+
+.el-footer {
+ max-height: 60vh;
+ padding: 0px;
+ margin: 0px;
}
-.blue{
- background-color:blue;
+
+.green {
+ background-color: green;
}
-.red{
- background-color:red;
+
+.blue {
+ background-color: blue;
}
-.yellow{
- background-color:yellow;
+
+.red {
+ background-color: red;
}
-.gezi{
- height:25px;
- width: 2.02px;
+
+.yellow {
+ background-color: yellow;
}
-.gezi:nth-child(22) {
- margin-left:4px;
+
+.black {
+ background-color: black;
}
-.gezi:nth-child(43) {
- margin-left:4px;
+
+.gezi {
+ height: 25px;
+ width: 3.25px;
}
-.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;
+}
+
+
+
+.blocks {
+ min-height: 50vh;
+ 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-container style=" height:90%;
- width:100%;">
- <!-- <el-header style="padding: 10px;"></el-header> -->
- <el-main>
- <div style="display:flex;justify-content: space-around;width: 75%;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 order number"></el-input>
- <el-button type="warning">Exit the glass by order number</el-button>
- </div>
- <div>
- <el-table :data="tableData" border style="width: 100%">
- <el-table-column prop="date" label="Coming out glass ID"></el-table-column>
- <el-table-column prop="name" label="The Grille number being used"></el-table-column>
- <el-table-column prop="address" label="Order number"></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>
- <el-table :data="tableData" border style="width: 100%">
- <el-table-column prop="date" label="Incoming glass ID"></el-table-column>
- <el-table-column prop="name" label="The Grille number being used"></el-table-column>
- <el-table-column prop="address" label="Order number"></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>
- </div>
- <div style="padding: 10px;display: flex;height:120px;">
- <div v-for="item in tableData" :key="item['cageno']" class="occupy">
- <el-col style="text-align:left;font-weight: bold;">#{{ item['cageno'] }}</el-col>
- <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
- <span class="biao">Usage</span><span class="zhi">{{ item['cell'] }}%</span>
- </el-col>
- <hr style="width:80%;margin: 0 auto;"/>
- <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
- <span class="biao">Space (Pieces)</span><span class="zhi">{{ item['falg'] }}</span>
- </el-col>
- </div>
- </div>
- </el-main>
- <el-footer>
- <div class="demo-image__placeholder" style="text-align: center;">
- <div class="block">
- <el-image :src="require('@/img/xmjc.png')" style="height: 400px;"></el-image>
- </div>
- </div>
- <div style="display:flex;position: absolute;float:left;z-index: 999;top:435px;left:531px;">
- <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:435px;left: 794.2px;">
- <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:462px;left:531px;">
- <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:462px;left: 794.2px;">
- <div :class="getStatusClass(item.state)" v-for="item in cagelist4" :key="item['date']"></div>
- </div>
- </el-footer>
- </el-container>
- </template>
+ <el-container>
+ <!-- <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" 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 :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 :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 v-for="item in tableData" :key="item['cageno']" class="occupy">
+ <el-col style="text-align:left;font-weight: bold;">#{{ item['cage'] }}</el-col>
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span class="biao">Usage</span><span class="zhi">{{ item['cell'] }}%</span>
+ </el-col>
+ <hr style="width:80%;margin: 0 auto;" />
+ <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
+ <span class="biao">Space (Pieces)</span><span class="zhi">{{ item['state'] }}</span>
+ </el-col>
+ </div>
+ </div>
+ </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>
+ <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>
+<script>
- import {home,home2} from "../../api/home";
+import { home, home2, loadtask, InsertOrder, Addglassid } from "../../api/home";
-
- export default {
- data() {
- return {
- tableData: [],
- cagelist1: [],
- cagelist2: [],
- cagelist3: [],
- cagelist4: [],
- form: {},
- src: "./img/xmjc.png"
- };
- },
- created() {
- this.load();
- },
- methods: {
- load() {
-// request.get("api/storageRack/load").then((res) => {
-// this.tableData = res.data.list;
-// });
-// request.get("/storageRack/loads").then((res) => {
-// this.cagelist1 = res.data.list1;
-// this.cagelist2 = res.data.list2;
-// this.cagelist3 = res.data.list3;
-// this.cagelist4 = res.data.list4;
-// });
-home().then(res => {
- console.log(res.data.list);
- this.tableData = res.data.list;
- });
- home2().then(res => {
- this.cagelist1 = res.data.list1;
- this.cagelist2 = res.data.list2;
- this.cagelist3 = res.data.list3;
- this.cagelist4 = res.data.list4;
- });
- },
- getStatusClass(state) {
- if (state === 0) {
- return "green gezi";
- } else if (state === 1) {
- return "blue gezi";
- } else if (state === 2) {
- return "red gezi";
- } else {
- return "yellow gezi";
- }
- }
- }
- };
- </script>
\ No newline at end of file
+export default {
+ data() {
+ return {
+ dialogFormVisible: false,
+ form: {
+ orderno: "NG2210210",
+ length: 800,
+ width: 1000,
+ coating: "red",
+ },
+ tableData: [],
+ cagelist1: [],
+ cagelist2: [],
+ cagelist3: [],
+ cagelist4: [],
+ task1: 2,
+ task2: 3,
+ tasklist1: [],
+ tasklist2: [],
+ order: "",
+ glassid: "",
+ url: "../../img/bigcar01.png",
+ car1: 116,
+ car2: 187
+ };
+ },
+ created() {
+ this.load();
+ },
+ methods: {
+ load() {
+ home().then(res => {
+ this.tableData = res.data.list;
+ });
+ home2().then(res => {
+ this.cagelist1 = res.data.list1;
+ this.cagelist2 = res.data.list2;
+ this.cagelist3 = res.data.list3;
+ this.cagelist4 = res.data.list4;
+ });
+ 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 "blue gezi";
+ } else if (state == 2) {
+ return "yellow gezi";
+ } else if (state == 3) {
+ return "red gezi";
+ } else {
+ 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("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(){
+
+ }
+ }
+};
+
+
+</script>
\ No newline at end of file
--
Gitblit v1.8.0