<template>
|
<BaseContentLayout asideWidth="0">
|
<template #header>
|
<div class="task-switcher">
|
<el-button @click="switchTask(-1)" icon="ArrowLeft">前一个</el-button>
|
<el-select
|
v-model="curTaskTitle"
|
@change="(t) => chooseTask(tasks.find((e) => e.title == t))"
|
style="width: 260px"
|
>
|
<el-option v-for="s in tasks" :key="s.title" :label="s.title" :value="s.title" />
|
</el-select>
|
<el-button @click="switchTask(1)" icon="ArrowRight">后一个</el-button>
|
</div>
|
</template>
|
<template #aside>
|
<!-- <SideList :items="tasks" :loading="sideLoading" @item-click="chooseTask"></SideList> -->
|
</template>
|
<template #main>
|
<ToolBar
|
class="toolbar-sticky"
|
:title="curTask.title"
|
:descriptions="taskStatus"
|
:buttons="buttons"
|
:loading="mainLoading"
|
></ToolBar>
|
<div v-if="curMonitorObjList.length > 0" v-loading="mainLoading">
|
<el-space justify="" :size="30" style="padding: 16px 0px 16px 16px">
|
<el-text size="large">巡查计划</el-text>
|
<el-radio-group v-model="selectedSceneType" fill="#409eff">
|
<el-badge
|
v-for="item in sceneTypeList"
|
:key="item.value"
|
:value="item.hasRecord ? '有' : undefined"
|
:offset="[-6, 6]"
|
>
|
<el-radio-button :label="item.label" :value="item.value" />
|
<template v-if="item.hasRecord" #content="{ value }">
|
<span style="font-size: 12px">{{ value }}</span>
|
</template>
|
</el-badge>
|
</el-radio-group>
|
</el-space>
|
<div ref="targetRef">
|
<el-row>
|
<el-col :span="showSubTaskList ? 16 : 24">
|
<CompMonitorPlan
|
:loading="daytaskLoading"
|
ref="planRef"
|
:task="curTask.data"
|
:day-task-list="curDayTaskList"
|
@date-change="onDateChange"
|
></CompMonitorPlan>
|
</el-col>
|
<el-col v-if="showSubTaskList" :span="8">
|
<!-- <el-affix :target="$refs.targetRef" :offset="140"> -->
|
<CompSubTaskList
|
v-if="curSubTaskList"
|
create
|
closeable
|
v-model="curSubTaskList"
|
:scene-type="selectedSceneType"
|
:date="curDay"
|
:loading="subTaskLoading"
|
:create-loading="daytaskCreateLoading"
|
height="66vh"
|
@openMap="handleAddSubtask(true)"
|
@add="handleAddSubtask"
|
@submit="onSubtaskUpdate"
|
@remove="onSubtaskUpdate"
|
@close="showSubTaskList = false"
|
></CompSubTaskList>
|
<!-- </el-affix> -->
|
</el-col>
|
</el-row>
|
</div>
|
<!-- </el-tab-pane>
|
<el-tab-pane label="场景地图" name="second"> -->
|
<!-- <CompTaskMap :plans="curMonitorObjList"></CompTaskMap> -->
|
<!-- </el-tab-pane>
|
</el-tabs> -->
|
<el-divider></el-divider>
|
<el-row justify="space-between">
|
<div><el-text>巡查场景</el-text></div>
|
<el-button type="warning" size="small" @click="editTask">场景调整</el-button>
|
</el-row>
|
<CompMonitorObj :data="curMonitorObjList"></CompMonitorObj>
|
</div>
|
<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="日计划管理" direction="btt" size="96%" destroy-on-close>
|
<CompDayTask
|
:day-task="curDayTask"
|
:mObjList="curMonitorObjList"
|
:subTaskList="curSubTaskList"
|
@submit="onSubtaskUpdate"
|
></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>
|
<el-drawer
|
v-model="sceneMapDialog"
|
:title="`可视化任务定制（${curDayStr}）`"
|
direction="btt"
|
size="100%"
|
destroy-on-close
|
body-class="el-drawer__custom"
|
>
|
<CompTaskMap
|
:plans="curMonitorObjList"
|
:day-task="curDayTask"
|
@submit="onSubtaskUpdate"
|
></CompTaskMap>
|
</el-drawer>
|
</template>
|
|
<script>
|
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) {
|
// 在渲染该组件的对应路由被验证前调用
|
// 不能获取组件实例 `this` ！
|
// 因为当守卫执行时，组件实例还没被创建！
|
next((vm) => {
|
if (from.name == 'monitorObjEdit' && vm.task) {
|
vm.chooseTask(vm.task)
|
} else if (from.name == 'monitorTaskCreate') {
|
vm.search()
|
}
|
})
|
},
|
components: {
|
CompMonitorObj,
|
CompMonitorPlan,
|
CompDayTask,
|
CompTaskMap,
|
CompTaskEdit,
|
CompSubTaskList,
|
},
|
data() {
|
return {
|
formSearch: {
|
_locations: {},
|
searchText: '',
|
_scenetype: {},
|
online: {},
|
},
|
// 左侧菜单栏加载状态
|
sideLoading: false,
|
// 右侧内容栏加载状态
|
mainLoading: false,
|
// 任务列表
|
tasks: [],
|
// 当前任务的监管对象
|
curMonitorObjList: [],
|
// 当前任务的展示中的监管对象
|
showMonitorObjList: [],
|
//当前选中的任务
|
curTaskTitle: '',
|
curTask: {},
|
// 当前任务索引
|
currentTaskIndex: 0,
|
//当前选中的日任务
|
curDayTaskList: [],
|
daytaskLoading: false,
|
//操作按钮
|
buttons: [
|
{
|
name: '一键创建总任务',
|
color: 'success',
|
click: () => {
|
this.topTaskAddVisible = true
|
},
|
},
|
// {
|
// name: '场景调整',
|
// color: 'warning'
|
// }
|
],
|
// 子任务编辑弹出框
|
subTaskDrawer: false,
|
// 当前选择的日任务
|
curDayTask: {},
|
curDay: undefined,
|
daytaskCreateLoading: false,
|
// 当前选择的日任务下的子任务
|
curSubTaskList: undefined,
|
subTaskLoading: false,
|
// 子任务列表是否显示
|
showSubTaskList: false,
|
// 总任务新增弹出框
|
topTaskAddVisible: false,
|
// 场景地图弹出框
|
sceneMapDialog: false,
|
selectedSceneType: undefined,
|
dayTaskFetchTime: 0,
|
}
|
},
|
provide() {
|
return {
|
topTask: this.curTask,
|
}
|
},
|
computed: {
|
// 总任务状态统计
|
taskStatus() {
|
const status = [{ name: '巡查场景数', value: '' }]
|
this.curMonitorObjList
|
.groupBy((e) => e.scene.type)
|
.map((item) => {
|
const { key: type, values: objList } = item
|
const total = objList.length
|
const inspected = objList.filter((e) => e.extension1 && e.extension1 != '0').length
|
if (inspected > 0) {
|
status.push({
|
name: `${type}`,
|
value: `${inspected}/${total} (${((inspected / total) * 100).toFixed(2)}%)`,
|
})
|
}
|
})
|
return status
|
},
|
sceneTypeList() {
|
return this.curMonitorObjList
|
.groupBy((e) => e.scene.type)
|
.map((item) => {
|
const { key: type, values: objList } = item
|
const typeid = objList[0].scene.typeid
|
return {
|
label: type,
|
value: typeid,
|
hasRecord: objList.some((e) => e.extension1 && e.extension1 != '0'),
|
}
|
})
|
.sort((a, b) => a.value - b.value)
|
},
|
curDayStr() {
|
return dayjs(this.curDay).format('MM月DD日')
|
},
|
},
|
watch: {
|
sceneTypeList: {
|
handler(newVal, oldVal) {
|
if (newVal != oldVal && newVal?.length > 0) {
|
this.selectedSceneType = newVal[0].value
|
}
|
},
|
immediate: true,
|
},
|
selectedSceneType: {
|
handler(newVal, oldVal) {
|
this.fetchDayTasks()
|
},
|
},
|
},
|
methods: {
|
search(formSearch) {
|
this.sideLoading = true
|
this.mainLoading = true
|
this.curMonitorObjList = []
|
this.curTask = {}
|
taskApi.getTopTask().then((res) => {
|
const list = res.map((r) => {
|
const t = this.getTaskType(r)
|
return {
|
type: t,
|
title: r.name,
|
categoly: this.$fm.formatYM(r.starttime),
|
data: r,
|
}
|
})
|
this.tasks = list.filter((e) => {
|
return (
|
e.data.districtname == '徐汇区' && dayjs(e.data.starttime).isBefore(dayjs('2023-12-31'))
|
)
|
})
|
if (list.length == 0) {
|
this.sideLoading = false
|
this.mainLoading = false
|
} else {
|
this.curTaskTitle = this.tasks[this.currentTaskIndex].title
|
this.chooseTask(this.tasks[this.currentTaskIndex])
|
}
|
})
|
},
|
// 切换任务
|
switchTask(direction) {
|
if (this.tasks.length === 0) return
|
|
this.currentTaskIndex =
|
(this.currentTaskIndex + direction + this.tasks.length) % this.tasks.length
|
this.chooseTask(this.tasks[this.currentTaskIndex])
|
},
|
//获取任务的完成情况
|
getTaskType(s) {
|
let type
|
switch (s.runingstatus) {
|
case '未执行':
|
type = 0
|
break
|
case '正在执行':
|
type = 5
|
break
|
case '已结束':
|
type = 6
|
break
|
default:
|
type = 0
|
break
|
}
|
return type
|
},
|
chooseTask(task) {
|
// const task = this.tasks.find((e) => e.title == taskTitle)
|
this.curTaskTitle = task.title
|
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.filter((item) => {
|
return item.scene.type == '餐饮'
|
})
|
})
|
.finally(() => {
|
this.mainLoading = false
|
this.fetchDayTasks()
|
})
|
},
|
fetchDayTasks() {
|
// 避免重复请求
|
if (Date.now() - this.dayTaskFetchTime < 500) {
|
return
|
}
|
// 获取日任务统计信息
|
this.dayTaskLoading = true
|
this.mainLoading = true
|
return taskApi
|
.fetchDayTasks(this.curTask.data.tguid, this.selectedSceneType)
|
.then((res) => {
|
this.curDayTaskList = res
|
})
|
.finally(() => {
|
this.dayTaskLoading = false
|
this.mainLoading = false
|
})
|
},
|
editTask() {
|
this.$router.push({
|
name: 'monitorObjEdit',
|
query: {
|
data: encodeURIComponent(JSON.stringify(this.curMonitorObjList)),
|
task: encodeURIComponent(JSON.stringify(this.curTask.data)),
|
},
|
})
|
},
|
editPlan() {
|
this.$router.push({
|
name: 'monitorPlanEdit',
|
query: {
|
data: encodeURIComponent(JSON.stringify(this.curMonitorObjList)),
|
task: encodeURIComponent(JSON.stringify(this.curTask.data)),
|
},
|
})
|
},
|
onDateChange(dayTask, day) {
|
this.curDay = day
|
this.showSubTaskList = true
|
if (dayTask) {
|
this.subTaskLoading = true
|
// this.subTaskDrawer = true;
|
this.curDayTask = dayTask
|
taskApi
|
.fetchSubtaskByDayTask(dayTask.guid)
|
.then((res) => {
|
this.curSubTaskList = res.sort((a, b) => {
|
if (a.sceneTypeId != b.sceneTypeId) {
|
return a.sceneTypeId - b.sceneTypeId
|
} else {
|
return dayjs(b.executionstarttime).unix() - dayjs(a.executionstarttime).unix()
|
}
|
})
|
})
|
.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)),
|
},
|
})
|
},
|
onSubtaskUpdate() {
|
// this.subTaskLoading = true;
|
// this.$refs.planRef
|
// .fetchDayTasks()
|
// .finally(() => (this.subTaskLoading = false));
|
this.fetchDayTasks()
|
},
|
handleAddSubtask(isFromMap) {
|
// 判断当日是否有日任务，若没有，先创建在跳转子任务创建界面
|
if (this.curDayTask.guid) {
|
if (isFromMap) {
|
this.sceneMapDialog = true
|
} else {
|
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,
|
}
|
if (isFromMap) {
|
this.sceneMapDialog = true
|
} else {
|
this.subTaskDrawer = true
|
}
|
this.onSubtaskUpdate()
|
})
|
.finally(() => (this.daytaskCreateLoading = false))
|
}
|
},
|
},
|
mounted() {
|
this.search()
|
},
|
}
|
</script>
|
|
<style scoped>
|
.toolbar-sticky {
|
position: sticky;
|
z-index: 2;
|
top: 0;
|
}
|
|
.el-scrollbar {
|
height: calc((100vh - 60px - 20px * 2 - var(--height-toolbar)));
|
padding-right: 8px;
|
}
|
|
.plan-container {
|
/* background-color: aliceblue; */
|
}
|
</style>
|
<style>
|
.el-drawer__custom {
|
padding: 0px !important;
|
}
|
.task-switcher {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
padding: 10px;
|
}
|
</style>
|
