<template>
|
<BaseContentLayout>
|
<template #header>
|
<FYSearchBar @search="search">
|
<template #options>
|
<!-- 区县 -->
|
<FYOptionLocation
|
:allOption="true"
|
:level="3"
|
:checkStrictly="false"
|
v-model:value="formSearch.locations"
|
></FYOptionLocation>
|
</template>
|
<!-- <template #buttons>
|
<slot name="buttons"></slot>
|
</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>
|
<CompMonitorPlan :task="curTask.data"></CompMonitorPlan>
|
</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>
|
<!-- <div><el-text>监管场景</el-text></div>
|
<div>
|
<el-space wrap>
|
<ItemMonitorObj
|
v-for="item in curMonitorObjList"
|
:key="item.movid"
|
:item="item"
|
></ItemMonitorObj>
|
</el-space>
|
</div> -->
|
</el-scrollbar>
|
<el-empty v-else description="暂无记录" v-loading="mainLoading" />
|
</template>
|
</BaseContentLayout>
|
</template>
|
|
<script>
|
import taskApi from '@/api/fysp/taskApi';
|
import CompMonitorObj from './components/CompMonitorObj.vue';
|
import CompMonitorPlan from './components/CompMonitorPlan.vue';
|
export default {
|
beforeRouteEnter(to, from, next) {
|
// 在渲染该组件的对应路由被验证前调用
|
// 不能获取组件实例 `this` ！
|
// 因为当守卫执行时，组件实例还没被创建！
|
next((vm) => {
|
if (from.name == 'monitorObjEdit' && vm.task) {
|
vm.chooseTask(vm.task);
|
}
|
});
|
},
|
components: { CompMonitorObj, CompMonitorPlan },
|
data() {
|
return {
|
formSearch: {
|
_locations: {},
|
searchText: '',
|
_scenetype: {},
|
online: {}
|
},
|
// 左侧菜单栏加载状态
|
sideLoading: false,
|
// 右侧内容栏加载状态
|
mainLoading: false,
|
// 任务列表
|
tasks: [],
|
// 当前任务的监管对象
|
curMonitorObjList: [],
|
// 当前任务的展示中的监管对象
|
showMonitorObjList: [],
|
//当前选中的任务
|
curTask: {},
|
//操作按钮
|
buttons: [
|
// {
|
// name: '计划调整',
|
// color: 'success'
|
// },
|
// {
|
// name: '场景调整',
|
// color: 'warning'
|
// }
|
]
|
};
|
},
|
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 = 1;
|
break;
|
case '已结束':
|
type = 2;
|
break;
|
default:
|
type = 0;
|
break;
|
}
|
return type;
|
},
|
chooseTask(task) {
|
this.task = task;
|
this.sideLoading = false;
|
this.mainLoading = true;
|
taskApi
|
.fetchMonitorObjectVersion(task.data.tguid)
|
.then((res) => {
|
this.curMonitorObjList = res;
|
this.curTask = task;
|
})
|
.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)),
|
}
|
});
|
}
|
},
|
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 * 2 - 20px * 2 - var(--height-toolbar)));
|
}
|
</style>
|
