更新三轮车任务
This commit is contained in:
weipengfei
parent
80b7172daa
commit
3613328532
@ -11,6 +11,19 @@ let AMap: any = null;
|
||||
let markerList: Array<any> = [];
|
||||
let m_index: Number = 0;
|
||||
|
||||
const emits = defineEmits("changeMaps");
|
||||
|
||||
const resetMap = () => {
|
||||
markerList = [];
|
||||
map.value.clearMap();
|
||||
m_index = 0;
|
||||
emits("changeMaps", markerList);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetMap,
|
||||
});
|
||||
|
||||
const initMap = async () => {
|
||||
const loader = AMapLoader.load({
|
||||
key: "4f8f55618010007147aab96fc72bb408",
|
||||
@ -24,8 +37,36 @@ const initMap = async () => {
|
||||
});
|
||||
|
||||
map.value.on("click", (e: any) => {
|
||||
console.log("点击", e);
|
||||
// console.log("点击", e.lnglat);
|
||||
if (m_index >= 3) return;
|
||||
// 调用函数并传入经纬度
|
||||
getDistrictName(e.lnglat.lng, e.lnglat.lat);
|
||||
|
||||
// 获取地区名称
|
||||
function getDistrictName(lng, lat) {
|
||||
AMap.plugin("AMap.Geocoder", function () {
|
||||
var geocoder = new AMap.Geocoder({
|
||||
radius: 10, // 逆地理编码范围，默认值：1000，单位：米
|
||||
extensions: "all", // 返回地址描述结果时是否包含引擎内置的POI，默认值：base，可选值：base、all
|
||||
}); // 经纬度数组
|
||||
|
||||
geocoder.getAddress([lng, lat], function (status, result) {
|
||||
if (status === "complete" && result.info === "OK") {
|
||||
// 解析成功，提取地区名称
|
||||
var district = result.regeocode.addressComponent.district;
|
||||
// console.log(district, result.regeocode); // 输出地区名字
|
||||
markerList.push({
|
||||
lnglat: e.lnglat,
|
||||
address: result.regeocode.formattedAddress,
|
||||
});
|
||||
emits("changeMaps", markerList);
|
||||
} else {
|
||||
// 解析失败
|
||||
console.log("逆地理编码失败");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 自定义 Marker 的图标
|
||||
var customIcon = new AMap.Icon({
|
||||
@ -48,17 +89,21 @@ const initMap = async () => {
|
||||
// content: "起",
|
||||
});
|
||||
map.value.add(marker);
|
||||
// markerList.push(marker);
|
||||
m_index++;
|
||||
|
||||
// 添加标记点击事件监听器
|
||||
marker.on("click", (event: any) => {
|
||||
console.log("点击了标记点", event);
|
||||
// 在这里可以进行其他自定义逻辑操作
|
||||
map.value.remove(marker);
|
||||
m_index--;
|
||||
marker = null;
|
||||
});
|
||||
// marker.on("click", (event: any) => {
|
||||
// console.log("删除", event);
|
||||
// markerList = markerList.filter((item: any) => {
|
||||
// item[0] == marker._position.pos[0] &&
|
||||
// item[0] == marker._position.pos[0];
|
||||
// });
|
||||
// emits("changeMaps", markerList);
|
||||
// // 在这里可以进行其他自定义逻辑操作
|
||||
// map.value.remove(marker);
|
||||
// m_index--;
|
||||
// marker = null;
|
||||
// });
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -5,6 +5,10 @@ import './permission'
|
||||
import './styles/index.scss'
|
||||
import 'virtual:svg-icons-register'
|
||||
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
|
||||
}
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(install)
|
||||
app.mount('#app')
|
||||
|
||||
@ -105,6 +105,27 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.type == 32" label="起点">
|
||||
<el-input
|
||||
placeholder="请点击上方地图选择地点"
|
||||
readonly
|
||||
:value="formData.extend[0]?.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.type == 32" label="中转点">
|
||||
<el-input
|
||||
placeholder="请点击上方地图选择地点"
|
||||
readonly
|
||||
:value="formData.extend[1]?.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.type == 32" label="终点">
|
||||
<el-input
|
||||
placeholder="请点击上方地图选择地点"
|
||||
readonly
|
||||
:value="formData.extend[2]?.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
@ -173,6 +194,7 @@ const formData = reactive({
|
||||
money_two: 0, // 二阶段金额
|
||||
money_three: 0, // 长期金额
|
||||
types: "", //阶段类型
|
||||
extend: {},
|
||||
});
|
||||
|
||||
//任务类型接口
|
||||
@ -244,12 +266,14 @@ const changeTaskType = async (e: any) => {
|
||||
};
|
||||
|
||||
const setMap = (e: any) => {
|
||||
console.log("选择了地图", e);
|
||||
formData.extend = e;
|
||||
console.log("选择了地区", formData.extend);
|
||||
};
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate();
|
||||
if (formData.extend.length < 3) return ElMessage.error("请先选择三个地点");
|
||||
const data = { ...formData };
|
||||
mode.value == "edit"
|
||||
? await apiTaskTemplateEdit(data)
|
||||
|
||||
@ -15,13 +15,34 @@
|
||||
placeholder="请输入要搜索的地址"
|
||||
/>
|
||||
<el-button type="primary">搜索</el-button>
|
||||
<el-button>重置</el-button>
|
||||
<el-button @click="resetMap()">重置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="地图">
|
||||
<MapContainer></MapContainer>
|
||||
<el-form-item label-width="80px" label="地图">
|
||||
<MapContainer ref="mapRef" @changeMaps="changeMaps"></MapContainer>
|
||||
</el-form-item>
|
||||
<el-form-item label="起点">
|
||||
<input />
|
||||
<el-form-item label-width="80px" label="起点">
|
||||
<el-input
|
||||
style="width: 350px; margin-right: 16px"
|
||||
placeholder="请点击上方地图选择地点"
|
||||
readonly
|
||||
:value="address[0]?.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="80px" label="中转点">
|
||||
<el-input
|
||||
style="width: 350px; margin-right: 16px"
|
||||
placeholder="请点击上方地图选择地点"
|
||||
readonly
|
||||
:value="address[1]?.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="80px" label="终点">
|
||||
<el-input
|
||||
style="width: 350px; margin-right: 16px"
|
||||
placeholder="请点击上方地图选择地点"
|
||||
readonly
|
||||
:value="address[2]?.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
@ -70,23 +91,24 @@ const getDetail = async (row: Record<string, any>) => {
|
||||
};
|
||||
|
||||
// 地图控件
|
||||
const mapShow = ref(false);
|
||||
const mapPopupRef = ref(null);
|
||||
const mapRef = ref(null);
|
||||
|
||||
// 选择任务类型
|
||||
const changeTaskType = (e: any) => {
|
||||
if (e == 32) {
|
||||
mapShow.value = true; //为三轮车时
|
||||
mapPopupRef.value.open();
|
||||
}
|
||||
// 重置
|
||||
const resetMap = () => {
|
||||
mapRef.value.resetMap();
|
||||
};
|
||||
|
||||
const address = ref([]);
|
||||
const changeMaps = (e: any) => {
|
||||
address.value = JSON.parse(JSON.stringify(e));
|
||||
// console.log("当前选择", e);
|
||||
};
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
return console.log("ss");
|
||||
|
||||
if (address.value.length < 3) return ElMessage.error("请先选择三个地点");
|
||||
popupRef.value?.close();
|
||||
emit("success");
|
||||
emit("success", address.value);
|
||||
};
|
||||
|
||||
//打开弹窗
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user