Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes

严智鑫

2024-08-05 00c4dfc5ac687c93e0b7abafc33abb693b38edd6

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

@@ -1,234 +1,254 @@
<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>
      </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>
<template>  
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
      <el-scrollbar height="600px" >
  <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="rect.glass_id"  
      class="rect"  
      @click="showDialog(rect.glass_id)"  
      :style="{ position: 'absolute', 
      top: `${rect.y_axis}px`, left: `${rect.x_axis}px`, width: `${rect.width}px`, height: `${rect.height}px`,
      backgroundColor: getRectColor(rect.glass_state)
       }"  
    >
     <!-- 箭头 -->  
     <!-- <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.widtha }}*{{ rect.heighta }}</div>  
  </div>
  </div> 
  <!-- 点击弹出 -->
  <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;">
        <el-button type="warning" plain :icon="Delete" @click="handleDamage(currentGlassId)"  style="width: 140px;margin-left: 10px;">
          {{ $t('order.dilapidation') }}
        </el-button>
        <el-button  type="danger" plain @click="handleManualTake(currentGlassId)" style="width: 140px;margin-top: 10px;">
          <el-icon class="el-icon--right"><Upload /></el-icon>
          {{ $t('order.Takeaway') }}</el-button>
  </el-dialog> 
   </div>
  <!-- </div>   -->
  </el-scrollbar>
  </el-card>
</template>
</template>  
<script setup lang="ts">  
import { Delete, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue';  
import request from "@/utils/request"
import { WebSocketHost ,host} from '@/utils/constants'
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  let language = ref(localStorage.getItem('lang') || 'zh')
const blind = ref(false)
const olWidth = ref(); 
const olHeight = ref();
const process_id = ref(); // 用于存储process_id的响应式引用 
const glass_id = ref();
// const rects = ref([]); // 用于存储矩形数据的响应式引用  
const currentGlassId = ref(null); // 存储当前点击矩形的 glass_id  
const adjustedRects = ref([]);
// const handleBind = (row) => {
//   blind.value = true; // 打开绑定架子对话框
// };
// 显示对话框并设置当前 glass_id  
function showDialog(glassId: number) {  
  currentGlassId.value = glassId;  
  blind.value = true;  
}  
// onMounted(async () => {  
//   try {  
//     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 ,glass_id:newglass_id } = response.data; // 获取尺寸  
//       olWidth.value = newolWidth; // 设置容器宽度  
//       olHeight.value = newolHeight; // 设置容器高度  
//       process_id.value = newprocess_id;  
//       glass_id.value = newglass_id;

<script>
import Swal from 'sweetalert2'
import request from "@/utils/request";
//       adjustedRects.value = rawRects.map(rect => ({  
//         ...rect, // 复制原始对象的其他属性  
//         x_axis: (rect.x_axis*100) * 0.003, // 将x值除以3  
//         y_axis: (rect.y_axis*100) * 0.003,
//         width: (rect.width*100) * 0.002 ,
//         widtha: rect.width ,
//         heighta: rect.height ,
//         height:( rect.height*100) * 0.002 ,
//         glass_state: rect.glass_state
//       }));  
//       console.log(adjustedRects.value);
      


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) => {
    try {
        //判断 是否 点击的 确定按钮
        if (isConfirm.value) {
            Swal.fire("人工拿走", "点击了人工拿走", "success");
        }
        else {
            Swal.fire("破损", "点击了破损", "error");
        }
    } catch (e) {
        alert(e);
//       //   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);  
//   }  
// }); 
// 破损
const handleDamage = async () => {
  try  {
    // var url="/cacheGlass/taskCache/identControls?identId="+currentGlassId.value+'&controlsId='+201;
    //   console.log(url);
    //   const response = await request.post(url)
  const response = await request.post('/cacheGlass/taskCache/identControls', {
    identId: currentGlassId.value,
    controlsId: 201,
    line: 1001,
    machine: '识别',
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      // window.location.reload() 
      blind.value = false;
      updateRectStatus(currentGlassId.value, 201); 
    } else {
      // 请求失败，显示错误消息
      ElMessage.error(response.msg);
    }
});
    },
    
    showRectInfo(rectInfo) {
      const contents = rectInfo.items.map(item => item.content).join(', ');
      this.$nextTick(() => {
        this.showCustomAlert(contents);
      });
    },
}
catch (error) {
    // 处理错误
    console.error(error);
  }
}
 // 人工拿走
