完成大屏地图功能

src/views/fys-equipment/fenceAccessRecord/index.vue

@@ -83,13 +83,14 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="经纬度" align="center" prop="id">
+        <!-- <el-table-column label="经纬度" align="center" prop="id">
           <template #default="scope">
             <span style="margin-right: 15px">{{ scope.row.longitude }}</span
             ><span>{{ scope.row.latitude }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="精度" align="userName" prop="accuracy"> </el-table-column>
+        <el-table-column label="精度" align="userName" prop="accuracy"> </el-table-column> -->
+ <el-table-column label="事件地址" align="left" prop="eventAddress"> </el-table-column>
 
         <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
           <template #default="scope">

src/views/largeScreen/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="content">
+    <div class="map" id="map"></div>
+    <div class="topTool">
+      <div class="form">
+        <el-select v-model="search.deviceType" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in dic.types" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-select v-model="value" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+       
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import common from '@/utils/common';
+import map from '@/api/largeScreen/mapOpt';
+import request from '@/utils/request';
+
+var dic = reactive({
+  groups: [],
+  types: [],
+  imeis: []
+});
+
+var search = ref({
+  groupId: '',
+  deviceType: '',
+  deviceImei: ''
+});
+
+var points = ref([]);
+var fens = ref([]);
+
+function getPoints() {
+  let promise = request({
+    url: '/api/largeScreen/getDeviceLocationInfo',
+    method: 'get',
+    params: search
+  });
+
+  promise.then((res) => {
+    if (res) {
+      if (res.code && res.code == 200) {
+        var array = res.data;
+
+        for (let i = 0; i < array.length; i++) {
+          let v = array[i];
+          
+          let json={
+            deviceId: v.deviceId,
+            deviceName: v.deviceName,
+            longitude: v.longitude,
+            latitude: v.latitude,
+            fenceId: null
+          };
+
+          if (v.fenceInfo) {
+            fens.value.find((item) => {
+              return item.id == v.fenceInfo.id;
+            });
+            json.fenceId=v.fenceInfo.id;
+            fens.value.push(v.fenceInfo);
+          }
+          points.value.push(json);
+          
+
+        }
+      } else {
+        console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+      }
+    } else {
+      console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+    }
+  });
+}
+
+function getTypes(){
+  let promise = request({
+    url: '/api/deviceType/all',
+    method: 'get'
+  });
+
+  promise.then(res=>{
+    if(res && res.code && res.code==200){
+      dic.types=res.data.map(v=>{
+        return {
+          value:v.id,
+          label:v.typeName
+        }
+      });
+    }
+  });
+}
+
+function getGroups(){
+  let promise = request({
+    url: '/api/device/group/list',
+    method: 'get',
+    params:{
+      status:1,
+      isDeleted:0,
+      pageNum:1,
+      pageSize:9999
+    }
+  });
+
+  promise.then(res=>{
+    if(res && res.code && res.code==200){
+      dic.groups=res.data;
+    }
+  });
+}
+
+
+
+onMounted(() => {
+  debugger;
+  map.initMap();
+  getTypes();
+  getGroups();
+
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100vw;
+  height: 100vh;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.topTool {
+  position: absolute;
+  width: 33%;
+  height: 200px;
+  z-index: 9999999999999999;
+  left: 50%;
+  background: #e2e2e2;
+  top: 100px;
+}
+</style>