优化版图显示、钢化模拟计算保存、结果显示

wuyouming666

2025-03-04 cad671a443f34b411ed4a69cb94490b1121102ce

优化版图显示、钢化模拟计算保存、结果显示

 north-glass-erp/northglass-erp/package-lock.json

Diff too large

 north-glass-erp/northglass-erp/package.json

@@ -15,6 +15,7 @@
    "element-plus": "^2.9.3",
    "file-saver": "^2.0.5",
    "moment": "^2.30.1",
    "northglass-erp": "file:",
    "pinia": "^2.1.6",
    "pinia-plugin-persistedstate": "^3.2.0",
    "qrcode": "^1.5.3",

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/GlassComputed.vue

@@ -3,21 +3,61 @@
import ComputeDetail from "@/views/pp/glassOptimize/page/ComputeDetail.vue";
import Compute from "@/views/pp/glassOptimize/page/Compute.vue";
import {onMounted, ref} from 'vue';
import {ElMessage} from "element-plus";
import {ElMessage, ElLoading} from "element-plus";
import request from "@/utils/request";

const props = defineProps({
  projectNo : String
});

const computed = ref(null);
const computedCard = ref(null);
const computedData = ref({
  // 要传递给子组件的数据
});

// 监听子组件ComputeCard的数据





const handleCardData = (data) => {

  computedCard.value = data;
  // 将 computed.value 合并到 computedCard.value 的最外层
  computedCard.value = {
    ...computed.value,
    ...computedCard.value
  };
};

// 监听子组件ComputeDetail的数据
const handleData = (data) => {
  computed.value = data;
};

onMounted(() => {
  if (props.projectNo) {
    handleFetchData(props.projectNo);
    handleTableData(data);
    handleDataReceive(data);
  }
});

// 在父组件中定义处理接收数据的函数
const handleDataReceive= async (data) => {
  console.log('接收到子组件的数据2:', data);
  // 处理数据，例如更新父组件的状态或调用后端API
 
}


// 用于存储从后端获取到的数据，初始化为空数组
const receivedData = ref([]);


console.log(receivedData)
const handleFetchData = async (projectNumber) => {
  try {
    const res = await request.post(`/glassOptimize/selectProjectCompute/${projectNumber}`);
@@ -39,6 +79,129 @@
  }
};

const  handleTableData= async (data) => {
  // 处理接收到的表格数据
  console.log('父组件接收到的数据1:', data);
}

const handleSimulation = async () => {
  const loading = ElLoading.service({
      lock: true,
      text: '正在计算中，请稍候...',
      background: 'rgba(0, 0, 0, 0.7)'
    });
   console.log('发送到后端的数据',computedCard.value)
  const mockData = {
      code: 200,
      data: [
        {
          "glass_details": [
            {
              "angle": 0.0,
              "glass_type": 3,
              "height": 862,
              "layers_number": 2,
              "order_number": 33,
              "process_id": "NG24120028A005",
              "technology_number": 2,
              "tempering_feed_sequence": 14,
              "tempering_layout_id": 15,
              "width": 814,
              "x_coordinate": 1582.0,
              "y_coordinate": 3768.0
            },
            {
              "angle": 0.1,
              "glass_type": 4,
              "height": 862,
              "layers_number": 2,
              "order_number": 33,
              "process_id": "NG24120028A005",
              "technology_number": 2,
              "tempering_feed_sequence": 14,
              "tempering_layout_id": 15,
              "width": 814,
              "x_coordinate": 1582.0,
              "y_coordinate": 3768.0
            }
          ],
          "guidance": 15,
          "rackinfos": [
            "NG24120026A003-2",
            "NG24120027A003-2",
            "NG24120028A005-2"
          ],
          "ratioResult": [
            {
              "area": 10.53,
              "glass_total": 15,
              "ratio": 0.74,
              "tempering_layout_id": "13"
            },
            {
              "area": 10.53,
              "glass_total": 15,
              "ratio": 0.74,
              "tempering_layout_id": "14"
            },
            {
              "area": 9.82,
              "glass_total": 14,
              "ratio": 0.69,
              "tempering_layout_id": "15"
            }
          ],
          "resultSum": [15.0, 0.74]
        }
      ]
    };
    if (mockData.code === 200) {
    loading.close();
    ElMessage.success('模拟计算成功!');
    }
    // 更新computedData
    computedData.value = mockData;
  // try {
  //   if (!computed.value ) {
  //     ElMessage.warning('请先加载数据再进行模拟计算');
  //     return;
  //   }

  //   // 显示加载提示
  //   const loading = ElLoading.service({
  //     lock: true,
  //     text: '正在计算中，请稍候...',
  //     background: 'rgba(0, 0, 0, 0.7)'
  //   });

  //   try {
  //     // 将数据提交到后端
  //     const response = await request.post('/glassOptimize/simulationCalculate', {
        
  //       data: computedCard.value

  //     });

  //     if (response.code === 200) {
  //       ElMessage.success('模拟计算成功!');
  //     } else {
  //       ElMessage.error(response.msg || '模拟计算失败');
  //     }
  //   } catch (error) {
  //     console.error('请求失败:', error);
  //     ElMessage.error('网络异常，请稍后再试');
  //   } finally {
  //     // 关闭加载提示
  //     loading.close();
  //   }
  // } catch (error) {
  //   console.error('请求失败:', error);
  //   ElMessage.error('网络异常，请稍后再试');
  // }
};



