From 68681118135d8843699556af754189cff3095599 Mon Sep 17 00:00:00 2001
From: zengmingjie <zengmingjie@qq.com>
Date: Wed, 27 Aug 2025 23:19:23 +0800
Subject: [PATCH] =?UTF-8?q?8.27=E9=97=AE=E9=A2=98=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/myForm.vue                   |   9 +
 src/components/myMars.vue                   | 105 ++++++++--
 src/components/myTable.vue                  |   2 +
 src/views/contentData/LeftSidebar/index.vue |  23 +++
 src/views/contentData/index.js              |  20 +-
 src/views/index.vue                         |  20 ++
 src/views/menuData/AlertDialog.vue          |  68 ++-----
 src/views/menuData/DeviceDialog.vue         |  32 +--
 src/views/menuData/PositionDialog.vue       |   2 +-
 src/views/menuData/WhitListDialog.vue       | 214 ++++++++++----------
 10 files changed, 300 insertions(+), 195 deletions(-)

diff --git a/src/components/myForm.vue b/src/components/myForm.vue
index 44f6b2f..801b88d 100644
--- a/src/components/myForm.vue
+++ b/src/components/myForm.vue
@@ -16,6 +16,15 @@
         :rules="detail ? false : item.rules"
         v-show="item.show === undefined ? true : item.show"
       >
+        <template #label>
+          <span v-if="item.label && typeof item.label === 'string'">
+            <span v-if="item.label.includes('*')">
+              <span style="color: #f56c6c"> * </span>
+              {{ item.label.replace("*", "") }}
+            </span>
+            <span v-else>{{ item.label }}</span>
+          </span>
+        </template>
         <!-- 输入框 -->
         <template v-if="item.type === 'input'">
           <el-input
diff --git a/src/components/myMars.vue b/src/components/myMars.vue
index 187fca3..fba118b 100644
--- a/src/components/myMars.vue
+++ b/src/components/myMars.vue
@@ -13,6 +13,7 @@
 <script>
 "use script";
 import moment from "moment";
