feat:数据引擎静态页面完成

admin_2/src/components/autoRegister/YTable.vue

+<template>
+  <div class="y-table">
+    <el-table
+      v-loading="loading"
+      :border="isBorder"
+      :data="tableData"
+      style="width: 100%"
+      :size="size"
+      :max-height="maxHeight"
+      v-bind="$attrs"
+    >
+      <el-table-column
+        v-for="(v, i) in column"
+        :key="i"
+        :prop="v.prop"
+        :type="v.type"
+        :index="v.index"
+        :label="v.label"
+        :width="v.width"
+        :align="v.align"
+        :fixed="v.fixed"
+        :formatter="v.formatter"
+        :min-width="v.minWidth"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "YTable",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "",
+    },
+    border: {
+      type: Boolean,
+      default: false,
+    },
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Array,
+      default: () => [],
+    },
+    headerHeight: {
+      type: String,
+      default: "44px",
+    },
+    headerWeight: {
+      type: Number,
+      default: 400,
+    },
+    maxHeight: {
+      default: null,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    isBorder() {
+      return !!this.border;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.y-table {
+  width: 100%;
+  height: 100%;
+}
+</style>

admin_2/src/pages/engine/Engine.vue

 <template>
   <div class="engine flex h-full w-full flex-col">
-    <div class="top-box flex justify-between">
+    <div class="top-box flex shrink-0 justify-between">
       <div class="tab-box flex items-end gap-5">
-        <div
-          :class="[
-            'tab-item',
-            'top-radius',
-            {
-              active: active == 1,
-            },
-          ]"
-          @click="active = 1"
+        <router-link
+          :class="['tab-item', 'top-radius']"
+          to="/engine/queueupsystem"
         >
           排队取号系统
-        </div>
-        <div
-          :class="[
-            'tab-item',
-            'top-radius',
-            {
-              active: active == 2,
-            },
-          ]"
-          @click="active = 2"
+        </router-link>
+        <router-link
+          :class="['tab-item', 'top-radius']"
+          to="/engine/evaluatesystem"
         >
           评价系统
-        </div>
+        </router-link>
       </div>
       <div class="flex gap-5">
         <div class="search-box top-radius flex h-full items-center gap-5">
@@ -52,7 +40,9 @@
         </div>
       </div>
     </div>
-    <div class="main w-full flex-1"></div>
+    <div class="main w-full flex-1 overflow-auto">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
@@ -134,7 +124,7 @@ export default {
     background-color: #fff;
     cursor: pointer;
   }
