feat: 定时飞行与周期飞行重构

iframe/src/App.vue

@@ -23,6 +23,9 @@
     @airwayListGet="dispatchEvent('airwayListGet', $event)"
     @airwayGet="dispatchEvent('airwayGet', $event)"
     @taskListGet="dispatchEvent('taskListGet', $event)"
+    @taskRecordPageGet="dispatchEvent('taskRecordPageGet', $event)"
+    @taskInfoUpdateTime="dispatchEvent('taskInfoUpdateTime', $event)"
+    @taskInfoRecordDel="dispatchEvent('taskInfoRecordDel', $event)"
   ></MMCFlightControlCenter>
 </template>
 

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/normalTask/index.vue

 <template>
   <div class="taskListBox">
     <el-form class="task-main" label-width="70px">
-      <el-form-item label="任务库" v-if="useTask">
+      <el-form-item label="任务库：" v-if="useTask">
         <el-select v-model="selectedTaskId" clearable>
           <el-option v-for="(item , i) in taskList" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="航线选择">
+      <el-form-item label="航线：">
         <el-select v-model="selectedAirwayId">
           <el-option v-for="(item , i) in airwayList" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
-      <div class="btn" @click="onStartTask" v-hover>一键任务</div>
-      <div class>
-        <span class="btn__add-line" @click="showAirwayEdit = true">
-          <span class="f8"></span> 创建航线
-        </span>
-      </div>
     </el-form>
+    <div class="btn" @click="onStartTask" v-hover>一键任务</div>
+    <div class>
+      <span class="btn__add-line" @click="showAirwayEdit = true">
+        <i class="el-icon-circle-plus-outline"></i>
+        <span class="f8"></span> 创建航线
+      </span>
+    </div>
     <AirwayEdit v-if="showAirwayEdit" @close="showAirwayEdit = false" @addDone="getAirwayList"></AirwayEdit>
   </div>
 </template>
