解决zh重复字段，大屏显示部分页面

wangfei

2024-07-11 fcf6345c21422c9d9a824d9d7f34721fbb08e01a

解决zh重复字段，大屏显示部分页面

 UI-Project/package-lock.json

@@ -12,7 +12,7 @@
        "@vue-macros/reactivity-transform": "^0.3.23",
        "axios": "^1.6.8",
        "chart.js": "^4.4.3",
        "echarts": "^5.5.0",
        "echarts": "^5.5.1",
        "element-plus": "^2.4.0",
        "moment": "^2.30.1",
        "pinia": "^2.1.6",
@@ -21,6 +21,7 @@
        "sweetalert2": "^11.10.7",
        "vue": "^3.3.4",
        "vue-draggable-plus": "^0.5.0",
        "vue-echarts": "^6.7.3",
        "vue-i18n": "^9.10.1",
        "vue-router": "^4.2.4",
        "vxe-table": "^4.5.15",
@@ -762,12 +763,12 @@
      "integrity": "sha512-M/MERVDZ8hguvjl6MAlLWSLYLS7PzEyXaTb5gEeJ+SF+e9iUC0sdvlzqe91MMDHBoy+nqw7wKcUOrDSyvMCrRg=="
    },
    "node_modules/echarts": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
      "version": "5.5.1",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
      "dependencies": {
        "tslib": "2.3.0",
        "zrender": "5.5.0"
        "zrender": "5.6.0"
      }
    },
    "node_modules/element-plus": {
@@ -1351,6 +1352,11 @@
      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
      "dev": true
    },
    "node_modules/resize-detector": {
      "version": "0.3.0",
      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
    },
    "node_modules/reusify": {
      "version": "1.0.4",
      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
@@ -1676,6 +1682,55 @@
        }
      }
    },
    "node_modules/vue-echarts": {
      "version": "6.7.3",
      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.7.3.tgz",
      "integrity": "sha512-vXLKpALFjbPphW9IfQPOVfb1KjGZ/f8qa/FZHi9lZIWzAnQC1DgnmEK3pJgEkyo6EP7UnX6Bv/V3Ke7p+qCNXA==",
      "hasInstallScript": true,
      "dependencies": {
        "resize-detector": "^0.3.0",
        "vue-demi": "^0.13.11"
      },
      "peerDependencies": {
        "@vue/composition-api": "^1.0.5",
        "@vue/runtime-core": "^3.0.0",
        "echarts": "^5.4.1",
        "vue": "^2.6.12 || ^3.1.1"
      },
      "peerDependenciesMeta": {
        "@vue/composition-api": {
          "optional": true
        },
        "@vue/runtime-core": {
          "optional": true
        }
      }
    },
    "node_modules/vue-echarts/node_modules/vue-demi": {
      "version": "0.13.11",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
      "hasInstallScript": true,
      "bin": {
        "vue-demi-fix": "bin/vue-demi-fix.js",
        "vue-demi-switch": "bin/vue-demi-switch.js"
      },
      "engines": {
        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
        "@vue/composition-api": "^1.0.0-rc.1",
        "vue": "^3.0.0-0 || ^2.6.0"
      },
      "peerDependenciesMeta": {
        "@vue/composition-api": {
          "optional": true
        }
      }
    },
    "node_modules/vue-i18n": {
      "version": "9.13.1",
      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.13.1.tgz",
@@ -1777,9 +1832,9 @@
      }
    },
    "node_modules/zrender": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
      "version": "5.6.0",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
      "dependencies": {
        "tslib": "2.3.0"
      }
