From 3ab7f108cf49648a418a0e0acd4a05ea5bab9e8c Mon Sep 17 00:00:00 2001
From: monanxiao <monanxiao@qq.com>
Date: Wed, 16 Oct 2024 18:01:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=97=B6=E9=97=B4=E6=AE=B5?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E3=80=81=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=EF=BC=8C=E5=8B=98=E5=AF=9F=E4=BA=BA=E5=91=98=E3=80=81=E7=BB=B4?=
 =?UTF-8?q?=E4=BF=AE=E4=BA=BA=E5=91=98=E6=8E=92=E7=8F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/scheduling.js           |   4 +-
 src/api/modules/schedulingTime.js       |   4 +-
 src/layout/index.vue                    |   2 +-
 src/mock/permission.js                  |  11 +-
 src/router/originalRoutingTable.js      |  18 +
 src/views/about/index.vue               |   1 -
 src/views/directives/Drag.vue           |  39 --
 src/views/directives/copy.vue           |  17 -
 src/views/directives/debounceDirect.vue |  14 -
 src/views/directives/longPress.vue      |  14 -
 src/views/directives/throttle.vue       |  14 -
 src/views/echarts/histogram.vue         | 163 -----
 src/views/echarts/line.vue              |  88 ---
 src/views/echarts/map/baidumap.vue      |  40 --
 src/views/echarts/map/gaodemap.vue      |  44 --
 src/views/echarts/radar.vue             |  70 ---
 src/views/engineer/maintain.vue         |  63 +-
 src/views/engineer/reconnaissance.vue   |  77 +--
 src/views/goods/index.vue               |  33 +-
 src/views/order/index.vue               |  21 +-
 src/views/scheduling/maintain.vue       | 753 +++++++++++-----------
 src/views/scheduling/reconnaissance.vue | 804 ++++++++----------------
 src/views/scheduling/test.vue           | 405 ++++++++++++
 src/views/scheduling/timeFrame.vue      | 320 ++++++++++
 src/views/system/activity.vue           |  48 +-
 src/views/system/homeSite.vue           |  12 +-
 src/views/users/index.vue               |  46 +-
 src/views/users/reconnaissance.vue      |  75 +--
 28 files changed, 1537 insertions(+), 1663 deletions(-)
 delete mode 100644 src/views/about/index.vue
 delete mode 100644 src/views/directives/Drag.vue
 delete mode 100644 src/views/directives/copy.vue
 delete mode 100644 src/views/directives/debounceDirect.vue
 delete mode 100644 src/views/directives/longPress.vue
 delete mode 100644 src/views/directives/throttle.vue
 delete mode 100644 src/views/echarts/histogram.vue
 delete mode 100644 src/views/echarts/line.vue
 delete mode 100644 src/views/echarts/map/baidumap.vue
 delete mode 100644 src/views/echarts/map/gaodemap.vue
 delete mode 100644 src/views/echarts/radar.vue
 create mode 100644 src/views/scheduling/test.vue
 create mode 100644 src/views/scheduling/timeFrame.vue

diff --git a/src/api/modules/scheduling.js b/src/api/modules/scheduling.js
index 32b6844..377fdb3 100644
--- a/src/api/modules/scheduling.js
+++ b/src/api/modules/scheduling.js
@@ -1,11 +1,11 @@
 import service from "../request.js";
 const API_BASE_URL = '/schedule';
 
-// 添加排班
+// 获取排班人员吗
 export function getScheduleList(params) {
     return service({
         method: "get",
-        url: `${API_BASE_URL}/${params.timeQuantumId}`,
+        url: `${API_BASE_URL}/${params.timeQuantumId}?&date=${params.date}&roleId=${params.roleId}`,
         data: params
     });
 }
diff --git a/src/api/modules/schedulingTime.js b/src/api/modules/schedulingTime.js
index 98bc4b8..58d5fd5 100644
--- a/src/api/modules/schedulingTime.js
+++ b/src/api/modules/schedulingTime.js
@@ -28,9 +28,9 @@ export function updateQuantum(params) {
 }
 
 // 删除排班时段
-export function delQuantum(id) {
+export function delQuantum(params) {
     return service({
         method: "delete",
-        url: `${API_BASE_URL}/`+id
+        url: `${API_BASE_URL}/${params.id}`
     });
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index beb65b8..a8ba0e3 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,7 +8,7 @@
         <Header></Header>
       </el-header>
       <el-main>
-        <div class="main-tabs flx-row" v-if="themeConfig.istags">
+        <div class="main-tabs flx-row p10" v-if="themeConfig.istags">
           <tabs></tabs>
         </div>
 
diff --git a/src/mock/permission.js b/src/mock/permission.js
index a73405f..4dbbc11 100644
--- a/src/mock/permission.js
+++ b/src/mock/permission.js
@@ -82,6 +82,11 @@ export const menuListItem = [
     url: "/scheduling",
     icon: "Calendar",
     children: [
+      {
+        title: "排班时段",
+        url: "/timeFrame",
+        icon: "Menu",
+      },
       {
         title: "勘察工程师",
         url: "/reconnaissanceScheduling",
@@ -91,7 +96,11 @@ export const menuListItem = [
         title: "维修工程师",
         url: "/maintainScheduling",
         icon: "Menu",
-      }
+      },{
+        title: "排班测试",
+        url: "/testScheduling",
+        icon: "Menu",
+      },
     ]
   },
   {
diff --git a/src/router/originalRoutingTable.js b/src/router/originalRoutingTable.js
index 4158d1c..5bb6dd0 100644
--- a/src/router/originalRoutingTable.js
+++ b/src/router/originalRoutingTable.js
@@ -191,6 +191,15 @@ const routerList = [
       name: "工程师审核",
     },
     children: [
+      {
+        path: "/timeFrame",
+        name: "timeFrame",
+        component: () => import("../views/scheduling/timeFrame.vue"),
+        meta: {
+          requiresAuth: true,
+          name: "排班时段",
+        },
+      },
       {
         path: "/reconnaissanceScheduling",
         name: "reconnaissanceScheduling",
@@ -209,6 +218,15 @@ const routerList = [
           name: "维修人员排班",
         },
       },
+      {
+        path: "/testScheduling",
+        name: "testScheduling",
+        component: () => import("../views/scheduling/test.vue"),
+        meta: {
+          requiresAuth: true,
+          name: "人员排班测试",
+        },
+      },
     ],
   },
 
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
deleted file mode 100644
index f8678e2..0000000
--- a/src/views/about/index.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template>关于我</template>
diff --git a/src/views/directives/Drag.vue b/src/views/directives/Drag.vue
deleted file mode 100644
index 577ef7c..0000000
--- a/src/views/directives/Drag.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-card>
-    <span class="box-card-title">拖拽🍻🍻🍻🍵🍵🍵</span>
-    <div class="box-card-content">
-      <div v-draggable class="drag-box flx-center text">我可以拖拽哦~</div>
-      <div
-        v-draggable
-        class="drag-box flx-center text"
-        style="background: #eba300; width: 200px; height: 200px"
-      >
-        我可以拖拽哦~
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped>
-.box-card-title {
-  padding: 10px;
-  // display: block;
-}
-.box-card-content {
-  width: 100%;
-  height: 80vh;
-  background-color: #fff;
-
-  position: relative;
-  .drag-box {
-    position: absolute;
-    top: 110px;
-    width: 300px;
-    height: 300px;
-    color: #fff;
-    background: #bad80a;
-  }
-}
-</style>
diff --git a/src/views/directives/copy.vue b/src/views/directives/copy.vue
deleted file mode 100644
index 8955c19..0000000
--- a/src/views/directives/copy.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <el-card shadow="never">
-    <div>复制指令 🍤🍤🍤🍤🍤🍤</div>
-    <br />
-    <el-input v-model="input3" placeholder="复制指令 🍤🍤🍤🍤🍤" style="width: 100%">
-      <template #append>
-        <el-button :icon="CopyDocument" v-copy="input3">复制</el-button>
-      </template>
-    </el-input>
-  </el-card>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { CopyDocument } from "@element-plus/icons-vue";
-const input3 = ref("复制内容复制内容复制内容复制内容复制内容");
-</script>
diff --git a/src/views/directives/debounceDirect.vue b/src/views/directives/debounceDirect.vue
deleted file mode 100644
index c9971c7..0000000
--- a/src/views/directives/debounceDirect.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <el-card shadow="never">
-    <div class="card-title">防抖指令 🍍🍓🍓🍓🍓</div>
-    <br />
-    <el-button type="primary" v-debounce="debounceClick">防抖按钮(1秒后执行)</el-button>
-  </el-card>
-</template>
-
-<script setup>
-import { ElMessage } from "element-plus";
-const debounceClick = () => {
-  ElMessage.success("我是防抖指令");
-};
-</script>
diff --git a/src/views/directives/longPress.vue b/src/views/directives/longPress.vue
deleted file mode 100644
index 664fea6..0000000
--- a/src/views/directives/longPress.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <el-card shadow="never">
-    <div class="card-title">长按指令 🍍🍓🍓🍓🍓</div>
-    <br />
-    <el-button type="primary" v-longPress="debounceClick">长按指令</el-button>
-  </el-card>
-</template>
-
-<script setup>
-import { ElMessage } from "element-plus";
-const debounceClick = () => {
-  ElMessage.success("我是长按指令");
-};
-</script>
diff --git a/src/views/directives/throttle.vue b/src/views/directives/throttle.vue
deleted file mode 100644
index 9098d86..0000000
--- a/src/views/directives/throttle.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <el-card shadow="never">
-    <div class="card-title">节流指令 🍍🍓🍓🍓🍓</div>
-    <br />
-    <el-button type="primary" v-throttle="throttleClick">节流指令</el-button>
-  </el-card>
-</template>
-
-<script setup>
-import { ElMessage } from 'element-plus'
-const throttleClick = () => {
-  ElMessage.success('我是节流指令')
-}
-</script>
diff --git a/src/views/echarts/histogram.vue b/src/views/echarts/histogram.vue
deleted file mode 100644
index 91ecb24..0000000
--- a/src/views/echarts/histogram.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-  <el-card style="height: 85vh">
-    <div id="histogram" style="width: 100%; height: 80vh"></div>
-  </el-card>
-</template>
-
-<script setup>
-import * as echarts from 'echarts'
-import { onMounted } from 'vue'
-
-const getHistorgram = () => {
-  document.getElementById('histogram').setAttribute('_echarts_instance_', '')
-  var chartDom = document.getElementById('histogram')
-  var myChart = echarts.init(chartDom)
-  let app = {}
-  var option
-  const categories = (function () {
-    let now = new Date()
-    let res = []
-    let len = 10
-    while (len--) {
-      res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
-      now = new Date(+now - 2000)
-    }
-    return res
-  })()
-  const categories2 = (function () {
-    let res = []
-    let len = 10
-    while (len--) {
-      res.push(10 - len - 1)
-    }
-    return res
-  })()
-  const data = (function () {
-    let res = []
-    let len = 10
-    while (len--) {
-      res.push(Math.round(Math.random() * 1000))
-    }
-    return res
-  })()
-  const data2 = (function () {
-    let res = []
-    let len = 0
-    while (len < 10) {
-      res.push(+(Math.random() * 10 + 5).toFixed(1))
-      len++
-    }
-    return res
-  })()
-  option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#283b56',
-        },
-      },
-    },
-    // legend: {},
-    // toolbox: {
-    //   show: true,
-    //   feature: {
-    //     dataView: { readOnly: false },
-    //     restore: {},
-    //     saveAsImage: {},
-    //   },
-    // },
-    dataZoom: {
-      show: false,
-      start: 0,
-      end: 100,
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: true,
-        data: categories,
-      },
-      {
-        type: 'category',
-        boundaryGap: true,
-        data: categories2,
-      },
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        scale: true,
-        name: '价格',
-        max: 30,
-        min: 0,
-        boundaryGap: [0.2, 0.2],
-      },
-      {
-        type: 'value',
-        scale: true,
-        name: '订单数',
-        max: 1200,
-        min: 0,
-        boundaryGap: [0.2, 0.2],
-      },
-    ],
-    series: [
-      {
-        name: 'Dynamic Bar',
-        type: 'bar',
-        xAxisIndex: 1,
-        yAxisIndex: 1,
-        data: data,
-      },
-      {
-        name: 'Dynamic Line',
-        type: 'line',
-        data: data2,
-      },
-    ],
-  }
-  app.count = 11
-  setInterval(function () {
-    let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
-    data.shift()
-    data.push(Math.round(Math.random() * 1000))
-    data2.shift()
-    data2.push(+(Math.random() * 10 + 5).toFixed(1))
-    categories.shift()
-    categories.push(axisData)
-    categories2.shift()
-    categories2.push(app.count++)
-    myChart.setOption({
-      xAxis: [
-        {
-          data: categories,
-        },
-        {
-          data: categories2,
-        },
-      ],
-      series: [
-        {
-          data: data,
-        },
-        {
-          data: data2,
-        },
-      ],
-    })
-  }, 2100)
-
-  option && myChart.setOption(option)
-  window.onresize = () => {
-    myChart.resize()
-  }
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    getHistorgram()
-  }, 1000)
-})
-</script>
diff --git a/src/views/echarts/line.vue b/src/views/echarts/line.vue
deleted file mode 100644
index 8bcd612..0000000
--- a/src/views/echarts/line.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <el-card style="height: 85vh">
-    <div id="line" style="width: 100%; height: 80vh"></div>
-  </el-card>
-</template>
-
-<script setup>
-import * as echarts from 'echarts'
-import { onMounted } from 'vue'
-
-const getHistorgram = () => {
-  document.getElementById('line').setAttribute('_echarts_instance_', '')
-  var chartDom = document.getElementById('line')
-  var myChart = echarts.init(chartDom)
-  let app = {}
-  var option = {
-    tooltip: {
-      trigger: 'axis',
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        formatter: '{value} °C',
-      },
-    },
-    series: [
-      {
-        name: 'Highest',
-        type: 'line',
-        data: [10, 11, 13, 11, 12, 12, 9],
-        markPoint: {
-          data: [
-            { type: 'max', name: 'Max' },
-            { type: 'min', name: 'Min' },
-          ],
-        },
-        markLine: {
-          data: [{ type: 'average', name: 'Avg' }],
-        },
-      },
-      {
-        name: 'Lowest',
-        type: 'line',
-        data: [1, -2, 2, 5, 3, 2, 0],
-        markPoint: {
-          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
-        },
-        markLine: {
-          data: [
-            { type: 'average', name: 'Avg' },
-            [
-              {
-                symbol: 'none',
-                x: '90%',
-                yAxis: 'max',
-              },
-              {
-                symbol: 'circle',
-                label: {
-                  position: 'start',
-                  formatter: 'Max',
-                },
-                type: 'max',
-                name: '最高点',
-              },
-            ],
-          ],
-        },
-      },
-    ],
-  }
-  option && myChart.setOption(option)
-  window.onresize = () => {
-    myChart.resize()
-  }
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    getHistorgram()
-  }, 1000)
-})
-</script>
diff --git a/src/views/echarts/map/baidumap.vue b/src/views/echarts/map/baidumap.vue
deleted file mode 100644
index a008e73..0000000
--- a/src/views/echarts/map/baidumap.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <el-card>
-    <div id="container">111</div>
-  </el-card>
-</template>
-
-<script setup>
-import { onMounted } from "vue";
-const initMap = () => {
-  var map = new BMapGL.Map("container"); // 创建地图实例
-  var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
-  var marker = new BMapGL.Marker(point); // 创建标注
-  map.addOverlay(marker);
-  map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
-  map.enableScrollWheelZoom(true);
-  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
-  map.addControl(scaleCtrl);
-  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
-  map.addControl(zoomCtrl);
-  var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
-  map.addControl(cityCtrl);
-  map.addEventListener("click", function (e) {
-    // 拿到点击地图上这一点的经纬度
-    // alert(e.point.lng + ", " + e.point.lat);
-    // 让地图中心平滑移动到点击的点
-    map.panTo(new BMap.Point(e.point.lng, e.point.lat));
-  });
-};
-
-onMounted(() => {
-  // initMap();
-});
-</script>
-
-<style lang="scss" scoped>
-#container {
-  width: 100%;
-  height: 85vh;
-}
-</style>
diff --git a/src/views/echarts/map/gaodemap.vue b/src/views/echarts/map/gaodemap.vue
deleted file mode 100644
index eaa64e6..0000000
--- a/src/views/echarts/map/gaodemap.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <el-card>
-    <div id="gaodeMap">111</div>
-  </el-card>
-</template>
-
-<script setup>
-import { nextTick, onMounted } from "vue";
-const initGaoMap = () => {
-  var map = new AMap.Map("gaodeMap", {
-    zoom: 11, //级别
-    center: [116.397428, 39.90923], //中心点坐标
-    viewMode: "2D", //使用3D视图
-  });
-  // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
-  map.addControl(new AMap.ToolBar());
-
-  // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
-  map.addControl(new AMap.Scale());
-
-  // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
-  map.addControl(new AMap.HawkEye({ isOpen: true }));
-
-  // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
-  // map.addControl(new AMap.MapType())
-
-  // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
-  // map.addControl(new AMap.Geolocation())
-  map.setFitView();
-};
-
-onMounted(() => {
-  nextTick(() => {
-    // initGaoMap()
-  });
-});
-</script>
-
-<style lang="scss" scoped>
-#gaodeMap {
-  width: 100%;
-  height: 85vh;
-}
-</style>
diff --git a/src/views/echarts/radar.vue b/src/views/echarts/radar.vue
deleted file mode 100644
index 3966816..0000000
--- a/src/views/echarts/radar.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <el-card style="height: 85vh">
-    <div id="radar" style="width: 100%; height: 80vh"></div>
-  </el-card>
-</template>
-
-<script setup>
-import * as echarts from 'echarts'
-import { onMounted } from 'vue'
-
-const getHistorgram = () => {
-  document.getElementById('radar').setAttribute('_echarts_instance_', '')
-  var chartDom = document.getElementById('radar')
-  var myChart = echarts.init(chartDom)
-  let app = {}
-  var option = {
-    color: ['#33ccff ', '#ff99cc'],
-    radar: {
-      // shape: 'circle',
-      indicator: [
-        { name: '体重', max: 6500 },
-        { name: '打败', max: 16000 },
-        { name: '完成目标', max: 30000 },
-        { name: '身体年龄', max: 38000 },
-        { name: '运动量', max: 52000 },
-        // { name: 'Marketing', max: 25000 },
-      ],
-    },
-    series: [
-      {
-        name: 'Budget vs spending',
-        type: 'radar',
-        data: [
-          {
-            value: [4200, 3000, 20000, 35000, 50000, 18000],
-            name: 'Allocated Budget',
-          },
-          {
-            value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: 'Actual Spending',
-            areaStyle: {
-              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-                {
-                  color: 'rgba(255, 145, 124, 0.1)',
-                  offset: 0,
-                },
-                {
-                  color: '#ff99cc ',
-                  offset: 1,
-                },
-              ]),
-            },
-          },
-        ],
-      },
-    ],
-  }
-
-  option && myChart.setOption(option)
-  window.onresize = () => {
-    myChart.resize()
-  }
-}
-
-onMounted(() => {
-  setTimeout(() => {
-    getHistorgram()
-  }, 1000)
-})
-</script>
diff --git a/src/views/engineer/maintain.vue b/src/views/engineer/maintain.vue
index faf6767..1133002 100644
--- a/src/views/engineer/maintain.vue
+++ b/src/views/engineer/maintain.vue
@@ -1,48 +1,31 @@
 <template>
