diff --git a/src/assets/icon/gif.svg b/src/assets/icon/gif.svg
new file mode 100644
index 00000000..9258f631
--- /dev/null
+++ b/src/assets/icon/gif.svg
@@ -0,0 +1 @@
+<svg data-v-58697b5c="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#00E9FE" d="M704 768V256H128v512zm64-416 192-96v512l-192-96v128a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V224a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32zm0 71.552v176.896l128 64V359.552zM192 320h192v64H192z"></path></svg>
\ No newline at end of file
diff --git a/src/pages/tqybjs/tab-3/index.vue b/src/pages/tqybjs/tab-3/index.vue
new file mode 100644
index 00000000..9cf2c637
--- /dev/null
+++ b/src/pages/tqybjs/tab-3/index.vue
@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { ElButton, ElOption, TableInstance, UploadInstance } from 'element-plus';
+import dayjs from 'dayjs';
+import { ElMessage } from 'element-plus';
+import { ref, reactive } from 'vue'; // 引入 Vue 的 set 方法
+import { useI18n } from 'vue-i18n';
+import { getData, getTaskLog } from '@/utils/axios/tqyb/task';
+import log from '../log/index.vue';
+
+const emit = defineEmits(['playback']);
+const { t } = useI18n();
+const configVisible = ref(false);
+const configType = ref('');
+/* 新增、编辑表单 */
+const configForm = ref<any>({});
+
+// 定义 ref 的类型
+const fileInput: Ref<HTMLInputElement | null> = ref(null);
+
+const taskList = ref<any[]>([]);
+const logData = ref<any>([]);
+
+const currentPage = ref(1);
+const pageSize = ref(20);
+const total = ref(0);
+
+// 存储当前选中项
+const currentSelection = ref<any>([]);
+const multipleTableRef = ref<TableInstance>();
+const logVisible = ref(false);
+
+/* drawer侧边栏表单 */
+const form = ref<any>({});
+
+/* 任务列表搜索表单 */
+const searchForm = reactive({});
+
+interface OptionItem {
+  label: string;
+  value: number;
+}
+const taskStatusList = ref<OptionItem[]>([
+  // -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过
+  { label: '执行失败', value: -1 },
+  { label: '未开始', value: 0 },
+  { label: '等待中', value: 1 },
+  { label: '运行中', value: 2 },
+  { label: '已完成', value: 3 },
+  { label: '检查未通过', value: 4 },
+]);
+
+function search() {
+  console.log('搜索条件：', searchForm);
+  getList();
+}
+
+function getList() {
+  let startDate, endDate;
+  if (searchForm.createTime && searchForm.createTime.length) {
+    startDate = searchForm.createTime[0];
+    endDate = searchForm.createTime[1];
+  }
+  getData({
+    ...searchForm,
+    startDate,
+    endDate,
+    pageSize: pageSize.value,
+    pageNum: currentPage.value,
+  }, (res) => {
+    taskList.value = res.rows;
+    total.value = res.total;
+  });
+}
+
+function refresh() {
+  console.log('刷新任务列表');
+  getList();
+}
+
+function showLog(task: any) {
+  console.log('显示运行日志');
+  getTaskLog({ taskId: task.id }, (res) => {
+    console.log('res', res);
+    logData.value = res;
+    logVisible.value = true;
+  });
+}
+
+function handleSelectionChange(selection: any[]) {
+  // multipleTableRef.value!.clearSelection()
+  // multipleSelection.value = val
+  // 如果选中项长度大于1，说明是新选择了一项
+  if (selection.length > 1) {
+    // 清除之前的选择，只保留最新选中的项
+    const latestSelection = selection[selection.length - 1];
+    multipleTableRef.value?.clearSelection(); // 清空所有选择
+    multipleTableRef.value?.toggleRowSelection(latestSelection, true); // 选中最新项
+    currentSelection.value = [latestSelection];
+  }
+  else {
+    // 正常选择或取消选择
+    currentSelection.value = selection;
+  }
+
+  console.log('当前选中项:', currentSelection.value);
+}
+function playback() {
+  console.log('当前选中项:', currentSelection.value);
+  if (Object.keys(currentSelection.value).length === 0) {
+    ElMessage({
+      type: 'warning',
+      message: t(`isSelect`),
+    });
+  }
+  else {
+    const startTime = dayjs(currentSelection.value[0].startDate).add(0, 'hour').format('YYYY-MM-DD HH:mm:ss');
+    const params = {
+      dataType: currentSelection.value[0].predictionModel,
+      weatherType: 3,
+      startTime,
+      endTime: dayjs(startTime).add(currentSelection.value[0].leadTime, 'hour').format('YYYY-MM-DD HH:mm:ss'),
+      // hour: currentSelection.value[0].leadTime,
+      hour: 0,
+    };
+    emit('playback', params);
+    EventBusTool.getEventBus().publish('playData', {
+      key: 'setTaishiParam',
+      dataType: currentSelection.value[0].predictionModel,
+      weatherType: 3,
+      startTime,
+      // hour: currentSelection.value[0].leadTime,
+      hour: 0,
+      endTime: dayjs(startTime).add(currentSelection.value[0].leadTime, 'hour').format('YYYY-MM-DD HH:mm:ss'),
+
+    });
+  }
+}
+
+function handleClick(): void {
+  if (fileInput.value) {
+    fileInput.value.value = '';
+    fileInput.value.click();
+  }
+}
+// 处理文件选择事件
+function handleFileChange(event: Event): void {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) {
+    console.warn('未选择文件');
+    return;
+  }
+
+  configForm.value.file = file;
+  configForm.value.inputFile = file.name;
+  // const formData = new FormData();
+  //   // 创建 FormData 对象
+  //   formData.append('inputFile', file.name);
+  //   formData.append('file', file);
+
+  // 调用接口，现在importTask只需要formData和callback
+  // importFile(formData, (res:any) => {
+  //   console.log('接口响应:', res);
+  //   getList();
+  // });
+}
+
+function handleSizeChange(val: number) {
+  console.log(`${val} items per page`);
+  pageSize.value = val;
+  getList();
+}
+function handleCurrentChange(val: number) {
+  console.log(`current page: ${val}`);
+  currentPage.value = val;
+  getList();
+}
+getList();
+</script>
+
+<template>
+  <div class="ycrw">
+    <!-- 主表 -->
+    <ElForm :inline="true" :model="searchForm" class="custom-form">
+      <ElFormItem label="">
+        <ElInput v-model="searchForm.taskName" :placeholder="`${t('keyword')}...`" class="custom-input" />
+      </ElFormItem>
+      <ElFormItem :label="t('taskStatus')">
+        <ElSelect v-model="searchForm.taskStatus" :placeholder="t('pleaseSelect')" clearable class="custom-select">
+          <ElOption v-for="item in taskStatusList" :key="item.value" :label="item.label" :value="item.value" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem :label="t('predictionDate')">
+        <ElDatePicker v-model="searchForm.createTime" value-format="YYYY-MM-DD" type="daterange" range-separator="--"
+          :start-placeholder="t('startDate')" :end-placeholder="t('endDate')" class="custom-date-picker" />
+      </ElFormItem>
+      <ElFormItem>
+        <ElButton type="primary" class="custom-btn" icon="Search" @click="search">
+          {{ t('search') }}
+        </ElButton>
+      </ElFormItem>
+    </ElForm>
+    <ElTable ref="multipleTableRef" :data="taskList" width="100%" max-height="60vh" class="custom-table"
+      @selection-change="handleSelectionChange">
+      <ElTableColumn type="selection" width="55" />
+      <ElTableColumn type="index" :label="t('serialNumber')" width="80" />
+      <ElTableColumn prop="taskName" :label="t('taskName')" />
+      <ElTableColumn :label="t('taskStatus')">
+        <template #default="scope">
+          <div v-if="scope.row.taskStatus === -1" style="color:#f42a2a;">执行失败</div>
+          <div v-if="scope.row.taskStatus === 0" style="color:#f42a2a;">未开始</div>
+          <div v-if="scope.row.taskStatus === 1" style="color:#ffcb40;">等待中</div>
+          <div v-if="scope.row.taskStatus === 2" style="color:#ffcb40;">运行中</div>
+          <div v-if="scope.row.taskStatus === 3" style="color:#2af442;">已完成</div>
+          <div v-if="scope.row.taskStatus === 4" style="color:#f42a2a;">检查未通过</div>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="model" :label="t('predictionModel')">
+        <template #default="scope">
+          <div v-if="scope.row.predictionModel === 1">
+            {{ '盘古' }}
+          </div>
+          <div v-if="scope.row.predictionModel === 2">
+            {{ 'Graphcast' }}
+          </div>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="time" :label="t('predictionDate')">
+        <!--  预测日期 -->
+        <template #default="scope">
+          <div>
+            {{ scope.row.startDate }}
+          </div>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="startTime" :label="t('predictionStartTime')">
+        <!--  预测时间 -->
+        <template #default="scope">
+          <div>
+            {{ scope.row.startTime }}
+          </div>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="leadTime" :label="t('predictionDuration')">
+        <!--  预测时长 -->
+        <template #default="scope">
+          <div>
+            {{ scope.row.leadTime }}小时
+          </div>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prop="hours" :label="t('timeConsuming')">
+        <!--  耗时 -->
+        <template #default="scope">
+          <div>
+            {{ (scope.row.timeConsuming) }}分钟
+          </div>
+        </template>
+      </ElTableColumn>
+      <!--<ElTableColumn prop="creator" :label="t('creator')">
+        <template #default="scope">
+          {{ scope.row.createBy || '暂无信息' }}
+        </template>
+      </ElTableColumn>-->
+      <ElTableColumn prop="createTime" :label="t('creationTime')" width="220" />
+    </ElTable>
+    <div class="pagination">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100, 200]"
+        size="small" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+    <div class="dialog-footer">
+      <el-button type="primary" class="custom-btn" icon="Refresh" @click="refresh">
+        {{ t('refresh') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style  lang="less">
+.ycrw {
+  .config-dialog {
+    margin-top: 35vh;
+
+    .config-custom-form {
+      padding: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .config-custom-select,
+      .config-custom-input {
+        width: calc(20vw - 80px) !important;
+      }
+
+      .custom-select-dropdown {
+        max-width: 200px;
+        /* 根据实际需求调整 */
+      }
+    }
+
+    .config-custom-btn {
+      .el-button {
+        width: 92px;
+        height: 32px;
+        background-color: #08a7cf;
+        border-radius: 0;
+        border: 0;
+        color: #fff;
+
+        &:hover {
+          filter: brightness(1.3);
+        }
+
+        &:last-child {
+          background-color: #b98326;
+        }
+      }
+    }
+  }
+
+  .el-table__header-wrapper {
+    .el-checkbox {
+      display: none;
+    }
+  }
+
+  .config-custom-date {
+
+    .el-date-editor.el-input,
+    .el-date-editor.el-input__wrapper {
+      width: calc(20vw - 80px) !important;
+    }
+  }
+
+  .pagination {
+    width: 100%;
+    display: flex;
+    justify-content: left;
+    margin-top: 10px;
+  }
+}
+</style>