义乌新增掰片/识别、卧式缓存、磨边（冷加工）页面 前端路由配置等

wangfei

2024-11-18 a5a12dfed331c5d2508e1acee474c9d6dc35b774

义乌新增掰片/识别、卧式缓存、磨边（冷加工）页面 前端路由配置等

 UI-Project/src/router/index.js

@@ -95,13 +95,18 @@
      /*----------- 掰片/识别 ----------------*/
    {
      path: 'Identify',
      name: 'Identify',
      component: () => import('../views/Identify/identify.vue'),
      children:[
      name: 'ident',
      component: () => import('../views/Identify/ident.vue'),
      children: [
        {
          path: '/Identify/identify',
          name: 'identify',
          component: () => import('../views/Identify/identify.vue')
        },
        {
          path: '/Identify/identifwu',
          name: 'identifwu',
          component: () => import('../views/Identify/identifwu.vue')
        },
      ]
    },
@@ -121,6 +126,11 @@
        name: 'cachingun',
        component: () => import('../views/Caching/cachingun.vue')
      },
      {
        path: '/Caching/cachingyiwu',
        name: 'cachingyiwu',
        component: () => import('../views/Caching/cachingyiwu.vue')
      },
    ]
  },
  /*----------- 磨边（冷加工） ----------------*/
@@ -139,6 +149,11 @@
      name: 'stockBasicDatatwo',
      component: () => import('../views/StockBasicData/stockBasicDatatwo.vue')
    },
    {
      path: '/StockBasicData/stockBasicyiwu',
      name: 'stockBasicyiwu',
      component: () => import('../views/StockBasicData/stockBasicyiwu.vue')
    },
  ]
},
/*----------- 大理片笼 ----------------*/

 UI-Project/src/views/Caching/cachingyiwu.vue

New file
@@ -0,0 +1,205 @@
<script setup>
import {onBeforeUnmount, onMounted, onUnmounted, ref} from "vue";
import {useRouter} from "vue-router"
import {host, WebSocketHost} from '@/utils/constants'

import request from "@/utils/request"
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
// import { ref } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
//  import LanguageMixin from './lang/LanguageMixin'
import {useI18n} from 'vue-i18n'