const handleManualTake = async () => {
  try  {
    // var url="/cacheGlass/taskCache/identControls?identId="+currentGlassId.value+'&controlsId='+200;
    //   console.log(url);
    //   const response = await request.post(url)
  const response = await request.post('/cacheGlass/taskCache/identControls', {
    identId: currentGlassId.value,
    controlsId: 200,
    line: 1001,
    machine: '识别',
    })
    if (response.code == 200) {
      // 绑定成功，处理逻辑
      ElMessage.success(response.message);
      // window.location.reload() 
      blind.value = false;
      updateRectStatus(currentGlassId.value, 200); 
    } else {
      // 请求失败，显示错误消息
      ElMessage.error(response.msg);
    }
}
catch (error) {
    // 处理错误
    console.error(error);
  }
}
function getRectColor(state: number): string {  
  switch (state) {  
    case 0:  
      return '#e1f3d8';  
    case 100:  
      return '#c8c9cc';  
    case 110:  
      return '#b3e19d';  
    case 120:  
      return '#f89898';  
    case 200: 
      return 'lightblue';  
    case 201:  
      return '#f3d19e';  
    default:  
      return '#911005'; // 默认颜色  
  }  
} 
// 更新矩形状态  
function updateRectStatus(glassId: string, status: number) {  
  adjustedRects.value.forEach(rect => {  
    if (rect.glass_id === glassId) {  
      rect.glass_state = status; // 更新矩形的状态  
    }  
  });  
}
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
const handleMessage = (data) => {
  // adjustedRects.value = data.currentCutTerritory[0]
  adjustedRects.value = data.currentCutTerritory[0].map(rect => ({  
        ...rect,
        x_axis: 1360 -(rect.x_axis + rect.width) * 0.37,
        // x_axis: (rect.x_axis*100) * 0.003,
        y_axis: (rect.y_axis*100) * 0.003,
        width: (rect.width*100) * 0.002 ,
        widtha: rect.width ,
        heighta: rect.height ,
        height:( rect.height*100) * 0.002 ,
        glass_state: rect.glass_state
      }));  
};
</script>

<style scoped>
.glass-rack {
  width: 100%;
  height: 80vh;
}
.rack-rect:hover {
  cursor: pointer;
}
.custom-popover-class {
  background-color: lightgrey;
  color: black;
  border: 1px solid black;
}

#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;
      }
      #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;
        }
      }
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
  }
</style>
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>  
  
<style scoped>  
.rect {  
  border: 1px solid black; /* 设置矩形的边框 */  
  /* background-color: lightblue; 设置矩形的背景色   */
} 
.centered-text {
  /* 设置文字居中样式 */  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100%; /* 确保div占据整个矩形的高度 */  
} 
#rect {  
  position: relative; /* 确保箭头可以相对于矩形定位 */  
  /* 其他样式 */  
}  

#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; /* 右边框，形成箭头 */  
  /* 根据需要调整边框大小和颜色 */  
}  
  
#line {  
  position: absolute;  
  top: 70%; /* 直线位于矩形中间 */  
  left: 210px; /* 直线在箭头右侧一些距离 */  
  transform: translateY(-50%); /* 垂直居中 */  
  height: 2px; /* 直线的高度 */  
  width: 240px; /* 直线的长度，根据需要调整 */  
  background-color: #911005; /* 直线的颜色 */  
}  

</style>