<template>
|
<el-row gutter="20">
|
<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>
|
</div>
|
<el-divider />
|
<CompMonitorObj
|
height="62vh"
|
:data="curMonitorObjList"
|
show-btn
|
v-model:tabName="curSceneType"
|
v-model:showData="showMonitorObjList"
|
:tabOptions="sceneTypeOptions"
|
@item-click="deleteMov"
|
>
|
</CompMonitorObj>
|
</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>
|
<!-- </el-affix> -->
|
</el-col>
|
</el-row>
|
|
<el-dialog v-model="insertDialog" title="插入场景至空余编号" width="500">
|
<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-group>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="insertDialog = false">取消</el-button>
|
<el-button :disabled="!selectedIndex" type="primary" @click="insertMov">
|
确认
|
</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="addMov"> 确认 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</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';
|
|
const MODE_CREATE = 'create';
|
const MODE_UPDATE = 'update';
|
|
export default {
|
components: { CompMonitorObj },
|
props: {
|
// 编辑模式，新增create或更新update
|
mode: {
|
type: String,
|
default: MODE_CREATE
|
},
|
create: Boolean,
|
// 巡查总任务
|
task: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
// 监管场景集合
|
objList: Array
|
},
|
data() {
|
return {
|
// 监管场景
|
curMonitorObjList: [],
|
// 当前筛选的场景类型
|
curSceneType: undefined,
|
showMonitorObjList: [],
|
|
// 所有场景
|
sceneList: [],
|
total: 0,
|
|
// 插入弹出框
|
insertDialog: false,
|
// 插入或新增的编号
|
selectedIndex: undefined,
|
// 插入或新增的场景
|
selectedScene: undefined,
|
// 监管次数
|
monitorTimes: 1,
|
// 新增弹出框
|
addDialog: false,
|
// 新增的监管场景
|
insertObj: [],
|
// 更新的监管场景
|
updateObj: [],
|
// 删除的监管场景
|
deleteObj: [],
|
// 更新的场景基本信息（更新场景的编号）
|
updateScene: []
|
};
|
},
|
emits: ['uploadSuccess', 'uploadFail'],
|
watch: {
|
objList: {
|
handler(nV, oV) {
|
if (nV != oV) {
|
this.curMonitorObjList = useCloned(nV).cloned.value;
|
}
|
},
|
immediate: true
|
}
|
// task: {
|
// handler(nV, oV) {
|
// if (nV != oV) {
|
// this.searchScene({ text: '' });
|
// }
|
// },
|
// immediate: true
|
// }
|
},
|
computed: {
|
// 查询场景范围条件
|
area() {
|
return {
|
provincecode: this.task.provincecode,
|
provincename: this.task.provincename,
|
citycode: this.task.citycode,
|
cityname: this.task.cityname,
|
districtcode: this.task.districtcode,
|
districtname: this.task.districtname,
|
towncode: this.task.towncode,
|
townname: this.task.townname,
|
online: true
|
};
|
},
|
// 当前场景类型下的展示场景
|
showSceneList() {
|
return this.sceneList.filter((v) => {
|
const index = this.curMonitorObjList.findIndex((o) => {
|
return o.sguid == v.guid;
|
});
|
return index == -1 && v.type == this.curSceneType;
|
});
|
},
|
sceneTypeOptions() {
|
const list = [];
|
this.sceneList.forEach((d) => {
|
if (list.indexOf(d.type) == -1) list.push(d.type);
|
});
|
return list;
|
},
|
// 当前场景类型下的可插入编号
|
valibleIndex() {
|
// 原列表已经按照编号顺序排列
|
let index = 1;
|
const indexList = [];
|
this.showMonitorObjList.forEach((l) => {
|
while (l.displayid > index) {
|
indexList.push(index);
|
index++;
|
}
|
index++;
|
});
|
if (this.showMonitorObjList.length == 0 && indexList.length == 0) {
|
indexList.push(1);
|
}
|
return indexList;
|
},
|
lastIndex() {
|
const len = this.showMonitorObjList.length;
|
if (len > 0) {
|
return this.showMonitorObjList[len - 1].displayid + 1;
|
} else {
|
return 1;
|
}
|
},
|
isEdit() {
|
// 新建监管总任务模式
|
if (this.create) {
|
return this.curMonitorObjList.length > 0;
|
}
|
// 更新监管总任务模式
|
else {
|
return (
|
this.insertObj.length > 0 ||
|
this.deleteObj.length > 0 ||
|
this.updateObj.length > 0
|
);
|
}
|
},
|
statisticText() {
|
const total = this.curMonitorObjList.length;
|
const map = new Map();
|
this.curMonitorObjList.forEach((e) => {
|
const d = e.scene;
|
if (!map.has(d.type)) {
|
map.set(d.type, { num: 0 });
|
}
|
map.get(d.type).num++;
|
});
|
|
let res = `（总计${total}个`;
|
for (const [key, value] of map) {
|
res += `，${key}${value.num}个`;
|
}
|
res += '）';
|
return res;
|
}
|
},
|
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;
|
}
|
});
|
},
|
deleteMov(item) {
|
if (
|
!(
|
item.extension1 == null ||
|
item.extension1 == undefined ||
|
item.extension1 == '0'
|
)
|
) {
|
ElMessage({
|
message: '已监管场景无法移除',
|
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 i3 = this.updateScene.findIndex((s) => {
|
return s.guid == item.sguid;
|
});
|
this.updateScene.splice(i3, 1);
|
|
this.deleteObj.push(item);
|
},
|
openInsertDialog(item) {
|
this.insertDialog = true;
|
this.selectedScene = item;
|
this.monitorTimes = 1;
|
},
|
openAddDialog(item) {
|
this.addDialog = true;
|
this.selectedScene = item;
|
this.monitorTimes = 1;
|
},
|
insertMov() {
|
// 1. 创建新场景
|
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;
|
},
|
addMov() {
|
// 1. 创建新场景
|
let mov = this.createMov(this.lastIndex, this.selectedScene);
|
// 2. 添加至末尾
|
this.curMonitorObjList.push(mov);
|
this.addDialog = false;
|
},
|
// 创建一个新的监管对象
|
createMov(displayid, scene) {
|
// 1. 查找该场景是否之前已被删除
|
const index = this.deleteObj.findIndex((v) => {
|
return v.sguid == scene.guid;
|
});
|
let mov;
|
// 2. 若是全新的场景，则新生成一个监管对象，否则只更新编号
|
if (index == -1) {
|
mov = {
|
tid: this.task.tguid,
|
sguid: scene.guid,
|
sensename: scene.name,
|
tasktypeid: 1,
|
tasktype: '巡查',
|
monitornum: this.monitorTimes,
|
displayid: displayid,
|
sceneTypeId: scene.typeid,
|
sceneType: scene.type
|
};
|
this.insertObj.push(mov);
|
} else {
|
mov = this.deleteObj[index];
|
mov.displayid = displayid;
|
this.updateObj.push(mov);
|
this.deleteObj.splice(index, 1);
|
}
|
// 3. 同步更新场景基本信息中的编号
|
scene._index = displayid;
|
this.updateScene.push(scene);
|
|
return mov;
|
},
|
// 保存修改
|
saveEdit() {
|
if (this.create) {
|
this.createTask();
|
} else {
|
this.updateTask();
|
}
|
},
|
createTask() {
|
if (this.curMonitorObjList.length > 0) {
|
taskApi
|
.addMonitorObject(this.curMonitorObjList)
|
.then((res) => {
|
ElNotification({
|
title: `巡查总任务创建完成`,
|
message: `新增场景${res}个`,
|
type: 'success',
|
position: 'bottom-left'
|
});
|
this.$emit('uploadSuccess');
|
})
|
.catch((err) => this.$emit('uploadFail', err));
|
}
|
this.updateSceneList();
|
},
|
updateTask() {
|
// new Promise((resolve, reject)=>{
|
|
// })
|
// this.saveLoading = true;
|
if (this.insertObj.length > 0) {
|
const p1 = taskApi.addMonitorObject(this.insertObj).then((res) => {
|
ElNotification({
|
title: `巡查任务新增完成`,
|
message: `新增场景${res}个`,
|
type: 'success',
|
position: 'bottom-left'
|
});
|
this.insertObj = [];
|
});
|
}
|
if (this.updateObj.length > 0) {
|
const p2 = taskApi.updateMonitorObject(this.updateObj).then((res) => {
|
ElNotification({
|
title: `巡查任务更新完成`,
|
message: `更新场景${res}个`,
|
type: 'success',
|
position: 'bottom-left'
|
});
|
this.updateObj = [];
|
});
|
}
|
if (this.deleteObj.length > 0) {
|
const p3 = taskApi.deleteMonitorObject(this.deleteObj).then((res) => {
|
ElNotification({
|
title: `巡查任务删除完成`,
|
message: `删除场景${res}个`,
|
type: 'success',
|
position: 'bottom-left'
|
});
|
this.deleteObj = [];
|
});
|
}
|
this.updateSceneList();
|
// return Promise.all([p1, p2, p3]).finally(() => {
|
// this.saveLoading = false;
|
// });
|
},
|
updateSceneList() {
|
if (this.updateScene.length > 0) {
|
this.updateScene.forEach((s) => {
|
s.index = s._index;
|
});
|
sceneApi.updateSceneList(this.updateScene).then((res) => {
|
ElNotification({
|
title: `场景编号更新完成`,
|
message: `更新场景${res}个`,
|
type: 'success',
|
position: 'bottom-left'
|
});
|
this.updateScene = [];
|
});
|
}
|
}
|
},
|
mounted() {
|
setTimeout(() => {
|
this.searchScene({ text: '' });
|
}, 1000);
|
}
|
};
|
</script>
|
|
<style scoped>
|
.scrollbar-flex-content {
|
display: flex;
|
/* width: fit-content; */
|
height: min-content;
|
}
|
</style>
|