+import { Homeview } from "@/api/home.js";
 export default {
   name: "myMars",
   props: {
@@ -25,7 +26,9 @@ export default {
     return {
       inputs: "",
       checkInterval: null,
-      time: null
+      time: null,
+      matchedNames: [],
+      historyData: {}
     };
   },
   components: {},
@@ -33,9 +36,11 @@ export default {
     historyList: {
       handler(val) {
         let value = JSON.parse(JSON.stringify(val));
+        console.log(value, "value");
         if (value) {
-          this.startCheckTimer(value);
+          this.startCheckTimer(value[1]);
         }
+        this.historyData = value;
       },
       deep: true,
       immediate: true
@@ -102,15 +107,14 @@ export default {
       let newMapList = (mapList = mapList.filter(
         (item) => Number(item.lon) !== 0 && Number(item.lat) !== 0
       ));
-      console.log(newMapList, "newMapList");
-      if (newMapList.length === 0) {
-        this.clearDraw();
-        this.$message({
-          message: "暂无数据",
-          type: "warning"
-        });
-        return;
-      }
+      // if (newMapList.length === 0) {
+      //   this.clearDraw();
+      //   this.$message({
+      //     message: "暂无数据",
+      //     type: "warning"
+      //   });
+      //   return;
+      // }
       // eslint-disable-next-line no-undef
       const property = new Cesium.SampledPositionProperty();
       // eslint-disable-next-line no-undef
@@ -252,10 +256,85 @@ export default {
         });
         this.graphicLayer.addGraphic(app_pathEntity);
       }
+
+      Homeview().then((res) => {
+        console.log(res.data.positions, "res.data.positions");
+        this.matchedNames = res.data.positions.filter((m) =>
+          this.historyData[0].positionId.includes(m.id)
+        );
+        console.log(this.matchedNames, "this.matchedNames");
+        if (this.matchedNames.length > 0) {
+          let item = this.matchedNames[0];
+          let graphiczhendi = this.mapMars.getLayerById("zhendi");
+          if (!graphiczhendi) {
+            graphiczhendi = new mars3d.layer.GeoJsonLayer({
+              id: "zhendi",
+              name: "zhendi",
+              data: {
+                type: "FeatureCollection",
+                features: [
+                  {
+                    type: "Feature",
+                    properties: {},
+                    geometry: JSON.parse(item.regionJson)
+                  }
+                ]
+              },
+              symbol: {
+                styleOptions: {
+                  fill: true,
+                  color: "#3388cc",
+                  opacity: 0.5,
+                  outline: true,
+                  outlineStyle: {
+                    width: 2,
+                    opacity: 0.1
+                  }
+                }
+              }
+            });
+            this.mapMars.addLayer(graphiczhendi);
+          }
+          item.devices.forEach((deviceItem) => {
+            // 设备
+            let graphic = this.graphicLayer.getGraphicById(
+              deviceItem.id + "shebei"
+            );
+            if (!graphic) {
+              graphic = new mars3d.graphic.BillboardEntity({
+                id: deviceItem.id + "shebei",
+                name: "设备",
+                position: new mars3d.LngLatPoint(
+                  deviceItem.lon,
+                  deviceItem.lat,
+                  0
+                ),
+                style: {
+                  image: require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`),
+                  scale: 1,
+                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                  clampToGround: true,
+                  scaleByDistance: true,
+                  scaleByDistance_near: 100,
+                  scaleByDistance_nearValue: 0.5
+                }
+              });
+              console.log(graphic, "graphic");
+              this.graphicLayer.addGraphic(graphic);
+            }
+          });
+        }
+      });
     },
     clearDraw() {
-      if (this.graphics) {
-        this.mapMars.removeLayer(this.graphics);
+      // if (this.graphics) {
+      //   this.mapMars.removeLayer(this.graphics);
+      // }
+      let graphiczhendi = this.mapMars.getLayerById("zhendi");
+      console.log(graphiczhendi, "layer");
+      if (graphiczhendi !== undefined) {
+        this.mapMars.removeLayer(graphiczhendi);
       }
       if (this.graphicLayer) {
         this.graphicLayer.clear();
diff --git a/src/components/myTable.vue b/src/components/myTable.vue
index a900290..95d52af 100644
--- a/src/components/myTable.vue
+++ b/src/components/myTable.vue
@@ -11,6 +11,8 @@
       :border="border"
       @selection-change="handleSelectionChange"
     >
+      <el-table-column label="序号" type="index" align="center" width="50">
+      </el-table-column>
       <el-table-column type="expand" v-if="isShowExpand">
         <template slot-scope="scope">
           <slot name="expand" :rowData="scope"></slot>
diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue
index 52e44e6..1e38aad 100644
--- a/src/views/contentData/LeftSidebar/index.vue
+++ b/src/views/contentData/LeftSidebar/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="left-sidebar" :class="{ contracted: isContracted }">
+    <div class="alarm-border warningAnimatBox" v-if="iswarning"></div>
     <div class="stats">
       <div class="stat-item" v-for="(item, index) in warningDay" :key="index">
         <div class="stat-name">{{ item.name }}</div>
@@ -309,6 +310,28 @@ export default {
 .left-sidebar.contracted {
   transform: translateX(-90%);
 }
+.alarm-border {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid transparent;
+  pointer-events: none; /* Prevent interaction with the border */
+  z-index: 9999; /* Ensure it appears above other elements */
+  &.warningAnimatBox {
+    animation: greenanimated-shadow 2s infinite;
+  }
+}
+@keyframes greenanimated-shadow {
+  0% {
+    box-shadow: 0 0 0 0 #ff0000 inset;
+  }
+
+  85% {
+    box-shadow: 0px 0px 100px 0px #ff0000 inset;
+  }
+}
 .audio-prompt {
   position: fixed;
   top: 0;
diff --git a/src/views/contentData/index.js b/src/views/contentData/index.js
index d5ae497..4a50fef 100644
--- a/src/views/contentData/index.js
+++ b/src/views/contentData/index.js
@@ -318,21 +318,21 @@ function bindLayerPopup(graphicLayer, graphic) {
           }" /></div>
           <div class="device-type">
             <div class="txt">
-              <p class="p1">经度</p>
-              <p class="p2">${attr.lon}</p>
-            </div>
-            <div class="txt">
-              <p class="p1">IP</p>
-              <p class="p2">${attr.ip}</p>
-            </div>
-            <div class="txt">
-              <p class="p1">纬度</p>
-              <p class="p2">${attr.lat}</p>
+              <p class="p1">序列号</p>
+              <p class="p2">${attr.deviceSN}</p>
             </div>
             <div class="txt">
               <p class="p1">状态</p>
               <p class="p2">${attr.isOnline ? "在线" : "离线"}</p>
             </div>
+            <div class="txt">
+              <p class="p1">位置</p>
+              <p class="p2">${attr.lon}</p>
+            </div>
+            <div class="txt">
+              <p class="p1">纬度</p>
+              <p class="p2">${attr.lat}</p>
+            </div>
           </div>
         </div>
       `,
diff --git a/src/views/index.vue b/src/views/index.vue
index f97580c..e5d0014 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -34,6 +34,26 @@ export default {
     this.timeInterval = setInterval(() => {
       this.initHomeData();
     }, 2000);
+    // setInterval(() => {
+    //   this.signaData = [
+    //     {
+    //       serial_number: "123456",
+    //       times: "2023-01-01 00:00:00",
+    //       DeviceName: "无人机1",
+    //       freq: "24GHz",
+    //       device_type: "无人机",
+    //       drone_lat: 39.9042,
+    //       drone_lon: 116.4074,
+    //       height: 100,
+    //       speed: 10,
+    //       heading: 90,
+    //       battery: 80,
+    //       online: true,
+    //       BatchId: "123456",
+    //       alarmLevel: 1
+    //     }
+    //   ];
+    // }, 1000);
   },
   methods: {
     initHomeData() {
diff --git a/src/views/menuData/AlertDialog.vue b/src/views/menuData/AlertDialog.vue
index 3400540..faf2b1e 100644
--- a/src/views/menuData/AlertDialog.vue
+++ b/src/views/menuData/AlertDialog.vue
@@ -154,21 +154,21 @@ export default {
           prop: "duration",
           align: "center"
         },
-        {
-          label: "机型",
-          prop: "model",
-          align: "center"
-        },
+        // {
+        //   label: "机型",
+        //   prop: "model",
+        //   align: "center"
+        // },
         {
           label: "SN码",
           prop: "sn",
           align: "center"
         },
-        {
-          label: "频段",
-          prop: "frequency",
-          align: "center"
-        },
+        // {
+        //   label: "频段",
+        //   prop: "frequency",
+        //   align: "center"
+        // },
         {
           label: "开始时间",
           prop: "startTime",
@@ -270,7 +270,7 @@ export default {
       }
       console.log(value);
     },
-    // 停用 编辑 删除
+    // 轨迹回放
     handleClick(value, type) {
       let params = { batchid: value.batchId };
       if (type === "playback") {
@@ -278,51 +278,7 @@ export default {
         alarmDetail(params).then((res) => {
           if (res.code === 0) {
             console.log(res.data, "res.data");
-            this.historyList = res.data;
-            // this.historyList = [
-            //   {
-            //     lon: 109.056198,
-            //     lat: 38.674443,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:21",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.081454,
-            //     lat: 38.664766,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:22",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.101687,
-            //     lat: 38.632524,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:25",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.063063,
-            //     lat: 38.622878,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:30",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.016034,
-            //     lat: 38.635138,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:35",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 108.991419,
-            //     lat: 38.659515,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:38",
-            //     alarmLevel: 0
-            //   }
-            // ];
+            this.historyList = [value, res.data];
           }
         });
         this.title = "轨迹回放";
diff --git a/src/views/menuData/DeviceDialog.vue b/src/views/menuData/DeviceDialog.vue
index 2ce18ab..7d0871c 100644
--- a/src/views/menuData/DeviceDialog.vue
+++ b/src/views/menuData/DeviceDialog.vue
@@ -144,7 +144,7 @@ export default {
           ]
         },
         {
-          label: "icon",
+          label: "设备类型",
           type: "selectImg",
           model: "icon",
           options: [
@@ -219,11 +219,11 @@ export default {
           model: "ip",
           rules: [{ required: true, message: "请输入设备名称" }]
         },
-        {
-          label: "机型",
-          type: "input",
-          model: "model"
-        },
+        // {
+        //   label: "机型",
+        //   type: "input",
+        //   model: "model"
+        // },
         {
           label: "账号",
           type: "input",
@@ -270,16 +270,21 @@ export default {
           label: "设备SN",
           prop: "deviceSN"
         },
-        {
-          type: "text",
-          label: "ip",
-          prop: "ip"
-        },
+        // {
+        //   type: "text",
+        //   label: "ip",
+        //   prop: "ip"
+        // },
         {
           type: "text",
           label: "关联防区",
           prop: "positionName"
         },
+        {
+          type: "text",
+          label: "设备状态",
+          prop: "online"
+        },
         {
           type: "text",
           label: "安装地址",
@@ -462,7 +467,10 @@ export default {
         params.pageSize = this.paginationParam.size;
         deviceList(params).then((res) => {
           if (res.code === 0) {
-            this.tableData = res.data.items;
+            this.tableData = res.data.items.map((item) => {
+              item.online = item.online === true ? "在线" : "离线";
+              return item;
+            });
             this.paginationParam.total = res.data.total;
           }
         });
diff --git a/src/views/menuData/PositionDialog.vue b/src/views/menuData/PositionDialog.vue
index 08784cf..86c0919 100644
--- a/src/views/menuData/PositionDialog.vue
+++ b/src/views/menuData/PositionDialog.vue
@@ -123,7 +123,7 @@ export default {
           model: "address"
         },
         {
-          label: "防区",
+          label: "* 防区",
           type: "marsMapmap",
           model: "polygon"
         },
diff --git a/src/views/menuData/WhitListDialog.vue b/src/views/menuData/WhitListDialog.vue
index 418a4aa..dea670e 100644
--- a/src/views/menuData/WhitListDialog.vue
+++ b/src/views/menuData/WhitListDialog.vue
@@ -55,6 +55,9 @@
             删除
           </el-link>
         </template>
+        <template #mark="{ data }">
+          {{ data.mark }}
+        </template>
       </my-table>
     </div>
     <el-drawer
@@ -106,18 +109,48 @@ export default {
       coloumData: [
         {
           type: "text",
-          label: "sn",
+          label: "型号",
+          prop: "model"
+        },
+        {
+          type: "text",
+          label: "序列号",
           prop: "sn"
         },
         {
           type: "text",
-          label: "是否全天",
-          prop: "allDay"
+          label: "开放防区",
+          prop: "positionName"
         },
         {
-          slot: "whitTime",
-          label: "白名单生效的起止日期"
+          type: "text",
+          label: "开始时间",
+          prop: "startTime"
         },
+        {
+          type: "text",
+          label: "结束时间",
+          prop: "endTime"
+        },
+        {
+          type: "text",
+          label: "创建时间",
+          prop: "createTime"
+        },
+        {
+          type: "text",
+          label: "创建人",
+          prop: "createBy"
+        },
+        // {
+        //   type: "text",
+        //   label: "是否全天",
+        //   prop: "allDay"
+        // },
+        // {
+        //   slot: "whitTime",
+        //   label: "白名单生效的起止日期"
+        // },
         {
           type: "text",
           label: "状态",
@@ -125,9 +158,11 @@ export default {
         },
         {
           slot: "operate",
-          label: "操作",
-          width: 250,
-          fixed: "right"
+          label: "操作"
+        },
+        {
+          slot: "mark",
+          label: "备注"
         }
       ],
       paginationParam: {
@@ -149,17 +184,24 @@ export default {
           model: "model",
           rules: [{ required: true, message: "请输入机型" }]
         },
+        // {
+        //   label: "是否全天",
+        //   type: "select",
+        //   model: "allDay",
+        //   options: [
+        //     { label: "是", key: "0" },
+        //     { label: "否", key: "1" }
+        //   ],
+        //   rules: [
+        //     { required: true, message: "请选择是否全天", trigger: "change" }
+        //   ]
+        // },
         {
-          label: "是否全天",
-          type: "select",
-          model: "allDay",
-          options: [
-            { label: "是", key: "0" },
-            { label: "否", key: "1" }
-          ],
-          rules: [
-            { required: true, message: "请选择是否全天", trigger: "change" }
-          ]
+          label: "时间日期",
+          type: "datetimerange",
+          model: "date",
+          format: "yyyy-MM-dd HH:mm:ss",
+          rules: [{ required: true, message: "请选择时间日期" }]
         },
         {
           label: "关联防区",
@@ -175,7 +217,8 @@ export default {
         {
           label: "所属单位",
           type: "input",
-          model: "company"
+          model: "company",
+          rules: [{ required: true, message: "请输入所属单位" }]
         },
         {
           label: "备注",
@@ -184,12 +227,6 @@ export default {
           rowsHeight: 15,
           placeholder: "请输入内容",
           model: "mark"
-        },
-        {
-          label: "时间日期",
-          type: "datetimerange",
-          model: "date",
-          format: "yyyy-MM-dd HH:mm:ss"
         }
       ],
       drawer: false,
@@ -251,6 +288,7 @@ export default {
       let params = {};
       if (type === "search") {
         params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
+        this.initPosition();
         if (params.dateRange) {
           params.startTime = params.dateRange[0];
           params.endTime = params.dateRange[1];
@@ -265,18 +303,43 @@ export default {
         whitListList(params).then((res) => {
           if (res.code === 0) {
             this.tableData = res.data.items.map((item) => {
-              let status = "未启用";
+              let status = "待生效";
+
               if (item.allDay) {
-                status = "启用中";
+                // 全天候直接生效
+                status = "生效中";
               } else {
                 const now = new Date();
-                const endTime = new Date(item.endTime);
-                status = endTime > now ? "启用中" : "未启用";
+                const startTime = item.startTime
+                  ? new Date(item.startTime)
+                  : null;
+                const endTime = item.endTime ? new Date(item.endTime) : null;
+
+                if (startTime && endTime) {
+                  if (now < startTime) {
+                    status = "待生效";
+                  } else if (now >= startTime && now <= endTime) {
+                    status = "生效中";
+                  } else if (now > endTime) {
+                    status = "失效";
+                  }
+                }
               }
+
+              // 匹配 positionName
+              let matchedNames = [];
+              if (item.positionIds && item.positionIds.length > 0) {
+                matchedNames = this.PositionList.filter((m) =>
+                  item.positionIds.includes(m.id)
+                ).map((m) => m.name);
+              }
+
               return {
                 ...item,
                 allDay: item.allDay ? "是" : "否",
-                status
+                status,
+                positionName:
+                  matchedNames.length > 0 ? matchedNames.join("、") : ""
               };
             });
 
@@ -288,7 +351,7 @@ export default {
         this.title = "新增白名单";
         this.initPosition();
         this.fromItem = {};
-        this.formDrawerList = this.getDefaultFormDrawerList();
+        // this.formDrawerList = this.getDefaultFormDrawerList();
         this.isEditFlag = false;
         this.drawer = true;
       }
@@ -305,20 +368,22 @@ export default {
       // params.positionName = position ? position.name : "";
 
       // 处理 allDay 和时间
-      if (params.allDay === "0") {
-        params.allDay = true;
+      // if (params.allDay === "0") {
+      //   params.allDay = true;
+      //   params.startTime = "";
+      //   params.endTime = "";
+      // } else {
+      //   params.allDay = false;
+      if (Array.isArray(params.date) && params.date.length === 2) {
+        params.startTime = params.date[0];
+        params.endTime = params.date[1];
+      } else {
         params.startTime = "";
         params.endTime = "";
-      } else {
-        params.allDay = false;
-        if (Array.isArray(params.date) && params.date.length === 2) {
-          params.startTime = params.date[0];
-          params.endTime = params.date[1];
-        } else {
-          params.startTime = "";
-          params.endTime = "";
-        }
       }
+      // }
+      params.allDay = false;
+      params.createBy = localStorage.getItem("userName");
       delete params.date; // 移除 date 字段
       const apiCall = this.isType === "add" ? whitListAdd : whitListUpdate;
       apiCall(params)
@@ -350,9 +415,10 @@ export default {
         this.isEditFlag = false;
         this.fromItem = JSON.parse(JSON.stringify(value));
         this.fromItem.positionId = this.fromItem.positionIds;
-        this.formDrawerList = this.getDefaultFormDrawerList();
-        this.fromItem.allDay = this.fromItem.allDay ? "0" : "1";
-        this.changeSelect(this.fromItem.allDay); // 根据 allDay 调整时间日期字段
+        // this.formDrawerList = this.getDefaultFormDrawerList();
+        // this.fromItem.allDay = this.fromItem.allDay ? "0" : "1";
+        this.fromItem.date = [this.fromItem.startTime, this.fromItem.endTime];
+        // this.changeSelect(this.fromItem.allDay); // 根据 allDay 调整时间日期字段
         this.initPosition();
         this.drawer = true;
       } else if (type === "delete") {
@@ -398,64 +464,6 @@ export default {
     },
     handleSelectionChange(value) {
       console.log(value);
-    }, // 初始化 formDrawerList 的公共方法
-    getDefaultFormDrawerList() {
-      return [
-        {
-          label: "sn",
-          type: "input",
-          model: "sn",
-          rules: [{ required: true, message: "请输入sn" }]
-        },
-        {
-          label: "机型",
-          type: "input",
-          model: "model",
-          rules: [{ required: true, message: "请输入机型" }]
-        },
-        {
-          label: "是否全天",
-          type: "select",
-          model: "allDay",
-          options: [
-            { label: "是", key: "0" },
-            { label: "否", key: "1" }
-          ],
-          rules: [
-            { required: true, message: "请选择是否全天", trigger: "change" }
-          ]
-        },
-        {
-          label: "关联防区",
-          type: "select",
-          model: "positionId",
-          options: [],
-          disabled: false,
-          multiple: true,
-          rules: [
-            { required: true, message: "请选择关联防区", trigger: "change" }
-          ]
-        },
-        {
-          label: "所属单位",
-          type: "input",
-          model: "company"
-        },
-        {
-          label: "备注",
-          type: "textarea",
-          maxLenght: 100,
-          rowsHeight: 15,
-          placeholder: "请输入内容",
-          model: "mark"
-        },
-        {
-          label: "时间日期",
-          type: "datetimerange",
-          model: "date",
-          format: "yyyy-MM-dd HH:mm:ss"
-        }
-      ];
     }
   }
 };