上片模块根据状态筛选调整位置加在表格中，前端做筛选并控制根据条件显示数据

wangfei

2025-02-17 ef3f5053b950475b84f46d578b2e2b54482cd3a4

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

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref, computed} from "vue";
import {useRouter} from "vue-router"
import { ElMessage, ElMessageBox } from 'element-plus'
import {useI18n} from 'vue-i18n'
@@ -26,7 +26,24 @@
const cuttingMachineStatusColor = ref('#911005');
const tableDataa = ref<any[]>([]);
const tableDatab = ref<any[]>([]);
const tableData = ref([])
// const tableData = ref([])
const tableData = reactive([]);
const filteredData = computed(() => {
  // applyFilters 函数应该在某处定义，用于根据当前筛选条件过滤数据
  return applyFilters(tableData, currentFilters);
});
// 当前筛选条件，应该是一个响应式变量，用于存储用户选择的筛选值
const currentFilters = ref<{ state?: string }>({});
const filterTag = (value: string, row: any) => {
  // return String(row.state) === value;
  return row.state === value
};
// 应用筛选条件的函数
const applyFilters = (data: any[], filters: { state?: string }) => {
  return data.filter(row => {
    return (!filters.state || String(row.state) === filters.state);
  });
};
const titleSelectJson = ref({
  engineerId: [],
})
@@ -60,8 +77,10 @@
    if (response.code === 200) {
      tableData.splice(0, tableData.length, ...response.data);
      ElMessage.error(response.message);
    }
     window.localStorage.setItem('engineeringIda', tableData[0].engineeringId)
}
  } catch (error) {
    ElMessage.error(response.message);
  }
};
let socket = null;
@@ -69,7 +88,9 @@
const handleMessage = (data: any) => {
  tableDataa.value = data.list[0].slice(0, 2);
  if(data.loadTask1.length !=0){
  tableData.value = data.loadTask1[0]
  // tableData.value = data.loadTask1[0]
  tableData.splice(0, tableData.length, ...data.loadTask1[0]);
  window.localStorage.setItem('engineeringIda', tableData.value[0].engineeringId)
  canSelectProjecta.value = false;
  canSelectProjectb.value = false;
  canSelectProjectc.value = true;
@@ -78,6 +99,7 @@
  canSelectProjecta.value = true;
  canSelectProjectb.value = true;
  canSelectProjectc.value = false;
  tableData.value = '';
}
};
onBeforeUnmount(() => {
@@ -113,11 +135,11 @@
      engineerId: selectedProjectNo.value,
      filmRemove: parseInt(filmRemove.value, 10),
    })
    window.localStorage.setItem('engineeringId', selectedProjectNo.value)
    window.localStorage.setItem('engineeringIda', selectedProjectNo.value)
    window.localStorage.setItem('filmRemove', filmRemove.value)
    if (response.code == 200) {
      ElMessage.success(response.message);
      // closeWebSocket(socket);
      closeWebSocket(socket);
      tableData.value = response.data;
      dialogFormVisible.value = false;
      selectedProjectNo.value = '';
@@ -134,8 +156,7 @@
// 结束工程
const deleteTask = async () => {
  try {
    let engineeringId = window.localStorage.getItem('engineeringId')
    console.log(engineeringId);
    let engineeringId = window.localStorage.getItem('engineeringIda')
    if (engineeringId !== '') {
      const response = await request.post('/loadGlass/engineering/engineering/deleteTask', {
        engineerId: engineeringId,
@@ -165,7 +186,7 @@
// 开始上片
const handleon = async () => {
  let filmRemove = window.localStorage.getItem('filmRemove')
  let engineeringId = window.localStorage.getItem('engineeringId')
  let engineeringId = window.localStorage.getItem('engineeringIda')
  if (markingMachineStatus.value === 'green' && cuttingMachineStatus.value === 'green') {
    try {
      const response = await request.post('/loadGlass/engineering/engineering/changeTask', {
@@ -179,7 +200,7 @@
        canSelectProjecta.value = false;
        canSelectProjectb.value = false;
        canSelectProjectc.value = true;
        // socket = initializeWebSocket(socketUrl, handleMessage);
        socket = initializeWebSocket(socketUrl, handleMessage);
        blind.value = false;
      } else {
        ElMessage.error(response.message);
@@ -195,8 +216,7 @@
const handleup = async () => {
  try {
    let filmRemove = window.localStorage.getItem('filmRemove')
    let engineeringId = window.localStorage.getItem('engineeringId')
    console.log(engineeringId);
    let engineeringId = window.localStorage.getItem('engineeringIda')
    if (engineeringId !== '') {
      const response = await request.post('/loadGlass/engineering/engineering/pause', {
        stationCell: 5,
@@ -382,28 +402,12 @@
        </el-button>
        <div style="margin-left: 70px;">{{ upstatus }}</div>
        <i :style="{ marginTop: '2px', backgroundColor: cuttingMachineStatusColor, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
        <el-button @click="confirmCutting" style="margin-left: 30px;margin-top: -3px;">{{
            $t('basicData.change')
          }}
        </el-button>
  </div>
    <el-button :disabled="!canSelectProjecta" style="margin-top: 5px;margin-left: 15px;"  type="primary" @click="selectproject">{{ $t('Mounting.previewproject') }}</el-button>
    <el-button :disabled="!canSelectProjectb" style="margin-top: 5px;margin-left: 20px;" type="success" @click="handleBind">{{ $t('basicData.startloading') }}</el-button>
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="warning" @click="handleBinda">{{ $t('basicData.stop') }}</el-button>
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="danger" @click="handledelete">{{ $t('searchOrder.deleteTask') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="info" @click="handlezhiban">{{ $t('searchOrder.dutyinformation') }}</el-button>
    <el-select disabled v-model="selectValuesa[1]" clearable :placeholder="$t('Mounting.oneloadingline')"
               style="margin-top: 5px;margin-left: 20px;">
      <el-option :label="$t('Mounting.all')" value="0"></el-option>
      <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option>
      <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option>
    </el-select>
    <el-select v-model="selectValuesa[0]" clearable :placeholder="$t('film.taskstatus')" style="margin-top: 5px;margin-left: 20px;" >
      <el-option :label="$t('Mounting.waiting')" value="1"></el-option>
      <el-option :label="$t('film.execution')" value="2"></el-option>
      <el-option :label="$t('film.finish')" value="3"></el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('Mounting.setparameters') }}</el-button>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 15px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table
@@ -422,21 +426,28 @@
              <span>{{ 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              :label="$t('Mounting.state')"
            min-width="80"
            prop="state"
          >
          <template #default="scope">
            <el-tag
      <el-table-column
      align="center"
      prop="state"
      :label="$t('Mounting.state')"
      min-width="80"
      :filters="[
        { text: t('Mounting.pass'), value: 100 },
        { text: t('Mounting.waiting'), value: 0 },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
                :type="scope.row.state === 100 ? 'success' : 'warning'"
                @click="toggleEnableState(scope.row)"
                disable-transitions
            >
              {{ scope.row.state === 100 ? $t('Mounting.pass') : $t('Mounting.waiting') }}
            </el-tag>
          </template>
      </el-table-column>
      </template>
    </el-table-column>
        </el-table>
      </div>
    </el-card>