zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

巡检日，周，月完成，数据概况待修改

Browse Source
This commit is contained in:
Zy
2026-04-22 16:05:44 +08:00
parent 48852a33ec
commit 04eb40d0e4
55 changed files with 1583 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

354
src/views/system/inspection/Task/addTask.vue Normal file
View File

@@ -0,0 +1,354 @@
<template>
<div class="p-2">
<PageHeader></PageHeader>
<div class="EditBody">
<div class="title">
<div>基本信息</div>
</div>
<div class="bodybox">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
<el-form-item label="任务名称" prop="taskName">
<el-input v-model="form.taskName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="巡检人员" prop="inspectorIds">
<div class="inspectorIdsBox">
<div v-for="(item, index) in checkoutUserlist" :key="index" class="inspector_items">
<div class="name">{{ item.nickName }}</div>
<i @click="handleDelete" class="deleteaction">
<el-icon><Delete /></el-icon>
</i>
</div>
<RepairUser @change="handleUserChange" returnvalue="*" :is-multiple="true" user-type="inspection" ref="RepairUserRef">
<template #default>
<div @click="handleAddUser" class="inspector_items add flex flex-items-center justify-center">
<el-icon><Plus /></el-icon>
<span class="ml-10px"> 添加 </span>
</div>
</template>
</RepairUser>
</div>
</el-form-item>
<el-form-item label="巡更日期" prop="taskTime">
<el-date-picker placeholder="年/月/日" v-model="form.taskTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item label="提醒时间" prop="remindTime">
<el-select v-model="form.remindTime" placeholder="请选择" style="width: 100%">
<el-option v-for="item in remindTimeoptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- <el-form-item label="巡检设置">
<el-checkbox-group @change="handleChagneSetting" v-model="Settinglist">
<el-checkbox v-for="(item, index) in com_inspection_plan_setting" :key="index" :label="item.label" :value="item.value" />
</el-checkbox-group>
</el-form-item> -->
<el-form-item label="关联计划" props="planId">
<el-select @change="handlChangeMap" v-model="form.planId" placeholder="请选择" style="width: 100%">
<el-option v-for="item in planlist" :key="item.id" :label="item.planName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="计划路线" props="planId">
<div class="mapbox" v-loading="maploading">
<div class="w-full h-full" id="TaskMapBox"></div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
<el-button @click="routeback">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import RepairUser from '@/components/Holder/repairUser.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { Delete } from '@element-plus/icons-vue';
import { ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { addPlan, getPlan, listPlan, updatePlan } from '@/api/system/InspectionPlan';
import { addTask, getTask, updateTask } from '@/api/system/InspectionTask';
import { getRoute, listRoute } from '@/api/system/InspectionRoute';
import { RouteVO } from '@/api/system/InspectionRoute/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_inspection_plan_setting } = toRefs<any>(proxy?.useDict('com_inspection_plan_setting'));
const route = useRoute();
const router = useRouter();
const form = ref({
id: null,
taskName: '', // 巡检计划名称
inspectorId: '', // 巡检人员
taskTime: '', // 执行日期
remindTime: '', // 提醒时间
planId: '' // 计划路线id
});
const rules = ref({
taskName: [{ required: true, message: '请输入巡检任务名称', trigger: 'blur' }],
taskTime: [{ required: true, message: '请选择巡检任务时间', trigger: 'blur' }],
remindTime: [{ required: true, message: '请选择巡检任务提醒时间', trigger: 'blur' }],
inspectorIds: [{ required: true, message: '请选择巡检人员', trigger: 'blur' }],
planId: [{ required: true, message: '请选择巡检计划', trigger: 'blur' }]
});
// 提醒时间
const remindTimeoptions = ref([
{
value: 10,
label: '任务开始前10分钟'
},
{
value: 15,
label: '任务开始前15分钟'
},
{
value: 20,
label: '任务开始前30分钟'
}
]);
// 巡检计划id
const editid = ref(null);
// 初始化
// 路线列表
const planlist = ref([]);
async function init() {
// 获取 路线 列表
const res = await listPlan();
planlist.value = res.rows;
if (route.query.id) {
editid.value = route.query.id;
getTask(editid.value).then((res) => {
form.value = {
id: res.data.id,
taskName: res.data.taskName, // 巡检计划名称
inspectorIds: res.data.inspectorIds, // 巡检人员
remindTime: res.data.remindTime, // 提醒时间
routeIds: res.data.routeIds // 计划路线id
};
handlChangeMap(res.data.routeIds);
});
}
}
init();
// 选择 巡检人员
const RepairUserRef = ref<InstanceType<typeof RepairUser>>();
function handleAddUser() {
RepairUserRef.value.open();
}
const checkoutUserlist = ref([]);
function handleUserChange(val) {
checkoutUserlist.value = val;
}
function handleDelete(id) {
checkoutUserlist.value = checkoutUserlist.value.filter((item) => item.userId !== id);
}
// 返回
function routeback() {
router.back();
}
const AMapLib = ref(null);
const map = ref(null);
const mapReady = ref(false);
const maploading = ref(false);
// 地图覆盖物
const markerlist = [];
// 选择计划f
function handlChangeMap(val: string) {
// 清楚 覆盖物
if (markerlist.length > 0) {
map.value.remove(markerlist);
}
if (val) {
// 查找计划id
const find = planlist.value.find((item) => item.id === val);
if (find) {
const route = find.routeList.pop();
// 查找路线
getRoute(route.id).then((res) => {
handleRoute(res.data);
});
}
}
}
// 处理 巡检路线 巡检点数据
function handleRoute(route: RouteVO) {
maploading.value = true;
// ! 添加点
if (route.points && route.points.length > 0) {
route.points.forEach((item, index) => {
const lnglat = item.location.split(',').map(Number);
const marker = new AMapLib.value.Marker({
position: new AMapLib.value.LngLat(lnglat[0], lnglat[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: item.pointName,
content: `
<div style="display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:18px;border-radius:50%;background-color:rgba(26,117,255,0.3);">
<div
style=" width: 20px;
border-radius: 50%;
height: 20px;
line-height: 20px;
background-color: rgba(26,117,255,1);
color: #ffffff;
font-size: 20px;
text-align: center;"
>${index + 1}</div>
</div>`
});
//将创建的点标记添加到已有的地图实例：
map.value.add(marker);
markerlist.push(marker);
});
}
// ! 添加路线
if (route.pathPoints && typeof route.pathPoints === 'string') {
const path = JSON.parse(route.pathPoints);
console.log(path);
//创建 Polyline 实例
const polyline = new AMapLib.value.Polyline({
path: path,
strokeWeight: 2, //线条宽度
strokeColor: 'red', //线条颜色
lineJoin: 'round' //折线拐点连接处样式
});
map.value.add(polyline);
markerlist.push(polyline);
}
// 自动 适应 范围
map.value.setFitView();
maploading.value = false;
}
onMounted(async () => {
await nextTick();
window._AMapSecurityConfig = { securityJsCode: '09534b3534d8da53968529a9ce164118' };
AMapLoader.load({
key: '8e302fe1be5f4db62bc734db23dca149',
version: '2.0',
plugins: ['AMap.Scale', 'AMap.Marker']
}).then(async (AMap) => {
AMapLib.value = AMap;
map.value = new AMap.Map('TaskMapBox', {
viewMode: '3D',
zoom: 11,
center: [116.397428, 39.90923]
});
mapReady.value = true;
});
});
const formRef = ref();
function submit() {
form.value.inspectorId = checkoutUserlist.value.map((item) => item.userId).join(',');
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (editid.value) {
updateTask(form.value).then(() => {
ElMessage.success('编辑成功');
routeback();
});
} else {
addTask(form.value).then(() => {
ElMessage.success('添加成功');
routeback();
});
}
}
});
}
</script>
<style scoped lang="scss">
.EditBody {
margin-top: 20px;
padding: 30px;
background-color: white;
.bodybox {
width: 600px;
margin: 0 auto;
margin-top: 20px;
}
.inspectorIdsBox {
display: flex;
flex-wrap: wrap;
align-items: center;
.inspector_items {
width: 120px;
height: 40px;
line-height: 40px;
margin: 5px;
text-align: center;
border-radius: 5px;
background-color: #ddeaff;
display: flex;
align-items: center;
justify-content: center;
padding: 0 2px;
.name {
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
&.add {
background-color: #ddeaff25;
border: 1px dashed #ccc;
cursor: pointer;
&:hover {
background-color: rgba(221, 234, 255, 0.199);
border-color: #44a0ff;
color: #44a0ff;
}
}
.deleteaction {
margin-left: 10px;
cursor: pointer;
&:hover {
color: red;
}
}
}
}
.week-items {
width: 90px;
height: 30px;
line-height: 30px;
border-radius: 5px;
cursor: pointer;
margin: 10px 5px;
border: 1px solid #ccc;
color: #000;
display: flex;
align-items: center;
.iconbox {
width: 30px;
height: 30px;
margin-left: 5px;
text-align: center;
line-height: 30px;
}
&.active {
color: rgba(26, 117, 255, 1);
background-color: rgba(26, 117, 255, 0.15);
border: none;
}
}
.mapbox {
margin-top: 20px;
width: 100%;
height: 400px;
border: 1px solid #ccc;
}
}
</style>