From 632c1351c9f0ba96d1f43e46aed2bcbd4a50e7d6 Mon Sep 17 00:00:00 2001
From: lsh <lsh@163.com>
Date: 星期一, 21 十月 2024 14:13:36 +0800
Subject: [PATCH] *
---
src/main/webapp/views/index.html | 145 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 135 insertions(+), 10 deletions(-)
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index 250ddb8..befcbfe 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -81,31 +81,130 @@
.station:hover, .bus:hover {
transform: scale(1.4);
}
+
+ .task-bar {
+ position: fixed;
+ top: 10%;
+ 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; /* 璺濈宸﹁竟鐨勮窛绂� */
+ }
+
+ .right-task-bar {
+ right: 20px; /* 璺濈鍙宠竟鐨勮窛绂� */
+ }
+
+ .el-table .warning-row {
+ background: oldlace;
+ }
+
+ .el-table .success-row {
+ background: #f0f9eb;
+ }
</style>
</head>
<body>
<!--<header>-->
<!-- 鐜舰绌挎杞︽櫤鑳界郴缁�-->
<!--</header>-->
- <div id="app" class="map">
-<!-- <div class="inner-ring"></div>-->
-<!-- <div class="outer-ring"></div>-->
- <div v-for="track in energyGatheringRing" class="inner-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>
- <div v-for="track in energyGatheringRing" class="outer-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>
+ <div id="app">
+ <div class="map">
+ <!-- <div class="inner-ring"></div>-->
+ <!-- <div class="outer-ring"></div>-->
+ <div v-for="track in energyGatheringRing" class="inner-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>
+ <div v-for="track in energyGatheringRing" class="outer-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>
- <!-- Stations on outer ring -->
- <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueX + '%', left: station.valueY + '%' }">{{ station.index }}</div>
+ <!-- Stations on outer ring -->
+ <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueX + '%', left: station.valueY + '%' }">{{ station.index }}</div>
- <!-- Buses -->
- <div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueX + '%', left: bus.valueY + '%' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>
+ <!-- Buses -->
+ <div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueX + '%', left: bus.valueY + '%' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>
+ </div>
+
+ <!-- Left Task Bar -->
+ <div class="task-bar left-task-bar" >
+ <div>
+ <el-tooltip :content="'Switch value: ' + value" placement="top">
+ <el-switch
+ v-model="value"
+ active-color="#13ce66"
+ inactive-color="#ff4949"
+ active-value="100"
+ inactive-value="0">
+ </el-switch>
+ </el-tooltip>
+ </div>
+ <div v-if="value === '100' ">
+ <el-table
+ :data="tableDataLeft"
+ style="width: 100%"
+ :row-class-name="tableRowClassName">
+ <el-table-column
+ prop="wrkNo"
+ label="宸ヤ綔鍙�"
+ width="80">
+ </el-table-column>
+ <el-table-column
+ prop="wrkSts$"
+ label="宸ヤ綔鐘舵��">
+ </el-table-column>
+ <el-table-column
+ prop="staNo"
+ label="鐩爣绔�">
+ </el-table-column>
+ <el-table-column
+ prop="sourceStaNo"
+ label="婧愮珯">
+ </el-table-column>
+ <el-table-column
+ prop="modiTime"
+ label="涓嬪彂鏃堕棿">
+ </el-table-column>
+ <el-table-column
+ prop="modiTime"
+ label="鏇存柊鏃堕棿">
+ </el-table-column>
+ <el-table-column
+ prop="rgvSts"
+ label="RGV鐘舵��">
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+
+ <!-- Right Task Bar -->
+ <div id = "app3" class="task-bar right-task-bar">
+ <h3>浠诲姟淇℃伅</h3>
+ <p>浠诲姟3: 鎻忚堪3</p>
+ <p>浠诲姟4: 鎻忚堪4</p>
+ <!-- 杩欓噷鍙互鍔ㄦ�佺敓鎴愪换鍔′俊鎭� -->
+ </div>
</div>
+
<script>
var app = new Vue({
el: '#app',
data: {
+ value: '100',
tableDataRgv: [],
tableDataDev: [],
- energyGatheringRing: []
+ energyGatheringRing: [],
+ tableDataLeft: []
},
created(){
this.init();
@@ -118,13 +217,39 @@
this.getTableDataRgv()
this.getTableDataDev()
this.getTableDataTrack()
+ this.getTableDataLeft()
setInterval(() => {
this.getTableDataRgv()
this.getTableDataDev()
this.getTableDataTrack()
+ this.getTableDataLeft()
}, 1000)
},
+ tableRowClassName({row, rowIndex}) {
+ if (rowIndex === 1) {
+ return 'warning-row';
+ } else if (rowIndex === 3) {
+ return 'success-row';
+ }
+ return '';
+ },
+ getTableDataLeft() {
+ let that = this;
+ $.ajax({
+ url: baseUrl + "/rgv/ring/through/task/wrk/mast/position/data",
+ headers: {
+ 'token': localStorage.getItem('token')
+ },
+ data: {},
+ dataType: 'json',
+ contentType: 'application/json;charset=UTF-8',
+ method: 'post',
+ success: function (res) {
+ that.tableDataLeft = res.data
+ }
+ });
+ },
getTableDataRgv() {
let that = this;
$.ajax({
--
Gitblit v1.9.1