const router = useRouter()
const adda = ref(false)
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
const tableData = ref([])
const slot = ref('')
const adjustedRects = ref([]);
onMounted(async () => {
  try {
    const response = await request.post('/cacheGlass/edgStorageCage/selectEdgStorageCage'); // 替换为你的API端点  
    if (response.code === 200) {
      const rawRects = response.data; // 设置矩形数据  
      tableData.value = response.data
      console.log(response.data);
      adjustedRects.value = rawRects.map(rect => ({
        ...rect, // 复制原始对象的其他属性
        width: rect.width * 0.5,
        id: rect.id * 10,
      }));
      console.log(adjustedRects.value);
    } else {
      ElMessage.warning(res.msg)
    }
  } catch (error) {
    // console.error('Error fetching rects :', error);  
  }
});
const toggleEnableState = async (row) => {
  const newState = row.enable_state === 1 ? 0 : 1;
  // 发送请求到后端更新状态（这里省略了实际的请求逻辑）  
  const response = await request.post('/cacheGlass/edgStorageCage/updateEdgStorageCage', {
    id: row.id,
    enableState: newState
  });
  if (response.code === 200) {
    ElMessage.success(response.message);
  } else {
    ElMessage.error(response.message);
  }
  row.enable_state = newState;
};
const open = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
        t('sorter.information'),
        t('sorter.prompt'),
        {
          confirmButtonText: t('sorter.yes'),
          cancelButtonText: t('sorter.cancel'),
          type: 'warning',
        }
    );
    if (confirmResult === 'confirm') {
      var url = "/cacheGlass/edgStorageCage/edgStorageCageGlass?edgStorageCageId=" + row.id;
      console.log(row);
      const response = await request.post(url, {
        glassId: row.glass_id
      })
      if (response.code === 200) {
        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.msg);
      }
    }
  } catch (error) {
    console.error('发生错误:', error);
  }
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  tableData.value = data.EdgStorageCageinfos[0]
  // adjustedRects.value = data.EdgStorageCageinfos[0]
  adjustedRects.value = data.EdgStorageCageinfos[0].map(rect => ({
    ...rect, // 复制原始对象的其他属性
    width: rect.width * 0.5,
    id: rect.id * 10,
  }));

};
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
});
onUnmounted(() => {
  if (socket) {
    closeWebSocket(socket);
  }
});
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>
<template>
  <div style="height: 500px;">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table height="340" ref="table"
                  @selection-change="handleSelectionChange"
                  :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="slot" align="center" :label="$t('sorter.gridnumber')" min-width="80"/>
          <el-table-column prop="glass_id" align="center" :label="$t('sorter.glassnumber')" min-width="80"/>
          <el-table-column prop="width" align="center" :label="$t('sorter.width')" min-width="120"/>
          <el-table-column prop="height" align="center" :label="$t('sorter.height')" min-width="120"/>
          <el-table-column
              align="center"
              :label="$t('sorter.startstatus')"
              min-width="80"
              prop="enable_state"
          >
            <template #default="scope">
              <el-tag
                  :type="scope.row.enable_state === 1 ? 'success' : 'danger'"
                  @click="toggleEnableState(scope.row)"
              >
                {{ scope.row.enable_state === 1 ? $t('sorter.start') : $t('sorter.disable') }}
              </el-tag>
            </template>
            <!-- <template #default="scope">
              <el-tag type="success" >{{ scope.row.enable_state==1?"启用":"未启用"  }}</el-tag>
            </template> -->
          </el-table-column>
          <el-table-column fixed="right" :label="$t('sorter.operate')" align="center" width="200">
            <template #default="scope">
              <!-- <el-button size="mini" type="text" plain @click="handleBindRacka(scope.row)">报缺</el-button> -->
              <el-button size="mini" type="text" plain @click="open(scope.row)">{{
                  $t('sorter.deficiencieste')
                }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <div class="awatch">
      <img src="../../assets/woshihuancun.png" alt=""
           style="width: 70%;height: 90%;margin-left: 200px;margin-top: 20px;position: relative;">
      <div style="position: relative; width: 500px;height: 95px;margin-top: -165px;margin-left: 450px;">
        <div
            v-for="(rect, index) in adjustedRects"
            :key="rect"
            :style="{ position: 'absolute',
       top: `${rect.id}px`, left: `10px`, width: `${rect.width}px`, height: `5px`,
      backgroundColor: '#409EFF'
       }"
        >
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

#dt {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 100px;
}

#dta {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 80%;
}

#dialog-footer {
  text-align: center;
  margin-top: -15px;
}

#message {
  text-align: center;
  align-items: center;
  color: black;
  width: 200px;
  height: 100px;
  background-color: #337ecc;
  margin-left: 28%;
}

.awatch {
  height: 460px;
  width: 1500px;
  max-width: 100%;
}

</style>

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

New file
@@ -0,0 +1,53 @@
<script setup>
let indexFlag = $ref(1)

function changeRouter(index) {
  indexFlag = index
}

</script>

<template>
  <!-- <div id="main-div"> -->


  <div id="main-body">
    <router-view/>
  </div>
  <!-- </div> -->
</template>

<style scoped>
#main-div {
  width: 100%;
  height: 100%;
}

#div-title {
  height: 2%;
  width: 100%;
}

#searchButton {
  margin-top: -5px;
  margin-left: 1rem;
}

/* #searchButton1{
//margin-left: 10rem;
} */
/*main-body样式*/
#main-body {
  width: 100%;
  height: 95%;
  /* margin-top: 1%; */
}

#select {
  margin-left: 0.5rem;
}

:deep(.indexTag .el-breadcrumb__inner) {
  color: #5CADFE !important;
}
</style>

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

New file
@@ -0,0 +1,345 @@
<template>
  <div style="height: 500px;">
    <div style="display: flex;">
      <el-input v-model="inputValue" style="margin-left: 15px;margin-top: 10px;width: 240px" placeholder="请输入工程号"
                @blur="handleBlur"/>
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :size="size"
          :disabled="disabled"
          layout="prev, pager, next, jumper"
          :total="totalPages"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading">
      <el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;">
        <div style="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: rect.isActive ? '#ADFF2F' : getRectColor(rect.glass_state)
       }"
          >
            <!-- 箭头 -->
            <!-- <div id="arrow"></div>
            <div id="line"></div>   -->
            <div class="centered-text">
              <div>{{ rect.glass_id }}</div>
              <div>{{ rect.widtha }}*{{ rect.heighta }}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose">
        <el-button :disabled="currentGlassRect?.glass_state === 8 || currentGlassRect?.glass_state === 9" type="warning"
                   plain :icon="Delete" @click="handleDamage(currentGlassId)" style="width: 140px;margin-left: 10px;">
          {{ $t('order.dilapidation') }}
        </el-button>
        <el-button :disabled="currentGlassRect?.glass_state === 9 || currentGlassRect?.glass_state === 8" 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>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {ElMessage} from 'element-plus'
