新增中空模块，前端路由配置及页面样式

wangfei

2024-11-29 d0f0e0f87caef8efdbbc92d4fe7c76d4455473c8

新增中空模块，前端路由配置及页面样式

 UI-Project/src/lang/zh.js

@@ -639,6 +639,34 @@
          noremoval: '不除膜',
          coarselyground: '粗磨',
          finegrinding: '精磨',

      }
  }
      },
    hellow: {
        createtask: '创建任务',
        starttask: '开始任务',
        pstarttask: '是否开始任务？',
        stoptask: '停止任务',
        pstoptask: '是否停止任务？',
        currenttask: '当前任务：',
        claimednumber: '已领取配对数量：',
        linenumber: '进入中空线数量：',
        order: '出片顺序',
        thickness: '厚度',
        coatingtypes: '膜系',
        height: '长',
        width: '宽',
        state: '状态',
        cardnumber: '流程卡号',
        cardnumbera: '流程卡号：',
        layernumber: '层号',
        totalnumber: '总片数',
        pairsnumber: '已配对数量',
        missingnumber: '缺片数量',
        operate: '操作',
        claimquest: '领取任务',
        pclaimquest: '是否领取任务？',
        missingfilms: '缺片详情',
        forcedfilming: '强制出片',
        pforcedfilming: '是否强制出片？',
        brokenpieces: '破损片数',
    }
}

 UI-Project/src/router/index.js

