跟新页面代码

src/layout/components/Sidebar/index.vue

@@ -13,7 +13,14 @@
       v-if="layout == 'mix'"
     >
       <!-- <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" /> -->
-      <div class="viewTitle">{{ title }}</div>
+      <div style="display: flex; align-items: center">
+        <img
+          src="/logo.png"
+          style="width: 35px; height: 35px; margin-right: 10px"
+        />
+        <div class="viewTitle">{{ title }}</div>
+      </div>
+
       <SidebarMixTopMenu class="flex-1" v-show="false" />
       <div>
         <el-space>
@@ -66,12 +73,18 @@ const toExitApp = () => {
   }
 };
 const setTitle = () => {
-  const path = route.fullPath;
+  const path = route.fullPath.split("/")[1];
   console.log(path);
   switch (path) {
-    case "/deviceList":
+    case "deviceList":
       title.value = "设备列表";
       break;
+    case "plan":
+      title.value = "生产计划";
+      break;
+    case "planprocess":
+      title.value = "生产计划";
+      break;
   }
 };
 onMounted(() => {

src/main.ts

@@ -30,7 +30,7 @@ setupElIcons(app);
 // 国际化
 setupI18n(app);
 // 注册动态路由
-setupPermission("/deviceList");
+setupPermission("/plan/order");
 
 setupEleAvue(app);
 

src/views/plan/planprocess/index.vue

@@ -0,0 +1,606 @@
+<template>
+  <div class="body">
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%; height: calc(100vh - 200px)"
+    >
+      <el-table-column type="index" width="60" align="center" label="序号" />
+      <el-table-column
+        align="center"
+        width="120"
+        prop="planCode"
+        label="计划编号"
+      />
+      <el-table-column
+        align="center"
+        width="90"
+        prop="planState"
+        label="计划状态"
+      >
+        <template #default="scope">
+          <el-tag
+            :type="scope.row.planState == '已下发' ? 'success' : 'info'"
+            >{{ scope.row.planState }}</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column align="center" width="90" prop="state" label="订单状态">
+        <template #default="scope">
+          <el-tag
+            :type="
+              scope.row.state == '进行中'
+                ? 'primary'
+                : scope.row.state == '已完成'
+                  ? 'success'
+                  : 'info'
+            "
+            >{{ scope.row.state }}</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="process"
+        label="生产进度"
+        width="600"
+      >
+        <template #default="scope">
+          <el-scrollbar>
+            <div class="scrollbar-flex-content">
+              <div
+                v-for="(item, index) in scope.row.process"
+                :key="item"
+                style="display: flex"
+              >
+                <div class="scrollbar-demo-item">
+                  <el-progress
+                    type="circle"
+                    :percentage="item.num"
+                    style="font-size: 20px"
+                    v-if="item.num != 0"
+                    :status="
+                      item.num == 100
+                        ? 'success'
+                        : item.num > 50
+                          ? ''
+                          : item.num > 0
+                            ? 'warning'
+                            : item.num === 0
+                              ? 'exception'
+                              : 'exception'
+                    "
+                    :width="60"
+                  >
+                    <template #default="{ percentage }">
+                      <div
+                        v-if="percentage == 0"
+                        style="color: red; font-size: 15px"
+                      >
+                        X
+                      </div>
+                      <span
+                        v-else-if="percentage == 100"
+                        style="color: #13ce66; font-size: 15px"
+                        >√</span
+                      >
+                      <div v-else class="percentage-value">
+                        {{ percentage }}%
+                      </div>
+                    </template>
+                  </el-progress>
+                  <el-progress
+                    type="circle"
+                    style="font-size: 20px"
+                    :percentage="100"
+                    v-else
+                    status="exception"
+                    :width="60"
+                  >
+                    <template #default="{ percentage }">
+                      <div style="color: red; font-size: 15px">X</div>
+                    </template>
+                  </el-progress>
+                  <div
+                    style="
+                      color: white;
+                      white-space: nowrap; /* 禁止换行 */
+                      overflow: hidden; /* 隐藏超出部分 */
+                      text-overflow: ellipsis; /* 显示省略号 */
+                      width: 60px;
+                      margin-top: 5px;
+                    "
+                  >
+                    {{ item.lable }}
+                  </div>
+                </div>
+                <div
+                  class="arrow"
+                  v-if="index != scope.row.process.length - 1"
+                  style="
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0 10px;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: #0169f5;
+                  "
+                >
+                  →
+                </div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="name"
+        label="产品名称"
+        width="120"
+      />
+      <el-table-column
+        align="center"
+        prop="model"
+        label="产品型号"
+        width="120"
+      />
+      <el-table-column align="center" prop="planNum" label="计划数量" />
+      <el-table-column align="center" prop="num" label="实际数量" />
+      <el-table-column
+        align="center"
+        prop="date"
+        label="计划日期"
+        width="120"
+      />
+    </el-table>
+    <div
+      style="display: flex; align-items: center; justify-content: space-between"
+    >
+      <div></div>
+      <pagination
+        v-model:total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+const total = ref(10); // 数据总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+});
+const tableData = [
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 90,
+      },
+      {
+        lable: "预处理",
+        num: 75,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+  {
+    planCode: "JH2503010002",
+    planState: "已下发",
+    state: "进行中",
+    process: [
+      {
+        lable: "齐套",
+        num: 100,
+      },
+      {
+        lable: "准备",
+        num: 100,
+      },
+      {
+        lable: "预处理",
+        num: 80,
+      },
+      {
+        lable: "贴片",
+        num: 30,
+      },
+      {
+        lable: "回流焊",
+        num: 0,
+      },
+      {
+        lable: "装焊",
+        num: 0,
+      },
+      {
+        lable: "组装",
+        num: 0,
+      },
+    ],
+    name: "BD射频印制板",
+    model: "SC.PNP.3065",
+    planNum: "20",
+    num: "0",
+    date: "2025-04-10",
+  },
+];
+function handleQuery() {}
+</script>
+
+<style scoped>
+.body {
+  padding: 20px;
+  background-color: var(--ohos-area-bg);
+  border-radius: 16px;
+  position: relative;
+}
+.scrollbar-flex-content {
+  display: flex;
+  width: fit-content;
+}
+.scrollbar-demo-item {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: 4px;
+  width: 60px;
+}
+.percentage-value {
+  font-size: 13px;
+}
+</style>