完成地图制作任务功能初版

riku

5 天以前 f19e5267cc23b1c714dc746239864f33ed715dd9

 src/views/fysp/task/TaskManage.vue

@@ -31,36 +31,52 @@
        class="el-scrollbar"
        v-loading="mainLoading"
      >
        <el-row justify="space-between">
          <!-- <div><el-text>监管计划</el-text></div>
        <!-- <div><el-text>监管计划</el-text></div>
          <el-button type="warning" size="small" @click="editPlan"
            >计划调整</el-button
          > -->
          <el-tabs model-value="first">
            <el-tab-pane label="监管计划" name="first">
              <el-row>
                <el-col :span="curSubTaskList ? 16 : 24">
                  <CompMonitorPlan
                    :task="curTask.data"
                    @date-change="onDateChange"
                  ></CompMonitorPlan>
                </el-col>
                <el-col v-if="curSubTaskList" :span="8">
                  <CompSubTaskList
                    create
                    v-model="curSubTaskList"
                    :loading="subTaskLoading"
                    height="56vh"
                    @add="subTaskDrawer = true"
                  ></CompSubTaskList>
                </el-col>
              </el-row>
            </el-tab-pane>
            <!-- <el-tab-pane label="监管地图" name="second">
              <CompTaskMap></CompTaskMap>
            </el-tab-pane> -->
          </el-tabs>
        <!-- <el-tabs model-value="first">
            <el-tab-pane label="巡查计划" name="first"> -->
        <el-row justify="space-between" style="padding: 16px 0px 16px 16px">
          <el-text size="large">巡查计划</el-text>
          <!-- <el-button type="primary" size="small" @click="sceneMapDialog = true">
            进入场景地图<el-icon class="el-icon--right"><Right /></el-icon>
          </el-button> -->
        </el-row>
        <div class="plan-container">
          <el-row>
            <el-col :span="curSubTaskList ? 16 : 24">
              <CompMonitorPlan
                :loading="daytaskLoading"
                ref="planRef"
                :task="curTask.data"
                :day-task-list="curDayTaskList"
                @date-change="onDateChange"
              ></CompMonitorPlan>
            </el-col>
            <el-col v-if="curSubTaskList" :span="8">
              <!-- <el-affix target=".plan-container" :offset="140"> -->
                <CompSubTaskList
                  create
                  v-model="curSubTaskList"
                  :date="curDay"
                  :loading="subTaskLoading"
                  :create-loading="daytaskCreateLoading"
                  height="66vh"
                  @openMap="sceneMapDialog = true"
                  @add="handleAddSubtask"
                  @submit="onSubtaskUpdate"
                  @remove="onSubtaskUpdate"
                ></CompSubTaskList>
              <!-- </el-affix> -->
            </el-col>
          </el-row>
        </div>
        <!-- </el-tab-pane>
            <el-tab-pane label="场景地图" name="second"> -->
        <!-- <CompTaskMap :plans="curMonitorObjList"></CompTaskMap> -->
        <!-- </el-tab-pane>
          </el-tabs> -->
        <el-divider></el-divider>
        <el-row justify="space-between">
          <div><el-text>监管场景</el-text></div>
@@ -88,11 +104,11 @@
    title="日计划管理"
    direction="btt"
    size="96%"
    destroy-on-close
  >
    <CompDayTask
      :day-task="curDayTask"
      :mObjList="curMonitorObjList"
      @submit="onSubtaskUpdate"
    ></CompDayTask>
  </el-drawer>
  <el-dialog
@@ -109,9 +125,25 @@
      @cancel="topTaskAddVisible = false"
    ></CompTaskEdit>
  </el-dialog>
  <el-drawer
    v-model="sceneMapDialog"
    title="场景地图"
    direction="btt"
    size="100%"
    body-class="el-drawer__custom"
  >
    <CompTaskMap
      :plans="curMonitorObjList"
      :day-task="curDayTask"
      @submit="onSubtaskUpdate"
    ></CompTaskMap>
  </el-drawer>
</template>