//接受子组件ComputeCard的流程卡号
let projectRow = ref({
  processId:null,
@@ -52,22 +215,22 @@

<template>
  <div style="width: 100%; height: 100%;">

   
    <div id="compute">
      <compute @fetch-data="handleFetchData" :project-no="props.projectNo"/>
      <compute  :data="computedData" @fetch-data="handleFetchData" :project-no="props.projectNo"  @sendData="handleData"  @simulate-click="handleSimulation" />
    </div>

    <div id="computeCard">
      <compute-card :table-data="receivedData"
                    :process-id="projectRow.processId===null?null:projectRow.processId"
                    @upProcessId="handleUpdateProcessId"
                    @upProcessId="handleUpdateProcessId" @sendData="handleCardData"
      />
    </div>

    <div id="computeDetail">
      <compute-detail :process-id="projectRow.processId===null?null:projectRow.processId" />
      <compute-detail :process-id="projectRow.processId===null?null:projectRow.processId"   />
    </div>

   
  </div>
</template>


 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/OptimizePrint.vue

@@ -1,11 +1,1658 @@
<script setup>

</script>

<template>
  111
  <div >
    <RectRenderer 
  :layoutData="layoutData" 
  :gw="1200" 
  :gh="900" 
  style="width: 1200px; height: 900px; position: relative;"
/>


  </div>
</template>

<style scoped>
<script setup>
import { ref } from 'vue';
import RectRenderer from './RectRenderer.vue';

</style>
const layoutData = ref({
  
    "result": "ok",
    "data": {
        "Layouts": [{
            "mnumber": 1,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "60",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2310,
                "x": 0,
                "y": 1715,
                "rownumber": 60
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2310,
                "y": 1715,
                "rownumber": 22
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "23",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2080,
                "x": 0,
                "y": 990,
                "rownumber": 23
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "71",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2080,
                "x": 0,
                "y": 265,
                "rownumber": 71
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "63",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2180,
                "x": 2080,
                "y": 990,
                "rownumber": 63
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2080,
                "y": 265,
                "rownumber": 22
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 120,
                "x": 4380,
                "y": 1715,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2080,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2080,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 990,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 110,
                "x": 4150,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 1715,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 240,
                "x": 4260,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 2,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 1715,
                "rownumber": 22
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 990,
                "rownumber": 22
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 265,
                "rownumber": 22
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 1715,
                "rownumber": 22
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 990,
                "rownumber": 22
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "22",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 265,
                "rownumber": 22
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 360,
                "x": 4140,
                "y": 1715,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 1715,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 360,
                "x": 4140,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 3,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "61",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 1715,
                "rownumber": 61
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "61",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 990,
                "rownumber": 61
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "61",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 265,
                "rownumber": 61
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "61",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 1715,
                "rownumber": 61
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "61",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 990,
                "rownumber": 61
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "61",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 265,
                "rownumber": 61
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 2070,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 2440,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 360,
                "x": 4140,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 4,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "61",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2070,
                "x": 0,
                "y": 1715,
                "rownumber": 61
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "27",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1989,
                "x": 0,
                "y": 990,
                "rownumber": 27
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "25",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1956,
                "x": 0,
                "y": 265,
                "rownumber": 25
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "26",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 2065,
                "x": 2070,
                "y": 1715,
                "rownumber": 26
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "64",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1700,
                "x": 2070,
                "y": 990,
                "rownumber": 64
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "68",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1630,
                "x": 2070,
                "y": 265,
                "rownumber": 68
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "36",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 710,
                "x": 3770,
                "y": 990,
                "rownumber": 36
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "35",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 710,
                "x": 3770,
                "y": 265,
                "rownumber": 35
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1956,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 990,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 33,
                "x": 1956,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 1715,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 81,
                "x": 1989,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 365,
                "x": 4135,
                "y": 1715,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 70,
                "x": 3700,
                "y": 265,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1700,
                "x": 2070,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 710,
                "x": 3770,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 1715,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 20,
                "x": 4480,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 5,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "37",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1770,
                "x": 0,
                "y": 1715,
                "rownumber": 37
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "34",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1408,
                "x": 0,
                "y": 990,
                "rownumber": 34
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "37",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1770,
                "x": 0,
                "y": 265,
                "rownumber": 37
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "72",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2060,
                "x": 1770,
                "y": 1715,
                "rownumber": 72
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "66",
                "DM1": 0,
                "liuchengka": "NG22091408A07",
                "JiaHao": "A07",
                "LM2": 0,
                "LM1": 0,
                "w": 627,
                "x": 3830,
                "y": 1715,
                "rownumber": 66
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "59",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2060,
                "x": 1770,
                "y": 990,
                "rownumber": 59
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "70",
                "DM1": 0,
                "liuchengka": "NG22091408A07",
                "JiaHao": "A07",
                "LM2": 0,
                "LM1": 0,
                "w": 598,
                "x": 3830,
                "y": 990,
                "rownumber": 70
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "59",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2060,
                "x": 1770,
                "y": 265,
                "rownumber": 59
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "32",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 595,
                "x": 3830,
                "y": 265,
                "rownumber": 32
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 362,
                "x": 1408,
                "y": 990,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1770,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 43,
                "x": 4457,
                "y": 1715,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 72,
                "x": 4428,
                "y": 990,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2060,
                "x": 1770,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 75,
                "x": 4425,
                "y": 265,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 670,
                "x": 3830,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 6,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "62",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 2055,
                "x": 0,
                "y": 1715,
                "rownumber": 62
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "28",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1992,
                "x": 2055,
                "y": 1715,
                "rownumber": 28
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "42",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1892,
                "x": 0,
                "y": 990,
                "rownumber": 42
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "42",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1892,
                "x": 0,
                "y": 265,
                "rownumber": 42
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "68",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1630,
                "x": 1892,
                "y": 990,
                "rownumber": 68
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "69",
                "DM1": 0,
                "liuchengka": "NG22091408A07",
                "JiaHao": "A07",
                "LM2": 0,
                "LM1": 0,
                "w": 950,
                "x": 3522,
                "y": 990,
                "rownumber": 69
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "65",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1970,
                "x": 1892,
                "y": 265,
                "rownumber": 65
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "31",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 590,
                "x": 3862,
                "y": 265,
                "rownumber": 31
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 453,
                "x": 4047,
                "y": 1715,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1892,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 28,
                "x": 4472,
                "y": 990,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 48,
                "x": 4452,
                "y": 265,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 2608,
                "x": 1892,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 7,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "68",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1630,
                "x": 0,
                "y": 1715,
                "rownumber": 68
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "68",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1630,
                "x": 0,
                "y": 990,
                "rownumber": 68
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "68",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1630,
                "x": 0,
                "y": 265,
                "rownumber": 68
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "73",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1670,
                "x": 1630,
                "y": 1715,
                "rownumber": 73
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "68",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1630,
                "x": 1630,
                "y": 990,
                "rownumber": 68
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "67",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1620,
                "x": 1630,
                "y": 265,
                "rownumber": 67
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "43",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1148,
                "x": 3300,
                "y": 1715,
                "rownumber": 43
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "30",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1165,
                "x": 3300,
                "y": 990,
                "rownumber": 30
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "29",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1150,
                "x": 3300,
                "y": 265,
                "rownumber": 29
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1630,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 40,
                "x": 3260,
                "y": 990,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1620,
                "x": 1630,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 990,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 50,
                "x": 3250,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 52,
                "x": 4448,
                "y": 1715,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 35,
                "x": 4465,
                "y": 990,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 50,
                "x": 4450,
                "y": 265,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1200,
                "x": 3300,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 8,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "65",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1970,
                "x": 0,
                "y": 1715,
                "rownumber": 65
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "33",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1413,
                "x": 1970,
                "y": 1715,
                "rownumber": 33
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "38",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1052,
                "x": 3383,
                "y": 1715,
                "rownumber": 38
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "37",
                "DM1": 0,
                "liuchengka": "NG22091408A03",
                "JiaHao": "A03",
                "LM2": 0,
                "LM1": 0,
                "w": 1770,
                "x": 0,
                "y": 990,
                "rownumber": 37
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "67",
                "DM1": 0,
                "liuchengka": "NG22091408A06",
                "JiaHao": "A06",
                "LM2": 0,
                "LM1": 0,
                "w": 1620,
                "x": 1770,
                "y": 990,
                "rownumber": 67
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "69",
                "DM1": 0,
                "liuchengka": "NG22091408A07",
                "JiaHao": "A07",
                "LM2": 0,
                "LM1": 0,
                "w": 950,
                "x": 3390,
                "y": 990,
                "rownumber": 69
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "40",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1599,
                "x": 0,
                "y": 265,
                "rownumber": 40
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "39",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1578,
                "x": 1599,
                "y": 265,
                "rownumber": 39
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "43",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1148,
                "x": 3177,
                "y": 265,
                "rownumber": 43
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 65,
                "x": 4435,
                "y": 1715,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 160,
                "x": 4340,
                "y": 990,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 175,
                "x": 4325,
                "y": 265,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 4500,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }, {
            "mnumber": 9,
            "width": 4500,
            "rects": [{
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "44",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1340,
                "x": 0,
                "y": 1715,
                "rownumber": 44
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "41",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1144,
                "x": 0,
                "y": 990,
                "rownumber": 41
            }, {
                "isRemain": false,
                "h": 725,
                "DM2": 0,
                "xuhao": "24",
                "DM1": 0,
                "liuchengka": "NG22091408A04",
                "JiaHao": "A04",
                "LM2": 0,
                "LM1": 0,
                "w": 1115,
                "x": 0,
                "y": 265,
                "rownumber": 24
            }, {
                "isRemain": true,
                "h": 725,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 196,
                "x": 1144,
                "y": 990,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 265,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 1115,
                "x": 0,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 990,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 225,
                "x": 1115,
                "y": 0,
                "rownumber": 0
            }, {
                "isRemain": true,
                "h": 2440,
                "DM2": 0,
                "xuhao": "null",
                "DM1": 0,
                "liuchengka": "null",
                "JiaHao": "null",
                "LM2": 0,
                "LM1": 0,
                "w": 3160,
                "x": 1340,
                "y": 0,
                "rownumber": 0
            }],
            "wuliao": "KC2006145",
            "SameCount": 1,
            "height": 2440
        }]
    },
    "method": "getResult"

});
</script>

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/RectRenderer.vue

New file
@@ -0,0 +1,142 @@
<template>

  <div ref="layoutPanel" :class="panelClass" :style="panelStyle">

    <div v-for="(layout, layoutIndex) in layouts" :key="layoutIndex" 
         class="layout-container"

         :style="layoutContainerStyle(layoutIndex)">

      <div v-for="(rect, rectIndex) in layout.rects" :key="rectIndex" 
           :ref="(el) => { if (el) rectsElements[layoutIndex + '-' + rectIndex] = el }"

           :class="rectClass"

           :style="rectStyle(rect, layoutIndex)"

           @click="handleRectClick(layoutIndex, rectIndex)">

        <div v-if="!rect.isRemain" class="rect-content">

          <div class="size">{{ rect.w }}×{{ rect.h }}</div>

          <div class="jia-hao">{{ rect.JiaHao }}</div>

        </div>

      </div>

    </div>

  </div>

</template>



<script setup>

import { ref, reactive, onMounted, onUnmounted } from 'vue';



const props = defineProps({

  layoutData: {

    type: Object,

    required: true

  },

  gw: {

    type: Number,

    default: 1000

  },

  gh: {

    type: Number,

    default: 1000

  },

  style: {

    type: String,

    default: 'width:1000px;height:600px;display:block;background:gray'

  }

});



const emit = defineEmits(['rectClicked']);



const layoutPanel = ref(null);

const rectsElements = ref({});

const focusIndex = ref(null);

const layouts = ref([]);



const panelClass = ref('');

const panelStyle = ref(props.style);



const rectClass = ref('layout-rect');



const layoutContainerStyle = (layoutIndex) => {

  const containerWidth = (props.gw - 100) / 2; // 两列，每列宽度为gw的一半，减去右边距

  const containerHeight = (props.gh - 100) / 3; // 三行，每行高度为gh的三分之一，减去下边距

  const x = (layoutIndex % 2) * (containerWidth + 50); // 横向排列，加上50px间距

  const y = Math.floor(layoutIndex / 2) * (containerHeight + 50); // 纵向排列，加上50px间距

  return {

    position: 'absolute',

    left: `${x}px`,

    top: `${y}px`,

    width: `${containerWidth}px`,

    height: `${containerHeight}px`,

    overflow: 'hidden',

    border: '1px solid #ccc',

    background: '#fff'

  };

};



const rectStyle = (rect, layoutIndex) => {

  const layout = layouts.value[layoutIndex];

  const containerWidth = (props.gw - 100) / 2;

  const containerHeight = (props.gh - 100) / 3;

  const scale = Math.min(

    containerWidth / layout.width,

    containerHeight / layout.height

  );

  
  return {

    position: 'absolute',

    left: `${rect.x * scale}px`,

    top: `${rect.y * scale}px`,

    width: `${rect.w * scale}px`,

    height: `${rect.h * scale}px`,

    backgroundColor: rect.isRemain ? '#f0f0f0' : '#a0d8ef',

    border: '1px solid #000',

    cursor: 'pointer'

  };

};



const handleRectClick = (layoutIndex, rectIndex) => {

  focusIndex.value = { layoutIndex, rectIndex };

  emit('rectClicked', layoutIndex, rectIndex);

};



const updateLayout = () => {

  if (!layoutPanel.value) return;



  layouts.value = props.layoutData.data.Layouts;

};



onMounted(() => {

  updateLayout();

});



onUnmounted(() => {

  rectsElements.value = {};

});

</script>



<style scoped>

.layout-container {

  position: relative;

}



.layout-rect {

  transition: border-color 0.2s;

}



.rect-content {

  display: grid;

  grid-template-columns: 1fr;

  grid-template-rows: 1fr;

  padding: 5px;

}



.size {

  grid-row: 1;

  grid-column: 1;

  color: #444;

  font-size: 12px;

}



.jia-hao {

  grid-row: 2;

  grid-column: 1;

  margin: auto;

  font-size: 14px;

  font-weight: bold;

}

</style>


 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/Compute.vue

@@ -2,10 +2,44 @@
import {reactive, ref, watch} from "vue";
import {useI18n} from "vue-i18n";
import {Platform, Search, SuccessFilled} from "@element-plus/icons-vue";
import useUserInfoStore from "@/stores/userInfo";
import request from "@/utils/request";
import {ElMessage} from "element-plus";


const userStore = useUserInfoStore()
const username = userStore.user.userName

const {t} = useI18n()

const xGrid = ref()
//获取工程号
const props = defineProps({
  projectNo : String,
  data: {
    type: Array,
    default: () => []
  }
});
// 定义响应式数据，用于绑定工程号输入框的值
const inputValue = ref(props.projectNo);



// 定义混排等级
const optionVal = ref('')

// 定义装载率
const percentage1 = ref(80)
const percentage2 = ref(50)

// 定义其他表单数据
const furnaceWidth = ref('') // 炉宽
const furnaceLength = ref('') // 炉长
const heatingTime = ref('') // 加热时间
const spacingLong = ref('') // 长轴间隔
const spacingWidth = ref('') // 宽轴间隔


const gridOptions = reactive({
  height: '100%',
@@ -36,14 +70,14 @@
  },

  columns: [
    {field: 'id', width: 70, title: '序号', filters: [{data: ''}], slots: {default: 'state', filter: 'num2_filter'}},
    {field: '', width: 100, title: '版图数'},
    {field: '', width: 100, title: '装载率'},
    {field: '', width: 100, title: '流程卡数'},
    {field: '', width: 100, title: '模拟片数'},
    {field: 'id', width: 70, title: '序号'},
    {field: 'layoutsNumber', width: 100, title: '版图数'},
    {field: 'loadingRate', width: 100, title: '装载率'},
    {field: 'processCards', width: 100, title: '流程卡数'},
    {field: 'simulatedPieces', width: 100, title: '模拟片数'},
    {
      field: 'processId',
      width: 150,
      width: 350,
      title: t('processCard.processId'),
      filters: [{data: ''}],
      slots: {filter: 'num1_filter'},
@@ -60,12 +94,34 @@
})


// 进度条颜色和按钮加减
const percentage1 = ref(80)
const percentage2 = ref(50)

// 混排等级
const optionVal = ref('')


// 监听父组件传递的数据变化
watch(() => props.data, (newValue) => {
  if (newValue) {
    // 处理数据并更新表格
    const processData = newValue.data[0];
    console.log('Processed Data:', processData);
    const processedData = [
      {
        id: "1",
        layoutsNumber: processData.resultSum[0],
        loadingRate: processData.resultSum[1],
        processCards: processData.rackinfos.length,
        simulatedPieces: processData.glass_details.length,
        processId:processData.rackinfos
      }
    ];
    gridOptions.data = processedData;
    console.log(gridOptions.data)
  } else {
    console.error("数据格式不正确或为空");
    gridOptions.data = [];
  }
})


const options = [
  {
    value: '0',
@@ -85,20 +141,70 @@
  },
]

//获取工程号
const props = defineProps({
  projectNo : String
});
// 定义响应式数据，用于绑定工程号输入框的值
const inputValue = ref(props.projectNo);

let emit = defineEmits(['fetch-data']);

// let emit = defineEmits(['fetch-data']);
let emit = defineEmits(['fetch-data', 'sendData'])
const inputValues = {
  project_no:inputValue,
    glass_thickness:"",
    glass_type:"",
    chaos_pct: optionVal.value,//混排等级
    cage_free:percentage2.value,//理片龙空闲度
    tempering_time:heatingTime.value,//钢化加热时间
    heat_mode: 0,//模式选择
    max_load_pct: percentage1.value,//最大装载率
    max_area: 0,//最大面积
    max_qty:0,//最大片数
    load_width:furnaceWidth.value,
    load_length: furnaceLength.value,
  x_space: spacingWidth.value,
  y_space: spacingLong.value,
  load_rate: null,
  };

  // 发送所有数据到父组件
  emit('sendData', {
    ...inputValues
  });
const handleSearchClick = () => {
  // 通过 $emit 触发自定义事件，将工程号传递给父组件，由父组件去调用接口获取数据
  emit('fetch-data', inputValue.value);
 
 
};
const handleSimulationClick = () => {
  // 触发父组件的 simulate-click 事件
  emit('simulate-click');
 
};





const handleSave = () => {
  
  if (props.data) {
 

    let projectData = ref({
      projectdetail: props.data,
      userName : username,
      inputValues:inputValues
    })
   
    request.post(`/glassOptimize/simulationSave`, projectData.value).then((res) => {
      if (res.code == 200 && res.data === true) {
        ElMessage.success(t('basicData.msg.saveSuccess'))
      
      } else {
        ElMessage.warning(res.msg)
      }
    })

  }
}

</script>

@@ -106,77 +212,75 @@
  <div style="width: 100%;height: 100%">
    <!--模拟计算表头-->
    <div id="title" style="margin-top: -10px">
      <span>
        工程编号
      <el-input style="width:150px;margin-left: 30px" clearable v-model="inputValue" placeholder="请输入工程号"></el-input>
      <el-button
          type="primary"
          :icon="Search"
          style="margin-left: 20px"
          @click="handleSearchClick"
      >{{ $t('basicData.search') }}
      </el-button>
  <span>
    工程编号
    <el-input style="width:150px;margin-left: 30px" clearable v-model="inputValue" placeholder="请输入工程号"></el-input>
    <el-button
        type="primary"
        :icon="Search"
        style="margin-left: 20px"
        @click="handleSearchClick"
    >{{ $t('basicData.search') }}
    </el-button>
  </span>
  <span style="float: right ; margin-right: 120px">
    工程混排等级
      <el-select
          placeholder="选择混排等级"
          style="margin-left:10px; width: 200px; "
          ref="getSelect"
          v-model="optionVal"
          clearable
          class="m-2"
          @change="getWorkOrder"
      >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    <el-button type="primary" style="margin-left: 10px" :icon="Platform"  @click="handleSimulationClick">模拟计算</el-button>
    <el-button type="primary" style="margin-left: 20px" :icon="SuccessFilled"  @click="handleSave">保存</el-button>
  </span><br>
  <div class="demo-progress" style="margin-top: 5px">
    <div style="display: flex; align-items: center">
      <span>钢化最大装载</span>
      <!-- 进度条设置 -->
      <el-slider
          style="max-width: 400px; flex: 1; margin-left: 10px"
          v-model="percentage1"
          :min="0"
          :max="100"
          :step="1"/>
      <span style="margin-left: 20px ; width: 30px;">{{ percentage1 }}%</span>
      <span style="float: right ; margin-left: 150px;">
            宽轴间隔 <vxe-input size="small" class="input" clearable v-model="spacingWidth"></vxe-input>
            炉宽(mm) <vxe-input size="small" class="input" clearable v-model="furnaceWidth"></vxe-input>
      </span>
      <span style="float: right ; margin-right: 120px">
        工程混排等级
          <el-select
              placeholder="选择混排等级"
              style="margin-left:10px; width: 200px; "
              ref="getSelect"
              v-model="optionVal"
              clearable
              class="m-2"
              @change="getWorkOrder"
          >

            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
      <el-button type="primary" style="margin-left: 10px" :icon="Platform">模拟计算</el-button>
      <el-button type="primary" style="margin-left: 20px" :icon="SuccessFilled">保存</el-button>
      </span><br>
      <div class="demo-progress" style="margin-top: 5px">
        <div style="display: flex; align-items: center">
          <span>钢化最大装载</span>
          <!--进度条设置-->
          <el-slider
              style="max-width: 400px; flex: 1; margin-left: 10px"
              v-model="percentage1"
              :min="0"
              :max="100"
              :step="1"/>
          <span style="margin-left: 20px ; width: 30px;">{{ percentage1 }}%</span>
          <span style="float: right ; margin-left: 150px;">
                工程玻璃片&nbsp;&nbsp;<vxe-input size="small" class="input" clearable></vxe-input>
                宽轴间隔 <vxe-input size="small" class="input" clearable></vxe-input>
                炉宽(mm) <vxe-input size="small" class="input" clearable></vxe-input>
              </span>
        </div>
      </div>
      <br>
      <div class="demo-progress" style="margin-top: -10px">
        <div style="display: flex; align-items: center">
          <span>理片笼空闲度</span>
          <!--进度条设置-->
          <el-slider
              style="max-width: 400px; flex: 1; margin-left: 10px"
              v-model="percentage2"
              :min="0"
              :max="100"
              :step="1"/>
          <span style="margin-left: 20px ; width: 30px;">{{ percentage2 }}%</span>
          <span style="float: right ; margin-left: 150px;">
                  加热时间(秒)<vxe-input size="small" class="input" clearable></vxe-input>
                  长轴间隔 <vxe-input size="small" class="input" clearable></vxe-input>
                  炉长(mm) <vxe-input size="small" class="input" clearable></vxe-input>
          </span>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="demo-progress" style="margin-top: -10px">
    <div style="display: flex; align-items: center">
      <span>理片笼空闲度</span>
      <!-- 进度条设置 -->
      <el-slider
          style="max-width: 400px; flex: 1; margin-left: 10px"
          v-model="percentage2"
          :min="0"
          :max="100"
          :step="1"/>
      <span style="margin-left: 20px ; width: 30px;">{{ percentage2 }}%</span>
      <span style="float: right ; margin-left: 150px;">
              加热时间(秒)<vxe-input size="small" class="input" clearable v-model="heatingTime"></vxe-input>
              长轴间隔 <vxe-input size="small" class="input" clearable v-model="spacingLong"></vxe-input>
              炉长(mm) <vxe-input size="small" class="input" clearable v-model="furnaceLength"></vxe-input>
      </span>
    </div>
  </div>
</div>

    <vxe-grid
        size="small"

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/ComputeCard.vue

@@ -1,5 +1,6 @@
<script setup>
import {nextTick, onMounted, reactive, ref, watch} from "vue";
import request from "@/utils/request";
import {useI18n} from "vue-i18n";
const { t } = useI18n()

@@ -70,9 +71,14 @@
  },

})