import {computed, onMounted, onUnmounted, ref} from 'vue';
import request from "@/utils/request"
import {host, WebSocketHost} from '@/utils/constants'
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 glass_id = ref();
const inputValue = ref('');
const currentGlassId = ref(null); // 存储当前点击矩形的 glass_id  
const currentstate = ref(null);
const adjustedRects = ref([]);
const raw = ref([]);
let webSocket: WebSocket | null = null;
const totalPages = ref(0);
const pageSize = ref(1);
const currentPage = ref('');
const disabled = false;
const size = 'small';
const rawData = ref([]);
// const handleBind = (row) => {
//   blind.value = true; // 打开绑定架子对话框
// };
// 显示对话框并设置当前 glass_id  
const currentGlassRect = computed(() => {
  return adjustedRects.value.find(rect => rect.glass_id === currentGlassId.value);
});

function showDialog(glassId: number) {
  currentGlassId.value = glassId;
  blind.value = true;
  adjustedRects.value = adjustedRects.value.map(rect =>
      rect.glass_id === glassId ? {...rect, isActive: true} : rect
  );
}

const handleDialogClose = () => {
  adjustedRects.value = adjustedRects.value.map(rect => ({
    ...rect,
    isActive: false
  }));
}
// 破损
const handleDamage = async () => {
  try {
    const response = await request.post('/cacheGlass/taskCache/identControls', {
      glassId: currentGlassId.value,
      state: 8,
      line: 1001,
      workingProcedure: '切割',
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      // window.location.reload() 
      blind.value = false;
      updateRectStatus(currentGlassId.value, 8);
      findEngineering()
    } 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', {
      glassId: currentGlassId.value,
      state: 9,
      line: 1001,
      workingProcedure: '切割',
    })
    if (response.code == 200) {
      // 绑定成功，处理逻辑
      ElMessage.success(response.message);
      // window.location.reload() 
      blind.value = false;
      updateRectStatus(currentGlassId.value, 9);
      findEngineering()
    } else {
      // 请求失败，显示错误消息
      ElMessage.error(response.msg);
    }
  } catch (error) {
    // 处理错误
    console.error(error);
  }
}
const handleBlur = async () => {
  if (inputValue.value) {
    var url = "/cacheGlass/taskCache/cutTerritory?current=" + inputValue.value;
    const response = await request.post(url)
    if (response.code === 200) {
      const rawRects = response.data[0];
      rawData.value = response.data;
      totalPages.value = rawData.value.length;
      const scaleFactor = 1621.78 / 6000;
      const scaleFactory = 750 / 3300;
      adjustedRects.value = rawRects.map(rect => ({
        ...rect,
        x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor,
        y_axis: rect.y_axis * scaleFactory,
        width: rect.width * scaleFactor,
        widtha: rect.width,
        heighta: rect.height,
        height: rect.height * scaleFactory,
        glass_state: rect.glass_state
      }));
      // 如果WebSocket已连接，则关闭  
      if (webSocket) {
        webSocket.close();
        webSocket = null;
      }
      currentPage.value = 1;
    }
  } else {
    connectWebSocket();
  }
};
const findEngineering = async () => {
  if (inputValue.value) {
    var url = "/cacheGlass/taskCache/cutTerritory?current=" + inputValue.value;
    const response = await request.post(url)
    if (response.code === 200) {
      rawData.value = response.data;
    }
  } else {
  }
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  // window.localStorage.setItem('pagenumber', currentPage.value).
  const page = currentPage.value - 1
  const scaleFactor = 1621.78 / 6000;
  const scaleFactory = 750 / 3300;
  adjustedRects.value = rawData.value[page]?.map(rect => ({
    // adjustedRects.value = rawRects.map(rect => ({
    ...rect,
    x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor,
    y_axis: rect.y_axis * scaleFactory,
    width: rect.width * scaleFactor,
    widtha: rect.width,
    heighta: rect.height,
    height: rect.height * scaleFactory,
    glass_state: rect.glass_state
  }));
};