<script>
import { unref } from 'vue';
import { useCloned } from '@vueuse/core';
import dayjs from 'dayjs';
import taskApi from '@/api/fysp/taskApi';
import CompMonitorObj from './components/CompMonitorObj.vue';
import CompMonitorPlan from './components/CompMonitorPlan.vue';
@@ -160,6 +192,9 @@
      showMonitorObjList: [],
      //当前选中的任务
      curTask: {},
      //当前选中的日任务
      curDayTaskList: [],
      daytaskLoading: false,
      //操作按钮
      buttons: [
        {
@@ -178,20 +213,38 @@
      subTaskDrawer: false,
      // 当前选择的日任务
      curDayTask: {},
      curDay: undefined,
      daytaskCreateLoading: false,
      // 当前选择的日任务下的子任务
      curSubTaskList: undefined,
      subTaskLoading: false,
      // 总任务新增弹出框
      topTaskAddVisible: false
      topTaskAddVisible: false,
      // 场景地图弹出框
      sceneMapDialog: false
    };
  },
  provide() {
    return {
      topTask: this.curTask
    };
  },
  computed: {
    // 总任务状态统计
    taskStatus() {
      let total = 0,
        inspected = 0;
      this.curMonitorObjList.forEach((obj) => {
        total += parseInt(obj.monitornum);
        inspected += obj.extension1 ? parseInt(obj.extension1) : 0;
      });
      return [
        { name: '场景数', value: 100 },
        { name: '未巡查', value: 0 },
        { name: '已巡查', value: 0 }
        { name: '场景数', value: total },
        {
          name: '未巡查',
          value: total - inspected > 0 ? total - inspected : 0
        },
        { name: '已巡查', value: inspected }
      ];
    }
  },
@@ -226,10 +279,10 @@
          type = 0;
          break;
        case '正在执行':
          type = 1;
          type = 5;
          break;
        case '已结束':
          type = 2;
          type = 6;
          break;
        default:
          type = 0;
@@ -242,13 +295,28 @@
      this.sideLoading = false;
      this.mainLoading = true;
      this.curSubTaskList = undefined;
      this.curTask = task;
      taskApi
        .fetchMonitorObjectVersion(task.data.tguid)
        .then((res) => {
          this.curMonitorObjList = res;
          this.curTask = task;
        })
        .finally(() => {
          this.mainLoading = false;
          this.fetchDayTasks();
        });
    },
    fetchDayTasks() {
      // 获取日任务统计信息
      this.dayTaskLoading = true;
      this.mainLoading = true;
      return taskApi
        .fetchDayTasks(this.curTask.data.tguid)
        .then((res) => {
          this.curDayTaskList = res;
        })
        .finally(() => {
          this.dayTaskLoading = false;
          this.mainLoading = false;
        });
    },
@@ -270,7 +338,8 @@
        }
      });
    },
    onDateChange(dayTask) {
    onDateChange(dayTask, day) {
      this.curDay = day;
      if (dayTask) {
        this.subTaskLoading = true;
        // this.subTaskDrawer = true;
@@ -283,6 +352,7 @@
          .finally(() => (this.subTaskLoading = false));
      } else {
        this.curSubTaskList = [];
        this.curDayTask = {};
      }
    },
    navToTaskCreate(value) {
@@ -293,6 +363,50 @@
          task: encodeURIComponent(JSON.stringify(value))
        }
      });
    },
    onSubtaskUpdate() {
      // this.subTaskLoading = true;
      // this.$refs.planRef
      //   .fetchDayTasks()
      //   .finally(() => (this.subTaskLoading = false));
      this.fetchDayTasks();
    },
    handleAddSubtask() {
      // 判断当日是否有日任务，若没有，先创建在跳转子任务创建界面
      if (this.curDayTask.guid) {
        this.subTaskDrawer = true;
      } else {
        const _dayTask = useCloned(this.curTask.data).cloned.value;
        const taskDate = dayjs(this.curDay);
        _dayTask.tsguid = _dayTask.tguid;
        _dayTask.tguid = null;
        _dayTask.levelnum = null;
        _dayTask.name = `${taskDate.format('YYYY年MM月DD日')}${
          _dayTask.cityname
        }${_dayTask.districtname}${_dayTask.typename}任务`;
        _dayTask.starttime = taskDate.startOf('day').toDate();
        _dayTask.endtime = taskDate.endOf('day').millisecond(0).toDate();
        _dayTask.settime = dayjs().toDate();
        _dayTask.t1stverifytime = dayjs().toDate();
        _dayTask.runingstatus = '未执行';
        this.daytaskCreateLoading = true;
        taskApi
          .putTask(_dayTask)
          .then((res) => {
            this.curDayTask = {
              guid: res.data.tguid,
              tsGuid: res.data.tsguid,
              changedTaskNum: 0,
              check: true,
              completeTaskNum: 0,
              date: res.data.starttime,
              totalTaskNum: 0
            };
            this.subTaskDrawer = true;
            this.onSubtaskUpdate();
          })
          .finally(() => (this.daytaskCreateLoading = false));
      }
    }
  },
  mounted() {
@@ -310,5 +424,15 @@

.el-scrollbar {
  height: calc((100vh - 60px - 20px * 2 - var(--height-toolbar)));
  padding-right: 8px;
}

.plan-container {
  /* background-color: aliceblue; */
}
</style>
<style>
.el-drawer__custom {
  padding: 0px !important;
}
</style>