feature/静态页面添加

src/components/Pagination/index.vue

@@ -9,6 +9,7 @@
       :total="total"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
+      style="float: right"
     />
   </div>
 </template>

src/components/Search/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="body">
+    <div class="itembox">
+      <template v-for="(option, index) in searchOptions" :key="index">
+        <div class="item" v-if="option.type == 'input'">
+          <span class="label">{{ option.label }}:</span>
+          <el-input
+            class="tep"
+            model="input"
+            placeholder="Please input"
+            size="small"
+          />
+        </div>
+        <div class="item" v-if="option.type == 'select'">
+          <span class="label">{{ option.label }}:</span>
+
+          <el-select
+            class="tep"
+            v-model="value"
+            size="small"
+            placeholder="Select"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="item" v-if="option.type == 'daterange'">
+          <span class="label">{{ option.label }}:</span>
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            class="tep"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            size="small"
+          />
+        </div>
+      </template>
+    </div>
+    <div class="oprea">
+      <el-button type="primary" size="small" class="btn">查询</el-button>
+      <el-button class="btn" size="small">重置</el-button>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  searchOptions: {
+    default: [],
+    type: Array,
+  },
+});
+const searchForm = ref({});
+defineExpose({ searchForm });
+</script>
+<style lang="scss" scoped>
+.body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  margin-bottom: 20px;
+  .itembox {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 20px;
+    .item {
+      display: flex;
+      align-items: center;
+      width: 260px;
+      .label {
+        white-space: nowrap;
+        margin-right: 5px;
+        font-size: 14px;
+      }
+      .tep {
+        width: 260px !important;
+      }
+    }
+  }
+  .oprea {
+    width: 240px;
+    height: 100%;
+  }
+}
+</style>

src/layout/components/NavBar/components/NavbarLeft.vue

@@ -5,6 +5,7 @@
       @toggle-click="toggleSideBar"
     />
     <breadcrumb />
+
   </div>
 </template>
 

src/layout/components/NavBar/index.vue

@@ -9,6 +9,8 @@
 </template>
 
 <style lang="scss" scoped>