-  .active {
+  .router-link-active {
     height: 100%;
     color: var(--primary);
     font-weight: 600;
@@ -161,11 +151,12 @@ export default {
   cursor: pointer;
 }
 .main {
+  padding: 20px;
   background: #fff;
   border-radius: 0px 0px 4px 4px;
   position: relative;
   box-shadow: 0 -0.25rem 0.25rem rgba(204, 204, 204, 0.3);
-  z-index: 1000;
+  z-index: 10;
 }
 .engine-img {
   // cubic-bezier(1, 0.05, 0.1, 1)

admin_2/src/pages/engine/EvaluateSystem.vue

+<template>
+  <div class="grid h-full w-full grid-cols-2 gap-[20px]">
+    <div class="table-item">
+      <DoubleTable
+        title="大厅评价量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+    <div class="table-item">
+      <DoubleTable
+        title="业务评价量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+    <div class="table-item">
+      <DoubleTable
+        title="部门评价量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+    <div class="table-item">
+      <DoubleTable
+        title="个人评价量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import DoubleTable from "./components/DoubleTable.vue";
+export default {
+  components: {
+    DoubleTable,
+  },
+  data() {
+    return {
+      column: [
+        {
+          label: "排序",
+          type: "index",
+          align: "center",
+        },
+        {
+          label: "业务名称",
+          prop: "yewu",
+          align: "center",
+          formatter: (row, column, cellValue) => {
+            if (cellValue) {
+              return <span>{cellValue}</span>;
+            }
+          },
+        },
+        {
+          label: "排队数量",
+          prop: "total",
+          align: "center",
+          formatter: (row, column, cellValue) => {
+            if (cellValue) {
+              return <span class="table-num">{cellValue}</span>;
+            }
+          },
+        },
+      ],
+      tableData: [
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.table-item {
+  width: 100%;
+  padding: 15px;
+  background: #f5fafd;
+  border-radius: 4px;
+}
+.table-num {
+  font-weight: 600;
+  color: var(--primary);
+}
+</style>

admin_2/src/pages/engine/QueueUpSystem.vue

+<template>
+  <div class="grid h-full w-full grid-cols-2 gap-[20px]">
+    <div class="table-item">
+      <DoubleTable
+        title="大厅取号量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+    <div class="table-item">
+      <DoubleTable
+        title="业务取号量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+    <div class="table-item">
+      <DoubleTable
+        title="部门取号量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+    <div class="table-item">
+      <DoubleTable
+        title="个人取号量统计"
+        border
+        :column="column"
+        :tableData="tableData"
+      ></DoubleTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import DoubleTable from "./components/DoubleTable.vue";
+export default {
+  components: {
+    DoubleTable,
+  },
+  data() {
+    return {
+      column: [
+        {
+          label: "排序",
+          type: "index",
+          align: "center",
+        },
+        {
+          label: "业务名称",
+          prop: "yewu",
+          align: "center",
+          formatter: (row, column, cellValue) => {
+            if (cellValue) {
+              return <span>{cellValue}</span>;
+            }
+          },
+        },
+        {
+          label: "排队数量",
+          prop: "total",
+          align: "center",
+          formatter: (row, column, cellValue) => {
+            if (cellValue) {
+              return <span class="table-num">{cellValue}</span>;
+            }
+          },
+        },
+      ],
+      tableData: [
+        {
+          yewu: "排队系统",
+          total: 100,
+        },
+        {
+          yewu: "评价系统",
+          total: 100,
+        },
+        {
+          yewu: "排队系统",
+          total: 100,
+        },
+        {
+          yewu: "排队系统",
+          total: 100,
+        },
+        {
+          yewu: "排队系统",
+          total: 100,
+        },
+        {
+          yewu: "排队系统",
+          total: 100,
+        },
+        {
+          yewu: "排队系统",
+          total: 100,
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.table-item {
+  width: 100%;
+  padding: 15px;
+  background: #f5fafd;
+  border-radius: 4px;
+}
+.table-num {
+  font-weight: 600;
+  color: var(--primary);
+}
+</style>

admin_2/src/pages/engine/components/DoubleTable.vue

+<template>
+  <div class="flex h-full w-full flex-col gap-2">
+    <div class="flex w-full items-center justify-between">
+      <div class="title">
+        {{ title }}
+      </div>
+      <div class="flex gap-4">
+        <el-button type="primary" size="small">导出</el-button>
+        <el-input
+          clearable
+          size="small"
+          style="width: 250px"
+          :placeholder="placeholder"
+          v-model="searchVal"
+        ></el-input>
+        <el-button type="primary" size="small">搜索</el-button>
+      </div>
+    </div>
+    <div class="grid w-full grid-cols-2">
+      <y-table
+        size="small"
+        border
+        :column="column"
+        :tableData="letTableData"
+      ></y-table>
+      <y-table
+        v-if="tableData.length > 5"
+        size="small"
+        border
+        :column="column"
+        :tableData="rightTableData"
+      ></y-table>
+    </div>
+    <div class="flex justify-end">
+      <el-pagination
+        :pager-count="5"
+        background
+        layout="total,prev, pager, next"
+        :total="1000"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Array,
+      default: () => [],
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "请输入业务名称关键字搜索",
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      searchVal: "",
+    };
+  },
+  computed: {
+    letTableData() {
+      let arr = this.tableData.slice(0, 5);
+      while (arr.length < 5) {
+        arr.push(null);
+      }
+      return arr;
+    },
+    rightTableData() {
+      let arr = this.tableData.slice(5, 10);
+      while (arr.length < 5) {
+        arr.push(null);
+      }
+      return arr;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.title {
+  font-weight: 600;
+}
+:deep(.el-table__header-wrapper) {
+  th {
+    background: #e6f1f9;
+  }
+}
+:deep(.el-table) {
+  border-color: #dfe9f2 !important ;
+  th {
+    border-color: #dfe9f2 !important ;
+  }
+}
+</style>

admin_2/src/router/index.js

@@ -43,6 +43,29 @@ const routes = [
           icon: "el-icon-cpu",
           title: "数据引擎",
         },
+        redirect: "/engine/queueupsystem",
+        children: [
+          {
+            path: "/engine/queueupsystem",
+            hideChildrenInMenu: true,
+            hidden: true,
+            component: () => import("@/pages/engine/QueueUpSystem"),
+            meta: {
+              title: "排队取号系统",
+              activeMenu: "/engine",
+            },
+          },
+          {
+            path: "/engine/evaluatesystem",
+            hideChildrenInMenu: true,
+            hidden: true,
+            component: () => import("@/pages/engine/EvaluateSystem"),
+            meta: {
+              title: "评价系统",
+              activeMenu: "/engine",
+            },
+          },
+        ],
       },
       {
         path: "/market",