| | |
| | | <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" |
| | |
| | | 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)" |
| | |
| | | </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() { |
| | |
| | | { 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 |
| | | ], |
| | |
| | | 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; |