Merge branch 'liubiao-main'

# 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,182 @@
+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/darkblue"
+        });
+
+        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/equipmentManagement/repairRecords/index.vue

@@ -3,7 +3,7 @@
     <div class="main">
       <div class="TopTool">
         <div class="button-row">
-          <el-button type="primary" icon="Plus" @click.stop="ShowEdit(null, true)">新增维修</el-button>
+          <el-button type="primary" icon="Plus" @click.stop="ShowEdit(null, true,formRef)">新增维修</el-button>
           <el-button type="primary" plain icon="Download" @click.stop="ExportRecord()">导出</el-button>
           <el-button type="danger" plain icon="Delete" @click.stop="DropRecord()">批量删除</el-button>
         </div>
@@ -39,9 +39,9 @@
           <el-form-item label="维修部位">
             <el-input v-model="advanceSearch.repairPart" placeholder="请输入" clearable />
           </el-form-item>
-          <el-form-item label="维修原因">
+          <!-- <el-form-item label="维修原因">
             <el-input v-model="advanceSearch.repairReason" placeholder="请输入" clearable />
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="维修时间">
             <el-date-picker
               v-model="advanceSearch.Date"
@@ -74,7 +74,7 @@
           <el-table-column label="操作" align="center" fixed="right" width="280" class-name="small-padding fixed-width opt">
             <template #default="scope">
               <div class="center">
-                <el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, true)">编辑</el-text>
+                <el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, true,formRef)">编辑</el-text>
                 <el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, false)">详情</el-text>
                 <el-text class="mx-1" type="danger" @click.stop="DropRecord([scope.row])">删除</el-text>
               </div>
@@ -101,18 +101,19 @@
       :draggable="true"
     >
       <div class="form">
-        <el-form :model="cEdit" ref="ruleFormRef" style="max-width: 750px" :rules="rules">
+        <el-form :model="cEdit" ref="formRef" style="max-width: 750px" :rules="rules" >
-          <el-form-item label="设备名称" label-position="right">
+         
+          <el-form-item label="设备名称" label-position="right" prop="deviceId">
             <!-- <el-input v-model="selectedRow['deviceName']" :readonly="true" @click.stop="ShowDevice('Edit', true)" placeholder="请选择设备" /> -->
             <el-select v-model="cEdit.deviceId" placeholder="选择设备" clearable :disabled="!cEdit.isEdit" filterable>
               <el-option v-for="item in deviceDist" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId"
             /></el-select>
           </el-form-item>
 
-          <el-form-item label="维修人员" label-position="right">
+          <el-form-item label="维修人员" label-position="right" prop="repairPerson">
             <el-input v-model="cEdit.repairPerson" :readonly="!cEdit.isEdit" placeholder="请输入姓名" />
           </el-form-item>
-          <el-form-item label="维修时间" label-position="right">
+          <el-form-item label="维修时间" label-position="right" prop="repairTime">
             <el-date-picker
               v-model="cEdit.repairTime"
               :readonly="!cEdit.isEdit"
@@ -123,10 +124,10 @@
               style="width: 100%"
             />
           </el-form-item>
-          <el-form-item label="维修部位" label-position="right">
+          <el-form-item label="维修部位" label-position="right" prop="repairPart">
             <el-input v-model="cEdit.repairPart" :readonly="!cEdit.isEdit" placeholder="请输入维修部位" />
           </el-form-item>
-          <el-form-item label="维修原因" label-position="right">
+          <el-form-item label="维修原因" label-position="right" prop="repairReason">
             <el-input v-model="cEdit.repairReason" :readonly="!cEdit.isEdit" placeholder="请输入维修原因" />
           </el-form-item>
 
@@ -205,7 +206,7 @@
       <template #footer>
         <div class="dialog-footer">
           <div class="center" style="margin-top: 10px">
-            <el-button type="primary" @click="SaveFormData()"> 确定 </el-button>
+            <el-button type="primary" @click="SaveFormData(formRef)"> 确定 </el-button>
             <el-button @click="CloseEdit()"> 取消 </el-button>
           </div>
         </div>
@@ -335,11 +336,8 @@
 
 <script setup lang="ts">
 import api from '@/api/equipmentManagement/repairRecords/index';
-import common from '@/utils/common';
-import deviceapi from '@/api/equipmentManagement/device/index';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-import { deviceForm, deviceQuery, deviceVO, deviceTypeOption } from '@/api/equipmentManagement/device/types';
+
-import { UploadProps } from 'element-plus';
 
 var grid = ref(null);
 var deviceGrid = ref(null);
