进程展示和流程进度管理页面基础布局搭建

ruoyi-ui/src/router/index.js

@@ -72,6 +72,42 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/progressShow',
+    component: Layout,
+    hidden: true,
+    name: 'progressShow',
+    meta: {
+      title: "管道展示",
+      icon: "form",
+      noCache: false,
+      link: null
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/bussiness/progressShow'),
+      }
+    ]
+  },
+  {
+    path: '/processMange',
+    component: Layout,
+    hidden: true,
+    name: 'processMange',
+    meta: {
+      title: "管道流程",
+      icon: "form",
+      noCache: false,
+      link: null
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/bussiness/processMange'),
+      }
+    ]
+  },
   // {
   //   path: '/bpmn',
   //   component: Layout,

ruoyi-ui/src/views/bussiness/components/TaskItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="task-item-wrap">
+    <div class="task-title">
+      <span>{{ itemData.index }}.</span>
+      <span>工艺校验</span>
+    </div>
+    <div class="msg-list">
+      <div class="msg-item">
+        <i class="el-icon-user-solid icon"></i>
+        <span>admin</span>
+      </div>
+      <div class="msg-item">
+        <i class="el-icon-s-help icon"></i>
+        <span>任务类</span>
+      </div>
+      <div class="msg-item">
+        <i class="el-icon-success icon"></i>
+        <!-- <span>admin</span> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TaskItem",
+  props: ["itemData", "index"],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.task-item-wrap {
+  background-color: #cdf1e5 !important;
+  padding: 12px 16px;
+  flex: 1;
+  box-sizing: border-box;
+  // margin-right: 15px;
+  .task-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #454545;
+  }
+  .msg-list {
+    display: flex;
+    flex-direction: column;
+    margin-top: 8px;
+    color: #666;
+    .msg-item {
+      .icon {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/bussiness/components/taskList.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="task-list-wrap">
+    <div class="title-list">
+      <div class="title-item">
+        <span class="title-label">任务号:</span>
+        <span class="title-content">47AS04-51-1299_002</span>
+      </div>
+      <div class="title-item">
+        <span class="title-label">图号:</span>
+        <span class="title-content">1CG312-99</span>
+      </div>
+      <div class="title-item">
+        <span class="title-label">任务名称:</span>
+        <span class="title-content">支架</span>
+      </div>
+      <div class="title-item">
+        <span class="title-label">数量:</span>
+        <span class="title-content">3</span>
+      </div>
+      <div class="title-item">
+        <span class="title-label">完成时间:</span>
+        <span class="title-content">2023年11月1日</span>
+      </div>
+    </div>
+    <div class="card-list-wrap">
+      <div class="prev">
+        <i class="el-icon-arrow-left icon" @click="prevOrNext(-1)"></i>
+      </div>
+      <div class="card-list">
+        <TaskItem
+          class="card-item"
+          v-for="(item, index) of tempList"
+          :key="item.taskKey"
+          :itemData="item"
+          :index="index + 1"
+        ></TaskItem>
+      </div>
+      <div class="next">
+        <i class="el-icon-arrow-right icon" @click="prevOrNext(1)"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import uuid from "@/utils/bpmn/uuid";
+import TaskItem from "./TaskItem.vue";
+import { start } from "nprogress";
+export default {
+  name: "TaskList",
+  props: [],
+  components: { TaskItem },
+  data() {
+    return {
+      start: 0,
+      end: 5,
+      taskItemList: [
+        {
+          index: 1,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 2,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 3,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 4,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 5,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 6,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 7,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 8,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 9,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+        {
+          index: 10,
+          title: "工艺校验",
+          taskKey: uuid(),
+          excuteUser: "admin",
+          taskType: "工艺类",
+          taskstatus: true,
+        },
+      ],
+    };
+  },
+  computed: {
+    tempList() {
+      return this.taskItemList.slice(this.start, this.end);
+    },
+  },
+  methods: {
+    prevOrNext(flag) {
+      if (flag == 1) {
+        if (this.end >= this.taskItemList.length) return;
+        this.start++;
+        this.end++;
+      } else {
+        if (this.start == 0) return;
+        this.start--;
+        this.end--;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.task-list-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  .title-list {
+    display: flex;
+    height: 34px;
+    align-items: center;
+    .title-item {
+      display: flex;
+      align-items: center;
+      margin-right: 30px;
+      font-size: 16px;
+      font-weight: 600;
+      .title-label {
+        margin-right: 10px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .card-list-wrap {
+    margin: 5px 0 30px;
+    // height: 120px;
+    background: #fefefe;
+    padding: 8px 5px;
+    border-radius: 4px;
+    position: relative;
+    box-shadow: inset 0 0 0 2px #eaeaea;
+    .prev {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 40px;
+      font-weight: 600;
+    }
+    .next {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 40px;
+    }
+    .icon {
+      cursor: pointer;
+      &:hover {
+        color: #4cc7ec;
+      }
+    }
+    .card-list {
+      width: auto;
+      padding: 0 26px;
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      // justify-content: space-around;\
+      .card-item {
+        margin-right: 15px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/bussiness/processMange.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="process-mange-wrap">
+    <!-- <el-card shadow="always" :body-style="{ padding: '20px' }"> -->
+    <el-row>
+      <el-col :xs="24" :md="8" :xl="8" class="col">
+        <div class="statistic-wrap">
+          <div class="discription">
+            <span class="title">我的处理</span>
+            <span class="sub-title">需要我处理的管道</span>
+          </div>
+          <span class="data">10</span>
+        </div>
+      </el-col>
+      <el-col :xs="24" :md="8" :xl="8" class="col">
+        <div class="statistic-wrap">
+          <div class="discription">
+            <span class="title">其它处理</span>
+            <span class="sub-title">需要其他人处理的管道</span>
+          </div>
+          <span class="data">0</span>
+        </div>
+      </el-col>
+      <el-col :xs="24" :md="8" :xl="8" class="col">
+        <div class="statistic-wrap">
+          <div class="discription">
+            <span class="title">完成</span>
+            <span class="sub-title">已经完成的管道</span>
+          </div>
+          <span class="data">4</span>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- </el-card> -->
+    <div class="main-area">
+      <div class="show-header">
+        <h3 class="header">管道列表</h3>
+        <div class="search-list">
+          <div class="search-tab">
+            <el-radio-group v-model="taskType">
+              <el-radio-button :label="1">我的处理</el-radio-button>
+              <el-radio-button :label="2">其他处理</el-radio-button>
+            </el-radio-group>
+            <el-radio-group class="btn-list-two" v-model="taskStatus">
+              <el-radio-button :label="3">已完成</el-radio-button>
+              <el-radio-button :label="4">进行中</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="search-input">
+            <el-input placeholder="请输入..." v-model="queryString">
+              <el-button slot="append" icon="el-icon-search"></el-button>
+            </el-input>
+          </div>
+        </div>
+      </div>
+      <div class="show-body"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "processMange",
+  props: [],
+  components: {},
+  data() {
+    return {
+      taskType: 1,
+      queryString: "",
+      taskStatus: 3,
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.process-mange-wrap {
+  background-color: #f2f3f8;
+  padding: 20px;
+  .col {
+    background-color: #fff;
+    border-right: 1px solid #ebedf2;
+    // margin-right: 3px;
+    .statistic-wrap {
+      // height: 70px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      padding: 10px 17px;
+      justify-content: space-between;
+      .discription {
+        display: flex;
+        flex-direction: column;
+        .title {
+          line-height: 20px;
+          font-size: 18px;
+          font-weight: 700;
+          margin-bottom: 5px;
+        }
+        .sub-title {
+          font-size: 14px;
+        }
+      }
+      .data {
+        font-size: 20px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .main-area {
+    margin-top: 30px;
+    box-shadow: 0 1px 15px 1px rgb(69 65 78 / 8%);
+    background-color: #fff;
+    .show-header {
+      border-bottom: 1px solid #ebedf2;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 20px 0px 20px;
+      height: 70px;
+      .header {
+      }
+      .search-list {
+        display: flex;
+        .search-tab {
+          margin-right: 20px;
+          .btn-list-two {
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+    .show-body {
+      padding: 25px;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/bussiness/progressShow.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="app-container">
+    <div class="main-area">
+      <div class="show-header">
+        <div class="tag-list">
+          <div class="tag-item">
+            <!-- <div class="circle"></div> -->
+            <i class="el-icon-circle-check icon"></i>
+            <span>已完成</span>
+          </div>
+          <div class="tag-item">
+            <i class="el-icon-warning icon"></i>
+            <span>触发异常</span>
+          </div>
+          <div class="tag-item">
+            <i class="el-icon-warning-outline icon"></i>
+            <span>新插入</span>
+          </div>
+          <div class="tag-item">
+            <span class="current-node">当前节点</span>
+          </div>
+        </div>
+        <div class="search-list">
+          <div class="search-tab">
+            <el-radio-group v-model="processType">
+              <el-radio-button :label="1">进行</el-radio-button>
+              <el-radio-button :label="2">完成</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="search-input">
+            <el-input placeholder="请输入..." v-model="queryString">
+              <el-button slot="append" icon="el-icon-search"></el-button>
+            </el-input>
+          </div>
+        </div>
+      </div>
+      <div class="show-body">
+        <TaskList v-for="i of 5" :key="i"></TaskList>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TaskList from "./components/taskList.vue";
+export default {
+  name: "ProgressShow",
+  props: [],
+  components: { TaskList },
+  data() {
+    return {
+      processType: 1,
+      queryString: "",
+      total: 1,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+      },
+    };
+  },
+  computed: {},
+  methods: {
+    getList() {},
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 15px 15px;
+  box-sizing: border-box;
+  .main-area {
+    box-shadow: 0 1px 15px 1px rgb(69 65 78 / 8%);
+    background-color: #fff;
+    .show-header {
+      border-bottom: 1px solid #ebedf2;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 20px 0px 20px;
+      height: 50px;
+      .tag-list {
+        display: flex;
+        align-items: center;
+        .tag-item {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          font-size: 16px;
+          .circle {
+            width: 15px;
+            height: 15px;
+            background-color: rgb(104, 221, 104);
+            border-radius: 50%;
+            margin-right: 5px;
+          }
+          .icon {
+            margin-right: 5px;
+          }
+          .current-node {
+            display: inline-block;
+            border: 2px solid #34bfa3;
+            padding: 2px 5px;
+            margin: 2px 40px 2px 10px;
+          }
+        }
+      }
+      .search-list {
+        display: flex;
+        .search-tab {
+          margin-right: 20px;
+        }
+      }
+    }
+    .show-body {
+      padding: 25px;
+    }
+  }
+}
+</style>