295 lines
8.9 KiB
Vue
295 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-row class="search-bar" :gutter="10">
|
|||
|
|
<el-col :span="18">
|
|||
|
|
<el-input size="small"></el-input>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button type="primary" size="small" icon="search">搜索</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<div id="map-container"></div>
|
|||
|
|
<!-- 添加或修改站点对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
:title="title"
|
|||
|
|
v-model="open"
|
|||
|
|
width="500px"
|
|||
|
|
append-to-body
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
:close-on-press-escape="false"
|
|||
|
|
:show-close="false"
|
|||
|
|
>
|
|||
|
|
<el-form ref="siteRef" :model="form" :rules="rules" label-width="80px">
|
|||
|
|
<el-form-item label="站点名称" prop="siteName">
|
|||
|
|
<el-input v-model="form.siteName" placeholder="请输入站点名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="分组" prop="groupId">
|
|||
|
|
<!-- <el-input v-model="form.groupId" placeholder="请输入分组ID" /> -->
|
|||
|
|
<el-select v-model="form.groupId" placeholder="请选择站点分组">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in siteGroupList"
|
|||
|
|
:key="item.groupId"
|
|||
|
|
:label="item.groupName"
|
|||
|
|
:value="item.groupId"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<city-select v-model="form" :label-width="80"></city-select>
|
|||
|
|
<!-- <el-form-item label="省" prop="province">
|
|||
|
|
<el-input v-model="form.province" placeholder="请输入省" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="市" prop="city">
|
|||
|
|
<el-input v-model="form.city" placeholder="请输入市" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="区" prop="area">
|
|||
|
|
<el-input v-model="form.area" placeholder="请输入区" />
|
|||
|
|
</el-form-item> -->
|
|||
|
|
<el-form-item label="详细地址" prop="address">
|
|||
|
|
<el-input v-model="form.address" placeholder="请输入详细地址" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="经纬度" prop="coordinate">
|
|||
|
|
<el-input
|
|||
|
|
class="map-select"
|
|||
|
|
readonly
|
|||
|
|
v-model="form.coordinate"
|
|||
|
|
placeholder="请点击右侧按钮在地图上选点"
|
|||
|
|
>
|
|||
|
|
<template #append>
|
|||
|
|
<!-- <el-icon @click="open = false"><Pointer />
|
|||
|
|
</el-icon
|
|||
|
|
> -->
|
|||
|
|
<el-button @click="open = false" icon="pointer"></el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="备注" prop="remark">
|
|||
|
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<!-- <el-form-item label="站点" prop="tenantId">
|
|||
|
|
<el-input v-model="form.tenantId" placeholder="请输入站点ID" />
|
|||
|
|
</el-form-item> -->
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|||
|
|
<el-button @click="back">取 消</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { listSiteGroup } from "@/api/site/group";
|
|||
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|||
|
|
import CitySelect from "@/components/CitySelect";
|
|||
|
|
import { addSite, getSite, updateSite } from "@/api/site/site";
|
|||
|
|
import tab from "@/plugins/tab";
|
|||
|
|
import { useRoute } from "vue-router";
|
|||
|
|
|
|||
|
|
const route = useRoute();
|
|||
|
|
const { proxy } = getCurrentInstance();
|
|||
|
|
const geocoder = shallowRef(null); // 经纬度转地址插件
|
|||
|
|
const AMap = shallowRef(null);
|
|||
|
|
const map = shallowRef(null);
|
|||
|
|
const siteGroupList = ref([]);
|
|||
|
|
const open = ref(false);
|
|||
|
|
const title = ref("");
|
|||
|
|
const data = reactive({
|
|||
|
|
form: {},
|
|||
|
|
rules: {},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { form, rules } = toRefs(data);
|
|||
|
|
// 初始化地图
|
|||
|
|
const initMap = async () => {
|
|||
|
|
try {
|
|||
|
|
AMap.value = await AMapLoader.load({
|
|||
|
|
key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|||
|
|
// key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|||
|
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|||
|
|
plugins: [
|
|||
|
|
// "AMap.Driving",
|
|||
|
|
"AMap.Scale",
|
|||
|
|
// "AMap.PlaceSearch",
|
|||
|
|
// "AMap.AutoComplete",
|
|||
|
|
"AMap.Geocoder",
|
|||
|
|
// "AMap.TruckDriving",
|
|||
|
|
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|||
|
|
AMapUI: {
|
|||
|
|
// 是否加载 AMapUI，缺省不加载
|
|||
|
|
version: "1.1", // AMapUI 版本
|
|||
|
|
plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
|
|||
|
|
},
|
|||
|
|
Loca: {
|
|||
|
|
// 是否加载 Loca， 缺省不加载
|
|||
|
|
version: "2.0", // Loca 版本
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
geocoder.value = new AMap.value.Geocoder();
|
|||
|
|
map.value = new AMap.value.Map("map-container", {
|
|||
|
|
zoom: 16, // 缩放级别
|
|||
|
|
center: [117.290345, 31.797813], // 中心点
|
|||
|
|
city: "合肥",
|
|||
|
|
});
|
|||
|
|
window.mapins = map.value;
|
|||
|
|
/** 加载插件 */
|
|||
|
|
// 驾车路线规划插件
|
|||
|
|
// driving.value = new AMap.value.Driving({
|
|||
|
|
// // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
|||
|
|
// // policy: AMap.DrivingPolicy.MULTI_POLICIES,
|
|||
|
|
// // map: map.value,
|
|||
|
|
// panel: "panel",
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// 卡车路线规划插件 TODO:
|
|||
|
|
// truckDriving.value = new AMap.value.TruckDriving({ map: map.value });
|
|||
|
|
// // 地点搜索插件
|
|||
|
|
// placeSearch.value = new AMap.value.PlaceSearch({
|
|||
|
|
// // map: map.value,
|
|||
|
|
// city: "0551",
|
|||
|
|
// });
|
|||
|
|
// geocoder.value = new AMap.value.Geocoder();
|
|||
|
|
// // 搜索建议插件
|
|||
|
|
// autoComplete.value = new AMap.value.AutoComplete({});
|
|||
|
|
// /** 加载插件结束 */
|
|||
|
|
// resultInfoWindow.value = new AMap.value.InfoWindow({
|
|||
|
|
// anchor: "bottom-center",
|
|||
|
|
// });
|
|||
|
|
// startMarker.value = new AMap.value.Marker({
|
|||
|
|
// icon: startPng,
|
|||
|
|
// anchor: "bottom-center",
|
|||
|
|
// });
|
|||
|
|
// endMarker.value = new AMap.value.Marker({
|
|||
|
|
// icon: endPng,
|
|||
|
|
// anchor: "bottom-center",
|
|||
|
|
// });
|
|||
|
|
// city: "010", //城市设为北京，默认：“全国”
|
|||
|
|
// radius: 1000, //范围，默认：500
|
|||
|
|
// AMap.value.Event.addListener(placeSearch.value, "markerClick", (e) => {
|
|||
|
|
// //添加事件
|
|||
|
|
// console.log(e); //获取点标注位置
|
|||
|
|
// if (nowSearch.value === "start") {
|
|||
|
|
// formData.value.startName = e.data.name;
|
|||
|
|
// formData.value.startLngLat = [e.data.location.lng, e.data.location.lat];
|
|||
|
|
// } else if (nowSearch.value === "end") {
|
|||
|
|
// formData.value.endName = e.data.name;
|
|||
|
|
// formData.value.endLngLat = [e.data.location.lng, e.data.location.lat];
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
map.value.on("click", handleMapClick);
|
|||
|
|
map.value.addControl(new AMap.value.Scale());
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 根据经纬度获取地址
|
|||
|
|
const regeoCode = (lnglat /** [lng, lat] */) => {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
geocoder.value.getAddress(lnglat, (status, result) => {
|
|||
|
|
if (status === "complete" && result.regeocode) {
|
|||
|
|
const address = result.regeocode.formattedAddress;
|
|||
|
|
resolve(address);
|
|||
|
|
} else {
|
|||
|
|
reject("根据经纬度查询地址失败");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleMapClick = async (ev) => {
|
|||
|
|
open.value = true;
|
|||
|
|
form.value.coordinate = `${ev.lnglat.lng},${ev.lnglat.lat}`;
|
|||
|
|
form.value.address = await regeoCode([ev.lnglat.lng, ev.lnglat.lat]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** 提交按钮 */
|
|||
|
|
function submitForm() {
|
|||
|
|
proxy.$refs["siteRef"].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
if (form.value.siteId != null) {
|
|||
|
|
updateSite(form.value).then((response) => {
|
|||
|
|
proxy.$modal.msgSuccess("修改成功");
|
|||
|
|
open.value = false;
|
|||
|
|
back();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
addSite(form.value).then((response) => {
|
|||
|
|
proxy.$modal.msgSuccess("新增成功");
|
|||
|
|
open.value = false;
|
|||
|
|
back();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function back() {
|
|||
|
|
reset();
|
|||
|
|
tab.closeOpenPage({ path: "/basic/site" });
|
|||
|
|
}
|
|||
|
|
// 表单重置
|
|||
|
|
function reset() {
|
|||
|
|
form.value = {
|
|||
|
|
siteId: null,
|
|||
|
|
siteName: null,
|
|||
|
|
groupId: null,
|
|||
|
|
province: null,
|
|||
|
|
city: null,
|
|||
|
|
area: null,
|
|||
|
|
address: null,
|
|||
|
|
coordinate: null,
|
|||
|
|
remark: null,
|
|||
|
|
createBy: null,
|
|||
|
|
createTime: null,
|
|||
|
|
uuid: null,
|
|||
|
|
tenantId: null,
|
|||
|
|
};
|
|||
|
|
proxy.resetForm("siteRef");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 取消按钮
|
|||
|
|
function cancel() {
|
|||
|
|
open.value = false;
|
|||
|
|
reset();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
initMap();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
listSiteGroup().then((resp) => {
|
|||
|
|
siteGroupList.value = resp.rows;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
reset();
|
|||
|
|
|
|||
|
|
if (route.query.siteId && route.query.uuid) {
|
|||
|
|
getSite(route.query.siteId, route.query.uuid).then((resp) => {
|
|||
|
|
form.value = resp.data;
|
|||
|
|
open.value = true;
|
|||
|
|
title.value = "修改站点";
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
open.value = true;
|
|||
|
|
title.value = "添加站点";
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
#map-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100vh - 84px);
|
|||
|
|
}
|
|||
|
|
.search-bar {
|
|||
|
|
z-index: 99;
|
|||
|
|
width: 300px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 20px;
|
|||
|
|
top: 20px;
|
|||
|
|
}
|
|||
|
|
// :deep(.map-select) {
|
|||
|
|
// }
|
|||
|
|
</style>
|