wuyouming666
2024-04-24 52850f1dccd5a59581d6bb1db8d29ba9b8a32369
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;