中空一线、二线websockect接收更改，空闲状态名称更改，新增中空三线页面，中空理片笼新增三线空闲状态

wangfei

2025-03-25 e33068bf181a56eb3bba2e39cb0573cafb06584a

中空一线、二线websockect接收更改，空闲状态名称更改，新增中空三线页面，中空理片笼新增三线空闲状态

 UI-Project/src/lang/en.js

@@ -770,6 +770,7 @@
          totalAreaOutTwo: '切割二线玻璃面积',
          freeone: '一线空闲状态：',
          freetwo: '二线空闲状态：',
          freethree: '三线空闲状态：',
          casFour: '气体4',
          casFourb: '气体4：',
          casFoura: '请选择气体4',

 UI-Project/src/lang/py.js

@@ -740,6 +740,7 @@
        totalAreaOutTwo: '切割二线玻璃面积',
        freeone: '一线空闲状态：',
        freetwo: '二线空闲状态：',
        freethree: '三线空闲状态：',
        casFour: '气体4',
        casFourb: '气体4：',
        casFoura: '请选择气体4',

 UI-Project/src/lang/zh.js

@@ -771,6 +771,7 @@
        totalAreaOutTwo: '切割二线玻璃面积',
        freeone: '一线空闲状态：',
        freetwo: '二线空闲状态：',
        freethree: '三线空闲状态：',
        casFour: '气体4',
        casFourb: '气体4：',
        casFoura: '请选择气体4',

 UI-Project/src/router/index.js

@@ -281,6 +281,11 @@
              component: () => import('../views/hollow/hollowequipmenttwo.vue')
            },
            {
              path: '/hollow/hollowequipmenthree',
              name: 'hollowequipmenthree',
              component: () => import('../views/hollow/hollowequipmenthree.vue')
            },
            {
              path: '/hollow/hollowslicecage',
              name: 'hollowslicecage',
              component: () => import('../views/hollow/hollowslicecage.vue')
@@ -374,6 +379,18 @@
                   },
                 ]
                },
                {
                   path: '/hellowquipthreehistory',
                    name: 'hellowquipthreehistory',
                    component: () => import('../views/hollow/hellowquipthreehistory.vue'),
                    children: [
                      {
                       path: '/hollow/hellowquipthreehistory',
                       name: 'hellowquipthreehistory',
                       component: () => import('../views/hollow/hellowquipthreehistory.vue')
                      },
                    ]
                   },
          {
             path: '/cachingbeforehistory',
              name: 'cachingbeforehistory',

 UI-Project/src/views/hollow/hellowquipthreehistory.vue

New file
@@ -0,0 +1,477 @@
<template>  
  <div>  
<div style="display: flex;width: 1770px;">
  <el-input v-model="flowCardId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 200px;" :placeholder="$t('searchOrder.processcards')" />
  <el-select v-model="selectValuesa[0]" filterable :placeholder="$t('hellow.isForceList')" clearable
      style="width: 200px;margin-left: 10px;">
      <el-option :label="$t('hellow.noisForceList')" value="0"></el-option>
      <el-option :label="$t('hellow.yesisForceList')" value="1"></el-option>
    </el-select>
    <el-select v-model="selectValuesa[1]" filterable :placeholder="$t('searchOrder.state')" clearable
      style="width: 200px;margin-left: 10px;">
      <el-option :label="$t('film.execution')" value="1"></el-option>
      <el-option :label="$t('basicData.stop')" value="2"></el-option>
      <el-option :label="$t('sorter.endingtask')" value="3"></el-option>
    </el-select>
          <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" :start-placeholder="$t('reportmanage.starttime')" 
           style="margin-left: 15px;" 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="sethistorical()">{{$t('reportmanage.inquire')}}</el-button>
   </div>
      <el-table ref="table" style="margin-top: 20px;height: 580px;width: 1770px;" :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
    <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.processcards')" min-width="80" />
    <el-table-column prop="totalLayer" align="center" :label="$t('hellow.totalLayer')" min-width="80" />
    <el-table-column prop="totalPairQuantity" align="center" :label="$t('hellow.totalPairQuantity')" min-width="80" />
        <el-table-column
          align="center"
          :label="$t('hellow.isForceList')"
          min-width="80"
          prop="isForce"
        >
        <template #default="scope">  
      <el-tag :type="getStatusTypea(scope.row.isForce)">  
        {{ getStatusTexta(scope.row.isForce) }}  
      </el-tag>  
    </template> 
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('searchOrder.state')"
          min-width="80"
          prop="state"
        >
        <template #default="scope">  
      <el-tag :type="getStatusTypeb(scope.row.state)">  
        {{ getStatusTextb(scope.row.state) }}  
      </el-tag>  
    </template> 
        </el-table-column>
        <el-table-column prop="formattedCreateTime" align="center" :label="$t('reportmanage.starttime')" min-width="100" />
        <el-table-column prop="formattedUpdateTime" align="center" :label="$t('reportmanage.endtime')" min-width="100" />
        <el-table-column fixed="right" :label="$t('film.operate')" align="center">
            <template #default="scope">
          <!-- <el-button size="mini" type="text" plain @click="handleptask(scope.row)">{{ $t('hellow.listFormula') }}</el-button> -->
          <el-button size="mini" type="text" plain @click="handlecagedetails(scope.row)">{{ $t('hellow.HollowGlass') }}</el-button>
            </template>
        </el-table-column>
      </el-table>
<div style="margin-top: 20px;margin-left: 40%;">
      <el-pagination
        v-model:current-page="currentPage2"
        :page-size="pageSize"
        :size="large"
        :disabled="disabled"
        layout="prev, pager, next, jumper"
        :total="totalRecords"
        @current-change="handlePageChange2"
        style="margin-top: 10px;"
    />
  </div>
  
  <el-dialog v-model="dialogFormVisiblef" top="5vh" width="65%" :title="$t('hellow.HollowGlass')">
    <el-table  ref="table" style="margin-top: 20px;height: 450px;"
        :data="tableDatacagedetails" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
        <el-table-column prop="flowCardId" :label="$t('hellow.flowCardId')" align="center" width="140"/>
          <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" width="140"/>
          <el-table-column prop="hollowSequence" :label="$t('hellow.order')" align="center"/>
          <el-table-column prop="thickness" :label="$t('hellow.thickness')" align="center"/>
          <el-table-column prop="layer" :label="$t('hellow.layer')" align="center"/>
          <el-table-column prop="filmsId" :label="$t('hellow.coatingtypes')" align="center"/>
          <el-table-column prop="height" :label="$t('hellow.height')" align="center"/>
          <el-table-column prop="width" :label="$t('hellow.width')" align="center"/>
          <el-table-column prop="state" :label="$t('hellow.state')" align="center">
            <template #default="scope">
            {{ scope.row.state == -1 ? $t('hellow.waitingout') : $t('hellow.finishout') }}
            </template>
          </el-table-column>
        </el-table>
</el-dialog>
<el-dialog v-model="dialogFormVisiblea" top="23vh" width="55%" :title="$t('hellow.listFormula')" >
    <div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
     <el-form  size="mini" label-width="150px">
      <el-form label-width="150px" label-position="right">
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item :label="$t('hellow.formulaName')" style="width: 16vw;">
                <el-input disabled v-model="formulaName" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="10">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('Mounting.removalmethoda')" style="width: 16vw;">
            <el-select v-model="filmRemove" clearable  style="width: 220px" disabled>
        <el-option :label="$t('Mounting.removal')" value="1"></el-option>
        <el-option :label="$t('Mounting.noremoval')" value="0"></el-option>
      </el-select>
              </el-form-item>
            </div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.bottomRemove')" style="width: 16vw;">
                <el-input disabled v-model="bottomRemove" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="10">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.topRemove')" style="width: 16vw;">
                <el-input disabled v-model="topRemove" autocomplete="off" />
           </el-form-item>
            </div></div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.leftRemove')" style="width: 16vw;">
                <el-input disabled v-model="leftRemove" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="10">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.rightRemove')" style="width: 16vw;">
            <el-input disabled v-model="rightRemove" autocomplete="off" />
              </el-form-item>
            </div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
        </el-dialog>
</div>
</template>  
<script lang="ts" setup>
import {useI18n} from 'vue-i18n'
import {useRouter} from "vue-router"
import request from "@/utils/request"
import {host, WebSocketHost} from '@/utils/constants'
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {ElMessage, ElMessageBox} from 'element-plus'
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
import { inject } from 'vue';
const globalDate = inject('globalDate');
const router = useRouter()
const timeRange = ref([])
const selectValuesa = reactive([]);
const tableDatax = ref([])
const currentPage2 = ref(1)
const totalRecords = ref(0)
const rawGlassHeight = ref('');
const rawGlassThickness = ref('');
const flowCardId = ref('');
const rawGlassfilmsId = ref('');
const formattedCreate = ref('') 
const formulaName = ref('') 
const filmRemove = ref('') 
const topRemove = ref('') 
const bottomRemove = ref('') 
const leftRemove = ref('') 
const rightRemove = ref('') 
const frameOne = ref('') 
const frameTwo = ref('') 
const frameThree = ref('') 
const frameFour = ref('') 
const sealInsert = ref('') 
const casOne = ref('') 
const casTwo = ref('') 
const casThree = ref('') 
const casFour = ref('') 
const intervalFrameTypeOne = ref('') 
const intervalFrameWidthOne = ref('') 
const intervalFrameHeightOne = ref('') 
const intervalFrameTypeTwo = ref('') 
const intervalFrameWidthTwo = ref('') 
const intervalFrameHeightTwo = ref('') 
const intervalFrameTypeThree = ref('') 
const intervalFrameWidthThree = ref('') 
const intervalFrameHeightThre = ref('') 
const intervalFrameTypeFour = ref('') 
const intervalFrameWidthFour = ref('') 
const intervalFrameHeightFour = ref('') 
const tableDatacagedetails = ref([])
const dialogFormVisiblea = ref(false)
const dialogFormVisiblef = ref(false)
let getglobalDate = window.localStorage.getItem('getglobalDate')
const historical = async () => {
try {
let startTime = window.localStorage.getItem('startTime')
    const response = await request.post("/hollowGlass/hollowGlassOutRelationInfo/queryHollowHistoryTask", {
      pageNo: 1,
      pageSize: 20,
      cell: 932,
      flowCardId: '',
      isForceList: [],
      stateList: [],
      beginDate: startTime,
      endDate: getglobalDate
  })
    if (response.code == 200) {
      ElMessage.success(response.message);
      const formattedData = response.data.records.map(record => ({
      ...record,
      formattedCreateTime: formatTimestamp(record.createTime),
      formattedUpdateTime: formatTimestamp(record.updateTime),
    }));
      tableDatax.value = formattedData;
      console.log(response.data.pages);
      totalRecords.value = response.data.total/2 || 0
    } else {
      ElMessage.error(response.message);
  }
}
catch (error) {
  console.error(error);
}
}
const handlePageChange2 = (newPage) => {
currentPage2.value = newPage;
console.log(currentPage2.value);
window.localStorage.setItem('pagenumber', currentPage2.value)
historicala(currentPage2.value);
};
const historicala = async (page) => {
try {
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]];
    }
  }
