公共yml文件 ip 改回10.153.19.150

严智鑫

2024-05-07 b365a0879edc787655b908b0dbb65b5e966bb23b

 UI-Project/src/views/Identify/identify.vue

@@ -1,234 +1,106 @@
<template>
  <el-card style="margin-left: 10px; margin-top: 10px; margin-right: 10px;" v-loading="loading">
    <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>
    <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>
<!-- <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> -->
  <div id="app" style="margin-top: 20px;">  
    <div  
      :style="{ width: `${olWidth}px`, height: `${olHeight}px`,position: 'relative' }"  
    > 
    <div  
      v-for="(rect, index) in adjustedRects"  
      :key="index"  
      class="rect"  
      :style="{ position: 'absolute', top: `${rect.y_axis}px`, left: `${rect.x_axis}px`, width: `${rect.width}px`, height: `${rect.height}px` }"  
    >
     <!-- 箭头 -->  
     <div id="arrow"></div>  
     <div id="line"></div>  
     <!-- <div  class="centered-text" >NG24030401B01</div> -->
     <div  class="centered-text">
    <div>{{ rect.process_id }}</div>  
    <div style="margin-top: 50px;margin-left: -85px;">{{ rect.width }}*{{ rect.height }}</div>  
      </div>
    </div>
  </el-scrollbar> -->
      <g v-for="(rack, index) in racks" :key="index">
        <rect 
          :x="rack.x" 
          :y="rack.y" 
          :width="rack.width" 
          :height="rack.height" 
          :fill="rack.fillColor" 
          :data-index="index" 
          class="rack-rect" 
          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)" 
            :y="calculateItemYPosition(rack, item, itemIndex)" 
            :width="item.width" 
            :height="item.height" 
            :fill="item.fillColor"
          />
        </g>
      </g>
    </svg>
  </el-card>
   </div>
  </div>  
</template>

<script>
import Swal from 'sweetalert2'
import request from "@/utils/request";


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() {
    return {
      loading: false,
      racks: [
        { 
          x: 70, y: 126, width: 600, height: 240, fillColor: '#93d2f3', 
          items: [
            { position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456',y: '20'},
            { position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' },
            { 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
      ],
    };
  },
  
  methods: {
    calculateItemXPosition(rack, item, index) {
      if (item.position === 'top-right' || item.position === 'bottom-right') {
        return Math.min(rack.x + rack.width - item.width, rack.x + rack.width);
      } else {
        return rack.x;
      }
    },
    
    calculateItemYPosition(rack, item, index) {
      if (item.position === 'bottom-left' || item.position === 'bottom-right') {
        return Math.min(rack.y + rack.height - item.height, rack.y + rack.height);
      } else {
        return rack.y;
      }
    },
    
    showCustomAlert(content) {
      Swal.fire({
    // type: 'warning', // 弹框类型
    title: '该片玻璃状态', //标题
    // text: "注销后将无法恢复，请谨慎操作！", //显示内容            

    confirmButtonColor: '#3085d6',// 确定按钮的 颜色
    confirmButtonText: '人工拿走',// 确定按钮的 文字
    showCancelButton: true, // 是否显示取消按钮
    cancelButtonColor: '#d33', // 取消按钮的 颜色
    cancelButtonText: "破损", // 取消按钮的 文字

    // focusCancel: true, // 是否聚焦 取消按钮
    reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
}).then((isConfirm) => {
<script setup>  
import { ref, onMounted } from 'vue';  
import request from "@/utils/request"
const olWidth = ref(); 
const olHeight = ref();
const process_id = ref(); // 用于存储process_id的响应式引用 
// const rects = ref([]); // 用于存储矩形数据的响应式引用  
const adjustedRects = ref([]);
onMounted(async () => {  
    try {
        //判断 是否 点击的 确定按钮
        if (isConfirm.value) {
            Swal.fire("人工拿走", "点击了人工拿走", "success");
        }
        else {
            Swal.fire("破损", "点击了破损", "error");
        }
    } catch (e) {
        alert(e);
    }
});
    },
    const response = await request.post('/cacheGlass/taskCache/currentCutTerritory'); // 替换为你的API端点  
    if (response.code === 200) {  
      // const process_id = response.data[0].process_id
      const rawRects = response.data; // 设置矩形数据  
      console.log(response.data);
      const { olWidth: newolWidth, olHeight: newolHeight, process_id: newprocess_id  } = response.data; // 获取尺寸  
      olWidth.value = newolWidth; // 设置容器宽度  
      olHeight.value = newolHeight; // 设置容器高度  
      process_id.value = newprocess_id;  
    
    showRectInfo(rectInfo) {
      const contents = rectInfo.items.map(item => item.content).join(', ');
      this.$nextTick(() => {
        this.showCustomAlert(contents);
      });
    },
      adjustedRects.value = rawRects.map(rect => ({  
        ...rect, // 复制原始对象的其他属性  
        x_axis: (rect.x_axis*100) * 0.005, // 将x值除以3  
        y_axis: (rect.y_axis*100) * 0.005,
        width: (rect.width*100) * 0.004 ,
        height:( rect.height*100) * 0.004 ,
      }));  
        console.log(rect);

      //   console.log( (rect.width*100) / 300 );
    } else {  
      // console.error('Failed to fetch rectangles from API.');  
      console.error('Failed to fetch rects from API.'); 
  }
};
  } catch (error) {  
    // console.error('Error fetching rectangles :', error);
    console.error('Error fetching rects :', error);  
  }  
});  
</script>

<style scoped>
.glass-rack {
  width: 100%;
  height: 80vh;
.rect {  
  border: 1px solid black; /* 设置矩形的边框 */  
  background-color: lightblue; /* 设置矩形的背景色 */  
}
.rack-rect:hover {
  cursor: pointer;
.centered-text {
  /* 设置文字居中样式 */  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100%; /* 确保div占据整个矩形的高度 */  
}
.custom-popover-class {
  background-color: lightgrey;
  color: black;
  border: 1px solid black;
#rect {  
  position: relative; /* 确保箭头可以相对于矩形定位 */  
  /* 其他样式 */  
}

#home-card {
    width: 100%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    #home-item {
      border-style: solid;
      border-width: 1px;
      border-color: #E4E4E4;
      width: calc(34% - 20px);
      padding: 20px 0px 20px 20px;
      margin-right: 10px;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      /* align-items: center; */
      background: #fff;
      #home-img {
        display: inline-block;
        width: 160px;
        height: 60px;
        margin: 0;
        padding: 0;
#arrow {  
  position: absolute;  
  top: 70%; /* 箭头位于矩形中间 */  
  left: 200px; /* 箭头在矩形左侧一些距离 */  
  transform: translateY(-50%); /* 垂直居中 */  
  width: 0;  
  height: 0;  
  border-top: 10px solid transparent; /* 上边框 */  
  border-bottom: 10px solid transparent; /* 下边框 */  
  border-right: 20px solid #911005; /* 右边框，形成箭头 */  
  /* 根据需要调整边框大小和颜色 */  
      }
      #home-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 10px;
        #home-num {
          font-size: 40px;
          margin: 5px 0;
        }
      }
    }
  
#line {  
  position: absolute;  
  top: 70%; /* 直线位于矩形中间 */  
  left: 210px; /* 直线在箭头右侧一些距离 */  
  transform: translateY(-50%); /* 垂直居中 */  
  height: 2px; /* 直线的高度 */  
  width: 240px; /* 直线的长度，根据需要调整 */  
  background-color: #911005; /* 直线的颜色 */  
  }
</style>