+
+
 .navbar-container {
   @apply flex-x-between;
 

src/layout/components/Sidebar/components/SidebarMenu.vue

@@ -3,9 +3,9 @@
   <el-menu
     :default-active="currentRoute.path"
     :collapse="!appStore.sidebar.opened"
-    :background-color="variables['menu-background']"
-    :text-color="variables['menu-text']"
-    :active-text-color="variables['menu-active-text']"
+    background-color="white"
+    text-color="rgba(0, 0, 0,0.8)"
+    active-text-color="rgb(59, 124, 255)"
     :unique-opened="false"
     :collapse-transition="false"
     :mode="layout === 'top' ? 'horizontal' : 'vertical'"
@@ -62,3 +62,9 @@ function resolvePath(routePath: string) {
   return fullPath;
 }
 </script>
+
+<style lang="scss">
+.is-active {
+  background-color: rgb(36, 85, 184);
+}
+</style>

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -132,7 +132,12 @@ function resolvePath(routePath: string) {
   return fullPath;
 }
 </script>
-
+<style lang="scss" scoped>
+.is-active {
+  background-color: rgb(208, 224, 255);
+  border-right: 5px solid rgb(63, 124, 247) !important;
+}
+</style>
 <style lang="scss">
 .hideSidebar {
   .submenu-title-noDropdown {

src/layout/components/Sidebar/components/SidebarMixTopMenu.vue

@@ -8,6 +8,7 @@
       :text-color="variables['menu-text']"
       :active-text-color="variables['menu-active-text']"
       @select="handleMenuSelect"
+      style="display: flex; justify-content: center"
     >
       <el-menu-item
         v-for="route in mixTopMenus"
@@ -20,7 +21,7 @@
           <!--            :icon-class="route.meta.icon"-->
           <!--          />-->
           <el-icon v-if="route.meta && route.meta.icon">
-            <component :is="route.meta.icon"></component>
+            <component :is="route.meta.icon" />
           </el-icon>
           <span v-if="route.path === '/'"> 首页 </span>
           <template v-else>
@@ -81,6 +82,15 @@ const goToFirstMenu = (menus: RouteRecordRaw[]) => {
 onMounted(() => {
   mixTopMenus.value = permissionStore.routes.filter(
     (item) => !item.meta || !item.meta.hidden
-  );
+  ).reverse();
 });
 </script>
+
+<style lang="scss" scoped>
+.el-menu-item {
+  border-bottom: 5px solid rgb(65, 120, 231) !important;
+}
+.is-active {
+  border-bottom: 5px solid rgb(255, 169, 88) !important;
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -2,9 +2,9 @@
   <div :class="{ 'has-logo': sidebarLogo }">
     <!--混合布局-->
     <div class="flex w-full" v-if="layout == 'mix'">
-      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+      <!-- <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" /> -->
       <SidebarMixTopMenu class="flex-1" />
-      <NavbarRight />
+      <NavbarRight style="position: absolute; right: 0; top: 0" />
     </div>
     <!--左侧布局 || 顶部布局 -->
     <template v-else>

src/layout/index.vue

@@ -14,12 +14,12 @@
     <div v-if="layout === 'mix'" class="mix-container">
       <div class="mix-container__left">
         <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
-        <div class="sidebar-toggle">
+        <!-- <div class="sidebar-toggle">
           <hamburger
             :is-active="appStore.sidebar.opened"
             @toggle-click="toggleSidebar"
           />
-        </div>
+        </div> -->
       </div>
 
       <div :class="{ hasTagsView: showTagsView }" class="main-container">
@@ -106,6 +106,7 @@ function toggleSidebar() {
 </script>
 
 <style lang="scss" scoped>
+
 .fixed-header {
   position: fixed;
   top: 0;
@@ -221,14 +222,14 @@ function toggleSidebar() {
         width: 100%;
         height: 50px;
         line-height: 50px;
-        box-shadow: 0 0 6px -2px var(--el-color-primary);
+        box-shadow: 0 0 6px -2px white;
 
         div:hover {
-          background-color: var(--menu-background);
+          color: white !important;
         }
 
         :deep(svg) {
-          color: var(--el-color-primary) !important;
+          color: white !important;
         }
       }
     }
@@ -244,7 +245,9 @@ function toggleSidebar() {
     }
   }
 }
-
+.is-active {
+  color: white !important;
+}
 .hideSidebar {
   .fixed-header {
     left: $sidebar-width-collapsed;

src/main.ts

@@ -29,7 +29,5 @@ setupElIcons(app);
 setupI18n(app);
 // 注册动态路由
 setupPermission();
-
 setupEleAvue(app);
-
 app.use(router).use(print).mount("#app");

src/router/modules/analysis.ts

@@ -19,5 +19,24 @@ export default {
         icon: "Guide",
       },
     },
+    {
+      path: "task",
+      name: "target",
+      meta: {
+        title: "过程能力指标",
+        icon: "Guide",
+      },
+      children: [
+        {
+          path: "task",
+          component: () => import("@/views/analysis/target/aaaa/index.vue"),
+          name: "aaaaa",
+          meta: {
+            title: "aaaaa",
+            icon: "Guide",
+          },
+        },
+      ],
+    },
   ],
 };

src/styles/index.scss

@@ -1,5 +1,12 @@
 @use "./reset";
 
+//蓝色小方块
+.bg {
+  width: 4px;
+  height: 20px;
+  background-color: rgb(26, 122, 240);
+  margin-right: 5px;
+}
 .app-container {
   padding: 10px;
 }
@@ -36,3 +43,10 @@
   background-color: white;
   border-radius: 10px;
 }
+
+//公共样式
+.text {
+  font-size: 14px;
+  margin-bottom: 20px;
+  font-weight: 100;
+}

src/styles/variables.scss

@@ -1,11 +1,11 @@
 /** 全局SCSS变量 */
 
 :root {
-  --menu-background: #304156;
-  --menu-text: #bfcbd9;
-  --menu-active-text: var(--el-menu-active-color);
-  --menu-hover: #263445;
-  --sidebar-logo-background: #2d3748;
+  --menu-background: rgb(65, 120, 231);
+  --menu-text: rgba(255, 255, 255, 0.8);
+  --menu-active-text: white;
+  --menu-hover: rgb(36, 15, 184);
+  --sidebar-logo-background: rgb(65, 120, 231);
 }
 
 /** 暗黑主题 */
@@ -17,10 +17,10 @@ html.dark {
   --sidebar-logo-background: rgb(0 0 0 / 20%);
 }
 
-$menu-background: var(--menu-background); // 菜单背景色
-$menu-text: var(--menu-text); // 菜单文字颜色
-$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
-$menu-hover: var(--menu-hover); // 菜单悬停背景色
+$menu-background: rgb(65, 120, 231); // 菜单背景色
+$menu-text: rgba(255, 255, 255, 0.8); // 菜单文字颜色
+$menu-active-text: rgba(255, 255, 255, 1); // 菜单激活文字颜色
+$menu-hover: rgb(36, 15, 184); // 菜单悬停背景色
 $sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色
 
 $sidebar-width: 210px; // 侧边栏宽度

src/views/analysis/process/index.vue

@@ -236,11 +236,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.text {
-  font-size: 15px;
-  margin-bottom: 20px;
-  font-weight: 100;
-}
 .container {
   width: 100%;
   height: 100%;

src/views/analysis/spc/index.vue

@@ -2,27 +2,97 @@
   <div class="container">
     <div class="infobox">
       <div class="header">
-        <div class="text">工序名称：</div>
-        <el-select v-model="value" placeholder="Select">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
+        <div class="item">
+          <div class="text">产品型号：</div>
+          <el-select v-model="value" size="small" placeholder="Select">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="item">
+          <div class="text">工序名称：</div>
+          <el-select v-model="value" size="small" placeholder="Select">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="item">
+          <div class="text">控制参数：</div>
+          <el-select v-model="value" size="small" placeholder="Select">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
       </div>
       <div class="body">
-        <div class="text">规格上限：1%</div>
-        <div class="text">规格下限：-</div>
-        <div class="text">计量单位：%</div>
-        <div class="text">Xbar-UCL：0.3096</div>
-        <div class="text">Xbar-LCL：0.0071</div>
-        <div class="text">R-UCL:0.5543</div>
-        <div class="text">R-LCL:0</div>
+        <el-scrollbar>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+        </el-scrollbar>
       </div>
     </div>
     <div class="databox">
+      <div class="boxstitle">
+        <div class="boxtitle">
+          <div class="bg"></div>
+          手工录入
+        </div>
+        <div class="boxinfo">
+          <div class="item">
+            <div class="lable">组数:</div>
+            <el-input placeholder="Please input" size="small" />
+          </div>
+          <div class="item">
+            <div class="lable">样本数:</div>
+            <el-input placeholder="Please input" size="small" />
+          </div>
+        </div>
+      </div>
       <div class="box">
         <div class="title">
           <div class="bg"></div>
@@ -248,11 +318,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.text {
-  font-size: 15px;
-  margin-bottom: 20px;
-  font-weight: 100;
-}
 .container {
   width: 100%;
   height: 100%;
@@ -260,21 +325,35 @@ onMounted(() => {
   background-color: white;
   .infobox {
     width: 200px;
-
+    display: flex;
+    flex-direction: column;
     .header {
-      height: 120px;
       border-bottom: 2px solid #00000010;
       padding: 20px;
+      .item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        .text {
+          white-space: nowrap;
+          line-height: 100%;
+          display: inline-block;
+          margin-bottom: 0;
+        }
+      }
     }
     .body {
       padding: 20px;
+      flex: 1;
+      height: calc(100% - 300px);
     }
   }
   .databox {
     flex: 1;
     border-left: 2px solid #00000010;
+    height: 100%;
     .box {
-      height: 50%;
+      height: calc(50% - 40px);
       padding: 5px 20px;
       display: flex;
       flex-direction: column;
@@ -282,17 +361,37 @@ onMounted(() => {
         height: 30px;
         display: flex;
         align-items: center;
-        .bg {
-          width: 8px;
-          height: 20px;
-          background-color: blue;
-          margin-right: 5px;
-        }
       }
       .info {
         flex: 1;
       }
     }
+    .boxstitle {
+      height: 80px;
+      padding: 5px 20px;
+      display: flex;
+      flex-direction: column;
+      .boxtitle {
+        height: 30px;
+        display: flex;
+        align-items: center;
+      }
+      .boxinfo {
+        display: flex;
+        .item {
+          width: 260px;
+          display: flex;
+          align-items: center;
+          margin: 10px;
+
+          .lable {
+            margin-right: 5px;
+            white-space: nowrap;
+            font-size: 15px;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/views/analysis/target/aaaa/index.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="container">
+    <div class="infobox">
+      <div class="header">
+        <div class="item">
+          <div class="text">产品型号：</div>
+          <el-select v-model="value" size="small" placeholder="Select">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="item">
+          <div class="text">工序名称：</div>
+          <el-select v-model="value" size="small" placeholder="Select">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="item">
+          <div class="text">控制参数：</div>
+          <el-select v-model="value" size="small" placeholder="Select">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+      <div class="body">
+        <el-scrollbar>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+          <div class="text">规格上限：1%</div>
+          <div class="text">规格下限：-</div>
+          <div class="text">计量单位：%</div>
+          <div class="text">Xbar-UCL：0.3096</div>
+          <div class="text">Xbar-LCL：0.0071</div>
+          <div class="text">R-UCL:0.5543</div>
+          <div class="text">R-LCL:0</div>
+        </el-scrollbar>
+      </div>
+    </div>
+    <div class="databox">
+      <div class="boxstitle">
+        <div class="boxtitle">
+          <div class="bg"></div>
+          手工录入
+        </div>
+        <div class="boxinfo">
+          <div class="item">
+            <div class="lable">组数:</div>
+            <el-input placeholder="Please input" size="small" />
+          </div>
+          <div class="item">
+            <div class="lable">样本数:</div>
+            <el-input placeholder="Please input" size="small" />
+          </div>
+        </div>
+      </div>
+      <div class="box">
+        <div class="title">
+          <div class="bg"></div>
+          样本数据录入
+        </div>
+        <div class="info">
+          <el-table
+            :data="tableData"
+            border
+            :style="{ height: maxHeight + 'px' }"
+          >
+            <el-table-column prop="date" label="Date" width="180" />
+            <el-table-column prop="name" label="Name" width="180" />
+            <el-table-column prop="address" label="Address" />
+          </el-table>
+        </div>
+      </div>
+      <div class="box">
+        <div class="title">
+          <div class="bg"></div>
+          控制图绘制
+          <el-button
+            type="primary"
+            v-print="'#charts'"
+            style="margin-left: 10px; height: 25px"
+            >打 印</el-button
+          >
+        </div>
+        <div class="info">
+          <div
+            id="charts"
+            :style="{ height: maxHeight + 'px', width: maxWidth + 'px' }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+const value = ref("");
+const options = [
+  {
+    value: "1",
+    label: "调阻1",
+  },
+  {
+    value: "23",
+    label: "调阻2",
+  },
+];
+const maxHeight = ref(null);
+const maxWidth = ref(null);
+const charts = shallowRef(null);
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const chartsOption = ref({
+  title: [
+    {
+      text: "调阻精度的Xbar-R控制图",
+      left: "40%",
+    },
+    {
+      text: "样",
+      left: "4%",
+      top: "28%",
+    },
+    {
+      text: "本",
+      left: "4%",
+      top: "35%",
+    },
+    {
+      text: "均",
+      left: "4%",
+      top: "42%",
+    },
+    {
+      text: "值",
+      left: "4%",
+      top: "49%",
+    },
+  ],
+  toolbox: {
+    feature: {
+      saveAsImage: {},
+    },
+  },
+  xAxis: [
+    {
+      type: "category",
+      boundaryGap: false,
+      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+    },
+  ],
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: "line",
+      endLabel: {
+        show: true,
+      },
+    },
+  ],
+});
+defineOptions({
+  name: "Dashboard",
+  inheritAttrs: false,
+});
+const setHeight = () => {
+  maxHeight.value = document.querySelector(".info").clientHeight;
+  maxWidth.value = document.querySelector(".info").clientWidth;
+};
+
+onMounted(() => {
+  setHeight();
+  nextTick(() => {
+    charts.value = echarts.init(document.getElementById("charts"));
+    charts.value.setOption(chartsOption.value);
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: white;
+  .infobox {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    .header {
+      border-bottom: 2px solid #00000010;
+      padding: 20px;
+      .item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        .text {
+          white-space: nowrap;
+          line-height: 100%;
+          display: inline-block;
+          margin-bottom: 0;
+        }
+      }
+    }
+    .body {
+      padding: 20px;
+      flex: 1;
+      height: calc(100% - 300px);
+    }
+  }
+  .databox {
+    flex: 1;
+    border-left: 2px solid #00000010;
+    height: 100%;
+    .box {
+      height: calc(50% - 40px);
+      padding: 5px 20px;
+      display: flex;
+      flex-direction: column;
+      .title {
+        height: 30px;
+        display: flex;
+        align-items: center;
+      }
+      .info {
+        flex: 1;
+      }
+    }
+    .boxstitle {
+      height: 80px;
+      padding: 5px 20px;
+      display: flex;
+      flex-direction: column;
+      .boxtitle {
+        height: 30px;
+        display: flex;
+        align-items: center;
+      }
+      .boxinfo {
+        display: flex;
+        .item {
+          width: 260px;
+          display: flex;
+          align-items: center;
+          margin: 10px;
+
+          .lable {
+            margin-right: 5px;
+            white-space: nowrap;
+            font-size: 15px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/statistic/report/index.vue

@@ -1,12 +1,163 @@
 <template>
-  <div>src/views/statistic/report /index</div>
-
+  <div class="container">
+    <div class="header">
+      <Search :searchOptions="searchForm" />
+    </div>
+    <div class="table">
+      <el-table
+        :data="tableData"
+        border
+        :style="{ height: maxHeight - 40 + 'px' }"
+      >
+        <el-table-column prop="date" label="Date" width="180" />
+        <el-table-column prop="name" label="Name" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+      <Pagination />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
-
+<script setup>
+import Search from "@/components/Search/index.vue";
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const searchForm = [
+  {
+    label: "创建时间",
+    prop: "sss",
+    type: "daterange",
+  },
+  {
+    label: "报告编号",
+    prop: "sss",
+    type: "input",
+  },
+  {
+    label: "报告类型",
+    prop: "sss",
+    type: "select",
+  },
+];
+const maxHeight = ref(null);
+const setHeight = () => {
+  maxHeight.value = document.querySelector(".table").clientHeight;
+};
+onMounted(() => {
+  setHeight();
+});
 </script>
 
 <style scoped lang="scss">
-
+.container {
+  background-color: white;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    height: auto;
+  }
+  .table {
+    flex: 1;
+    padding-bottom: 20px;
+  }
+}
 </style>

src/views/statistic/statistic/index.vue

@@ -1,12 +1,316 @@
 <template>
-  <div>src/views/statistic/statistic /index</div>
-
+  <div class="container">
+    <div class="infobox">
+      <el-scrollbar>
+        <div class="header">
+          <div class="text">选择统计时间段：</div>
+          <div style="display: flex">
+            <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="截止时间"
+              size="small"
+            />
+          </div>
+        </div>
+        <div class="header">
+          <div class="text">选择统计维度：</div>
+          <div>
+            <el-radio-group v-model="radio" style="display: flex">
+              <el-radio size="small" :value="3">天</el-radio>
+              <el-radio size="small" :value="6">周</el-radio>
+              <el-radio size="small" :value="9">月</el-radio>
+              <el-radio size="small" :value="12">年</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="header">
+          <div class="text">选择统计维度：</div>
+          <el-tree
+            ref="treeRef"
+            :data="data"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            highlight-current
+            :props="defaultProps"
+          />
+        </div>
+        <div class="header" style="border-bottom: 0px">
+          <div class="text">选择统计指标：</div>
+          <el-tree
+            ref="treeRef"
+            :data="data1"
+            show-checkbox
+            default-expand-all
+            node-key="id"
+            highlight-current
+            :props="defaultProps"
+          />
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="databox">
+      <div class="box">
+        <div class="boxheader">
+          <div>
+            <el-button type="primary" class="btn">统计查询</el-button>
+            <el-button class="btn">重置</el-button>
+          </div>
+          <el-button class="btn">导出</el-button>
+        </div>
+        <div class="info">
+          <el-table
+            :data="tableData"
+            border
+            :style="{ height: maxHeight + 'px' }"
+          >
+            <el-table-column prop="date" label="Date" width="180" />
+            <el-table-column prop="name" label="Name" width="180" />
+            <el-table-column prop="address" label="Address" />
+          </el-table>
+        </div>
+        <div class="footer">
+          <Pagination />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
+import * as echarts from "echarts";
+import Pagination from "@/components/Pagination/index.vue";
+const value = ref("");
+const data = [
+  {
+    id: 1,
+    label: "车间1",
+    children: [
+      {
+        id: 4,
+        label: "Level two 1-1",
+        children: [
+          {
+            id: 9,
+            label: "Level three 1-1-1",
+          },
+          {
+            id: 10,
+            label: "Level three 1-1-2",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: "Level one 2",
+    children: [
+      {
+        id: 5,
+        label: "Level two 2-1",
+      },
+      {
+        id: 6,
+        label: "Level two 2-2",
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: "Level one 3",
+    children: [
+      {
+        id: 7,
+        label: "Level two 3-1",
+      },
+      {
+        id: 8,
+        label: "Level two 3-2",
+      },
+    ],
+  },
+];
+const data1 = [
+  {
+    id: 1,
+    label: "车间1",
+  },
+  {
+    id: 2,
+    label: "合格率",
+  },
+  {
+    id: 3,
+    label: "PPM",
+  },
+  {
+    id: 4,
+    label: "Cpk",
+  },
+];
+const maxHeight = ref(null);
+const maxWidth = ref(null);
+
+const value1 = ref(null);
+const radio = ref(3);
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+
+defineOptions({
+  name: "Dashboard",
+  inheritAttrs: false,
+});
+const setHeight = () => {
+  maxHeight.value = document.querySelector(".info").clientHeight;
+  maxWidth.value = document.querySelector(".info").clientWidth;
+};
 
+onMounted(() => {
+  setHeight();
+});
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.btn {
+  margin-left: 10px;
+  height: 25px;
+}
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: white;
+  .infobox {
+    width: 200px;
 
+    .header {
+      border-bottom: 2px solid #00000010;
+      padding: 20px;
+    }
+    .body {
+      padding: 20px;
+    }
+  }
+  .databox {
+    flex: 1;
+    border-left: 2px solid #00000010;
+    .box {
+      height: 100%;
+      padding: 5px 20px;
+      display: flex;
+      flex-direction: column;
+      .boxheader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 10px 0px 10px -10px;
+      }
+      .info {
+        flex: 1;
+      }
+    }
+  }
+}
+.el-radio {
+  margin-right: 8px;
+}
 </style>