From 4e8d4f3b0fccc68364ea8655dfb60b015de2857e Mon Sep 17 00:00:00 2001
From: zhangyong <517047165@qq.com>
Date: 星期一, 04 九月 2023 17:58:05 +0800
Subject: [PATCH] 修改主页面设备示意图显示效果
---
CanadaMes-ui/src/views/home/index.vue | 260 +++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 218 insertions(+), 42 deletions(-)
diff --git a/CanadaMes-ui/src/views/home/index.vue b/CanadaMes-ui/src/views/home/index.vue
index 8e832d3..e3a2c1b 100644
--- a/CanadaMes-ui/src/views/home/index.vue
+++ b/CanadaMes-ui/src/views/home/index.vue
@@ -1,46 +1,222 @@
-<template>
- <div class="app">
- <!--闈㈠寘灞戝鑸尯鍩�-->
- <el-breadcrumb separator-class="el-icon-arrow-right">
- <el-breadcrumb-item :to="{ path: '/home' }">棣栭〉</el-breadcrumb-item>
-
- </el-breadcrumb>
- <div>mes鎺у埗椤�</div>
- </div>
- </template>
-
- <script>
+<style>
+* {
+ margin: 0;
+ padding: 0;
+}
- fetch('/devices')
- .then(response => response.json())
- .then(data => {
- // 鍦ㄨ繖閲屽鐞嗚繑鍥炵殑璁惧鏁版嵁
- console.log(data);
- })
- .catch(error => {
- // 澶勭悊閿欒鎯呭喌
- console.error('Error:', error);
- });
+.occupy {
+ height: 100%;
+ width: 10%;
+ background-color: white;
+ margin: 0px 8px 0px 8px;
+ border: 1px black solid;
+ text-align: center;
+ padding: 5px;
+}
- export default {
- name: "home",
-
- }
-
- </script>
-
- <style lang="less" scoped>
- .el-table {
- margin-top: 15px;
+.el-col {
+ margin-top: 4px;
+}
+
+.biao {
font-size: 12px;
- }
+}
+
+.zhi {
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.el-main {
+ padding: 3px;
+ min-height: 40vh;
+}
+.el-footer {
+ max-height: 60vh;
+ padding: 0px;
+ margin: 0px;
+}
+.green {
+ background-color: green;
+}
+
+.blue {
+ background-color: blue;
+}
+
+.red {
+ background-color: red;
+}
+
+.yellow {
+ background-color: yellow;
+}
+
+.black {
+ background-color: black;
+}
+
+.gezi {
+ height: 23px;
+ width: 1.74px;
+}
+
+.gezi:nth-child(22) {
+ margin-left: 4px;
+}
+
+.gezi:nth-child(43) {
+ margin-left: 4px;
+}
+
+.gezi:nth-child(64) {
+ margin-left: 4px;
+}
+
+.gezi:nth-child(85) {
+ 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>
+ <!-- <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>
- .el-pagination {
- margin-top: 15px;
- }
-
- .app .el-card {
- width: 99%;
- }
- </style>
-
\ No newline at end of file
+<script>
+
+import { home, home2, loadtask, InsertOrder } from "../../api/home";
+
+
+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>
\ No newline at end of file
--
Gitblit v1.8.0