巡检路线完成

.env.development

@@ -8,8 +8,10 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 VITE_APP_BASE_API = '/dev-api'
+# # 开发环境  接口代理地址
+# VITE_APP_PROXY_API = 'http://192.168.1.222:8080'
 # 开发环境  接口代理地址
-VITE_APP_PROXY_API = 'http://192.168.1.222:8080'
+VITE_APP_PROXY_API = 'http://192.168.1.215:8080'
 # 图片基础地址
 VITE_IMG_URL = 'http://192.168.1.222:8080'
 

src/api/system/InspectionRoute/type.ts

@@ -1,3 +1,5 @@
+import { PointVO } from '../InspectionPoint/type';
+
 export interface RouteVO {
   /**
    * 主键ID
@@ -33,7 +35,7 @@ export interface RouteVO {
    * 巡检路线状态 0开启 1关闭
 
    */
-  routeStatus: number;
+  routeStatus: string;
 
   /**
    * 起点经度
@@ -54,9 +56,15 @@ export interface RouteVO {
    * 终点纬度
    */
   endLat: string;
+  /** 路线经纬度 二维数组  */
+  pathPoints: string;
+  /** 巡检点 数组 */
+  points?: PointVO[];
 }
 
 export interface RouteForm extends BaseEntity {
+  /** 路线经纬度 二维数组  */
+  pathPoints: string;
   /**
    * 主键ID
    */
@@ -91,7 +99,7 @@ export interface RouteForm extends BaseEntity {
    * 巡检路线状态 0开启 1关闭
 
    */
-  routeStatus?: number;
+  routeStatus?: string;
 
   /**
    * 起点经度
@@ -115,6 +123,8 @@ export interface RouteForm extends BaseEntity {
 }
 
 export interface RouteQuery extends PageQuery {
+  /** 路线经纬度 二维数组  */
+  pathPoints: string;
   /**
    * 巡检路线名称
    */
@@ -139,7 +149,7 @@ export interface RouteQuery extends PageQuery {
    * 巡检路线状态 0开启 1关闭
 
    */
-  routeStatus?: number;
+  routeStatus?: string;
 
   /**
    * 起点经度

src/views/system/inspection/Point/addInspectionPoint.vue

@@ -121,9 +121,6 @@ function init() {
       if (res.data.itemId) {
         checkoutPointItemlist.value = res.data.itemId.split(',');
       }
-      nextTick(() => {
-        initLocation();
-      });
     });
   }
 }
@@ -158,7 +155,7 @@ const cancelForm = () => {
 
 // ! map
 const mapReady = ref(false);
-let map = ref(null);
+const map = ref(null);
 const marker = ref(null);
 const villageid = localStorage.getItem('villageid');
 onMounted(async () => {

src/views/system/inspection/Route/addInspectionRoute.vue

@@ -5,42 +5,45 @@
       <div class="title">基本信息</div>
       <div class="addBuildingFormBody">
         <el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" label-width="130px">
-          <el-form-item label="巡检点名称" prop="pointName">
+          <el-form-item label="巡检路线名称" prop="routeName">
-            <el-input v-model.trim="form.pointName" placeholder="请输入巡检点名称" />
+            <el-input v-model.trim="form.routeName" placeholder="请输入巡检路线名称" />
           </el-form-item>
-          <el-form-item label="巡检项目" prop="itemId">
+          <el-form-item label="巡检路线描述" prop="description">
+            <el-input type="textarea" :rows="3" v-model.trim="form.description" placeholder="请输入巡检路线描述" />
+          </el-form-item>
+          <el-form-item label="预计巡检时长" prop="estimatedTime">
+            <el-input v-model.trim.number="form.estimatedTime" placeholder="预计巡检时长">
+              <template #append>分钟</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="巡检路线状态" prop="routeStatus">
+            <el-radio-group v-model="form.routeStatus">
+              <el-radio v-for="(item, index) in com_inspection_route_status" :key="index" :value="item.value" :label="item.label"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="巡检点">
             <div class="itembox">
               <div
                 class="item"
                 :class="{
-                  active: checkoutPointItemlist.includes(item.id)
+                  active: checkoutPointlist.includes(item.id)
                 }"
                 @click="checkoutItem(item.id)"
-                v-for="(item, index) in pointItemlist"
+                v-for="(item, index) in pointslist"
                 :key="index"
               >
-                <el-icon><Check /></el-icon>
+                <el-icon v-show="checkoutPointlist.includes(item.id)"><Check /></el-icon>
-                <div>{{ item.itemName }}</div>
+                <div>{{ item.pointName }}</div>
               </div>
             </div>
           </el-form-item>
-          <el-form-item label="打卡方式" prop="checkMode">
+          <el-form-item label="绘制巡检路线">
-            <el-select v-model="form.checkMode" placeholder="请选择打卡方式" clearable>
-              <el-option v-for="dict in com_inspection_point_checkmode" :key="dict.value" :label="dict.label" :value="dict.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="巡检点状态" prop="status">
-            <el-radio-group v-model="form.status">
-              <el-radio v-for="item in com_inspection_point_status" :value="item.value" :key="item.value" :label="item.value">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="巡检点位置" prop="location">
             <div class="map" id="containerMap"></div>
-            <div class="tips">
+            <div class="tips flex flex-items-center justify-between">
-              <span>点击地图选择位置</span>
+              <div>点击地图，绘制巡检路线；再次点击可继续绘制下一条（但只能保留一条）</div>
-              <span class="deleteMarker" v-show="Boolean(marker)" @click="clearLocation">清空选择地点</span>
+              <div>
+                <span class="deleteMarker" @click="clearAll">清空所有路线</span>
+              </div>
             </div>
           </el-form-item>
           <el-form-item style="margin-top: 30px">
@@ -54,20 +57,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue';
+import { ref, toRefs, nextTick } from 'vue';
 import { getCurrentInstance, ComponentInternalInstance } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { ElMessage } from 'element-plus';
 import PageHeader from '@/components/Pageheader/index.vue';
-import { addPoint, getPoint, updatePoint } from '@/api/system/InspectionPoint';
+import { addPoint, getPoint, listPoint, updatePoint } from '@/api/system/InspectionPoint';
-import { listItem } from '@/api/system/InspectionItem';
 import { onMounted, onUnmounted } from 'vue';
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { getVillageByIdAPI } from '@/api/system/community';
+import { addRoute, getRoute, updateRoute } from '@/api/system/InspectionRoute';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { com_inspection_point_checkmode } = toRefs<any>(proxy?.useDict('com_inspection_point_checkmode'));
+const { com_inspection_route_status } = toRefs<any>(proxy?.useDict('com_inspection_route_status'));
-const { com_inspection_point_status } = toRefs<any>(proxy?.useDict('com_inspection_point_status'));
 
 const router = useRouter();
 const route = useRoute();
@@ -75,73 +75,282 @@ const route = useRoute();
 const formRef = ref();
 const form = ref({
   id: null,
-  pointName: '',
+  startLat: '',
-  itemId: '',
+  startLng: '',
-  location: '',
+  endLat: '',
-  status: '0',
+  endLng: '',
-  checkMode: '9999'
+  routeName: '', // 巡检路线名称
+  description: '', // 巡检路线描述
+  routeStatus: '0', // 巡检路线状态
+  estimatedTime: null, // 预计巡检时长
+  pathPoints: '', // 巡检路线经纬度
+  totalPoints: '' // 巡检点
 });
 
 const rules = ref({
-  pointName: [{ required: true, message: '请输入巡检点名称', trigger: 'blur' }],
+  routeName: [{ required: true, message: '请输入巡检路线名称', trigger: 'blur' }],
-  itemId: [{ required: true, message: '请选择巡检项目', trigger: 'change' }],
+  estimatedTime: [{ required: true, message: '请输入预计巡检时长', trigger: 'blur' }]
-  checkMode: [{ required: true, message: '请选择打卡方式', trigger: 'change' }],
-  location: [{ required: true, message: '请选择巡检点位置', trigger: 'change' }]
 });
 
 // !== 初始化 =============================================================================
+const routeid = ref(null);
+// 巡检点 列表
+const pointslist = ref([]);
 
-const pointId = ref(null);
+// 选择巡检点列表
-const pointItemlist = ref([]);
+const checkoutPointlist = ref([]);
-const checkoutPointItemlist = ref([]);
 function checkoutItem(id: string) {
-  form.value.itemId = ''; // 每次点击都先清空 itemId
+  if (checkoutPointlist.value.includes(id)) {
-  if (checkoutPointItemlist.value.includes(id)) {
+    checkoutPointlist.value = checkoutPointlist.value.filter((item) => item !== id);
-    checkoutPointItemlist.value = checkoutPointItemlist.value.filter((item) => item !== id);
+    removePointMarker(id);
   } else {
-    checkoutPointItemlist.value.push(id);
+    checkoutPointlist.value.push(id);
-  }
+    const find = pointslist.value.find((item) => item.id === id);
-  form.value.itemId = checkoutPointItemlist.value.join(','); // 将选中的 id 数组转换为逗号分隔的字符串
+    if (find && find.location) {
-}
+      console.log(find.location, find.pointName);
-function init() {
+      if (find && find.location) {
-  // 获取巡检项目列表
+        addPointMarker(id, find.location, find.pointName);
-  listItem().then((res) => {
-    pointItemlist.value = res.rows;
-  });
-
-  if (route.query.id) {
-    pointId.value = route.query.id;
-    // 获取巡检点详情
-    getPoint(pointId.value).then((res) => {
-      form.value = {
-        ...form.value,
-        ...res.data
-      };
-      // 如果有 itemId，拆分到 checkoutPointItemlist
-      if (res.data.itemId) {
-        checkoutPointItemlist.value = res.data.itemId.split(',');
       }
+    }
+  }
+  // 调整地图视野以适应所有 marker
+  map.value.setFitView();
+}
+// 添加 marker
+function addPointMarker(id: string, location: string, title?: string) {
+  if (!map.value || !AMapLib.value) return;
+  const [lng, lat] = location.split(',').map((v) => Number(v.trim()));
+  if (!Number.isFinite(lng) || !Number.isFinite(lat)) return;
+  // 获取到经纬度后，添加 marker 数组
+  const lnglat = new AMapLib.value.LngLat(lng, lat);
+  const index = Object.keys(markers.value).length + 1; // 获取当前 marker 数量，作为新的 marker 的编号
+  markers.value[id] = new AMapLib.value.Marker({
+    position: lnglat,
+    map: map.value,
+    title: title || '巡检点',
+    label: title || '巡检点',
+    content: `
+    <div style="display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:18px;border-radius:50%;background-color:rgba(26,117,255,0.3);">
+      <div
+        style=" width: 20px;
+          border-radius: 50%;
+          height: 20px;
+          line-height: 20px;
+          background-color: rgba(26,117,255,1);
+          color: #ffffff;
+          font-size: 20px;
+          text-align: center;"
+      >${index}</div>
+    </div>`
+  });
+}
+// 移除 marker
+function removePointMarker(id: string) {
+  const markerItem = markers.value[id];
+  if (markerItem) {
+    map.value.remove(markerItem);
+    delete markers.value[id];
+  }
+}
+
+// ! 初始化 =========================================================================
+function init() {
+  if (route.query.id) {
+    routeid.value = route.query.id;
+    // 获取巡检点详情
+    getRoute(routeid.value).then((res) => {
+      form.value = {
+        id: res.data.id,
+        startLat: res.data.startLat,
+        startLng: res.data.startLng,
+        endLat: res.data.endLat,
+        endLng: res.data.endLng,
+        routeName: res.data.routeName, // 巡检路线名称
+        description: res.data.description, // 巡检路线描述
+        routeStatus: res.data.routeStatus, // 巡检路线状态
+        estimatedTime: res.data.estimatedTime, // 预计巡检时长
+        pathPoints: res.data.pathPoints, // 巡检路线经纬度
+        totalPoints: res.data.totalPoints // 巡检点
+      };
+      console.log('巡检路线详情：', form.value);
       nextTick(() => {
-        initLocation();
+        if (routeid.value) {
+          checkoutPointlist.value = res.data.totalPoints ? res.data.totalPoints.split(',') : [];
+          if (checkoutPointlist.value.length > 0) {
+            // 回显 marker
+            checkoutPointlist.value.forEach((id) => {
+              const find = res.data.points.find((item) => item.id === id);
+              if (find && find.location) {
+                addPointMarker(id, find.location, find.pointName);
+              }
+            });
+          }
+          // 回显路线
+          if (res.data.pathPoints) {
+            console.log('回显巡检点：', res.data.pathPoints);
+            renderSavedPath(res.data.pathPoints);
+          }
+        }
       });
     });
   }
 }
-init();
+
+// ! map
+const mapReady = ref(false);
+const AMapLib = ref(null);
+const map = ref<any>(null);
+const markers = ref<Record<string, any>>({});
+
+const mouseTool = ref(null);
+const drawnPolylines = ref([]); // 存所有线条
+
+onMounted(async () => {
+  // 获取巡检点列表
+  if (!routeid.value) {
+    listPoint().then((res) => {
+      pointslist.value = res.rows;
+    });
+  }
+
+  await nextTick();
+
+  window._AMapSecurityConfig = { securityJsCode: '09534b3534d8da53968529a9ce164118' };
+
+  AMapLoader.load({
+    key: '8e302fe1be5f4db62bc734db23dca149',
+    version: '2.0',
+    plugins: ['AMap.Scale', 'AMap.Marker']
+  }).then(async (AMap) => {
+    AMapLib.value = AMap;
+    map.value = new AMap.Map('containerMap', {
+      viewMode: '3D',
+      zoom: 11,
+      center: [116.397428, 39.90923]
+    });
+    mapReady.value = true;
+    // 初始化绘图插件 MouseTool
+    AMap.plugin(['AMap.MouseTool'], () => {
+      mouseTool.value = new AMap.MouseTool(map.value);
+      // ✅ 只在这里调用一次，不要重复调用
+      // 监听绘制（全局只绑定一次！）
+      mouseTool.value.on('draw', (e) => {
+        if (!e.obj) return;
+        // ==========================================
+        // 核心：永远只保留一条线，画新的自动删旧的
+        // ==========================================
+        if (drawnPolylines.value.length > 0) {
+          map.value.remove(drawnPolylines.value[0]);
+        }
+
+        drawnPolylines.value = [e.obj];
+        // 画完继续允许画下一条（但永远只保留一条）
+        initDrawTool();
+      });
+      initDrawTool();
+    });
+    init();
+  });
+});
+
+// 回显
+function renderSavedPath(pathStr: string) {
+  if (!pathStr || !map.value || !AMapLib.value) return;
+
+  try {
+    const path = JSON.parse(pathStr);
+    if (!Array.isArray(path) || path.length === 0) return;
+
+    // 先清空旧路线
+    drawnPolylines.value.forEach((line) => {
+      map.value.remove(line);
+    });
+    drawnPolylines.value = []; // 🔴 清空数组
+
+    // 只回显一条
+    const polyline = new AMapLib.value.Polyline({
+      path: path,
+      strokeColor: '#3366FF',
+      strokeOpacity: 1,
+      strokeWeight: 3,
+      strokeStyle: 'solid',
+      map: map.value
+    });
+
+    drawnPolylines.value.push(polyline); // ✅ 只一条
+    map.value.setFitView(polyline);
+  } catch (e) {
+    console.error('路线解析失败', e);
+  }
+}
+
+// 初始化绘图（只执行一次，防止事件重复绑定）
+function initDrawTool() {
+  if (!mouseTool.value) return;
+
+  // 先关闭可能存在的绘图
+  mouseTool.value.close(false);
+
+  // 开启折线绘制
+  mouseTool.value.polyline({
+    strokeColor: '#3366FF',
+    strokeOpacity: 1,
+    strokeWeight: 3,
+    strokeStyle: 'solid'
+  });
+}
+
+// 清空所有画线
+function clearAll() {
+  if (mouseTool.value) {
+    mouseTool.value.close(true); // 关闭绘图并清空
+    drawnPolylines.value.forEach((line) => {
+      map.value.removeOverlay(line);
+    });
+    drawnPolylines.value = [];
+    initDrawTool();
+  }
+}
+
+// !!! 核心：获取绘制的路线经纬度数组
+function getPolylinePath() {
+  if (drawnPolylines.value.length === 0) return [];
+  const lastLine = drawnPolylines.value.at(-1);
+  console.log('最后一条线的路径：', lastLine.getPath());
+  const path = lastLine.getPath().map((p) => [p.lng, p.lat]);
+  return path;
+}
 
 // !== 提交 =============================================================================
 const submitForm = () => {
   formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      // 设置 itemId
+      // 获取路线经纬度
-      form.value.itemId = checkoutPointItemlist.value.join(',');
+      const path = getPolylinePath() as [number, number][];
-      if (pointId.value) {
+      if (path.length === 0) {
-        updatePoint(form.value).then((res) => {
+        ElMessage.warning('请绘制巡检路线');
+        return;
+      }
+      // 转成字符串传给后端
+      const [start_lng, start_lat] = path.shift() as [number, number];
+      const [end_lng, end_lat] = path.pop() as [number, number];
+
+      form.value.startLng = `${start_lng}`;
+      form.value.startLat = `${start_lat}`;
+      form.value.endLng = `${end_lng}`;
+      form.value.endLat = `${end_lat}`;
+
+      form.value.pathPoints = JSON.stringify(path);
+      form.value.totalPoints = checkoutPointlist.value.join(',');
+
+      console.log('提交数据：', form.value);
+      if (routeid.value) {
+        updateRoute(form.value).then(() => {
           ElMessage.success('编辑成功');
           cancelForm();
         });
       } else {
-        addPoint(form.value).then((res) => {
+        addRoute(form.value).then(() => {
           ElMessage.success('添加成功');
           cancelForm();
         });
@@ -152,85 +361,7 @@ const submitForm = () => {
 // 返回
 const cancelForm = () => {
   router.push({
-    path: '/inspection/point'
+    path: '/Inspection/route'
-  });
-};
-
-// ! map
-const mapReady = ref(false);
-let map = ref(null);
-const marker = ref(null);
-const villageid = localStorage.getItem('villageid');
-onMounted(async () => {
-  await nextTick();
-
-  window._AMapSecurityConfig = { securityJsCode: '09534b3534d8da53968529a9ce164118' };
-
-  AMapLoader.load({
-    key: '8e302fe1be5f4db62bc734db23dca149',
-    version: '2.0',
-    plugins: ['AMap.Scale', 'AMap.Marker']
-  }).then(async (AMap) => {
-    const villageinfo = await getVillageByIdAPI(Number(villageid));
-    console.log(villageinfo);
-    map.value = new AMap.Map('containerMap', {
-      viewMode: '3D',
-      zoom: 11,
-      center: [116.397428, 39.90923]
-    });
-
-    mapReady.value = true;
-    handleMap(AMap);
-    initLocation(AMap);
-  });
-});
-
-/** 清空选择地点 */
-function clearLocation() {
-  form.value.location = '';
-  if (marker.value) {
-    map.value.remove(marker.value);
-    marker.value = null;
-  }
-}
-
-function handleMap(AMap) {
-  // 添加点击事件
-  map.value.on('click', (e) => {
-    const lnglat = e.lnglat;
-    form.value.location = `${lnglat.lng},${lnglat.lat}`;
-    // 如果有 marker.value，先移除
-    if (marker.value) {
-      map.value.remove(marker.value);
-    }
-    // 添加新 marker
-    marker.value = new AMap.Marker({
-      position: lnglat,
-      map: map.value,
-      title: form.value.pointName || '巡检点'
-    });
-  });
-}
-
-const initLocation = (AMap) => {
-  if (!map.value || !form.value.location) return;
-
-  const [lng, lat] = form.value.location.split(',').map((v) => Number(v.trim()));
-  if (!Number.isFinite(lng) || !Number.isFinite(lat)) return;
-  if (!lng || !lat) return;
-
-  const lnglat = new AMap.LngLat(lng, lat);
-  map.value.setCenter(lnglat);
-  map.value.setZoom(16);
-
-  if (marker.value) {
-    map.value.remove(marker.value);
-  }
-
-  marker.value = new AMap.Marker({
-    position: lnglat,
-    map: map.value,
-    title: form.value.pointName || '巡检点'
   });
 };
 
@@ -304,6 +435,7 @@ onUnmounted(() => {
       margin-top: 10px;
     }
     .tips {
+      width: 100%;
       margin-top: 10px;
       font-size: 12px;
       color: #ccc;

src/views/system/inspection/Route/index2.vue

@@ -40,7 +40,6 @@
         <el-table-column label="路线描述" align="center" prop="description" />
         <el-table-column label="巡检点" align="center" prop="PointsName" show-overflow-tooltip />
         <el-table-column label="预计巡检时长" align="center" prop="estimatedTime" />
-        <el-table-column label="备注" align="center" prop="remark" />
         <el-table-column label="巡检路线状态" align="center" prop="routeStatus">
           <template #default="scope">
             <dict-tag :options="com_inspection_route_status" :value="scope.row.routeStatus"></dict-tag>
@@ -50,6 +49,7 @@
         <el-table-column label="起点纬度" align="center" prop="startLat" />
         <el-table-column label="终点经度" align="center" prop="endLng" />
         <el-table-column label="终点纬度" align="center" prop="endLat" />
+        <el-table-column label="备注" align="center" prop="remark" />
         <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">