大理片笼四个表格

wang

2024-05-31 569e9aad2d5916e7b6c23fcb0c58c1641fcb367e

大理片笼四个表格

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -4,12 +4,17 @@
import {useRouter} from "vue-router"
const router = useRouter()
 
import { ref } from 'vue'
import { ref, onMounted , onBeforeUnmount} from "vue";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
import { ElMessage, ElMessageBox } from 'element-plus'
import { tr } from "element-plus/es/locale";
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)
const dialogFormVisibleb = ref(false)
const tableData = ref([])
const tableDatab = ref([])
const tableDatac = ref([])
const tableDatad = ref([])
 
const carposition1 = ref(60);
const carposition2 = ref(220);
@@ -34,30 +39,7 @@
 
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const tableData = [
  {
    id: '1',
    a: '1',
    b: '1',
    c: '123456789',
    d: '1568251',
    e: '1',
    f: '100*100',
    g: '',
  },
]
const tableDatab = [
  {
    id: '2',
    a: '2',
    b: '2',
    c: '123456789',
    d: '1568251',
    e: '1',
    f: '100*100',
    g: '',
  }
]

const dialogForm = () => {
  ElMessageBox.confirm(
    '确定要急停吗?',
@@ -83,7 +65,7 @@
}
 
  var timer=setInterval(() => {
    console.log(million.value,million1.value);
    // console.log(million.value,million1.value);
    million.value+=1;
    if(million.value-million1.value!==12){
      
@@ -137,7 +119,7 @@
  }, 1000);
 
  var timer=setInterval(() => {
    console.log(million3.value,million4.value);
    // console.log(million3.value,million4.value);
    million3.value+=1;
    if(million3.value-million4.value!==12){
      
@@ -204,69 +186,107 @@
  }
}
 
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  data:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})

const socketUrl = `ws://10.153.19.150:88/api/cacheVerticalGlass/api/talk/slicecage`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  tableDatac.value = data.bigStorageCageDetailsOutTask[0]
  tableDatad.value = data.bigStorageCageDetailsFeedTask[0]
  tableData.value = data.bigStorageCageInfo[0]
  tableDatab.value = data.temperingGlassInfoList[0]

};
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
});
function getStatusType(enableState: number) {  
  switch (enableState) {  
    case 0:
      return 'warning';  
    case 1: 
      return 'success';  
  }  
}  
function getStatusText(enableState: number) {
  switch (enableState) {
    case 0:  
      return '禁用';  
    case 1:  
      return '启用'; 
  }  
}
function getStatusTypea(ishorizontal: number) {  
  switch (ishorizontal) {  
    case 0:
      return 'warning';  
    case 1: 
      return 'success';  
  }  
}  
function getStatusTexta(ishorizontal: number) {
  switch (ishorizontal) {
    case 0:  
      return '不接受';  
    case 1:  
      return '接受'; 
  }  
}
function getStatusTypeb(state: number) {  
  switch (state) {  
    case 0:
      return 'success';  
    case 1: 
      return 'primary';  
  }  
}  
function getStatusTextb(state: number) {
  switch (state) {
    case 0:  
      return '出片完成';  
    case 1:  
      return '等待中'; 
    case 2:  
      return '等待中'; 
  }  
}
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>
 