@@ -2317,12 +2372,12 @@
      "integrity": "sha512-M/MERVDZ8hguvjl6MAlLWSLYLS7PzEyXaTb5gEeJ+SF+e9iUC0sdvlzqe91MMDHBoy+nqw7wKcUOrDSyvMCrRg=="
    },
    "echarts": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
      "version": "5.5.1",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
      "requires": {
        "tslib": "2.3.0",
        "zrender": "5.5.0"
        "zrender": "5.6.0"
      }
    },
    "element-plus": {
@@ -2722,6 +2777,11 @@
      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
      "dev": true
    },
    "resize-detector": {
      "version": "0.3.0",
      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
    },
    "reusify": {
      "version": "1.0.4",
      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
@@ -2927,6 +2987,23 @@
        "@types/sortablejs": "^1.15.8"
      }
    },
    "vue-echarts": {
      "version": "6.7.3",
      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.7.3.tgz",
      "integrity": "sha512-vXLKpALFjbPphW9IfQPOVfb1KjGZ/f8qa/FZHi9lZIWzAnQC1DgnmEK3pJgEkyo6EP7UnX6Bv/V3Ke7p+qCNXA==",
      "requires": {
        "resize-detector": "^0.3.0",
        "vue-demi": "^0.13.11"
      },
      "dependencies": {
        "vue-demi": {
          "version": "0.13.11",
          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
          "requires": {}
        }
      }
    },
    "vue-i18n": {
      "version": "9.13.1",
      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.13.1.tgz",
@@ -2994,9 +3071,9 @@
      }
    },
    "zrender": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
      "version": "5.6.0",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
      "requires": {
        "tslib": "2.3.0"
      }

 UI-Project/package.json

@@ -12,7 +12,7 @@
    "@vue-macros/reactivity-transform": "^0.3.23",
    "axios": "^1.6.8",
    "chart.js": "^4.4.3",
    "echarts": "^5.5.0",
    "echarts": "^5.5.1",
    "element-plus": "^2.4.0",
    "moment": "^2.30.1",
    "pinia": "^2.1.6",
@@ -21,6 +21,7 @@
    "sweetalert2": "^11.10.7",
    "vue": "^3.3.4",
    "vue-draggable-plus": "^0.5.0",
    "vue-echarts": "^6.7.3",
    "vue-i18n": "^9.10.1",
    "vue-router": "^4.2.4",
    "vxe-table": "^4.5.15",

 UI-Project/src/lang/zh.js

@@ -159,7 +159,6 @@
        inglassgaps:'请输入玻璃间隙',
        sure:'确认',
        cancel:'取消',
        glassID:'玻璃ID',
        operate:'操作',
        breakage:'破损',
        delete:'删除',
@@ -368,4 +367,50 @@
        materialName :'物料名称',
        createTime :'返库日期',
    },
    large:{
        time: '次破时间',
        number: '订单号',
        jobnumber: '报工编号',
        productionnumber: '生产订单号',
        cardnumber: '流程卡号',
        projectname: '项目名称',
        batch: '批次',
        detailID: '明细ID',
        building: '楼号',
        serialnumber: '订单序号',
        productname: '产品名称',
        serial: '工艺确认序号',
        slicemarker: '片标记（位置）',
        numberpatches: '补片数量',
        width: '宽',
        height: '高',
        shape: '形状',
        responsibleprocess: '责任工序',
        process: '本工序',
        numberfractions: '次破未补数量',
        breakreason: '次破原因',
        breaktype: '次破类型',
        responsiblepersonnel: '责任人员',
        responsiblequipment: '责任设备',
        responsibleteam: '责任班组',
        area: '次破面积',
        inspector: '质检员',
        operate: '操作',
        mes: '详情',
        projectnumber: '工程单号',
        brokeno: '报次破未补',
        close: '关闭',
        orderId: '订单ID',
        customerName: '客户名称',
        project: '项目名称',
        are: '面积',
        quantity: '包装方式',
        warehousing: '状态',
        deliveryDate: '送货时间',
        notstocked: '未入库',
        inboundstatus: '部分入库状态',
        allstatus: '全部入库状态',

        
    }
}

 UI-Project/src/main.js

@@ -11,7 +11,11 @@
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import i18n from '@/lang'
// import Echarts from "vue-echarts"
// import * as echarts from "echarts"

// app.component("v-chart", Echarts)
// app.config.globalProperties.$echarts = echarts
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate )

 UI-Project/src/views/largescreen/largescreen.vue

