<template>
|
<BaseContentLayout>
|
<template #header>
|
<!-- <FYSearchBar @search="search">
|
<template #options>
|
<FYOptionLocation
|
:allOption="true"
|
:level="3"
|
:checkStrictly="false"
|
v-model:value="formSearch.locations"
|
></FYOptionLocation>
|
</template>
|
</FYSearchBar> -->
|
</template>
|
<template #aside>
|
<SideList
|
:items="tasks"
|
:loading="sideLoading"
|
@item-click="chooseTask"
|
></SideList>
|
</template>
|
<template #main>
|
<ToolBar
|
:title="curTask.title"
|
:descriptions="taskStatus"
|
:buttons="buttons"
|
:loading="mainLoading"
|
></ToolBar>
|
<el-scrollbar
|
v-if="curMonitorObjList.length > 0"
|
class="el-scrollbar"
|
v-loading="mainLoading"
|
>
|
<el-row justify="space-between">
|
<!-- <div><el-text>监管计划</el-text></div>
|
<el-button type="warning" size="small" @click="editPlan"
|
>计划调整</el-button
|
> -->
|
<el-tabs model-value="first">
|
<el-tab-pane label="监管计划" name="first">
|
<el-row>
|
<el-col :span="curSubTaskList ? 16 : 24">
|
<CompMonitorPlan
|
ref="planRef"
|
:task="curTask.data"
|
@date-change="onDateChange"
|
></CompMonitorPlan>
|
</el-col>
|
<el-col v-if="curSubTaskList" :span="8">
|
<CompSubTaskList
|
create
|
v-model="curSubTaskList"
|
:loading="subTaskLoading"
|
:create-loading="daytaskLoading"
|
height="56vh"
|
@add="handleAddSubtask"
|
@submit="handleSubtaskSubmit"
|
></CompSubTaskList>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="监管地图" name="second">
|
<CompTaskMap></CompTaskMap>
|
</el-tab-pane> -->
|
</el-tabs>
|
</el-row>
|
<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>
|
</el-scrollbar>
|
<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"
|
@submit="handleSubtaskSubmit"
|
></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>
|
</template>
|
|
<script>
|
import { unref } from 'vue';
|
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: [],
|
//当前选中的任务
|
curTask: {},
|
//操作按钮
|
buttons: [
|
{
|
name: '一键创建总任务',
|
color: 'success',
|
click: () => {
|
this.topTaskAddVisible = true;
|
}
|
}
|
// {
|
// name: '场景调整',
|
// color: 'warning'
|
// }
|
],
|
// 子任务编辑弹出框
|
subTaskDrawer: false,
|
// 当前选择的日任务
|
curDayTask: {},
|
curDay: undefined,
|
daytaskLoading: false,
|
// 当前选择的日任务下的子任务
|
curSubTaskList: undefined,
|
subTaskLoading: false,
|
// 总任务新增弹出框
|
topTaskAddVisible: false
|
};
|
},
|
provide() {
|
return {
|
topTask: this.curTask
|
};
|
},
|
computed: {
|
// 总任务状态统计
|
taskStatus() {
|
return [
|
{ name: '场景数', value: 100 },
|
{ name: '未巡查', value: 0 },
|
{ name: '已巡查', value: 0 }
|
];
|
}
|
},
|
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;
|
if (list.length == 0) {
|
this.sideLoading = false;
|
this.mainLoading = false;
|
}
|
});
|
},
|
//获取任务的完成情况
|
getTaskType(s) {
|
let type = 0;
|
switch (s.runingstatus) {
|
case '未执行':
|
type = 0;
|
break;
|
case '正在执行':
|
type = 5;
|
break;
|
case '已结束':
|
type = 6;
|
break;
|
default:
|
type = 0;
|
break;
|
}
|
return type;
|
},
|
chooseTask(task) {
|
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;
|
})
|
.finally(() => {
|
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;
|
if (dayTask) {
|
this.subTaskLoading = true;
|
// this.subTaskDrawer = true;
|
this.curDayTask = dayTask;
|
taskApi
|
.fetchSubtaskByDayTask(dayTask.guid)
|
.then((res) => {
|
this.curSubTaskList = res;
|
})
|
.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))
|
}
|
});
|
},
|
handleSubtaskSubmit() {
|
this.subTaskLoading = true;
|
this.$refs.planRef
|
.fetchDayTasks()
|
.finally(() => (this.subTaskLoading = false));
|
},
|
handleAddSubtask() {
|
// 判断当日是否有日任务，若没有，先创建在跳转子任务创建界面
|
if (this.curDayTask.guid) {
|
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.daytaskLoading = 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
|
};
|
this.subTaskDrawer = true;
|
this.handleSubtaskSubmit();
|
})
|
.finally(() => (this.daytaskLoading = false));
|
}
|
}
|
},
|
mounted() {
|
this.search();
|
}
|
};
|
</script>
|
|
<style scoped>
|
.select-box {
|
/* border: 1px solid var(--el-border-color);
|
border-radius: var(--el-border-radius-base);
|
padding: 0 8px; */
|
}
|
|
.el-scrollbar {
|
height: calc((100vh - 60px - 20px * 2 - var(--height-toolbar)));
|
}
|
</style>
|
