左侧更改

This commit is contained in:
zengmingjie 2025-06-18 23:08:37 +08:00
parent 938fca0e2c
commit f8fe6814d9
12 changed files with 414 additions and 141 deletions

View File

@ -85,16 +85,14 @@ body {
padding: 0;
margin: 0;
.header-left {
width: 20%;
height: 35px;
margin-left: 41px;
margin-top: 13px;
.header-logo {
width: 290px;
height: 100%;
background: url(../img/logo.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
line-height: 35px;
color: #fff;
letter-spacing: 2px;
span {
margin-left: 3%;
}
}
.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%;
height: 280px;
width: 100%;
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%;
height: 50%;
width: 45%;
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%;
height: calc(100% - 280px);
width: 100%;
height: calc(100% - 200px);
margin-top: 25px;
.title {
width: 100%;
@ -281,53 +280,216 @@ body {
overflow: auto;
margin-top: 10px;
li {
width: 100%;
height: 83px;
width: 90%;
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%;
display: flex;
align-items: center;
margin-top: 5px;
.left {
width: 20px;
height: 20px;
background: url(../img/index.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
text-align: center;
line-height: 20px;
font-size: 10px;
color: #fff;
}
.text {
width: calc(100% - 20px);
height: 100%;
margin-left: 10px;
font-size: 14px;
font-weight: 400;
color: #d1f2ff;
text-align: left;
line-height: 20px;
}
}
.main {
width: calc(100% - 30px);
height: 65%;
margin-left: 30px;
.top_main {
width: 100%;
height: 100%;
.top {
width: 98%;
height: 50%;
display: flex;
align-items: center;
color: #fff;
font-size: 12px;
font-weight: 400;
text-align: left;
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: 60%;
transform: translateY(-50%);
line-height: 20px;
}
.text {
width: 50%;
width: 68%;
height: 100%;
margin-left: 15%;
font-size: 16px;
font-weight: 400;
text-align: left;
line-height: 35px;
}
}
.main {
width: calc(100% - 30px);
height: 50%;
margin-left: 20px;
.top_main {
width: 100%;
height: 100%;
display: flex;
align-items: center;
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;
}
}
}
}
}
}

BIN
src/assets/img/Vector.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 971 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 118 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 862 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -9,23 +9,22 @@ const routes = [
name: "home",
component: index,
beforeEnter: (to, from, next) => {
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
// }
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
}
}
},
{

View File

@ -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="top">
<div class="left">
{{ index < 9 ? "0" + (index + 1) : index + 1 }}
<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">
<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 class="text">{{ drone.serial_number }}</div>
</div>
<div class="main">
<div class="top_main">
<div class="text">时间{{ drone.times }}</div>
<div class="text">来源{{ drone.DeviceName }}</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="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 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>
</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({

View File

@ -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"

View File

@ -71,31 +71,30 @@ export default {
}
},
loginClick() {
this.$router.push("/"); // Vue 2 使 this.$router
// let params = {};
// params.username = this.state.username;
// localStorage.setItem("userName", params.username);
// params.password = this.state.password;
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); //
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
// Vue 2 Pinia
// this.$router.push("/"); // Vue 2 使 this.$router
// } else {
// this.state.password = this.state.password;
// this.$message.error(res.msg);
// }
// });
// }
this.$router.push("/"); // Vue 2 使 this.$router
} else {
this.state.password = this.state.password;
this.$message.error(res.msg);
}
});
}
}
}
};