From b588383f2d3517c84a4c9cc25c2a0bed085db978 Mon Sep 17 00:00:00 2001
From: lsh <lsh@163.com>
Date: 星期四, 04 九月 2025 08:50:55 +0800
Subject: [PATCH] #
---
src/main/webapp/views/index.html | 281 +++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 216 insertions(+), 65 deletions(-)
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index f48ed2f..0ba63d4 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -22,7 +22,75 @@
justify-content: center;
align-items: center;
height: 100vh;
+
+ background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
+ overflow: hidden;
+ position: relative;
}
+ .tech-background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ pointer-events: none;
+ opacity: 0.6;
+ }
+
+ .grid-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image:
+ linear-gradient(rgba(66, 134, 244, 0.08) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(66, 134, 244, 0.08) 1px, transparent 1px);
+ background-size: 40px 40px;
+ perspective: 1000px;
+ transform-style: preserve-3d;
+ transform: perspective(500px) rotateX(60deg);
+ }
+
+ .glow-effect {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background:
+ radial-gradient(circle at 20% 30%, rgba(41, 128, 185, 0.3) 0%, transparent 40%),
+ radial-gradient(circle at 80% 70%, rgba(46, 204, 113, 0.3) 0%, transparent 40%);
+ filter: blur(10px);
+ }
+
+ .particles-container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ .particle {
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 50%;
+ animation: float 15s infinite ease-in-out;
+ }
+
+ @keyframes float {
+ 0%, 100% {
+ transform: translateY(0) translateX(0);
+ opacity: 0.2;
+ }
+ 50% {
+ transform: translateY(-20px) translateX(20px);
+ opacity: 0.6;
+ }
+ }
+
header {
background-color: #2196F3;
color: white;
@@ -72,7 +140,7 @@
.bus {
font-size: 10px;
background-color: #2196F3;
- border: 10px solid #ffffff;
+ /*border: 10px solid #ffffff;*/
position: absolute;
width: 15px;
height: 15px;
@@ -81,6 +149,15 @@
line-height: 15px;
font-weight: bold;
transition: transform 0.3s ease;
+ /* 3D鏁堟灉 */
+ transform: translateZ(0);
+ border: 10px solid rgba(255, 255, 255, 0.8);
+ }
+
+ @keyframes pulse {
+ 0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
+ 70% { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); }
+ 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}
.station:hover, .bus:hover {
transform: scale(1.4);
@@ -202,10 +279,100 @@
left: 1000px;
text-align: center;
}
+
+ /* 鏂拌璁＄殑绔欑偣鏍峰紡 - 鍩轰簬绗簩寮犲浘鐗� */
+ .station {
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ text-align: center;
+ line-height: 24px;
+ font-size: 10px;
+ font-weight: bold;
+ transition: all 0.3s ease;
+ background-color: #ab1839;
+ border-radius: 4px;
+ color: white;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ transform: scale(1);
+ z-index: 10;
+ /* 宓屽鏁堟灉 */
+ border: 2px solid white;
+ }
+
+ .station::before {
+ content: '';
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid rgba(255, 255, 255, 0.8);
+ border-radius: 2px;
+ pointer-events: none;
+ }
+
+ /* 鍥涗釜瑙掔殑涓夎褰㈡寚绀哄櫒 */
+ .station::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ }
+
+ .station .corner {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 4px 4px 0;
+ border-color: transparent #ffffff transparent transparent;
+ }
+
+ .station .corner-tl {
+ top: -2px;
+ left: -2px;
+ transform: rotate(0deg);
+ }
+
+ .station .corner-tr {
+ top: -2px;
+ right: -2px;
+ transform: rotate(90deg);
+ }
+
+ .station .corner-bl {
+ bottom: -2px;
+ left: -2px;
+ transform: rotate(270deg);
+ }
+
+ .station .corner-br {
+ bottom: -2px;
+ right: -2px;
+ transform: rotate(180deg);
+ }
+
+ /* 绔欑偣鎮仠鏁堟灉 */
+ .station:hover {
+ transform: scale(1.6);
+ z-index: 999;
+ box-shadow: 0 0 15px rgba(171, 24, 57, 0.8);
+ }
</style>
</head>
-<body id="app1">
- <!--<header>-->
+<body >
+
+<!-- 绉戞妧鎰熻儗鏅厓绱� -->
+<div class="tech-background">
+ <div class="grid-overlay"></div>
+ <div class="glow-effect"></div>
+ <div class="particles-container" id="particles-container"></div>
+</div>
+<!--<header>-->
<!-- 鐜舰绌挎杞︽櫤鑳界郴缁�-->
<!--</header>-->
<div id="app">
@@ -230,15 +397,21 @@
C 60,750 10,750 10,800
C 10,800 10,850 60,850
L 1100,850
- C 1100,850 1200,850 1200,750
-"
- style="fill:none; stroke:blue; stroke-width:2;" />
+ C 1100,850 1200,850 1200,750"
+ style="fill:none; stroke:blue; stroke-width:3; stroke-dasharray:10,1;"/>
</svg>
-<!-- <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueY + 'px', left: station.valueX + 'px' , backgroundColor: station.modeColor}">{{ station.index }}</div>-->
+
<div v-for="station in tableDataDev" class="station" :style="{
top: convertToCSSPosition(station.valueX, station.valueY).y + 'px',
left: convertToCSSPosition(station.valueX, station.valueY).x + 'px',
- backgroundColor: station.modeColor}">{{ station.index }}</div>
+ backgroundColor: station.modeColor}">
+ <div class="corner corner-tl"></div>
+ <div class="corner corner-tr"></div>
+ <div class="corner corner-bl"></div>
+ <div class="corner corner-br"></div>
+ {{ station.index }}
+ </div>
+
<div>
<el-switch
style="display: block"
@@ -250,12 +423,15 @@
@change='upDateValueSystem'>
</el-switch>
</div>
+
<!-- Buses -->
-<!-- <div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueY + 'px', left: bus.valueX + 'px' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>-->
<div v-for="bus in tableDataRgv" class="bus" :style="{
top: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).y + 'px',
left: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).x + 'px',
- borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>
+ animation: 'pulse ' + bus.animation + 's infinite',
+ borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}
+ </div>
+
</div>
<!-- Left Task Bar -->
@@ -465,6 +641,33 @@
</div>
<script>
+ // 鍦╒ue瀹炰緥澶栨坊鍔犵矑瀛愮敓鎴愬嚱鏁�
+ function createParticles() {
+ const container = document.getElementById('particles-container');
+ const particleCount = 30;
+
+ for (let i = 0; i < particleCount; i++) {
+ const particle = document.createElement('div');
+ particle.classList.add('particle');
+
+ // 闅忔満澶у皬鍜屼綅缃�
+ const size = Math.random() * 3 + 1;
+ const posX = Math.random() * 100;
+ const posY = Math.random() * 100;
+ const delay = Math.random() * 15;
+
+ particle.style.width = `${size}px`;
+ particle.style.height = `${size}px`;
+ particle.style.left = `${posX}vw`;
+ particle.style.top = `${posY}vh`;
+ particle.style.animationDelay = `${delay}s`;
+
+ container.appendChild(particle);
+ }
+ }
+
+ // 椤甸潰鍔犺浇瀹屾垚鍚庡垱寤虹矑瀛�
+ document.addEventListener('DOMContentLoaded', createParticles);
// 鍦╒ue瀹炰緥澶栬幏鍙朾ody灏哄
function getBodySize() {
return {
@@ -491,51 +694,10 @@
tableDataLeft: [],
tableDataLeft1: [],
tableDataRight: [],
- tableDataRight1: [],
- devpPos1:[
- {dev_no: 116,pos:633980},
- {dev_no: 117,pos:604043},
- {dev_no: 118,pos:574323},
- {dev_no: 119,pos:559534},
- {dev_no: 120,pos:544682},
- {dev_no: 121,pos:514912},
- {dev_no: 122,pos:485227},
- {dev_no: 123,pos:470367},
- {dev_no: 124,pos:455514},
- {dev_no: 125,pos:425768},
- {dev_no: 126,pos:396268},
- {dev_no: 127,pos:381106},
- {dev_no: 128,pos:366311},
- {dev_no: 129,pos:336638},
- {dev_no: 130,pos:306820},
- {dev_no: 131,pos:277067},
- {dev_no: 132,pos:257418},
- {dev_no: 133,pos:217730},
- ],
- devpPos2:[
- {dev_no: 112,pos:891000},
- {dev_no: 113,pos:865000},
- {dev_no: 114,pos:800000},
- {dev_no: 115,pos:780000},
- ],
- devpPos3:[
- {dev_no: 101,pos:1269958},
- {dev_no: 102,pos:1243454},
- {dev_no: 103,pos:1229081},
- {dev_no: 104,pos:1202099},
- {dev_no: 105,pos:1187564},
- {dev_no: 106,pos:1160630},
- {dev_no: 107,pos:1146152},
- {dev_no: 108,pos:1119463},
- {dev_no: 109,pos:1105038},
- {dev_no: 110,pos:1077961},
- {dev_no: 111,pos:1063813},
- ],
+ tableDataRight1: []
},
created(){
this.init();
- this.devpPos1.reverse()
- this.devpPos3.reverse()
},
watch: {
@@ -596,8 +758,8 @@
const basePos = this.convertToCSSPosition(svgX, svgY);
// 绀轰緥锛氬悜鍙冲亸绉诲崐寰勭殑璺濈锛堝彲鏍规嵁闇�姹傝皟鏁村亸绉绘柟鍚戯級
return {
- x: basePos.x -14,
- y: basePos.y -14
+ x: basePos.x -16.5,
+ y: basePos.y -16.5
};
},
// 鏇存柊body灏哄
@@ -653,11 +815,9 @@
});
},
handleChange(val) {
- console.log(val);
if (val.length === 0){
valueRight = '0';
} else {
- console.log("2222"+val);
if (val.length >= 1){
this.handleChangeValueRight(1)
@@ -665,12 +825,9 @@
}
},
handleChange1(val) {
- console.log(val);
if (val.length === 0){
valueRight1 = '0';
} else {
- console.log("2222"+val);
-
if (val.length >= 1){
this.handleChangeValueRight1(1)
}
@@ -732,8 +889,6 @@
});
},
handleChangeValueRight(val) {
- console.log("33333"+val);
-
switch (val){
case 1:
valueRight = '100';
@@ -748,8 +903,6 @@
}
},
handleChangeValueRight1(val) {
- console.log("33333"+val);
-
switch (val){
case 1:
valueRight1 = '100';
@@ -898,8 +1051,6 @@
},
getTableDataRgv() {
let that = this;
- // that.tableDataRgv = busPsto
- // return
$.ajax({
url: baseUrl + "/rgv/ring/through/rgv/position/data",
headers: {
--
Gitblit v1.9.1