围栏管理
This commit is contained in:
47
src/api/fence/index.js
Normal file
47
src/api/fence/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询电子围栏列表
|
||||
export function listFence(query) {
|
||||
return request({
|
||||
url: '/car/fence/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询电子围栏详细
|
||||
export function getFence(fenceId,uuid) {
|
||||
return request({
|
||||
url: '/car/fence/' + fenceId + '/' + uuid,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增电子围栏
|
||||
export function addFence(data) {
|
||||
return request({
|
||||
url: '/car/fence',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改电子围栏
|
||||
export function updateFence(data) {
|
||||
return request({
|
||||
url: '/car/fence',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除电子围栏
|
||||
export function delFence(fenceId) {
|
||||
return request({
|
||||
url: '/car/fence',
|
||||
method: 'delete',
|
||||
data: {
|
||||
ids: fenceId
|
||||
}
|
||||
})
|
||||
}
|
||||
47
src/api/site/group.js
Normal file
47
src/api/site/group.js
Normal file
@ -0,0 +1,47 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 查询站点分组列表
|
||||
export function listSiteGroup(query) {
|
||||
return request({
|
||||
url: "/car/siteGroup/list",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询站点分组详细
|
||||
export function getSiteGroup(groupId, uuid) {
|
||||
return request({
|
||||
url: "/car/siteGroup/" + groupId + "/" + uuid,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 新增站点分组
|
||||
export function addSiteGroup(data) {
|
||||
return request({
|
||||
url: "/car/siteGroup",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改站点分组
|
||||
export function updateSiteGroup(data) {
|
||||
return request({
|
||||
url: "/car/siteGroup",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除站点分组
|
||||
export function delSiteGroup(groupId) {
|
||||
return request({
|
||||
url: "/car/siteGroup",
|
||||
method: "delete",
|
||||
data: {
|
||||
ids: groupId,
|
||||
},
|
||||
});
|
||||
}
|
||||
47
src/api/site/site.js
Normal file
47
src/api/site/site.js
Normal file
@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询站点列表
|
||||
export function listSite(query) {
|
||||
return request({
|
||||
url: '/car/site/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询站点详细
|
||||
export function getSite(siteId,uuid) {
|
||||
return request({
|
||||
url: '/car/site/' + siteId + '/' + uuid,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增站点
|
||||
export function addSite(data) {
|
||||
return request({
|
||||
url: '/car/site',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改站点
|
||||
export function updateSite(data) {
|
||||
return request({
|
||||
url: '/car/site',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除站点
|
||||
export function delSite(siteId) {
|
||||
return request({
|
||||
url: '/car/site',
|
||||
method: 'delete',
|
||||
data: {
|
||||
ids: siteId
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -130,9 +130,9 @@
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="租户ID" prop="tenantId">
|
||||
<!-- <el-form-item label="租户ID" prop="tenantId">
|
||||
<el-input v-model="form.tenantId" placeholder="请输入租户ID" />
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<el-row justify="center" :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
|
||||
@ -203,6 +203,31 @@
|
||||
<el-table-column label="车辆ID" align="center" prop="carId" />
|
||||
<el-table-column label="车牌号" align="center" prop="carCode" />
|
||||
<el-table-column label="车辆名称" align="center" prop="carName" />
|
||||
<el-table-column label="分组名称" align="center" prop="groupName" />
|
||||
<el-table-column label="类型" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-popover ref="popover" :width="200" trigger="hover">
|
||||
<template #default>
|
||||
<div class="car-category-popover">
|
||||
<ElTag v-for="item in row.carCategory.split(',')" :key="item">{{
|
||||
carCategoryMap.get(item)
|
||||
}}</ElTag>
|
||||
</div>
|
||||
</template>
|
||||
<template #reference>
|
||||
<div
|
||||
v-if="row.carCategory && row.carCategory.split(',').length > 0"
|
||||
>
|
||||
<ElTag>{{
|
||||
carCategoryMap.get(row.carCategory.split(",")[0])
|
||||
}}</ElTag>
|
||||
<span v-if="row.carCategory.split(',').length >= 2">...</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="最后定位" align="center" prop="groupName" /> -->
|
||||
<!-- <el-table-column label="车辆容量" align="center" prop="carVolume" />
|
||||
<el-table-column label="车辆型号" align="center" prop="carModel" />
|
||||
<el-table-column label="车架号" align="center" prop="frameCode" />
|
||||
@ -227,6 +252,7 @@
|
||||
</el-table-column> -->
|
||||
<!-- <el-table-column label="状态(0正常/1禁用)" align="center" prop="status" />
|
||||
<el-table-column label="司机ID" align="center" prop="driverId" /> -->
|
||||
<el-table-column label="司机姓名" align="center" prop="driverName" />
|
||||
<!-- <el-table-column
|
||||
label="总里程数(km)"
|
||||
align="center"
|
||||
@ -297,6 +323,7 @@ import {
|
||||
// addInfo,
|
||||
// updateInfo,
|
||||
} from "@/api/car/info";
|
||||
import { ElTag } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
@ -311,7 +338,15 @@ const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
// const title = ref("");
|
||||
|
||||
const carCategoryMap = new Map([
|
||||
["1", "行政公车"],
|
||||
["2", "物流货运"],
|
||||
["3", "旅游客运"],
|
||||
["4", "作业车辆"],
|
||||
["5", "通勤班车"],
|
||||
["6", "个人车辆"],
|
||||
["7", "其他车辆"],
|
||||
]);
|
||||
const data = reactive({
|
||||
// form: {},
|
||||
queryParams: {
|
||||
@ -474,3 +509,10 @@ function goGroupManage() {
|
||||
|
||||
getList();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.car-category-popover {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -78,6 +78,14 @@
|
||||
<el-table-column label="司机ID" align="center" prop="driverId" />
|
||||
<el-table-column label="司机姓名" align="center" prop="name" />
|
||||
<el-table-column label="手机号" align="center" prop="phone" />
|
||||
<el-table-column label="部门" align="center" prop="deptName" />
|
||||
<el-table-column label="类型" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ driverTypeMap.get(row.driverType) ?? "未知" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="车牌号" align="center" prop="carCode" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
@ -131,6 +139,11 @@ const data = reactive({
|
||||
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
const driverTypeMap = new Map([
|
||||
["0", "员工"],
|
||||
["1", "车队司机"],
|
||||
["2", "外来司机"],
|
||||
]);
|
||||
/** 查询司机信息列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
|
||||
292
src/views/basic/fence/add.vue
Normal file
292
src/views/basic/fence/add.vue
Normal file
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div id="wrap">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<div
|
||||
:style="{
|
||||
position: 'relative',
|
||||
}"
|
||||
>
|
||||
<div class="search-bar">
|
||||
<el-row :gutter="10">
|
||||
<!-- <el-col :span="7"> -->
|
||||
<el-button type="info" size="small">返回上层</el-button>
|
||||
<!-- </el-col> -->
|
||||
<el-col :span="10">
|
||||
<el-input size="small"></el-input>
|
||||
</el-col>
|
||||
<!-- <el-col :span="7"> -->
|
||||
<el-button type="primary" size="small" icon="search"
|
||||
>搜索</el-button
|
||||
>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div id="map-container"></div>
|
||||
<el-button
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
right: '20px',
|
||||
top: '20px',
|
||||
}"
|
||||
@click="
|
||||
map.clearMap();
|
||||
form.fencePath = [];
|
||||
"
|
||||
type="primary"
|
||||
icon="refresh"
|
||||
circle
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="fence-form-card">
|
||||
<el-scrollbar
|
||||
:wrap-style="{
|
||||
height: 'calc(100vh - 84px - 35px)',
|
||||
}"
|
||||
>
|
||||
<el-form
|
||||
ref="fenceRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input
|
||||
v-model="form.fenceName"
|
||||
placeholder="请输入围栏名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="限速(km/h)" prop="speed">
|
||||
<el-input v-model="form.speed" placeholder="请输入限速(km/h)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警类型" prop="reportType">
|
||||
<el-radio-group v-model="form.reportType" class="ml-4">
|
||||
<el-radio label="0">不报警</el-radio>
|
||||
<el-radio label="1">进入时</el-radio>
|
||||
<el-radio label="2">离开时</el-radio>
|
||||
<el-radio label="3">都报警</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时段" prop="reportTime">
|
||||
<el-input
|
||||
v-model="form.reportTime"
|
||||
placeholder="请输入报警时段"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="围栏地图数据" prop="fencePath">
|
||||
<el-input
|
||||
v-model="form.fencePath"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
:style="{
|
||||
width: '100%',
|
||||
}"
|
||||
@click="submitForm"
|
||||
type="primary"
|
||||
size="small"
|
||||
>保存</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-form-item label="租户ID(预留)" prop="tenantId">
|
||||
<el-input
|
||||
v-model="form.tenantId"
|
||||
placeholder="请输入租户ID(预留)"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="AddFence">
|
||||
import tab from "@/plugins/tab";
|
||||
import { onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { addFence, updateFence, getFence } from "@/api/fence";
|
||||
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const AMap = shallowRef(null);
|
||||
const map = shallowRef(null);
|
||||
const placeSearch = shallowRef(null);
|
||||
// const fencePaths = ref([]);
|
||||
const fencePolygon = shallowRef(null);
|
||||
const data = reactive({
|
||||
form: {},
|
||||
rules: {
|
||||
reportType: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择报警类型",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
fenceName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入围栏名称",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
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: "合肥",
|
||||
});
|
||||
map.value.on("click", handleMapClick);
|
||||
// 地点搜索插件
|
||||
placeSearch.value = new AMap.value.PlaceSearch({
|
||||
// map: map.value,
|
||||
city: "0551",
|
||||
});
|
||||
fencePolygon.value = new AMap.value.Polygon({});
|
||||
map.value.add(fencePolygon.value);
|
||||
|
||||
map.value.addControl(new AMap.value.Scale());
|
||||
return "success";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMapClick = (ev) => {
|
||||
console.log(ev);
|
||||
if (map.value.getAllOverlays("polygon").length === 0) {
|
||||
map.value.add(fencePolygon.value);
|
||||
}
|
||||
form.value.fencePath.push(ev.lnglat);
|
||||
console.log(JSON.stringify(form.value.fencePath));
|
||||
fencePolygon.value.setPath(
|
||||
// AMap.value.GeometryUtil.makesureClockwise(
|
||||
// form.value.fencePath.map((el) => new AMap.value.LngLat(el.lng, el.lat))
|
||||
form.value.fencePath
|
||||
// )
|
||||
);
|
||||
};
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["fenceRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.fenceId != null) {
|
||||
updateFence({
|
||||
...form.value,
|
||||
fencePath: JSON.stringify(form.value.fencePath),
|
||||
}).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
back();
|
||||
});
|
||||
} else {
|
||||
addFence({
|
||||
...form.value,
|
||||
fencePath: JSON.stringify(form.value.fencePath),
|
||||
}).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
back();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
fenceId: null,
|
||||
fenceName: null,
|
||||
speed: null,
|
||||
reportType: null,
|
||||
reportTime: null,
|
||||
fencePath: [],
|
||||
createTime: null,
|
||||
createBy: null,
|
||||
tenantId: null,
|
||||
uuid: null,
|
||||
};
|
||||
proxy.resetForm("fenceRef");
|
||||
}
|
||||
|
||||
function back() {
|
||||
reset();
|
||||
tab.closeOpenPage({ path: "/basic/fence" });
|
||||
}
|
||||
|
||||
reset();
|
||||
onMounted(() => {
|
||||
initMap().then(() => {
|
||||
if (route.query.fenceId && route.query.uuid) {
|
||||
getFence(route.query.fenceId, route.query.uuid).then((resp) => {
|
||||
form.value = {
|
||||
...resp.data,
|
||||
fencePath: resp.data.fencePath
|
||||
? JSON.parse(resp.data.fencePath).map(
|
||||
(el) => new AMap.value.LngLat(...el)
|
||||
)
|
||||
: [],
|
||||
};
|
||||
fencePolygon.value.setPath(form.value.fencePath);
|
||||
map.value.setFitView([fencePolygon.value]);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#wrap {
|
||||
.search-bar {
|
||||
z-index: 99;
|
||||
width: 500px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
.fence-form-card {
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
254
src/views/basic/fence/index.vue
Normal file
254
src/views/basic/fence/index.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="围栏名称" prop="fenceName">
|
||||
<el-input
|
||||
v-model="queryParams.fenceName"
|
||||
placeholder="请输入围栏名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="限速(km/h)" prop="speed">
|
||||
<el-input
|
||||
v-model="queryParams.speed"
|
||||
placeholder="请输入限速(km/h)"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时段" prop="reportTime">
|
||||
<el-input
|
||||
v-model="queryParams.reportTime"
|
||||
placeholder="请输入报警时段"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="租户ID(预留)" prop="tenantId">
|
||||
<el-input
|
||||
v-model="queryParams.tenantId"
|
||||
placeholder="请输入租户ID(预留)"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</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"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['car:fence:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['car:fence:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['car:fence:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="fenceList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="围栏ID" align="center" prop="fenceId" />
|
||||
<el-table-column label="围栏名称" align="center" prop="fenceName" />
|
||||
<el-table-column label="限速(km/h)" align="center" prop="speed" />
|
||||
<el-table-column
|
||||
label="报警类型(0不1进2出3都)"
|
||||
align="center"
|
||||
prop="${field}"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ reportTypeMap.get(row.reportType) ?? "未知" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报警时段" align="center" prop="reportTime" />
|
||||
<!-- <el-table-column label="围栏地图数据" align="center" prop="fencePath" /> -->
|
||||
<!-- <el-table-column label="租户ID(预留)" align="center" prop="tenantId" /> -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['car:fence:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Fence">
|
||||
import { listFence, delFence } from "@/api/fence";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const fenceList = ref([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const reportTypeMap = new Map([
|
||||
["0", "不报警"],
|
||||
["1", "进入时"],
|
||||
["2", "离开时"],
|
||||
["3", "都报警"],
|
||||
]);
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
fenceName: null,
|
||||
speed: null,
|
||||
reportType: null,
|
||||
reportTime: null,
|
||||
fencePath: null,
|
||||
tenantId: null,
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
/** 查询电子围栏列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listFence(queryParams.value).then((response) => {
|
||||
fenceList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => {
|
||||
return { id: item.fenceId, uuid: item.uuid };
|
||||
});
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
router.push({
|
||||
path: "/basic/fence/add",
|
||||
});
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
const { fenceId, uuid } = row;
|
||||
router.push({
|
||||
path: "/basic/fence/add",
|
||||
query: {
|
||||
fenceId,
|
||||
uuid,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _fenceIds = row.fenceId
|
||||
? [{ id: row.fenceId, uuid: row.uuid }]
|
||||
: ids.value;
|
||||
proxy.$modal
|
||||
.confirm(
|
||||
'是否确认删除电子围栏编号为"' +
|
||||
_fenceIds.map((el) => el.fenceId).join(",") +
|
||||
'"的数据项？'
|
||||
)
|
||||
.then(function () {
|
||||
return delFence(_fenceIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"car/fence/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`fence_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
@ -1,169 +1,190 @@
|
||||
<template>
|
||||
<div id="map-container"></div>
|
||||
<el-drawer
|
||||
v-model="drawer"
|
||||
direction="ltr"
|
||||
:close-on-click-modal="false"
|
||||
modal-class="control-drawer-modal"
|
||||
size="25%"
|
||||
:modal="false"
|
||||
:show-close="false"
|
||||
:with-header="false"
|
||||
>
|
||||
<el-row justify="center">
|
||||
<el-radio-group v-model="carType" size="small">
|
||||
<el-radio-button label="car">小车</el-radio-button>
|
||||
<el-radio-button label="truck">货车</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row :gutter="10" justify="space-between">
|
||||
<el-col :span="2">
|
||||
<div
|
||||
:style="{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}"
|
||||
>
|
||||
<el-icon color="#30a1f0"><Sort /></el-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-form ref="routeFormRef" id="route-form" :model="formData">
|
||||
<el-form-item prop="startName">
|
||||
<el-popover
|
||||
:width="300"
|
||||
:visible="showStartSuggestion && !!formData.startName"
|
||||
title="搜索建议"
|
||||
>
|
||||
<div
|
||||
v-for="item in searchTips"
|
||||
:key="item.id"
|
||||
class="suggestion-item"
|
||||
@click="searchPoint(item.name, 'start')"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="formData.startName"
|
||||
size="small"
|
||||
@keydown.enter="searchPoint(formData.startName, 'start')"
|
||||
@input="handleInput('start', $event)"
|
||||
@focus="
|
||||
nowSearch = 'start';
|
||||
showStartSuggestion = true;
|
||||
"
|
||||
@blur="
|
||||
showStartSuggestion = false;
|
||||
nowSearch = '';
|
||||
"
|
||||
:suffix-icon="
|
||||
formData.startLngLat.length ? `circle-check-filled` : null
|
||||
"
|
||||
>
|
||||
<template #prepend>起</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item prop="endName">
|
||||
<el-popover
|
||||
:width="300"
|
||||
:visible="showEndSuggestion && !!formData.endName"
|
||||
title="搜索建议"
|
||||
>
|
||||
<div
|
||||
v-for="item in searchTips"
|
||||
:key="item.id"
|
||||
class="suggestion-item"
|
||||
@click="searchPoint(item.name, 'end')"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="formData.endName"
|
||||
size="small"
|
||||
@input="getAutoComplete"
|
||||
@keydown.enter="searchPoint(formData.endName, 'end')"
|
||||
@focus="
|
||||
nowSearch = 'end';
|
||||
// map.clearMap();
|
||||
showEndSuggestion = true;
|
||||
"
|
||||
@blur="
|
||||
showEndSuggestion = false;
|
||||
nowSearch = '';
|
||||
// searchTips = [];
|
||||
"
|
||||
:suffix-icon="
|
||||
formData.endLngLat.length ? `circle-check-filled` : null
|
||||
"
|
||||
>
|
||||
<template #prepend>终</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div
|
||||
:style="{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}"
|
||||
>
|
||||
<el-icon color="#30a1f0"><CirclePlusFilled /></el-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="space-between">
|
||||
<el-button link @click="clearRoute" size="small">清除路线</el-button>
|
||||
<el-button type="primary" @click="searchRoute" size="small"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-row>
|
||||
<el-tabs
|
||||
v-if="showStepPane"
|
||||
v-model="activeTabName"
|
||||
@tab-click="handleTabClick"
|
||||
<div id="wrap">
|
||||
<div id="map-container"></div>
|
||||
<el-drawer
|
||||
v-model="drawer"
|
||||
direction="ltr"
|
||||
:close-on-click-modal="false"
|
||||
modal-class="control-drawer-modal"
|
||||
size="25%"
|
||||
:modal="false"
|
||||
:show-close="false"
|
||||
:with-header="false"
|
||||
>
|
||||
<!-- :disabled="!stepsList.length" -->
|
||||
<el-tab-pane label="费用最低" name="LEAST_FEE">
|
||||
<div id="panel"></div>
|
||||
</el-tab-pane>
|
||||
<!-- :disabled="!stepsList.length" -->
|
||||
<el-tab-pane label="时间最短" name="LEAST_TIME">
|
||||
<route-step-list
|
||||
:steps-list="stepsList"
|
||||
:route-ext-data="routeExtData"
|
||||
@start-click="map.setFitView([startMarker])"
|
||||
@end-click="map.setFitView([endMarker])"
|
||||
@step-click="handleRouteClick"
|
||||
/></el-tab-pane>
|
||||
<!-- :disabled="!stepsList.length" -->
|
||||
<el-tab-pane label="距离最短" name="LEAST_DISTANCE">
|
||||
<route-step-list
|
||||
:steps-list="stepsList"
|
||||
:route-ext-data="routeExtData"
|
||||
@step-click="handleRouteClick"
|
||||
@start-click="map.setFitView([startMarker])"
|
||||
@end-click="map.setFitView([endMarker])"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-drawer>
|
||||
<el-button
|
||||
id="drawer-switch"
|
||||
type="primary"
|
||||
circle
|
||||
:icon="drawer ? ArrowLeftBold : ArrowRightBold"
|
||||
@click="switchDrawer"
|
||||
></el-button>
|
||||
<el-scrollbar>
|
||||
<div
|
||||
:style="{
|
||||
width: '98%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}"
|
||||
>
|
||||
<el-row justify="center">
|
||||
<el-radio-group v-model="carType" size="small">
|
||||
<el-radio-button label="car">小车</el-radio-button>
|
||||
<el-radio-button label="truck">货车</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row :gutter="10" justify="space-between">
|
||||
<el-col :span="2">
|
||||
<div
|
||||
:style="{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}"
|
||||
>
|
||||
<el-icon color="#30a1f0"><Sort /></el-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-form ref="routeFormRef" id="route-form" :model="formData">
|
||||
<el-form-item prop="startName">
|
||||
<el-popover
|
||||
:width="300"
|
||||
:visible="showStartSuggestion && !!formData.startName"
|
||||
title="搜索建议"
|
||||
>
|
||||
<div
|
||||
v-for="item in searchTips"
|
||||
:key="item.id"
|
||||
class="suggestion-item"
|
||||
@click="searchPoint(item.name, 'start')"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="formData.startName"
|
||||
size="small"
|
||||
@keydown.enter="
|
||||
searchPoint(formData.startName, 'start')
|
||||
"
|
||||
@input="handleInput('start', $event)"
|
||||
@focus="
|
||||
nowSearch = 'start';
|
||||
showStartSuggestion = true;
|
||||
"
|
||||
@blur="
|
||||
showStartSuggestion = false;
|
||||
nowSearch = '';
|
||||
"
|
||||
:suffix-icon="
|
||||
formData.startLngLat.length
|
||||
? `circle-check-filled`
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template #prepend>起</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item prop="endName">
|
||||
<el-popover
|
||||
:width="300"
|
||||
:visible="showEndSuggestion && !!formData.endName"
|
||||
title="搜索建议"
|
||||
>
|
||||
<div
|
||||
v-for="item in searchTips"
|
||||
:key="item.id"
|
||||
class="suggestion-item"
|
||||
@click="searchPoint(item.name, 'end')"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="formData.endName"
|
||||
size="small"
|
||||
@input="getAutoComplete"
|
||||
@keydown.enter="searchPoint(formData.endName, 'end')"
|
||||
@focus="
|
||||
nowSearch = 'end';
|
||||
// map.clearMap();
|
||||
showEndSuggestion = true;
|
||||
"
|
||||
@blur="
|
||||
showEndSuggestion = false;
|
||||
nowSearch = '';
|
||||
// searchTips = [];
|
||||
"
|
||||
:suffix-icon="
|
||||
formData.endLngLat.length
|
||||
? `circle-check-filled`
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template #prepend>终</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div
|
||||
:style="{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}"
|
||||
>
|
||||
<el-icon color="#30a1f0"><CirclePlusFilled /></el-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="space-between">
|
||||
<el-button link @click="clearRoute" size="small"
|
||||
>清除路线</el-button
|
||||
>
|
||||
<el-button type="primary" @click="searchRoute" size="small"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-row>
|
||||
<el-tabs
|
||||
v-if="showStepPane"
|
||||
v-model="activeTabName"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<!-- :disabled="!stepsList.length" -->
|
||||
<el-tab-pane label="费用最低" name="LEAST_FEE">
|
||||
<div id="panel"></div>
|
||||
</el-tab-pane>
|
||||
<!-- :disabled="!stepsList.length" -->
|
||||
<el-tab-pane label="时间最短" name="LEAST_TIME">
|
||||
<route-step-list
|
||||
:steps-list="stepsList"
|
||||
:route-ext-data="routeExtData"
|
||||
@start-click="map.setFitView([startMarker])"
|
||||
@end-click="map.setFitView([endMarker])"
|
||||
@step-click="handleRouteClick"
|
||||
/></el-tab-pane>
|
||||
<!-- :disabled="!stepsList.length" -->
|
||||
<el-tab-pane label="距离最短" name="LEAST_DISTANCE">
|
||||
<route-step-list
|
||||
:steps-list="stepsList"
|
||||
:route-ext-data="routeExtData"
|
||||
@step-click="handleRouteClick"
|
||||
@start-click="map.setFitView([startMarker])"
|
||||
@end-click="map.setFitView([endMarker])"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
<el-button
|
||||
id="drawer-switch"
|
||||
type="primary"
|
||||
circle
|
||||
:icon="drawer ? ArrowLeftBold : ArrowRightBold"
|
||||
@click="switchDrawer"
|
||||
></el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
@ -580,34 +601,37 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#map-container {
|
||||
width: 100%;
|
||||
// height: calc(100vh-84px);
|
||||
}
|
||||
#route-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#drawer-switch {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
z-index: 99999;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.suggestion-item {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
padding: 0 32px 0 20px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #606266;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
#wrap {
|
||||
position: relative;
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
#route-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#drawer-switch {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
z-index: 99999;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.suggestion-item {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
padding: 0 32px 0 20px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #606266;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
294
src/views/basic/site/add.vue
Normal file
294
src/views/basic/site/add.vue
Normal file
@ -0,0 +1,294 @@
|
||||
<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>
|
||||
293
src/views/basic/site/group/index.vue
Normal file
293
src/views/basic/site/group/index.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="分组名称" prop="groupName">
|
||||
<el-input
|
||||
v-model="queryParams.groupName"
|
||||
placeholder="请输入分组名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="编码" prop="groupCode">
|
||||
<el-input
|
||||
v-model="queryParams.groupCode"
|
||||
placeholder="请输入编码"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</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"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['car:site:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['car:site:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['car:site:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="siteList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="站点分组ID" align="center" prop="groupId" />
|
||||
<el-table-column label="分组名称" align="center" prop="groupName" />
|
||||
<el-table-column label="编码" align="center" prop="groupCode" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<!-- <el-table-column label="租户ID" align="center" prop="tenantId" /> -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['car:site:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改站点分组对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="siteRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="分组名称" prop="groupName">
|
||||
<el-input v-model="form.groupName" placeholder="请输入分组名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编码" prop="groupCode">
|
||||
<el-input v-model="form.groupCode" placeholder="请输入编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="租户ID" 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="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Site">
|
||||
import {
|
||||
listSiteGroup,
|
||||
getSiteGroup,
|
||||
delSiteGroup,
|
||||
addSiteGroup,
|
||||
updateSiteGroup,
|
||||
} from "@/api/site/group";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const siteList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groupName: null,
|
||||
groupCode: null,
|
||||
},
|
||||
rules: {},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询站点分组列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listSiteGroup(queryParams.value).then((response) => {
|
||||
siteList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
groupId: null,
|
||||
groupName: null,
|
||||
groupCode: null,
|
||||
remark: null,
|
||||
createTime: null,
|
||||
createBy: null,
|
||||
uuid: null,
|
||||
tenantId: null,
|
||||
};
|
||||
proxy.resetForm("siteRef");
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => {
|
||||
return { id: item.groupId, uuid: item.uuid };
|
||||
});
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加站点分组";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _groupId = row.groupId || ids.value;
|
||||
getSiteGroup(_groupId, row.uuid).then((response) => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改站点分组";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["siteRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.groupId != null) {
|
||||
updateSiteGroup(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addSiteGroup(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _groupIds = row.groupId
|
||||
? [{ id: row.groupId, uuid: row.uuid }]
|
||||
: ids.value;
|
||||
proxy.$modal
|
||||
.confirm(
|
||||
'是否确认删除站点分组编号为"' +
|
||||
_groupIds.map((el) => el.groupId).join(",") +
|
||||
'"的数据项？'
|
||||
)
|
||||
.then(function () {
|
||||
return delSiteGroup(_groupIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"car/site/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`site_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
330
src/views/basic/site/index.vue
Normal file
330
src/views/basic/site/index.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="站点名称" prop="siteName">
|
||||
<el-input
|
||||
v-model="queryParams.siteName"
|
||||
placeholder="请输入站点名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</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">
|
||||
<el-col :span="12">
|
||||
<div id="map-container"></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div
|
||||
:style="{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: 'calc(100vh - 84px - 90px)',
|
||||
}"
|
||||
>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['car:site:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['car:site:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['car:site:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-scrollbar
|
||||
:style="{
|
||||
flex: '1',
|
||||
}"
|
||||
>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="siteList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="站点ID" align="center" prop="siteId" />
|
||||
<el-table-column
|
||||
label="站点名称"
|
||||
align="center"
|
||||
prop="siteName"
|
||||
/>
|
||||
<el-table-column label="分组" align="center" prop="groupName" />
|
||||
<!--
|
||||
<el-table-column label="省" align="center" prop="province" />
|
||||
<el-table-column label="市" align="center" prop="city" />
|
||||
<el-table-column label="区" align="center" prop="area" /> -->
|
||||
<el-table-column label="详细地址" align="center" prop="address" />
|
||||
<el-table-column
|
||||
label="经纬度"
|
||||
align="center"
|
||||
prop="coordinate"
|
||||
/>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<!-- <el-table-column label="站点ID" align="center" prop="tenantId" /> -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['car:site:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-scrollbar>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Site">
|
||||
import { listSite, delSite } from "@/api/site/site";
|
||||
import { useRouter } from "vue-router";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { shallowRef, ref, reactive, toRefs } from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const router = useRouter();
|
||||
const siteList = ref([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const siteMarkerList = shallowRef([]);
|
||||
const siteInfoWindow = shallowRef(null);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const AMap = shallowRef(null);
|
||||
const map = shallowRef(null);
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
siteName: null,
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
/** 查询站点列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listSite(queryParams.value).then((response) => {
|
||||
siteList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
// TODO: 加载地图标点
|
||||
map.value.clearMap();
|
||||
siteMarkerList.value = siteList.value
|
||||
.filter((el) => el.coordinate)
|
||||
.map((el) => {
|
||||
const marker = (el.marker = new AMap.value.Marker({
|
||||
map: map.value,
|
||||
position: new AMap.value.LngLat(...el.coordinate.split(",")),
|
||||
}));
|
||||
el.marker = marker;
|
||||
return marker;
|
||||
});
|
||||
map.value.setFitView(siteMarkerList.value);
|
||||
});
|
||||
}
|
||||
const handleRowClick = (row, col, ev) => {
|
||||
if (map.value && row.marker) {
|
||||
map.value.setFitView(row.marker);
|
||||
// siteInfoWindow.value.setContent(`
|
||||
// <div>
|
||||
// ${123434}</div>
|
||||
// `);
|
||||
// siteInfoWindow.value.open(map.value, row.coordinate.split(","));
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => {
|
||||
return { id: item.siteId, uuid: item.uuid };
|
||||
});
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
router.push({
|
||||
path: "/basic/site/add",
|
||||
});
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
const { siteId, uuid } = row;
|
||||
router.push({
|
||||
path: "/basic/site/add",
|
||||
query: {
|
||||
siteId,
|
||||
uuid,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _siteIds = row.siteId
|
||||
? [{ id: row.siteId, uuid: row.uuid }]
|
||||
: ids.value;
|
||||
proxy.$modal
|
||||
.confirm(
|
||||
'是否确认删除站点编号为"' +
|
||||
_siteIds.map((el) => el.siteId).join(",") +
|
||||
'"的数据项？'
|
||||
)
|
||||
.then(function () {
|
||||
return delSite(_siteIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"car/site/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`site_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
// 初始化地图
|
||||
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: "合肥",
|
||||
});
|
||||
siteInfoWindow.value = new AMap.value.InfoWindow({
|
||||
anchor: "bottom-center",
|
||||
});
|
||||
// map.value.on("click", handleMapClick);
|
||||
map.value.addControl(new AMap.value.Scale());
|
||||
return "success";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
.then(() => {
|
||||
getList();
|
||||
})
|
||||
.catch(() => {
|
||||
getList();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#map-container {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 84px - 90px);
|
||||
height: calc(100vh - 84px - 90px);
|
||||
// height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user