<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,
|
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
|
})
|
},
|
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>
|