@@ -1,215 +1,179 @@
<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 id="top" style="height: 150px;background-color: #911005;">  
    <v-chart ref="mychart1" class="chart" :option="optionPie "></v-chart>
  </div> 
  <div style="display: flex;">
  <div id="centerleft" style="margin-top: 10px;height: 240px;width: 340px;background-color: #911005;">
    <el-table height="240" ref="table" width="340px"
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="orderId" align="center" :label="$t('large.number')" min-width="110" />
          <el-table-column prop="project" align="center" :label="$t('large.projectname')" min-width="100" />
          <el-table-column prop="responsibleProcess" align="center" :label="$t('large.responsibleprocess')" min-width="100" />
          <el-table-column prop="breakageQuantity" align="center" :label="$t('large.numberfractions')" min-width="110" />
          <el-table-column prop="patchProcesses" align="center" :label="$t('large.process')" min-width="100" />
          <el-table-column fixed="right" :label="$t('large.operate')" align="center" width="100">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleBinda">{{ $t('large.mes') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
  </div> 
  <div id="center" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 750px;">
    <img src="../../assets/d1.png" alt="" style="margin-left: -30px; width: 110%;height: 100%;position: relative;"> 
  </div>
  <div id="centerright" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 240px;background-color: #911005;">
    <el-table height="240" ref="table" width="340px"
        @selection-change="handleSelectionChange"
        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="projectNo" align="center" :label="$t('large.projectnumber')" min-width="50" />
          <el-table-column prop="projectName" align="center" :label="$t('large.projectname')" min-width="50" />
        </el-table>
  </div> 
