2026.3.20

feiyu02

2026-03-20 20cdb83586daabfb15fc056c4c97eb8e7ccaf928

 src/views/inspection/task/components/CompMonitorObjEdit.vue

@@ -1,9 +1,6 @@
<template>
  <el-row gutter="20">
    <el-col
      :span="16"
      style="border-right: 1px solid var(--el-color-info-light-7)"
    >
    <el-col :span="16" style="border-right: 1px solid var(--el-color-info-light-7)">
      <div>
        <el-text>已选场景</el-text>
        <el-text type="info" size="small">{{ statisticText }}</el-text>
@@ -22,48 +19,38 @@
    </el-col>
    <el-col :span="8">
      <!-- <el-affix :offset="140"> -->
        <div>
          <el-text>可选场景</el-text>
        </div>
        <el-divider />
        <el-scrollbar class="scrollbar-flex-content" always >
          <!-- <el-segmented v-model="curSceneType" :options="sceneTypeOptions" /> -->
          <el-tabs v-model="curSceneType">
            <el-tab-pane
              v-for="item in sceneTypeOptions"
              :key="item"
              :label="item"
              :name="item"
            ></el-tab-pane>
          </el-tabs>
        </el-scrollbar>
        <FYInfoSearch
          placeholder="请输入场景名称关键字"
          :data="showSceneList"
          :on-search="searchScene"
          :total="total"
          scroll-height="60vh"
          :page-show="false"
        >
          <template #default="{ row }">
            <ItemScene :item="row">
              <el-button-group>
                <el-button
                  size="small"
                  type="primary"
                  @click="openInsertDialog(row)"
                  >插入</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  @click="openAddDialog(row)"
                  >新增</el-button
                >
              </el-button-group>
            </ItemScene>
          </template>
        </FYInfoSearch>
      <div>
        <el-text>可选场景</el-text>
      </div>
      <el-divider />
      <el-scrollbar class="scrollbar-flex-content" always>
        <!-- <el-segmented v-model="curSceneType" :options="sceneTypeOptions" /> -->
        <el-tabs v-model="curSceneType">
          <el-tab-pane
            v-for="item in sceneTypeOptions"
            :key="item"
            :label="item"
            :name="item"
          ></el-tab-pane>
        </el-tabs>
      </el-scrollbar>
      <FYInfoSearch
        placeholder="请输入场景名称关键字"
        :data="showSceneList"
        :on-search="searchScene"
        :total="total"
        scroll-height="60vh"
        :page-show="false"
      >
        <template #default="{ row }">
          <ItemScene :item="row">
            <el-button-group>
              <el-button size="small" type="primary" @click="openInsertDialog(row)">插入</el-button>
              <el-button size="small" type="primary" @click="openAddDialog(row)">新增</el-button>
            </el-button-group>
          </ItemScene>
        </template>
      </FYInfoSearch>
      <!-- </el-affix> -->
    </el-col>
  </el-row>
@@ -72,19 +59,12 @@
    <div v-if="valibleIndex.length > 0">以下为可选的空余编号</div>
    <div v-else>无可选的空余编号</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-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 :disabled="!selectedIndex" type="primary" @click="insertMov">
          确认
        </el-button>
        <el-button :disabled="!selectedIndex" type="primary" @click="insertMov"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
@@ -100,14 +80,14 @@
</template>

<script>
import { useCloned } from '@vueuse/core';
import CompMonitorObj from './CompMonitorObj.vue';
import taskApi from '@/api/fysp/taskApi';
import sceneApi from '@/api/fysp/sceneApi';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
import { useCloned } from '@vueuse/core'
import CompMonitorObj from './CompMonitorObj.vue'
import taskApi from '@/api/fysp/taskApi'
import sceneApi from '@/api/fysp/sceneApi'
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'

const MODE_CREATE = 'create';
const MODE_UPDATE = 'update';
const MODE_CREATE = 'create'
const MODE_UPDATE = 'update'

export default {
  components: { CompMonitorObj },
@@ -115,18 +95,18 @@
    // 编辑模式，新增create或更新update
    mode: {
      type: String,
      default: MODE_CREATE
      default: MODE_CREATE,
    },
    create: Boolean,
    // 巡查总任务
    task: {
      type: Object,
      default: () => {
        return {};
      }
        return {}
      },
    },
    // 监管场景集合
    objList: Array
    objList: Array,
  },
  data() {
    return {
@@ -157,19 +137,19 @@
      // 删除的监管场景
      deleteObj: [],
      // 更新的场景基本信息（更新场景的编号）
      updateScene: []
    };
      updateScene: [],
    }
  },
  emits: ['uploadSuccess', 'uploadFail'],
  watch: {
    objList: {
      handler(nV, oV) {
        if (nV != oV) {
          this.curMonitorObjList = useCloned(nV).cloned.value;
          this.curMonitorObjList = useCloned(nV).cloned.value
        }
      },
      immediate: true
    }
      immediate: true,
    },
    // task: {
    //   handler(nV, oV) {
    //     if (nV != oV) {
