工序的首页布局。

package.json

@@ -7,7 +7,6 @@
     "preinstall": "npx only-allow pnpm",
     "dev": "vite serve --mode development",
     "build:prod": "vite build --mode production && vue-tsc --noEmit",
-    "prepare": "husky",
     "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
     "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix",
@@ -49,6 +48,7 @@
     "@wangeditor/editor-for-vue": "5.1.10",
     "animate.css": "^4.1.1",
     "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
     "lodash-es": "^4.17.21",

src/layout/components/header.vue

@@ -1,12 +1,161 @@
-<script lang="ts" setup></script>
-
 <template>
-  <div class="commonHeader">zhe shi header</div>
+  <div class="commonHeader">
+    <div style="width: 155px">
+      <svg-icon
+        v-if="routeMeta.back"
+        icon-class="back"
+        size="48"
+        @click="commonBack"
+      />
+      <svg-icon v-else icon-class="LOGO" style="height: 48px; width: 155px" />
+    </div>
+    <div>
+      <div class="date">{{ date }}</div>
+      <div class="time">{{ time }}</div>
+    </div>
+    <div>
+      <el-space>
+        <div class="task">
+          <el-progress
+            :percentage="processCount"
+            :show-text="false"
+            :stroke-width="10"
+          />
+          <div class="process">任务进度: {{ processCount }}%</div>
+        </div>
+        <div>
+          <div class="name">name</div>
+          <div class="work">gongwei</div>
+        </div>
+
+        <el-dropdown
+          ref="dropdown1"
+          trigger="contextmenu"
+          @command="handleCommand"
+        >
+          <img v-if="headUrl" :src="headUrl" alt="" @click="showClick" />
+          <svg-icon v-else icon-class="head" size="48" @click="showClick" />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="a">Action 1</el-dropdown-item>
+              <el-dropdown-item command="b" divided>Action 2</el-dropdown-item>
+              <el-dropdown-item command="c" divided>Action 3</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-space>
+    </div>
+  </div>
 </template>
 
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import type { DropdownInstance } from "element-plus";
+
+const router = useRouter();
+const route = useRoute();
+const routeMeta = computed(() => {
+  return route.meta;
+});
+
+const dropdown1 = ref<DropdownInstance>();
+
+const date = dayjs().format("YYYY-MM-DD");
+const time = ref(dayjs().format("HH:mm:ss"));
+
+const processCount = ref(50);
+
+const headUrl = ref("");
+
+let timer: any = -1;
+
+onMounted(() => {
+  timer = setInterval(() => {
+    time.value = dayjs().format("HH:mm:ss");
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+
+const showClick = () => {
+  if (!dropdown1.value) return;
+  dropdown1.value.handleOpen();
+};
+
+const commonBack = (itemValue) => {
+  router.back();
+};
+
+const handleCommand = (command: string | number | object) => {
+  ElMessage(`click on item ${command}`);
+};
+</script>
+
 <style lang="scss" scoped>
 .commonHeader {
   height: $navbar-height;
   width: 100%;
+  background-color: #f1f3f5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  //border: 1px solid red;
+
+  .date {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 14px;
+    text-align: center;
+  }
+
+  .time {
+    font-weight: 500;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 23px;
+  }
+
+  .head {
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+  }
+
+  .name {
+    font-weight: 500;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 14px;
+    text-align: right;
+  }
+
+  .work {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 14px;
+    text-align: right;
+    margin-top: 5px;
+  }
+
+  .task {
+    padding-top: 5px;
+    margin-right: 10px;
+  }
+
+  .process {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 14px;
+    text-align: right;
+    margin-top: 8px;
+  }
 }
 </style>

src/layout/index.vue

@@ -31,12 +31,11 @@ import Header from "@/layout/components/header.vue";
   min-height: calc(100vh - $navbar-height);
   overflow: hidden;
   // background-color: var(--el-bg-color-page);
-  background-color: #f5f9ff;
+  background-color: #f1f3f5;
 }
 
 .main-container {
-  padding: 10px;
-  height: calc(100vh - 86px);
+  height: calc(100vh - $navbar-height);
   overflow: auto;
 }
 </style>

src/router/index.ts

@@ -45,6 +45,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: {
           title: "pro-steps",
           icon: "homepage",
+          back: true,
         },
       },
     ],

src/styles/index.scss

@@ -29,10 +29,17 @@
 
 .mainContentBox {
   width: 100%;
-  height: calc(100% - 10px);
-  padding: 10px;
-  margin-bottom: 6px;
+  height: 100%;
+  padding: 24px;
   overflow-x: auto;
-  background-color: white;
-  border-radius: 10px;
+  //background: white;
+}
+
+.commonTitle {
+  font-weight: 500;
+  font-size: 38px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 40px;
+  text-align: left;
+  margin-bottom: 20px;
 }

src/views/pro-steps/index.vue

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

src/views/process/main.vue

@@ -1,7 +1,35 @@
-<script lang="ts" setup></script>
-
 <template>
-  <div>工序 首页</div>
+  <div class="mainContentBox">
+    <el-row :gutter="20">
+      <el-col :span="6" class="elColClasss">
+        <Orders />
+      </el-col>
+      <el-col :span="6" class="elColClasss">
+        <div class="grid-content ep-bg-purple">
+          <Processes />
+        </div>
+      </el-col>
+      <el-col :span="12" class="elColClasss" @click="click">
+        <div class="grid-content ep-bg-purple">3</div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import Orders from "@/views/process/orders.vue";
+import Processes from "@/views/process/processes.vue";
+
+// todo: 跳转修改
+const router = useRouter();
+
+const click = (itemValue) => {
+  router.push(`/pro-steps`);
+};
+</script>
+
+<style lang="scss" scoped>
+.elColClasss {
+  height: calc(100vh - 130px);
+}
+</style>

src/views/process/orders.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="commonTitle">待完成订单[3]</div>
+  <el-scrollbar class="barHeight">
+    <p v-for="item in 80" :key="item" class="scrollbar-demo-item">
+      {{ item }}
+    </p>
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.barHeight {
+  height: calc(100vh - 170px);
+}
+
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+</style>

src/views/process/processes.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="commonTitle">待完成订单[3]</div>
+</template>
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>