2025.7.21 任务管理-监管地图功能（待完成）

feiyu02

2025-07-21 5be9679fb4288936b576cf3d1f1548af1c4151b8

 src/views/fysp/task/MonitorObjEdit.vue

@@ -1,175 +1,73 @@
<template>
  <el-page-header @back="$router.back()" class="page-header">
    <template #content>
      <span> 总任务编辑 </span>
    </template>
  </el-page-header>
  <el-divider />
  <el-row gutter="20">
    <el-col :span="16">
      <div>
        <el-text>已选场景</el-text>
      </div>
      <el-divider />
      <CompMonitorObj :data="curMonitorObjList" @tab-change="changeSceneType" :showDelete="true">
        <!-- <template #default="{ item }">
          <el-button size="small" type="danger" @click="deleteMov(item)">移除</el-button>
        </template> -->
      </CompMonitorObj>
    </el-col>
    <el-col :span="8">
      <div>
        <el-text>可选场景</el-text>
      </div>
      <el-divider />
      <FYInfoSearch
        label=""
        placeholder="请输入场景名称关键字"
        :data="showSceneList"
        :on-search="searchScene"
        :total="total"
        scroll-height="70vh"
        :page-show="false"
      >
        <template #default="{ row, click }">
          <ItemScene :item="row">
            <el-button-group>
              <el-button size="small" type="primary" @click="insertDialog = true">插入</el-button>
              <el-button size="small" type="primary" @click="addDialog = true">新增</el-button>
            </el-button-group>
          </ItemScene>
  <!-- <el-affix :offset="60" target=".el-main"> -->
    <div class="page-header">
      <el-page-header @back="goBack">
        <template #content>
          <span> 总任务编辑 </span>
        </template>
      </FYInfoSearch>
    </el-col>
  </el-row>

  <el-dialog v-model="insertDialog" title="插入场景至空余编号" width="500">
    <div>以下为可选的空余编号</div>
    <el-radio-group v-model="selectedIndex" size="default">
      <el-radio-button v-for="item in valibleIndex" :key="item" :label="item" :value="item" />
    </el-radio-group>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="insertDialog = false">取消</el-button>
        <el-button type="primary" @click="insertDialog = false"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="addDialog" title="新增场景编号顺延" width="500">
    <div>顺延编号为:{{ lastIndex }}</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addDialog = false"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
        <template #extra>
          <div>
            <el-button
              type="primary"
              :disabled="!isEdit"
              :loading="saveLoading"
              @click="handleSaveClick"
              >保存修改</el-button
            >
          </div>
        </template>
      </el-page-header>
      <el-divider />
    </div>
  <!-- </el-affix> -->
  <CompMonitorObjEdit
    ref="objEditRef"
    :task="task"
    :objList="curMonitorObjList"
    @upload-success="goBack"
  ></CompMonitorObjEdit>
</template>

<script>
import CompMonitorObj from './components/CompMonitorObj.vue';
import svUserApi from '@/api/fysp/userApi';
import sceneApi from '@/api/fysp/sceneApi';
<script setup>
import { ref, computed, onMounted } from 'vue';
import CompMonitorObjEdit from './components/CompMonitorObjEdit.vue';
import { useRoute, useRouter } from 'vue-router';

export default {
  components: { CompMonitorObj },
  props: {},
  data() {
    return {
      // 监管场景
      curMonitorObjList: [],
      // 行政区划
      area: {},
      // 所有场景
      sceneList: [],
      total: 0,
const route = useRoute();
const router = useRouter();

      // 当前筛选的场景类型
      curSceneType: undefined,
const objEditRef = ref(null);
const curMonitorObjList = ref([]);
const task = ref({});

      insertDialog: false,
      selectedIndex: undefined,
      addDialog: false
    };
  },
  computed: {
    // 当前场景类型下的展示场景
    showSceneList() {
      return this.sceneList.filter((v) => {
        const index = this.curMonitorObjList.findIndex((o) => {
          return o.sguid == v.guid;
        });
        return index == -1 && v.type == this.curSceneType;
      });
    },
    showMonitorObjList() {
      return this.curMonitorObjList.filter((v) => {
        return v.sceneType == this.curSceneType;
      });
    },
    // 当前场景类型下的可插入编号
    valibleIndex() {
      // 原列表已经按照编号顺序排列
      let index = 1;
      const indexList = [];
      this.showMonitorObjList.forEach((l) => {
        while (l.displayid > index) {
          indexList.push(index);
          index++;
        }
        index++;
      });
      return indexList;
    },
    lastIndex() {
      const len = this.showMonitorObjList.length;
      if (len > 0) {
        return this.showMonitorObjList[len - 1].displayid + 1;
      } else {
        return undefined;
      }
    }
  },
  methods: {
    // 查询
    searchScene({ text, page, pageSize }) {
      this.area.sceneName = text;
      return sceneApi.searchScene(this.area, 1, 10000).then((res) => {
        if (res.success) {
          // 查询结果
          this.sceneList = res.data;
          // 总数据量
          this.total = res.head.totalCount;
        }
      });
    },
    changeSceneType(tabName) {
      this.curSceneType = tabName;
    },
    deleteMov(item) {
    },
    insertMov() {},
    addMov() {}
  },
  mounted() {
    // 监管场景信息
    this.curMonitorObjList = JSON.parse(decodeURIComponent(this.$route.query.data));
    // 根据总任务获取行政区划信息
    const task = JSON.parse(decodeURIComponent(this.$route.query.task));
    this.area = {
      provincecode: task.provincecode,
      provincename: task.provincename,
      citycode: task.citycode,
      cityname: task.cityname,
      districtcode: task.districtcode,
      districtname: task.districtname,
      towncode: task.towncode,
      townname: task.townname,
      online: true
    };
    this.searchScene({ text: '' });
  }
};
const isEdit = computed(() => {
  return objEditRef.value ? objEditRef.value.isEdit : false;
});

function handleSaveClick() {
  objEditRef.value.saveEdit();
}

function goBack() {
  router.back();
}

onMounted(() => {
  // 监管场景信息
  // curMonitorObjList.value = JSON.parse(decodeURIComponent(route.query.data));
  // 总任务
  task.value = JSON.parse(decodeURIComponent(route.query.task));
  // 监管场景信息
  curMonitorObjList.value = JSON.parse(
    decodeURIComponent(route.query.data)
  );
});
</script>

<style scoped></style>
<style scoped>
.page-header {
  background-color: white;
  padding: 10px 0;
  /* border-bottom: 1px solid var(--el-color-info-light-7); */
}
</style>