feat:点击位置名称创建腾讯地图坐标

index.html

@@ -119,5 +119,6 @@
 <div class="selection-box" style="border: 1px dotted black;position: absolute;display: none;"></div>
 <script>var globalThis = window;</script>
 <script src="/src/main.ts" type="module"></script>
+<script src="https://map.qq.com/api/js?v=2.exp&key=GIABZ-YUQKX-JOI4L-ZAGIS-673KS-NKBMC"></script>
 </body>
 </html>

src/router/modules/map.ts

@@ -0,0 +1,44 @@
+import { Layout } from '@/router/constant'
+import type { RouteRecordRaw } from 'vue-router'
+
+/**
+ * @param name 路由名称, 必须设置,且不能重名
+ * @param meta 路由元信息（路由附带扩展信息）
+ * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
+ * @param meta.disabled 禁用整个菜单
+ * @param meta.title 菜单名称
+ * @param meta.icon 菜单图标
+ * @param meta.keepAlive 缓存该路由
+ * @param meta.sort 排序越小越排前
+ *
+ */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'map',
+    redirect: '/map',
+    component: Layout,
+    meta: {
+      title: '地理位置',
+      permissions: ['task-main'],
+      svgname: 'task-approval',
+      svgsize: 22,
+      sort: 5,
+      disabled: true,
+      hidden: true,
+    },
+    children: [
+      {
+        path: 'map',
+        name: 'map-main',
+        meta: {
+          title: '地理位置',
+        },
+        component: () => import('@/views/map/index.vue'),
+      },
+     
+    ],
+  },
+]
+
+export default routes

src/views/map/index.vue

@@ -0,0 +1,92 @@
+
+<script>
+import { reactive, toRefs, onMounted } from "vue";
+export default {
+  setup() {
+    let state = reactive({});
+
+    let methods = {
+      init() {
+        function getQueryParamsNew() {
+          const params = new URLSearchParams(window.location.search);
+          let paramsObj = {};
+          for (const [key, value] of params.entries()) {
+            if (paramsObj.hasOwnProperty(key)) {
+              if (Array.isArray(paramsObj[key])) {
+                paramsObj[key].push(value);
+              } else {
+                paramsObj[key] = [paramsObj[key], value];
+              }
+            } else {
+              paramsObj[key] = value;
+            }
+          }
+          return paramsObj;
+        }
+        var queryParamsNew = getQueryParamsNew();
+        state.queryParamsNew = queryParamsNew;
+
+        const lng = queryParamsNew.lng; //经度
+        const lat = queryParamsNew.lat; // 纬度
+        // 初始化地图
+        const center = new qq.maps.LatLng(lat, lng);
+        const map = new qq.maps.Map(document.getElementById("map-container"), {
+          center,
+          zoom: 15,
+        });
+
+        // 创建坐标点
+        const marker = new qq.maps.Marker({
+          position: center,
+          map: map,
+        });
+        // 创建信息窗口
+        const infoWin = new qq.maps.InfoWindow({
+          map: map,
+          position: center,
+        });
+        infoWin.setContent(
+          `<div class="detailshow" >${queryParamsNew.name}</div>`
+        );
+        infoWin.open();
+        qq.maps.event.addListener(marker, "click", function () {
+          infoWin.open();
+          infoWin.setContent(
+            `<div class="detailshow" >${queryParamsNew.name}</div>`
+          );
+          infoWin.setPosition(centerLatLng);
+        });
+      },
+    };
+    onMounted(() => {
+      methods.init();
+    });
+    return {
+      ...toRefs(state),
+      ...methods,
+    };
+  },
+  components: {},
+};
+</script>
+<template>
+  <div class="mapmain">
+    <div id="map-container" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<style >
+.layout-sider {
+  display: none;
+}
+.layout-main-header {
+  display: none;
+}
+.mapmain {
+  height: 100%;
+  width: 100%;
+}
+.detailshow {
+  width: 100%;
+}
+</style>

src/views/task/content/Content.vue

@@ -271,17 +271,19 @@ async function getTableData() {
     "拜访小结",
     "拜访项目类别",
   ];
-  
+
   fieldList.map((v) => {
     if (userFieldList.includes(v.name)) {
-     let locationobj = {address:""} 
-     if(v.name=='location'){
-      locationobj=JSON.parse(taskDetailInfo.value.ocrPicture[v.name]);
-    
-    }
+      let locationobj = { address: "" };
+      if (v.name == "location") {
+        locationobj = JSON.parse(taskDetailInfo.value.ocrPicture[v.name]);
+      }
       const item = {
         label: v.fieldDesc,
-        value: v.name=='location'?locationobj.address:taskDetailInfo.value.ocrPicture[v.name],
+        value:
+          v.name == "location"
+            ? locationobj.address
+            : taskDetailInfo.value.ocrPicture[v.name],
         key: v.name,
         blue: blueList.includes(v.fieldDesc),
       };
@@ -389,6 +391,22 @@ function goBack() {
 function switchBatch() {
   setBatch(!batch.value);
 }
+
+function getrowValue(e) {
+  if (e.key == "location") {
+    let locationobj = JSON.parse(taskDetailInfo.value.ocrPicture.location);
+    let lat = locationobj.lat.$numberDecimal;
+    let lng = locationobj.lng.$numberDecimal;
+    let name = e.value;
+    const protocol = window.location.protocol;
+    const hostname = window.location.hostname;
+    const port = window.location.port;
+    const hostWithPort = protocol + "//" + hostname + ":" + port + "/";
+    window.open(
+      hostWithPort + "map" + "?name=" + name + "&lat=" + lat + "&lng=" + lng
+    );
+  }
+}
 </script>
 
 <template>
@@ -737,6 +755,7 @@ function switchBatch() {
           :data="taskDetailInfo"
           :task-table-data="taskTableData"
           @show-modal="showActionsModal"
+          @getrow-value="getrowValue"
         />
       </n-tab-pane>
       <n-tab-pane name="picture-info" tab="图片信息">

src/views/task/content/TaskTable.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
+import * as XLSX from 'xlsx';
 
 defineProps({
   data: {
@@ -11,10 +12,14 @@ defineProps({
     default: () => [[]],
   },
 });
-const emit = defineEmits(["showModal"]);
+const emit = defineEmits(["showModal","getrowValue"]);
 function showActionsModal() {
   emit("showModal");
 }
+
+function getrowvalue(row){
+  emit("getrowValue",row);
+}
 </script>
 
 <template>
@@ -32,13 +37,13 @@ function showActionsModal() {
       <th v-if="item && item[0]">
         {{ item[0].label }}
       </th>
-      <td v-if="item && item[0]" :class="item[0].blue ? 'blue' : ''">
+      <td v-if="item && item[0]" :class="item[0].blue ? 'blue' : ''" @click="getrowvalue(item[0])">
         {{ item[0].value }}
       </td>
       <th v-if="item && item.length > 1">
         {{ item[1].label }}
       </th>
-      <td v-if="item && item.length > 1" :class="item[1].blue ? 'blue' : ''">
+      <td v-if="item && item.length > 1" :class="item[1].blue ? 'blue' : ''" @click="getrowvalue(item[1])"> 
         {{ item[1].value }}
       </td>
     </tr>