<template>
<!-- 日常巡查任务管理 -->
<div class="publicContainer">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
<el-form-item label="任务名称:" prop="taskName">
<el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable style="width: 180px" />
</el-form-item>
<el-form-item label="巡查人员:" prop="taskUserIdList">
<el-select clearable v-model="queryParams.taskUserIdList" style="width: 180px" placeholder="请选择巡查人员">
<el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<el-form-item label="任务日期" prop="publishTime">
<el-date-picker
style="width: 380px"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
v-model="AllData.publishTime"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 按钮区域 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
</el-row>
<!-- -->
<div class="whole">
<div class="MainTask">
<el-table :data="dataList" v-loading="loading" stripe :max-height="280" @row-click="clickLogData">
<el-table-column type="index" width="55" label="序号" />
<el-table-column label="任务名称" prop="taskName" />
<el-table-column label="海绵项目名称" prop="projectList" show-overflow-tooltip width="300">
<template #default="scope">
<p v-for="item in scope.row.projectList">{{ item.projectAbbreviation }}</p>
</template>
</el-table-column>
<el-table-column label="巡查人员" prop="taskUserIdList">
<template #default="scope">
<p v-for="item in scope.row.taskUserList">{{ item.userName }}</p>
</template>
</el-table-column>
<el-table-column label="巡查类型" prop="patrolType">
<template #default="scope">
<dict-tag :options="patrol_type" :value="String(scope.row.patrolType)" />
</template>
</el-table-column>
<el-table-column label="任务开始时间" prop="planStartDatetime" />
<el-table-column label="任务结束时间" prop="planEndDatetime" />
<el-table-column label="任务状态" prop="status">
<template #default="scope">
<span>
{{
scope.row.status == 'to_start'
? '未开始'
: scope.row.status == 'proceed'
? '进行中'
: scope.row.status == 'done'
? '已完成'
: scope.row.status == 'expired'
? '超时'
: ''
}}
</span>
</template>
</el-table-column>
<el-table-column label="超时时间" prop="expiredDays" />
<el-table-column label="任务下发时间" prop="issuedDatetime" />
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
<div class="SingleTask">
<div>任务详情</div>
<el-table :data="dataListTwo" v-loading="loadingTwo" stripe :max-height="280">
<el-table-column type="index" width="55" label="序号" />
<el-table-column label="任务名称" prop="taskName" />
<el-table-column label="海绵项目名称" prop="projectList" show-overflow-tooltip width="300">
<template #default="scope">
<p>{{ scope.row.projectList[0].projectAbbreviation }}</p>
</template>
</el-table-column>
<el-table-column label="巡查人员" prop="taskUserIdList">
<template #default="scope">
<p>{{ scope.row.taskUserList[0].userName }}</p>
</template>
</el-table-column>
<el-table-column label="巡查类型" prop="patrolType">
<template #default="scope">
<dict-tag :options="patrol_type" :value="String(scope.row.patrolType)" />
</template>
</el-table-column>
<el-table-column label="任务开始时间" prop="planStartDatetime" />
<el-table-column label="任务结束时间" prop="planEndDatetime" />
<el-table-column label="任务状态" prop="status">
<template #default="scope">
<span>
{{
scope.row.status == 'to_start'
? '未开始'
: scope.row.status == 'proceed'
? '进行中'
: scope.row.status == 'done'
? '已完成'
: scope.row.status == 'expired'
? '超时'
: ''
}}
</span>
</template>
</el-table-column>
<el-table-column label="超时时间" prop="expiredDays" />
<el-table-column label="任务下发时间" prop="issuedDatetime" />
<el-table-column label="操作" width="240">
<template #default="scope">
<el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="totaltwo > 0"
:total="totaltwo"
v-model:page="queryParamstwo.pageNum"
v-model:limit="queryParamstwo.pageSize"
@pagination="getList1"
/>
</div>
</div>
<!-- 新增弹窗 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body :close-on-click-modal="false">
<el-form ref="roleRef" :model="form" :rules="rules" label-width="120px" :disabled="multiple">
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="巡查任务名称:" prop="taskName">
<el-input v-model="form.taskName" placeholder="请输入巡查任务名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="巡查项目:" prop="projectCodeList">
<el-select
v-model="form.projectCodeList"
multiple
placeholder="请选择巡查项目"
clearable
style="width: 100%"
value-key="projectNo"
label="projectName"
>
<el-option
v-for="proj in projectTList"
:key="proj.projectNo"
:label="proj.projectName"
:value="{ projectNo: proj.projectNo, projectName: proj.projectName }"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="巡查人员:" prop="taskUserIdList">
<el-select
v-model="form.taskUserIdList"
multiple
placeholder="请选择巡查人员"
clearable
style="width: 100%"
value-key="userId"
label="nickName"
>
<el-option
v-for="item in userList"
:key="String(item.userId)"
:label="item.nickName"
:value="{ userId: String(item.userId) }"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="巡查类型:" prop="patrolType">
<el-select v-model="form.patrolType" placeholder="请选择巡查类型" clearable style="width: 100%">
<el-option v-for="item in patrol_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="计划日期" prop="publishTime1">
<el-date-picker
style="width: 380px"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
v-model="AllData.publishTime1"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="巡查任务描述:" prop="taskDescribe">
<el-input v-model="form.taskDescribe" placeholder="请输入巡查任务描述" type="textarea" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<!--详情弹框 -->
<el-dialog
title="巡查任务详情"
v-model="opendetails"
width="1200px"
append-to-body
class="dialog-detail-box"
:close-on-click-modal="false"
>
<popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry" />
</el-dialog>
</div>
</template>
<script setup name="Inspectionplan">
import { patrolTaskpage, patrolTaskadd, patrolBasicInfopage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
import { getProjectInfoList } from '@/api/preassess/targetManage';
import { listUser } from '@/api/system/user';
import popupbox from './pop-upbox.vue'; //详情弹框
const { proxy } = getCurrentInstance();
const { patrol_type } = proxy.useDict('patrol_type'); // 巡查类型的字典
const open = ref(false);
const opendetails = ref(false);
const multiple = ref(false);
const showSearch = ref(true);
const userList = ref([]);
const projectTList = ref([]);
const loading = ref(true);
const loadingTwo = ref(false);
const total = ref(0);
const totaltwo = ref(0);
const title = ref('');
const dataList = ref([]);
const dataListTwo = ref([]);
const DataList = ref([]);
const pathData = ref([]);
const pathGeometry = ref([]);
const AllData = reactive({
publishTime: [],
publishTime1: [],
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
handleStatus: '',
taskName: '',
taskUserIdList: '',
fatherCode: 0,
},
queryParamstwo: {
pageNum: 1,
pageSize: 10,
},
rules: {
taskName: [{ required: true, message: '请输入巡查任务名称', trigger: 'blur' }],
projectCodeList: [{ required: true, message: '请选择巡查项目', trigger: 'blur' }],
taskUserIdList: [{ required: true, message: '请选择巡查人员', trigger: 'blur' }],
patrolType: [{ required: true, message: '请选择巡查类型', trigger: 'blur' }],
},
});
const { queryParams, form, rules, queryParamstwo } = toRefs(AllData);
//搜索
function handleQuery() {
getList();
}
//重置
function resetQuery() {
AllData.publishTime = [];
dataListTwo.value = [];
proxy.resetForm('queryRef');
handleQuery();
}
//查询维修人员列表
function getUserList() {
listUser().then(res => {
userList.value = res.data;
});
}
// 项目接口
async function projectTypeListM() {
let { data } = await getProjectInfoList();
projectTList.value = data;
}
//
const BasicInfopage = ref('');
function projectTypeListMPage() {
patrolBasicInfopage().then(res => {
BasicInfopage.value = res.data;
// console.log(BasicInfopage.value, 'res.data');
});
}
//表格点击事件
function clickLogData(val) {
val.fatherCode = val.number;
getList1(val.fatherCode);
}
// 新增
function handleAdd() {
title.value = '新增巡查任务';
open.value = true;
form.value = {};
multiple.value = false;
}
// 新增中取消事件
function cancel() {
open.value = false;
proxy.resetForm('roleRef');
}
//查看详情操作
async function handleDetail(row) {
opendetails.value = true;
DataList.value = { ...row };
console.log('row----', row);
// console.log(DataList.value, 'DataList.value');
let res = await PatrolTaskID(row.id);
if (res && res.code == 200) {
console.log('res.data--', res.data);
pathData.value = res.data.patrolPathLngLat;
pathGeometry.value = res.data.patrolPath;
}
}
/** 主任务查询列表 */
const getList = async () => {
loading.value = true;
console.log(AllData.publishTime, 'AllData.publishTime');
if (AllData.publishTime) {
queryParams.value.planStartDatetime = AllData.publishTime[0];
queryParams.value.planEndDatetime = AllData.publishTime[1];
}
let res = await patrolTaskpage(queryParams.value);
dataList.value = res.data;
total.value = res.total;
loading.value = false;
};
/** 查询列表 */
const getList1 = async code => {
loadingTwo.value = true;
let res = await patrolTaskpage({ ...queryParamstwo.value, fatherCode: code });
dataListTwo.value = res.data;
totaltwo.value = res.total;
loadingTwo.value = false;
};
/** 提交按钮 */
function submitForm() {
proxy.$refs['roleRef'].validate(valid => {
if (valid) {
// console.log(form.value, 'form.value');
form.value.planStartDatetime = AllData.publishTime1[0];
form.value.planEndDatetime = AllData.publishTime1[1];
form.value.basicInfoId = '1686274734091489284';
patrolTaskadd(form.value).then(response => {
proxy.$modal.msgSuccess('新增成功');
open.value = false;
getList();
});
}
});
}
onMounted(() => {
getList();
getUserList();
projectTypeListM();
projectTypeListMPage();
// getList1();
});
</script>
<style scoped lang="scss">
.dituclass {
width: 100%;
height: 300px;
// background: red;
margin-bottom: 10px;
border: 1px solid #004565;
}
.whole {
width: 100%;
height: calc(100vh - 200px);
// background: red;
.MainTask {
width: 100%;
height: 50%;
// background: beige;
border-bottom: 1px #06557b solid;
}
.SingleTask {
width: 100%;
height: 50%;
// background: yellowgreen;
}
}
</style>