@@ -45,7 +46,11 @@ export default {
     };
   },
   computed: {
-    ...mapState("MMCFlightControlCenter", ["cesiumViewer", "useSTLAirway", "useTask"]),
+    ...mapState("MMCFlightControlCenter", [
+      "cesiumViewer",
+      "useSTLAirway",
+      "useTask",
+    ]),
     ...mapState("MMCFlightControlCenter/uav", ["uav", "uavRealTimeData"]),
     ...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
     // 选择的任务
@@ -124,7 +129,7 @@ export default {
     await this.getTaskList();
     await this.getAirwayList();
     // 获取正在飞行的航线
-    console.log('当前飞行状态', this.uavRealTimeData?.isFlying);
+    console.log("当前飞行状态", this.uavRealTimeData?.isFlying);
     if (this.uav && this.uavRealTimeData?.isFlying) {
       let res = await TaskInfo.getTaskInfoRecord({
         deviceId: this.uav.deviceId,
@@ -241,12 +246,13 @@ export default {
 <style lang="scss" scoped>
 .taskListBox {
   height: 100%;
-  width: 416px;
+  width: 100%;
   background: #222222;
   border-radius: 12px;
   transition: 0.3s;
   display: flex;
   flex-direction: column;
+  padding: 35px 16px 16px;
 
   .header {
     flex-shrink: 0;
@@ -310,31 +316,40 @@ export default {
   }
   .task-main::v-deep {
     flex: auto;
-    padding: 38px 16px 16px;
+
     position: relative;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
 
-    .el-form-item__label {
-      color: #fff;
-    }
+    .el-form-item {
+      flex-grow: 0;
+      margin-bottom: 16px;
+      $line-height: 32px;
 
-    .btn__add-line {
-      position: absolute;
-      bottom: 20px;
-      right: 20px;
-      font-size: 10px;
-      color: #43deff;
-      cursor: pointer;
-    }
+      .el-form-item__label {
+        line-height: 1;
+        color: #fff;
+        line-height: $line-height;
+      }
 
-    .el-form-item {
-      flex-grow: 1;
+      .el-form-item__content {
+        line-height: 1;
+        line-height: $line-height;
+      }
+
+      .el-select {
+        width: 100%;
+      }
+
+      .el-input__inner {
+        height: $line-height;
+      }
     }
   }
 
   .btn {
-    width: 122px;
+    width: 110px;
     height: 32px;
     text-align: center;
     line-height: 32px;
@@ -345,6 +360,17 @@ export default {
     font-weight: 400;
     font-size: 14px;
     cursor: pointer;
+    border-radius: 4px;
+  }
+
+  .btn__add-line {
+    position: absolute;
+    bottom: 24px;
+    right: 16px;
+    cursor: pointer;
+    font-family: MicrosoftYaHei;
+    font-size: 12px;
+    color: #3388ff;
   }
 }
 .select-airway__btn {

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/periodTask/components/taskAdd/index.vue

-<template>
-  <div class="task-add dialog1027" v-interact>
-    <div class="dialog-header">
-      <div class="dialog-header__title">周期任务</div>
-      <div class="dialog-header__close" @click="$emit('close')">关闭</div>
-    </div>
-    <div class="dialog-content">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="执行日期" prop="date">
-          <el-date-picker
-            v-model="form.date"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            size="mini"
-            popper-class="mmc"
-            value-format="yyyy-MM-dd"
-            :picker-options="pickerOptions"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item label="执行时间" prop="time">
-          <el-time-picker
-            is-range
-            v-model="form.time"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="选择时间范围"
-            size="mini"
-            popper-class="mmc"
-            value-format="HH:mm:ss"
-          ></el-time-picker>
-        </el-form-item>
-        <el-form-item label="任务库" prop="taskId">
-          <el-select
-            v-model="form.taskId"
-            clearable
-            size="mini"
-            popper-class="mmc"
-            @change="onTaskChange()"
-            placeholder="请选择任务"
-            v-if="useTask"
-          >
-            <el-option v-for="(item , i) in taskList" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="航线名称" prop="airwayId">
-          <el-select v-model="form.airwayId" size="mini" popper-class="mmc" style="width:100%">
-            <el-option :label="item.name" :value="item.id" v-for="(item, index) in airwayList"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="task-add-btn">
-      <el-button type="primary" size="medium" :loading="confirmLoading" @click="onConfirm">确认</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { AirLine, Control_API } from "../../../../../../../../../../../../api";
-
-export default {
-  name: "TaskAdd",
-  inject: ["rootNode"],
-  data() {
-    return {
-      form: {
-        date: [],
-        time: ["00:00:00", "23:59:59"],
-        airwayId: "",
-        taskId: "",
-      },
-      rules: {
-        date: [{ required: true, message: "请选择日期", trigger: "blur" }],
-        time: [{ required: true, message: "请选择时间", trigger: "blur" }],
-        airwayId: [{ required: true, message: "请选择航线", trigger: "blur" }],
-      },
-      pickerOptions: {
-        disabledDate: (time) => {
-          // 日期选择限制
-          return time.getTime() < Date.now() - 8.64e7;
-        },
-      },
-      airwayList: [], //航线列表
-      taskList: [], //任务列表
-      confirmLoading: false,
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
-    ...mapState("MMCFlightControlCenter", ["airwayEntities", "useSTLAirway", "useTask"]),
-    /**
-     * 选择的日常任务数据
-     */
-    selectedAirway() {
-      let find = this.airwayList.find((item) => {
-        return item.id === this.form.airwayId;
-      });
-      return find;
-    },
-  },
-  watch: {
-    selectedAirway: {
-      async handler(newVal, oldVal) {
-        //清除旧的航线并渲染新航线
-        let find = this.airwayEntities.find(
-          (item1) => oldVal?.id === item1.airwayId
-        );
-        if (find) {
-          this.clearAirwayEntities({ id: this.selectedAirway.id });
-        }
-
-        //渲染新航线
-        if (newVal) {
-          this.createAirwayEntities({
-            polyline: this.selectedAirway.content,
-            id: this.selectedAirway.id,
-          });
-        }
-      },
-    },
-  },
-  async mounted() {
-    if (this.useSTLAirway) {
-      let res = await Control_API.getUavRouteList({
-        pageNo: 1,
-        pageSize: 100,
-        nestId: this.hangar.id,
-      });
-      if (res?.code === 0) {
-        let airwayList = [];
-        for (let i = 0; i < res.data.list.length; i++) {
-          let item = res.data.list[i];
-          let flightCourseJson;
-          try {
-            flightCourseJson = JSON.parse(item.flightCourseJson);
-          } catch (e) {
-            console.log(e);
-          }
-          // 转换成飞控中心能接受的数据协议
-          let content = flightCourseJson
-            ? await this.$store.dispatch(
-                "MMCFlightControlCenter/apiPointsToFKZXPoints",
-                {
-                  list: flightCourseJson?.linePointSaveReqVOS || [],
-                  actionListKey: "pointActionSaveReqVOS",
-                }
-              )
-            : null;
-          airwayList.push({
-            name: item.flightName,
-            id: item.id,
-            content: content,
-          });
-        }
-        this.airwayList = airwayList;
-      }
-    } else {
-      this.rootNode.$emit("airwayListGet", {
-        pageNo: 1,
-        pageSize: 100,
-        hangar: this.hangar,
-        callback: (data) => {
-          this.airwayList = data?.records || [];
-        },
-      });
-    }
-    this.rootNode.$emit("taskListGet", {
-      pageNo: 1,
-      pageSize: 100,
-      type: 2,
-      // hangar: this.hangar,
-      // taskStatus: 1,
-      callback: (res) => {
-        this.taskList = res?.records || [];
-      },
-    });
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 确认事件
-     */
-    onConfirm() {
-      this.$refs["form"].validate((valid) => {
-        let form = JSON.parse(JSON.stringify(this.form));
-        form.time = [
-          `${form.date[0]} ${form.time[0]}`,
-          `${form.date[1]} ${form.time[1]}`,
-        ];
-        if (valid) {
-          this.confirmLoading = true;
-          this.rootNode.$emit("taskBatchAdd", {
-            type: 2, //0: 日常任务 1.定时任务 2.周期任务
-            taskList: [{ ...form, airway: this.selectedAirway }], //任务数据
-            hangar: this.hangar,
-            callback: ({ code }) => {
-              this.confirmLoading = false;
-              if (code === 0) {
-                this.$emit("addDone");
-                this.$emit("close");
-              }
-            },
-          }); // 根节点发送机库任务新增事件
-        } else {
-          return false;
-        }
-      });
-    },
-    /**
-     * 任务更改事件
-     */
-    onTaskChange() {
-      let find = this.taskList.find((item1) => {
-        return item1.id == this.form.taskId;
-      });
-      if (find) {
-        let findAirway = this.airwayList.find((item1) => {
-          return item1.id === find.airwayId;
-        });
-
-        if (findAirway) {
-          this.form.airwayId = find.airwayId;
-          return;
-        }
-      }
-
-      // 找不到航线
-      this.form.airwayId = "";
-      this.form.taskId = "";
-      this.$message.warning("未找到相应的航线");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.task-add {
-  min-height: 286px;
-  background: rgba(9, 32, 87, 0.7);
-  // border: 1px solid #70daf9;
-  position: absolute;
-  top: -5px;
-  left: 550px;
-  width: 512x;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  padding-bottom: 20px;
-
-  &.more {
-    height: 376px;
-  }
-
-  .dialog-header {
-    padding-left: 16px !important;
-  }
-
-  .task-add-main {
-    padding: 20px 20px 0 10px;
-  }
-
-  .task-add-btn {
-    flex-shrink: 0;
-    text-align: center;
-
-    .task-add__btn {
-      margin: auto;
-      width: 92px;
-      height: 36px;
-      background: #3388ff;
-      border-radius: 2px;
-      cursor: pointer;
-      text-align: center;
-      color: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  .task-add-more {
-    background-color: rgba(13, 82, 143, 0.6);
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/periodTask/index.vue

-<template>
-  <div class="timed-task">
-    <div class="timed-task-header">
-      <div class="header__column flex2">名称</div>
-      <div class="header__column flex2">时间</div>
-      <div class="header__column status">状态</div>
-      <div class="header__column flex2">操作</div>
-    </div>
-    <div class="timed-task-main">
-      <div class="row" v-for="item in taskListAll" :key="item.id">
-        <div class="row__column flex2">
-          <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
-            <span>{{item.name}}</span>
-          </el-tooltip>
-        </div>
-        <div class="row__column flex2">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="`${item.taskStartTime}至${item.taskEndTime}`"
-            placement="top-start"
-          >
-            <span>{{`${item.taskStartTime}至${item.taskEndTime}`}}</span>
-          </el-tooltip>
-        </div>
-        <div class="row__column status" style="color: rgb(255, 189, 54);">{{item.status}}</div>
-        <div class="row__column flex2 ctrl">
-          <el-tooltip content="查看" placement="top">
-            <span
-              class="icon-chakan1 iconfont icon"
-              style="color: #ffffff; font-size: 10px;"
-              @click="onSwitchAirway(item)"
-            ></span>
-          </el-tooltip>
-          <!--   <el-tooltip content="历史" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/history.png" />
-          </el-tooltip>-->
-          <!--    <el-tooltip content="禁用" v-if="!item.enable" placement="top">
-            <img class="icon" style="width: 18px;" src="../../assets/images/enable.png" />
-          </el-tooltip>
-          <el-tooltip content="启用" v-if="item.enable" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/able.png" />
-          </el-tooltip>-->
-          <el-tooltip content="删除" placement="top">
-            <span class="icon-shanchu iconfont icon" @click="onDelAirway(item)"></span>
-          </el-tooltip>
-        </div>
-      </div>
-    </div>
-    <div class="task-add-btn">
-      <div class="task-add__btn" @click="showTaskAdd = true">创建周期任务</div>
-    </div>
-
-    <TaskAdd v-if="showTaskAdd" @close="onTaskAddClose" @addDone="onAddDone"></TaskAdd>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { AirLine } from "../../../../../../../../../../api";
-import TaskAdd from "./components/taskAdd";
-
-export default {
-  name: "hangarPeriodTask",
-  components: {
-    TaskAdd,
-  },
-  inject: ["rootNode", "bus"],
-  data() {
-    return {
-      showTaskAdd: false,
-      taskListAll: [],
-      timeHandle: null,
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
-    ...mapState("MMCFlightControlCenter/hangar", [
-      "hangarRealTimeData",
-      "hangar",
-    ]),
-  },
-  watch: {
-  },
-  created() {
-    this.rootNode.$emit("hangarTaskTabChange", {
-      type: 3,
-    });
-    this.getTaskList();
-    this.timeHandle = setInterval(() => {
-      this.getTaskList();
-    }, 5000);
-  },
-  beforeDestroy() {
-    this.clearAirwayEntities();
-    clearInterval(this.timeHandle);
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 更新任务列表
-     */
-    getTaskList() {
-      console.log("getTaskList", this.taskListAll);
-      this.rootNode.$emit("taskListGet", {
-        pageNo: 1,
-        pageSize: 100,
-        type: 2, // 0: 日常任务 1.定时任务 2.周期任务
-        hangar: this.hangar,
-        putDevice: 2,
-        callback: (res) => {
-          this.taskListAll = res.records || [];
-        },
-      });
-    },
-    /**
-     * 显示或隐藏航线
-     */
-    async onSwitchAirway(item) {
-      this.rootNode.$emit("airwayGet", {
-        airwayId: item.airwayId,
-        callback: (airway) => {
-          let find = this.airwayEntities.find(
-            (item1) => item1.airwayId === airway.id
-          );
-          if (find) {
-            this.clearAirwayEntities({ id: airway.id });
-          } else {
-            this.createAirwayEntities({
-              polyline: airway.content,
-              id: airway.id,
-            });
-          }
-        },
-      });
-    },
-    async onDelAirway(item) {
-      try {
-        if (item.loading) {
-          return;
-        }
-        await this.$confirm("请确认是否删除该任务?", "安全确认", {
-          cancelButtonText: "取消",
-          confirmButtonText: "确定",
-          customClass: "uav_controlPane",
-          showClose: false,
-        });
-        item.loading = true;
-        this.rootNode.$emit("taskDel", {
-          task: item,
-          type: 2, // 0: 日常任务 1.定时任务 2.周期任务
-          callback: () => {
-            this.getTaskList();
-          },
-        });
-      } catch (e) {
-        console.log(e);
-      }
-    },
-    onTaskAddClose() {
-      this.showTaskAdd = false;
-    },
-    onAddDone() {
-      this.getTaskList();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.timed-task {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 5px 10px 5px;
-  gap: 8px;
-  box-sizing: border-box;
-
-  .timed-task-header {
-    display: flex;
-    flex-shrink: 0;
-    font-family: MicrosoftYaHei-Bold;
-    font-size: 14px;
-    color: #b5e5ff;
-    padding: 5px 0;
-    letter-spacing: 0;
-    font-weight: 700;
-    background: rgba(87, 96, 138, 0.2);
-    border: 1px solid rgba(207, 234, 255, 0.33);
-    gap: 3px;
-
-    .header__column {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.flex2 {
-        flex: 2;
-      }
-
-      &.status {
-        flex: initial;
-        width: 70px;
-      }
-    }
-  }
-
-  .timed-task-main {
-    color: #fff;
-    overflow-y: auto;
-    flex: 1;
-
-    .row {
-      display: flex;
-      color: #fff;
-      background: url("../../assets/images/listBg.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      height: 33px;
-      line-height: 33px;
-      padding-left: 4px;
-      margin-bottom: 16px;
-      gap: 3px;
-
-      .row__column {
-        flex: 1;
-        text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &.flex2 {
-          flex: 2;
-        }
-
-        &.ctrl {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 5px;
-
-          .icon {
-            cursor: pointer;
-
-            &.loading {
-              opacity: 0.5;
-            }
-          }
-        }
-
-        &.status {
-          flex: initial;
-          width: 70px;
-        }
-      }
-    }
-  }
-
-  .task-add-btn {
-    text-align: center;
-
-    .task-add__btn {
-      width: 124px;
-      height: 36px;
-      background: #3388ff;
-      border-radius: 2px;
-      text-align: center;
-      line-height: 32px;
-      margin: 0 auto;
-      margin-bottom: 10px;
-      cursor: pointer;
-      color: #fff;
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/timedTask/components/flightEdit/index.vue

+<template>
+  <div class="task-add dialog1027" v-interact>
+    <div class="dialog-header">
+      <div class="dialog-header__title">飞行编辑</div>
+      <div class="dialog-header__close" @click="close">关闭</div>
+    </div>
+    <div class="dialog-content">
+      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+        <el-date-picker
+            v-model="form.time"
+            :type="task.taskType == 1 ? 'datetime' : 'datetimerange'"
+            range-separator="至"
+            start-placeholder="请选择任务开始时间"
+            end-placeholder="请选择任务结束时间"
+            placeholder="选择日期时间"
+            size="mini"
+            popper-class="mmc"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :picker-options="pickerOptions"
+            style="margin-bottom: 24px; width: 100%;"
+          ></el-date-picker>
+        <el-form-item label="任务库：" prop="taskId">
+          {{ task.name }}
+        </el-select>
+        </el-form-item>
+        <el-form-item label="航线名称：" prop="airwayId">
+          {{ task.airwayName }}
+        </el-form-item>
+      </el-form>
+      <div class="task-add-btn">
+        <el-button type="danger" size="medium" class="btn btn--cancel" @click="close">取消</el-button>
+        <el-button type="primary" size="medium" :loading="confirmLoading" class="btn btn--ok" @click="onConfirm">确认</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import { Control_API } from "../../../../../../../../../../../../api";
+import Moment from 'moment';
+
+export default {
+  name: "TaskAdd",
+  inject: ["rootNode"],
+  props: {
+    task: {
+      type: Object,
+      default(){
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        time: [],
+      },
+      rules: {
+      },
+      pickerOptions: {
+        disabledDate: (time) => {
+          // 日期选择限制
+          return time.getTime() < Date.now() - 8.64e7;
+        },
+      },
+      confirmLoading: false,
+    };
+  },
+  computed: {
+  },
+  watch: {
+  },
+  async mounted() {
+    if(this.task.taskType == 1){
+      // 定时
+      this.form.time = Moment(this.task.taskStartTime).format('YYYY-MM-DD HH:mm:ss');
+    } else {
+      // 周期
+      this.form.time = [Moment(this.task.taskStartTime).format('YYYY-MM-DD HH:mm:ss'), Moment(this.task.taskEndTime).format('YYYY-MM-DD HH:mm:ss')];
+    }
+    
+  },
+  methods: {
+    /**
+     * 确认事件
+     */
+    onConfirm() {
+      this.$refs["form"].validate((valid) => {
+        let params = {
+          id: this.task.id
+        }
+        if(this.task.taskType == 1){
+          params.taskStartTime = params.taskEndTime = Moment(this.form.time).valueOf();
+        } else {
+          params.taskStartTime = Moment(this.form.time[0]).valueOf();
+          params.taskEndTime = Moment(this.form.time[1]).valueOf();
+        }
+        
+        if (valid) {
+          this.confirmLoading = true;
+          this.rootNode.$emit("taskInfoUpdateTime", {
+            data: params, 
+            callback: (res) => {
+              console.log("taskInfoUpdateTime res", res);
+              this.confirmLoading = false;
+              if (res.code === 0) {
+                this.$message.success('更改时间完成');
+                this.$emit('close');
+              } else {
+                this.$message.warning(res.error.msg);
+              }
+            },
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    close(){
+      this.$emit('close');
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.task-add::v-deep {
+  width: 526px;
+  height: 268px;
+  background: #222;
+  // border: 1px solid #70daf9;
+  position: absolute;
+  top: -5px;
+  left: 550px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  &.more {
+    height: 376px;
+  }
+
+  .dialog-header {
+    padding-left: 16px !important;
+    flex-shrink: 0;
+  }
+
+  .dialog-content {
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .task-add-main {
+    padding: 20px 20px 0 10px;
+  }
+
+  .task-add-btn {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+
+    .btn {
+      box-sizing: border-box;
+      width: 112px;
+      height: 32px;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: SourceHanSansCN, SourceHanSansCN;
+      font-weight: 500;
+      font-size: 14px;
+
+      &.btn--cancel {
+        color: #FF4040;
+        border: 1px #ff4040 solid;
+        background-color: transparent;
+      }
+
+      &.btn--ok {
+        margin-left: 23px;
+      }
+    }
+  }
+
+  .task-add-more {
+    background-color: rgba(13, 82, 143, 0.6);
+    height: 24px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  $height: 32px;
+  .el-form-item__content {
+    line-height: $height;
+    height: $height;
+  }
+
+  .el-form-item__label {
+    line-height: $height;
+  }
+  
+}
+</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/timedTask/components/flightPlan/index.vue

+<template>
+  <div class="task-add dialog1027" v-interact>
+    <div class="task-add-header dialog-header">
+      <img class="dialog-header__icon" src="../../../../../../assets/images/mount_head.png" />
+      <div class="header__title dialog-header__title">飞行计划</div>
+      <div class="header-right dialog-header__close">
+        <el-select placeholder="请选择任务场景" v-model="selectedTask" class="select" popper-class="mmc">
+          <el-option v-for="item in taskList" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+        <div class="header-right__close" @click="$emit('close')">关闭</div>
+      </div>
+    </div>
+    <div class="stl-timed-task">
+      <div class="timed-task-header">
+        <div class="header__column flex2">时间</div>
+        <div class="header__column flex2">航线名</div>
+        <div class="header__column">操作</div>
+      </div>
+      <div class="timed-task-main">
+        <div
+          class="row"
+          :class="{single: i % 2 != 0}"
+          v-for="(item, i) in flightPlan"
+          :key="item.id"
+        >
+          <div class="row__column flex2 col-2">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="item.putStartTime"
+              placement="top-start"
+            >
+              <span>{{item.putStartTime}}</span>
+            </el-tooltip>
+          </div>
+          <div class="row__column flex2">
+            <el-tooltip class="item" effect="dark" :content="item.reouteName" placement="top-start">
+              <span>{{item.reouteName}}</span>
+            </el-tooltip>
+          </div>
+          <div class="row__column ctrl">
+            <el-tooltip content="删除" placement="top">
+              <i class="el-icon-delete" @click="onDel(item)"></i>
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import { AirLine } from "../../../../../../../../../../../../api";
+import Moment from "moment";
+
+export default {
+  name: "TaskAdd",
+  inject: ["rootNode"],
+  props: {
+    taskId: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * 任务列表
+     */
+    taskList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      flightPlan: [
+        /*  {
+          id: 30616,
+          deviceId: "TMJ",
+          deviceName: "无人机",
+          flightSortieName: "TMJ",  // 	架次名称
+          taskInfoId: 21480,  // 	任务id
+          taskInfoName: "任务123",
+          reouteId: 16462,  // 	航线id
+          reouteName: "航线123",
+          projectId: 12,  // 	项目Id
+          projectName: "",
+          status: 2,  // 默认0 表示架次未结束；1表示架次完整。
+          sequence: 0, // 周期任务有多次执行，执行顺序
+          putStartTime: "", // 	任务执行开始时间
+          putEndTime: "",
+          createTime: "",
+        }, */
+      ], // 飞行计划列表
+      selectedTask: "", // 当前选择的任务
+    };
+  },
+  computed: {
+    ...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
+    ...mapState("MMCFlightControlCenter", ["airwayEntities", "useTask"]),
+  },
+  watch: {
+    taskId: {
+      immediate: true,
+      handler() {
+        this.selectedTask = this.taskId;
+      },
+    },
+    selectedTask: {
+      immediate: true,
+      handler() {
+        this.getList();
+      },
+    },
+  },
+  mounted() {},
+  methods: {
+    ...mapActions("MMCFlightControlCenter", []),
+    getList() {
+      this.rootNode.$emit("taskRecordPageGet", {
+        id: this.selectedTask,
+        callback: (res) => {
+          console.log("taskRecordPageGet res", res);
+          if (res.code === 0) {
+            this.flightPlan = res.records.map((item) => {
+              return {
+                ...item,
+                putStartTime: Moment(item.putStartTime).format(
+                  "YYYY-MM-DD HH:mm:ss"
+                ),
+              };
+            });
+          }
+        },
+      });
+    },
+    /**
+     * 删除的任务
+     */
+    async onDel(item) {
+      await this.$confirm("请确认是否删除该飞行计划?", "安全确认", {
+        cancelButtonText: "取消",
+        confirmButtonText: "确定",
+        customClass: "uav_controlPane",
+        showClose: false,
+      });
+      this.rootNode.$emit("taskInfoRecordDel", {
+        id: item.id,
+        callback: () => {
+          this.getList();
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.task-add::v-deep {
+  height: 232px;
+  position: absolute;
+  top: -5px;
+  left: 550px;
+  width: 526px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .task-add-header {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 32px;
+    padding: 0 20px 0 0;
+
+    .header__title {
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 16px;
+      color: #70daf9;
+      letter-spacing: 0;
+      font-weight: 700;
+    }
+
+    .header-right {
+      display: flex;
+      gap: 20px;
+      font-family: MicrosoftYaHei;
+      font-size: 16px;
+      color: #70daf9;
+      letter-spacing: 0;
+      font-weight: 400;
+
+      .select {
+        border-radius: 2px;
+        border: 1px solid #4b4b4b;
+        width: 150px;
+        $height: 24px;
+
+        .el-input__inner {
+          height: $height;
+          font-size: 14px;
+          color: #86909c;
+        }
+
+        .el-input__suffix {
+          top: 0px;
+          display: flex;
+          align-items: center;
+        }
+      }
+      .header-right__close {
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .stl-timed-task {
+    height: 0;
+    flex-grow: 1;
+  }
+
+  .task-add-btn {
+    flex-shrink: 0;
+    text-align: center;
+
+    .task-add__btn {
+      width: 92px;
+      height: 36px;
+      background: #3388ff;
+      border-radius: 2px;
+      text-align: center;
+      line-height: 32px;
+      margin: 0 auto;
+      margin-bottom: 10px;
+      cursor: pointer;
+      color: #fff;
+    }
+  }
+
+  .task-add-more {
+    background-color: #191919;
+    height: 24px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/timedTask/components/taskAdd/index.vue

-<template>
-  <div class="task-add dialog1027" :class="{more: showMore}" v-interact>
-    <div class="task-add-header dialog-header">
-      <img class="dialog-header__icon" src="../../../../../../assets/images/mount_head.png" />
-      <div class="header__title dialog-header__title">定时任务</div>
-      <div class="header-right dialog-header__close">
-        <div class="header-right__add" @click="onTaskAdd">
-          <span class="iconfont icon-zengjia"></span>添加任务
-        </div>
-        <div class="header-right__close" @click="$emit('close')">关闭</div>
-      </div>
-    </div>
-    <div class="task-add-main dialog-content">
-      <div class="main-item" v-for="(item, index) in list" :key="index">
-        <el-date-picker
-          v-model="item.time"
-          size="mini"
-          popper-class="mmc"
-          type="datetime"
-          placeholder="选择时间"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :picker-options="pickerOptions"
-        ></el-date-picker>
-        <el-select
-          v-model="item.taskId"
-          clearable
-          size="mini"
-          popper-class="mmc"
-          @change="onTaskChange(item)"
-          placeholder="请选择任务"
-          v-if="useTask"
-        >
-          <el-option v-for="(item , i) in taskList" :label="item.name" :value="item.id"></el-option>
-        </el-select>
-        <el-select
-          v-model="item.airwayId"
-          size="mini"
-          popper-class="mmc"
-          placeholder="请选择航线"
-          :disabled="!!item.taskId"
-        >
-          <el-option :label="item1.name" :value="item1.id" v-for="(item1, index) in airwayList"></el-option>
-        </el-select>
-        <el-tooltip content="删除" placement="top">
-          <span class="icon-shanchu iconfont" @click="onDelTask(index)"></span>
-        </el-tooltip>
-        <el-tooltip content="查看" placement="top">
-          <span
-            class="icon-chakan1 iconfont"
-            style="font-size: 10px;"
-            @click="onSwitchAirway(item)"
-          ></span>
-        </el-tooltip>
-      </div>
-    </div>
-    <div class="task-add-btn">
-      <el-button type="primary" size="medium" :loading="confirmLoading" @click="onConfirm">确认</el-button>
-    </div>
-    <div class="task-add-more" @click="showMore = !showMore">
-      <img src="../../../../assets/images/xb.png" width="15" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { AirLine } from "../../../../../../../../../../../../api";
-
-export default {
-  name: "TaskAdd",
-  inject: ["rootNode"],
-  data() {
-    return {
-      list: [
-        /* {
-          time: '',
-          airwayId: '',
-          taskId: '',
-        } */
-      ],
-      showMore: false,
-      pickerOptions: {
-        disabledDate: (time) => {
-          // 日期选择限制
-          return time.getTime() < Date.now() - 8.64e7;
-        },
-      },
-      airwayList: [], //航线列表
-      confirmLoading: false,
-      taskList: [], //任务列表
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
-    ...mapState("MMCFlightControlCenter", ["airwayEntities", "useTask"]),
-  },
-  mounted() {
-    this.rootNode.$emit("airwayListGet", {
-      pageNo: 1,
-      pageSize: 100,
-      hangar: this.hangar,
-      callback: (data) => {
-        this.airwayList = data?.records || [];
-      },
-    });
-
-    this.rootNode.$emit("taskListGet", {
-      pageNo: 1,
-      pageSize: 100,
-      type: 1,
-      // hangar: this.hangar,
-      // taskStatus: 1,
-      callback: (res) => {
-        this.taskList = res?.records || [];
-      },
-    });
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 显示或隐藏航线
-     */
-    async onSwitchAirway(item) {
-      this.rootNode.$emit("airwayGet", {
-        airwayId: item.airwayId,
-        callback: (airway) => {
-          let find = this.airwayEntities.find(
-            (item1) => item1.airwayId === airway.id
-          );
-          if (find) {
-            this.clearAirwayEntities({ id: airway.id });
-          } else {
-            this.createAirwayEntities({
-              polyline: airway.content,
-              id: airway.id,
-            });
-          }
-        },
-      });
-    },
-    /**
-     * 添加新任务
-     */
-    onTaskAdd(item) {
-      this.list.push({
-        time: "",
-        airwayId: "",
-      });
-    },
-    /**
-     * 删除的任务
-     */
-    onDelTask(index) {
-      this.list = this.list.filter((item, i) => i !== index);
-    },
-    /**
-     * 确认事件
-     */
-    onConfirm() {
-      let isOk = true;
-      this.list.some((item) => {
-        if (!item.time) {
-          this.$message.warning("请选择时间");
-          isOk = false;
-          return true;
-        }
-        if (!item.airwayId) {
-          this.$message.warning("请选择航线");
-          isOk = false;
-          return true;
-        }
-      });
-      if (isOk) {
-        let list = this.list.map((item) => {
-          let find = this.airwayList.find(
-            (airway) => airway.id === item.airwayId
-          );
-          return {
-            ...item,
-            airway: find,
-            time: [item.time, item.time]
-          };
-        });
-        this.confirmLoading = true;
-        this.rootNode.$emit("taskBatchAdd", {
-          type: 1, //0: 日常任务 1.定时任务 2.周期任务
-          taskList: list, //任务数据
-          hangar: this.hangar,
-          callback: ({ code }) => {
-            this.confirmLoading = false;
-            if (code === 0) {
-              this.$emit("addDone");
-              this.$emit("close");
-            }
-          },
-        }); // 根节点发送机库任务新增事件
-      }
-    },
-    /**
-     * 任务更改事件
-     */
-    onTaskChange(item) {
-      let find = this.taskList.find((item1) => {
-        return item1.id == item.taskId;
-      });
-      if (find) {
-        let findAirway = this.airwayList.find((item1) => {
-          return item1.id === find.airwayId;
-        });
-
-        if (findAirway) {
-          item.airwayId = find.airwayId;
-          return;
-        }
-      }
-
-      // 找不到航线
-      item.airwayId = "";
-      item.taskId = "";
-      this.$message.warning("未找到相应的航线");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.task-add {
-  height: 250px;
-  position: absolute;
-  top: -5px;
-  left: 550px;
-  min-width: 520px;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  &.more {
-    height: 376px;
-  }
-
-  .task-add-header {
-    flex-shrink: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 32px;
-    padding: 0 20px 0 0;
-
-    .header__title {
-      font-family: MicrosoftYaHei-Bold;
-      font-size: 16px;
-      color: #70daf9;
-      letter-spacing: 0;
-      font-weight: 700;
-    }
-
-    .header-right {
-      display: flex;
-      gap: 20px;
-      font-family: MicrosoftYaHei;
-      font-size: 16px;
-      color: #70daf9;
-      letter-spacing: 0;
-      font-weight: 400;
-
-      .header-right__add {
-        font-size: 12px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-      .header-right__close {
-        font-size: 16px;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .task-add-main {
-    padding: 20px 20px 0 10px;
-    flex: 1;
-    overflow-y: auto;
-
-    .main-item::v-deep {
-      margin-bottom: 20px;
-      display: flex;
-      align-items: center;
-      font-size: 15px;
-      color: #fff;
-      gap: 5px;
-      height: fit-content;
-
-      .el-date-editor {
-        width: 188px;
-      }
-
-      .el-select {
-        width: 200px;
-      }
-
-      .input {
-        width: 150px;
-      }
-
-      .iconfont {
-        color: rgb(67, 222, 255);
-        cursor: pointer;
-      }
-    }
-  }
-
-  .task-add-btn {
-    flex-shrink: 0;
-    text-align: center;
-
-    .task-add__btn {
-      width: 92px;
-      height: 36px;
-      background: #3388ff;
-      border-radius: 2px;
-      text-align: center;
-      line-height: 32px;
-      margin: 0 auto;
-      margin-bottom: 10px;
-      cursor: pointer;
-      color: #fff;
-    }
-  }
-
-  .task-add-more {
-    background-color: #191919;
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/components/timedTask/index.vue

 <template>
-  <div class="timed-task">
+  <div class="stl-timed-task">
     <div class="timed-task-header">
       <div class="header__column flex2">名称</div>
       <div class="header__column flex2">时间</div>
       <div class="header__column status">状态</div>
       <div class="header__column flex2">操作</div>
     </div>
-    <div class="timed-task-main">
-      <div class="row" v-for="item in taskListAll" :key="item.id">
+    <div class="timed-task-main" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="row"
+        :class="{single: i % 2 != 0}"
+        v-for="(item, i) in taskListAll"
+        :key="item.id"
+      >
         <div class="row__column flex2">
           <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
             <span>{{item.name}}</span>
           </el-tooltip>
         </div>
-        <div class="row__column flex2">
+        <div class="row__column flex2 col-2">
           <el-tooltip
             class="item"
             effect="dark"
@@ -30,51 +35,64 @@
         </div>
         <div class="row__column flex2 ctrl">
           <el-tooltip content="查看" placement="top">
-            <span
-              class="icon-chakan1 iconfont icon"
-              style="color: #ffffff; font-size: 10px;"
-              @click="onSwitchAirway(item)"
-            ></span>
+            <i class="el-icon-position" style @click="onSwitchAirway(item)"></i>
+          </el-tooltip>
+          <el-tooltip content="计划安排" placement="top">
+            <i class="el-icon-date" @click="onOpenPlan(item)"></i>
           </el-tooltip>
-          <!--   <el-tooltip content="历史" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/history.png" />
-          </el-tooltip>-->
-          <!--    <el-tooltip content="禁用" v-if="!item.enable" placement="top">
-            <img class="icon" style="width: 18px;" src="../../assets/images/enable.png" />
+          <el-tooltip content="编辑" placement="top">
+            <i class="el-icon-edit" @click="onOpenEdit(item)"></i>
           </el-tooltip>
-          <el-tooltip content="启用" v-if="item.enable" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/able.png" />
-          </el-tooltip>-->
+          <!-- <el-tooltip content="开关" placement="top">
+            <i class="el-icon-turn-off"></i>
+          </el-tooltip> -->
           <el-tooltip content="删除" placement="top">
-            <span class="icon-shanchu iconfont icon" @click="onDelAirway(item)"></span>
+            <i class="el-icon-delete" @click="onDelAirway(item)"></i>
           </el-tooltip>
         </div>
       </div>
     </div>
-    <div class="task-add-btn">
-      <div class="task-add__btn" @click="showTaskAdd = true">创建定时任务</div>
-    </div>
+    <!-- <div class="task-add-btn">
+      <div class="task-add__btn" @click="showFlightPlan = true">创建定时任务</div>
+    </div>-->
 
-    <TaskAdd v-if="showTaskAdd" @close="onTaskAddClose" @addDone="onAddDone"></TaskAdd>
+    <FlightPlan
+      v-if="showFlightPlan"
+      :taskId="selectedTask.id"
+      :taskList="taskListAll"
+      @close="showFlightPlan = false"
+    ></FlightPlan>
+    <FlightEdit v-if="showFlightEdit" :task="selectedTask" @close="showFlightEdit = false"></FlightEdit>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
 import { AirLine } from "../../../../../../../../../../api";
-import TaskAdd from "./components/taskAdd";
+import FlightPlan from "./components/flightPlan";
+import FlightEdit from "./components/flightEdit";
 
 export default {
   name: "hangarTimedTask",
   components: {
-    TaskAdd,
+    FlightPlan,
+    FlightEdit,
   },
   inject: ["rootNode", "bus"],
+  props: {
+    type: {
+      type: Number,
+      default: 1,
+    },
+  },
   data() {
     return {
-      showTaskAdd: false,
+      showFlightPlan: false,
+      showFlightEdit: false,
       taskListAll: [],
       timeHandle: null,
+      selectedTask: null, //选中的任务
+      loading: false
     };
   },
   computed: {
@@ -84,13 +102,23 @@ export default {
       "hangar",
       "taskList",
     ]),
+    // 选中的任务的飞行计划
+    selectTaskFlightPlan() {
+      return [];
+    },
+  },
+  watch: {
+    type: {
+      immediate: true,
+      handler() {
+        this.rootNode.$emit("hangarTaskTabChange", {
+          type: this.type,
+        });
+        this.getTaskList();
+      },
+    },
   },
-  watch: {},
   created() {
-    this.rootNode.$emit("hangarTaskTabChange", {
-      type: 2,
-    });
-    this.getTaskList();
     this.timeHandle = setInterval(() => {
       this.getTaskList();
     }, 5000);
@@ -112,7 +140,7 @@ export default {
       this.rootNode.$emit("taskListGet", {
         pageNo: 1,
         pageSize: 100,
-        type: 1, // 0: 日常任务 1.定时任务 2.周期任务
+        type: this.type, // 0: 日常任务 1.定时任务 2.周期任务
         hangar: this.hangar,
         putDevice: 2,
         callback: (res) => {
@@ -143,58 +171,75 @@ export default {
     },
     async onDelAirway(item) {
       try {
-        if (item.loading) {
-          return;
-        }
         await this.$confirm("请确认是否删除该任务?", "安全确认", {
           cancelButtonText: "取消",
           confirmButtonText: "确定",
           customClass: "uav_controlPane",
           showClose: false,
         });
-        item.loading = true;
+        this.loading = true;
         this.rootNode.$emit("taskDel", {
           task: item,
           type: 0, // 0: 日常任务 1.定时任务 2.周期任务
           callback: () => {
             this.getTaskList();
+            this.loading = false;
           },
         });
       } catch (e) {
         console.log(e);
       }
     },
-    onTaskAddClose() {
-      this.showTaskAdd = false;
+
+    /**
+     * 打开飞行计划
+     */
+    onOpenPlan(item) {
+      this.selectedTask = item;
+      this.showFlightPlan = true;
     },
-    onAddDone() {
-      this.getTaskList();
+    /**
+     * 打开飞行编辑
+     */
+    onOpenEdit(item) {
+      this.selectedTask = item;
+      this.showFlightEdit = true;
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.timed-task {
-  height: 100%;
+<style lang="scss">
+.stl-timed-task {
+  height: 230px;
   display: flex;
   flex-direction: column;
-  padding: 5px 10px 5px;
-  gap: 8px;
+  padding: 16px 17px;
+  gap: 0px;
   box-sizing: border-box;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: calc(100% - 26px);
+    height: calc(100% - 24px);
+    border-radius: 4px;
+    border: 1px solid #4b4b4b;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 
   .timed-task-header {
     display: flex;
     flex-shrink: 0;
-    font-family: MicrosoftYaHei-Bold;
     font-size: 14px;
-    color: #b5e5ff;
-    padding: 5px 0;
-    letter-spacing: 0;
-    font-weight: 700;
-    background: rgba(87, 96, 138, 0.2);
-    border: 1px solid rgba(207, 234, 255, 0.33);
-    gap: 3px;
+    height: 42px;
+    background: #343434;
+    font-family: YouSheBiaoTiHei;
+    font-size: 16px;
+    color: #ebf9ff;
 
     .header__column {
       flex: 1;
@@ -217,26 +262,34 @@ export default {
     color: #fff;
     overflow-y: auto;
     flex: 1;
+    z-index: 1;
 
     .row {
       display: flex;
       color: #fff;
-      background: url("../../assets/images/listBg.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      height: 33px;
-      line-height: 33px;
-      padding-left: 4px;
-      margin-bottom: 16px;
+      $height: 52px;
+      height: $height;
+      background-color: #222222;
+      line-height: $height;
       gap: 3px;
 
+      &.single {
+        background-color: #343434;
+      }
+
       .row__column {
+        font-size: 14px;
         flex: 1;
         text-align: center;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
 
+        &.col-2 {
+          text-overflow: initial;
+          font-size: 14px;
+        }
+
         &.flex2 {
           flex: 2;
         }
@@ -247,8 +300,9 @@ export default {
           align-items: center;
           gap: 5px;
 
-          .icon {
+          i {
             cursor: pointer;
+            font-size: 20px;
 
             &.loading {
               opacity: 0.5;
@@ -259,6 +313,7 @@ export default {
         &.status {
           flex: initial;
           width: 70px;
+          font-size: 14px;
         }
       }
     }

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/airwayList/index.vue

@@ -20,10 +20,8 @@
     <div class="task-list-main">
       <!-- 常态任务 -->
       <NormalTask v-if="tabIndex === 0"></NormalTask>
-      <!-- 定时任务 -->
-      <TimedTask v-else-if="tabIndex === 1"></TimedTask>
-      <!-- 周期任务 -->
-      <PeriodTask v-else-if="tabIndex === 2"></PeriodTask>
+      <!-- 定时任务 --><!-- 周期任务 -->
+      <TimedTask v-else :type="tabIndex"></TimedTask>
     </div>
   </div>
 </template>
@@ -31,7 +29,6 @@
 <script>
 import NormalTask from "./components/normalTask";
 import TimedTask from "./components/timedTask";
-import PeriodTask from "./components/periodTask";
 import { mapState } from "vuex";
 
 export default {
@@ -39,7 +36,6 @@ export default {
   components: {
     NormalTask,
     TimedTask,
-    PeriodTask,
   },
   data() {
     return {
@@ -63,10 +59,10 @@ export default {
 
 <style lang="scss" scoped>
 .task-list {
-  width: 416px;
-  height: 254px;
+  width: 526px;
+  height: 262px;
   background: #222222;
-  border-radius: 10px 10px 0 0;
+  border-radius: 10px 10px 10px 10px;
   display: flex;
   flex-direction: column;
 
@@ -76,6 +72,7 @@ export default {
     height: 32px;
     flex-shrink: 0;
     display: flex;
+    overflow: hidden;
 
     .task-list-header__item {
       flex: 1;
@@ -119,7 +116,7 @@ export default {
 
   .task-list-main {
     flex: 1;
-    overflow: hidden;
+    // overflow: hidden;
   }
 }
 </style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/components/normalTask/index.vue

-<template>
-  <div class="normal-task">
-    <el-form label-width="60px">
-      <el-form-item label="任务库">
-        <el-select
-          v-model="selectedTaskId"
-          popper-class="mmc"
-          @change="onChangeTask"
-          placeholder="请选择任务"
-          clearable
-        >
-          <template v-if="showTaskList">
-            <el-option
-              v-for="item in taskListAll"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
-          </template>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="航线">
-        <el-button
-          v-if="selectedTaskId !== -1"
-          :disabled="selectedTaskId === ''"
-          @click="onStartTask"
-        >一键任务</el-button>
-        <el-button v-else @click="showFlywayDialog = true">请选择航线</el-button>
-      </el-form-item>
-    </el-form>
-    <LineList v-if="showFlywayDialog" @close="showFlywayDialog = false;" @change="onChangeLine"></LineList>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import LineList from "./components/lineList";
-import { AirLine } from "../../../../../../../../../../api";
-import hangarStatusDict from "../../hangarStatusDict";
-
-export default {
-  name: "normalTask",
-  components: {
-    LineList,
-  },
-  inject: ["rootNode", "bus"],
-  data() {
-    return {
-      // 选择的任务id
-      selectedTaskId: "",
-      // 选择的航线
-      selectedAirway: {
-        name: "",
-        id: -1,
-      },
-      // 航线选择窗口
-      showFlywayDialog: false,
-      showTaskList: true, //用于任务列表更改时强制刷新组件
-      taskListAll: [],
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter", ["useSTLAirway"]),
-    ...mapState("MMCFlightControlCenter/hangar", [
-      "hangarRealTimeData",
-      "hangar",
-      "taskList",
-    ]),
-    ...mapState("MMCFlightControlCenter/uav", ["uav"]),
-    /**
-     * 是否选择任务
-     */
-    isSelectTask() {
-      return this.selectedTaskId[0] !== -1;
-    },
-    /**
-     * 选择的任务数据
-     */
-    selectedTask() {
-      let find = this.taskList.normal.find((item) => {
-        return item.id === this.selectedTaskId;
-      });
-      return find;
-    },
-  },
-  watch: {
-    selectedAirway() {
-      this.clearAirwayEntities();
-      if (this.selectedAirway.id !== -1) {
-        try {
-          let airway = this.selectedAirway.content;
-          this.createAirwayEntities({
-            polyline: airway,
-            id: airway.id,
-          });
-        } catch (e) {
-          console.log("绘制航线失败", e);
-        }
-      }
-    },
-  },
-  created() {
-    this.rootNode.$emit("hangarTaskTabChange", {
-      type: 1,
-    });
-    this.updateTaskList();
-    //todo 通过iframe嵌入时, 不知道为什么无法监听this.$store.state.MMCFlightControlCenter.hangar.taskList的变化, 会导致任务列表不更新, 通过事件方式强制更新
-    this.bus.$on("updateHangarTaskList", this.updateTaskList);
-  },
-  beforeDestroy() {
-    this.clearAirwayEntities();
-    this.bus.$off("updateHangarTaskList", this.updateTaskList);
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 更新任务列表
-     */
-    updateTaskList() {
-      console.log("updateTaskList");
-      this.taskListAll = [
-        {
-          id: -1,
-          name: "选择航线自动生成任务",
-        },
-        ...(this.$store.state.MMCFlightControlCenter.hangar.taskList.normal ||
-          []),
-      ];
-    },
-    /**
-     * 更改任务事件
-     */
-    async onChangeTask() {
-      if (!this.selectedTask?.airwayId) {
-        this.selectedAirway = {
-          name: "",
-          id: -1,
-        };
-      } else if (this.useSTLAirway) {
-        let res = await AirLine.routeDetail({
-          id: this.selectedTask?.airwayId,
-        });
-        if (res.code === 0) {
-          this.selectedAirway = res.data;
-        }
-      } else {
-        this.rootNode.$emit('airwayGet', {
-          airwayId: this.selectedTask?.airwayId,
-          callback: (airway) => {
-            this.selectedAirway = airway;
-          }
-        })
-      }
-    },
-    /**
-     * 更改航线事件
-     */
-    onChangeLine(data) {
-      this.selectedAirway = data;
-      if (data) {
-        this.rootNode.$emit("hangarTaskAdd", {
-          type: 1, //1: 日常任务 2.定时任务 3.周期任务
-          airway: data, //航线数据
-          callback: ({ id }) => {
-            // 返回新增任务后的任务id
-            this.selectedTaskId = [id];
-          },
-        }); // 根节点发送机库任务新增事件
-      }
-    },
-    /**
-     * 一键任务事件
-     */
-    async onStartTask() {
-      // 判断是否选择了航线
-      if (this.selectedAirway.id === -1) {
-        this.$message.warning("请选择航线");
-        return;
-      }
-      try {
-        await this.$confirm("请确认是否进行一键任务操作?", "安全确认", {
-          cancelButtonText: "取消",
-          confirmButtonText: "确定",
-          customClass: "uav_controlPane",
-          showClose: false,
-        });
-        // 当前机库状态是否空闲
-        if ([0, 8].includes(this.hangarRealTimeData.processStatus)) {
-          this.$store.commit("MMCFlightControlCenter/hangar/setState", {
-            key: "airlineData",
-            value: this.selectedAirway,
-          });
-          this.$store.dispatch("MMCFlightControlCenter/hangar/takeOff", {
-            uav: this.uav,
-            callback: (status) => {
-              if (status) {
-                this.$message.success("一键任务指令发送成功");
-              } else {
-                this.$message.error("一键任务指令发送失败");
-              }
-            },
-          });
-          this.rootNode.$emit("taskStart", {
-            type: 1, //1: 日常任务 2:定时任务 3:周期任务
-            hangar: this.hangar,
-            task: this.selectedTask,
-            airway: this.selectedAirway,
-          });
-        } else {
-          // 获取当前机库状态
-          const statusItem = hangarStatusDict.find(
-            (item) => item.value === this.hangarRealTimeData.processStatus
-          );
-          this.$message.warning(statusItem?.label || "");
-        }
-      } catch (e) {}
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.normal-task ::v-deep {
-  padding: 32px 16px;
-
-  .el-form-item__label {
-    color: #fff;
-  }
-
-  .el-form-item__content {
-    > * {
-      width: 100%;
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/components/periodTask/components/taskAdd/index.vue

-<template>
-  <div class="task-add dialog1027" v-interact>
-    <div class="dialog-header">
-      <div class="dialog-header__title">定时任务</div>
-      <div class="dialog-header__close" @click="$emit('close')">关闭</div>
-    </div>
-    <div class="dialog-content">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="执行日期" prop="date" required>
-          <el-date-picker
-            v-model="form.date"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            size="mini"
-            popper-class="mmc"
-            value-format="yyyy-MM-dd"
-            :picker-options="pickerOptions"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item label="执行时间" prop="time" required>
-          <el-time-picker
-            is-range
-            v-model="form.time"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="选择时间范围"
-            size="mini"
-            popper-class="mmc"
-            value-format="HH:mm:ss"
-          ></el-time-picker>
-        </el-form-item>
-        <el-form-item label="任务名称" required>
-          <el-select v-model="form.normalTaskId" size="mini" popper-class="mmc" style="width:100%">
-            <el-option :label="item.name" :value="item.id" v-for="(item, index) in taskList.normal"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="task-add-btn">
-      <div class="task-add__btn" @click="onConfirm">确认</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { AirLine } from "../../../../../../../../../../../../api";
-
-export default {
-  name: "TaskAdd",
-  inject: ["rootNode"],
-  data() {
-    return {
-      form: {
-        date: [],
-        time: ["00:00:00", "23:59:59"],
-        normalTaskId: "",
-      },
-      rules: {
-        date: [{ required: true, message: "请选择日期", trigger: "blur" }],
-        time: [{ required: true, message: "请选择时间", trigger: "blur" }],
-        normalTaskId: [
-          { required: true, message: "请选择任务", trigger: "blur" },
-        ],
-      },
-      pickerOptions: {
-        disabledDate: (time) => {
-          // 日期选择限制
-          return time.getTime() < Date.now() - 8.64e7;
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter/hangar", ["taskList"]),
-    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
-    /**
-     * 选择的日常任务数据
-     */
-    selectedTask() {
-      let find = this.taskList.normal.find((item) => {
-        return item.id === this.form.normalTaskId;
-      });
-      return find;
-    },
-  },
-  watch: {
-    selectedTask: {
-      async handler(newVal, oldVal) {
-        //清除旧的航线并渲染新航线
-        let find = this.airwayEntities.find(
-          (item1) => oldVal?.airwayId === item1.airwayId
-        );
-        if (find) {
-          this.clearAirwayEntities({ id: find.airwayId });
-        }
-
-        //渲染新航线
-        if (newVal) {
-          await this.getAirway(newVal);
-          this.createAirwayEntities({
-            polyline: newVal.airway.content,
-            id: newVal.airwayId,
-          });
-        }
-      },
-    },
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 将任务中航线对象补充完整
-     */
-    async getAirway(item) {
-      if (!item.airway) {
-        let res = await AirLine.routeDetail({
-          id: item?.airwayId,
-        });
-        if (res.code === 0) {
-          this.$set(item, "airway", res.data);
-        }
-      }
-    },
-
-    /**
-     * 确认事件
-     */
-    onConfirm() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          this.rootNode.$emit("hangarTaskAdd", {
-            type: 3, //1: 日常任务 2.定时任务 3.周期任务
-            taskList: [{ ...this.form, airway: this.selectedTask.airway }], //任务数据
-          }); // 根节点发送机库任务新增事件
-          this.$emit("close");
-        } else {
-          return false;
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.task-add {
-  height: 286px;
-  background: rgba(9, 32, 87, 0.7);
-  // border: 1px solid #70daf9;
-  position: absolute;
-  top: -5px;
-  left: 550px;
-  width: 512x;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  padding-bottom: 20px;
-
-  &.more {
-    height: 376px;
-  }
-
-  .dialog-header {
-    padding-left: 16px !important;
-  }
-
-  .task-add-main {
-    padding: 20px 20px 0 10px;
-  }
-
-  .task-add-btn {
-    flex-shrink: 0;
-
-    .task-add__btn {
-      margin: auto;
-      width: 92px;
-      height: 36px;
-      background: #3388ff;
-      border-radius: 2px;
-      cursor: pointer;
-      text-align: center;
-      color: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  .task-add-more {
-    background-color: rgba(13, 82, 143, 0.6);
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/components/periodTask/index.vue

-<template>
-  <div class="timed-task">
-    <div class="timed-task-header">
-      <div class="header__column flex2">名称</div>
-      <div class="header__column flex2">时间</div>
-      <div class="header__column">状态</div>
-      <div class="header__column flex2">操作</div>
-    </div>
-    <div class="timed-task-main">
-      <div class="row" v-for="item in taskListAll" :key="item.id">
-        <div class="row__column flex2">
-          <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
-            <span>{{item.name}}</span>
-          </el-tooltip>
-        </div>
-        <div class="row__column flex2">
-          <el-tooltip class="item" effect="dark" :content="item.time" placement="top-start">
-            <span>{{item.time}}</span>
-          </el-tooltip>
-        </div>
-        <div class="row__column" style="color: rgb(255, 189, 54);">{{item.status}}</div>
-        <div class="row__column flex2 ctrl">
-          <el-tooltip content="查看" placement="top">
-            <span
-              class="icon-chakan1 iconfont icon"
-              style="color: #ffffff; font-size: 10px;"
-              @click="onSwitchAirway(item)"
-            ></span>
-          </el-tooltip>
-          <!--   <el-tooltip content="历史" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/history.png" />
-          </el-tooltip>-->
-          <!--    <el-tooltip content="禁用" v-if="!item.enable" placement="top">
-            <img class="icon" style="width: 18px;" src="../../assets/images/enable.png" />
-          </el-tooltip>
-          <el-tooltip content="启用" v-if="item.enable" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/able.png" />
-          </el-tooltip>-->
-          <el-tooltip content="删除" placement="top">
-            <span class="icon-shanchu iconfont icon" @click="onDelAirway(item)"></span>
-          </el-tooltip>
-        </div>
-      </div>
-    </div>
-    <div class="task-add-btn">
-      <div class="task-add__btn" @click="showTaskAdd = true">创建周期任务</div>
-    </div>
-
-    <TaskAdd v-if="showTaskAdd" @close="showTaskAdd = false"></TaskAdd>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { AirLine } from "../../../../../../../../../../api";
-import TaskAdd from "./components/taskAdd";
-
-export default {
-  name: "hangarPeriodTask",
-  components: {
-    TaskAdd,
-  },
-  inject: ["rootNode", "bus"],
-  data() {
-    return {
-      showTaskAdd: false,
-      taskListAll: [],
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
-    ...mapState("MMCFlightControlCenter/hangar", [
-      "hangarRealTimeData",
-      "hangar",
-      "taskList",
-    ]),
-  },
-  created() {
-    this.rootNode.$emit("hangarTaskTabChange", {
-      type: 3,
-    });
-    this.updateTaskList();
-    //todo 通过iframe嵌入时, 不知道为什么无法监听this.$store.state.MMCFlightControlCenter.hangar.taskList的变化, 会导致任务列表不更新, 通过事件方式强制更新
-    this.bus.$on("updateHangarTaskList", this.updateTaskList);
-  },
-  beforeDestroy() {
-    this.clearAirwayEntities();
-    this.bus.$off("updateHangarTaskList", this.updateTaskList);
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 更新任务列表
-     */
-    updateTaskList() {
-      this.taskListAll = [
-        ...(this.$store.state.MMCFlightControlCenter.hangar.taskList.period ||
-          []),
-      ];
-      console.log("updateTaskList", this.taskListAll);
-    },
-    /**
-     * 将任务中航线对象补充完整
-     */
-    async getAirway(item) {
-      if (!item.airway) {
-        let res = await AirLine.routeDetail({
-          id: item?.airwayId,
-        });
-        if (res.code === 0) {
-          item.airway = res.data;
-        }
-      }
-    },
-    /**
-     * 显示或隐藏航线
-     */
-    async onSwitchAirway(item) {
-      await this.getAirway(item);
-      let find = this.airwayEntities.find(
-        (item1) => item1.airwayId === item.airwayId
-      );
-      if (find) {
-        this.clearAirwayEntities({ id: find.airwayId });
-      } else {
-        this.createAirwayEntities({
-          polyline: item.airway.content,
-          id: item.airwayId,
-        });
-      }
-    },
-    async onDelAirway(item) {
-      try {
-        await this.$confirm("请确认是否删除该任务?", "安全确认", {
-          cancelButtonText: "取消",
-          confirmButtonText: "确定",
-          customClass: "uav_controlPane",
-          showClose: false,
-        });
-        this.rootNode.$emit("hangarTaskDel", {
-          task: item,
-          type: 3, // 1: 日常任务 2: 定时任务 3:周期任务
-        });
-      } catch (e) {
-        console.log(e);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.timed-task {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 5px 10px 5px;
-  gap: 8px;
-  box-sizing: border-box;
-
-  .timed-task-header {
-    display: flex;
-    flex-shrink: 0;
-    font-family: MicrosoftYaHei-Bold;
-    font-size: 14px;
-    color: #b5e5ff;
-    padding: 5px 0;
-    letter-spacing: 0;
-    font-weight: 700;
-    background: rgba(87, 96, 138, 0.2);
-    border: 1px solid rgba(207, 234, 255, 0.33);
-    gap: 3px;
-
-    .header__column {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.flex2 {
-        flex: 2;
-      }
-    }
-  }
-
-  .timed-task-main {
-    color: #fff;
-    overflow-y: auto;
-    flex: 1;
-
-    .row {
-      display: flex;
-      color: #fff;
-      background: url("../../assets/images/listBg.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      height: 33px;
-      line-height: 33px;
-      padding-left: 4px;
-      margin-bottom: 16px;
-      gap: 3px;
-
-      .row__column {
-        flex: 1;
-        text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &.flex2 {
-          flex: 2;
-        }
-
-        &.ctrl {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 5px;
-
-          .icon {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-
-  .task-add-btn {
-    text-align: center;
-
-    .task-add__btn {
-      width: 124px;
-      height: 36px;
-      background: #3388ff;
-      border-radius: 2px;
-      text-align: center;
-      line-height: 32px;
-      margin: 0 auto;
-      margin-bottom: 10px;
-      cursor: pointer;
-      color: #fff;
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/components/timedTask/components/taskAdd/index.vue

-<template>
-  <div class="task-add dialog1027" :class="{more: showMore}" v-interact>
-    <div class="task-add-header dialog-header">
-      <div class="header__title dialog-header__title">定时任务</div>
-      <div class="header-right dialog-header__close">
-        <div class="header-right__add" @click="onTaskAdd">
-          <span class="iconfont icon-zengjia"></span>添加任务
-        </div>
-        <div class="header-right__close" @click="$emit('close')">关闭</div>
-      </div>
-    </div>
-    <div class="task-add-main dialog-content">
-      <div class="main-item" v-for="(item, index) in list" :key="index">
-        <el-date-picker
-          v-model="item.time"
-          size="mini"
-          popper-class="mmc"
-          type="datetime"
-          placeholder="选择时间"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :picker-options="pickerOptions"
-        ></el-date-picker>
-        <el-select
-          v-model="item.normalTaskId"
-          size="mini"
-          popper-class="mmc"
-          @change="onChangeTask(item, index)"
-          placeholder="请选择任务"
-        >
-          <el-option
-            :label="item1.name"
-            :value="item1.id"
-            v-for="(item1, index) in taskList.normal"
-          ></el-option>
-        </el-select>
-        <el-input
-          placeholder="航线名称"
-          class="input"
-          size="mini"
-          :value="item.airway ? item.airway.name : ''"
-          disabled
-        />
-        <el-tooltip content="删除" placement="top">
-          <span class="icon-shanchu iconfont" @click="onDelTask(index)"></span>
-        </el-tooltip>
-        <el-tooltip content="查看" placement="top">
-          <span
-            class="icon-chakan1 iconfont"
-            style="font-size: 10px;"
-            @click="onSwitchAirway(item)"
-          ></span>
-        </el-tooltip>
-      </div>
-    </div>
-    <div class="task-add-btn">
-      <div class="task-add__btn" @click="onConfirm">确认</div>
-    </div>
-    <div class="task-add-more" @click="showMore = !showMore">
-      <img src="../../../../assets/images/xb.png" width="15" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { AirLine } from "../../../../../../../../../../../../api";
-
-export default {
-  name: "TaskAdd",
-  inject: ["rootNode"],
-  data() {
-    return {
-      list: [
-        /* {
-          time: '',
-          normalTaskId: '',
-          airwayId: ''
-        } */
-      ],
-      showMore: false,
-      pickerOptions: {
-        disabledDate: (time) => {
-          // 日期选择限制
-          return time.getTime() < Date.now() - 8.64e7;
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter/hangar", ["taskList"]),
-    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 将任务中航线对象补充完整
-     */
-    async getAirway(id) {
-      let res = await AirLine.routeDetail({
-        id: id,
-      });
-      if (res.code === 0) {
-        return res.data;
-      }
-    },
-    /**
-     * 显示或隐藏航线
-     */
-    async onSwitchAirway(item) {
-      let find = this.airwayEntities.find(
-        (item1) => item1.airwayId === item.airwayId
-      );
-      if (find) {
-        this.clearAirwayEntities({ id: find.airwayId });
-      } else {
-        this.createAirwayEntities({
-          polyline: item.airway.content,
-          id: item.airwayId,
-        });
-      }
-    },
-    /**
-     * 添加新任务
-     */
-    onTaskAdd(item) {
-      this.list.push({
-        time: "",
-        normalTaskId: "",
-        airwayId: "",
-      });
-    },
-    /**
-     * 任务内容更改
-     */
-    async onChangeTask(item, i) {
-      let normalTask = this.selectedTask(item.normalTaskId);
-      item.airwayId = normalTask.airwayId;
-      let find = this.taskList.normal.find(
-        (task) => task.airwayId === item.airwayId
-      );
-      if (find) {
-        item.airway = find.airway;
-      }
-      if (!find.airway) {
-        item.airway = await this.getAirway(item.airwayId);
-      }
-      this.$set(this.list, i, item);
-    },
-    /**
-     * 删除的任务
-     */
-    onDelTask(index) {
-      this.list = this.list.filter((item, i) => i !== index);
-    },
-    /**
-     * 选择的日常任务数据
-     */
-    selectedTask(normalTaskId) {
-      let find = this.taskList.normal.find((item) => {
-        return item.id === normalTaskId;
-      });
-      return find;
-    },
-    /**
-     * 确认事件
-     */
-    onConfirm() {
-      let isOk = true;
-      this.list.some((item) => {
-        if (!item.time) {
-          this.$message.warning("请选择时间")
-          isOk = false;
-          return true;
-        }
-        if (!item.normalTaskId) {
-          this.$message.warning("请选择任务")
-          isOk = false;
-          return true;
-        }
-      });
-      if (isOk) {
-        this.rootNode.$emit("hangarTaskAdd", {
-          type: 2, //1: 日常任务 2.定时任务 3.周期任务
-          taskList: this.list, //任务数据
-        }); // 根节点发送机库任务新增事件
-        this.$emit("close");
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.task-add {
-  height: 250px;
-  position: absolute;
-  top: -5px;
-  left: 550px;
-  width: 620px;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  &.more {
-    height: 376px;
-  }
-
-  .task-add-header {
-    flex-shrink: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 32px;
-    padding: 0 20px 0 0;
-
-    .header__title {
-      font-family: MicrosoftYaHei-Bold;
-      font-size: 16px;
-      color: #70daf9;
-      letter-spacing: 0;
-      font-weight: 700;
-    }
-
-    .header-right {
-      display: flex;
-      gap: 20px;
-      font-family: MicrosoftYaHei;
-      font-size: 16px;
-      color: #70daf9;
-      letter-spacing: 0;
-      font-weight: 400;
-
-      .header-right__add {
-        font-size: 12px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-      .header-right__close {
-        font-size: 16px;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .task-add-main {
-    padding: 20px 20px 0 10px;
-    flex: 1;
-    overflow-y: auto;
-
-    .main-item::v-deep {
-      margin-bottom: 20px;
-      display: flex;
-      align-items: center;
-      font-size: 15px;
-      color: #fff;
-      gap: 5px;
-      height: fit-content;
-
-      .el-date-editor {
-        width: 188px;
-      }
-
-      .el-select {
-        width: 200px;
-      }
-
-      .input {
-        width: 150px;
-      }
-
-      .iconfont {
-        color: rgb(67, 222, 255);
-        cursor: pointer;
-      }
-    }
-  }
-
-  .task-add-btn {
-    flex-shrink: 0;
-
-    .task-add__btn {
-      width: 92px;
-      height: 36px;
-      background: #3388ff;
-      border-radius: 2px;
-      text-align: center;
-      line-height: 32px;
-      margin: 0 auto;
-      margin-bottom: 10px;
-      cursor: pointer;
-      color: #fff;
-    }
-  }
-
-  .task-add-more {
-    background-color: #191919;
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/components/timedTask/index.vue

-<template>
-  <div class="timed-task">
-    <div class="timed-task-header">
-      <div class="header__column flex2">名称</div>
-      <div class="header__column flex2">时间</div>
-      <div class="header__column">状态</div>
-      <div class="header__column flex2">操作</div>
-    </div>
-    <div class="timed-task-main">
-      <div class="row" v-for="item in taskListAll" :key="item.id">
-        <div class="row__column flex2">
-          <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
-            <span>{{item.name}}</span>
-          </el-tooltip>
-        </div>
-        <div class="row__column flex2">
-          <el-tooltip class="item" effect="dark" :content="item.time" placement="top-start">
-            <span>{{item.time}}</span>
-          </el-tooltip>
-        </div>
-        <div class="row__column" style="color: rgb(255, 189, 54);">{{item.status}}</div>
-        <div class="row__column flex2 ctrl">
-          <el-tooltip content="查看" placement="top">
-            <span
-              class="icon-chakan1 iconfont icon"
-              style="color: #ffffff; font-size: 10px;"
-              @click="onSwitchAirway(item)"
-            ></span>
-          </el-tooltip>
-          <!--   <el-tooltip content="历史" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/history.png" />
-          </el-tooltip>-->
-          <!--    <el-tooltip content="禁用" v-if="!item.enable" placement="top">
-            <img class="icon" style="width: 18px;" src="../../assets/images/enable.png" />
-          </el-tooltip>
-          <el-tooltip content="启用" v-if="item.enable" placement="top">
-            <img class="icon" style="width: 15px;" src="../../assets/images/able.png" />
-          </el-tooltip>-->
-          <el-tooltip content="删除" placement="top">
-            <span class="icon-shanchu iconfont icon" @click="onDelAirway(item)"></span>
-          </el-tooltip>
-        </div>
-      </div>
-    </div>
-    <div class="task-add-btn">
-      <div class="task-add__btn" @click="showTaskAdd = true">创建定时任务</div>
-    </div>
-
-    <TaskAdd v-if="showTaskAdd" @close="showTaskAdd = false"></TaskAdd>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { AirLine } from "../../../../../../../../../../api";
-import TaskAdd from "./components/taskAdd";
-
-export default {
-  name: "hangarTimedTask",
-  components: {
-    TaskAdd,
-  },
-  inject: ["rootNode", "bus"],
-  data() {
-    return {
-      showTaskAdd: false,
-      taskListAll: [],
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
-    ...mapState("MMCFlightControlCenter/hangar", [
-      "hangarRealTimeData",
-      "hangar",
-      "taskList",
-    ]),
-  },
-  created() {
-    this.rootNode.$emit("hangarTaskTabChange", {
-      type: 2,
-    });
-    this.updateTaskList();
-    //todo 通过iframe嵌入时, 不知道为什么无法监听this.$store.state.MMCFlightControlCenter.hangar.taskList的变化, 会导致任务列表不更新, 通过事件方式强制更新
-    this.bus.$on("updateHangarTaskList", this.updateTaskList);
-  },
-  beforeDestroy() {
-    this.clearAirwayEntities();
-    this.bus.$off("updateHangarTaskList", this.updateTaskList);
-  },
-  methods: {
-    ...mapActions("MMCFlightControlCenter", [
-      "createAirwayEntities",
-      "clearAirwayEntities",
-    ]),
-    /**
-     * 更新任务列表
-     */
-    updateTaskList() {
-      this.taskListAll = [
-        ...(this.$store.state.MMCFlightControlCenter.hangar.taskList.timed ||
-          []),
-      ];
-      console.log("updateTaskList", this.taskListAll);
-    },
-    /**
-     * 将任务中航线对象补充完整
-     */
-    async getAirway(item) {
-      if (!item.airway) {
-        let res = await AirLine.routeDetail({
-          id: item?.airwayId,
-        });
-        if (res.code === 0) {
-          item.airway = res.data;
-        }
-      }
-    },
-    /**
-     * 显示或隐藏航线
-     */
-    async onSwitchAirway(item) {
-      await this.getAirway(item);
-      let find = this.airwayEntities.find(
-        (item1) => item1.airwayId === item.airwayId
-      );
-      if (find) {
-        this.clearAirwayEntities({ id: find.airwayId });
-      } else {
-        this.createAirwayEntities({
-          polyline: item.airway.content,
-          id: item.airwayId,
-        });
-      }
-    },
-    async onDelAirway(item) {
-      try {
-        await this.$confirm("请确认是否删除该任务?", "安全确认", {
-          cancelButtonText: "取消",
-          confirmButtonText: "确定",
-          customClass: "uav_controlPane",
-          showClose: false,
-        });
-        this.rootNode.$emit("hangarTaskDel", {
-          task: item,
-          type: 2, // 1: 日常任务 2: 定时任务 3:周期任务
-        });
-      } catch (e) {
-        console.log(e);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.timed-task {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 5px 10px 5px;
-  gap: 8px;
-  box-sizing: border-box;
-
-  .timed-task-header {
-    display: flex;
-    flex-shrink: 0;
-    font-family: MicrosoftYaHei-Bold;
-    font-size: 14px;
-    color: #b5e5ff;
-    padding: 5px 0;
-    letter-spacing: 0;
-    font-weight: 700;
-    background: rgba(87, 96, 138, 0.2);
-    border: 1px solid rgba(207, 234, 255, 0.33);
-    gap: 3px;
-
-    .header__column {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.flex2 {
-        flex: 2;
-      }
-    }
-  }
-
-  .timed-task-main {
-    color: #fff;
-    overflow-y: auto;
-    flex: 1;
-
-    .row {
-      display: flex;
-      color: #fff;
-      background: url("../../assets/images/listBg.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      height: 33px;
-      line-height: 33px;
-      padding-left: 4px;
-      margin-bottom: 16px;
-      gap: 3px;
-
-      .row__column {
-        flex: 1;
-        text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &.flex2 {
-          flex: 2;
-        }
-
-        &.ctrl {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 5px;
-
-          .icon {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-
-  .task-add-btn {
-    text-align: center;
-
-    .task-add__btn {
-      width: 124px;
-      height: 36px;
-      background: #3388ff;
-      border-radius: 2px;
-      text-align: center;
-      line-height: 32px;
-      margin: 0 auto;
-      margin-bottom: 10px;
-      cursor: pointer;
-      color: #fff;
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/hangarStatusDict.js

-// 机库状态字典
-export default [
-  {
-    value: 0,
-    label: "空闲 ",
-  },
-  {
-    value: 1,
-    label: "正在执行出仓待命 ",
-  },
-  {
-    value: 2,
-    label: "正在执行回收入仓 ",
-  },
-  {
-    value: 3,
-    label: "正在执行充电流程",
-  },
-  {
-    value: 4,
-    label: "正在结束充电流程",
-  },
-  {
-    value: 5,
-    label: "正在执行休眠流程",
-  },
-  {
-    value: 6,
-    label: "正在执行预热流程",
-  },
-  {
-    value: 7,
-    label: "正在执行初始化",
-  },
-  {
-    value: 8,
-    label: "未初始化",
-  },
-  {
-    value: 9,
-    label: "正在执行关舱流程 ",
-  },
-  {
-    value: 10,
-    label: "正在执行回中器操作 ",
-  },
-  {
-    value: 99,
-    label: "正在执行飞行任务",
-  },
-];

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/index.vue

-<template>
-  <div class="task-list">
-    <div class="task-list-header">
-      <div
-        class="task-list-header__item"
-        :class="{active: tabIndex === 0 && useTimedTask}"
-        @click="tabIndex = 0"
-      >
-        <label>常态飞行</label>
-      </div>
-      <template v-if="useTimedTask">
-        <div class="task-list-header__item" :class="{active: tabIndex === 1}" @click="tabIndex = 1">
-          <label>定时飞行</label>
-        </div>
-        <div class="task-list-header__item" :class="{active: tabIndex === 2}" @click="tabIndex = 2">
-          <label>周期飞行</label>
-        </div>
-      </template>
-    </div>
-    <div class="task-list-main">
-      <!-- 常态任务 -->
-      <NormalTask v-if="tabIndex === 0"></NormalTask>
-      <!-- 定时任务 -->
-      <TimedTask v-else-if="tabIndex === 1"></TimedTask>
-      <!-- 周期任务 -->
-      <PeriodTask v-else-if="tabIndex === 2"></PeriodTask>
-    </div>
-  </div>
-</template>
-
-<script>
-import NormalTask from "./components/normalTask";
-import TimedTask from "./components/timedTask";
-import PeriodTask from "./components/periodTask";
-import { mapState } from "vuex";
-
-export default {
-  name: "hangarTaskList",
-  components: {
-    NormalTask,
-    TimedTask,
-    PeriodTask,
-  },
-  data() {
-    return {
-      tabIndex: 0,
-    };
-  },
-  computed: {
-    ...mapState("MMCFlightControlCenter", ["useTimedTask"]),
-  },
-  watch: {
-    useTimedTask() {
-      if (!this.useTimedTask) {
-        this.tabIndex = 0;
-      }
-    },
-  },
-  mounted() {},
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped>
-.task-list {
-  width: 416px;
-  height: 254px;
-  background: #222222;
-  border-radius: 10px 10px 0 0;
-  display: flex;
-  flex-direction: column;
-
-  .task-list-header {
-    background: #3c3c3c;
-    border-radius: 10px 10px 0px 0px;
-    height: 32px;
-    flex-shrink: 0;
-    display: flex;
-
-    .task-list-header__item {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-family: YouSheBiaoTiHei;
-      font-size: 16px;
-      color: #fff;
-      cursor: pointer;
-
-      * {
-        cursor: pointer;
-      }
-
-      &.active {
-        background: #3388ff;
-        label {
-          font-family: YouSheBiaoTiHei;
-          font-size: 20px;
-          color: #14faff;
-          line-height: 26px;
-          text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
-          text-align: left;
-          font-style: normal;
-          background-image: -webkit-linear-gradient(
-            right,
-            #e3aa77,
-            #f5cda9,
-            #f9ecd3,
-            #fcdbb1,
-            #edb07a
-          );
-          line-height: 32px;
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-      }
-    }
-  }
-
-  .task-list-main {
-    flex: 1;
-    overflow: hidden;
-  }
-}
-</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/index.vue

@@ -107,7 +107,7 @@ export default {
   position: absolute;
   z-index: 2;
   left: 430px;
-  top: 28px;
+  top: 68px;
   transition: 0.3s;
 
   &.collapse {

src/components/MMCFlightControlCenter/index.vue

@@ -407,7 +407,7 @@ export default {
   .dialog1027 {
     z-index: 1;
     background: #222222;
-    border-radius: 10px 10px 0px 0px;
+    border-radius: 10px 10px 10px 10px;
     .dialog-header {
       box-sizing: border-box;
       padding-left: 32px;

src/style/custom.scss

@@ -413,12 +413,10 @@ div.dib {
     button{
       width: 100px;
       height: 32px;
-      background: #3388FF;
       border-radius: 2px;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       font-size: 14px;
-      color: #FFFFFF;
       line-height: 16px;
       font-style: normal;
     }