@@ -298,7 +298,7 @@
    path: 'reportWork',
    name: 'reportWork',
    component: () => import('../views/ReportWork/reportWork.vue'),
    children:[
    children: [
      {
        path: '/ReportWork/reportWork',
        name: 'reportWork',
@@ -306,6 +306,20 @@
      },
    ]
  },

        /*----------- 中空 ----------------*/
        {
          path: 'hollow',
          name: 'hollowequipment',
          component: () => import('../views/hollow/hollowequipment.vue'),
          children: [
            {
              path: '/hollow/hollowequipment',
              name: 'hollowequipment',
              component: () => import('../views/hollow/hollowequipment.vue')
            },
          ]
        },
        /*----------- 管理系统 ----------------*/
        {
          path: 'sys',

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

New file
@@ -0,0 +1,270 @@
<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="success" @click="dialogFormVisiblea = true">
          {{ $t('hellow.createtask') }}
        </el-button>
        <el-button style="margin-left: 20px;" id="searchButton" type="success" @click="handleBinda">
          {{ $t('hellow.starttask') }}
        </el-button>
        <el-button style="margin-left: 20px;" id="searchButton" type="success" @click="handleBindb">{{
            $t('hellow.stoptask')
          }}
        </el-button>
      </div>
      <div style="margin-bottom: -5px;margin-left: 5px;">
        <el-form>
          <el-row>
            <el-col :span="4">
              <div id="dt" style="font-size: 15px;">
                <el-form-item :label="$t('hellow.currenttask')" style="width: 14vw">
                  {{ temperingtotal }}
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div id="dta" style="font-size: 15px;">
                <el-form-item :label="$t('hellow.claimednumber')" style="width: 14vw">
                  {{ glasstotal }}
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="4">
              <div id="dt" style="font-size: 15px;">
                <el-form-item :label="$t('hellow.linenumber')" style="width: 14vw">
                  {{ fulltotals }}
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table height="480" ref="table" :data="tableDataa"
                  :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }">
          <el-table-column prop="layoutSequence" :label="$t('hellow.order')" align="center"/>
          <el-table-column prop="layoutSequence" :label="$t('hellow.thickness')" align="center"/>
          <el-table-column prop="layoutSequence" :label="$t('hellow.coatingtypes')" align="center"/>
          <el-table-column prop="layoutSequence" :label="$t('hellow.height')" align="center"/>
          <el-table-column prop="layoutSequence" :label="$t('hellow.width')" align="center"/>
          <el-table-column prop="layoutSequence" :label="$t('hellow.state')" align="center"/>
        </el-table>
        <div style="float: right;">
          <el-pagination layout="prev, pager, next" :total="50"/>
        </div>
      </div>
    </el-card>
  </div>
  <el-dialog v-model="dialogFormVisiblea" top="5vh" width="85%">
    <el-table ref="table" style="margin-top: 20px;height: 500px;"
              :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
      <el-table-column prop="deviceId" fixed align="center" :label="$t('hellow.cardnumber')" min-width="80"/>
      <el-table-column prop="slot" fixed align="center" :label="$t('hellow.layernumber')" min-width="80"/>
      <el-table-column prop="patternWidth" align="center" :label="$t('hellow.thickness')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.coatingtypes')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.totalnumber')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.pairsnumber')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.missingnumber')" min-width="80"/>
      <el-table-column fixed="right" :label="$t('hellow.operate')" align="center" width="270">
        <template #default="scope">
          <el-button size="mini" type="text" plain @click="finisha(scope.row)">{{ $t('hellow.claimquest') }}</el-button>
          <el-button size="mini" type="text" plain @click="dialogFormVisibleb = true">{{
              $t('hellow.missingfilms')
            }}
          </el-button>
          <el-button size="mini" type="text" plain @click="finishb(scope.row)">{{
              $t('hellow.forcedfilming')
            }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </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">
        {{ temperingtotal }}
      </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="patternWidth" align="center" :label="$t('hellow.thickness')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.coatingtypes')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.height')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.width')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.totalnumber')" min-width="80"/>
      <el-table-column prop="patternHeight" align="center" :label="$t('hellow.missingnumber')" min-width="80"/>
      <el-table-column prop="patternHeight" 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>
  </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="blindb" top="30vh" width="25%" :title="$t('hellow.pstoptask')">
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handlea">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="blindb = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {ElMessage, ElMessageBox} from 'element-plus'
import {onBeforeUnmount, onMounted, onUnmounted, ref} from "vue";
import request from "@/utils/request"
import {closeWebSocket} from '@/utils/WebSocketService';
import {useI18n} from 'vue-i18n'

const {t} = useI18n()
const blinda = ref(false)
const blindb = ref(false)
const tableDataa = ref([])
const tableDatac = ref([])
const dialogFormVisiblea = ref(false)
const dialogFormVisibleb = ref(false)

const tableDatab = [
  {
    layoutSequence: 'Tom',
  },
  {
    layoutSequence: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
let socket = null;
// const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`;
// const handleMessage = (data) => {
// adjustedRects.value = data.device[0].map(rect => ({
//       ...rect,
//       completed: rect.completedQuantity,
//       breakage: rect.breakageQuantity,
//       thisProcess: rect.thisProcess,
//     }));
// };
// let socket;
onMounted(() => {
  // socket = new WebSocket(socketUrl);
  // socket.onmessage = (event) => {
  //   const data = JSON.parse(event.data);

  //   // updateCharts();
  // };
  // };  
});
// 开始任务 
const handleBinda = (row) => {
  blinda.value = true;
};
// 停止任务 
const handleBindb = (row) => {
  blindb.value = true;
};
// 开始任务
const handlea = async () => {
  try {
    let engineeringId = window.localStorage.getItem('engineeringId')
    console.log(engineeringId);
    if (engineeringId !== '') {
      const response = await request.post('/loadGlass/engineering/engineering/pauseTask', {
        engineeringId: engineeringId,
        state: 0,
      })
      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 finisha = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
        t('hellow.pclaimquest'),
        t('searchOrder.prompt'),
        {
          confirmButtonText: t('searchOrder.yes'),
          cancelButtonText: t('searchOrder.cancel'),
          type: 'warning',
        }
    );
    if (confirmResult === 'confirm') {
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/finishBigStorageCageDetails", row)
      if (response.code === 200) {
        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.message);
      }
    }
  } catch (error) {
    console.error('发生错误:', error);
  }
};
// 强制出片
const finishb = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
        t('hellow.pforcedfilming'),
        t('searchOrder.prompt'),
        {
          confirmButtonText: t('searchOrder.yes'),
          cancelButtonText: t('searchOrder.cancel'),
          type: 'warning',
        }
    );
    if (confirmResult === 'confirm') {
      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/finishBigStorageCageDetails", row)
      if (response.code === 200) {
        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.message);
      }
    }
  } catch (error) {
    console.error('发生错误:', error);
  }
};
onUnmounted(() => {
  socket.close();
});
onMounted(() => {
  // fetchTableData();
  // socket = initializeWebSocket(socketUrl, handleMessage);
});
onUnmounted(() => {
  if (socket) {
    closeWebSocket(socket);
  }
});
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>

<style scoped></style>