@@ -492,10 +490,15 @@ function DropRecord(arr = undefined) {
     () => {
       showloading('fullLoading');
       arr = arr.map((item) => item.recordId);
-      api.dropRepir(arr);
+      api.dropRepir(arr).then(res=>{
-      setTimeout(hideloading, 2000);
+        if(res && res.code==200){
-      alert('操作成功');
+          Search();
-      Search();
+        }
+        alert(res.msg);
+      });
+      
+     
+      
     },
     hideConfirm,
     '提示'
@@ -508,7 +511,7 @@ function ToggleAdvance() {
 }
 
 //显示编辑
-function ShowEdit(item = undefined, isEdit = true) {
+function ShowEdit(item = undefined, isEdit = true,formEl=undefined) {
   Status.ShowEditPop = true;
   let def = {
     recordId: null, //维修记录id
@@ -586,6 +589,10 @@ function ShowEdit(item = undefined, isEdit = true) {
           .map((v) => {
             return { name: v.imageId, url: v.imageUrl, id: v.imageId };
           });
+
+          if (!formEl) return
+
+          formEl.validate();
       }
       if (item) {
         selectedRow.value['deviceName'] = item.deviceName;
@@ -639,7 +646,7 @@ function ResetFormData() {
   cEdit.repairPart = ''; //维修部位
   cEdit.repairReason = ''; //维修原因
   cEdit.repairPerson = ''; //维修人员
-  cEdit.isEdit = false;
+
   cEdit.imageIds = [];
 
   selectedRow.value = { deviceName: '', deviceId: '' };
@@ -662,12 +669,15 @@ var dropImg = (type, file, index) => {
   confirm('您确认删除此记录吗?', runDrop, hideConfirm, '提示');
 };
 //保存表单数据
-function SaveFormData() {
+function SaveFormData(formEl: FormInstance | undefined) {
   if (!cEdit.isEdit) {
     return;
   }
 
-  showloading('fullLoading');
+   if (!formEl) return
+
+   let submit=()=>{
+      showloading('fullLoading');
   setTimeout(() => {
     let promise = null;
 
@@ -727,6 +737,14 @@ function SaveFormData() {
         hideloading();
       });
   }, 0);
+   }
+  formEl.validate((valid) => {
+    if (valid) {
+      submit();
+    } 
+  })
+
+
 }
 
 //导出
@@ -858,7 +876,7 @@ var queryParams = ref({
   deviceStatus: ''
 });
 const total = ref(0);
-const queryFormRef = ref<ElFormInstance>();
+const formRef = ref<ElFormInstance>();
 const deviceDist = ref<any[]>();
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 
@@ -897,7 +915,7 @@ interface RuleForm {
 }
 
 const rules = reactive<FormRules<RuleForm>>({
-  deviceId: [{ required: true, message: '请选择设备', trigger: 'blur' }],
+  deviceId: [{ required: true, message: '请选择设备', trigger: 'change' }],
   repairTime: [{ required: true, message: '请选择维修时间', trigger: 'blur' }],
   repairPart: [{ required: true, message: '请填写维修部位', trigger: 'blur' }],
   repairReason: [{ required: true, message: '请填写维修原因', trigger: 'blur' }],
@@ -1059,4 +1077,14 @@ input:focus {
 .demo-fit .el-avatar--square {
   margin-right: 10px;
 }
+
+:deep .el-upload-list--picture-card .el-upload-list__item .el-upload-list__item,
+.el-upload-list--picture-card .el-upload-list__item .el-upload-list__item{
+  margin:0px ;
+}
+
+// :deep .el-upload-list__item,.el-upload-list__item{
+//   margin-right: 8px !important;
+// }
+
 </style>

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,675 @@
 <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">
+        <div class="form-item">
+          <div class="vertiLine"></div>
+          <div class="input" @click.stop="showCheck('showCheckGroup')">
+            <div>{{ groupName }}</div>
+            <div>
+              <el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
+              <el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
+            </div>
+          </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')">
+            <div>{{ devType }}</div>
+            <div>
+              <el-icon v-show="!Status.showCheckType"><CaretTop /></el-icon>
+              <el-icon v-show="Status.showCheckType"><CaretBottom /></el-icon>
+            </div>
+          </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 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/homeIndex/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="dashboard-container">
     <!-- 顶部固定区域 -->
-    <div class="top-bar">
+    <div class="top-fixed">
-      <div class="header-info">
+      <div class="top-bar">
-        <div>{{ currentTime }}</div>
+        <div class="header-info">
+          <div>{{ currentTime }}</div>
+        </div>
       </div>
     </div>
 
+
     <!-- 全屏地图区域（背景） -->
     <div class="fullscreen-map">
       <MapComponent></MapComponent>
@@ -15,59 +18,66 @@
     <!-- 悬浮模块容器 -->
     <div class="floating-modules">
       <!-- 左侧模块组 -->
-      <div class="left-modules">
+      <div class="left">
-        <div class="module-card overview-card">
+        <div class="left-modules">
-          <div class="module-header">设备总览</div>
+          <div class="module-card overview-card">
-          <div class="module-content">
+            <div class="module-header">设备总览</div>
-            <DeviceOverview />
+            <div class="module-content">
+              <DeviceOverview />
+            </div>
           </div>
-        </div>
 
-        <div class="module-card">
+          <div class="module-card">
-          <div class="module-header">设备类别</div>
+            <div class="module-header">设备类别</div>
-          <div class="module-content">
+            <div class="module-content">
-            <DeviceCategory />
+              <DeviceCategory />
+            </div>
           </div>
-        </div>
 
-        <div class="module-card">
+          <div class="module-card">
-          <div class="module-header">设备使用频次</div>
+            <div class="module-header">设备使用频次</div>
-          <div class="module-content">
+            <div class="module-content">
-            <DeviceUsage />
+              <DeviceUsage />
+            </div>
           </div>
         </div>
       </div>
-
       <!-- 右侧模块组 -->
-      <div class="right-modules">
+      <div class="right">
-        <div class="module-card alarm-card">
-          <div class="module-header">报警数据</div>
-          <div class="module-content">
-            <AlarmOverview :alarmOverview="alarmOverview" />
-          </div>
-        </div>
 
-        <div class="module-card">
-          <div class="module-header">报警事件</div>
-          <div class="module-content">
-            <AlarmEvent :alarmOverview="alarmOverview" />
-          </div>
-        </div>
 
-        <div class="module-card">
+        <div class="right-modules">
-          <div class="module-header">报警次数</div>
+          <div class="module-card alarm-card">
-          <div class="module-content">
+            <div class="module-header">报警数据</div>
-            <AlarmCount />
+            <div class="module-content">
+              <AlarmOverview :alarmOverview="alarmOverview" />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <div class="module-header">报警事件</div>
+            <div class="module-content">
+              <AlarmEvent :alarmOverview="alarmOverview" />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <div class="module-header">报警次数</div>
+            <div class="module-content">
+              <AlarmCount />
+            </div>
           </div>
         </div>
       </div>
 
       <!-- 底部中间模块 -->
-      <div class="bottom-middle-module">
+      <div class="bottom">
-        <div class="module-card realtime-card">
+        <div class="bottom-middle-module">
-          <div class="module-header realtime-header">实时报警信息</div>
+          <div class="module-card realtime-card">
-          <div class="module-content">
+            <div class="module-header realtime-header">实时报警信息</div>
-            <RealTimeAlarm />
+            <div class="module-content">
+              <RealTimeAlarm />
+            </div>
           </div>
         </div>
       </div>
@@ -125,6 +135,15 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.top-fixed {
+  width: 100%;
+  height: 13vh;
+  background: url(@/assets/homeIndex/top.png) no-repeat;
+  background-size: 100% 100%;
+  z-index: 11;
+  position: absolute;
+}
+
 /* 顶部栏 */
 .top-bar {
   position: relative;
@@ -153,7 +172,6 @@ onMounted(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  background: radial-gradient(0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -172,6 +190,23 @@ onMounted(() => {
   pointer-events: none;
 }
 
+.left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30vw;
+  height: 100vh;
+  background: url(@/assets/homeIndex/left.png) no-repeat;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30vw;
+  height: 100vh;
+  background: url(@/assets/homeIndex/right.png) no-repeat;
+}
 /* 左侧模块组 */
 .left-modules {
   position: absolute;
@@ -179,9 +214,10 @@ onMounted(() => {
   left: 0.5vw;
   display: flex;
   flex-direction: column;
-  width: 27vw;
+  width: 27.2vw;
   height: calc(100vh - 9vh);
   pointer-events: auto;
+
 }
 
 /* 右侧模块组 */
@@ -191,7 +227,7 @@ onMounted(() => {
   right: 0.5vw;
   display: flex;
   flex-direction: column;
-  width: 27vw;
+  width: 27.2vw;
   height: calc(100vh - 9vh);
   pointer-events: auto;
 }
@@ -205,6 +241,8 @@ onMounted(() => {
   width: 44vw;
   height: calc(39vh - 9vh);
   pointer-events: auto;
+  background: url(@/assets/homeIndex/bottom.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 /* 模块卡片样式 */
@@ -218,6 +256,7 @@ onMounted(() => {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  border-radius: 10px;
 }
 
 /* 模块标题 */

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>