let emit = defineEmits([
  'changeDialog','upProcessId'
  'changeDialog','upProcessId', 'sendData'
]);





const props = defineProps({
  tableData: Array,
@@ -88,12 +94,111 @@
      if (typeof grid.refresh === 'function') {
        grid.refresh();
      }
      
      
      // 提取所有唯一的process_id
      const processIds = Array.from(new Set(newData.map(item => item.process_id)));
      
      // 发起所有请求
      const requests = processIds.map(processId => 
        request.post(`/glassOptimize/selectComputeDetail/${processId}`)
      );
      
      try {
        const responses = await Promise.all(requests);
        
        // 整合数据
        const processData = responses.reduce((acc, res, index) => {
          const processId = processIds[index];
          
          // 检查res.data是否为对象，并且包含'data'字段
          if (typeof res.data === 'object' && res.data !== null && 'data' in res.data) {
            const data = res.data.data;
            
            // 检查data是否为数组
            if (!Array.isArray(data)) {
              console.error(`响应数据中的'data'字段不是数组，process_id: ${processId}`);
              return acc;
            }
            
            // 获取对应process_id的newData条目
            const relatedNewData = newData.filter(item => item.process_id === processId);
           
            // 初始化process_card对象
            const processCard = {
  process_no: processId,
  layers: relatedNewData.technology_number,
  total_layers: relatedNewData.TotalNumber,
  total_num: relatedNewData.quantity,
  total_area: relatedNewData.area,
  is_must: true,
  allow_rotate: relatedNewData.check === 1 ? true : false,
  priority_level: 0,
  tempering: relatedNewData.check === 2 ? true : false,
  curtain_wall: relatedNewData.check === 3 ? true : false,
  patch_state: 0,
  merge: 0,
  glass_details: []
};

            
            // 整合glass_details
            data.forEach(detail => {
              const matchedNewData = relatedNewData.find(
                item => item.technology_number === detail.technology_number
              );
              
              processCard.glass_details.push({
                process_id: processId,
                technology_number: detail.technology_number,
                order_number: detail.order_number,
                layers_number: detail.layers_number,
                max_width: detail.width,
                max_height: detail.height,
                child_width: detail.child_width,
                child_height: detail.child_height,
                quantity: matchedNewData ? matchedNewData.quantity : 0,
                patch_state: 0
              });
            });
            
            // 将processCard添加到acc中
            if (!acc.process_cards) {
              acc.process_cards = [];
            }
            acc.process_cards.push(processCard);
              // 设置其他字段的值
          
          } else {
            console.error(`响应数据格式不正确，process_id: ${processId}`);
          }
          return acc;
        }, {});
        if (newData.length > 0) {
          // 假设所有条目的thickness和glassType相同
          processData.glass_thickness = newData[0].thickness;
          processData.glass_type = newData[0].glassType;
        } else {
          processData.glass_thickness = "";
          processData.glass_type = "";
        }
      
     
        
        // 发送整合后的数据到父组件
        emit('sendData', processData);
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  } else {
    console.error('传递给表格的数据格式不符合要求，期望是数组格式');
  }
});