function getRectColor(state: number): string {
  switch (state) {
    case 0:
      return '#e1f3d8';
    case 100:
      return '#c8c9cc';
    case 110:
      return '#b3e19d';
    case 120:
      return '#f89898';
    case 8:
      return '#911005';
    case 9:
      return '#f3d19e';
  }
}

// 更新矩形状态
function updateRectStatus(glassId: string, status: number) {
  adjustedRects.value.forEach(rect => {
    if (rect.glass_id === glassId) {
      rect.glass_state = status; // 更新矩形的状态  
    }
  });
}

const connectWebSocket = () => {
  if (!webSocket) {
    const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
    webSocket = new WebSocket(socketUrl);
    webSocket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const scaleFactor = 1621.78 / 6000;
      const scaleFactory = 750 / 3300;
      if (data.currentCutTerritory && data.currentCutTerritory.length > 0) {
        const newRects = data.currentCutTerritory[0].map(rect => {
          const existingRect = adjustedRects.value.find(r => r.glass_id === rect.glass_id);

          if (existingRect) {
            return {
              ...existingRect,
              x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor,
              y_axis: rect.y_axis * scaleFactory,
              width: rect.width * scaleFactor,
              height: rect.height * scaleFactory,
              widtha: rect.width,
              heighta: rect.height,
              glass_state: rect.glass_state,
              // 保持 isActive 状态不变
            };
          } else {
            // 如果不存在，则添加新矩形，默认 isActive 为 false
            return {
              ...rect,
              x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor,
              y_axis: rect.y_axis * scaleFactory,
              width: rect.width * scaleFactor,
              height: rect.height * scaleFactory,
              widtha: rect.width,
              heighta: rect.height,
              glass_state: rect.glass_state,
              isActive: false,
              glass_id: rect.glass_id,
            };
          }
        });
        adjustedRects.value = newRects;
      } else if (data.currentCutTerritory == '') {
        adjustedRects.value = [];
      }
    };
  }
};
onMounted(() => {
  // 初始时，如果输入框为空，则连接WebSocket  
  if (!inputValue.value) {
    connectWebSocket();
  }
});

onUnmounted(() => {
  if (webSocket) {
    webSocket.close();
  }
});
</script>

<style scoped>
.rect {
  border: 1px solid black; /* 设置矩形的边框 */
  /* background-color: lightblue; 设置矩形的背景色   */
}

.centered-text {
  /* 设置文字居中样式 */
  /* display: flex; */
  justify-content: center;
  align-items: center;
  height: 100%; /* 确保div占据整个矩形的高度 */
  font-size: small;
}

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

 UI-Project/src/views/Returns/upreturns.vue

