From 81754ac5b49cdd16a713d86f88019be0e5ccd859 Mon Sep 17 00:00:00 2001 From: wang <3597712270@qq.com> Date: 星期二, 23 四月 2024 19:11:27 +0800 Subject: [PATCH] 展会页面 --- UI-Project/src/views/Identify/identify.vue | 84 ++++++++++++++++++++++++++++-------------- 1 files changed, 56 insertions(+), 28 deletions(-) diff --git a/UI-Project/src/views/Identify/identify.vue b/UI-Project/src/views/Identify/identify.vue index 13a7185..d2babdd 100644 --- a/UI-Project/src/views/Identify/identify.vue +++ b/UI-Project/src/views/Identify/identify.vue @@ -1,20 +1,25 @@ <template> <el-card style="margin-left: 10px; margin-top: 10px; margin-right: 10px;" v-loading="loading"> - <div style="display: flex;margin-bottom: 30px;"> + <div style="display: flex;"> <div style="margin-left: 400px; font-size: 20px;">宸ョ▼鍙凤細P20240305001 </div> <div style="margin-left: 150px; font-size: 20px;">鐗堝浘缂栧彿锛�1</div> </div> - <el-scrollbar height="650px"> - <div id="home-card"> - <div id="home-item"> - <svg width="100%" height="400" xmlns="http://www.w3.org/2000/svg" style="margin-top: -100px;margin-left: -80px;" :data="tableData"> - <!-- 绠ご --> + <svg width="100%" height="690" xmlns="http://www.w3.org/2000/svg" style="margin-top: -40px;"> <defs> <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto"> <path d="M2,2 L10,6 L2,10 L2,2" style="fill: #911005;" /> </marker> </defs> + <!-- <el-scrollbar height="630px"> + <div id="home-card"> + <div id="home-item" v-for="n in 20" :key="n"> + <div id="box" style="width: 100px;height: 165px;">100*65</div> + <div id="box" style="width: 107px;height: 150px;">107*60</div> + <div id="box" style="width: 107px;height: 155px;">109*60</div> + </div> + </div> + </el-scrollbar> --> <g v-for="(rack, index) in racks" :key="index"> <rect :x="rack.x" @@ -27,12 +32,26 @@ style="stroke:#c8c9cc;stroke-width:3;" @click="showRectInfo(rack)" /> - <!-- 绠ご --> <line x1='510' y1='309' x2='260' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> + </line> + <line x1='850' y1='309' x2='1100' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> + </line> + <line x1='510' y1='409' x2='260' y2='410' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> + </line> + <line x1='1200' y1='650' x2='1200' y2='470' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> </line> <text x="370" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-01</text> <text x="370" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text> + <text x="970" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-02</text> + <text x="970" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text> + + <text x="600" y="500" dominant-baseline="middle" text-anchor="middle">NG2024030501A-03</text> + <text x="600" y="520" dominant-baseline="middle" text-anchor="middle">800*450</text> + + + <text x="1280" y="520" dominant-baseline="middle" text-anchor="middle">NG2024030501A-04</text> + <text x="1280" y="540" dominant-baseline="middle" text-anchor="middle">400*300</text> <g v-for="(item, itemIndex) in rack.items" :key="itemIndex"> <rect :x="calculateItemXPosition(rack, item, itemIndex)" @@ -44,36 +63,22 @@ </g> </g> </svg> - </div> - </div> - </el-scrollbar> </el-card> </template> <script> import Swal from 'sweetalert2' import request from "@/utils/request"; -// const tableData = ref([]) -request.post("/cacheGlass/taskCache/currentCutTerritory").then((res) => { +request.get("/TidyUpGlassModule/CurrentCutTerritory").then((res) => { if (res.code == 200) { console.log(res.data); - tableData.value = res.data } else { ElMessage.warning(res.msg) - + router.push("/login") } }); - -// request.get("/TidyUpGlassModule/CurrentCutTerritory").then((res) => { -// if (res.code == 200) { -// console.log(res.data); -// } else { -// ElMessage.warning(res.msg) -// router.push("/login") -// } -// }); export default { data() { @@ -88,6 +93,30 @@ { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG12345678' } ] }, + { + x: 685, y: 126, width: 600, height: 240, fillColor: '#93d2f3', + items: [ + { position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, + { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, + { position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' } + ] + }, + { + x: 70, y: 380, width: 1100, height: 260, fillColor: '#81b337', + items: [ + { position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, + { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, + { position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' } + ] + }, + { + x: 1185, y: 380, width: 200, height: 300,fillColor: '#81b337', + items: [ + { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, + { position: 'top-right',width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, + { position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }, + ] + } // Add more racks and items here as needed ], @@ -171,18 +200,17 @@ display: flex; flex-wrap: wrap; #home-item { - /* border-style: solid; */ - /* border-width: 1px; - border-color: red; */ + border-style: solid; + border-width: 1px; + border-color: #E4E4E4; width: calc(34% - 20px); padding: 20px 0px 20px 20px; - margin-right: 20px; + margin-right: 10px; margin-bottom: 10px; display: flex; justify-content: center; /* align-items: center; */ background: #fff; - width: 700px; #home-img { display: inline-block; width: 160px; -- Gitblit v1.8.0