完成跟深圳工程师的合并

# Conflicts:
#	src/views/fys-equipment/fenceAccessRecord/index.vue

.env.development

@@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
- #VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
+ VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
- VITE_APP_BASE_API = 'http://192.168.2.23:8000'
+#  VITE_APP_BASE_API = 'https://www.cnxhyc.com/xh'
 
 #代永飞接口
 #VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   

src/api/largeScreen/mapOpt.ts

@@ -0,0 +1,184 @@
+import { fa } from "element-plus/es/locale/index.mjs";
+
+var map = null;
+
+
+function initMap(click) {
+    // let key = '90bc158992feb8ccd0145e168cab1307';
+    let init = function () {
+        map = new AMap.Map("map", {
+            viewMode: '2D', //默认使用 2D 模式
+            zoom: 11, //地图级别
+            center: [114.420739, 30.487514], //地图中心点
+            mapStyle: "amap://styles/8c3efc37298895fd78e6aa0e799e78ce"
+        });
+
+        map.on('click', function (evt) {
+            //   alert('您点击的位置:'+evt.lnglat.longitude+' , '+ evt.lnglat.latitude);
+            if (click) {
+                click(evt.lnglat);
+            }
+        });
+    }
+    return new Promise((resolve, reject) => {
+        if (map) {
+            resolve(200);
+            return;
+        }
+        if (window.AMap) {
+            init();
+            resolve(200);
+            return;
+        }
+        reject({ code: 500, msg: '高德地图未能初始化成功' });
+    });
+
+}
+
+//添加一个点
+function AddPoint(point, index, dragEnd, click, iconImg) {
+
+    return new Promise((resolve, reject) => {
+        try {
+            let center = point ? new AMap.LngLat(point.longitude, point.latitude) : map.getCenter();
+
+            let icon = new AMap.Icon({
+                size: new AMap.Size(45, 45), //图标尺寸
+                image: iconImg, //Icon 的图像
+
+                imageSize: new AMap.Size(45, 45), //根据所设置的大小拉伸或压缩图片
+            });
+            let marker = new AMap.Marker({
+                icon: icon,
+                position: center,
+                offset: new AMap.Pixel(-15, -24),
+                draggable: dragEnd ? true : false,
+                cursor: 'point',
+                title: point.isAlarming ? '正在报警:' + point.deviceName : point.deviceName,
+                text: index,
+                class: 'point',
+                extData: point
+            });
+            marker.setMap(map);
+
+            let lays = map.getAllOverlays('text');
+            for (let i = 0; i < lays.length; i++) {
+                const element = lays[i];
+                let cls = element.getOptions();
+                if (cls.class) {
+                    element.dom.classList.add(cls.class);
+                }
+            }
+
+
+            resolve(center);
+        } catch (ex) {
+            reject(ex)
+        }
+
+    });
+
+
+}
+
+function getCenter() {
+    var center = map.getCenter().toJSON();
+    return center;
+}
+
+function setCenter(lon, latitude) {
+    var position = new AMap.LngLat(lon, latitude); //传入经纬度    
+    map.setCenter(position); //简写 设置地图中心点
+
+}
+//画多边形
+function DrawPoy(points) {
+    if (!map) {
+        return;
+    }
+    if (!points) {
+        return;
+    }
+    let path = [];
+    let path1 = [];
+
+    setTimeout(() => {
+        points.coordinates.filter(v => {
+            path.push(new AMap.LngLat(v.longitude, v.latitude));
+            path1.push(new AMap.LngLat(v.longitude * 0.5, v.latitude * 0.5));
+            return true;
+        });
+
+        let polygon = new AMap.Polygon({
+            path: path,
+            fillColor: '#F00C0C',
+            fillOpacity: 0.03,
+            strokeOpacity: 0.1,
+            strokeColor: '#F00C0C',
+
+            strokeWeight: 3,
+            strokeStyle: 'dashed',
+            // strokeDasharray: [50,50,50],
+            extData: points
+        });
+        map.add(polygon);
+    }, 0);
+
+}
+//画圆形
+function DrawCicle(points, raduis, dragEnd) {
+    if (!map) {
+        return;
+    }
+
+
+    let circle = new AMap.Circle({
+        center: [points.coordinates[0].longitude, points.coordinates[0].latitude],
+        radius: raduis ? raduis : 1000, //半径
+        borderWeight: 3,
+        strokeColor: "#F00C0C",
+        strokeWeight: 1,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.4,
+        strokeStyle: 'dashed',
+        strokeDasharray: [10, 10],
+        // 线样式还支持 'dashed'
+        fillColor: '#1791fc',
+        zIndex: 50,
+    })
+
+
+
+    map.add(circle);
+    // 缩放地图到合适的视野级别
+
+}
+
+//清除所有
+function clearOverLays() {
+    map && map.clearMap();
+}
+
+
+
+function removeOverLay(lay) {
+    map && map.remove(lay);
+}
+
+
+
+function setFitView() {
+    if (map) { map.setFitView(); }
+}
+export default {
+    gdMap: map,
+    initMap: initMap,
+    AddPoint: AddPoint,
+    getCenter: getCenter,
+    DrawPoy: DrawPoy,
+    DrawCicle: DrawCicle,
+    clearOverLays: clearOverLays,
+    removeOverLay: removeOverLay,
+
+    setFitView: setFitView
+}

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/homeIndex/components/MapComponent.vue

