左侧更改

src/assets/css/index.scss

@@ -85,16 +85,14 @@ body {
       padding: 0;
       margin: 0;
       .header-left {
+        width: 20%;
         height: 35px;
-        margin-left: 41px;
         margin-top: 13px;
-        .header-logo {
+        line-height: 35px;
-          width: 290px;
+        color: #fff;
-          height: 100%;
+        letter-spacing: 2px;
-          background: url(../img/logo.png);
+        span {
-          background-size: 100% 100%;
+          margin-left: 3%;
-          background-repeat: no-repeat;
-          background-position: center;
         }
       }
       .header-main {
@@ -232,42 +230,43 @@ body {
       pointer-events: auto;
       padding: 0;
       margin: 0;
-      background: url(../img/botom-left.png);
-      background-size: 100% 105%;
-      background-repeat: no-repeat;
-      background-position: center;
       padding: 0 40px;
       .stats {
-        width: 80%;
+        width: 100%;
-        height: 280px;
+        height: 100px;
         margin-top: 15%;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-around;
-        color: #fff;
+        color: #0144ef;
         font-size: 20px;
         font-weight: 600;
         .stat-item {
-          width: 50%;
+          width: 45%;
-          height: 50%;
+          height: 100%;
           background: url(../img/bottom-waring.png);
           background-size: 100% 100%;
           background-repeat: no-repeat;
           background-position: center;
           // 禁止换行
           white-space: nowrap;
+          margin-left: 2%;
+          margin-right: 3%;
           .stat-name {
             width: 100%;
             height: 50%;
-            line-height: 70px;
+            line-height: 42px;
             text-align: center;
+            span {
+              font-size: 3vw;
+            }
           }
         }
       }
       .drone-list {
-        width: 80%;
+        width: 100%;
-        height: calc(100% - 280px);
+        height: calc(100% - 200px);
         margin-top: 25px;
         .title {
           width: 100%;
@@ -281,15 +280,26 @@ body {
           overflow: auto;
           margin-top: 10px;
           li {
-            width: 100%;
+            width: 90%;
-            height: 83px;
+            height: 60px;
             border-bottom: 1px dashed #ccc;
-            .top {
+            background: url(../img/uavBackfff.png);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-position: center;
+            padding: 5px;
+            color: #0144ef;
+            margin-left: 2%;
+            .details-one {
               width: 100%;
-              height: 30%;
+              height: 100%;
+              .top {
+                width: 98%;
+                height: 50%;
                 display: flex;
-              align-items: center;
+                align-items: baseline;
-              margin-top: 5px;
+                margin-left: 5%;
+                position: relative;
                 .left {
                   width: 20px;
                   height: 20px;
@@ -298,36 +308,188 @@ body {
                   background-repeat: no-repeat;
                   background-position: center;
                   text-align: center;
-                line-height: 20px;
                   font-size: 10px;
-                color: #fff;
+                  position: absolute;
+                  top: 60%;
+                  transform: translateY(-50%);
+                  line-height: 20px;
                 }
                 .text {
-                width: calc(100% - 20px);
+                  width: 68%;
                   height: 100%;
-                margin-left: 10px;
+                  margin-left: 15%;
-                font-size: 14px;
+                  font-size: 16px;
                   font-weight: 400;
-                color: #d1f2ff;
                   text-align: left;
-                line-height: 20px;
+                  line-height: 35px;
                 }
               }
               .main {
                 width: calc(100% - 30px);
-              height: 65%;
+                height: 50%;
-              margin-left: 30px;
+                margin-left: 20px;
                 .top_main {
                   width: 100%;
-                height: 50%;
+                  height: 100%;
                   display: flex;
                   align-items: center;
-                color: #fff;
-                font-size: 12px;
                   font-weight: 400;
                   text-align: left;
                   .text {
                     width: 50%;
+                    .color-ef {
+                      color: #0144ef;
+                      font-size: 14px;
+                    }
+                    .text-fff {
+                      color: #000;
+                      font-size: 12px;
+                    }
+                  }
+                }
+              }
+            }
+            .details-all {
+              width: 100%;
+              height: 100%;
+              .top {
+                width: 98%;
+                height: 10%;
+                display: flex;
+                align-items: baseline;
+                margin-left: 5%;
+                position: relative;
+                .left {
+                  width: 20px;
+                  height: 20px;
+                  background: url(../img/index.png);
+                  background-size: 100% 100%;
+                  background-repeat: no-repeat;
+                  background-position: center;
+                  text-align: center;
+                  font-size: 10px;
+                  position: absolute;
+                  top: 55%;
+                  transform: translateY(-50%);
+                  line-height: 20px;
+                }
+                .text {
+                  width: 68%;
+                  height: 100%;
+                  margin-left: 15%;
+                  font-size: 16px;
+                  font-weight: 400;
+                  text-align: left;
+                  line-height: 35px;
+                }
+              }
+              .content-main {
+                width: calc(100% - 20px);
+                height: 92%;
+                margin-left: 20px;
+                .color-ef {
+                  color: #0144ef;
+                  font-size: 14px;
+                }
+                .text-fff {
+                  color: #000;
+                  font-size: 12px;
+                }
+                .content-top {
+                  width: calc(100% - 10px);
+                  height: 8%;
+                  display: flex;
+                  align-items: center;
+                  font-weight: 400;
+                  text-align: left;
+                  .top-left {
+                    width: 50%;
+                  }
+                  .top-right {
+                    width: 50%;
+                  }
+                }
+                .content-serial {
+                  width: 100%;
+                  height: 8%;
+                  text-align: left;
+                  .text-fff {
+                    // 超出隐藏
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                  .color-ef-fw {
+                    color: #0144ef;
+                    font-size: 14px;
+                    font-weight: 600;
+                  }
+                  .content-potions {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    p {
+                      padding: 0;
+                      margin: 0;
+                    }
+                    .content-potions-lon {
+                      width: 100%;
+                      display: flex;
+                      flex-wrap: wrap;
+                      align-items: center;
+                      .text {
+                        width: 100%;
+                        font-size: 14px;
+                      }
+                      .characters {
+                        width: 100%;
+                        font-size: 14px;
+                        color: #000;
+                      }
+                    }
+                    .content-potions-bottom {
+                      width: 100%;
+                      display: flex;
+                      text-align: left;
+                      align-items: center;
+                      .content-text {
+                        width: 30%;
+                        display: flex;
+                        flex-wrap: wrap;
+                        text-align: left;
+                        align-items: center;
+                        .text {
+                          width: 100%;
+                          font-size: 14px;
+                        }
+                        .characters {
+                          width: 100%;
+                          font-size: 14px;
+                          color: #000;
+                        }
+                      }
+                    }
+                    .content-text1 {
+                      width: 50%;
+                      height: 100%;
+                      display: flex;
+                      flex-wrap: wrap;
+                      text-align: left;
+                      p {
+                        padding: 0;
+                        margin: 0;
+                      }
+                      .text {
+                        width: 100%;
+                        font-size: 14px;
+                      }
+                      .characters {
+                        width: 100%;
+                        font-size: 14px;
+                      }
+                    }
+                  }
                 }
               }
             }

src/assets/img/uavBackfff-big.svg

@@ -0,0 +1,18 @@
+<svg width="260" height="350" viewBox="0 0 260 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_218_536)">
+<path d="M10 18C10 13.5817 13.5817 10 18 10H242C246.418 10 250 13.5817 250 18V332C250 336.418 246.418 340 242 340H18C13.5817 340 10 336.418 10 332V18Z" fill="white"/>
+<path d="M18 11H242C245.866 11 249 14.134 249 18V332C249 335.866 245.866 339 242 339H18C14.134 339 11 335.866 11 332V18C11 14.134 14.134 11 18 11Z" stroke="#0144EF" stroke-width="2"/>
+</g>
+<defs>
+<filter id="filter0_d_218_536" x="0" y="0" width="260" height="350" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00392157 0 0 0 0 0.266667 0 0 0 0 0.937255 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_218_536"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_218_536" result="shape"/>
+</filter>
+</defs>
+</svg>

src/router/index.js

@@ -9,23 +9,22 @@ const routes = [
     name: "home",
     component: index,
     beforeEnter: (to, from, next) => {
+      const expires = localStorage.getItem("expires");
+      const expiresTimestamp = new Date(expires).getTime();
+      const now = new Date().getTime();
+      if (expiresTimestamp && now > expiresTimestamp) {
+        // 登录已过期，执行自动退出操作
+        localStorage.removeItem("setToken");
+        localStorage.removeItem("expires");
+        next("/login");
+      }
+      const token = localStorage.getItem("setToken");
+      // 在导航到/dashboard路由之前执行的操作
+      if (!token) {
+        next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面
+      } else {
         next(); // 继续导航到/dashboard
-      // const expires = localStorage.getItem("expires");
+      }
-      // const expiresTimestamp = new Date(expires).getTime();
-      // const now = new Date().getTime();
-      // if (expiresTimestamp && now > expiresTimestamp) {
-      //   // 登录已过期，执行自动退出操作
-      //   localStorage.removeItem("setToken");
-      //   localStorage.removeItem("expires");
-      //   next("/login");
-      // }
-      // const token = localStorage.getItem("setToken");
-      // // 在导航到/dashboard路由之前执行的操作
-      // if (!token) {
-      //   next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面
-      // } else {
-      //   next(); // 继续导航到/dashboard
-      // }
     }
   },
   {

src/views/contentData/LeftSidebar/index.vue

@@ -3,48 +3,132 @@
     <div class="stats">
       <div class="stat-item" v-for="(item, index) in warningDay" :key="index">
         <div class="stat-name">{{ item.name }}</div>
-        <div class="stat-name">{{ item.value }} 次</div>
+        <div class="stat-name">
+          <span>{{ item.value }}</span> 次
+        </div>
       </div>
     </div>
     <div class="drone-list">
-      <div class="title">
-        <img src="@/assets/img/uavTitle.png" alt="" />
-      </div>
       <ul>
         <li
           v-for="(drone, index) in drones"
           :key="index"
           @click="handleDroneClick(drone)"
+          :style="{
+            height: drone.detailsShow ? '60px' : '330px',
+            backgroundImage: drone.detailsShow
+              ? `url(${require('@/assets/img/uavBackfff.png')})`
+              : `url(${require('@/assets/img/uavBackfff-big.png')})`,
+            padding: 0
+          }"
         >
+          <div class="details-one" v-if="drone.detailsShow">
             <div class="top">
               <div class="left">
                 {{ index < 9 ? "0" + (index + 1) : index + 1 }}
               </div>
               <div class="text">{{ drone.serial_number }}</div>
+              <div class="img-vector">
+                <img src="@/assets/img/Vector.png" alt="" />
+              </div>
             </div>
             <div class="main">
               <div class="top_main">
-              <div class="text">时间：{{ drone.times }}</div>
+                <div class="text">
-              <div class="text">来源：{{ drone.DeviceName }}</div>
+                  <span class="color-ef">距离：</span>
+                  <span class="text-fff">{{ drone.currTime || 0 }}米</span>
+                </div>
+                <div class="text">
+                  <span class="color-ef">高度：</span>
+                  <span class="text-fff">{{ drone.height }}米</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="details-all" v-else>
+            <div class="top">
+              <div class="left">
+                {{ index < 9 ? "0" + (index + 1) : index + 1 }}
+              </div>
+              <div class="text">{{ drone.serial_number }}</div>
+              <div class="img-vector">
+                <img src="@/assets/img/Vector.png" alt="" />
+              </div>
+            </div>
+            <div class="content-main">
+              <div class="content-top">
+                <div class="top-left">
+                  <span class="color-ef"> 距离：</span>
+                  <span class="text-fff">{{ drone.currTime || 0 }}米</span>
+                </div>
+                <div class="top-right">
+                  <span class="color-ef"> 高度：</span>
+                  <span class="text-fff">{{ drone.height || 0 }}米</span>
+                </div>
+              </div>
+              <div class="content-serial">
+                <span class="color-ef"> 序列号：</span>
+                <span class="text-fff">11VJF4D00201LE</span>
+              </div>
+              <div class="content-serial">
+                <span class="color-ef"> 型号：</span>
+                <span class="text-fff">DJI Air 2S</span>
+              </div>
+              <div class="content-serial">
+                <span class="color-ef"> 更新时间：</span>
+                <span class="text-fff">2025.6.15 21:12:43</span>
+              </div>
+              <div class="content-serial">
+                <span class="color-ef-fw">无人机方位</span>
+              </div>
+              <div class="content-serial" style="height: 25%">
+                <div class="content-potions">
+                  <div class="content-potions-lon">
+                    <p class="text">经纬度：</p>
+                    <p class="characters">
+                      {{ drone.drone_lon }}, {{ drone.drone_lat }}
+                    </p>
+                  </div>
+                  <div class="content-potions-bottom">
+                    <div class="content-text content-potions-lat">
+                      <p class="text">高度：</p>
+                      <p class="characters">{{ drone.height || 0 }}M</p>
+                    </div>
+                    <div class="content-text content-potions-speed">
+                      <p class="text">速度：</p>
+                      <p class="characters">{{ drone.height }}M/h</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="content-serial">
+                <span class="color-ef-fw">飞手方位</span>
+              </div>
+              <div class="content-serial" style="height: 25%">
+                <div class="content-potions">
+                  <div class="content-text1 content-potions-lon">
+                    <p class="text">经纬度</p>
+                    <p class="characters">
+                      {{ drone.drone_lon }}, {{ drone.drone_lat }}
+                    </p>
+                  </div>
+                  <div class="content-text1 content-potions-lat">
+                    <p class="text">高度</p>
+                    <p class="characters">{{ drone.height || 0 }}m</p>
+                  </div>
+                </div>
+              </div>
+              <div class="content-serial">
+                <div class="btns">
+                  <div class="btn-trust"></div>
+                  <div class="btn-navigation"></div>
+                </div>
               </div>
-            <div class="top_main">
-              <div class="text">频段：{{ drone.freq }}</div>
-              <el-tooltip
-                class="item"
-                effect="dark"
-                :content="drone.device_type"
-                placement="top"
-              >
-                <div class="text">型号：{{ drone.device_type }}</div>
-              </el-tooltip>
             </div>
           </div>
         </li>
       </ul>
     </div>
-    <div class="left-contract" @click="handleContractClick">
-      <img :src="isContracted ? rightContract : leftContract" alt="" />
-    </div>
     <audio
       controls
       loop
@@ -91,19 +175,26 @@ export default {
           id: "2",
           name: "累计预警",
           value: 20
-        },
-        {
-          id: "3",
-          name: "今日反制",
-          value: 0
-        },
-        {
-          id: "4",
-          name: "累计反制",
-          value: 0
         }
       ],
-      drones: [],
+      drones: [
+        {
+          id: "1",
+          serial_number: "123456789",
+          DeviceName: "设备名称",
+          freq: "123.456GHz",
+          device_type: "UAV",
+          drone_lat: 30.592852,
+          drone_lon: 104.060059,
+          height: 100,
+          alarmLevel: 1,
+          times: "2021-01-01 12:00:00",
+          BatchId: "123456789",
+          DeviceId: "123456789",
+          currTime: 15,
+          detailsShow: false
+        }
+      ],
       isContracted: false,
       homeView: {},
       droneTimers: new Map(),
@@ -276,6 +367,7 @@ export default {
       this.isContracted = !this.isContracted; // 切换状态
     },
     handleDroneClick(value) {
+      value.detailsShow = !value.detailsShow;
       if (value.drone_lon == 0 || value.drone_lat == 0) {
       } else {
         window.marsMap.setCameraView({

src/views/contentData/headerTop/index.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="header">
     <div class="header-left">
-      <div class="header-logo"></div>
+      <!-- <div class="header-logo"></div> -->
+      <div class="time_date">
+        {{ currentDate }} <span>{{ currentTime }}</span>
+      </div>
     </div>
     <div class="header-main">
       <div class="textTile">
-        <img src="@/assets/img/title.svg" alt="" />
+        <!-- <img src="@/assets/img/title.svg" alt="" /> -->
       </div>
     </div>
-    <div class="header-menu">
+    <!-- <div class="header-menu">
       <div class="menuItem" v-if="isAdmins">
         <div
           class="menuFor"
@@ -73,7 +76,7 @@
         </div>
         <div class="date">{{ currentDate }}</div>
       </div>
-    </div>
+    </div> -->
     <el-dialog
       :title="title"
       :visible.sync="showDialog"

src/views/login/index.vue

@@ -71,31 +71,30 @@ export default {
       }
     },
     loginClick() {
+      let params = {};
+      params.username = this.state.username;
+      localStorage.setItem("userName", params.username);
+      params.password = this.state.password;
+
+      if (!this.state.username || !this.state.password) {
+        return;
+      } else {
+        login(params).then((res) => {
+          if (res.code === 1 && res.data) {
+            localStorage.setItem("setToken", res.data.token);
+            localStorage.setItem("expires", res.data.expires); // 登录到期时间
+            localStorage.setItem("userId", res.data.userid); // 登录id
+            localStorage.setItem("isAdmin", res.data.isAdmin); // 权限
+
+            // 注意：Vue 2 中 Pinia 的用法需要调整
+
             this.$router.push("/"); // Vue 2 中使用 this.$router
-      // let params = {};
+          } else {
-      // params.username = this.state.username;
+            this.state.password = this.state.password;
-      // localStorage.setItem("userName", params.username);
+            this.$message.error(res.msg);
-      // params.password = this.state.password;
+          }
-
+        });
-      // if (!this.state.username || !this.state.password) {
+      }
-      //   return;
-      // } else {
-      //   login(params).then((res) => {
-      //     if (res.code === 1 && res.data) {
-      //       localStorage.setItem("setToken", res.data.token);
-      //       localStorage.setItem("expires", res.data.expires); // 登录到期时间
-      //       localStorage.setItem("userId", res.data.userid); // 登录id
-      //       localStorage.setItem("isAdmin", res.data.isAdmin); // 权限
-
-      //       // 注意：Vue 2 中 Pinia 的用法需要调整
-
-      //       this.$router.push("/"); // Vue 2 中使用 this.$router
-      //     } else {
-      //       this.state.password = this.state.password;
-      //       this.$message.error(res.msg);
-      //     }
-      //   });
-      // }
     }
   }
 };