diff --git a/src/resource-scheduler/components/schedule-table/schedule-table.scss b/src/resource-scheduler/components/schedule-table/schedule-table.scss
index 6d9c5829631e65f57a9fbfdb449172bdfd9fbed3..f45f3d814c8eb7e2dac2d378722fa165f6775e91 100644
--- a/src/resource-scheduler/components/schedule-table/schedule-table.scss
+++ b/src/resource-scheduler/components/schedule-table/schedule-table.scss
@@ -28,4 +28,8 @@
         width: 100%;
         min-height: 100%;
     }
+
+    .schedule-toolbar-extra{
+        height: 40px;
+    }
 }
\ No newline at end of file
diff --git a/src/resource-scheduler/components/schedule-table/schedule-table.tsx b/src/resource-scheduler/components/schedule-table/schedule-table.tsx
index 6b25fb1dd5c8fbe84a9fedd528c0352f94d19583..3129b83eca33cec56dfc2b097673dbe3134d29d5 100644
--- a/src/resource-scheduler/components/schedule-table/schedule-table.tsx
+++ b/src/resource-scheduler/components/schedule-table/schedule-table.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { computed, defineComponent, PropType, ref, useSlots } from 'vue';
 import {
   IResourceViewModel,
   IScheduleResource,
@@ -13,10 +13,14 @@ import {
   useScheduleTableStyle,
   useVirtualScroll,
 } from '../../hooks/use-schedule-table';
+import { ScheduleToolbar } from '../schedule-toolbar/schedule-toolbar';
 import './schedule-table.scss';
 
 export const ScheduleTable = defineComponent({
   name: 'ScheduleTable',
+  components: {
+    ScheduleToolbar,
+  },
   props: {
     resources: {
       type: Array as PropType<IScheduleResource[]>,
@@ -102,14 +106,23 @@ export const ScheduleTable = defineComponent({
     initStore(props, emit);
 
     // 初始化表格
-    const { resourceViewModels, taskViewModels } = useInitScheduleTable(
-      headerCanvas,
-      bodyCanvas,
-      coordinateElement,
-    );
+    const {
+      resourceViewModels,
+      taskViewModels,
+      onRefresh,
+      onSave,
+      onSaveAs,
+      onConfigRefresh,
+    } = useInitScheduleTable(headerCanvas, bodyCanvas, coordinateElement);
+
+    // 插槽
+    const slots = useSlots();
 
     // 计算表格样式
-    const { headerStyle, bodyStyle } = useScheduleTableStyle(props);
+    const { headerStyle, bodyStyle } = useScheduleTableStyle(
+      props,
+      slots && !!slots.extraToolbar,
+    );
 
     // 监听视图大小变化
     useScheduleTableReSize(props, headerCanvas, bodyCanvas, coordinateElement);
@@ -150,11 +163,29 @@ export const ScheduleTable = defineComponent({
       visibleTaskViewModels,
       handleScroll,
       visibleRange,
+      onRefresh,
+      onSave,
+      onSaveAs,
+      onConfigRefresh,
     };
   },
   render() {
     return (
       <div class='schedule-table'>
+        <div class='schedule-toolbar'>
+          <ScheduleToolbar
+            parentProps={this.$props}
+            onRefresh={this.onRefresh}
+            onSave-as={this.onSaveAs}
+            onSave={this.onSave}
+            onConfig-change={this.onConfigRefresh}
+          ></ScheduleToolbar>
+          {this.$slots.extraToolbar ? (
+            <div class='schedule-toolbar-extra'>
+              {this.$slots.extraToolbar()}
+            </div>
+          ) : null}
+        </div>
         <div class='schedule-table-header' style={this.headerStyle}>
           <canvas
             ref='headerCanvas'
diff --git a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.scss b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..72c5d9b854e6f81031cea277b7002abb5cd19797
--- /dev/null
+++ b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.scss
@@ -0,0 +1,76 @@
+.schedule-toolbar {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: left;
+  height: 40px;
+  padding: 4px;
+}
+
+.schedule-toolbar-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 100%;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 4px;
+
+  &.is-btn{
+    border: 1px solid lightgray;
+  }
+
+  &.is-btn:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.schedule-toolbar-days {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+
+  .schedule-toolbar-days-reduce,
+  .schedule-toolbar-days-add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+}
+
+.schedule-toolbar-trains-standards {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.schedule-toolbar-scale-list {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.schedule-toolbar-date-picker-container{
+  position: relative;
+  cursor: pointer;
+}
+
+.schedule-toolbar-date-picker{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -10;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
diff --git a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..006b6fca6c1c86567ce32c3861abc9cd00c77a10
--- /dev/null
+++ b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx
@@ -0,0 +1,399 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { defineComponent, ref } from 'vue';
+import './schedule-toolbar.scss';
+import { any } from 'ramda';
+import { useInitScheduleToolbar } from '../../hooks/use-schedule-toolbar';
+
+export const ScheduleToolbar = defineComponent({
+  props: {
+    parentProps: {
+      type: any,
+    },
+  },
+  emits: ['save', 'save-as', 'refresh', 'config-change'],
+  setup(props, { emit }) {
+    // 默认小时间隔
+    const hours = ref(1);
+    // 默认显示天数
+    const days = ref(7);
+
+    // 日期选择器
+    const datePickerRef = ref();
+
+    // 是否显示日期选择器
+    const isShowDatePicker = ref(false);
+
+    // 开始时间
+    const tempStartTime = ref(3);
+    // 结束时间
+    const tempEndTime = ref(3);
+
+    // 训练日标准
+    const trainsStandards = ref();
+
+    const {
+      currentDay,
+      scale,
+      onRefresh,
+      onJupmToNow,
+      onMonthChange,
+      onWeekChange,
+      onDateChange,
+      onLockClick,
+      onHoursChange,
+      onDaysChange,
+      onDaysClickChange,
+      onScaleChange,
+      onDatePickerChange,
+      onSave,
+      onSaveAs,
+    } = useInitScheduleToolbar(emit);
+
+    // 渲染小时列表
+    const renderHoursList = (_hours: number = 24) => {
+      const options = [];
+      for (let i = 1; i <= _hours; i++) {
+        options.push({
+          value: i,
+          label: `${i}小时`,
+        });
+      }
+      return (
+        <el-select
+          v-model={hours.value}
+          style='width: 150px'
+          onChange={onHoursChange}
+        >
+          {options.map(item => {
+            return (
+              <el-option
+                key={item.value}
+                label={item.label}
+                value={item.value}
+              />
+            );
+          })}
+        </el-select>
+      );
+    };
+
+    // 渲染显示天数列表
+    const renderDaysList = (_days: number = 7) => {
+      const options = [];
+      for (let i = 1; i <= _days; i++) {
+        options.push({
+          value: i,
+          label: `${i}天`,
+        });
+      }
+      return (
+        <div class='schedule-toolbar-days'>
+          <div
+            class='schedule-toolbar-days-add'
+            title='增加天数'
+            onClick={() => onDaysClickChange(1)}
+          >
+            <i class='fa fa-calendar-plus-o' aria-hidden='true' />
+          </div>
+          <el-select
+            v-model={days.value}
+            style='width: 150px'
+            onChange={onDaysChange}
+          >
+            {options.map(item => {
+              return (
+                <el-option
+                  key={item.value}
+                  label={item.label}
+                  value={item.value}
+                />
+              );
+            })}
+          </el-select>
+          <div
+            class='schedule-toolbar-days-reduce'
+            title='减少天数'
+            onClick={() => onDaysClickChange(-1)}
+          >
+            <i class='fa fa-calendar-minus-o' aria-hidden='true' />
+          </div>
+        </div>
+      );
+    };
+
+    // 渲染开始时间列表1-todo
+    const rendertempStartTime = (max: number = 24) => {
+      const options = [];
+      for (let i = 1; i <= max; i++) {
+        options.push({
+          value: i,
+          label: i,
+        });
+      }
+      return (
+        <el-select
+          v-model={tempStartTime.value}
+          style='width: 100px'
+          placeholder='请选择'
+        >
+          {options.map(item => {
+            return (
+              <el-option
+                key={item.value}
+                label={item.label}
+                value={item.value}
+              />
+            );
+          })}
+        </el-select>
+      );
+    };
+
+    // 渲染结束时间列表2-todo
+    const rendertempEndTime = (max: number = 24) => {
+      const options = [];
+      for (let i = 1; i <= max; i++) {
+        options.push({
+          value: i,
+          label: `(+1)${i}`,
+        });
+      }
+      return (
+        <el-select
+          v-model={tempEndTime.value}
+          style='width: 100px'
+          placeholder='请选择'
+        >
+          {options.map(item => {
+            return (
+              <el-option
+                key={item.value}
+                label={item.label}
+                value={item.value}
+              />
+            );
+          })}
+        </el-select>
+      );
+    };
+
+    // 渲染训练日标准下拉-todo
+    const renderTrainsStandards = (
+      startMax: number = 24,
+      endMax: number = 24,
+    ) => {
+      const options = [];
+      for (let i = 0; i < startMax; i++) {
+        for (let j = 0; j < endMax; j++) {
+          options.push({
+            value: [i, j],
+            label: `${i}:00 - (+1)${j}:00`,
+          });
+        }
+      }
+      return (
+        <div class='schedule-toolbar-trains-standards'>
+          <div>训练日标准</div>
+          <el-select
+            v-model={trainsStandards.value}
+            style='width: 150px'
+            placeholder='请选择'
+          >
+            {options.map(item => {
+              return (
+                <el-option
+                  key={item.value}
+                  label={item.label}
+                  value={item.value}
+                />
+              );
+            })}
+          </el-select>
+        </div>
+      );
+    };
+
+    // 渲染刻度下拉
+    const renderScaleList = (scaleMax: number = 24) => {
+      const options = [
+        {
+          value: 0,
+          label: '自动',
+        },
+      ];
+      for (let i = 1; i < scaleMax; i++) {
+        options.push({
+          value: i,
+          label: `${i}`,
+        });
+      }
+      return (
+        <div class='schedule-toolbar-scale-list'>
+          <div>刻度</div>
+          <el-select
+            v-model={scale.value}
+            style='width: 100px'
+            placeholder='请选择'
+            onChange={onScaleChange}
+          >
+            {options.map(item => {
+              return (
+                <el-option
+                  key={item.value}
+                  label={item.label}
+                  value={item.value}
+                />
+              );
+            })}
+          </el-select>
+        </div>
+      );
+    };
+
+    // 日期选择器点击
+    const onDateClick = () => {
+      if (datePickerRef.value && !isShowDatePicker.value) {
+        datePickerRef.value.focus();
+      }
+    };
+
+    // 日期选择器显示隐藏改变
+    const onVisibleChange = (visible: boolean) => {
+      isShowDatePicker.value = visible;
+    };
+
+    return {
+      currentDay,
+      datePickerRef,
+      onSave,
+      onSaveAs,
+      onRefresh,
+      onJupmToNow,
+      onMonthChange,
+      onWeekChange,
+      onDateChange,
+      onLockClick,
+      onDateClick,
+      onDatePickerChange,
+      onVisibleChange,
+      renderHoursList,
+      renderDaysList,
+      rendertempStartTime,
+      rendertempEndTime,
+      renderTrainsStandards,
+      renderScaleList,
+    };
+  },
+  render() {
+    return (
+      <div class='schedule-toolbar'>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='保存'
+          onClick={this.onSave}
+        >
+          <i class='fa fa-save' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='另存为'
+          onClick={this.onSaveAs}
+        >
+          <i class='fa fa-files-o' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='刷新'
+          onClick={this.onRefresh}
+        >
+          <i class='fa fa-refresh' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='现在'
+          onClick={this.onJupmToNow}
+        >
+          <i class='fa fa-clock-o' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn schedule-toolbar-date-picker-container'
+          title='选择日期'
+          onClick={this.onDateClick}
+        >
+          <el-date-picker
+            ref='datePickerRef'
+            class='schedule-toolbar-date-picker'
+            v-model={this.currentDay}
+            type='date'
+            onChange={this.onDatePickerChange}
+            onVisibleChange={this.onVisibleChange}
+          />
+          <i
+            class='fa fa-calendar schedule-toolbar-date-picker-trigger'
+            aria-hidden='true'
+          />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='上一个月'
+          onClick={() => this.onMonthChange(-1)}
+        >
+          <i class='fa fa-arrow-left' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='上一周'
+          onClick={() => this.onWeekChange(-1)}
+        >
+          <i class='fa fa-long-arrow-left' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='上一天'
+          onClick={() => this.onDateChange(-1)}
+        >
+          <i class='fa fa-arrow-circle-o-left' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='下一天'
+          onClick={() => this.onDateChange(1)}
+        >
+          <i class='fa fa-arrow-circle-o-right' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='下一周'
+          onClick={() => this.onWeekChange(1)}
+        >
+          <i class='fa fa-long-arrow-right' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='下一月'
+          onClick={() => this.onMonthChange(1)}
+        >
+          <i class='fa fa-arrow-right' aria-hidden='true' />
+        </div>
+        <div
+          class='schedule-toolbar-item is-btn'
+          title='锁定'
+          onClick={this.onLockClick}
+        >
+          <i class='fa fa-lock' aria-hidden='true' />
+        </div>
+        <div class='schedule-toolbar-item' title='小时列表'>
+          {this.renderHoursList()}
+        </div>
+        <div class='schedule-toolbar-item' title='显示天数'>
+          {this.renderDaysList(30)}
+        </div>
+        <div class='schedule-toolbar-item'>{this.rendertempStartTime()}</div>
+        <div class='schedule-toolbar-item'>{this.rendertempEndTime()}</div>
+        <div class='schedule-toolbar-item'>{this.renderTrainsStandards()}</div>
+        <div class='schedule-toolbar-item'>{this.renderScaleList()}</div>
+      </div>
+    );
+  },
+});
diff --git a/src/resource-scheduler/hooks/use-schedule-table.ts b/src/resource-scheduler/hooks/use-schedule-table.ts
index ba765bde4e826c6b611ee1dc0b0479b43fa082b8..45be000027f4e052ec3b6579a44559607ba6b803 100644
--- a/src/resource-scheduler/hooks/use-schedule-table.ts
+++ b/src/resource-scheduler/hooks/use-schedule-table.ts
@@ -13,7 +13,7 @@ import { debounce } from '../utils';
 import { IResourceViewModel, ITaskViewModel } from '../interface';
 
 // 组件样式
-export function useScheduleTableStyle(props: any): {
+export function useScheduleTableStyle(props: any,hasExtraToolbar: boolean = false): {
   headerStyle: WritableComputedRef<Record<string, string>>;
   bodyStyle: WritableComputedRef<Record<string, string>>;
 } {
@@ -29,7 +29,7 @@ export function useScheduleTableStyle(props: any): {
   const bodyStyle = computed(() => {
     return {
       width: '100%',
-      height: `calc(100% - ${props.headerRowHeight * 2}px)`,
+      height: `calc(100% - ${props.headerRowHeight * 2}px - 40px - ${hasExtraToolbar ? '40px' : '0px'})`,
     };
   });
 
@@ -44,8 +44,12 @@ export function useInitScheduleTable(
 ): {
   resourceViewModels: Ref<IResourceViewModel[]>;
   taskViewModels: Ref<ITaskViewModel[]>;
+  onRefresh:(params: any) => void,
+  onSave:(params: any) => void,
+  onSaveAs:(params: any) => void,
+  onConfigRefresh: (params: any) => void,
 } {
-  const { $bgLayer, $renderLayer, $uiCoordinate } = useStore();
+  const { $config, $bgLayer, $renderLayer, $uiCoordinate } = useStore();
 
   // 资源视图模型
   const resourceViewModels = computed(() => $renderLayer.resourceViewModels);
@@ -67,7 +71,52 @@ export function useInitScheduleTable(
       $renderLayer.buildViewModels($uiCoordinate);
     }
   });
-  return { resourceViewModels, taskViewModels };
+
+  // 刷新-todo
+  const onRefresh = () => {
+    console.log('刷新');
+  };
+
+  // 保存
+  const onSave = () => {
+    console.log('保存');
+  };
+
+  // 另存为
+  const onSaveAs = () => {
+    console.log('另存为');
+  };
+
+  // 配置刷新
+  const onConfigRefresh = (_config: any) => {
+    console.log('配置更新');
+
+    const config = {
+      ...$config.getConfig(),
+      ..._config,
+    };
+    $config.setConfig(config);
+    $uiCoordinate.buildCoordinate(
+      coordinateElement.value,
+      $renderLayer.getResources(),
+    );
+
+    $uiCoordinate.buildCoordinate(
+      coordinateElement.value,
+      $renderLayer.getResources(),
+    );
+    // 重绘
+    $bgLayer.draw($uiCoordinate,$renderLayer.getResources());
+  };
+
+  return {
+    resourceViewModels,
+    taskViewModels,
+    onRefresh,
+    onSave,
+    onSaveAs,
+    onConfigRefresh,
+  };
 }
 
 // 处理视图大小变更
diff --git a/src/resource-scheduler/hooks/use-schedule-toolbar.ts b/src/resource-scheduler/hooks/use-schedule-toolbar.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f65abb3f8f0b97bad0151781e863fcd8db305202
--- /dev/null
+++ b/src/resource-scheduler/hooks/use-schedule-toolbar.ts
@@ -0,0 +1,135 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+
+import { ref } from 'vue';
+import Variables from '../constant/vars';
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+export function useInitScheduleToolbar(
+  emit: any = (eventStr: string, data: any) => {},
+) {
+  // 当前激活日期
+  const currentDay = ref(new Date());
+  // 刻度
+  const scale = ref(0);
+
+  const onRefresh = () => {
+    console.log('refresh');
+    emit('refresh');
+  };
+
+  // 配置改变刷新
+  const onConfigChangeRefresh = (_config: any = {}) => {
+    emit('config-change', _config);
+  };
+
+  // 跳转到当前时间
+  const onJupmToNow = () => {
+    console.log('jupmToNow');
+    currentDay.value = new Date();
+    onConfigChangeRefresh({
+      startTime: currentDay.value,
+      endTime: new Date(currentDay.value.getTime() + 86400000 * 15),
+    });
+  };
+
+  // 月份改变 统一按照31天间隔进行计算
+  const onMonthChange = (month: number) => {
+    console.log('onMonthChange');
+    const time = Variables.time.millisecondOf.day * 31 * month;
+    currentDay.value = new Date(currentDay.value.getTime() + time);
+    onConfigChangeRefresh({
+      startTime: currentDay.value,
+      endTime: new Date(currentDay.value.getTime() + 86400000 * 15),
+    });
+  };
+
+  // 周改变
+  const onWeekChange = (week: number) => {
+    console.log('onWeekChange');
+    const time = Variables.time.millisecondOf.week * week;
+    currentDay.value = new Date(currentDay.value.getTime() + time);
+    onConfigChangeRefresh({
+      startTime: currentDay.value,
+      endTime: new Date(currentDay.value.getTime() + 86400000 * 15),
+    });
+  };
+
+  // 天改变
+  const onDateChange = (day: number) => {
+    console.log('onDateChange');
+    const time = Variables.time.millisecondOf.day * day;
+    currentDay.value = new Date(currentDay.value.getTime() + time);
+    onConfigChangeRefresh({
+      startTime: currentDay.value,
+      endTime: new Date(currentDay.value.getTime() + 86400000 * 15),
+    });
+  };
+
+  // 锁定按钮点击
+  const onLockClick = () => {
+    console.log('onLockClick');
+  };
+
+  // 小时改变
+  const onHoursChange = (_value: number) => {
+    console.log('onHoursChange');
+  };
+
+  // 天数改变
+  const onDaysChange = (_value: number) => {
+    console.log('onDaysChange');
+  };
+
+  // 点击增加或减少天数
+  const onDaysClickChange = (_value: number) => {
+    console.log('onDaysClickChange');
+  };
+
+  // 刻度改变
+  const onScaleChange = () => {
+    console.log('onScaleChange');
+    onConfigChangeRefresh({
+      scaleValue: scale.value || 2,
+    });
+  };
+
+  // 日期选择器改变
+  const onDatePickerChange = (_value: string) => {
+    console.log('日期选择器改变');
+    onConfigChangeRefresh({
+      startTime: currentDay.value,
+      endTime: new Date(
+        currentDay.value.getTime() + Variables.time.millisecondOf.day * 15,
+      ),
+    });
+  };
+
+  const onSave = () => {
+    console.log('保存');
+    emit('save');
+  };
+
+  const onSaveAs = () => {
+    console.log('另存为');
+    emit('save-as');
+  };
+
+  return {
+    currentDay,
+    scale,
+    onJupmToNow,
+    onMonthChange,
+    onWeekChange,
+    onDateChange,
+    onLockClick,
+    onHoursChange,
+    onDaysChange,
+    onDaysClickChange,
+    onScaleChange,
+    onDatePickerChange,
+    onSave,
+    onSaveAs,
+    onRefresh,
+  };
+}