This commit is contained in:
13684185576
2025-11-13 20:55:41 +08:00
parent da6c07de87
commit ce2cc79be3
8 changed files with 494 additions and 146 deletions

View File

@ -4,71 +4,33 @@
<div class="head_box">
<span class="title">{{ title }}</span>
<div>
<el-button
v-if="!infoActive"
type="primary"
size="small"
@click="submit"
:loading="btnLoading"
>保存</el-button
>
<el-button v-if="!infoActive" type="primary" size="small" @click="submit" :loading="btnLoading">保存</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="dialogWrapper">
<el-form
ref="formRef"
:model="form"
:rules="rules"
:inline="true"
:disabled="infoActive"
>
<el-form ref="formRef" :model="form" :rules="rules" :inline="true" :disabled="infoActive">
<el-form-item prop="bddMc" label="必到点名称:">
<el-input
style="width: 80%;"
min="0"
placeholder="请填写必到点名称"
v-model="form.bddMc"
></el-input>
<el-input style="width: 80%" min="0" placeholder="请填写必到点名称" v-model="form.bddMc"></el-input>
</el-form-item>
<el-form-item prop="fgdwId" label="所属方格:">
<el-select
:disabled="typeStatus === 'del'"
placeholder="请选择所属方格"
filterable
clearable
v-model="form.fgdwId"
@change="handleChange"
>
<el-option
v-for="item in fgList"
:key="item?.id"
:label="item?.mc"
:value="item?.id"
/>
<el-select :disabled="typeStatus === 'del'" placeholder="请选择所属方格" filterable clearable v-model="form.fgdwId"
@change="handleChange">
<el-option v-for="item in fgList" :key="item?.id" :label="item?.mc" :value="item?.id" />
</el-select>
</el-form-item>
<el-form-item prop="bddDz" label="必到点地址:">
<el-input
placeholder="请填必到点地址"
clearable
v-model="form.bddDz"
></el-input>
<el-input placeholder="请填必到点地址" clearable v-model="form.bddDz"></el-input>
</el-form-item>
<el-form-item prop="dkjgsj" label="必到点间隔时间/分钟为单位:">
<el-input placeholder="请填写必到点间隔时间/分钟为单位" v-model="form.dkjgsj"></el-input>
</el-form-item>
<el-form-item prop="jd" label="经度:">
<el-input
disabled
placeholder="请填写经度"
v-model="form.jd"
></el-input>
<el-input disabled placeholder="请填写经度" v-model="form.jd"></el-input>
</el-form-item>
<el-form-item prop="wd" label="纬度:">
<el-input
disabled
placeholder="请填写纬度"
v-model="form.jd"
></el-input>
<el-input disabled placeholder="请填写纬度" v-model="form.jd"></el-input>
</el-form-item>
</el-form>
@ -77,23 +39,27 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, computed, onMounted } from "vue";
import { fetchTbZdxlFgdwSelectList, fetchTbZdxlFgdwBddSave, fetchTbZdxlFgdwBddUpdate, fetchTbZdxlFgdwId } from "@/api/service/taskProgress";
import {
fetchTbZdxlFgdwSelectList,
fetchTbZdxlFgdwBddSave,
fetchTbZdxlFgdwBddUpdate,
fetchTbZdxlFgdwId
} from "@/api/service/taskProgress";
const { proxy } = getCurrentInstance();
import GdMap from "@/components/Map/GdMap/index.vue"
import GdMap from "@/components/Map/GdMap/index.vue";
import emitter from "@/utils/eventBus";
const btnLoading = ref(false); //按钮截流
const title = ref("新增必到点采集");
const formRef = ref(null);
const infoActive = ref(true);
const visible = ref(false);
const fgList = ref([])
const typeStatus = ref("")
const fgList = ref([]);
const typeStatus = ref("");
//级联选择器配置
const props = defineProps({
@ -103,41 +69,41 @@ const props = defineProps({
}
});
const emits = defineEmits(['update:modelValue', 'ok']);
const emits = defineEmits(["update:modelValue", "ok"]);
const dialogFormVisible = computed({
get() {
return props.modelValue;
},
set(val) {
if (!infoActive.value && typeStatus?.value !== 'del') {
// 获取经纬度
setTimeout(() => {
emitter.emit("getMapClickCoordinates");
if (!infoActive.value && typeStatus?.value !== "del") {
// 获取经纬度
setTimeout(() => {
emitter.emit("getMapClickCoordinates");
// 更新地图标注位置
emitter.on("mapClickCoordinates", async (res) => {
emitter.emit("deletePointArea")
form.value.jd = res.lng
form.value.wd = res.lat
// 更新地图标注位置
emitter.on("mapClickCoordinates", async (res) => {
emitter.emit("deletePointArea");
emitter.emit("addPointArea", {
coords: [{ jd: res.lng, wd: res.lat }],
coordinates: res?.coordinates,
icon: require("@/assets/lz/dw.png"),
sizeX: 30,
sizeY: 35
form.value.jd = res.lng;
form.value.wd = res.lat;
emitter.emit("addPointArea", {
coords: [{ jd: res.lng, wd: res.lat }],
coordinates: res?.coordinates,
icon: require("@/assets/lz/dw.png"),
sizeX: 30,
sizeY: 35
});
});
})
}, 500);
}, 500);
} else {
emitter.off('getMapClickCoordinates')
emitter.off("getMapClickCoordinates");
}
emits("update:modelValue", val);
}
})
});
//表单数据
const form = ref({
@ -180,41 +146,40 @@ const rules = reactive({
message: "请填写纬度",
trigger: "change"
}
],
]
});
// 获取方格
const getFgList = async () => {
const res = await fetchTbZdxlFgdwSelectList()
const res = await fetchTbZdxlFgdwSelectList();
if (res && res?.length > 0) {
fgList.value = res
fgList.value = res;
}
}
};
// 获取方格详情
const getFgDetails = async (id, type) => {
const res = await fetchTbZdxlFgdwId(id)
const res = await fetchTbZdxlFgdwId(id);
if (res) {
setMap(res, type)
setMap(res, type);
}
}
};
//新增
function open(row = {}, type) {
typeStatus.value = type
infoActive.value = type === 'view';
typeStatus.value = type;
infoActive.value = type === "view";
form.value = { ...row, xfbbName: row?.xfxz };
if (type === 'view') {
title.value = "查看信息"
} else if (type === 'del') {
title.value = "编辑必到点采集"
if (type === "view") {
title.value = "查看信息";
} else if (type === "del") {
title.value = "编辑必到点采集";
} else {
title.value = "新增必到点采集"
title.value = "新增必到点采集";
}
if (type === 'view' || type === 'del') {
getFgDetails(form?.value?.fgdwId , !(type === 'view' || type === 'del'))
if (type === "view" || type === "del") {
getFgDetails(form?.value?.fgdwId, !(type === "view" || type === "del"));
}
dialogFormVisible.value = true;
}
@ -225,28 +190,45 @@ function close() {
dialogFormVisible.value = false;
}
const handleChange = (val) => {
const data = fgList?.value?.find(i => i?.id === val)
setMap(data)
}
const data = fgList?.value?.find((i) => i?.id === val);
setMap(data);
};
const setMap = (data, type = true) => {
emitter.emit("deletePointArea", "addfg")
const { x1 = "", y1 = "", x2 = "", y2 = "", id = "", zxX = "", zxY = "", mc = "" } = data
const centerPoint = [zxX, zxY]
const position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
const text = mc
const obj = [{ position: position, text, id, userData: data}]
emitter.emit("deletePointArea", "addfg");
const {
x1 = "",
y1 = "",
x2 = "",
y2 = "",
id = "",
zxX = "",
zxY = "",
mc = ""
} = data;
const centerPoint = [zxX, zxY];
const position = [
[Number(x1), Number(y1)],
[Number(x2), Number(y2)]
];
const text = mc;
const obj = [{ position: position, text, id, userData: data }];
emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'addfg', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
emitter.emit("echoPlane", {
fontColor: "#12fdb8",
coords: obj,
type: "rectangle",
flag: "addfg",
color: "rgba(2,20,51,0.5)",
linecolor: "#1C97FF"
});
emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
// 更新地图标注位置
if (type) return
emitter.emit("deletePointArea")
if (type) return;
emitter.emit("deletePointArea");
emitter.emit("addPointArea", {
coords: [{ jd: form.value?.jd, wd: form.value?.wd }],
coordinates: [form.value?.jd, form.value?.wd],
@ -254,36 +236,33 @@ const setMap = (data, type = true) => {
sizeX: 30,
sizeY: 35
});
}
};
//提交
const submit = async () => {
try {
await formRef.value.validate()
await formRef.value.validate();
if (!form.value?.id) {
await fetchTbZdxlFgdwBddSave(form.value)
await fetchTbZdxlFgdwBddSave(form.value);
} else {
await fetchTbZdxlFgdwBddUpdate(form.value)
await fetchTbZdxlFgdwBddUpdate(form.value);
}
proxy.$message({
type: "success",
message: "修改成功"
});
dialogFormVisible.value = false;
emits("ok")
emits("ok");
} catch (error) {
console.log(error);
}
}
};
onMounted(() => {
getFgList()
})
getFgList();
});
defineExpose({ open })
defineExpose({ open });
</script>
<style lang="scss" scoped>