let process_id = ref()
//获取流程卡号详情
let rowClickIndex = ref(null)

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/ComputeDetail.vue

@@ -60,17 +60,21 @@
    zoom: true,
    custom: true
  },

})





watch(
    () => props.processId,
    (newValue, oldValue) => {
      if (props.processId!=null){
        selectComputeDetail()
      
      }
    }
);
      
});

const selectComputeDetail =  () => {
  if (props.processId!=null || props.processId!=""){
@@ -83,7 +87,6 @@
    })
  }
}

</script>

<template>
@@ -120,14 +123,15 @@
          </div>
        </div>
      </template>


    </vxe-grid>
  </div>
</template>

<style scoped>

:deep(.vxe-tools--operate){
  height: 20px;
  margin-top: -20px;
}
</style>
</style>

 north-glass-erp/pom.xml

@@ -149,6 +149,11 @@
            <version>1.37.0</version>
        </dependency>

        <dependency>
            <groupId>com.rabbitmq</groupId>
            <artifactId>amqp-client</artifactId>
            <version>5.14.2</version>
        </dependency>

    </dependencies>


 north-glass-erp/src/main/java/com/example/erp/controller/pp/GlassOptimizeController.java

@@ -112,6 +112,44 @@
        return Result.seccess(glassOptimizeService.selectComputeDetailSv(processId));
    }

    @ApiOperation("模拟计算")
    @PostMapping("/simulationCalculate")
    public Result simulationCalculate(@RequestBody Map<String, Object> object) {
        try {
            return Result.seccess(glassOptimizeService.SimulationCalculation(object));
        } catch (Exception e) {
            e.printStackTrace();
            return Result.error();
        }
    }

    @ApiOperation("模拟计算保存")
    @PostMapping("/simulationSave")
    public Result simulationSave(@RequestBody Map<String, Object> object) {
        try {
            return Result.seccess(glassOptimizeService.addSimulation(object));
        } catch (Exception e) {
            e.printStackTrace();
            return Result.error();
        }
    }




    @ApiOperation("模拟计算多流程卡")
    @PostMapping("/selectComputeDetailmore")
    public Result selectComputeDetailmore(@RequestBody Map<String, Object> object) {
        try {
            return Result.seccess(glassOptimizeService.SimulationCalculation(object));
        } catch (Exception e) {
            e.printStackTrace();
            return Result.error();
        }
    }



    //创建工程查询流程卡明细
    @ApiOperation("创建工程查询流程卡明细")
    @PostMapping  ("/getProcessCardDetail/{processId}/{technologyNumber}")

 north-glass-erp/src/main/java/com/example/erp/mapper/pp/GlassOptimizeMapper.java

