工控机出站界面搭建

src/views/pwoManage/outfeed/jobReport/index.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { message } from 'ant-design-vue';
+import { useJobStore } from '@/store';
+import type { ColumnsType } from 'ant-design-vue/es/table/interface';
+import { delay } from '@/utils/mock';
+
+const jobStore = useJobStore();
+
+interface PrimaryMaterialTableItem {
+  key: string;
+  waferCode: string;
+  dieCode: string;
+  result: 'OK' | 'NG';
+  qualityLevel: string;
+  [key: string]: any;
+}
+
+const primaryMaterialColumns = [
+  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
+  { title: 'Wafer ID', dataIndex: 'waferCode', key: 'waferCode', align: 'center' },
+  { title: 'Die ID', dataIndex: 'dieCode', key: 'dieCode', align: 'center' },
+  { title: '结果', dataIndex: 'result', key: 'result', filters: [{ text: 'OK', value: 'OK', }, { text: 'NG', value: 'NG', }], onFilter: (value: string, record: any) => record.result.indexOf(value) === 0, align: 'center' },
+  { title: '质量等级', dataIndex: 'qualityLevel', key: 'qualityLevel', filters: [{ text: 'A', value: 'A', }, { text: 'B', value: 'B', }], onFilter: (value: string, record: any) => record.qualityLevel.indexOf(value) === 0, align: 'center' },
+  { title: '操作', key: 'action', align: 'center', width: 120 },
+];
+
+const totals = computed(() => {
+  let okNum = 0;
+  let ngNum = 0;
+
+  primaryMaterialTableData.value.forEach(({ result, qualityLevel }) => {
+    if (result === 'OK') {
+      okNum++;
+    } else {
+      ngNum++;
+    }
+  });
+  return { okNum, ngNum };
+});
+
+const primaryMaterialTableData = ref<PrimaryMaterialTableItem[]>([]);
+
+const loadingPrimaryMaterialList = ref(false);
+const fetchPrimaryMaterialList = async () => {
+  // const stationId = jobStore.jobInfo.id;
+  // if (!stationId) return;
+  loadingPrimaryMaterialList.value = true;
+  try {
+    const rows = await delay(1000, [
+      { key: '1', waferCode: 'WF-20250401-0001', dieCode: 'DIE-20250401-0001', result: 'OK', qualityLevel: 'A' },
+      { key: '2', waferCode: 'WF-20250401-0001', dieCode: 'DIE-20250401-0001', result: 'NG', qualityLevel: 'A' },
+      { key: '3', waferCode: 'WF-20250401-0001', dieCode: 'DIE-20250401-0001', result: 'OK', qualityLevel: 'B' }
+    ]);
+    primaryMaterialTableData.value = rows;
+  } catch (error: any) {
+    message.error(error.message || '查询治具列表失败');
+  } finally {
+    loadingPrimaryMaterialList.value = false;
+  }
+}
+
+// 计算表格高度
+const customTable = ref<HTMLElement | null>(null)
+const tableHeight = ref(200)
+const renderTableHeight = () => {
+  if (customTable.value) {
+    tableHeight.value = customTable.value.clientHeight - 50
+    console.log('元素高度：', tableHeight.value)
+  }
+}
+
+onMounted(() => {
+  renderTableHeight()
+})
+
+defineExpose({
+  renderTableHeight
+});
+
+fetchPrimaryMaterialList()
+</script>
+
+<template>
+  <div class="equipment__container">
+    <div class="main-title">主材报工</div>
+    <div class="table-wrapper" ref="customTable">
+      <a-table :dataSource="primaryMaterialTableData" :columns="primaryMaterialColumns as ColumnsType<PrimaryMaterialTableItem>"
+        :pagination="false" bordered sticky size="middle" :scroll="{ y: tableHeight }"
+        :loading="loadingPrimaryMaterialList">
+        <template #bodyCell="{ column, index, record }">
+          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
+          <template v-if="column.key === 'result'">
+            <a-switch v-model:checked="record.result" checked-children="OK" checkedValue="OK" un-checked-children="NG" unCheckedValue="NG" />
+          </template>
+          <template v-if="column.key === 'qualityLevel'">
+            <a-select v-model:value="record.qualityLevel" style="width: 80%">
+              <a-select-option value="A">A</a-select-option>
+              <a-select-option value="B">B</a-select-option>
+            </a-select>
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-button @click="">查看明细</a-button>
+          </template>
+        </template>
+        <template #summary>
+          <a-table-summary-row>
+            <a-table-summary-cell>总计</a-table-summary-cell>
+            <a-table-summary-cell>
+              <a-typography-text>OK: {{ totals.okNum }}</a-typography-text>
+            </a-table-summary-cell>
+            <a-table-summary-cell>
+              <a-typography-text>NG: {{ totals.ngNum }}</a-typography-text>
+            </a-table-summary-cell>
+          </a-table-summary-row>
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.equipment__container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.main-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow: hidden;
+  height: 100%;
+
+  .description-wrapper {
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.main-title {
+  font-size: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid #c9c9c9;
+  padding: 0 0 8px;
+}
+
+.table-wrapper {
+  height: 100%;
+  overflow: auto;
+}
+
+::v-deep(.ant-switch) {
+  background-color: #ff0000;
+  &:hover {
+    background-color: #ff2525;
+  }
+
+  &.ant-switch-checked {
+    background-color: #04d903;
+
+    &:hover {
+      background-color: #02eb02;
+    }
+  }
+}
+</style>

src/views/pwoManage/outfeed/layout.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { message } from 'ant-design-vue';
+
+const router = useRouter();
+const route = useRoute();
+
+const menuItems = [
+  { label: '主材报工', key: 'JobReport', progress: 30 },
+  { label: '工序参数', key: 'ParameterConfiguration', progress: 80 },
+  { label: '流转指引', key: 'ProcessGuidance', progress: 80 },
+];
+
+const activeKey = computed(() => route.name as string);
+
+const handleMenuClick = (name: string) => {
+  router.push({ name });
+};
+
+// 确认出站
+const outfeeding = ref(false);
+const handleOutfeed = async () => {
+  outfeeding.value = true;
+  try {
+    router.push({ name: 'JobReport' });
+  } catch (error: any) {
+    message.error(error.message || '出站失败');
+  } finally {
+    outfeeding.value = false;
+  }
+};
+
+const outfeedChildRef = ref<any>(null);
+
+/** 父组件对外暴露的方法 */
+function renderTableHeight() {
+  outfeedChildRef.value?.renderTableHeight();
+}
+
+defineExpose({
+  renderTableHeight
+});
+</script>
+
+<template>
+  <a-spin :spinning="outfeeding">
+    <a-row class="outfeed-layout">
+      <a-col :span="20" class="content-wrapper">
+        <router-view v-slot="{ Component }">
+          <component :is="Component" ref="outfeedChildRef" />
+        </router-view>
+      </a-col>
+      <a-col :span="4" class="menu-wrapper">
+        <div class="menu-list">
+          <span class="outfeed-title">出站</span>
+          <div v-for="item in menuItems" :key="item.key" class="menu-item" :class="{ active: activeKey === item.key }"
+            @click="handleMenuClick(item.key)">
+            <div class="menu-content">
+              <span class="menu-title">{{ item.label }}</span>
+              <a-progress :percent="item.progress" :show-info="false" size="small"
+                :stroke-color="activeKey === item.key ? '#1890ff' : undefined" class="menu-progress" />
+            </div>
+          </div>
+          <a-button type="primary" size="large" @click="handleOutfeed">确认出站</a-button>
+        </div>
+      </a-col>
+    </a-row>
+  </a-spin>
+</template>
+
+<style scoped lang="scss">
+.outfeed-layout {
+  height: 100%;
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+}
+
+.outfeed-title {
+  font-size: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid #c9c9c9;
+  padding: 0 0 8px;
+}
+
+.menu-item {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 1vh 1vw;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+  position: relative;
+  overflow: hidden;
+
+  &.active {
+    background: #e6f7ff;
+    border-color: #1890ff;
+
+    .menu-title {
+      color: #1890ff;
+    }
+  }
+
+  &:hover {
+    border-color: #47a5fd;
+  }
+}
+
+.menu-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+}
+
+.menu-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.5;
+}
+
+.menu-progress {
+  margin-bottom: 0 !important;
+
+  :deep(.ant-progress-bg) {
+    transition: all 0.3s;
+  }
+}
+
+.menu-wrapper {
+  padding: 12px;
+  border-radius: 7px;
+  background-color: #f3f3f3;
+}
+
+.content-wrapper {
+  height: 100%;
+  padding: 12px;
+}
+</style>

src/views/pwoManage/outfeed/parameterConfiguration/index.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>
-    outfeed
-  </div>
+  <div></div>
 </template>
 
 <style scoped lang="scss"></style>

src/views/pwoManage/outfeed/processGuidance/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped lang="scss"></style>