<template>
  <div style="height: 700px;">
    <!-- <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="primary" @click="dialogFormVisible = true">手动进片</el-button> -->
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="primary" @click="dialogFormVisiblea = true">订单信息</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="primary" @click="dialogFormVisiblea = true">理片笼信息</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="success" @click="dialogFormVisibleb = true">出片队列</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger">终止进片</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger">终止出片</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger"  @click="dialogForm">软急停</el-button>
    <!-- <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger">终止进片</el-button> -->
    <!-- <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger">终止出片</el-button> -->
    <!-- <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="danger"  @click="dialogForm">软急停</el-button> -->
    
    <el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="出片玻璃ID" min-width="80" />
          <el-table-column prop="a" align="center" label="笼子" min-width="120" />
          <el-table-column prop="b" align="center" label="格子" min-width="120" />
          <el-table-column prop="c" align="center" label="工程号" min-width="120" />
          <el-table-column prop="d" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="e" align="center" label="钢化版图号" min-width="157" />
          <el-table-column prop="f" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="g" align="center" label="结束任务" min-width="120">
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="text">完成任务</el-button>
</el-table-column>
        :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="bigStorageCageOutTask.glassId" align="center" label="出片玻璃ID" min-width="80" />
          <el-table-column prop="bigStorageCageOutTask.startSlot" align="center" label="起始位置" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.endSlot" align="center" label="目标位置" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.trainNumber" align="center" label="车次" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.serialNumber" align="center" label="序号" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.taskState" align="center" label="任务状态" min-width="157">
          <template #default="scope">
            <el-tag type="success" >{{ scope.row.bigStorageCageOutTask.taskState==0?"等待进片":"进行中"  }}</el-tag>
          </template>
          </el-table-column>
          <el-table-column fixed="right" label="结束任务" align="center" width="150">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">完成任务</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
@@ -274,17 +294,21 @@
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;">
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="进片玻璃ID" min-width="80" />
          <el-table-column prop="a" align="center" label="笼子" min-width="120" />
          <el-table-column prop="b" align="center" label="格子" min-width="120" />
          <el-table-column prop="c" align="center" label="工程号" min-width="120" />
          <el-table-column prop="d" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="e" align="center" label="钢化版图号" min-width="157" />
          <el-table-column prop="f" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="g" align="center" label="结束任务" min-width="120">
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="text">完成任务</el-button>
</el-table-column>
        :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="bigStorageCageFeedTask.glassId" align="center" label="进片玻璃ID" min-width="80" />
          <el-table-column prop="bigStorageCageFeedTask.tragetSlot" align="center" label="目标位置" min-width="120" />
          <!-- <el-table-column prop="task_type" align="center" label="任务类型" min-width="120" />没有返回字段 -->
          <el-table-column prop="bigStorageCageFeedTask.taskState" align="center" label="任务状态" min-width="120">
          <template #default="scope">
            <el-tag type="success" >{{ scope.row.bigStorageCageFeedTask.taskState==0?"等待进片":"进行中"  }}</el-tag>
          </template>
          </el-table-column>
          <el-table-column prop="bigStorageCageFeedTask.line" align="center" label="线路" min-width="120" />
          <el-table-column fixed="right" label="结束任务" align="center" width="150">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">完成任务</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
@@ -527,17 +551,28 @@
    </div>
  </template>
</el-dialog>
<el-dialog v-model="dialogFormVisiblea" top="10vh" width="85%" title="订单信息" >
  <el-input  placeholder="请输入工程号" style="width: 180px;size: mini;"></el-input>
    <el-button style="margin-left: 10px;size: mini;" type="primary">查询</el-button>