@@ -94,8 +94,7 @@
const handlesure = async () => {
  try {
    const response = await request.post('/loadGlass/up-patten-usage/selectUpPattenUsage', {
      stationCell: 1,
      // engineerId: 'P24101602',
      stationCell: 5,
      engineerId: selectedProjectNo.value,
      filmRemove: filmRemove.value,
    })
@@ -122,10 +121,10 @@
  let engineeringId = window.localStorage.getItem('engineeringId')
  if (markingMachineStatus.value === 'green' && cuttingMachineStatus.value === 'green') {
    try {
      const response = await request.post('/loadGlass/engineering/engineering/changeTask', {
        stationCell: 1,
      const response = await request.post('/loadGlass/engineering/engineering/pauseTask', {
        // const response = await request.post('/loadGlass/engineering/engineering/changeTask', {
        stationCell: 5,
        filmRemove: filmRemove,
        // engineerId: 'P24101602',
        engineerId: engineeringId,
        state: 1,
      })
@@ -150,9 +149,8 @@
    console.log(engineeringId);
    if (engineeringId !== '') {
      const response = await request.post('/loadGlass/engineering/engineering/pauseTask', {
        stationCell: 1,
        // engineerId: 'P24101602',
        engineeringId: engineeringId,
        stationCell: 5,
        engineerId: engineeringId,
        state: 0,
      })
      if (response.code == 200) {
@@ -182,7 +180,7 @@
  }
  const response = await request.post("/loadGlass/up-patten-usage/setUpPattenRequest", {
    taskState: stateList,
    taskType: 1
    taskType: 5
  })
  if (response.code === 200) {
    tableData.value = response.data;

 UI-Project/src/views/Returns/upreturns2.vue

@@ -94,8 +94,7 @@
const handlesure = async () => {
  try {
    const response = await request.post('/loadGlass/up-patten-usage/selectUpPattenUsage', {
      stationCell: 2,
      // engineerId: 'P24101602',
      stationCell: 6,
      engineerId: selectedProjectNo.value,
      filmRemove: filmRemove.value,
    })
@@ -123,9 +122,8 @@
  if (markingMachineStatus.value === 'green' && cuttingMachineStatus.value === 'green') {
    try {
      const response = await request.post('/loadGlass/engineering/engineering/changeTask', {
        stationCell: 2,
        stationCell: 6,
        filmRemove: filmRemove,
        // engineerId: 'P24101602',
        engineerId: engineeringId,
        state: 1,
      })
@@ -150,8 +148,7 @@
    console.log(engineeringId);
    if (engineeringId !== '') {
      const response = await request.post('/loadGlass/engineering/engineering/pauseTask', {
        stationCell: 2,
        // engineerId: 'P24101602',
        stationCell: 6,
        engineeringId: engineeringId,
        state: 0,
      })
@@ -182,7 +179,7 @@
  }
  const response = await request.post("/loadGlass/up-patten-usage/setUpPattenRequest", {
    taskState: stateList,
    taskType: 2
    taskType: 6
  })
  if (response.code === 200) {
    tableData.value = response.data;

 UI-Project/src/views/StockBasicData/stockBasicyiwu.vue

New file
@@ -0,0 +1,252 @@
<script setup>
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {useRouter} from "vue-router"
import {host, WebSocketHost} from '@/utils/constants'
import request from "@/utils/request"
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
// import { ref } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
//  import LanguageMixin from './lang/LanguageMixin'
import {useI18n} from 'vue-i18n'

const router = useRouter()
const adda = ref(false)
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')

const tableData = ref([])
const slot = ref('')
const requestData = {
  line: 2001
};
const timeRange = ref([])
const selectValuesa = reactive([]);
// request.post("/cacheGlass/taskCache/selectEdgTask",{
//   ...requestData,  

// }).then((res) => {
//           if (res.code == 200) {

//           console.log(res.data);
//           tableData.value = res.data
//           console.log(res.data[0].slot);
//           } else {
//           ElMessage.warning(res.msg)

//           }
//           });

// 磨边任务查询
const setEdgGlassInfoRequest = async () => {
  let celllist = []
  let stateList = []
  if (selectValuesa[0] != null && selectValuesa[0] != 'undefined') {
    if (selectValuesa[0] != "") {
      celllist = [selectValuesa[0]];
    }
  }
  if (selectValuesa[1] != null && selectValuesa[1] != 'undefined') {
    if (selectValuesa[1] != "") {
      stateList = [selectValuesa[1]];
    }
  }
  console.log(timeRange.value[0], timeRange.value[1]);
  const response = await request.post("/cacheGlass/edgGlassTaskInfo/setEdgGlassInfoRequest", {
    cellList: celllist,
    stateList: stateList,
    beginDate: timeRange.value[0],
    endDate: timeRange.value[1],
  })
  if (response.code === 200) {
    ElMessage.success(response.message);
  } else {
    ElMessage.error(response.message);
  }

}

// 破损
const open = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
        t('workOrder.messagedamaged'),
        t('workOrder.prompt'),
        {
          confirmButtonText: t('workOrder.yes'),
          cancelButtonText: t('workOrder.cancel'),
          type: 'warning',
        }
    );
    if (confirmResult === 'confirm') {
      // 用户点击了“是”，现在调用删除接口  
      const response = await request.post("/cacheGlass/edgStorageCage/edgReportStatus", {
        glassId: row.glassId,
        state: 8,
        line: row.line,
        workingProcedure: '磨边',
      })
      if (response.code === 200) {
        ElMessage.success(response.message);
      } else {
        // 删除失败，您可以处理错误或显示错误信息给用户  
        ElMessage.error(response.msg);
        // alert('删除失败：' + deleteResponse.message); 
      }
    }
  } catch (error) {
    // 处理可能出现的错误，比如 ElMessageBox 抛出的异常等 
    console.error('发生错误:', error);
  }
};
// 拿走 
const opena = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
        t('workOrder.takemessage'),
        t('workOrder.prompt'),
        {
          confirmButtonText: t('workOrder.yes'),
          cancelButtonText: t('workOrder.cancel'),
          type: 'warning',
        }
    );
    if (confirmResult === 'confirm') {
      // 用户点击了“是”，现在调用删除接口  
      const response = await request.post("/cacheGlass/edgStorageCage/edgReportStatus", {
        glassId: row.glassId,
        state: 9,
        line: row.line,
        workingProcedure: '磨边',
      })
      if (response.code === 200) {
        ElMessage.success(response.message);
      } else {
        // 删除失败，您可以处理错误或显示错误信息给用户  
        ElMessage.error(response.msg);
        // alert('删除失败：' + deleteResponse.message); 
      }
    }
  } catch (error) {
    // 处理可能出现的错误，比如 ElMessageBox 抛出的异常等  
    console.error('发生错误:', error);
  }
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  tableData.value = data.edgTasks[0]
};
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
});
onUnmounted(() => {
  if (socket) {
    closeWebSocket(socket);
  }
});
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>
<template>
  <div style="height: 500px;">
    <div>
      <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
        <el-select v-model="selectValuesa[0]" filterable :placeholder="$t('workOrder.cway')" clearable
                   style="margin-left: 20px;margin-bottom: 10px;">
          <el-option :label="$t('workOrder.edgingone')" value="2001"></el-option>
          <el-option :label="$t('workOrder.edgingtwo')" value="2002"></el-option>
        </el-select>

        <el-select v-model="selectValuesa[1]" filterable :placeholder="$t('workOrder.cstate')" clearable
                   style="margin-left: 20px;margin-bottom: 10px;">
          <el-option :label="$t('workOrder.nedging')" value="0"></el-option>
          <el-option :label="$t('workOrder.edging')" value="1"></el-option>
          <el-option :label="$t('workOrder.finedging')" value="2"></el-option>
        </el-select>
        <span class="demonstration" style="margin-left: 20px;margin-bottom: 10px;">{{ $t('workOrder.time') }}</span>
        <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
                        :start-placeholder="$t('reportmanage.starttime')" style="margin-left: 20px;margin-bottom: 10px;"
                        value-format="YYYY-MM-DD hh:mm:ss"

                        :end-placeholder="$t('reportmanage.endtime')">
        </el-date-picker>
        <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="setEdgGlassInfoRequest()">{{
            $t('reportmanage.inquire')
          }}
        </el-button>

        <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
          <el-table height="750" ref="table"
                    @selection-change="handleSelectionChange"
                    :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
            <el-table-column prop="glassId" align="center" :label="$t('workOrder.glassID')" min-width="180"/>
            <el-table-column prop="width" align="center" :label="$t('workOrder.width')" min-width="120"/>
            <el-table-column prop="height" align="center" :label="$t('workOrder.height')" min-width="80"/>
            <el-table-column prop="thickness" align="center" :label="$t('workOrder.thickness')" min-width="120"/>
            <el-table-column prop="glassType" align="center" :label="$t('workOrder.glasstype')" min-width="120"/>
            <el-table-column prop="line" align="center" :label="$t('workOrder.line')" min-width="120"/>
            <el-table-column prop="status" :label="$t('workOrder.status')" align="center" width="200">
              <template #default="scope">
                {{ scope.row.status == 0 ? "未磨边" : scope.row.status == 1 ? "磨边中" : "已磨边" }}
              </template>
            </el-table-column>


            <el-table-column fixed="right" :label="$t('workOrder.operate')" align="center" width="200">
              <template #default="scope">
                <el-button size="mini" type="text" plain @click="open(scope.row)">{{
                    $t('workOrder.breakage')
                  }}
                </el-button>
                <el-button size="mini" type="text" plain @click="opena(scope.row)">{{
                    $t('workOrder.takeout')
                  }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
#dt {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 100px;
}

#dta {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 80%;
}

#dialog-footer {
  text-align: center;
  margin-top: -15px;
}

#message {
  text-align: center;
  align-items: center;
  color: black;
  width: 200px;
  height: 100px;
  background-color: #337ecc;
  margin-left: 28%;
}

#awatch {
  height: 460px;
  /* margin-top: -60px; */
}
</style>