1112

ruoyi-ui/src/views/map/components/map.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="map-index">
-    <div ref="scrollContainer" v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;left: 1%;width: 10vw;height: 50vh;overflow:auto;">
-      <el-timeline style="padding-top: 5%;padding-left: 5%;">
+    <div ref="scrollContainer" v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;bottom: 1%;left: 1%;width:98vw;height: 10vh;overflow-x:auto;overflow-y: hidden;">
+      <el-timeline style="padding-top:1%;padding-left: 0%;" class="horizontal-timeline">
         <el-timeline-item
           v-for="(activity, index) in activities"
           :key="index"
+          class="timeline-item"
           :icon="activity.icon"
           :type="activity.type"
           :color="activity.color"
@@ -16,6 +17,27 @@
         </el-timeline-item>
       </el-timeline>
     </div>
+    <div v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;right: 1%;width: 30vw;height: 60vh;overflow:auto;">
+      <el-table 
+          :data="tableData"
+          style="width: 98%;margin-left: 1%;margin-top: 1%;height: 59vh;"
+          :cell-style="{ padding:'5px' }"
+          :header-cell-style="{height: heightAll*0.01+'px',}"
+          :row-style="{ fontSize: '16px',textAlign:'center'}"
+          border >
+          <el-table-column type="index" label="序号" width="80">
+            <template #default="{ $index }">
+              <div style="text-align: center;">
+                {{ $index + 1 }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="站名"  width="200">
+          </el-table-column>
+          <el-table-column prop="z" label="水位"  width=""/>
+          <el-table-column prop="time" label="时间"  width="210"/>
+        </el-table>
+    </div>
     <div id="mapChart"></div>
   </div>
 </template>
@@ -53,7 +75,8 @@ import suzhouPoint from "./suzhouPoints.json";
 import { ref } from 'vue';
 
 const scrollContainer = ref(null);
-const scrollAmount = 50; 
+const scrollAmount =0;
+const widthAll = ref(window.innerWidth)
 const route = useRoute();
 const props = defineProps({
   config: Object,
@@ -83,7 +106,7 @@ onMounted(async () => {
     })
     suzhouJson.data.inputParam = JSON.parse(suzhouJson.data.inputParam)
     console.log(suzhouJson.data)
-    setInterval(changeMap, 2000)
+    setInterval(changeMap, 1000)
     pointLayer.value = createPointlayer(suzhouPoint)
     mapChart.value.addLayer(pointLayer.value);
     
@@ -94,15 +117,16 @@ onMounted(async () => {
   }
 });
 const count = ref(0)
+const tableData = ref()
 function changeMap(){
-  
+  tableData.value = []
   const keys1 = Object.keys(suzhouJson.data.outPutQUZ)
   console.log(count.value,keys1.length)
   if(count.value >= keys1.length){
     console.log(count.value,keys1.length)
     count.value = 0
     scrollContainer.value.scrollTo({
-      top: 0, // 滚动到顶部
+      left: 0, // 滚动到顶部
       behavior: 'smooth' // 启用平滑滚动效果
     });
   }
@@ -114,6 +138,7 @@ function changeMap(){
   activities.value[count.value].color = '#0bbd87',
   mapChart.value.removeLayer(pointLayer.value)
   const keys = Object.keys(suzhouJson.data.outPutQUZ)
+  tableData.value = suzhouJson.data.outPutQUZ[keys[count.value]]
   for(var i = 0;i<suzhouPoint.length;i++){
     for(var i1 = 0;i1<suzhouJson.data.outPutQUZ[keys[count.value]].length;i1++){
       if(suzhouPoint[i].STATIONNAME===suzhouJson.data.outPutQUZ[keys[count.value]][i1].name){
@@ -123,8 +148,8 @@ function changeMap(){
   }
   pointLayer.value = createPointlayer(suzhouPoint)
   mapChart.value.addLayer(pointLayer.value);
-  if(count.value >=10){
-    scrollContainer.value.scrollTop += scrollAmount;
+  if(count.value%10===0&&count.value!==0){ 
+    scrollContainer.value.scrollLeft += scrollAmount + widthAll.value;
   }
   count.value++
 }
@@ -628,6 +653,7 @@ watch(() => props.config, async (config) => {
 }, {deep: true});
 </script>
 <style scoped lang="scss">
+
 /*滚动条里面轨道*/
 ::-webkit-scrollbar-track {
   background-color: rgba(20, 19, 19, 0);
@@ -765,4 +791,81 @@ watch(() => props.config, async (config) => {
   background-size: contain;
   background-repeat: no-repeat;
 }
+</style>
+<style scoped>
+.horizontal-timeline-container {
+  width: 100%;
+  overflow-x: auto; /* 允许横向滚动 */
+  padding: 20px 0;
+}
+
+.horizontal-timeline {
+  display: flex;
+  min-width: 800px; /* 根据时间轴项的数量调整最小宽度 */
+  padding: 50px; /* 增加内边距 */
+}
+
+.timeline-item {
+  flex: 1; /* 每个项平均分配宽度 */
+  position: relative;
+  min-width: 200px; /* 每个项的最小宽度 */
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding: 0 10px;
+}
+
+.content-title {
+  font-size: 16px;
+  margin: 10px 0;
+}
+
+.content-people {
+  color: #8c8c8c;
+  font-size: 14px;
+}
+
+/* 使用 :deep() 穿透修改 Element Plus 组件内部样式 */
+:deep(.horizontal-timeline .el-timeline-item) {
+  flex: 1;
+  position: relative;
+}
+
+:deep(.horizontal-timeline .el-timeline-item__tail) {
+  border-left: none;
+  border-top: 2px solid #e4e7ed;
+  width: 100%;
+  position: absolute;
+  top: 12px;
+  left: 0;
+}
+
+:deep(.horizontal-timeline .el-timeline-item__node) {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+:deep(.horizontal-timeline .el-timeline-item__wrapper) {
+  padding-left: 0;
+  position: absolute;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  width: 100%;
+}
+
+/* 激活状态样式 */
+.active :deep(.el-timeline-item__node) {
+  background-color: #409EFF; /* 使用 Element Plus 主色 */
+}
+
+.active :deep(.el-timeline-item__tail) {
+  border-color: #409EFF;
+}
 </style>