-  <el-card>
-    <el-row :gutter="10">
-      <el-col :span="4">
+  <el-card class="mt10">
+
+    <el-form :inline="true" :model="formSearch" class="demo-form-inline">
+      <el-form-item label="微信昵称">
         <el-input
             v-model="searchWechatNickname"
             style="max-width: 300px"
             placeholder="模糊查询微信昵称"
             class="input-with-select"
-            @change="searchEvnt"
-        >
-          <template #append>
-            <el-button type="success" @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-      <el-col :span="4">
+        />
+      </el-form-item>
+
+      <el-form-item label="手机号">
         <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询名字"
-            class="input-with-select"
-            @change="searchEvnt"
-        >
-          <template #append>
-            <el-button type="success" @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-      <el-col :span="4">
-        <el-input
-            v-model="searchMobile"
+            v-model="searchWechatNickname"
             style="max-width: 300px"
             placeholder="模糊查询手机号"
             class="input-with-select"
-            @change="searchEvnt"
-        >
-          <template #append>
-            <el-button type="success" @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-    </el-row>
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSearchSubmit">搜索</el-button>
+      </el-form-item>
+
+    </el-form>
 
-    <el-card class="mt10">
       <el-table
           ref="table"
           :data="tableData"
@@ -50,7 +33,7 @@
           :header-cell-style="{ backgroundColor: '#ecf5ff' }"
           border
           stripe
-          style="width: 100%"
+          class="mt10"
       >
         <el-table-column
             label="序号"
@@ -135,7 +118,6 @@
           @current-change="handleCurrentChange"
       />
     </el-card>
-  </el-card>
 </template>
 
 <script setup>
@@ -158,6 +140,13 @@ const queryData = ref({
   size: 10,
 });
 
+const formSearch = ref({
+  goodsName:'',
+  status: ' ',
+  id: '',
+  amount: ''
+});
+
 const initData = () => {
   // 加载示例数据
   // tableData.value = exampleData.value;
@@ -195,7 +184,7 @@ const postFormater = (row, column, cellValue) => {
   }
 }
 