@@ -43,6 +43,13 @@
    //模拟计算流程卡详情
    List<Map<String, Object>> selectComputeDetailMp(String processId);


    //模拟计算保存 钢化排版详情
    void addSimulation(Map<String, Object> object);
    //模拟计算保存 钢化排版
    void addratioResult(Map<String, Object> object);


    List<Map<String, Object>> getProcessCardDetailmMp(String processId, Integer technologyNumber);

    List<Map<String, Object>> selectGlassTypeMp();

 north-glass-erp/src/main/java/com/example/erp/service/pp/GlassOptimizeService.java

@@ -4,16 +4,21 @@
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.baomidou.dynamic.datasource.annotation.DS;
import com.example.erp.common.RabbitMQUtil;
import com.example.erp.entity.pp.FlowCard;
import com.example.erp.entity.pp.OptimizeProjectMange;
import com.example.erp.mapper.pp.GlassOptimizeMapper;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.io.IOException;
import java.sql.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.TimeoutException;

@Service
@DS("sd")
@@ -21,7 +26,51 @@
    @Autowired
    GlassOptimizeMapper glassOptimizeMapper;

    RabbitMQUtil rabbitMQUtil;
    //模拟计算

    public Map<String, Object> SimulationCalculation(Map<String,Object> message) {
        Map<String, Object> map = new HashMap<>();
        try {
            rabbitMQUtil = new RabbitMQUtil();
            // 发送消息


            // 获取 computeData 和 cardData
            Object computeData = message.get("computeData");
            Object cardData = message.get("cardData");

           rabbitMQUtil.sendMessage("6");
            System.out.println("send message: " + message);
            String date = rabbitMQUtil.receiveMessages();
            System.out.println("Received message: " + date);

            // 关闭连接
            rabbitMQUtil.close();
            map.put("data", date);

        } catch (IOException e) {
            e.printStackTrace();
        } catch (TimeoutException | InterruptedException e) {
            e.printStackTrace();
        }

        return map;
    }