<el-dialog v-model="dialogFormVisiblea" top="10vh" width="85%" title="理片笼信息" >
  <!-- <el-input  placeholder="请输入工程号" style="width: 180px;size: mini;"></el-input> -->
    <!-- <el-button style="margin-left: 10px;size: mini;" type="primary">查询</el-button> -->
    <el-table  ref="table" style="margin-top: 20px;height: 500px;"
        @selection-change="handleSelectionChange"
        :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="ida" align="center" label="玻璃id" min-width="80" />
          <el-table-column prop="typea" align="center" label="工程号" min-width="120" />
          <el-table-column prop="typea" align="center" label="长" min-width="120" />
          <el-table-column prop="typea" align="center" label="宽" min-width="120" />
          <el-table-column prop="typea" align="center" label="厚" min-width="120" />
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="大理片笼表ID" min-width="80" />
          <el-table-column prop="deviceId" align="center" label="设备ID" min-width="120" />
          <el-table-column prop="slot" align="center" label="栅格号" min-width="120" />
          <el-table-column
            align="center"
            label="启用状态"
            min-width="80"
            prop="enableState"
          >
          <template #default="scope">  
        <el-tag :type="getStatusType(scope.row.enableState)">  
          {{ getStatusText(scope.row.enableState) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column prop="remainWidth" align="center" label="剩余宽度" min-width="120" />
        </el-table>
        <div id="demo-pagination-block">
    <el-pagination
@@ -557,25 +592,58 @@
</el-dialog>
<el-dialog v-model="dialogFormVisibleb" top="10vh" width="85%" title="出片队列" >
  <div style="display: flex;">
  <p style="margin-top: 4px;">队列状态：</p>
  <p style="margin-top: 4px;">开始</p>
  <p style="margin-top: 3px;">队列状态：</p>
  <p style="margin-top: 3px;">开始</p>
    <el-button style="margin-left: 10px;size: mini;" type="danger">停止</el-button>
    <el-button style="margin-left: 10px;size: mini;" type="primary">添加</el-button>
  </div>
    <el-table  ref="table" style="margin-top: 20px;height: 500px;"
        @selection-change="handleSelectionChange"
        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="铝框id" min-width="80" />
          <el-table-column prop="type" align="center" label="玻璃id" min-width="120" />
          <el-table-column prop="type" align="center" label="订单编号" min-width="120" />
          <el-table-column prop="type" align="center" label="列表编号" min-width="120" />
          <el-table-column prop="type" align="center" label="箱子编号" min-width="120" />
          <el-table-column prop="type" align="center" label="长" min-width="120" />
          <el-table-column prop="type" align="center" label="宽" min-width="120" />
          <el-table-column prop="type" align="center" label="玻璃状态" min-width="120" />
          <el-table-column prop="type" align="center" label="顺序" min-width="120" />
          <el-table-column prop="type" align="center" label="完成" min-width="120" />
          <el-table-column prop="type" align="center" label="操作" min-width="120" />
          <el-table-column prop="id" fixed align="center" label="钢化小片信息表id" min-width="150"/>
          <!-- <el-table-column prop="glass_id" align="center" label="玻璃id" min-width="120" /> -->
          <el-table-column prop="flowcardId" fixed align="center" label="流程卡" min-width="120" />
          <el-table-column prop="glassType" align="center" label="流程卡玻璃类型" min-width="150" />
          <el-table-column prop="width" align="center" label="宽" min-width="80" />
          <el-table-column prop="height" align="center" label="高" min-width="80" />
          <el-table-column prop="thickness" align="center" label="厚度" min-width="80" />
          <el-table-column prop="filmsid" align="center" label="膜系" min-width="80" />
          <!-- <el-table-column prop="ishorizontal" align="center" label="钢化是否接受横放" min-width="150" /> -->
          <el-table-column
            align="center"
            label="钢化是否接受横放"
            min-width="150"
            prop="ishorizontal"
          >
          <template #default="scope">  
        <el-tag :type="getStatusTypea(scope.row.ishorizontal)">  
          {{ getStatusTexta(scope.row.ishorizontal) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column prop="temperingLayoutId" align="center" label="钢化版图id" min-width="120" />
          <el-table-column prop="temperingFeedSequence" align="center" label="钢化版图片序" min-width="120" />
          <el-table-column prop="xCoordinate" align="center" label="x坐标" min-width="80" />
          <el-table-column prop="yCoordinate" align="center" label="y坐标" min-width="80" />
          <el-table-column prop="angle" align="center" label="旋转角度（逆时针）" min-width="150" />
          <!-- <el-table-column prop="state" align="center" label="状态" min-width="80" /> -->
          <el-table-column
            align="center"
            label="状态"
            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 fixed="right" label="操作" align="center" width="150">
            <template #default="scope">
              <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">添加</el-button>
              <el-button size="mini" type="text" plain @click="handleBindRacka(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
</el-dialog>