-const searchEvnt = () => {
+const onSearchSubmit = () => {
   console.log('点击搜索');
   queryData.value.keyWord = searchWechatNickname.value || searchName.value || searchMobile.value;
   initData();
diff --git a/src/views/engineer/reconnaissance.vue b/src/views/engineer/reconnaissance.vue
index 71e5b76..3a5c09a 100644
--- a/src/views/engineer/reconnaissance.vue
+++ b/src/views/engineer/reconnaissance.vue
@@ -1,48 +1,31 @@
 <template>
-  <el-card>
-    <el-row :gutter="10">
-      <el-col :span="4">
+  <el-card class="mt10">
+
+    <el-form :inline="true" :model="formSearch" class="demo-form-inline">
+      <el-form-item label="微信昵称">
         <el-input
-          v-model="searchWechatNickname"
-          style="max-width: 300px"
-          placeholder="模糊查询微信昵称"
-          class="input-with-select"
-          @change="searchEvnt"
-        >
-          <template #append>
-            <el-button type="success" @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-      <el-col :span="4">
+        v-model="searchWechatNickname"
+        style="max-width: 300px"
+        placeholder="模糊查询微信昵称"
+        class="input-with-select"
+         />
+      </el-form-item>
+
+      <el-form-item label="手机号">
         <el-input
-          v-model="searchName"
-          style="max-width: 300px"
-          placeholder="模糊查询名字"
-          class="input-with-select"
-          @change="searchEvnt"
-        >
-          <template #append>
-            <el-button type="success" @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-      <el-col :span="4">
-        <el-input
-          v-model="searchMobile"
-          style="max-width: 300px"
-          placeholder="模糊查询手机号"
-          class="input-with-select"
-          @change="searchEvnt"
-        >
-          <template #append>
-            <el-button type="success" @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-    </el-row>
+            v-model="searchWechatNickname"
+            style="max-width: 300px"
+            placeholder="模糊查询手机号"
+            class="input-with-select"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSearchSubmit">搜索</el-button>
+      </el-form-item>
+
+    </el-form>
 
-    <el-card class="mt10">
       <el-table
         ref="table"
         :data="tableData"
@@ -50,7 +33,7 @@
         :header-cell-style="{ backgroundColor: '#ecf5ff' }"
         border
         stripe
-        style="width: 100%"
+        class="mt10"
       >
         <el-table-column
           label="序号"
@@ -135,7 +118,6 @@
         @current-change="handleCurrentChange"
       />
     </el-card>
-  </el-card>
 </template>
 
 <script setup>
@@ -158,6 +140,13 @@ const queryData = ref({
   size: 10,
 });
 
+const formSearch = ref({
+  goodsName:'',
+  status: ' ',
+  id: '',
+  amount: ''
+});
+
 const initData = () => {
   // 加载示例数据
   // tableData.value = exampleData.value;
@@ -195,7 +184,7 @@ const postFormater = (row, column, cellValue) => {
   }
 }
 
-const searchEvnt = () => {
+const onSearchSubmit = () => {
   console.log('点击搜索');
   queryData.value.keyWord = searchWechatNickname.value || searchName.value || searchMobile.value;
   initData();
diff --git a/src/views/goods/index.vue b/src/views/goods/index.vue
index 6d83845..fce0c2f 100644
--- a/src/views/goods/index.vue
+++ b/src/views/goods/index.vue
@@ -1,11 +1,10 @@
 <template>
-  <el-card shadow="never" class="header-card">
-    <el-col :span="4">
-      <el-button type="success" @click="drawer = true;drawerEdit = false">
-        <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
-          添加
-      </el-button>
-    </el-col>
+  <el-card class="mt10">
+
+    <el-button type="success" @click="drawer = true;drawerEdit = false">
+      <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+      创建服务
+    </el-button>
 
     <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
       <template v-if="!drawerEdit" #header>
@@ -77,11 +76,13 @@
           </el-form>
       </template>
     </el-drawer>
-  </el-card>
 
-  <el-card shadow="never">
     <el-table
+      ref="table"
       :data="tableData"
+      :default-sort="{ prop: 'date', order: 'descending' }"
+      :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+      class="mt20"
     >
       <el-table-column
         v-for="item in options"
@@ -157,14 +158,14 @@
         </template>
       </el-table-column>
     </el-table>
+
     <el-pagination
-      small
-      background
-      :page-size="queryData.size"
-      layout="prev, pager, next"
-      :total="total"
-      class="mt-4"
-      @current-change="handleCurrentChange"
+        size="small"
+        background
+        layout="prev, pager, next"
+        :total="tableData.length"
+        class="mt-4 mt10"
+        @current-change="handleCurrentChange"
     />
   </el-card>
 </template>
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 4727b4f..3d4e4b6 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -1,10 +1,10 @@
 <template>
 
-  <el-card>
+  <el-card class="mt10">
     <el-form :inline="true" :model="formSearch" class="demo-form-inline">
       <el-form-item label="服务项目">
         <el-input
-            v-model="searchName"
+            v-model="formSearch.goodsName"
             style="max-width: 300px"
             placeholder="请输入服务项目"
             class="input-with-select"
@@ -13,7 +13,7 @@
 
       <el-form-item label="订单编号">
         <el-input
-            v-model="searchName"
+            v-model="formSearch.id"
             style="max-width: 300px"
             placeholder="订单编号"
             class="input-with-select"
@@ -21,7 +21,7 @@
       </el-form-item>
 
       <el-form-item label="订单状态">
-        <el-select v-model="isStatus" placeholder="订单状态" style="width: 200px">
+        <el-select v-model="formSearch.status" placeholder="订单状态" style="width: 200px">
           <el-option label="全部" value=" " />
           <el-option label="待付款" value="0" />
           <el-option label="已付款" value="1" />
@@ -30,7 +30,7 @@
 
       <el-form-item label="维修费用">
         <el-input
-            v-model="searchName"
+            v-model="formSearch.amount"
             style="max-width: 300px"
             placeholder="维修费用"
             class="input-with-select"
@@ -51,15 +51,13 @@
       </el-form-item>
 
     </el-form>
-  </el-card>
-
-  <el-card class="mt10">
 
     <el-table
         ref="table"
         :data="tableData"
         :default-sort="{ prop: 'date', order: 'descending' }"
         :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+        class="m10"
     >
 
       <el-table-column
@@ -302,6 +300,13 @@ const queryData = ref({
   size: 10,
 })
 
+const formSearch = ref({
+  goodsName:'',
+  status: ' ',
+  id: '',
+  amount: ''
+});
+
 const detailData = ref();
 
 const isStatus = ref('');
diff --git a/src/views/scheduling/maintain.vue b/src/views/scheduling/maintain.vue
index 0538989..889c0cb 100644
--- a/src/views/scheduling/maintain.vue
+++ b/src/views/scheduling/maintain.vue
@@ -1,328 +1,305 @@
 <template>
-  <el-card>
-
-    <el-row :gutter="10">
-
-      <el-col :span="4">
-        <el-button type="success" @click="drawer = true">
-          <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
-          添加排班
-        </el-button>
-      </el-col>
-
-      <el-col :span="4">
-        <div class="block">
-          <el-date-picker
-              v-model="registerDate"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="注册开始日期"
-              end-placeholder="注册截至日期"
-              :size="size"
-          />
-        </div>
-      </el-col>
-      <el-col :span="4">
-        <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询微信昵称"
-            class="input-with-select"
-            onchange="searchEvnt"
-        >
-
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-
-      <el-col :span="4">
-        <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询名字"
-            class="input-with-select"
-            onchange="searchEvnt"
-        >
-
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-
-      <el-col :span="4">
-        <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询手机号"
-            class="input-with-select"
-            onchange="searchEvnt"
-        >
-
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-    </el-row>
-
-
-  </el-card>
-
-  <el-drawer v-model="drawer" :direction="direction">
-    <template #header>
-      <h4>创建排班</h4>
-    </template>
-    <template #default>
-
-      <el-form :model="form" label-width="auto" style="max-width: 600px">
-
-        <el-form-item label="日期时间">
-          <el-date-picker
-              v-model="isDate"
-              type="date"
-              placeholder="排班日期"
-              :disabled-date="disablePastAndSpecificDates"
-              style="margin-right: 20px"
-          />
-
-          <el-select
-              v-model="isTime"
-              filterable
-              placeholder="请选择排班时间"
-              style="width: 240px"
-          >
-            <el-option
-                v-for="item in timeList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="排班人员">
-          <el-checkbox-group v-model="isUserData" size="large">
-            <el-checkbox-button v-for="item in userList" :key="item.label" :value="item.label" style="margin: 10px 0;">
-              {{ item.label }}
-            </el-checkbox-button>
-          </el-checkbox-group>
-        </el-form-item>
-
-
-        <div style="display: flex;justify-content: center;margin-top: 50px">
-          <el-button  @click="drawer = false">取消</el-button>
-          <el-button type="success" @click="confirmClick">确认</el-button>
-        </div>
-      </el-form>
-    </template>
-
-  </el-drawer>
-
   <el-card class="mt10">
-    <el-table
-        ref="table"
-        :data="tableData"
-        :default-sort="{ prop: 'date', order: 'descending' }"
-        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
-        border
-        stripe
-        style="width: 100%"
-    >
 
-      <el-table-column
-          label="序号"
-          prop="userId"
-          width="120"
-          align="center"
-          show-overflow-tooltip
-          sortable
-      />
+    <el-button type="success" @click="drawer = true">
+      <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+      创建排班
+    </el-button>
 
-      <el-table-column label="头像" width="200" align="center">
-        <template #default="scope">
-          <el-avatar :size="50" :src="scope.row.avatar" />
-        </template>
-      </el-table-column>
-      <el-table-column
-          label="微信昵称"
-          prop="nickname"
-          width="300"
-          align="center"
-          show-overflow-tooltip
-      />
-      <el-table-column
-          label="名字"
-          prop="name"
-          width="300"
-          align="center"
-          show-overflow-tooltip
-      />
-      <el-table-column
-          label="手机号"
-          prop="mobile"
-          width="300"
-          align="center"
-          show-overflow-tooltip
-      />
-      <el-table-column
-          label="排班日期"
-          prop="date"
-          width="auto"
-          align="center"
-          show-overflow-tooltip
-          sortable
-      />
+    <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
+      <template #header>
+        <h4>创建排班</h4>
+      </template>
+      <template #default>
 
-      <el-table-column
-          label="排班时间段"
-          prop="timeToTime"
-          width="auto"
-          align="center"
-          show-overflow-tooltip
-      />
+        <el-form :model="scheduleForm" label-width="auto" style="max-width: 600px">
 
-    </el-table>
-    <el-pagination
-        small
-        background
-        layout="prev, pager, next"
-        :total="tableData.length"
-        class="mt-4 mt10"
-        @current-change="handleCurrentChange"
-    />
+          <el-form-item label="日期时间">
+            <el-date-picker
+                v-model="scheduleForm.date"
+                type="date"
+                placeholder="排班日期"
+                :disabled-date="disablePastAndSpecificDates"
+                style="margin-right: 20px"
+                @change="handleDateChange"
+            />
+
+            <el-select
+                v-model="scheduleForm.timeQuantumId"
+                filterable
+                placeholder="请选择排班时间"
+                style="width: 240px"
+                @change="handleDateChange"
+            >
+              <el-option
+                  v-for="item in timeDataList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="排班人员">
+
+            <template v-if="userList.length">
+              <el-checkbox-group v-model="scheduleForm.userids" size="large">
+                <el-checkbox-button v-for="item in userList" :key="item.id" :value="item.id">
+                  {{ item.nickName }}
+                </el-checkbox-button>
+              </el-checkbox-group>
+            </template>
+
+            <template v-else>
+              <el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
+            </template>
+
+          </el-form-item>
+
+          <div style="display: flex;justify-content: center;margin-top: 50px">
+            <el-button  @click="handleCancelSchedule">取消</el-button>
+            <el-button type="success" @click="handleSaveSchedule">确认</el-button>
+          </div>
+
+        </el-form>
+      </template>
+
+    </el-drawer>
+
+    <el-container class="mt10">
+      <el-aside width="220px">
+        <el-scrollbar>
+          <el-menu >
+            <el-sub-menu v-for="(dateItem, index) in dateList" :index="index.toString()" :key="index">
+              <template #title>
+                <el-icon><Calendar /></el-icon>
+                <template v-if="defaultOpeneds === index">
+                  <b>今天：</b> {{ dateItem }}
+                </template>
+                <template v-else>
+                  {{ dateItem }}
+                </template>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item v-for="(timeItem, timeIndex) in timeList" :key="timeItem.id" :index="index.toString() + '-' + timeIndex.toString()" @click="selectTimeClick(dateItem, timeItem)">
+                  {{timeItem.startTime}} - {{timeItem.endTime}}
+                </el-menu-item>
+              </el-menu-item-group>
+            </el-sub-menu>
+          </el-menu>
+        </el-scrollbar>
+      </el-aside>
+      <el-container class="ml20">
+        <el-main>
+          <el-scrollbar>
+            <el-table :data="userDataList">
+
+              <el-table-column prop="date" label="日期" width="200" />
+              <el-table-column prop="time" label="时间段" width="200" />
+
+              <el-table-column prop="id" label="ID" width="200" />
+              <el-table-column prop="username" label="名称" width="120" />
+              <el-table-column prop="mobile" label="手机号" />
+              <el-table-column label="头像" width="200" align="center">
+                <template #default="scope">
+                  <el-avatar :size="50" :src="scope.row.avatar" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-scrollbar>
+        </el-main>
+      </el-container>
+    </el-container>
   </el-card>
 </template>
+
 <script setup>
-import * as XLSX from 'xlsx'
-import {
-  Edit,
-  Delete,
-  InfoFilled,
-  View,
-  ArrowDownBold,
-  Plus,
-} from '@element-plus/icons-vue'
-import {nextTick, onMounted, reactive, ref} from 'vue'
+import { onMounted, ref, nextTick } from 'vue';
+import {Menu as IconMenu, Message, Setting, Calendar, CirclePlus} from '@element-plus/icons-vue';
+import {listQuantum} from "../../api/modules/schedulingTime";
+import {ElMessage} from "element-plus";
+import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
+import {listSurveyorsUser} from "../../api/modules/schedulingUser";
 
-import {options} from './options.js'
-import {getUserList} from "../../api/modules/user";
+const item = {
+  date: '2016-05-02',
+  name: 'Tom',
+  address: 'No. 189, Grove St, Los Angeles',
+};
+const tableData = ref(Array.from({ length: 5 }).fill(item));
 
-const tableData = ref([])
-const dataList = ref([])
-const table = ref()
-const tabclickIndex = ref()
-const isExpand = ref(false)
-const columnData = ref(JSON.parse(JSON.stringify(options)))
-const disabled = ref(false)
-const dialogVisible = ref(false)
-const total = ref(0)
-const formInline = ref({})
-const registerDate = ref('');
-const searchName = ref('');
+const scheduleForm = ref({
+  userids: [],
+  roleId: 3,
+  date: '',
+  timeQuantumId: '',
+});
+
+const direction = ref('rtl')
 const drawer = ref(false)
-const queryData = ref({
-  keyWord: '',
-  page: 1,
-  size: 10,
-})
+const userList = ref([]); // 勘察人员列表
 
-const isUserData = ref([]); // 选中
-const userList = [
-  {
-    value: '1',
-    label: '张三',
-  },
-  {
-    value: '2',
-    label: '王五',
-  },
-  {
-    value: '3',
-    label: '李四',
-  },
-  {
-    value: '4',
-    label: '赵高',
-  },
-  {
-    value: '5',
-    label: '秦始皇',
-  },{
-    value: '3',
-    label: '李四',
-  },
-  {
-    value: '4',
-    label: '赵高',
-  },
-  {
-    value: '5',
-    label: '秦始皇',
-  },{
-    value: '3',
-    label: '李四',
-  },
-  {
-    value: '4',
-    label: '赵高',
-  },
-  {
-    value: '5',
-    label: '秦始皇',
-  },{
-    value: '3',
-    label: '李四',
-  },
-  {
-    value: '4',
-    label: '赵高',
-  },
-  {
-    value: '5',
-    label: '秦始皇',
-  },{
-    value: '3',
-    label: '李四',
-  },
-  {
-    value: '4',
-    label: '赵高',
-  },
-  {
-    value: '5',
-    label: '秦始皇',
-  },
-]; // 用户列表
+// 日期列表
+const dateList = ref([]);
+const timeList = ref([]); // 时间段
+const timeDataList = ref([]); // 时间段
+const defaultOpeneds = ref([]);
 
-const isTime = ref(''); // 选中时间段
+const userDataList = ref([]); // 已排期用户
 
-const timeList = [
-  {
-    value: '1',
-    label: '9:00-11:00',
-  },
-  {
-    value: '2',
-    label: '11:00-12:00',
-  },
-  {
-    value: '3',
-    label: '13:00-14:00',
-  },
-  {
-    value: '4',
-    label: '14:00-15:00',
-  },
-  {
-    value: '5',
-    label: '15:00-16:00',
-  },
-];
+// 初始化
+const initData = () => {
 
-const isDate = ref(''); // 当前日期
+  const currentDate = new Date();
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth();
+
+  // 上个月的第一天和最后一天
+  const lastMonthFirstDay = new Date(currentYear, currentMonth - 1, 1);
+  const lastMonthLastDay = new Date(currentYear, currentMonth, 0);
+
+  // 这个月的第一天和最后一天
+  const thisMonthFirstDay = new Date(currentYear, currentMonth, 1);
+  const thisMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
+
+  // 下个月的第一天和最后一天
+  const nextMonthFirstDay = new Date(currentYear, currentMonth + 1, 1);
+  const nextMonthLastDay = new Date(currentYear, currentMonth + 2, 0);
+
+  // 添加上个月的日期
+  // for (let d = lastMonthFirstDay; d <= lastMonthLastDay; d.setDate(d.getDate() + 1)) {
+  //   dateList.value.push(formatDate(new Date(d)));
+  // }
+
+  // 添加这个月的日期
+  for (let d = thisMonthFirstDay; d <= thisMonthLastDay; d.setDate(d.getDate() + 1)) {
+    dateList.value.push(formatDate(new Date(d)));
+  }
+
+  // 添加下个月的日期
+  for (let d = nextMonthFirstDay; d <= nextMonthLastDay; d.setDate(d.getDate() + 1)) {
+    dateList.value.push(formatDate(new Date(d)));
+  }
+
+  // 找到今天的日期在 dateList 中的索引
+  const todayIndex = dateList.value.indexOf(formatDate(currentDate));
+  if (todayIndex !== -1) {
+    defaultOpeneds.value = todayIndex;
+  }
+
+  // 获取排班时段
+  listQuantum().then((res) => {
+
+    timeList.value = res.data;
+
+    timeDataList.value = res.data.map(item => ({
+      value: item.id,
+      label: `${item.startTime}-${item.endTime}`
+    }));
+
+    initSelectTimeClick(formatDate(currentDate), timeList.value);// 获取当天所有时段人员
+  })
+};
+
+// 监听选中状态
+const handleDateChange = (value) => {
+
+  if(!scheduleForm.value.date)
+  {
+    scheduleForm.value.timeQuantumId = '';
+
+    ElMessage({
+      type: 'warning',
+      message: '请先选择排班日期'
+    });
+    return;
+  }
+
+  if(!scheduleForm.value.timeQuantumId)
+  {
+    ElMessage({
+      type: 'warning',
+      message: '请继续选择排班时间段'
+    });
+    return;
+  }
+
+  // 查询勘察人员列表
+  let params = {
+    date: formatDate(scheduleForm.value.date),
+    timeQuantumId: scheduleForm.value.timeQuantumId
+  };
+
+  userList.value = [];
+
+  listSurveyorsUser(params).then((res)=>{
+
+    userList.value = res.data
+  });
+}
+
+// 添加排班人员
+const handleSaveSchedule = () => {
+
+  if(!scheduleForm.value.date){
+    ElMessage({
+      type: 'warning',
+      message: '请选择排班日期'
+    });
+    return;
+  }
+
+  if(!scheduleForm.value.timeQuantumId){
+    ElMessage({
+      type: 'warning',
+      message: '请选择排版时段'
+    });
+    return;
+  }
+
+  if(scheduleForm.value.userids.length < 1){
+    ElMessage({
+      type: 'warning',
+      message: '请选择人员'
+    });
+    return;
+  }
+
+  scheduleForm.value.date = formatDate(scheduleForm.value.date); //转换日期
+
+  // 添加人员
+  addSchedule(scheduleForm.value).then((res) => {
+
+    scheduleForm.value = {
+      userids: [],
+      roleId: 3,
+      date: '',
+      timeQuantumId: '',
+    }
+
+    drawer.value = false;
+    initData();
+
+    ElMessage({
+      type: 'success',
+      message: '新增成功！'
+    });
+
+  })
+
+};
+// 取消添加排班人员
+const handleCancelSchedule = () => {
+
+  drawer.value = false;
+
+  scheduleForm.value = {
+    userids: [],
+    roleId: 3,
+    date: '',
+    timeQuantumId: '',
+  };
+};
 
 // 禁止选择之前的日期
 const disablePastAndSpecificDates = (date) => {
@@ -347,112 +324,82 @@ const disablePastAndSpecificDates = (date) => {
   });
 };
 
+// 获取当天时间段所有人员
+const initSelectTimeClick = (dateItem, timeList) => {
 
-const initData = () => {
+  let params = {
+    date: dateItem,
+    roleId: 3,
+  }
+
+  timeList.map(item => {
+
+    let params = {
+      date: dateItem,
+      roleId: 3,
+      timeQuantumId: item.id
+    }
+
+    // 获取用户数据
+    getScheduleList(params).then((res) => {
+
+      if(res.data.length)
+      {
+        res.data.map(resItem => {
+
+          resItem.date = params.date;
+          resItem.time = item.startTime + '-' + item.endTime;
+          userDataList.value.push(resItem);
+        })
+      }
+    })
+
+  })
 
-  // 获取当前日期
-  isDate.value = new Date();
-  tableData.value = columnData.value;
 
-  // orderLists(queryData.value).then((res) => {
-  //   console.log(res.data.data)
-  //   // total.value = res.data.data.total
-  //   tableData.value = res.data.data
-  // })
 }
-const itemEditHanld = (item) => {
-  item.itemEdit = !item.itemEdit
-  // // console.log(JSON.stringify(item));
-  // tabclickIndex.value = item;
-}
-const handleSizeChange = (val) => {
-  console.log(val)
-}
-const handleSelectionChange = (val) => {
-}
-const handleCurrentChange = (val) => {
-  queryData.value.size = 10
-  queryData.value.page = val
-  initData(queryData.value)
-}
-const handleClose = () => {
-}
-const dialogVisibleHanle = () => {
-  console.log('滑动加载')
-}
-const handleExpand = () => {
-  isExpand.value = false
-  tableData.value.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpand.value)
+// 获取用户列表
+const selectTimeClick = (dateItem, timeItem) => {
+
+  let params = {
+    date: dateItem,
+    roleId: 3,
+    timeQuantumId: timeItem.id
+  };
+
+  userDataList.value = [];
+
+  getScheduleList(params).then((res) => {
+
+
+    res.data.map(resItem => {
+
+      resItem.date = params.date;
+      resItem.time = timeItem.startTime + '-' + timeItem.endTime;
+      userDataList.value.push(resItem);
+    })
+
   })
 }
 
-const handleOpen = () => {
-  isExpand.value = true
-  tableData.value.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpand.value)
-  })
-}
-
-// 搜索事件
-const searchEvnt = ()=> {
-  console.log('点击搜索');
+// 日期格式
+const formatDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
 };
 
 onMounted(() => {
-  initData()
-})
+  initData();
+});
 </script>
 
