| | |
| | | <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 black 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;
|
| | | }
|
| | |
|
| | | .black {
|
| | | background-color: black;
|
| | | }
|
| | |
|
| | | .gezi {
|
| | | height: 23px;
|
| | | width: 1.74px;
|
| | | }
|
| | |
|
| | | .gezi:nth-child(22) {
|
| | | margin-left:4px;
|
| | | margin-left: 4px;
|
| | | }
|
| | |
|
| | | .gezi:nth-child(43) {
|
| | | margin-left:4px;
|
| | | margin-left: 4px;
|
| | | }
|
| | |
|
| | | .gezi:nth-child(64) {
|
| | | margin-left:4px;
|
| | | margin-left: 4px;
|
| | | }
|
| | |
|
| | | .gezi:nth-child(85) {
|
| | | margin-left:4px;
|
| | | margin-left: 4px;
|
| | | }
|
| | |
|
| | | .block {
|
| | | min-height: 50vh;
|
| | | max-width: 100vw; |
| | | background-image: url('xmjc.png');
|
| | | margin: 0px;
|
| | | background-repeat:no-repeat ;
|
| | | background-size:100% 100%;
|
| | | background-attachment:local;
|
| | | }
|
| | | </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"></el-input>
|
| | | <el-button type="primary">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>
|
| | | <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>
|
| | | </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="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>
|
| | | </el-container>
|
| | | </template>
|
| | |
|
| | | <script>
|
| | | <script>
|
| | |
|
| | | import {home,home2} from "../../api/home";
|
| | | import { home, home2, loadtask, InsertOrder } 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> |
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | tableData: [],
|
| | | cagelist1: [],
|
| | | cagelist2: [],
|
| | | cagelist3: [],
|
| | | cagelist4: [],
|
| | | form: {},
|
| | | task1: 3,
|
| | | task2: 4,
|
| | | tasklist1: [],
|
| | | tasklist2: [],
|
| | | src: "./img/xmjc.png",
|
| | | order: ""
|
| | | };
|
| | | },
|
| | | 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;
|
| | | });
|
| | | loadtask(this.task2).then(res => {
|
| | | this.tasklist2 = res.data.list;
|
| | | });
|
| | | },
|
| | | 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("operation failed");
|
| | | }
|
| | | this.load();
|
| | | });
|
| | | }
|
| | | |
| | | }
|
| | | }
|
| | | };
|
| | |
|
| | |
|
| | | </script> |