</div>
<div id="bottom" style="margin-top: 10px;height: 190px;background-color: #911005;">
  <el-table height="190" ref="table"
        @selection-change="handleSelectionChange"
        :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="orderId" align="center" :label="$t('large.orderId')" min-width="50" />
          <el-table-column prop="customerName" align="center" :label="$t('large.customerName')" min-width="90" />
          <el-table-column prop="project" align="center" :label="$t('large.project')" min-width="50" />
          <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="50" />
          <el-table-column prop="quantity" align="center" :label="$t('large.quantity')" min-width="50" />
          <el-table-column
            align="center"
            :label="$t('large.warehousing')"
            min-width="50"
            prop="warehousing"
    > 
    <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>
          <template #default="scope">  
        <el-tag :type="getStatusType(scope.row.warehousing)">  
          {{ getStatusText(scope.row.warehousing) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column prop="deliveryDate" align="center" :label="$t('large.deliveryDate')" min-width="50" />
        </el-table>
  </div>  
  </el-scrollbar>
  </el-card>
  <el-dialog v-model="blinda" top="10vh" width="80%" :title="$t('large.brokeno')">
    <el-table height="500" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="reportingWorkTime" align="center" :label="$t('large.time')" min-width="110" />
          <el-table-column prop="orderId" align="center" :label="$t('large.number')" min-width="110" />
          <el-table-column prop="reportingWorkId" align="center" :label="$t('large.jobnumber')" min-width="120" />
          <el-table-column prop="productionId" align="center" :label="$t('large.productionnumber')" min-width="130" />
          <el-table-column prop="processId" align="center" :label="$t('large.cardnumber')" min-width="140" />
          <el-table-column prop="project" align="center" :label="$t('large.projectname')" min-width="110" />
          <el-table-column prop="batch" align="center" :label="$t('large.batch')" min-width="110" />
          <el-table-column prop="reviewer" align="center" :label="$t('large.detailID')" min-width="110" />
          <el-table-column prop="orderSort" align="center" :label="$t('large.serialnumber')" min-width="110" />
          <el-table-column prop="productName" align="center" :label="$t('large.productname')" min-width="180" />
          <el-table-column prop="technologyNumber" align="center" :label="$t('large.serial')" min-width="110" />
          <el-table-column prop="glassAddress" align="center" :label="$t('large.slicemarker')" min-width="130" />
          <el-table-column prop="patchNum" align="center" :label="$t('large.numberpatches')" min-width="110" />
          <el-table-column prop="width" align="center" :label="$t('large.width')" min-width="110" />
          <el-table-column prop="height" align="center" :label="$t('large.height')" min-width="110" />
          <el-table-column prop="shape" align="center" :label="$t('large.shape')" min-width="110" />
          <el-table-column prop="responsibleProcess" align="center" :label="$t('large.responsibleprocess')" min-width="110" />
          <el-table-column prop="patchProcesses" align="center" :label="$t('large.process')" min-width="110" />
          <el-table-column prop="breakageQuantity" align="center" :label="$t('large.numberfractions')" min-width="110" />
          <el-table-column prop="patchReason" align="center" :label="$t('large.breakreason')" min-width="110" />
          <el-table-column prop="patchType" align="center" :label="$t('large.breaktype')" min-width="110" />
          <el-table-column prop="responsiblePersonnel" align="center" :label="$t('large.responsiblepersonnel')" min-width="110" />
          <el-table-column prop="responsibleEquipment" align="center" :label="$t('large.responsiblequipment')" min-width="110" />
          <el-table-column prop="responsibleTeam" align="center" :label="$t('large.responsibleteam')" min-width="110" />
          <el-table-column prop="patchArea" align="center" :label="$t('large.area')" min-width="110" />
          <el-table-column prop="qualityInspector" align="center" :label="$t('large.inspector')" min-width="110" />
        </el-table>
    <template #footer>
      <div id="dialog-footer">
        <el-button @click="blinda = false">{{ $t('large.close') }}</el-button>
      </div>
</template>  
<script setup lang="ts">  
  </el-dialog>
</template>  
<script setup>  
import { Delete, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, onBeforeUnmount } from 'vue';  
import { ref, onMounted , onBeforeUnmount, reactive, computed, watch, shallowRef } 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;

      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);
      

      //   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,
  //   })
    if (response.code == 200) {
      // 绑定成功，处理逻辑
      ElMessage.success(response.message);
      // window.location.reload() 
      blind.value = false;
      updateRectStatus(currentGlassId.value, 201); 
    } else {
      // 请求失败，显示错误消息
      ElMessage.error(response.msg);
    }
}
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,
  //   })
    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) {  
// import * as echarts from 'echarts';  
// import 'echarts/lib/chart/pie';  
// import 'echarts/dist/echarts.min.css';
const tableData = ref([])
const tableDatab = ref([])
const tableDatac = ref([])
const blinda = ref(false)
const handleBinda = (row) => {
  blinda.value = true;
};
function getStatusType(warehousing) {  
  switch (warehousing) {  
    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'; // 默认颜色  
      return 'info';  
    case 1:  
      return 'warning';  
    case 2:  
      return 'success';  
  }  
} 
// 更新矩形状态  
function updateRectStatus(glassId: string, status: number) {  
  adjustedRects.value.forEach(rect => {  
    if (rect.glass_id === glassId) {  
      rect.glass_state = status; // 更新矩形的状态  
function getStatusText(warehousing) {  
  switch (warehousing) {
    case 0:  
      return t('large.notstocked');
    case 1:  
      return t('large.inboundstatus');
    case 2:  
    return t('large.allstatus');
    }  
  });  
}
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
// function getStatusType(warehousing: number) {  
//   switch (warehousing) {  
//     case 0:
//       return 'success';  
//     case 1: 
//       return 'primary';  
//     case 2: 
//       return 'danger';  
//   }  
// }  
// function getStatusText(warehousing: number) {
//   switch (warehousing) {
//     case 0:  
//       return t('large.notstocked');
//     case 1:  
//       return t('large.inboundstatus');
//     case 2:  
//     return t('large.allstatus');
//   }  
// }
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`;
const handleMessage = (data) => {
  // 更新 tableData 的数据
  
  // adjustedRects.value = data.currentCutTerritory[0]
  adjustedRects.value = data.currentCutTerritory[0].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("更新后数据", tableData);

  tableData.value = data.awaitingRepairs[0]
  tableDatab.value = data.DoingTask[0]
  tableDatac.value = data.orders[0]
};

// 初始化 WebSocket，并传递消息处理函数

onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
});

onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});


</script>  
  
<style scoped>  
@@ -224,32 +188,8 @@
  align-items: center;  
  height: 100%; /* 确保div占据整个矩形的高度 */  
} 
#rect {  
  position: relative; /* 确保箭头可以相对于矩形定位 */  
  /* 其他样式 */  
#dialog-footer{
  text-align: center;
  margin-top: -15px;
}  

#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>