-<style lang="scss" scoped>
-.mt-4 {
-  float: right;
-  text-align: right;
-  margin-bottom: 20px;
+<style scoped>
+.mt10 {
+  margin-top: 10px;
 }
-
-.demo-form-inline {
-}
-
-.dragClass {
-  background: rgba($color: #41c21a, $alpha: 0.5) !important;
-}
-
-// 停靠
-.ghostClass {
-  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
-}
-
-// 选择
-.chosenClass:hover > td {
-  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
-}
-
-.icon-view {
-  font-size: 20px;
-  color: #673ab7;
-  margin: 0 10px;
-}
-
-.icon-edit {
-  font-size: 20px;
-  color: #2f60c2;
-  margin: 0 10px;
-}
-
-.icon-dele {
-  font-size: 20px;
-  color: #ff5722;
-}
-
-.btn-color {
-  background: #fff;
-  color: #4c60cc;
-}
-
-.expand-title {
-  padding: 10px;
-  color: #919399;
-  font-weight: 600;
+.ml20 {
+  margin-left: 20px;
 }
 </style>
diff --git a/src/views/scheduling/reconnaissance.vue b/src/views/scheduling/reconnaissance.vue
index 2b4740f..4294be0 100644
--- a/src/views/scheduling/reconnaissance.vue
+++ b/src/views/scheduling/reconnaissance.vue
@@ -1,87 +1,11 @@
 <template>
-  <el-card>
+  <el-card class="mt10">
 
-    <el-col :span="4">
-      <el-button type="success" @click="drawer = true">
-        <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
-        创建排班
-      </el-button>
-    </el-col>
+    <el-button type="success" @click="drawer = true">
+      <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+      创建排班
+    </el-button>
 
-    <el-form :inline="true" :model="queryData"  class="mt20">
-      <el-form-item label="排班日期">
-        <el-date-picker
-            v-model="queryData.date"
-            type="date"
-            placeholder="请选择排班日期"
-        />
-      </el-form-item>
-
-      <el-form-item label="时段">
-        <el-select
-            v-model="queryData.timeQuantumId"
-            placeholder="请选择排班时段"
-            onchange="handleCurrentChange"
-            style="min-width: 150px"
-        >
-          <el-option
-              v-for="item in timeList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" @click="handleCurrentChange">搜索</el-button>
-      </el-form-item>
-
-    </el-form>
-
-    <el-drawer
-        v-model:visible="timeItem"
-        :direction="direction"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :destroy-on-close="true"
-        :show-close="false"
-        title="创建/编辑时间段"
-    >
-      <el-form
-          :model="timeForm"
-          label-width="120px"
-          :rules="formRules"
-          ref="timeFormRef"
-          style="max-width: 600px"
-      >
-        <el-form-item label="起始时间" prop="startTime">
-          <el-time-picker
-              v-model="timeForm.startTime"
-              placeholder="请选择起始时间"
-              :picker-options="startTimeOptions"
-              format="HH:mm"
-              value-format="HH:mm"
-          ></el-time-picker>
-        </el-form-item>
-
-        <el-form-item label="结束时间" prop="endTime">
-          <el-time-picker
-              v-model="timeForm.endTime"
-              placeholder="请选择结束时间"
-              :picker-options="endTimeOptions"
-              format="HH:mm"
-              value-format="HH:mm"
-              @change="checkEndTime"
-          ></el-time-picker>
-        </el-form-item>
-
-        <div style="display: flex; justify-content: flex-end; margin-top: 20px">
-          <el-button @click="timeItem = false">取消</el-button>
-          <el-button type="primary" @click="handleSaveQuantum">确认</el-button>
-        </div>
-      </el-form>
-    </el-drawer>
     <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
       <template #header>
         <h4>创建排班</h4>
@@ -90,291 +14,230 @@
 
         <el-form :model="scheduleForm" label-width="auto" style="max-width: 600px">
 
-            <el-form-item label="日期时间">
-              <el-date-picker
-                  v-model="scheduleForm.date"
-                  type="date"
-                  placeholder="排班日期"
-                  :disabled-date="disablePastAndSpecificDates"
-                  style="margin-right: 20px"
+          <el-form-item label="日期时间">
+            <el-date-picker
+                v-model="scheduleForm.date"
+                type="date"
+                placeholder="排班日期"
+                :disabled-date="disablePastAndSpecificDates"
+                style="margin-right: 20px"
+                @change="handleDateChange"
+            />
+
+            <el-select
+                v-model="scheduleForm.timeQuantumId"
+                filterable
+                placeholder="请选择排班时间"
+                style="width: 240px"
+                @change="handleDateChange"
+            >
+              <el-option
+                  v-for="item in timeDataList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
               />
+            </el-select>
+          </el-form-item>
 
-              <el-select
-                  v-model="scheduleForm.timeQuantumId"
-                  filterable
-                  placeholder="请选择排班时间"
-                  style="width: 240px"
-              >
-                <el-option
-                    v-for="item in timeList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                 />
-              </el-select>
-            </el-form-item>
+          <el-form-item label="排班人员">
 
-            <el-form-item label="排班人员">
+            <template v-if="userList.length">
               <el-checkbox-group v-model="scheduleForm.userids" size="large">
                 <el-checkbox-button v-for="item in userList" :key="item.id" :value="item.id">
                   {{ item.nickName }}
                 </el-checkbox-button>
               </el-checkbox-group>
-            </el-form-item>
+            </template>
+
+            <template v-else>
+              <el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
+            </template>
+
+          </el-form-item>
 
           <div style="display: flex;justify-content: center;margin-top: 50px">
             <el-button  @click="handleCancelSchedule">取消</el-button>
-           <el-button type="success" @click="handleSaveSchedule">确认</el-button>
+            <el-button type="success" @click="handleSaveSchedule">确认</el-button>
           </div>
+
         </el-form>
       </template>
 
     </el-drawer>
-  </el-card>
 
-  <el-card class="mt10" v-if="false">
-    <el-button type="success" @click="timeItem = true">
-      <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
-      创建时段
-    </el-button>
-    <el-table
-        ref="timeTable"
-        :data="timeList"
-        :default-sort="{ prop: 'id', order: 'ascending' }"
-        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
-        border
-        stripe
-        style="width: 100%"
-    >
+    <el-container class="mt10">
+      <el-aside width="220px">
+        <el-scrollbar>
+          <el-menu >
+            <el-sub-menu v-for="(dateItem, index) in dateList" :index="index.toString()" :key="index">
+              <template #title>
+                <el-icon><Calendar /></el-icon>
+                <template v-if="defaultOpeneds === index">
+                  <b>今天：</b> {{ dateItem }}
+                </template>
+                <template v-else>
+                  {{ dateItem }}
+                </template>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item v-for="(timeItem, timeIndex) in timeList" :key="timeItem.id" :index="index.toString() + '-' + timeIndex.toString()" @click="selectTimeClick(dateItem, timeItem)">
+                  {{timeItem.startTime}} - {{timeItem.endTime}}
+                </el-menu-item>
+              </el-menu-item-group>
+            </el-sub-menu>
+          </el-menu>
+        </el-scrollbar>
+      </el-aside>
+      <el-container class="ml20">
+        <el-main>
+          <el-scrollbar>
+            <el-table :data="userDataList">
 
-      <el-table-column
-          label="序号"
-          prop="id"
-          width="80"
-          align="center"
-          show-overflow-tooltip
-          sortable
-      >
-      </el-table-column>
+              <el-table-column prop="date" label="日期" width="200" />
+              <el-table-column prop="time" label="时间段" width="200" />
 
-      <el-table-column
-          label="起始时间"
-          prop="startTime"
-          align="center"
-          show-overflow-tooltip
-      />
-
-      <el-table-column
-          label="结束时间"
-          prop="startTime"
-          align="center"
-          show-overflow-tooltip
-      />
-
-      <el-table-column
-          label="状态"
-          prop="flag"
-          width="80"
-          align="center"
-          show-overflow-tooltip
-      />
-      <el-table-column
-          label="操作"
-          width="auto"
-          align="center"
-          show-overflow-tooltip
-      >
-        <template v-slot:default="scope">
-          <el-button type="info" :icon="Edit" @click="handleEditQuantum(scope.row)">编辑</el-button>
-          <el-button type="danger" :icon="Delete" @click="handleDel(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-
-    </el-table>
-  </el-card>
-  <el-card class="mt10" v-if="true">
-    <el-table
-        ref="table"
-        :data="tableData"
-        :default-sort="{ prop: 'date', order: 'descending' }"
-        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
-        border
-        stripe
-        style="width: 100%"
-    >
-
-      <el-table-column
-          label="序号"
-          prop="userId"
-          width="120"
-          align="center"
-          show-overflow-tooltip
-          sortable
-      />
-
-      <el-table-column label="头像" width="200" align="center">
-        <template #default="scope">
-          <el-avatar :size="50" :src="scope.row.avatar" />
-        </template>
-      </el-table-column>
-      <el-table-column
-          label="微信昵称"
-          prop="nickname"
-          width="300"
-          align="center"
-          show-overflow-tooltip
-      />
-      <el-table-column
-          label="名字"
-          prop="name"
-          width="300"
-          align="center"
-          show-overflow-tooltip
-      />
-      <el-table-column
-          label="手机号"
-          prop="mobile"
-          width="300"
-          align="center"
-          show-overflow-tooltip
-      />
-      <el-table-column
-          label="排班日期"
-          prop="date"
-          width="auto"
-          align="center"
-          show-overflow-tooltip
-          sortable
-      />
-
-      <el-table-column
-          label="排班时间段"
-          prop="timeToTime"
-          width="auto"
-          align="center"
-          show-overflow-tooltip
-      />
-
-    </el-table>
-    <el-pagination
-        small
-        background
-        layout="prev, pager, next"
-        :total="tableData.length"
-        class="mt-4 mt10"
-        @current-change="handleCurrentChange"
-    />
+              <el-table-column prop="id" label="ID" width="200" />
+              <el-table-column prop="username" label="名称" width="120" />
+              <el-table-column prop="mobile" label="手机号" />
+              <el-table-column label="头像" width="200" align="center">
+                <template #default="scope">
+                  <el-avatar :size="50" :src="scope.row.avatar" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-scrollbar>
+        </el-main>
+      </el-container>
+    </el-container>
   </el-card>
 </template>
-<script setup>
-import {listQuantum, addQuantum, updateQuantum, delQuantum} from "../../api/modules/schedulingTime";
-import {getScheduleList, addSchedule} from "../../api/modules/scheduling";
-import {listSurveyorsUser, listMaintenanceUser} from "../../api/modules/schedulingUser";
-import {nextTick, onMounted, reactive, ref, watch } from 'vue'
 
-import {CirclePlus, Plus} from "@element-plus/icons-vue";
-import {ElMessage, ElMessageBox, timelineItemProps} from "element-plus";
-import {
-  Check,
-  Delete,
-  Edit,
-  Message,
-  Search,
-  Star,
-} from '@element-plus/icons-vue'
-const tableData = ref([])
-const table = ref()
-const dialogVisible = ref(false)
-const total = ref(0)
+<script setup>
+import { onMounted, ref, nextTick } from 'vue';
+import {Menu as IconMenu, Message, Setting, Calendar, CirclePlus} from '@element-plus/icons-vue';
+import {listQuantum} from "../../api/modules/schedulingTime";
+import {ElMessage} from "element-plus";
+import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
+import {listSurveyorsUser} from "../../api/modules/schedulingUser";
+
+const item = {
+  date: '2016-05-02',
+  name: 'Tom',
+  address: 'No. 189, Grove St, Los Angeles',
+};
+const tableData = ref(Array.from({ length: 5 }).fill(item));
+
 const scheduleForm = ref({
   userids: [],
   roleId: 2,
   date: '',
   timeQuantumId: '',
 });
-const setup = () => {
-  const direction = 'rtl'; // 或者 'ltr', 'ttb', 'btt' 根据需要设置
-  const timeForm = reactive({
-    startTime: '',
-    endTime: '',
-  });
-  const timeItem = ref(false)
-  const timeItemEdit = ref(false)
-  const formRules = {
-    startTime: [
-      { required: true, message: '请输入起始时间', trigger: 'blur' },
-    ],
-    endTime: [
-      { required: true, message: '请输入结束时间', trigger: 'blur' },
-      { validator: validateEndTime, trigger: 'change' },
-    ],
-  };
-  const timeFormRef = ref(null);
-  const startTimeOptions = {
-    selectableRange: '00:00:00 - 23:59:59',
-    format: 'HH:mm',
-    valueFormat: 'HH:mm',
-  };
-  const endTimeOptions = {
-    ...startTimeOptions,
-    // 可以在这里添加额外的限制，但通常我们在验证函数中处理
-  };
-  const validateEndTime = (rule, value, callback) => {
-    const startTime = timeForm.startTime;
-    if (!value) {
-      return callback(new Error('请输入结束时间'));
-    }
-    if (new Date(`1970-01-01T${startTime}:00Z`).getTime() >= new Date(`1970-01-01T${value}:00Z`).getTime()) {
-      return callback(new Error('起始时间必须小于结束时间'));
-    }
-    callback();
-  };
 
-  const checkEndTime = (value) => {
-    timeFormRef.value.validateField('endTime');
-  };
+const direction = ref('rtl')
+const drawer = ref(false)
+const userList = ref([]); // 勘察人员列表
 
-  const handleSaveQuantum = () => {
-    timeFormRef.value.validate((valid) => {
-      if (valid) {
-        // 提交表单数据
-        console.log('表单数据:', timeForm);
-        // 这里可以添加保存逻辑，比如调用 API
-        if(itemForm.id&&itemForm.id ===''){
-          addQuantum(itemForm).then((res) => {
-            ElMessage({
-              type: 'success',
-              message: '新增成功！'
-            });
-          })
-        } else {
-          updateQuantum(itemForm).then((res) => {
-            ElMessage({
-              type: 'success',
-              message: '修改成功！'
-            });
-          })
-        }
-        timeItem.value = false; // 保存后关闭抽屉
-      } else {
-        console.log('表单验证失败!');
-        return false;
-      }
-    });
-  };
+// 日期列表
+const dateList = ref([]);
+const timeList = ref([]); // 时间段
+const timeDataList = ref([]); // 时间段
+const defaultOpeneds = ref([]);
 
-  return {
-    timeItem,
-    direction,
-    timeForm,
-    formRules,
-    timeFormRef,
-    startTimeOptions,
-    endTimeOptions,
-    handleSaveQuantum,
-  };
+const userDataList = ref([]); // 已排期用户
+
+// 初始化
+const initData = () => {
+
+  const currentDate = new Date();
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth();
+
+  // 上个月的第一天和最后一天
+  const lastMonthFirstDay = new Date(currentYear, currentMonth - 1, 1);
+  const lastMonthLastDay = new Date(currentYear, currentMonth, 0);
+
+  // 这个月的第一天和最后一天
+  const thisMonthFirstDay = new Date(currentYear, currentMonth, 1);
+  const thisMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
+
+  // 下个月的第一天和最后一天
+  const nextMonthFirstDay = new Date(currentYear, currentMonth + 1, 1);
+  const nextMonthLastDay = new Date(currentYear, currentMonth + 2, 0);
+
+  // 添加上个月的日期
+  // for (let d = lastMonthFirstDay; d <= lastMonthLastDay; d.setDate(d.getDate() + 1)) {
+  //   dateList.value.push(formatDate(new Date(d)));
+  // }
+
+  // 添加这个月的日期
+  for (let d = thisMonthFirstDay; d <= thisMonthLastDay; d.setDate(d.getDate() + 1)) {
+    dateList.value.push(formatDate(new Date(d)));
+  }
+
+  // 添加下个月的日期
+  for (let d = nextMonthFirstDay; d <= nextMonthLastDay; d.setDate(d.getDate() + 1)) {
+    dateList.value.push(formatDate(new Date(d)));
+  }
+
+  // 找到今天的日期在 dateList 中的索引
+  const todayIndex = dateList.value.indexOf(formatDate(currentDate));
+  if (todayIndex !== -1) {
+    defaultOpeneds.value = todayIndex;
+  }
+
+  // 获取排班时段
+  listQuantum().then((res) => {
+
+    timeList.value = res.data;
+
+    timeDataList.value = res.data.map(item => ({
+      value: item.id,
+      label: `${item.startTime}-${item.endTime}`
+    }));
+
+    initSelectTimeClick(formatDate(currentDate), timeList.value);// 获取当天所有时段人员
+  })
 };
 
+// 监听选中状态
+const handleDateChange = (value) => {
+
+  if(!scheduleForm.value.date)
+  {
+    scheduleForm.value.timeQuantumId = '';
+
+    ElMessage({
+      type: 'warning',
+      message: '请先选择排班日期'
+    });
+    return;
+  }
+
+  if(!scheduleForm.value.timeQuantumId)
+  {
+    ElMessage({
+      type: 'warning',
+      message: '请继续选择排班时间段'
+    });
+    return;
+  }
+
+  // 查询勘察人员列表
+  let params = {
+    date: formatDate(scheduleForm.value.date),
+    timeQuantumId: scheduleForm.value.timeQuantumId
+  };
+
+  userList.value = [];
+
+  listSurveyorsUser(params).then((res)=>{
+
+    userList.value = res.data
+  });
+}
+
 // 添加排班人员
 const handleSaveSchedule = () => {
 
@@ -402,34 +265,29 @@ const handleSaveSchedule = () => {
     return;
   }
 
-  // 提交表单数据
-  console.log('表单数据:', scheduleForm.value);
-
   scheduleForm.value.date = formatDate(scheduleForm.value.date); //转换日期
 
   // 添加人员
   addSchedule(scheduleForm.value).then((res) => {
 
-    console.log('返回数据', res);
+    scheduleForm.value = {
+      userids: [],
+      roleId: 2,
+      date: '',
+      timeQuantumId: '',
+    }
+
+    drawer.value = false;
+    initData();
+
     ElMessage({
       type: 'success',
       message: '新增成功！'
     });
 
-    // initData();
   })
 
 };
-
-// 日期格式转换
-const formatDate = (date) => {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-
-  return `${year}-${month}-${day}`;
-}
-
 // 取消添加排班人员
 const handleCancelSchedule = () => {
 
@@ -443,32 +301,6 @@ const handleCancelSchedule = () => {
   };
 };
 
-const drawer = ref(false)
-const queryData = ref({
-  date: '',
-  timeQuantumId: '',
-  roleId: '2',
-  page: 1,
-  size: 10,
-})
-const direction = ref('rtl')
-const userList = ref([]); // 勘察人员列表
-
-const timeList = ref([]);
-const timeOptions = ref([]);
-const postOptions = [
-  {
-    value: '2',
-    label: '勘察人员',
-  },
-  {
-    value: '3',
-    label: '维修人员',
-  },
-];
-
-const currentDate = ref(''); // 当前日期
-
 // 禁止选择之前的日期
 const disablePastAndSpecificDates = (date) => {
   // 获取当前日期
@@ -492,186 +324,82 @@ const disablePastAndSpecificDates = (date) => {
   });
 };
 
-function updateTimeOptions() {
-  // 假设 timeList 是响应式的，并且已经包含了最新的数据
-  timeOptions.value = timeList.value
-      .map(item => ({ // 转换为 { value: id, label: startTime + "-" + endTime } 格式
-        value: item.id,
-        label: `${item.startTime}-${item.endTime}`
-      }));
+// 获取当天时间段所有人员
+const initSelectTimeClick = (dateItem, timeList) => {
+
+  let params = {
+    date: dateItem,
+    roleId: 2,
+  }
+
+  timeList.map(item => {
+
+    let params = {
+      date: dateItem,
+      roleId: 2,
+      timeQuantumId: item.id
+    }
+
+    // 获取用户数据
+    getScheduleList(params).then((res) => {
+
+      if(res.data.length)
+      {
+        res.data.map(resItem => {
+
+          resItem.date = params.date;
+          resItem.time = item.startTime + '-' + item.endTime;
+          userDataList.value.push(resItem);
+        })
+      }
+    })
+
+  })
+
+
 }
+// 获取用户列表
+const selectTimeClick = (dateItem, timeItem) => {
 
-// 初始调用或监听 timeList 变更时调用
-updateTimeOptions();
+  let params = {
+    date: dateItem,
+    roleId: 2,
+    timeQuantumId: timeItem.id
+  };
 
-// 如果 timeList 是响应式的，并且你使用的是 Vue 3 的 Composition API，
-// 你可以使用 watch 来监听 timeList 的变更，并自动更新 timeOptions
+  userDataList.value = [];
 
-watch(timeList, updateTimeOptions, { deep: true }); // 深度监听 timeList 的变更
+  getScheduleList(params).then((res) => {
 
-// 初始化数据
-const initData = () => {
 
-  // 获取时间段
-  listQuantum().then((res) => {
+    res.data.map(resItem => {
 
-    timeList.value = res.data.map(item => ({
-      value: item.id,
-      label: `${item.startTime}-${item.endTime}`
-    }));
+      resItem.date = params.date;
+      resItem.time = timeItem.startTime + '-' + timeItem.endTime;
+      userDataList.value.push(resItem);
+    })
 
-  });
-
-  // 查询勘察人员列表
-  listSurveyorsUser().then((res)=>{
-      userList.value = res.data
-  });
-
-  // if(queryData.value.roleId==='2'){
-  //   listSurveyorsUser().then((res)=>{
-  //     userList.value = res.data
-  //   });
-  // }else if(queryData.value.roleId==='3'){
-  //   listMaintenanceUser().then((res)=>{
-  //     userList.value = res.data
-  //         .map(item => ({ // 转换为 { value: id, label: startTime + "-" + endTime } 格式
-  //           value: item.id,
-  //           label: item.nickName
-  //         }));
-  //   });
-  // }
-}
-
-// 搜索事件
-const handleCurrentChange = (val) => {
-  console.log("调试： queryData.value.date="+queryData.value.date);
-  queryData.value.date = '2024-10-16';
-  getScheduleList(queryData.value).then((res) => {
-    console.log(res.data)
-    // total.value = res.data.total
-    tableData.value = res.data
   })
 }
 
-const handleEditQuantum = (item) => {
-  ElMessageBox.confirm('确定要删除?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    // 只有当用户点击确定时，才调用 delQuantum
-    delQuantum(item.id).then((res) => {
-      // 假设 res 表示删除成功，且不需要处理 res 的内容
-      ElMessage({
-        type: 'success',
-        message: '删除成功！'
-      });
-
-      // 从 timeList 中移除被标记为删除的对象（或根据业务逻辑直接移除）
-      timeList.value = timeList.value.filter(existingItem => existingItem.id !== item.id);
-
-      // 注意：这里假设 timeList 是响应式的，因此赋值会自动触发视图更新
-    }).catch((error) => {
-      // 处理删除失败的情况
-      console.error('删除失败:', error);
-      ElMessage({
-        type: 'error',
-        message: '删除失败，请重试。'
-      });
-
-      // 如果需要，可以在这里恢复 item 的状态或其他操作
-    });
-  }).catch(() => {
-  });
-}
-
-const handleDel = (item) => {
-  ElMessageBox.confirm('确定要删除?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    // 只有当用户点击确定时，才调用 delQuantum
-    delQuantum(item.id).then((res) => {
-      // 假设 res 表示删除成功，且不需要处理 res 的内容
-      ElMessage({
-        type: 'success',
-        message: '删除成功！'
-      });
-
-      // 从 timeList 中移除被标记为删除的对象（或根据业务逻辑直接移除）
-      timeList.value = timeList.value.filter(existingItem => existingItem.id !== item.id);
-
-      // 注意：这里假设 timeList 是响应式的，因此赋值会自动触发视图更新
-    }).catch((error) => {
-      // 处理删除失败的情况
-      console.error('删除失败:', error);
-      ElMessage({
-        type: 'error',
-        message: '删除失败，请重试。'
-      });
-
-      // 如果需要，可以在这里恢复 item 的状态或其他操作
-    });
-  }).catch(() => {
-  });
-}
-
+// 日期格式
+const formatDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
 
 onMounted(() => {
   initData();
-})
+});
 </script>
 
-<style lang="scss" scoped>
-.mt-4 {
-  float: right;
-  text-align: right;
-  margin-bottom: 20px;
+<style scoped>
+.mt10 {
+  margin-top: 10px;
 }
-
-.demo-form-inline {
-}
-
-.dragClass {
-  background: rgba($color: #41c21a, $alpha: 0.5) !important;
-}
-
-// 停靠
-.ghostClass {
-  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
-}
-
-// 选择
-.chosenClass:hover > td {
-  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
-}
-
-.icon-view {
-  font-size: 20px;
-  color: #673ab7;
-  margin: 0 10px;
-}
-
-.icon-edit {
-  font-size: 20px;
-  color: #2f60c2;
-  margin: 0 10px;
-}
-
-.icon-dele {
-  font-size: 20px;
-  color: #ff5722;
-}
-
-.btn-color {
-  background: #fff;
-  color: #4c60cc;
-}
-
-.expand-title {
-  padding: 10px;
-  color: #919399;
-  font-weight: 600;
+.ml20 {
+  margin-left: 20px;
 }
 </style>
diff --git a/src/views/scheduling/test.vue b/src/views/scheduling/test.vue
new file mode 100644
index 0000000..4294be0
--- /dev/null
+++ b/src/views/scheduling/test.vue
@@ -0,0 +1,405 @@
+<template>
+  <el-card class="mt10">
+
+    <el-button type="success" @click="drawer = true">
+      <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+      创建排班
+    </el-button>
+
+    <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
+      <template #header>
+        <h4>创建排班</h4>
+      </template>
+      <template #default>
+
+        <el-form :model="scheduleForm" label-width="auto" style="max-width: 600px">
+
+          <el-form-item label="日期时间">
+            <el-date-picker
+                v-model="scheduleForm.date"
+                type="date"
+                placeholder="排班日期"
+                :disabled-date="disablePastAndSpecificDates"
+                style="margin-right: 20px"
+                @change="handleDateChange"
+            />
+
+            <el-select
+                v-model="scheduleForm.timeQuantumId"
+                filterable
+                placeholder="请选择排班时间"
+                style="width: 240px"
+                @change="handleDateChange"
+            >
+              <el-option
+                  v-for="item in timeDataList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="排班人员">
+
+            <template v-if="userList.length">
+              <el-checkbox-group v-model="scheduleForm.userids" size="large">
+                <el-checkbox-button v-for="item in userList" :key="item.id" :value="item.id">
+                  {{ item.nickName }}
+                </el-checkbox-button>
+              </el-checkbox-group>
+            </template>
+
+            <template v-else>
+              <el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
+            </template>
+
+          </el-form-item>
+
+          <div style="display: flex;justify-content: center;margin-top: 50px">
+            <el-button  @click="handleCancelSchedule">取消</el-button>
+            <el-button type="success" @click="handleSaveSchedule">确认</el-button>
+          </div>
+
+        </el-form>
+      </template>
+
+    </el-drawer>
+
+    <el-container class="mt10">
+      <el-aside width="220px">
+        <el-scrollbar>
+          <el-menu >
+            <el-sub-menu v-for="(dateItem, index) in dateList" :index="index.toString()" :key="index">
+              <template #title>
+                <el-icon><Calendar /></el-icon>
+                <template v-if="defaultOpeneds === index">
+                  <b>今天：</b> {{ dateItem }}
+                </template>
+                <template v-else>
+                  {{ dateItem }}
+                </template>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item v-for="(timeItem, timeIndex) in timeList" :key="timeItem.id" :index="index.toString() + '-' + timeIndex.toString()" @click="selectTimeClick(dateItem, timeItem)">
+                  {{timeItem.startTime}} - {{timeItem.endTime}}
+                </el-menu-item>
+              </el-menu-item-group>
+            </el-sub-menu>
+          </el-menu>
+        </el-scrollbar>
+      </el-aside>
+      <el-container class="ml20">
+        <el-main>
+          <el-scrollbar>
+            <el-table :data="userDataList">
+
+              <el-table-column prop="date" label="日期" width="200" />
+              <el-table-column prop="time" label="时间段" width="200" />
+
+              <el-table-column prop="id" label="ID" width="200" />
+              <el-table-column prop="username" label="名称" width="120" />
+              <el-table-column prop="mobile" label="手机号" />
+              <el-table-column label="头像" width="200" align="center">
+                <template #default="scope">
+                  <el-avatar :size="50" :src="scope.row.avatar" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-scrollbar>
+        </el-main>
+      </el-container>
+    </el-container>
+  </el-card>
+</template>
+
+<script setup>
+import { onMounted, ref, nextTick } from 'vue';
+import {Menu as IconMenu, Message, Setting, Calendar, CirclePlus} from '@element-plus/icons-vue';
+import {listQuantum} from "../../api/modules/schedulingTime";
+import {ElMessage} from "element-plus";
+import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
+import {listSurveyorsUser} from "../../api/modules/schedulingUser";
+
+const item = {
+  date: '2016-05-02',
+  name: 'Tom',
+  address: 'No. 189, Grove St, Los Angeles',
+};
+const tableData = ref(Array.from({ length: 5 }).fill(item));
+
+const scheduleForm = ref({
+  userids: [],
+  roleId: 2,
+  date: '',
+  timeQuantumId: '',
+});
+
+const direction = ref('rtl')
+const drawer = ref(false)
+const userList = ref([]); // 勘察人员列表
+
+// 日期列表
+const dateList = ref([]);
+const timeList = ref([]); // 时间段
+const timeDataList = ref([]); // 时间段
+const defaultOpeneds = ref([]);
+
+const userDataList = ref([]); // 已排期用户
+
+// 初始化
+const initData = () => {
+
+  const currentDate = new Date();
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth();
+
+  // 上个月的第一天和最后一天
+  const lastMonthFirstDay = new Date(currentYear, currentMonth - 1, 1);
+  const lastMonthLastDay = new Date(currentYear, currentMonth, 0);
+
+  // 这个月的第一天和最后一天
+  const thisMonthFirstDay = new Date(currentYear, currentMonth, 1);
+  const thisMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
+
+  // 下个月的第一天和最后一天
+  const nextMonthFirstDay = new Date(currentYear, currentMonth + 1, 1);
+  const nextMonthLastDay = new Date(currentYear, currentMonth + 2, 0);
+
+  // 添加上个月的日期
+  // for (let d = lastMonthFirstDay; d <= lastMonthLastDay; d.setDate(d.getDate() + 1)) {
+  //   dateList.value.push(formatDate(new Date(d)));
+  // }
+
+  // 添加这个月的日期
+  for (let d = thisMonthFirstDay; d <= thisMonthLastDay; d.setDate(d.getDate() + 1)) {
+    dateList.value.push(formatDate(new Date(d)));
+  }
+
+  // 添加下个月的日期
+  for (let d = nextMonthFirstDay; d <= nextMonthLastDay; d.setDate(d.getDate() + 1)) {
+    dateList.value.push(formatDate(new Date(d)));
+  }
+
+  // 找到今天的日期在 dateList 中的索引
+  const todayIndex = dateList.value.indexOf(formatDate(currentDate));
+  if (todayIndex !== -1) {
+    defaultOpeneds.value = todayIndex;
+  }
+
+  // 获取排班时段
+  listQuantum().then((res) => {
+
+    timeList.value = res.data;
+
+    timeDataList.value = res.data.map(item => ({
+      value: item.id,
+      label: `${item.startTime}-${item.endTime}`
+    }));
+
+    initSelectTimeClick(formatDate(currentDate), timeList.value);// 获取当天所有时段人员
+  })
+};
+
+// 监听选中状态
+const handleDateChange = (value) => {
+
+  if(!scheduleForm.value.date)
+  {
+    scheduleForm.value.timeQuantumId = '';
+
+    ElMessage({
+      type: 'warning',
+      message: '请先选择排班日期'
+    });
+    return;
+  }
+
+  if(!scheduleForm.value.timeQuantumId)
+  {
+    ElMessage({
+      type: 'warning',
+      message: '请继续选择排班时间段'
+    });
+    return;
+  }
+
+  // 查询勘察人员列表
+  let params = {
+    date: formatDate(scheduleForm.value.date),
+    timeQuantumId: scheduleForm.value.timeQuantumId
+  };
+
+  userList.value = [];
+
+  listSurveyorsUser(params).then((res)=>{
+
+    userList.value = res.data
+  });
+}
+
+// 添加排班人员
+const handleSaveSchedule = () => {
+
+  if(!scheduleForm.value.date){
+    ElMessage({
+      type: 'warning',
+      message: '请选择排班日期'
+    });
+    return;
+  }
+
+  if(!scheduleForm.value.timeQuantumId){
+    ElMessage({
+      type: 'warning',
+      message: '请选择排版时段'
+    });
+    return;
+  }
+
+  if(scheduleForm.value.userids.length < 1){
+    ElMessage({
+      type: 'warning',
+      message: '请选择人员'
+    });
+    return;
+  }
+
+  scheduleForm.value.date = formatDate(scheduleForm.value.date); //转换日期
+
+  // 添加人员
+  addSchedule(scheduleForm.value).then((res) => {
+
+    scheduleForm.value = {
+      userids: [],
+      roleId: 2,
+      date: '',
+      timeQuantumId: '',
+    }
+
+    drawer.value = false;
+    initData();
+
+    ElMessage({
+      type: 'success',
+      message: '新增成功！'
+    });
+
+  })
+
+};
+// 取消添加排班人员
+const handleCancelSchedule = () => {
+
+  drawer.value = false;
+
+  scheduleForm.value = {
+    userids: [],
+    roleId: 2,
+    date: '',
+    timeQuantumId: '',
+  };
+};
+
+// 禁止选择之前的日期
+const disablePastAndSpecificDates = (date) => {
+  // 获取当前日期
+  const currentDate = new Date();
+
+  currentDate.setDate(currentDate.getDate() - 1);
+
+  // 禁止选择今天的前一天及之前的日期（不包含今天）
+  if (date < currentDate) {
+    return true;
+  }
+
+  // 禁止选择特定的未来日期，例如节假日
+  const disabledDates = [new Date(2023, 9, 1), new Date(2023, 10, 1)];
+  return disabledDates.some((disabledDate) => {
+    return (
+        date.getFullYear() === disabledDate.getFullYear() &&
+        date.getMonth() === disabledDate.getMonth() &&
+        date.getDate() === disabledDate.getDate()
+    );
+  });
+};
+
+// 获取当天时间段所有人员
+const initSelectTimeClick = (dateItem, timeList) => {
+
+  let params = {
+    date: dateItem,
+    roleId: 2,
+  }
+
+  timeList.map(item => {
+
+    let params = {
+      date: dateItem,
+      roleId: 2,
+      timeQuantumId: item.id
+    }
+
+    // 获取用户数据
+    getScheduleList(params).then((res) => {
+
+      if(res.data.length)
+      {
+        res.data.map(resItem => {
+
+          resItem.date = params.date;
+          resItem.time = item.startTime + '-' + item.endTime;
+          userDataList.value.push(resItem);
+        })
+      }
+    })
+
+  })
+
+
+}
+// 获取用户列表
+const selectTimeClick = (dateItem, timeItem) => {
+
+  let params = {
+    date: dateItem,
+    roleId: 2,
+    timeQuantumId: timeItem.id
+  };
+
+  userDataList.value = [];
+
+  getScheduleList(params).then((res) => {
+
+
+    res.data.map(resItem => {
+
+      resItem.date = params.date;
+      resItem.time = timeItem.startTime + '-' + timeItem.endTime;
+      userDataList.value.push(resItem);
+    })
+
+  })
+}
+
+// 日期格式
+const formatDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style scoped>
+.mt10 {
+  margin-top: 10px;
+}
+.ml20 {
+  margin-left: 20px;
+}
+</style>
diff --git a/src/views/scheduling/timeFrame.vue b/src/views/scheduling/timeFrame.vue
new file mode 100644
index 0000000..fd0db66
--- /dev/null
+++ b/src/views/scheduling/timeFrame.vue
@@ -0,0 +1,320 @@
+<template>
+
+  <el-card class="mt10">
+
+      <el-button type="success" @click="drawer = true">
+        <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+        创建时段
+      </el-button>
+
+    <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
+      <template #header>
+        <h4 v-if="!editStatus">创建排班</h4>
+        <h4 v-else>更新排班</h4>
+      </template>
+      <template #default>
+
+        <el-form :model="formData" label-width="auto" style="max-width: 600px">
+
+          <el-form-item label="开始时间">
+            <el-time-select
+                v-model="formData.startTime"
+                :max-time="formData.endTime"
+                class="time-select"
+                placeholder="选择开始时间"
+                start="00:00:00"
+                end="23:59:59"
+                step="00:30:00"
+                format="HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item label="结束时间">
+            <el-time-select
+                v-model="formData.endTime"
+                :min-time="formData.startTime"
+                placeholder="结束时间"
+                start="00:00:00"
+                end="23:59:59"
+                step="00:30:00"
+                format="HH:mm:ss"
+            />
+          </el-form-item>
+
+          <el-form-item label="状态">
+            <el-switch
+                v-model="formData.flag"
+                inline-prompt
+                active-text="启用"
+                inactive-text="禁用"
+            />
+          </el-form-item>
+
+          <div style="display: flex;justify-content: center;margin-top: 50px">
+            <el-button  @click="handleCancel">取消</el-button>
+            <el-button type="success" @click="handleSave">确认</el-button>
+          </div>
+        </el-form>
+      </template>
+
+    </el-drawer>
+
+    <el-table
+        ref="table"
+        :data="tableData"
+        :default-sort="{ prop: 'date', order: 'descending' }"
+        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+        class="mt20"
+    >
+
+      <el-table-column
+          label="编号"
+          prop="id"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column label="时段" align="center">
+        <template #default="scope">
+          {{scope.row.startTime}}-{{scope.row.endTime}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" align="center">
+        <template #default="scope">
+          <el-switch
+              v-model="scope.row.flag"
+              inline-prompt
+              active-text="启用"
+              inactive-text="禁用"
+              @change="upStatus(scope.row)"
+          />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" width="280px" align="center">
+        <template v-slot:default="scope">
+            <el-button type="info" @click="editClick(scope.row)">编辑</el-button>
+            <el-popconfirm title="确认删除这个时间段吗?" @confirm="delQuantumClick(scope.row)">
+              <template #reference>
+                <el-button type="danger">删除</el-button>
+              </template>
+            </el-popconfirm>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+  </el-card>
+</template>
+<script setup>
+
+import {nextTick, onMounted, reactive, ref} from 'vue'
+import {addQuantum, delQuantum, listQuantum, updateQuantum} from "../../api/modules/schedulingTime";
+import {CirclePlus} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
+
+const tableData = ref([])
+const table = ref()
+
+const dialogVisible = ref(false)
+const total = ref(0)
+
+const drawer = ref(false)
+const editStatus = ref(false)
+const direction = ref('rtl');
+
+const formData = ref({
+  startTime: '',
+  endTime:'',
+  flag: true
+});
+
+// 初始化数据
+const initData = () => {
+
+  // 获取排班时段
+  listQuantum().then((res) => {
+    tableData.value = res.data
+  })
+}
+
+// 取消
+const handleCancel = () => {
+  drawer.value = false
+
+  formData.value = {
+    startTime: '',
+    endTime:'',
+    flag: false
+  };
+}
+
+// 提交数据
+const handleSave = () => {
+
+  if(!formData.value.startTime){
+    ElMessage({
+      type: 'warning',
+      message: '请选择开始时间段'
+    });
+    return;
+  }
+
+  if(!formData.value.endTime){
+    ElMessage({
+      type: 'warning',
+      message: '请选择结束时间段'
+    });
+    return;
+  }
+
+  if(!editStatus.value)
+  {
+    // 添加时间段
+    addQuantum(formData.value).then(res => {
+
+      initData();
+      drawer.value = false;
+
+      formData.value = {
+        startTime: '',
+        endTime:'',
+        flag: false
+      };
+
+      ElMessage({
+        type: 'success',
+        message: '添加成功'
+      });
+
+    });
+  }else{
+
+    // 修改数据
+    updateQuantum(formData.value).then((res) => {
+
+      editStatus.value = false;
+      drawer.value = false;
+
+      ElMessage({
+        message: '修改成功',
+        type: 'success',
+      });
+      initData();
+    })
+  }
+
+}
+
+// 删除时间段
+const delQuantumClick = (row) => {
+
+  let params = {
+    id:row.id
+  };
+
+  // 删除数据
+  delQuantum(params).then((res) => {
+
+    initData();
+
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    });
+
+  });
+}
+
+// 编辑数据
+const editClick = (row) => {
+
+  editStatus.value = true;
+  drawer.value = true;
+
+  formData.value = {...row}
+}
+
+// 启用禁用时间段
+const upStatus = (row) => {
+
+  let formData = {...row}
+
+  // 修改数据
+  updateQuantum(formData).then((res) => {
+
+    if(formData.flag)
+    {
+      ElMessage({
+        message: '启用成功',
+        type: 'success',
+      });
+    }else{
+      ElMessage({
+        message: '禁用成功',
+        type: 'success',
+      });
+    }
+    initData();
+  })
+}
+
+onMounted(() => {
+  initData()
+})
+</script>
+
+<style lang="scss" scoped>
+.mt-4 {
+  float: right;
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+.demo-form-inline {
+}
+
+.dragClass {
+  background: rgba($color: #41c21a, $alpha: 0.5) !important;
+}
+
+// 停靠
+.ghostClass {
+  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
+}
+
+// 选择
+.chosenClass:hover > td {
+  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
+}
+
+.icon-view {
+  font-size: 20px;
+  color: #673ab7;
+  margin: 0 10px;
+}
+
+.icon-edit {
+  font-size: 20px;
+  color: #2f60c2;
+  margin: 0 10px;
+}
+
+.icon-dele {
+  font-size: 20px;
+  color: #ff5722;
+}
+
+.btn-color {
+  background: #fff;
+  color: #4c60cc;
+}
+
+.expand-title {
+  padding: 10px;
+  color: #919399;
+  font-weight: 600;
+}
+</style>
diff --git a/src/views/system/activity.vue b/src/views/system/activity.vue
index 6bc840d..b849af5 100644
--- a/src/views/system/activity.vue
+++ b/src/views/system/activity.vue
@@ -1,16 +1,13 @@
 <template>
-  <el-card>
+  <el-card class="mt10">
 
-    <el-row :gutter="10">
+    <el-button type="success" @click="drawer = true">
+      <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
+      创建活动
+    </el-button>
 
-      <el-col :span="4">
-        <el-button type="success" @click="drawer = true">
-          <el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
-          创建活动
-        </el-button>
-      </el-col>
-
-      <el-col :span="4">
+    <el-form :inline="true" :model="formSearch" class="mt10">
+      <el-form-item label="活动名称">
         <el-input
             v-model="searchName"
             style="max-width: 300px"
@@ -19,14 +16,16 @@
             onchange="searchEvnt"
         >
 
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
         </el-input>
-      </el-col>
-    </el-row>
+      </el-form-item>
 
-    <el-drawer v-model="drawer" :direction="direction">
+      <el-form-item>
+        <el-button type="primary" @click="onSearchSubmit">搜索</el-button>
+      </el-form-item>
+
+    </el-form>
+
+    <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
       <template #header>
         <h4>创建活动</h4>
       </template>
@@ -80,9 +79,6 @@
 
     </el-drawer>
 
-  </el-card>
-
-  <el-card class="mt10">
     <el-table
         ref="table"
         :data="tableData"
@@ -90,7 +86,7 @@
         :header-cell-style="{ backgroundColor: '#ecf5ff' }"
         border
         stripe
-        style="width: 100%"
+        class="mt10"
     >
 
       <el-table-column
@@ -143,7 +139,7 @@
 
     </el-table>
     <el-pagination
-        small
+        size="small"
         background
         layout="prev, pager, next"
         :total="tableData.length"
@@ -159,14 +155,14 @@ import {
   InfoFilled,
   View,
   ArrowDownBold,
-  Plus,
+  Plus, CirclePlus,
 } from '@element-plus/icons-vue'
 import {nextTick, onMounted, reactive, ref} from 'vue'
 
 import {ElMessage} from "element-plus";
 import {addFile} from "../../api/modules/upload";
 import {getConfigList, updateSystem} from "../../api/modules/system";
-
+const direction = ref('rtl');
 const tableData = ref([])
 const dataList = ref([])
 const table = ref()
@@ -186,6 +182,10 @@ const queryData = ref({
   size: 10,
 })
 
+const formSearch = ref({
+  searchName:'',
+});
+
 const formData = ref({
   id: 1,
   title: '',
@@ -421,7 +421,7 @@ const handleCurrentChange = (val) => {
 }
 
 // 搜索事件
-const searchEvnt = ()=> {
+const onSearchSubmit = ()=> {
   console.log('点击搜索');
 };
 
diff --git a/src/views/system/homeSite.vue b/src/views/system/homeSite.vue
index df16451..e94a44d 100644
--- a/src/views/system/homeSite.vue
+++ b/src/views/system/homeSite.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card>
+  <el-card class="mt10">
 
     <el-button type="success" @click="drawer = true">
       上传首页图
@@ -8,7 +8,7 @@
       </el-icon>
     </el-button>
 
-    <el-drawer v-model="drawer">
+    <el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
       <template #header>
         <h4>上传图片</h4>
       </template>
@@ -47,9 +47,7 @@
       </template>
 
     </el-drawer>
-  </el-card>
 
-  <el-card class="mt10">
     <el-table
         ref="table"
         :data="tableData"
@@ -57,7 +55,7 @@
         :header-cell-style="{ backgroundColor: '#ecf5ff' }"
         border
         stripe
-        style="width: 100%"
+        class="mt10"
     >
 
       <el-table-column
@@ -71,7 +69,7 @@
 
       <el-table-column label="首页图" align="center">
         <template #default="scope">
-          <el-image style="width: 600px; height: 50px" :src="scope.row.img" :fit="fit" lazy/>
+          <el-image style="width: 600px; height: 50px" :src="scope.row.img" lazy/>
         </template>
       </el-table-column>
 
@@ -110,7 +108,7 @@ const tableData = ref([])
 const table = ref()
 const dialogVisible = ref(false)
 const total = ref(0)
-
+const direction = ref('rtl');
 const drawer = ref(false)
 const queryData = ref({
   keyWord: '',
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 32f5f5c..ff10aed 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -1,39 +1,33 @@
 <template>
-  <el-card>
+  <el-card class="mt10">
 
-    <el-row :gutter="10">
-      <el-col :span="4">
-        <div class="block">
-          <el-date-picker
-              v-model="registerDate"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="注册开始日期"
-              end-placeholder="注册截至日期"
-              :size="size"
-          />
-        </div>
-      </el-col>
-      <el-col :span="4">
+    <el-form :inline="true" :model="queryData"  class="mt20">
+      <el-form-item label="注册时间">
+        <el-date-picker
+            v-model="registerDate"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="注册开始日期"
+            end-placeholder="注册截至日期"
+        />
+      </el-form-item>
+
+      <el-form-item label="微信昵称">
         <el-input
             v-model="searchName"
             style="max-width: 300px"
             placeholder="模糊查询微信昵称"
             class="input-with-select"
             onchange="searchEvnt"
-        >
+        />
+      </el-form-item>
 
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-    </el-row>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentChange">查询</el-button>
+      </el-form-item>
 
+    </el-form>
 
-  </el-card>
-
-  <el-card class="mt10">
     <el-table
         ref="table"
         :data="tableData"
@@ -41,7 +35,7 @@
         :header-cell-style="{ backgroundColor: '#ecf5ff' }"
         border
         stripe
-        style="width: 100%"
+        class="mt10"
     >
 
       <el-table-column
diff --git a/src/views/users/reconnaissance.vue b/src/views/users/reconnaissance.vue
index 1361709..cbed561 100644
--- a/src/views/users/reconnaissance.vue
+++ b/src/views/users/reconnaissance.vue
@@ -1,69 +1,44 @@
 <template>
-  <el-card>
+  <el-card class="mt10">
 
-    <el-row :gutter="10">
-      <el-col :span="4">
-        <div class="block">
-          <el-date-picker
-              v-model="registerDate"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="注册开始日期"
-              end-placeholder="注册截至日期"
-              :size="size"
-          />
-        </div>
-      </el-col>
-      <el-col :span="4">
+    <el-form :inline="true" :model="queryData"  class="mt20">
+      <el-form-item label="注册时间">
+        <el-date-picker
+            v-model="registerDate"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="注册开始日期"
+            end-placeholder="注册截至日期"
+        />
+      </el-form-item>
+
+      <el-form-item label="微信昵称">
         <el-input
             v-model="searchName"
             style="max-width: 300px"
             placeholder="模糊查询微信昵称"
             class="input-with-select"
             onchange="searchEvnt"
-        >
+        />
+      </el-form-item>
 
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-
-      <el-col :span="4">
+      <el-form-item label="微信昵称">
         <el-input
             v-model="searchName"
             style="max-width: 300px"
-            placeholder="模糊查询名字"
+            placeholder="模糊查询微信昵称"
             class="input-with-select"
             onchange="searchEvnt"
-        >
+        />
+      </el-form-item>
 
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentChange">查询</el-button>
+      </el-form-item>
 
-      <el-col :span="4">
-        <el-input
-            v-model="searchName"
-            style="max-width: 300px"
-            placeholder="模糊查询手机号"
-            class="input-with-select"
-            onchange="searchEvnt"
-        >
-
-          <template #append>
-            <el-button type="success"  @click="searchEvnt">查询</el-button>
-          </template>
-        </el-input>
-      </el-col>
-    </el-row>
+    </el-form>
 
 
-  </el-card>
-
-  <el-card class="mt10">
     <el-table
         ref="table"
         :data="tableData"
@@ -71,7 +46,7 @@
         :header-cell-style="{ backgroundColor: '#ecf5ff' }"
         border
         stripe
-        style="width: 100%"
+        class="mt10"
     >
 
       <el-table-column
@@ -114,7 +89,7 @@
 
     </el-table>
     <el-pagination
-        small
+        size="small"
         background
         layout="prev, pager, next"
         :total="tableData.length"