工控机出站界面搭建

2025-12-29 10:29:01 +08:00
parent 45a807ac06
commit b758c659c4
4 changed files with 331 additions and 3 deletions
--- a/src/views/pwoManage/outfeed/layout.vue
+++ b/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>