2025.7.18 监管任务模块 1. 监管场景样式优化； 2. 新增监管场景GIS地图展示（待完成）；

riku

2025-07-18 803b93038ca16e21ea60a260ca4ac882b84a87ef

 src/views/fysp/task/TaskManage.vue

@@ -1,7 +1,7 @@
<template>
  <BaseContentLayout>
    <template #header>
      <FYSearchBar @search="search">
      <!-- <FYSearchBar @search="search">
        <template #options>
          <FYOptionLocation
            :allOption="true"
@@ -10,7 +10,7 @@
            v-model:value="formSearch.locations"
          ></FYOptionLocation>
        </template>
      </FYSearchBar>
      </FYSearchBar> -->
    </template>
    <template #aside>
      <SideList
@@ -32,14 +32,38 @@
        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
          >
          <CompMonitorPlan
            :task="curTask.data"
            @date-change="onDateChange"
          ></CompMonitorPlan>
          > -->
          <el-tabs model-value="first">
            <el-tab-pane label="监管计划" name="first">
              <el-row>
                <el-col :span="curSubTaskList ? 16 : 24">
                  <CompMonitorPlan
                    ref="planRef"
                    :task="curTask.data"
                    :day-task-list="dayTaskList"
                    @date-change="onDateChange"
                  ></CompMonitorPlan>
                </el-col>
                <el-col v-if="curSubTaskList" :span="8">
                  <CompSubTaskList
                    create
                    v-model="curSubTaskList"
                    :loading="subTaskLoading"
                    :create-loading="daytaskCreateLoading"
                    height="56vh"
                    @add="handleAddSubtask"
                    @submit="handleSubtaskSubmit"
                  ></CompSubTaskList>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="监管地图" name="second">
              <CompTaskMap :plans="curMonitorObjList"></CompTaskMap>
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <el-divider></el-divider>
        <el-row justify="space-between">
@@ -50,25 +74,59 @@
        </el-row>
        <CompMonitorObj :data="curMonitorObjList"></CompMonitorObj>
      </el-scrollbar>
      <el-empty v-else description="暂无记录" v-loading="mainLoading" />
      <div v-else>
        <el-empty description="暂无记录" v-loading="mainLoading" />
        <el-row v-if="!mainLoading" justify="center">
          <el-button
            type="primary"
            size="default"
            @click="navToTaskCreate(curTask.data)"
            >添加监管场景</el-button
          >
        </el-row>
      </div>
    </template>
  </BaseContentLayout>
  <el-drawer
    v-model="subTaskDrawer"
    title="单日计划"
    title="日计划管理"
    direction="btt"
    size="80%"
    size="96%"
    destroy-on-close
  >
    <CompDayTask :day-task="curDayTask"></CompDayTask>
    <CompDayTask
      :day-task="curDayTask"
      :mObjList="curMonitorObjList"
      @submit="handleSubtaskSubmit"
    ></CompDayTask>
  </el-drawer>
  <el-dialog
    v-model="topTaskAddVisible"
    width="600"
    title="一键创建总任务"
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <CompTaskEdit
      @submit="navToTaskCreate"
      @cancel="topTaskAddVisible = false"
    ></CompTaskEdit>
  </el-dialog>
</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';
import CompDayTask from './components/CompDayTask.vue';
import CompTaskMap from './components/CompTaskMap.vue';
import CompTaskEdit from './components/CompTaskEdit.vue';
import CompSubTaskList from './components/CompSubTaskList.vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
@@ -77,10 +135,19 @@
    next((vm) => {
      if (from.name == 'monitorObjEdit' && vm.task) {
        vm.chooseTask(vm.task);
      } else if (from.name == 'monitorTaskCreate') {
        vm.search();
      }
    });
  },
  components: { CompMonitorObj, CompMonitorPlan, CompDayTask },
  components: {
    CompMonitorObj,
    CompMonitorPlan,
    CompDayTask,
    CompTaskMap,
    CompTaskEdit,
    CompSubTaskList
  },
  data() {
    return {
      formSearch: {
@@ -101,12 +168,18 @@
      showMonitorObjList: [],
      //当前选中的任务
      curTask: {},
      //当前选中的日任务
      curDayTaskList: [],
      daytaskLoading: false,
      //操作按钮
      buttons: [
        // {
        //   name: '计划调整',
        //   color: 'success'
        // },
        {
          name: '一键创建总任务',
          color: 'success',
          click: () => {
            this.topTaskAddVisible = true;
          }
        }
        // {
        //   name: '场景调整',
        //   color: 'warning'
@@ -115,16 +188,34 @@
      // 子任务编辑弹出框
      subTaskDrawer: false,
      // 当前选择的日任务
      curDayTask: {}
      curDayTask: {},
      curDay: undefined,
      daytaskCreateLoading: false,
      // 当前选择的日任务下的子任务
      curSubTaskList: undefined,
      subTaskLoading: false,
      // 总任务新增弹出框
      topTaskAddVisible: 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 },
        { name: '已巡查', value: inspected }
      ];
    }
  },
@@ -159,10 +250,10 @@
          type = 0;
          break;
        case '正在执行':
          type = 1;
          type = 5;
          break;
        case '已结束':
          type = 2;
          type = 6;
          break;
        default:
          type = 0;
@@ -174,15 +265,27 @@
      this.task = task;
      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;
      return taskApi
        .fetchDayTasks(this.curTask.data.tguid)
        .then((res) => {
          this.dayTaskList = res;
        })
        .finally(() => (this.dayTaskLoading = false));
    },
    editTask() {
      this.$router.push({
@@ -202,9 +305,74 @@
        }
      });
    },
    onDateChange(dayTask) {
      this.subTaskDrawer = true;
      this.curDayTask = dayTask;
    onDateChange(dayTask, day) {
      this.curDay = day;
      if (dayTask) {
        this.subTaskLoading = true;
        // this.subTaskDrawer = true;
        this.curDayTask = dayTask;
        taskApi
          .fetchSubtaskByDayTask(dayTask.guid)
          .then((res) => {
            this.curSubTaskList = res;
          })
          .finally(() => (this.subTaskLoading = false));
      } else {
        this.curSubTaskList = [];
        this.curDayTask = {};
      }
    },
    navToTaskCreate(value) {
      this.topTaskAddVisible = false;
      this.$router.push({
        name: 'monitorTaskCreate',
        query: {
          task: encodeURIComponent(JSON.stringify(value))
        }
      });
    },
    handleSubtaskSubmit() {
      this.subTaskLoading = true;
      this.$refs.planRef
        .fetchDayTasks()
        .finally(() => (this.subTaskLoading = false));
    },
    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.handleSubtaskSubmit();
          })
          .finally(() => (this.daytaskCreateLoading = false));
      }
    }
  },
  mounted() {
@@ -221,6 +389,6 @@
}

.el-scrollbar {
  height: calc((100vh - 60px * 2 - 20px * 2 - var(--height-toolbar)));
  height: calc((100vh - 60px - 20px * 2 - var(--height-toolbar)));
}
</style>