//模拟计算保存
    public Boolean addSimulation(Map<String, Object> object) {
        try {
            glassOptimizeMapper.addSimulation(object);
            glassOptimizeMapper.addratioResult(object);

            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    //工程信息
    public Map<String, Object> projectInfoSv(String projectNo) {
        Map<String, Object> map = new HashMap<>();
@@ -29,6 +78,7 @@
        return map;
    }


    //工程信息流程卡
    public Map<String, Object> getProcessCardSv(String projectNo) {
        Map<String, Object> map = new HashMap<>();

 north-glass-erp/src/main/resources/mapper/pp/GlassOptimize.xml

@@ -325,7 +325,9 @@
            ROUND(SUM(od.width * od.height * fc.quantity / 1000000), 2) AS area,
            o.project,
            ogd.glass_child,
            od.shape
            od.shape,
            SUBSTRING(glass_child, 1, LOCATE('mm', glass_child) - 1) as thickness,
            SUBSTRING(glass_child, LOCATE('mm', glass_child) + 2) as glassType
        FROM
            pp.flow_card AS fc
                LEFT JOIN sd.`order` AS o ON fc.order_id = o.order_id
@@ -353,7 +355,7 @@
    </select>

    <!--模拟计算流程卡详情-->
    <select id="selectComputeDetailMp">
    <select id="selectComputeDetailMp1">
        SELECT
            d.width AS width,
            d.height AS height,
@@ -373,6 +375,39 @@
        WHERE
            p.state IN (1, 2)
          AND f.process_id = #{processId}
    </select>


    <!--模拟计算流程卡详情2-->
    <select id="selectComputeDetailMp">
        SELECT
            d.width AS width,
            d.height AS height,
            f.quantity AS quantity,
            d.building_number AS `Storey Number`,
            d.shape AS shape,
            round(g.area * f.quantity, 4) AS area,
            g.icon AS `Label type`,
            dal.patch_status,
            g.technology_number,
            g.order_number,
            fl.layers_number,
            g.child_width,
            g.child_height,
            fl.process_id

        FROM
            pp.flow_card f
                LEFT JOIN pp.optimize_project p ON f.project_no = p.project_no
                LEFT JOIN sd.order o ON f.order_id = o.order_id
                LEFT JOIN sd.order_detail d ON f.order_id = d.order_id AND f.order_number = d.order_number
                LEFT JOIN sd.order_glass_detail g ON f.order_id = g.order_id AND f.order_number = g.order_number AND f.technology_number = g.technology_number
                LEFT JOIN sd.product_detail p2 ON d.product_id = p2.prod_id AND f.technology_number = p2.glass_sort
                LEFT JOIN pp.optimize_project j ON f.project_no = j.project_no
                LEFT JOIN pp.damage_details dal ON  dal.order_number = g.order_number AND dal.technology_number = g.technology_number and f.process_id=dal.process_id
                LEFT JOIN pp.flow_card fl ON fl.order_id = g.order_id AND fl.order_number = g.order_number AND fl.technology_number = g.technology_number
        WHERE
          f.process_id = #{processId}
    </select>

    <select id="getProcessCardDetailmMp">
@@ -444,4 +479,80 @@
        insert into pp.optimize_project (project_no, project_name, order_glass_type, order_glass_thickness)
        values (#{projectId}, #{projectNmae}, #{glassType}, #{glassThickness})
    </insert>


    <insert id="addSimulation" parameterType="map">
        <foreach collection="projectdetail.data[0].glass_details" item="glass">
            INSERT INTO pp.optimize_heat_detail (
            project_no,
            process_id,
            width,
            height,
            x_axis,
            y_axis,
            rotate_angle,
            creater,
            create_time,
            update_time,
            patch_state,
            layer,
            order_sort,
            layout_id,
            sort,
            glass_id,
            pair_width,
            pair_height,
            intRemark,
            strRemark
            ) VALUES (
            #{inputValues.project_no},
            #{glass.process_id},
            #{glass.width},
            #{glass.height},
            #{glass.x_coordinate},
            #{glass.y_coordinate},
            #{glass.angle},
            #{userName},
            NOW(),
            NOW(),
            0,
            #{glass.layers_number},
            #{glass.order_number},
            #{glass.tempering_layout_id},
            #{glass.tempering_feed_sequence},
            null,
            #{glass.width},
            #{glass.height},
            null,
            null
            );
        </foreach>
    </insert>

    <insert id="addratioResult" parameterType="map">
        <foreach collection="projectdetail.data[0].ratioResult" item="glass">
            INSERT INTO pp.optimize_heat_layout (
            project_no,
            layout_id,
            glass_qty,
            glass_area,
            layout_rate,
            creater,
            create_time,
            intRemark,
            strRemark
            ) VALUES (
            #{inputValues.project_no},
            #{glass.tempering_layout_id},
            #{glass.glass_total},
            #{glass.area},
            #{glass.ratio},
            1,
            NOW(),
            null,
            null
            );
        </foreach>
    </insert>

</mapper>

 north-glass-erp/src/test/java/com/example/erp/service/pp/GlassOptimizeServiceTest.java

New file
@@ -0,0 +1,20 @@
package com.example.erp.service.pp;





import com.example.erp.service.pp.GlassOptimizeService;

import org.junit.jupiter.api.Test;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest

class IOrderServiceTest {

    @Autowired

    private GlassOptimizeService glassOptimizeService;



    @Test

    void  testSimulationCalculation() {

        //glassOptimizeService.SimulationCalculation("666");

    }

}