Merge remote-tracking branch 'origin/hcddwcs-gdfs-version2' into hcddwcs-gdfs-version2
| | |
| | | private MainServiceImpl mainService; |
| | | // 所属线程 |
| | | private Thread thread; |
| | | private Thread licenseThread; |
| | | // 频率 |
| | | private int[] autoZ = new int[]{0,0,0,0,0,0,0}; |
| | | |
| | |
| | | * =====>> 开始工作 |
| | | */ |
| | | public void start(){ |
| | | thread = new Thread(() -> { |
| | | thread = new Thread(this::mainThread); |
| | | thread.start(); |
| | | licenseThread = new Thread(this::licenseThreadRun); |
| | | licenseThread.start(); |
| | | } |
| | | |
| | | private void mainThread(){ |
| | | try{ |
| | | Thread.sleep(200); |
| | | log.info("++++++++ 开始验证许可证 ++++++++"); |
| | |
| | | e.printStackTrace(); |
| | | } |
| | | } |
| | | }); |
| | | thread.start(); |
| | | } |
| | | |
| | | private void licenseThreadRun(){ |
| | | while (true) { |
| | | try{ |
| | | Thread.sleep(60*60*1000L); |
| | | log.info("++++++++ 开始验证许可证 ++++++++"); |
| | | if (!mainService.licenseVerify()){ |
| | | SystemProperties.WCS_RUNNING_STATUS.set(Boolean.FALSE); |
| | | log.info("++++++++ 验证许可证失败 ++++++++"); |
| | | } else { |
| | | // SystemProperties.WCS_RUNNING_STATUS.set(Boolean.TRUE); |
| | | log.info("++++++++ 验证许可证成功 ++++++++"); |
| | | } |
| | | } catch (Exception e) {} |
| | | } |
| | | } |
| | | |
| | | @PreDestroy |
| | | public void shutDown(){ |
| | | if (thread != null) thread.interrupt(); |
| | | if (licenseThread != null) licenseThread.interrupt(); |
| | | } |
| | | |
| | | } |
| New file |
| | |
| | | .system-control-panel { |
| | | position: absolute; |
| | | top: 15px; |
| | | left: 50%; |
| | | transform: translateX(-50%); |
| | | background: rgba(240, 248, 255, 0.7); |
| | | border-radius: 16px; |
| | | padding: 8px 20px; |
| | | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| | | backdrop-filter: blur(6px); |
| | | border: 1px solid rgba(255, 255, 255, 0.6); |
| | | z-index: 100; |
| | | display: flex; |
| | | align-items: center; |
| | | min-width: 260px; |
| | | justify-content: center; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .system-control-panel:hover { |
| | | background: rgba(240, 248, 255, 0.85); |
| | | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); |
| | | } |
| | | |
| | | .system-status { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 12px; |
| | | } |
| | | |
| | | .status-indicator { |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 50%; |
| | | margin-right: 8px; |
| | | } |
| | | |
| | | .status-running { |
| | | background-color: #13ce66; |
| | | box-shadow: 0 0 6px rgba(19, 206, 102, 0.8); |
| | | animation: pulse-green 2s infinite; |
| | | } |
| | | |
| | | .status-stopped { |
| | | background-color: #A64036; |
| | | box-shadow: 0 0 6px rgba(166, 64, 54, 0.6); |
| | | } |
| | | |
| | | .status-text { |
| | | font-weight: 600; |
| | | font-size: 13px; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .custom-switch { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .el-switch { |
| | | transform: scale(0.9); |
| | | } |
| | | |
| | | @keyframes pulse-green { |
| | | 0% { box-shadow: 0 0 0 0 rgba(19, 206, 102, 0.5); } |
| | | 70% { box-shadow: 0 0 0 6px rgba(19, 206, 102, 0); } |
| | | 100% { box-shadow: 0 0 0 0 rgba(19, 206, 102, 0); } |
| | | } |
| | | |
| | | .license-info { |
| | | position: absolute; |
| | | top: 60px; |
| | | left: 50%; |
| | | transform: translateX(-50%); |
| | | background: rgba(255, 255, 255, 0.85); |
| | | padding: 8px 18px; |
| | | border-radius: 6px; |
| | | font-size: 22px; |
| | | font-weight: 600; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
| | | backdrop-filter: blur(4px); |
| | | border: 1px solid rgba(255, 255, 255, 0.6); |
| | | z-index: 99; |
| | | display: flex; |
| | | align-items: center; |
| | | transition: all 0.3s ease; |
| | | max-width: 80%; |
| | | text-align: center; |
| | | } |
| | | |
| | | .license-info.normal { |
| | | color: #13ce66; |
| | | background: rgba(255, 255, 255, 0.85); |
| | | display: none; /* 大于30天时隐藏 */ |
| | | } |
| | | |
| | | .license-info.warning { |
| | | color: #e6a23c; |
| | | background: rgba(255, 247, 230, 0.85); |
| | | border: 1px solid rgba(230, 162, 60, 0.3); |
| | | } |
| | | |
| | | .license-info.expired { |
| | | color: #f56c6c; |
| | | background: rgba(255, 235, 235, 0.85); |
| | | border: 1px solid rgba(245, 108, 108, 0.3); |
| | | animation: pulse-red 2s infinite; |
| | | } |
| | | |
| | | .license-icon { |
| | | margin-right: 8px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | @keyframes pulse-red { |
| | | 0% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.3); } |
| | | 70% { box-shadow: 0 0 0 6px rgba(245, 108, 108, 0); } |
| | | 100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); } |
| | | } |
| | | |
| | | body { |
| | | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | | margin: 0; |
| | | padding: 0; |
| | | background-color: #a0d2eb; |
| | | color: #ffffff; |
| | | display: flex; |
| | | 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; |
| | | padding: 15px 20px; |
| | | text-align: center; |
| | | font-size: 24px; |
| | | letter-spacing: 1px; |
| | | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); |
| | | } |
| | | .map { |
| | | position: relative; |
| | | width: 52vw; |
| | | height: 72vh; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .inner-ring, .outer-ring { |
| | | position: absolute; |
| | | border-radius: 50%; |
| | | } |
| | | .inner-ring { |
| | | width: 72vh; |
| | | height: 72vh; |
| | | border: 4px solid #00E676; |
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
| | | } |
| | | .outer-ring { |
| | | width: 80vh; |
| | | height: 80vh; |
| | | border: 4px solid #00E676; |
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
| | | } |
| | | .station { |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 14px; |
| | | text-align: center; |
| | | line-height: 1.5; /* 调整行高与字体大小的比值 */ |
| | | font-size: 10px; /* 设置更小的字体 */ |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | background-color: #ab1839; |
| | | transform: scale(1); /* 可选:如果不需要放大效果 */ |
| | | } |
| | | .bus { |
| | | font-size: 10px; |
| | | background-color: #2196F3; |
| | | /*border: 10px solid #ffffff;*/ |
| | | position: absolute; |
| | | width: 15px; |
| | | height: 15px; |
| | | border-radius: 50%; |
| | | text-align: center; |
| | | 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); |
| | | z-index: 999; |
| | | } |
| | | |
| | | .task-bar-left { |
| | | position: fixed; |
| | | top: 1%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-left1 { |
| | | position: fixed; |
| | | top: 8%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-right { |
| | | position: fixed; |
| | | top: 1%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-right1 { |
| | | position: fixed; |
| | | top: 5%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .task-bar-div1 { |
| | | /*width: 100%; !* 设置宽度 *!*/ |
| | | background-color: rgba(255, 255, 255, 0.8); |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
| | | } |
| | | |
| | | .left-task-bar { |
| | | left: 20px; |
| | | /*bottom: 100px;*/ |
| | | } |
| | | |
| | | .right-task-bar { |
| | | /*bottom: 100px;*/ |
| | | right: 20px; |
| | | } |
| | | |
| | | .el-table .warning-row { |
| | | background: oldlace; |
| | | } |
| | | |
| | | .el-table .success-row { |
| | | background: #f0f9eb; |
| | | } |
| | | .container { |
| | | width: 52vw; |
| | | height: 72vh; |
| | | position: absolute; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-station { |
| | | width: 100vh; |
| | | height: 72vh; |
| | | position: absolute; |
| | | display: flex; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-item-top { |
| | | background: red; |
| | | position: relative; |
| | | width: 40px; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | top: 880px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | left: 1230px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left2 { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | 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); |
| | | } |
| | |
| | | <meta charset="utf-8"> |
| | | <title>环形穿梭车智能系统</title> |
| | | <link rel="stylesheet" href="../static/css/element.css"> |
| | | <link rel="stylesheet" href="../static/css/indexHCDD.css"> |
| | | <link rel="stylesheet" href="../static/css/element-ui.css"> |
| | | <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon"> |
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | |
| | | <script type="text/javascript" src="../static/js/vue.min.js"></script> |
| | | <script type="text/javascript" src="../static/js/element.js"></script> |
| | | <script type="text/javascript" src="testPosition.js"></script> |
| | | <style> |
| | | body { |
| | | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | | margin: 0; |
| | | padding: 0; |
| | | background-color: #a0d2eb; |
| | | color: #ffffff; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100vh; |
| | | } |
| | | header { |
| | | background-color: #2196F3; |
| | | color: white; |
| | | padding: 15px 20px; |
| | | text-align: center; |
| | | font-size: 24px; |
| | | letter-spacing: 1px; |
| | | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); |
| | | } |
| | | .map { |
| | | position: relative; |
| | | width: 52vw; |
| | | height: 72vh; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .inner-ring, .outer-ring { |
| | | position: absolute; |
| | | border-radius: 50%; |
| | | } |
| | | .inner-ring { |
| | | width: 72vh; |
| | | height: 72vh; |
| | | border: 4px solid #00E676; |
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
| | | } |
| | | .outer-ring { |
| | | width: 80vh; |
| | | height: 80vh; |
| | | border: 4px solid #00E676; |
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
| | | } |
| | | .station { |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 14px; |
| | | text-align: center; |
| | | line-height: 1.5; /* 调整行高与字体大小的比值 */ |
| | | font-size: 10px; /* 设置更小的字体 */ |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | background-color: #ab1839; |
| | | transform: scale(1); /* 可选:如果不需要放大效果 */ |
| | | } |
| | | .bus { |
| | | font-size: 10px; |
| | | background-color: #2196F3; |
| | | /*border: 10px solid #ffffff;*/ |
| | | position: absolute; |
| | | width: 15px; |
| | | height: 15px; |
| | | border-radius: 50%; |
| | | text-align: center; |
| | | 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); |
| | | z-index: 999; |
| | | } |
| | | |
| | | .task-bar-left { |
| | | position: fixed; |
| | | top: 1%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-left1 { |
| | | position: fixed; |
| | | top: 8%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-right { |
| | | position: fixed; |
| | | top: 1%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-right1 { |
| | | position: fixed; |
| | | top: 5%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-div1 { |
| | | /*width: 100%; !* 设置宽度 *!*/ |
| | | background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */ |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
| | | } |
| | | |
| | | .left-task-bar { |
| | | left: 20px; /* 距离左边的距离 */ |
| | | /*bottom: 100px;*/ |
| | | } |
| | | |
| | | .right-task-bar { |
| | | /*bottom: 100px;*/ |
| | | right: 20px; /* 距离右边的距离 */ |
| | | } |
| | | |
| | | .el-table .warning-row { |
| | | background: oldlace; |
| | | } |
| | | |
| | | .el-table .success-row { |
| | | background: #f0f9eb; |
| | | } |
| | | .container { |
| | | width: 52vw; |
| | | height: 72vh; |
| | | position: absolute; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-station { |
| | | width: 100vh; |
| | | height: 72vh; |
| | | position: absolute; |
| | | display: flex; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-item-top { |
| | | background: red; |
| | | position: relative; |
| | | width: 40px; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | top: 880px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | left: 1230px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left2 { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | left: 1000px; |
| | | text-align: center; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body id="app1"> |
| | | <!--<header>--> |
| | | <!-- 环形穿梭车智能系统--> |
| | | <!--</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> |
| | | <div id="app"> |
| | | <div class="map"> |
| | | <div v-if="licenseDayI <=30 "> |
| | | <div style="color: red">{{licenseDay}}</div> |
| | | <div class="system-control-panel"> |
| | | <div class="system-status"> |
| | | <div class="status-indicator" :class="valueSystem ? 'status-running' : 'status-stopped'"></div> |
| | | <span class="status-text">{{ valueSystem ? '系统运行中' : '系统已停止' }}</span> |
| | | </div> |
| | | <div class="custom-switch"> |
| | | <el-switch |
| | | v-model="valueSystem" |
| | | active-color="#13ce66" |
| | | inactive-color="#A64036" |
| | | @change='upDateValueSystem'> |
| | | </el-switch> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="license-info" :class="getLicenseClass()" v-if="licenseDayI <=30"> |
| | | <span class="license-icon">📄</span> |
| | | {{ licenseDay }} |
| | | </div> |
| | | <!-- <div class="inner-ring"></div>--> |
| | | <!-- <div class="outer-ring"></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> |
| | | |
| | | <div> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="valueSystem" |
| | | active-color="#13ce66" |
| | | inactive-color="#A64036" |
| | | active-text="系统运行中..." |
| | | inactive-text="系统已停止!" |
| | | @change='upDateValueSystem'> |
| | | </el-switch> |
| | | 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> |
| | | |
| | | <!-- Buses --> |
| | |
| | | </div> |
| | | |
| | | <script> |
| | | // 在Vue实例外添加粒子生成函数 |
| | | 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); |
| | | // 在Vue实例外获取body尺寸 |
| | | function getBodySize() { |
| | | return { |
| | |
| | | |
| | | }, 1000) |
| | | }, |
| | | |
| | | // 获取容器实际尺寸 |
| | | updateContainerSize() { |
| | | const mapEl = this.$el.querySelector('.map'); |
| | |
| | | }, |
| | | convertToCSSPositionWithOffset(svgX, svgY, radius) { |
| | | const basePos = this.convertToCSSPosition(svgX, svgY); |
| | | // 示例:向右偏移半径的距离(可根据需求调整偏移方向) |
| | | return { |
| | | x: basePos.x -16.5, |
| | | y: basePos.y -16.5 |
| | |
| | | } |
| | | return ''; |
| | | }, |
| | | |
| | | // 获取许可证样式类 |
| | | getLicenseClass() { |
| | | if (this.licenseDayI > 30) { |
| | | return 'normal'; |
| | | } else if (this.licenseDayI > 0) { |
| | | return 'warning'; |
| | | } else { |
| | | return 'expired'; |
| | | } |
| | | }, |
| | | getLicenseDays(){ |
| | | let that = this; |
| | | $.ajax({ |