From d3d5ffa713b480a3dd6995d9e8e9b8963c75bad1 Mon Sep 17 00:00:00 2001
From: cxc <quantulr@outlook.com>
Date: Thu, 12 Jan 2023 17:33:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=B4=E6=A0=8F=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/fence/index.js                |  47 +++
 src/api/site/group.js                 |  47 +++
 src/api/site/site.js                  |  47 +++
 src/views/basic/car/info/add.vue      |   4 +-
 src/views/basic/car/info/index.vue    |  44 ++-
 src/views/basic/driver/info/index.vue |  13 +
 src/views/basic/fence/add.vue         | 292 ++++++++++++++++++
 src/views/basic/fence/index.vue       | 254 ++++++++++++++++
 src/views/basic/map-route/index.vue   | 408 ++++++++++++++------------
 src/views/basic/site/add.vue          | 294 +++++++++++++++++++
 src/views/basic/site/group/index.vue  | 293 ++++++++++++++++++
 src/views/basic/site/index.vue        | 330 +++++++++++++++++++++
 12 files changed, 1878 insertions(+), 195 deletions(-)
 create mode 100644 src/api/fence/index.js
 create mode 100644 src/api/site/group.js
 create mode 100644 src/api/site/site.js
 create mode 100644 src/views/basic/fence/add.vue
 create mode 100644 src/views/basic/fence/index.vue
 create mode 100644 src/views/basic/site/add.vue
 create mode 100644 src/views/basic/site/group/index.vue
 create mode 100644 src/views/basic/site/index.vue

diff --git a/src/api/fence/index.js b/src/api/fence/index.js
new file mode 100644
index 0000000..c7b9dbc
--- /dev/null
+++ b/src/api/fence/index.js
@@ -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
+        }
+    })
+}
diff --git a/src/api/site/group.js b/src/api/site/group.js
new file mode 100644
index 0000000..0e287a8
--- /dev/null
+++ b/src/api/site/group.js
@@ -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,
+    },
+  });
+}
diff --git a/src/api/site/site.js b/src/api/site/site.js
new file mode 100644
index 0000000..970b001
--- /dev/null
+++ b/src/api/site/site.js
@@ -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
+        }
+    })
+}
diff --git a/src/views/basic/car/info/add.vue b/src/views/basic/car/info/add.vue
index ee0af65..c1284bf 100644
--- a/src/views/basic/car/info/add.vue
+++ b/src/views/basic/car/info/add.vue
@@ -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">
diff --git a/src/views/basic/car/info/index.vue b/src/views/basic/car/info/index.vue
index 8a1f699..d633486 100644
--- a/src/views/basic/car/info/index.vue
+++ b/src/views/basic/car/info/index.vue
@@ -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>
diff --git a/src/views/basic/driver/info/index.vue b/src/views/basic/driver/info/index.vue
index 72a0c4f..720a1d1 100644
--- a/src/views/basic/driver/info/index.vue
+++ b/src/views/basic/driver/info/index.vue
@@ -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;
diff --git a/src/views/basic/fence/add.vue b/src/views/basic/fence/add.vue
new file mode 100644
index 0000000..b49a01d
--- /dev/null
+++ b/src/views/basic/fence/add.vue
@@ -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>
diff --git a/src/views/basic/fence/index.vue b/src/views/basic/fence/index.vue
new file mode 100644
index 0000000..bd33f32
--- /dev/null
+++ b/src/views/basic/fence/index.vue
@@ -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>
diff --git a/src/views/basic/map-route/index.vue b/src/views/basic/map-route/index.vue
index 0d04bfd..452aafc 100644
--- a/src/views/basic/map-route/index.vue
+++ b/src/views/basic/map-route/index.vue
@@ -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>
diff --git a/src/views/basic/site/add.vue b/src/views/basic/site/add.vue
new file mode 100644
index 0000000..2bd90c2
--- /dev/null
+++ b/src/views/basic/site/add.vue
@@ -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>
diff --git a/src/views/basic/site/group/index.vue b/src/views/basic/site/group/index.vue
new file mode 100644
index 0000000..14baa27
--- /dev/null
+++ b/src/views/basic/site/group/index.vue
@@ -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>
diff --git a/src/views/basic/site/index.vue b/src/views/basic/site/index.vue
new file mode 100644
index 0000000..50904fa
--- /dev/null
+++ b/src/views/basic/site/index.vue
@@ -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>