let page = window.localStorage.getItem('pagenumber')
let startTime = window.localStorage.getItem('startTime')
    const response = await request.post("/hollowGlass/hollowGlassOutRelationInfo/queryHollowHistoryTask", {
      pageNo: page,
      pageSize: 20,
      cell: 932,
      flowCardId: flowCardId.value,
      isForceList: celllist,
      stateList: stateList,
      beginDate: (timeRange.value && timeRange.value[0]) || '',
      endDate: (timeRange.value && timeRange.value[1]) || '',
  })
    if (response.code == 200) {
      ElMessage.success(response.message);
      const formattedData = response.data.records.map(record => ({
      ...record,
      formattedCreateTime: formatTimestamp(record.createTime),
      formattedUpdateTime: formatTimestamp(record.updateTime),
    }));
      tableDatax.value = formattedData;
      totalRecords.value = response.data.total/2 || 0
    } else {
      ElMessage.error(response.message);
  }
}
catch (error) {
  console.error(error);
}
}
// 配方信息
const handleptask = (row) => {
  fetchcagedl(row); 
  dialogFormVisiblea.value = true;
};
const removalMethodMap = {
  1: t('Mounting.removal'),
  0: t('Mounting.noremoval')
};
const fetchcagedl = async (row) => {
  try  {
    var url="/hollowGlass/hollowFormulaDetails/getFormulaDetailsById?id="+ row.formulaId;
    const response = await request.get(url)
    if (response.code == 200) {
      ElMessage.success(response.message);
        formulaName.value = response.data.formulaName
        filmRemove.value = removalMethodMap[response.data.filmRemove];
        topRemove.value = response.data.topRemove
        bottomRemove.value = response.data.bottomRemove
        leftRemove.value = response.data.leftRemove
        rightRemove.value = response.data.rightRemove
        frameOne.value = response.data.frameOne
        frameTwo.value = response.data.frameTwo
        frameThree.value = response.data.frameThree
        frameFour.value = response.data.frameFour
        sealInsert.value = response.data.sealInsert
        casOne.value = response.data.casOne
        casTwo.value = response.data.casTwo
        casThree.value = response.data.casThree
        casFour.value = response.data.casFour
        intervalFrameTypeOne.value = response.data.intervalFrameTypeOne
        intervalFrameWidthOne.value = response.data.intervalFrameWidthOne
        intervalFrameHeightOne.value = response.data.intervalFrameHeightOne
        intervalFrameTypeTwo.value = response.data.intervalFrameTypeTwo
        intervalFrameWidthTwo.value = response.data.intervalFrameWidthTwo
        intervalFrameHeightTwo.value = response.data.intervalFrameHeightTwo
        intervalFrameTypeThree.value = response.data.intervalFrameTypeThree
        intervalFrameWidthThree.value = response.data.intervalFrameWidthThree
        intervalFrameHeightThre.value = response.data.intervalFrameHeightThre
        intervalFrameTypeFour.value = response.data.intervalFrameTypeFour
        intervalFrameWidthFour.value = response.data.intervalFrameWidthFour
        intervalFrameHeightFour.value = response.data.intervalFrameHeightFour
    } else {
      ElMessage.error(response.message);
    }
}
catch (error) {
    // 处理错误
    console.error(error);
  }
}
// 队列信息
const handlecagedetails = (row) => {
  const { id } = row;
  fetchcagedetails(id); 
  dialogFormVisiblef.value = true;
};
const fetchcagedetails = async (id) => {
  try  {
    var url="/hollowGlass/hollowGlassQueueInfo/queryHollowGlassQueueInfoByTask?taskId="+ id;
    const response = await request.post(url)
    if (response.code == 200) {
      ElMessage.success(response.message);
      const formattedData = response.data.map(record => ({
      ...record,
      formaCreateTime: formatTimestamp(record.createTime),
      formaUpdateTime: formatTimestamp(record.updateTime),
    }));
    tableDatacagedetails.value = formattedData;
    } else {
      ElMessage.error(response.message);
    }
}
catch (error) {
    // 处理错误
    console.error(error);
  }
}
// 历史查询点击
const sethistorical = async () => {
try { 
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]];
    }
  }