@@ -1,8 +1,694 @@
 <template>
-    <div class="map-component">地图模块</div>
+  <div class="content">
-</template>
+    <div class="map" id="map" v-loading="Status.loading" element-loading-background="#022D51a8"></div>
-<script setup lang="ts"> 
+    <div class="topTool">
-</script>
+      <div class="form">
-<style scoped lang="scss">
+        <!-- <el-select v-model="search.deviceType" class="form-item" placeholder="所属分组" filterable clearable>
+          <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
+            <div>{{ item.label }}</div>
+          </el-option>
+        </el-select>
 
-</style>
+        <el-select v-model="search.groupId" class="form-item" placeholder="设备类型" filterable clearable>
+          <el-option v-for="item in groups" :key="item.value" :label="item.label" :value="item.value">
+            <div :style="{ paddingLeft: `${(item.level - 1) * 16}px` }">
+              {{ item.label }}
+            </div>
+          </el-option>
+        </el-select>
+        
+        <el-input v-model="search.deviceImei" class="form-item" placeholder="设备IMEI" /> -->
+        <div class="form-item">
+          <div class="vertiLine"></div>
+          <div class="input" @click.stop="showCheck('showCheckGroup')">
+            <span>{{ groupName }}</span>
+            <span>
+              <el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
+              <el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
+            </span>
+          </div>
+          <div class="ul" :class="Status.showCheckGroup ? '' : 'displayNone'">
+            <div class="li" @click.stop="checkItem(item, 'groupId')" 
+            :class="item.value === search.groupId ? 'active' : ''" 
+            v-for="item in groups"
+            :style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+
+
+
+        <div class="form-item">
+          <div class="vertiLine"></div>
+          <div class="input" @click.stop="showCheck('showCheckType')">
+            <span>{{ devType }}</span>
+            <span>
+              <el-icon v-show="!Status.showCheckType"><CaretTop /></el-icon>
+              <el-icon v-show="Status.showCheckType"><CaretBottom /></el-icon>
+            </span>
+          </div>
+          <div class="ul" :class="Status.showCheckType ? '' : 'displayNone'">
+            <div
+              class="li"
+              @click.stop="checkItem(item, 'deviceType')"
+              :class="item.value === search.deviceType ? 'active' : ''"
+              v-for="item in types"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="form-item">
+          <div class="vertiLine"></div>
+          <input type="text" class="input" @focus="hideCheck()" v-model="search.deviceImei" placeholder="设备IMEI" />
+        </div>
+        <div class="searchBtn" @click="getPoints()">查询</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import common from '@/utils/common';
+import map from '@/api/largeScreen/mapOpt';
+import request from '@/utils/request';
+
+import mapPoint from '@/assets/images/mapPoint.png';
+import mapWarn from '@/assets/images/mapWarn.png';
+
+var groups = ref([]);
+var types = ref([]);
+
+var search = ref({
+  groupId: '',
+  deviceType: '',
+  deviceImei: ''
+});
+
+var points = ref([]);
+var fens = ref([]);
+var Status = reactive({
+  loading: false,
+  showCheckGroup: false,
+  showCheckType: false
+});
+
+//假数据
+function getFakeData() {
+  return [
+    {
+      'deviceId': 1001,
+      'deviceName': '智能监控设备-01',
+      'longitude': '116.39748',
+      'latitude': '39.90882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5002,
+        'name': '圆形电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 1,
+        'coordinates': [{ 'longitude': '116.39768', 'latitude': '39.89482' }],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1002,
+      'deviceName': '环境监测终端-02',
+      'longitude': '116.41748',
+      'latitude': '39.92882',
+      'isAlarming': false,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1003,
+      'deviceName': '智能停车桩-03',
+      'longitude': '116.43748',
+      'latitude': '39.94882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1004,
+      'deviceName': '智慧路灯-04',
+      'longitude': '116.45748',
+      'latitude': '39.96882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1005,
+      'deviceName': '水质监测仪-05',
+      'longitude': '116.37748',
+      'latitude': '39.88882',
+      'isAlarming': false,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1006,
+      'deviceName': '智能门禁-06',
+      'longitude': '116.35748',
+      'latitude': '39.99882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1007,
+      'deviceName': '消防传感器-07',
+      'longitude': '116.47748',
+      'latitude': '39.87882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1008,
+      'deviceName': '气象站-08',
+      'longitude': '116.49748',
+      'latitude': '39.91882',
+      'isAlarming': false,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1009,
+      'deviceName': '智能垃圾桶-09',
+      'longitude': '116.33748',
+      'latitude': '39.86882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1010,
+      'deviceName': '充电桩-10',
+      'longitude': '116.31748',
+      'latitude': '39.93882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    }
+  ];
+}
+
+let time = null;
+function getPoints() {
+  hideCheck();
+  clearTimeout(time);
+  setTimeout(() => {
+    Status.loading = true;
+
+    let promise = request({
+      url:
+        '/api/largeScreen/getDeviceLocationInfo?groupId=' +
+        search.value.groupId +
+        '&deviceType=' +
+        search.value.deviceType +
+        '&deviceImei=' +
+        search.value.deviceImei,
+      method: 'get'
+    });
+
+    let fakeData = getFakeData();
+    promise
+      .then((res) => {
+        map.clearOverLays();
+        if (res) {
+          if (res.code && res.code == 200) {
+            var array = res.data;
+            if (!array.length) {
+              ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
+              array = fakeData;
+            }
+            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,
+                isAlarming: v.isAlarming
+              };
+
+              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);
+
+              map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint);
+            }
+
+            if (fens.value && fens.value.length > 0) {
+              for (let i = 0; i < fens.value.length; i++) {
+                let f = fens.value[i];
+                if (f.areaType === 0) {
+                  map.DrawPoy(f);
+                } else {
+                  map.DrawCicle(f, f.radius, null);
+                }
+              }
+            }
+
+            map.setFitView();
+          } else {
+            console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+          }
+        } else {
+          console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+        }
+      })
+      .finally(() => {
+        Status.loading = false;
+      });
+  }, 200);
+}
+
+function getTypes() {
+  let promise = request({
+    url: '/api/deviceType/all',
+    method: 'get'
+  });
+
+  promise.then((res) => {
+    if (res && res.code && res.code == 200) {
+      if (res.data.length) {
+        types.value = res.data.map((v) => {
+          return {
+            value: v.id,
+            label: v.typeName
+          };
+        });
+      } else {
+        for (let i = 0; i < 5; i++) {
+          types.value.push({
+            value: i,
+            label: '类型' + (i + 1)
+          });
+        }
+      }
+    }
+  });
+}
+
+function getGroups() {
+  let promise = request({
+    url: '/api/device/group/list',
+    method: 'get',
+    params: {
+      status: 1,
+      isDeleted: 0,
+      pageNum: 1,
+      pageSize: 9999
+    }
+  });
+
+  let flattenTree = (nodes, currentLevel = 1) => {
+    let result = [];
+
+    nodes.forEach((node) => {
+      // 复制当前节点，添加level字段，移除children属性
+      const { children, ...rest } = node;
+      const nodeWithLevel = {
+        ...rest,
+        level: currentLevel // 添加层级信息
+      };
+
+      // 将当前节点添加到结果数组
+      result.push(nodeWithLevel);
+
+      // 如果有子节点，递归处理并将层级+1
+      if (children && children.length > 0) {
+        result = result.concat(flattenTree(children, currentLevel + 1));
+      }
+    });
+
+    return result;
+  };
+
+  promise.then((res) => {
+    if (res && res.code && res.code == 200) {
+       let arr = res.data;
+       arr = flattenTree(arr);
+       if (arr.length) {
+         groups.value = arr.map((v) => {
+           return {
+             value: v.id,
+             label: v.groupName,
+             level: v.level
+           };
+         });
+       } else 
+      
+      {
+        let array=[];
+        for (let i = 0; i < 5; i++) {
+          array.push({
+            value: i,
+            label: '假数据' + (i + 1),
+            level:i%3+1
+          });
+        }
+        
+        groups.value=array;
+      }
+    }
+  });
+}
+
+function getStyle(item){
+  debugger;
+    let left=(item.level-1)*16+'px';
+    return "padding-left:"+left+"px"
+}
+
+function checkItem(item, type) {
+  if (search.value[type] === item.value) {
+    return;
+  }
+
+  search.value[type] = item.value;
+  hideCheck();
+}
+
+var groupName = computed(() => {
+  
+  if (search.value.groupId) {
+    let f = groups.value.find((v) => {
+      return v.value === search.value.groupId;
+    });
+
+    if (f) {
+      return f.label;
+    }
+  }
+  return '所属分组';
+});
+
+var devType = computed(() => {
+  
+  if (search.value.deviceType) {
+    let f = types.value.find((v) => {
+      return v.value === search.value.deviceType;
+    });
+
+    if (f) {
+      return f.label;
+    }
+  }
+  return '设备类型';
+});
+
+function hideCheck() {
+  Status.showCheckGroup = false;
+  Status.showCheckType = false;
+}
+
+function showCheck(type) {
+  if(type=='showCheckGroup'){
+    Status.showCheckType = false;
+  }else{
+     Status.showCheckGroup = false;
+  }
+  Status[type] = !Status[type];
+}
+
+onMounted(() => {
+  map.initMap(hideCheck).then((res) => {
+    getPoints();
+  });
+
+  getTypes();
+  getGroups();
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100vw;
+  height: 100vh;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.topTool {
+  position: absolute;
+  width: 100%;
+  height: 45px;
+  z-index: 99;
+
+  background: #00000000;
+  top: 100px;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.topTool .form-item {
+  width: calc(calc(100% - 160px) / 3);
+  height: 45px;
+  border: none;
+}
+:deep .el-select__wrapper,
+:deep .el-input__wrapper {
+  border: none;
+  height: 45px;
+}
+
+:deep .el-select__wrapper,
+:deep .el-input__wrapper,
+.topTool .form-item {
+  background: linear-gradient(to bottom, #007eff59 0%, /* 顶部红色 */ #00efed59 50%, /* 中间蓝色 */ #1d5df459 100% /* 底部红色 */);
+}
+.topTool .form {
+  width: 43%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.topTool .searchBtn {
+  background: linear-gradient(to bottom, #006aae2e, #0056b7);
+  font-family: MicrosoftYaHei;
+  font-size: 16px;
+  color: #ddf4ff;
+  line-height: 45px;
+  width: 100px;
+  height: 45px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  text-align: center;
+  border-radius: 34px;
+  cursor: pointer;
+}
+
+.form-item1 {
+  width: 144px;
+  height: 44px;
+  background: linear-gradient(to bottom, #007eff 0%, /* 顶部红色 */ #00efed 48%, /* 中间蓝色 */ #1d5df4 100% /* 底部红色 */);
+
+  opacity: 0.35;
+}
+
+.topTool .form-item {
+  display: flex;
+  position: relative;
+}
+
+.topTool .form-item .input {
+  width: 100%;
+  height: 100%;
+  background-color: #00000000;
+  border: none;
+  box-sizing: border-box;
+  padding: 0px 10px;
+  line-height: 45px;
+  outline: none;
+  font-family: MicrosoftYaHei;
+  font-size: 15px;
+  color: #deefff;
+  width: calc(100% - 6px);
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+}
+.topTool .form-item input::placeholder {
+  font-family: MicrosoftYaHei;
+  font-size: 15px;
+  color: #deefff;
+}
+.topTool .form-item input:focus {
+  outline: none;
+  caret-color: #ffffff;
+}
+
+.topTool .form-item .vertiLine {
+  width: 6px;
+  height: 100%;
+  background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
+}
+
+.topTool .form-item .ul {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  min-height: 30px;
+  background: #022e51cc;
+}
+
+.topTool .form-item .li {
+  height: 40px;
+  line-height: 40px;
+  text-indent: 10px;
+  cursor: pointer;
+  font-family: MicrosoftYaHei;
+  font-size: 15px;
+  color: #deefff;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  font-weight: 300;
+  box-sizing: border-box;
+  width: 100%;
+}
+.topTool .form-item .li.active {
+  color: #00fcff;
+}
+
+.topTool .form-item .li:hover {
+  background: #007eff59;
+  color: #00fcff;
+}
+
+.displayNone {
+  display: none !important;
+}
+</style>

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>