距离筛选

src/views/task.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="title">任务中心</div>
     </div>
-    <div class="search" style="border-bottom: 1px solid #f1f1f1;">
+    <div class="search" style="border-bottom: 1px solid #f1f1f1">
       <van-dropdown-menu>
         <van-dropdown-item
           v-model="dataForm.isReceived"
@@ -60,6 +60,12 @@
             </van-button>
           </div>
         </van-dropdown-item>
+        <van-dropdown-item
+          :title="listTypeName"
+          v-model="dataForm.lietType"
+          :options="option2"
+          @change="changelietType"
+        />
       </van-dropdown-menu>
     </div>
     <div
@@ -72,6 +78,7 @@
         <thead>
           <tr>
             <th>管线及单元</th>
+            <th v-if="listTypeName != '默认'">距离</th>
             <th>状态</th>
             <th>时间</th>
             <th>操作</th>
@@ -80,14 +87,15 @@
         <tbody>
           <tr v-for="(row, index) in dataList" :key="index">
             <td>{{ row.lineName }}({{ row.lineUnitName }})</td>
-            <td style="width:120px">
+            <td style="width: 90px" v-if="listTypeName != '默认'">{{ (row.distance/1000).toFixed(2) }}km</td>
+            <td style="width: 120px">
               <span :style="{ color: isReceivedColor[row.isReceived] }">
                 {{ isReceived[row.isReceived] }}
               </span>
             </td>
-            <td style="width:90px">{{ row.updateDate.slice(0, -9) }}</td>
+            <td style="width: 90px">{{ row.updateDate.slice(0, -9) }}</td>
             <td>
-              <div class="bts" style="width:170px">
+              <div class="bts" style="width: 170px">
                 <div
                   v-if="row.isReceived === '0'"
                   class="danger"
@@ -128,7 +136,7 @@
         </tbody>
       </table>
     </div>
-    <van-back-top target=".table-container"/>
+    <van-back-top target=".table-container" />
   </div>
 </template>
 
@@ -141,6 +149,7 @@ import {
   defineExpose,
   onMounted,
   getCurrentInstance,
+  computed,
 } from "vue";
 import { showToast, showConfirmDialog } from "vant";
 const { proxy } = getCurrentInstance();
@@ -153,7 +162,14 @@ import { goBackToApp, saveCode, downFly } from "@/utils/bridge";
 const isLoading = ref(false);
 const more = ref(false);
 const top = ref(false);
-
+const listTypeName = computed(() => {
+  if (!rectangle.value) {
+    return "定位中...";
+  }
+  return option2.value[dataForm.value.lietType].text;
+});
+const rectangle = ref();
+const location = ref();
 const itemRef = ref();
 const option1 = [
   { text: "全部", value: "" },
@@ -166,6 +182,11 @@ const option1 = [
   { text: "已确认上传文件为最终巡检文件", value: 6 },
 ];
 
+const option2 = ref([
+  { text: "默认", value: 0 },
+  { text: "离我最近", value: 1 },
+]);
+
 const isReceivedColor = {
   0: "#CCCCCC", // 灰色 - 未接收
   1: "#4CAF50", // 绿色 - 已接收
@@ -187,9 +208,49 @@ const isReceived = {
 
 const dataForm = ref({
   isReceived: "",
+  lietType: 0,
   page: 1,
   limit: 15,
 });
+
+const getLocation = () => {
+  AMap.plugin("AMap.Geolocation", function () {
+    var geolocation = new AMap.Geolocation({
+      enableHighAccuracy: true, // 开启高精度模式
+      timeout: 1000, // 设置超时时间为 30 秒
+      noIpLocate: 0, // 使用 IP 定位作为备用方案
+      noGeoLocation: 0, // 允许浏览器获取地理位置
+    });
+
+    geolocation.getCurrentPosition(function (status, result) {
+      if (status === "complete") {
+        var lng = result.position.lng;
+        var lat = result.position.lat;
+        console.log(lng, lat);
+      } else {
+        console.error("定位失败", result);
+        fetch(
+          "https://restapi.amap.com/v3/ip?key=74d5aa7c4270effe9a18d9cfa6149abf"
+        )
+          .then((response) => response.json())
+          .then((data) => {
+            console.log("IP 定位:", data);
+            console.log("当前位置：" + data.province + data.city);
+            console.log("经纬度：" + data.rectangle.split(";")[1]);
+            location.value = data.province + data.city;
+            rectangle.value = data.rectangle.split(";")[1];
+            option2.value[1].text = `离我最近(${location.value})`;
+          })
+          .catch((error) => {
+            console.error("IP 定位失败:", error);
+            option2.value[1].text = "定位失败，点击重新定位";
+            showToast("定位失败");
+          });
+      }
+    });
+  });
+};
+
 //获取数据
 const getList = (e) => {
   if (more.value) {
@@ -200,6 +261,13 @@ const getList = (e) => {
   if (e == 2) {
     isLoading.value = true;
   }
+  if (dataForm.value.lietType == 1) {
+    dataForm.value.lon = rectangle.value.split(",")[0];
+    dataForm.value.lat = rectangle.value.split(",")[1];
+  } else {
+    dataForm.value.lon = null;
+    dataForm.value.lat = null;
+  }
   proxy
     .$ajax({
       method: "GET",
@@ -251,6 +319,16 @@ const changeisReceived = (event) => {
   }
   getList();
 };
+const changelietType = () => {
+  if (!rectangle.value) {
+    getLocation();
+    return;
+  }
+  dataList.value = [];
+  dataForm.value.page = 1;
+  more.value = false;
+  getList();
+};
 
 const back = () => {
   goBackToApp("home");
@@ -430,6 +508,7 @@ onMounted(() => {
   scrollContainer.addEventListener("scroll", handleScroll);
 
   getList(1);
+  getLocation();
 });
 </script>