let startTime = window.localStorage.getItem('startTime')
let page = window.localStorage.getItem('pagenumber')
const response = await request.post("/hollowGlass/hollowGlassOutRelationInfo/queryHollowHistoryTask", {
      pageNo: 1,
      pageSize: 20,
      cell: 932,
      flowCardId: flowCardId.value,
      isForceList: celllist,
      stateList: stateList,
      beginDate: (timeRange.value && timeRange.value[0]) || '',
      endDate: (timeRange.value && timeRange.value[1]) || '',
  })
    if (response.code == 200) {
      currentPage2.value = 1
      ElMessage.success(response.message);
      const formattedData = response.data.records.map(record => ({
      ...record,
      formattedCreateTime: formatTimestamp(record.createTime),
      formattedUpdateTime: formatTimestamp(record.updateTime),
    }));
      // tableDatax.value = response.data.records;
      tableDatax.value = formattedData;
      totalRecords.value = response.data.total/2 || 0
    } else {
      ElMessage.error(response.message);
  }
}
catch (error) {
  console.error(error);
}
}
// 格式化时间戳为年月日时间字符串的函数
function formatTimestamp(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
const day = String(date.getDate()).padStart(2, '0'); // 补零
const hours = String(date.getHours()).padStart(2, '0'); // 补零（如果需要显示时间）
const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零（如果需要显示时间）
const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零（如果需要显示时间）
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 格式化后端时间并计算一周前的时间
const defaultTime = ref<[Date, Date]>([new Date(), new Date()]);
function parseAndSetTime() {
const backendTime = new Date(getglobalDate);
const oneWeekAgo = new Date(backendTime.getTime() - 7 * 24 * 60 * 60 * 1000); // 减去7天
  oneWeekAgo.setHours(0, 0, 0, 0);
  console.log(formatTimestamp(oneWeekAgo));
console.log(oneWeekAgo);
timeRange.value = [formatTimestamp(oneWeekAgo), formatTimestamp(backendTime)];
window.localStorage.setItem('startTime', formatTimestamp(oneWeekAgo))
}
function getStatusTypeb(state: number) {  
switch (state) {  
  case 1:
    return 'primary';  
  case 2: 
    return 'success';  
  case 3: 
    return 'info';  
}  
}
function getStatusTextb(state: number) {
switch (state) {
  case 1:  
    return t('film.execution');
  case 2:  
    return t('basicData.stop');
  case 3:  
    return t('sorter.endingtask');
}  
}
function getStatusTypea(isForce: number) {  
switch (isForce) {  
  case 0: 
    return 'primary';  
  case 1: 
    return 'success';  
}  
}  
function getStatusTexta(isForce: number) {
switch (isForce) {
  case 0:  
    return t('hellow.noisForceList');
  case 1:  
  return t('hellow.yesisForceList');
}  
}
onMounted(() => {
parseAndSetTime();
historical();
});
</script>
<style scoped>  
</style>

 UI-Project/src/views/hollow/hollowequipment.vue

@@ -1080,7 +1080,7 @@
  }
]
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/HollowGlass`;
const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/HollowGlassone`;
const currentPage = ref(parseInt(window.localStorage.getItem('currentPage')) || 1);
watch(() => currentPage.value, (newVal) => {
  window.localStorage.setItem('currentPage', newVal);
@@ -1095,12 +1095,12 @@
};
const handleMessage = (data) => {
  try {
    tableDataa.value = data[930][0];
    tableDataa.value = data.queueInfo[0];
    const allPageData = data;
    const currentPageKeyValue = currentPageKey.value;
    const currentPageData = allPageData[currentPageKeyValue];
    if (data.freeOneRequestEntity != null) {
    freeone.value = data.freeOneRequestEntity == 1 ? 'green' : '#911005';
    if (data.freeRequest != null) {
      freeone.value = data.freeRequest[0] == true ? 'green' : '#911005';
  }
    // if (currentPageData && Array.isArray(currentPageData) && currentPageData.length > 0) {
    //   tableDataa.value = currentPageData[0];

 UI-Project/src/views/hollow/hollowequipmenthree.vue

New file
@@ -0,0 +1,1012 @@
<template>
  <div style="height: 600px;">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
      <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;">
        <!-- <el-button id="searchButton" type="primary" @click="handleormulan">
          {{ $t('hellow.hollowformula') }}
        </el-button> -->
        <el-button id="searchButton" type="primary" @click="handlezhiban">
          {{ $t('hellow.createtask') }}
        </el-button>
        <el-button type="primary" @click="selectproject">
          {{ $t('hellow.reviewproject') }}
        </el-button>
    <el-button style="margin-left: 10px;" id="searchButton" type="primary" @click="handlehistorical">{{ $t('searchOrder.historicaltasks') }}</el-button>
    <el-button style="margin-left: 10px;" id="searchButton" type="success" @click="handleBinda">
          {{ $t('hellow.starttask') }}
        </el-button>
        <el-button style="margin-left: 10px;" id="searchButton" type="info" @click="handleBindd">{{
            $t('hellow.taskdet')
          }}
        </el-button>
        <el-button style="margin-left: 10px;" id="searchButton" type="warning" @click="handleBindc">{{
            $t('hellow.stopproject')
          }}
        </el-button>
  </div>
     
    <div id="dotClass">
            <div style="margin-left: 70px;">{{ $t('hellow.freethree') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: freethree, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
       </div>
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table height="650" ref="table" :data="tableDataa"
                  :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }">
          <el-table-column prop="flowCardId" :label="$t('hellow.flowCardId')" align="center"/>
          <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center"/>
          <el-table-column prop="hollowSequence" :label="$t('hellow.order')" align="center"/>
          <el-table-column prop="thickness" :label="$t('hellow.thickness')" align="center"/>
          <el-table-column prop="layer" :label="$t('hellow.layer')" align="center"/>
          <el-table-column prop="filmsId" :label="$t('hellow.coatingtypes')" align="center"/>
          <el-table-column prop="height" :label="$t('hellow.height')" align="center"/>
          <el-table-column prop="width" :label="$t('hellow.width')" align="center"/>
          <el-table-column prop="state" :label="$t('hellow.state')" align="center">
            <template #default="scope">
              {{ scope.row.state == -1 ? "等待出片" : "出片完成" }}
            </template>
          </el-table-column>
        </el-table>
      <!-- <div style="display: flex;margin-left: 40%;margin-top: 10px;">
      <div style="margin-top: 5px;margin-right: 5px;">{{ $t('hellow.line') }}</div>
    <el-pagination
          background
          size="large"
          layout="prev, pager, next"
          :total="30"
          :current-page.sync="currentPage"
          @current-change="handlePageChange1"
        />
      </div> -->
  </div>
    </el-card>
  </div>
  <!-- 创建任务 -->
  <el-dialog v-model="dialogFormVisiblea" top="5vh" width="85%">
    <div style="display: flex;">
    <el-input v-model="flowCardId" style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.incardnumber')" />
    <el-input v-model="filmsId" style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('film.infilms')"/>
    <el-input v-model="thickness" style="margin-left: 10px;margin-bottom: 10px;width: 240px;" :placeholder="$t('searchOrder.inthickness')"/>
    <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="fetchFlowCardsearch">
      {{$t('reportmanage.inquire')}}</el-button>
  </div>
  <el-table
    ref="table"
    style="margin-top: 20px; height: 700px;"
    :data="tableDatab"
    :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
    row-key="projectNumber"
  >
    <!-- <el-table-column type="expand"> -->
    <el-table-column>
    <template #default="props">
      <el-table :data="props.row.records" style="width: 100%">
      <el-table-column prop="layer" fixed align="center" :label="$t('hellow.layernumber')" min-width="80"/>
      <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="80"/>
      <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="80"/>
      <el-table-column prop="sumCount" align="center" :label="$t('hellow.totalnumber')" min-width="80"/>
      <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="80"/>
      <el-table-column prop="pairCount" align="center" :label="$t('hellow.pairsnumber')" min-width="80"/>
      <el-table-column prop="damageCount" align="center" :label="$t('hellow.damagenumber')" min-width="80"/>
      </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="projectNumber" fixed align="center" :label="$t('hellow.cardnumber')" min-width="20"/>
    <el-table-column fixed="right" :label="$t('hellow.operate')" align="center" width="270">
        <template #default="scope">
          <el-button size="mini" type="text" plain @click="handletake(scope.row)">{{ $t('hellow.claimquest') }}</el-button>
          <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">{{
              $t('hellow.missingfilms')
            }}
          </el-button>
          <el-button size="mini" type="text" plain @click="handleout(scope.row)">{{
              $t('hellow.forcedfilming')
            }}
          </el-button>
        </template>
      </el-table-column>
  </el-table>
</el-dialog>
<!-- 中空配方添加 -->
<el-dialog v-model="add" top="23vh" width="55%" :title="$t('hellow.hollowformula')" >
    <div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
     <el-form  size="mini" label-width="150px">
      <el-form label-width="150px" label-position="right">
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item :label="$t('hellow.formulaName')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.formulaNamea')" v-model="formulaName" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('Mounting.removalmethoda')" :required="true" style="width: 16vw;">
            <el-select v-model="filmRemove" clearable  style="width: 220px" :placeholder="$t('Mounting.removalmethod')">
        <el-option :label="$t('Mounting.removal')" value="1"></el-option>
        <el-option :label="$t('Mounting.noremoval')" value="0"></el-option>
      </el-select>
              </el-form-item>
            </div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.bottomRemove')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.bottomRemovea')" v-model="bottomRemove" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.topRemove')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.topRemovea')" v-model="topRemove" autocomplete="off" />
           </el-form-item>
            </div></div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.leftRemove')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.leftRemovea')" v-model="leftRemove" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.rightRemove')" :required="true" style="width: 16vw;">
            <el-input :placeholder="$t('hellow.rightRemovea')" v-model="rightRemove" autocomplete="off" />
              </el-form-item>
            </div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleConfirm">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="add = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
<!-- 中空配方修改 -->
<el-dialog v-model="adda" top="23vh" width="55%" :title="$t('hellow.edithollowformula')" >
    <div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
     <el-form  size="mini" label-width="150px">
      <el-form label-width="150px" label-position="right">
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item :label="$t('hellow.formulaName')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.formulaNamea')" v-model="formulaName" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('Mounting.removalmethoda')" :required="true" style="width: 16vw;">
            <el-select v-model="filmRemove" clearable  style="width: 220px" :placeholder="$t('Mounting.removalmethod')">
        <el-option :label="$t('Mounting.removal')" value="1"></el-option>
        <el-option :label="$t('Mounting.noremoval')" value="0"></el-option>
      </el-select>
              </el-form-item>
            </div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.bottomRemove')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.bottomRemovea')" v-model="bottomRemove" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.topRemove')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.topRemovea')" v-model="topRemove" autocomplete="off" />
           </el-form-item>
            </div></div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.leftRemove')" :required="true" style="width: 16vw;">
                <el-input :placeholder="$t('hellow.leftRemovea')" v-model="leftRemove" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('hellow.rightRemove')" :required="true" style="width: 16vw;">
            <el-input :placeholder="$t('hellow.rightRemovea')" v-model="rightRemove" autocomplete="off" />
              </el-form-item>
            </div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handledit">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="adda = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 领取任务 -->
  <el-dialog v-model="dialogFormVisiblec" top="21vh" width="40%" :title="$t('hellow.claimquest')">
    <div style="margin-left: 20px;margin-top: 10px;margin-bottom: 10px;">
      <el-form size="mini" label-width="100px">
        <el-form label-width="210px" label-position="right">
          <el-form-item :label="$t('hellow.pairQuantity')" :required="true" style="width: 25vw">
            <el-input :placeholder="$t('hellow.cpairQuantity')" v-model="totalPairQuantity" autocomplete="off" />
          </el-form-item>
          <el-form-item :label="$t('hellow.route')" :required="true" style="width: 25vw;">
            <el-select 
            :placeholder="$t('hellow.line3')"
            disabled
             style="width: 270px"  
             v-model="cell">
               <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('hellow.hollowformulp')" :required="true" style="width: 25vw;">
        <el-select
            v-model="selectedFormulaName"
            filterable
            clearable
            :placeholder="$t('hellow.phollowformula')"
            style="width: 270px"
            @change="handleFormulaChange"
        >
          <el-option
              v-for="item in titleformulaName"
              :key="item.id"
              :label="item.formulaName"
              :value="item.formulaName"
          />
        </el-select>
      </el-form-item> -->
        </el-form>
      </el-form>
    </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="finisha">
          {{ $t('reportWork.sure') }}
        </el-button>
        <el-button @click="dialogFormVisiblec = false">{{ $t('reportWork.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 强制出片 -->
  <el-dialog v-model="dialogFormVisibled" top="21vh" width="40%" :title="$t('hellow.forcedfilming')">
    <div style="margin-left: 20px;margin-top: 10px;margin-bottom: 10px;">
      <el-form size="mini" label-width="100px">
        <el-form label-width="210px" label-position="right">
          <el-form-item :label="$t('hellow.pairQuantity')" :required="true" style="width: 25vw">
            <el-input :placeholder="$t('hellow.cpairQuantity')" v-model="totalPairQuantitya" autocomplete="off" />
          </el-form-item>
          <el-form-item :label="$t('hellow.route')" :required="true" style="width: 25vw;">
            <el-select 
            :placeholder="$t('hellow.line3')"
            disabled
             style="width: 270px"  
             v-model="cella">
               <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('hellow.hollowformulp')" :required="true" style="width: 25vw;">
        <el-select
            v-model="selectedFormulaName"
            filterable
            clearable
            :placeholder="$t('hellow.phollowformula')"
            style="width: 270px"
            @change="handleFormulaChange"
        >
          <el-option
              v-for="item in titleformulaName"
              :key="item.id"
              :label="item.formulaName"
              :value="item.formulaName"
          />
        </el-select>
      </el-form-item> -->
        </el-form>
      </el-form>
    </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="finishb">
          {{ $t('reportWork.sure') }}
        </el-button>
        <el-button @click="dialogFormVisibled = false">{{ $t('reportWork.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 缺片详情 -->
  <el-dialog v-model="dialogFormVisibleb" top="7vh" width="70%" height="500">
    <div style="margin-top: -20px;text-align: center;margin-left: 400px;">
      <el-form-item :label="$t('hellow.cardnumbera')" style="width: 14vw">
        {{ currentRow.projectNumber }}
      </el-form-item>
    </div>
    <el-table ref="table" style="margin-top: 20px;height: 400px;"
          :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
      <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="80"/>
      <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="80"/>
      <el-table-column prop="height" align="center" :label="$t('hellow.height')" min-width="80"/>
      <el-table-column prop="width" align="center" :label="$t('hellow.width')" min-width="80"/>
      <!-- <el-table-column prop="totalCount" align="center" :label="$t('hellow.totalnumber')" min-width="80"/> -->
      <el-table-column prop="lackCount" align="center" :label="$t('hellow.missingnumber')" min-width="80"/>
      <!-- <el-table-column prop="damageCount" align="center" :label="$t('hellow.brokenpieces')" min-width="80"/> -->
      <div style="float: right;margin-bottom: 5px;">
        <el-pagination layout="prev, pager, next" :total="50"/>
      </div>
    </el-table>
    <div style="display: flex;margin-left: 40%;margin-top: 10px;">
  <el-pagination
          background
          size="large"
          layout="prev, pager, next"
          :total="30"
          :current-page.sync="currentPage2"
          @current-change="handlePageChange2"
        />
  </div>
  </el-dialog>
  <!-- 开始任务 -->
  <el-dialog v-model="blinda" top="30vh" width="25%" :title="$t('hellow.pstarttask')">
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handlea">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="blinda = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 暂停任务 -->
  <el-dialog v-model="blindc" top="30vh" width="25%" :title="$t('hellow.pstopproject')">
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handlec">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="blindc = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 删除任务 -->
  <el-dialog v-model="blindd" top="30vh" width="25%" :title="$t('hellow.hollowtaskdet')">
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handled">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="blindd = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 预览 -->
  <el-dialog v-model="dialogFormVisiblee" top="24vh" width="25%" :title="$t('hellow.reviewproject')" >
    <div style="margin-left: 50px;margin-bottom: 10px;">
      <el-form-item :label="$t('basicData.projectnumber')" :required="true">
        <el-select
            v-model="selectedProjectNo"
            filterable
            clearable
            :placeholder="$t('basicData.plselectproject')"
            style="width: 260px"
            @input="handleInputChange"
        >
          <el-option
              v-for="item in titleSelectJson.processType"
              :key="item.value"
              :label="item.value"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleup">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="dialogFormVisiblee = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 中空配方 -->
  <el-dialog v-model="mulan" top="15vh" width="70%" :title="$t('hellow.hollowformula')">
    <el-button id="searchButton" type="primary"  @click="openAddDialog">
          {{ $t('basicData.add') }}
        </el-button>
      <el-table ref="table" style="margin-top: 20px;height: 400px;"
                :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
        <el-table-column prop="formulaName" fixed align="center" :label="$t('hellow.formulaNamep')"/>
        <el-table-column prop="filmRemove" align="center" :label="$t('Mounting.removalmethodp')" min-width="110">
      <template #default="scope">
        <el-tag :type="getcasOnea(scope.row.filmRemove)">
          {{ getStatuscasOnea(scope.row.filmRemove) }}
        </el-tag>
      </template>
    </el-table-column>
        <el-table-column prop="topRemove" align="center" :label="$t('hellow.topRemovep')"> </el-table-column>
        <el-table-column prop="bottomRemove" align="center" :label="$t('hellow.bottomRemovep')"> </el-table-column>
        <el-table-column prop="leftRemove" align="center" :label="$t('hellow.leftRemovep')"> </el-table-column>
        <el-table-column prop="rightRemove" align="center" :label="$t('hellow.rightRemovep')"> </el-table-column>
        <el-table-column fixed="right" :label="$t('productStock.operate')" align="center" width="270">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleEdit(scope.row)">{{ $t('productStock.exit') }}</el-button>
              <el-button size="mini" type="text" plain @click="opena(scope.row)">{{ $t('productStock.delete') }}</el-button>
            </template>
        </el-table-column>
        </el-table>
        <template #footer>
      <div id="dialog-footer">
        <el-button @click="mulan = false">{{ $t('large.close') }}</el-button>
      </div>
    </template>
</el-dialog>
 <!-- 历史任务 -->
 <el-dialog v-model="blindb" top="5vh" width="71%">
     <iframe 
     :src="iframeUrl" 
     marginwidth="2000px"
     marginheight="2000px"
     width="100%" 
     height="750px" 
     frameborder="0"
     ></iframe>
  </el-dialog>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import {onBeforeUnmount, onMounted, onUnmounted, ref, reactive, watch, computed} from "vue";
import request from "@/utils/request"
import {host, WebSocketHost} from '@/utils/constants'
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {useI18n} from 'vue-i18n'
const {t} = useI18n()
const blinda = ref(false)
const blindb = ref(false)
const blindc = ref(false)
const blindd = ref(false)
const mulan = ref(false)
const tableDataa = ref([])
const tableDatab = ref([])
const tableDatac = ref([])
const tableDatax = ref([])
const cell = ref('')
const cella = ref('')
const selectedProjectNo = ref('');
const totalPairQuantity = ref('')
const totalPairQuantitya = ref('')
const bottomRemove = ref('')
const filmRemove = ref('')
const formulaName = ref('')
const leftRemove = ref('')
const thickness = ref('')
const rightRemove = ref('')
const topRemove = ref('')
const filmsId = ref('')
const flowCardId = ref('')
const freethree = ref('#911005');
const dialogFormVisiblea = ref(false)
const dialogFormVisibleb = ref(false)
const dialogFormVisiblec = ref(false)
const dialogFormVisibled = ref(false)
const dialogFormVisiblee = ref(false)
const add = ref(false)
const adda = ref(false)
const currentPage2 = ref(1)
const currentRow = reactive({});
const formattedProcessType = ref([]);
let selectedFormulaId = ref(null);
const formulaNameid = ref({ id: null });
const titleformulaName = ref({ formulaName: [] ,formulaId: []});
const titleSelectJson = ref({ processType: [] });
const iframeUrl = ref('');
const handlehistorical = (row) => {
  blindb.value = true;
  iframeUrl.value = `${window.location.origin}/#/hollow/hellowquipthreehistory`;
};
const options = [
  {
    value: 930,
    label: t('hellow.line1'),
  },
  {
    value: 931,
    label: t('hellow.line2'),
  },
  {
    value: 932,
    label: t('hellow.line3'),
  }
]
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/HollowGlassThree`;
const currentPage = ref(parseInt(window.localStorage.getItem('currentPage')) || 1);
watch(() => currentPage.value, (newVal) => {
  window.localStorage.setItem('currentPage', newVal);
});
const currentPageKey = computed(() => `93${currentPage.value - 1}`);
const handlePageChange1 = (newPage) => {
  currentPage.value = newPage;
  console.log(currentPage.value);
};
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  console.log(currentPage2.value);
  fetchFlowBind(currentRow.projectNumber, currentRow.layer, currentPage2.value);
};
const handleMessage = (data) => {
  try {
    tableDataa.value = data.queueInfo[0];
    const allPageData = data;
    const currentPageKeyValue = currentPageKey.value;
    const currentPageData = allPageData[currentPageKeyValue];
    if (data.freeRequest != null) {
      freethree.value = data.freeRequest[0] == true ? 'green' : '#911005';
  }
  } catch (error) {
    console.error('Error parsing WebSocket message:', error);
  }
};
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
  window.localStorage.setItem('flowCardId', '')
});
onUnmounted(() => {
  if (socket) {
    closeWebSocket(socket);
  }
});
function getcasOnea(filmRemove) {  
  switch (filmRemove) {  
    case 1:
      return 'success';  
    case 0: 
      return 'warning';  
    default:
      return 'info'; 
  }  
}  
function getStatuscasOnea(filmRemove) {
  switch (filmRemove) {
    case 1:  
      return t('Mounting.removal');
    case 0:  
      return t('Mounting.noremoval'); 
    default:
      return '';
  }  
}
// 开始任务 
const handleBinda = (row) => {
  blinda.value = true;
};
// 暂停任务 
const handleBindc = (row) => {
  blindc.value = true;
};
// 删除任务 
const handleBindd = (row) => {
  blindd.value = true;
};
const removalMethodMap = {
  1: t('Mounting.removal'),
  0: t('Mounting.noremoval')
};
// 处理编辑按钮点击  
function handleEdit(row) {  
    formulaName.value = row.formulaName;
    filmRemove.value = removalMethodMap[row.filmRemove];
    bottomRemove.value = row.bottomRemove;
    leftRemove.value = row.leftRemove;
    rightRemove.value = row.rightRemove;
    topRemove.value = row.topRemove;
    adda.value = true;
}  
function openAddDialog() {  
    formulaName.value = '';
    filmRemove.value = '';
    bottomRemove.value = '';
    leftRemove.value = '';
    rightRemove.value = '';
    topRemove.value = '';
    add.value = true;
}
const handlezhiban = () => {
  dialogFormVisiblea.value = true;
  fetchFlowCardId();
};
const handleormulan = () => {
  mulan.value = true;
  fetchmulan();
};
// 预览
const selectproject = () => {
  dialogFormVisiblee.value = true;
  selectgong();
};
// 缺片详情
const handleBindRack = (row) => {
  currentPage2.value = 1;
  const { projectNumber, layer } = row;
  currentRow.projectNumber  = row.projectNumber;
  dialogFormVisibleb.value = true;
  fetchFlowBind(projectNumber, layer,currentPage2.value);
};
// 领取任务
const handletake = (row) => {
  window.localStorage.setItem('flowCardId', row.projectNumber)
  dialogFormVisiblec.value = true;
  fetchmulan()
};
// 强制出片
const handleout = (row) => {
  window.localStorage.setItem('flowCardId', row.projectNumber)
  dialogFormVisibled.value = true;
  fetchmulan()
};
// 创建任务
const fetchFlowCardId = async () => {
  try {
    const response = await request.post('/hollowGlass/hollowGlassRelationInfo/queryHollowAllFlowCard',{
      filmsId: '',
      flowCardId: '',
      thickness: '',
    });
    if (response.code == 200) {
      ElMessage.success(response.message);
      const newData = parseData(response.data);
      tableDatab.value = newData;
    } else {
      ElMessage.error('Failed to fetch data');
    }
  } catch (error) {
    ElMessage.error('Error fetching data');
  }
};
const fetchFlowCardsearch = async () => {
  try {
    const response = await request.post('/hollowGlass/hollowGlassRelationInfo/queryHollowAllFlowCard',{
      filmsId: filmsId.value,
      flowCardId: flowCardId.value,
      thickness: thickness.value
    });
    if (response.code == 200) {
      ElMessage.success(response.message);
      const newData = parseData(response.data);
      tableDatab.value = newData;
    } else {
      ElMessage.error('Failed to fetch data');
    }
  } catch (error) {
    ElMessage.error('Error fetching data');
  }
};
// 中空配方
const fetchmulan = async () => {
  try {
    var url="/hollowGlass/hollowFormulaDetails/listFormulaDetails?keyword="+'';
    const response = await request.post(url)
    if (response.code == 200) {
      ElMessage.success(response.message);
      tableDatax.value = response.data;
      titleformulaName.value = response.data.map(item => ({ formulaId: item.id, formulaName: item.formulaName }));
    } else {
      ElMessage.error('Failed to fetch data');
    }
  } catch (error) {
    ElMessage.error('Error fetching data');
  }
};
const handleFormulaChange = (value) => {
  const selectedItem = titleformulaName.value.find(item => item.formulaName === value);
  if (selectedItem) {
    formulaNameid.value = { id: selectedItem.formulaId };
    window.localStorage.setItem('id', formulaNameid.value.id)
  } else {
    formulaNameid.value = { id: null };
  }
};
// 中空配方添加
const handleConfirm = async () => {
  try {
    const response = await request.post('/hollowGlass/hollowFormulaDetails/saveFormulaDetails',{
      formulaName: formulaName.value,
      filmRemove: filmRemove.value,
      bottomRemove: bottomRemove.value,
      leftRemove: leftRemove.value,
      rightRemove: rightRemove.value,
      topRemove: topRemove.value,
    });
    if (response.code == 200) {
      ElMessage.success(response.message);
      tableDatax.value = response.data;
      add.value = false
      formulaName.value = '';
      filmRemove.value = '';
      bottomRemove.value = '';
      leftRemove.value = '';
      rightRemove.value = '';
      topRemove.value = '';
      fetchmulan()
    } else {
      ElMessage.error('Failed to fetch data');
    }
  } catch (error) {
    ElMessage.error('Error fetching data');
  }
};
const removalMethodMapa = {
  [t('Mounting.removal')]: 1,
  [t('Mounting.noremoval')]: 0,
};
// 中空配方修改
const handledit = async () => {
  try {
    const response = await request.post('/hollowGlass/hollowFormulaDetails/updateFormulaDetails',{
      formulaName: formulaName.value,
      filmRemove: removalMethodMapa[filmRemove.value],
      bottomRemove: bottomRemove.value,
      leftRemove: leftRemove.value,
      rightRemove: rightRemove.value,
      topRemove: topRemove.value,
    });
    if (response.code == 200) {
      ElMessage.success(response.message);
      adda.value = false
      fetchmulan()
    } else {
      ElMessage.error('Failed to fetch data');
    }
  } catch (error) {
    ElMessage.error('Error fetching data');
  }
};
// 中空配方删除 
 const opena = async(row) => {  
  try {
    const confirmResult = await ElMessageBox.confirm(  
      t('hellow.hollowformuldet'), 
      t('productStock.prompt'),  
      {  
        confirmButtonText: t('productStock.yes'), 
        cancelButtonText: t('productStock.cancel'),
        type: 'warning',  
      } 
    );
    if (confirmResult === 'confirm') {
    var url="/hollowGlass/hollowFormulaDetails/deleteFormulaDetails?idList="+row.id;
    const response = await request.post(url)
    if (response.code === 200) {
      ElMessage.success(response.message);
      fetchmulan()
    } else {
      ElMessage.error(response.msg);
      }  
    }  
  } catch (error) {
    console.error('发生错误:', error);  
  }  
};
// 工程号
const selectgong = async () => {
  try {
    var url="/hollowGlass/hollowGlassOutRelationInfo/hollowTaskList?cell="+ 932;
    const response = await request.post(url)
    if (response.code == 200) {
      const processTypes = response.data.map((projectNo, index) => ({
        value: projectNo,
        label: projectNo
      }));
      titleSelectJson.value.processType = processTypes;
    } else {
      ElMessage.error('Failed to fetch data');
    }
  } catch (error) {
    ElMessage.error('Error fetching data');
  }
};
// 预览
const handleup = async () => {
  try {
    var url="/hollowGlass/hollowGlassOutRelationInfo/appointHollowTaskDetails?cell="+ 932 + "&flowCardId=" + selectedProjectNo.value;
  window.localStorage.setItem('flowCardId', selectedProjectNo.value)
  const response = await request.post(url)
    if (response.code == 200) {
      ElMessage.success(response.message);
      tableDataa.value = response.data;
      dialogFormVisiblee.value = false
      selectedProjectNo.value = ''
      closeWebSocket(socket);
  } else {
      ElMessage.error('Failed to fetch data');
    }
  } catch (error) {
    ElMessage.error('Error fetching data');
  }
};
const parseData = (rawData) => {
  return Object.keys(rawData).map(projectNumber => ({
    projectNumber,
    records: rawData[projectNumber]
  }));
};
const fetchFlowBind = async (flowCardId, layer, page) => {
  try {
    var url="/hollowGlass/hollowGlassRelationInfo/queryLackByFlowCard?flowCardId="+flowCardId + "&layer=" + layer;
    const response = await request.post(url)
    if (response.code == 200) {
      tableDatac.value = response.data[page];
      ElMessage.success(response.message);
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    console.error(error);
  }
}
// 开始任务
const handlea = async () => {
  try {
    let flowCardId = window.localStorage.getItem('flowCardId')
    if (flowCardId !== '') {
    var url="/hollowGlass/hollowGlassOutRelationInfo/startTask?flowCardId="+flowCardId + "&cell=" + 932;
    const response = await request.post(url)
      if (response.code == 200) {
        ElMessage.success(response.message);
        blinda.value = false;
      } else {
        ElMessage.error(response.message);
      }
    } else {
      ElMessage({
        type: 'info',
        message: t('basicData.infonull'),
      })
    }
  } catch (error) {
    console.error(error);
  }
}
// 暂停任务
const handlec = async () => {
  try {
    let flowCardId = window.localStorage.getItem('flowCardId')
    if (flowCardId !== '') {
    var url="/hollowGlass/hollowGlassOutRelationInfo/pauseTask?flowCardId="+flowCardId + "&cell=" + 932;
    const response = await request.post(url)
      if (response.code == 200) {
        ElMessage.success(response.message);
        blindc.value = false;
      } else {
        ElMessage.error(response.message);
      }
    } else {
      ElMessage({
        type: 'info',
        message: t('basicData.infonull'),
      })
    }
  } catch (error) {
    console.error(error);
  }
}
// 删除任务
const handled = async () => {
  try {
    let flowCardId = window.localStorage.getItem('flowCardId')
    if (flowCardId !== '') {
    var url="/hollowGlass/hollowGlassOutRelationInfo/deleteHollowTaskDetails?flowCardId="+flowCardId + "&cell=" + 932;
    const response = await request.post(url)
      if (response.code == 200) {
        ElMessage.success(response.message);
        blindd.value = false;
      } else {
        ElMessage.error(response.message);
      }
    } else {
      ElMessage({
        type: 'info',
        message: t('basicData.infonull'),
      })
    }
  } catch (error) {
    console.error(error);
  }
}
// 领取任务
const finisha = async () => {
  let flowCardId = window.localStorage.getItem('flowCardId')
  let id = window.localStorage.getItem('id')
    try {
      var url="/hollowGlass/hollowGlassOutRelationInfo/receiveTask?cell="+ 932 + "&flowCardId=" + flowCardId + "&totalPairQuantity=" + totalPairQuantity.value+ "&formulaId=" + -1;
      const response = await request.post(url)
    if (response.code == 200) {
      ElMessage.success(response.message);
      dialogFormVisiblec.value = false;
      cell.value = '';
      formulaName.value = '';
      totalPairQuantity.value = '';
    } else {
          ElMessage.error(response.message);
        }
      } catch (error) {
        console.error(error);
      }
    }
// 强制出片
const finishb = async () => {
  let flowCardId = window.localStorage.getItem('flowCardId')
  let id = window.localStorage.getItem('id')
  try {
      var url="/hollowGlass/hollowGlassOutRelationInfo/forceOutGlass?cell="+ 932 + "&flowCardId=" + flowCardId + "&totalPairQuantity=" + totalPairQuantitya.value+ "&formulaId=" + -1;
      const response = await request.post(url)
    if (response.code == 200) {
      ElMessage.success(response.message);
      dialogFormVisibled.value = false;
      cella.value = '';
      totalPairQuantitya.value = '';
    } else {
          ElMessage.error(response.message);
        }
      } catch (error) {
        console.error(error);
      }
    }

onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>
<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;
}
#dotClass {
  display: flex;
  margin-left: 20px; 
  size: 50px;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>

 UI-Project/src/views/hollow/hollowequipmenttwo.vue

@@ -553,7 +553,7 @@
  }
]
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/HollowGlass`;
const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/HollowGlassTwo`;
const currentPage = ref(parseInt(window.localStorage.getItem('currentPage')) || 1);
watch(() => currentPage.value, (newVal) => {
  window.localStorage.setItem('currentPage', newVal);
@@ -570,12 +570,12 @@
};
const handleMessage = (data) => {
  try {
    tableDataa.value = data[931][0];
    tableDataa.value = data.queueInfo[0];
    const allPageData = data;
    const currentPageKeyValue = currentPageKey.value;
    const currentPageData = allPageData[currentPageKeyValue];
    if (data.freeTwoRequestEntity != null) {
    freetwo.value = data.freeTwoRequestEntity[0] == true ? 'green' : '#911005';
    if (data.freeRequest != null) {
      freetwo.value = data.freeRequest[0] == true ? 'green' : '#911005';
  }
    // if (currentPageData && Array.isArray(currentPageData) && currentPageData.length > 0) {
    //   tableDataa.value = currentPageData[0];

 UI-Project/src/views/hollow/hollowslicecage.vue

@@ -19,6 +19,7 @@
const outRequestEntity = ref('#911005');
const freeone = ref('#911005');
const freetwo = ref('#911005');
const freethree = ref('#911005');
const tableDataa = ref([])
const tableDatab = ref([])
const tableDatac = ref([])
@@ -347,6 +348,9 @@
  }
  if (data.freeTwoRequestEntity != null) {
    freetwo.value = data.freeTwoRequestEntity[0] == true ? 'green' : '#911005';
  }
  if (data.freeThreeRequestEntity != null) {
    freethree.value = data.freeThreeRequestEntity[0] == true ? 'green' : '#911005';
  }
  if (data.outRequestEntity != null) {
    outRequestEntity.value = data.outRequestEntity == 1 ? 'green' : '#911005';
@@ -681,7 +685,9 @@
        <i :style="{ marginTop: '2px', backgroundColor: freeone, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
        <div style="margin-left: 70px;">{{ $t('hellow.freetwo') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: freetwo, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
  </div>
        <div style="margin-left: 70px;">{{ $t('hellow.freethree') }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: freethree, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
      </div>
    <div class="table-container">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 300px;">