@@ -191,158 +171,149 @@
        districtname: this.task.districtname,
        towncode: this.task.towncode,
        townname: this.task.townname,
        online: true
      };
        online: true,
        scensetypeid: '5',
      }
    },
    // 当前场景类型下的展示场景
    showSceneList() {
      return this.sceneList.filter((v) => {
        const index = this.curMonitorObjList.findIndex((o) => {
          return o.sguid == v.guid;
        });
        return index == -1 && v.type == this.curSceneType;
      });
          return o.sguid == v.guid
        })
        return index == -1 && v.type == this.curSceneType
      })
    },
    sceneTypeOptions() {
      const list = [];
      const list = []
      this.sceneList.forEach((d) => {
        if (list.indexOf(d.type) == -1) list.push(d.type);
      });
      return list;
        if (list.indexOf(d.type) == -1) list.push(d.type)
      })
      return list
    },
    // 当前场景类型下的可插入编号
    valibleIndex() {
      // 原列表已经按照编号顺序排列
      let index = 1;
      const indexList = [];
      let index = 1
      const indexList = []
      this.showMonitorObjList.forEach((l) => {
        while (l.displayid > index) {
          indexList.push(index);
          index++;
          indexList.push(index)
          index++
        }
        index++;
      });
        index++
      })
      if (this.showMonitorObjList.length == 0 && indexList.length == 0) {
        indexList.push(1);
        indexList.push(1)
      }
      return indexList;
      return indexList
    },
    lastIndex() {
      const len = this.showMonitorObjList.length;
      const len = this.showMonitorObjList.length
      if (len > 0) {
        return this.showMonitorObjList[len - 1].displayid + 1;
        return this.showMonitorObjList[len - 1].displayid + 1
      } else {
        return 1;
        return 1
      }
    },
    isEdit() {
      // 新建监管总任务模式
      if (this.create) {
        return this.curMonitorObjList.length > 0;
        return this.curMonitorObjList.length > 0
      }
      // 更新监管总任务模式
      else {
        return (
          this.insertObj.length > 0 ||
          this.deleteObj.length > 0 ||
          this.updateObj.length > 0
        );
        return this.insertObj.length > 0 || this.deleteObj.length > 0 || this.updateObj.length > 0
      }
    },
    statisticText() {
      const total = this.curMonitorObjList.length;
      const map = new Map();
      const total = this.curMonitorObjList.length
      const map = new Map()
      this.curMonitorObjList.forEach((e) => {
        const d = e.scene;
        const d = e.scene
        if (!map.has(d.type)) {
          map.set(d.type, { num: 0 });
          map.set(d.type, { num: 0 })
        }
        map.get(d.type).num++;
      });
        map.get(d.type).num++
      })

      let res = `（总计${total}个`;
      let res = `（总计${total}个`
      for (const [key, value] of map) {
        res += `，${key}${value.num}个`;
        res += `，${key}${value.num}个`
      }
      res += '）';
      return res;
    }
      res += '）'
      return res
    },
  },
  methods: {
    // 查询
    searchScene({ text, page, pageSize }) {
      this.area.sceneName = text;
      this.area.sceneName = text
      return sceneApi.searchScene(this.area, 1, 10000).then((res) => {
        if (res.success) {
          // 查询结果
          this.sceneList = res.data;
          this.sceneList = res.data
          // 总数据量
          this.total = res.head.totalCount;
          this.total = res.head.totalCount
        }
      });
      })
    },
    deleteMov(item) {
      if (
        !(
          item.extension1 == null ||
          item.extension1 == undefined ||
          item.extension1 == '0'
        )
      ) {
      if (!(item.extension1 == null || item.extension1 == undefined || item.extension1 == '0')) {
        ElMessage({
          message: '已监管场景无法移除',
          type: 'error'
        });
        return;
          type: 'error',
        })
        return
      }
      const i = this.curMonitorObjList.indexOf(item);
      this.curMonitorObjList.splice(i, 1);
      const i1 = this.insertObj.indexOf(item);
      this.insertObj.splice(i1, 1);
      const i2 = this.updateObj.indexOf(item);
      this.updateObj.splice(i2, 1);
      const i = this.curMonitorObjList.indexOf(item)
      this.curMonitorObjList.splice(i, 1)
      const i1 = this.insertObj.indexOf(item)
      this.insertObj.splice(i1, 1)
      const i2 = this.updateObj.indexOf(item)
      this.updateObj.splice(i2, 1)
      const i3 = this.updateScene.findIndex((s) => {
        return s.guid == item.sguid;
      });
      this.updateScene.splice(i3, 1);
        return s.guid == item.sguid
      })
      this.updateScene.splice(i3, 1)

      this.deleteObj.push(item);
      this.deleteObj.push(item)
    },
    openInsertDialog(item) {
      this.insertDialog = true;
      this.selectedScene = item;
      this.monitorTimes = 1;
      this.insertDialog = true
      this.selectedScene = item
      this.monitorTimes = 1
    },
    openAddDialog(item) {
      this.addDialog = true;
      this.selectedScene = item;
      this.monitorTimes = 1;
      this.addDialog = true
      this.selectedScene = item
      this.monitorTimes = 1
    },
    insertMov() {
      // 1. 创建新场景
      let mov = this.createMov(this.selectedIndex, this.selectedScene);
      let mov = this.createMov(this.selectedIndex, this.selectedScene)
      // 2. 查找第一个编号大于插入编号的值，将新监管对象插入其之前
      const insertAtIndex = this.curMonitorObjList.findIndex((v) => {
        return v.displayid > this.selectedIndex;
      });
      this.curMonitorObjList.splice(insertAtIndex, 0, mov);
      this.selectedIndex = undefined;
      this.insertDialog = false;
        return v.displayid > this.selectedIndex
      })
      this.curMonitorObjList.splice(insertAtIndex, 0, mov)
      this.selectedIndex = undefined
      this.insertDialog = false
    },
    addMov() {
      // 1. 创建新场景
      let mov = this.createMov(this.lastIndex, this.selectedScene);
      let mov = this.createMov(this.lastIndex, this.selectedScene)
      // 2. 添加至末尾
      this.curMonitorObjList.push(mov);
      this.addDialog = false;
      this.curMonitorObjList.push(mov)
      this.addDialog = false
    },
    // 创建一个新的监管对象
    createMov(displayid, scene) {
      // 1. 查找该场景是否之前已被删除
      const index = this.deleteObj.findIndex((v) => {
        return v.sguid == scene.guid;
      });
      let mov;
        return v.sguid == scene.guid
      })
      let mov
      // 2. 若是全新的场景，则新生成一个监管对象，否则只更新编号
      if (index == -1) {
        mov = {
@@ -354,27 +325,27 @@
          monitornum: this.monitorTimes,
          displayid: displayid,
          sceneTypeId: scene.typeid,
          sceneType: scene.type
        };
        this.insertObj.push(mov);
          sceneType: scene.type,
        }
        this.insertObj.push(mov)
      } else {
        mov = this.deleteObj[index];
        mov.displayid = displayid;
        this.updateObj.push(mov);
        this.deleteObj.splice(index, 1);
        mov = this.deleteObj[index]
        mov.displayid = displayid
        this.updateObj.push(mov)
        this.deleteObj.splice(index, 1)
      }
      // 3. 同步更新场景基本信息中的编号
      scene._index = displayid;
      this.updateScene.push(scene);
      scene._index = displayid
      this.updateScene.push(scene)

      return mov;
      return mov
    },
    // 保存修改
    saveEdit() {
      if (this.create) {
        this.createTask();
        this.createTask()
      } else {
        this.updateTask();
        this.updateTask()
      }
    },
    createTask() {
@@ -386,13 +357,13 @@
              title: `巡查总任务创建完成`,
              message: `新增场景${res}个`,
              type: 'success',
              position: 'bottom-left'
            });
            this.$emit('uploadSuccess');
              position: 'bottom-left',
            })
            this.$emit('uploadSuccess')
          })
          .catch((err) => this.$emit('uploadFail', err));
          .catch((err) => this.$emit('uploadFail', err))
      }
      this.updateSceneList();
      this.updateSceneList()
    },
    updateTask() {
      // new Promise((resolve, reject)=>{
@@ -405,10 +376,10 @@
            title: `巡查任务新增完成`,
            message: `新增场景${res}个`,
            type: 'success',
            position: 'bottom-left'
          });
          this.insertObj = [];
        });
            position: 'bottom-left',
          })
          this.insertObj = []
        })
      }
      if (this.updateObj.length > 0) {
        const p2 = taskApi.updateMonitorObject(this.updateObj).then((res) => {
@@ -416,10 +387,10 @@
            title: `巡查任务更新完成`,
            message: `更新场景${res}个`,
            type: 'success',
            position: 'bottom-left'
          });
          this.updateObj = [];
        });
            position: 'bottom-left',
          })
          this.updateObj = []
        })
      }
      if (this.deleteObj.length > 0) {
        const p3 = taskApi.deleteMonitorObject(this.deleteObj).then((res) => {
@@ -427,12 +398,12 @@
            title: `巡查任务删除完成`,
            message: `删除场景${res}个`,
            type: 'success',
            position: 'bottom-left'
          });
          this.deleteObj = [];
        });
            position: 'bottom-left',
          })
          this.deleteObj = []
        })
      }
      this.updateSceneList();
      this.updateSceneList()
      // return Promise.all([p1, p2, p3]).finally(() => {
      //   this.saveLoading = false;
      // });
@@ -440,26 +411,26 @@
    updateSceneList() {
      if (this.updateScene.length > 0) {
        this.updateScene.forEach((s) => {
          s.index = s._index;
        });
          s.index = s._index
        })
        sceneApi.updateSceneList(this.updateScene).then((res) => {
          ElNotification({
            title: `场景编号更新完成`,
            message: `更新场景${res}个`,
            type: 'success',
            position: 'bottom-left'
          });
          this.updateScene = [];
        });
            position: 'bottom-left',
          })
          this.updateScene = []
        })
      }
    }
    },
  },
  mounted() {
    setTimeout(() => {
      this.searchScene({ text: '' });
    }, 1000);
  }
};
      this.searchScene({ text: '' })
    }, 1000)
  },
}
</script>

<style scoped>