From 7499474661a261ad19c12dd429be38ea0799e870 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Mon, 30 Oct 2023 17:50:08 +0800
Subject: [PATCH] Update History.vue

---
 src/components/History.vue | 253 +++++++++++++++++++++++++------------
 1 file changed, 174 insertions(+), 79 deletions(-)

diff --git a/src/components/History.vue b/src/components/History.vue
index 2da23b9..37b0167 100644
--- a/src/components/History.vue
+++ b/src/components/History.vue
@@ -2,31 +2,55 @@
   <div class="history-container">
     <div class="flex top">
       <div class="flex width200">
-        <span> 系统选择：</span>  
-        <el-select v-model="value1"  placeholder="请选择" size="mini">
+        <span> 系统选择：</span>
+        <el-select v-model="value1" placeholder="请选择" size="mini">
           <el-option
             v-for="item in fxOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           />
-        </el-select> 
+        </el-select>
       </div>
       <div class="date">
         <Date />
       </div>
     </div>
-    <div
-      v-for="(item, index) of listData"
-      :key="index"
-      class="middle"
-    >
-      <BarEchart :echartData="item" class="echartDiv100"/>
+    <div v-for="(item, index) of listData" :key="index" class="middle">
+      <BarEchart :echartData="item" class="echartDiv100" />
     </div>
     <div class="bottom">
-      <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
+      <!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
         <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
-      </el-table>
+      </el-table> -->
+      <table border="1">
+        <thead>
+          <tr>
+            <th>项目</th>
+            <th colspan="17">降雨量(mm/s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>序号</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.label }}
+            </td>
+          </tr>
+          <tr>
+            <td>时间</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.time }}
+            </td>
+          </tr>
+          <tr>
+            <td>数值</td>
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </template>
@@ -43,7 +67,7 @@ export default {
   components: {
     BarEchart,
     Process,
-    Date
+    Date,
   },
   setup() {
     const state = reactive({
@@ -51,72 +75,124 @@ export default {
         {
           id: "echart0",
           title: "降水量-柱状图",
-          legend: ['降水量'],
+          legend: ["降水量"],
           color: ["#6fdbce"],
-      }],
-      fxOptions: [{
-        value: '0',
-        label: '降水量',
-      },{
-        value: '1',
-        label: '系统A',
-      },{
-        value: '2',
-        label: '系统B',
-      },{
-        value: '3',
-        label: '系统C',
-      },{
-        value: '4',
-        label: '系统D',
-      },{
-        value: '5',
-        label: '系统E',
-      }],
-      value1:'降水量',
-      tableHeader: [{
-          prop: 'one',
-          label: '1点'
-        },{
-          prop: 'two',
-          label: '2点'
-        },{
-          prop: 'three',
-          label: '3点'
-        },{
-          prop: 'four',
-          label: '4点'
-        },{
-          prop: 'five',
-          label: '5点'
-        },{
-          prop: 'six',
-          label: '6点'
-        },{
-          prop: 'seven',
-          label: '7点'
-        },{
-          prop: 'eight',
-          label: '8点'
-        },{
-          prop: 'nine',
-          label: '9点'
-        },{
-          prop: 'ten',
-          label: '10点'
-        }],
-        tableData: [{
-          one: '100',
-          two: '200', 
-          three: '100',
-          four: '500',
-          five: '200',
-          six: '300',
-          seven: '200',
-          eight: '100',
-          nine: '300',
-          ten: '400'
-        }]
+        },
+      ],
+      fxOptions: [
+        {
+          value: "0",
+          label: "降水量",
+        },
+        {
+          value: "1",
+          label: "系统A",
+        },
+        {
+          value: "2",
+          label: "系统B",
+        },
+        {
+          value: "3",
+          label: "系统C",
+        },
+        {
+          value: "4",
+          label: "系统D",
+        },
+        {
+          value: "5",
+          label: "系统E",
+        },
+      ],
+      value1: "降水量",
+      tableHeader: [
+        {
+          label: 1,
+          time: "00:00",
+          value: 78,
+        },
+        {
+          label: 2,
+          time: "01:00",
+          value: 56,
+        },
+        {
+          label: 3,
+          time: "02:00",
+          value: 45,
+        },
+        {
+          label: 4,
+          time: "03:00",
+          value: 66,
+        },
+        {
+          label: 5,
+          time: "04:00",
+          value: 86,
+        },
+        {
+          label: 6,
+          time: "05:00",
+          value: 11,
+        },
+        {
+          label: 7,
+          time: "06:00",
+          value: 13,
+        },
+        {
+          label: 8,
+          time: "07:00",
+          value: 55,
+        },
+        {
+          label: 9,
+          time: "08:00",
+          value: 76,
+        },
+        {
+          label: 10,
+          time: "09:00",
+          value: 65,
+        },
+        {
+          label: 11,
+          time: "10:00",
+          value: 80,
+        },
+        {
+          label: 12,
+          time: "11:00",
+          value: 90,
+        },
+        {
+          label: 13,
+          time: "12:00",
+          value: 34,
+        },
+        {
+          label: 14,
+          time: "13:00",
+          value: 89,
+        },
+        {
+          label: 15,
+          time: "14:00",
+          value: 34,
+        },
+        {
+          label: 16,
+          time: "15:00",
+          value: 90,
+        },
+         {
+          label: 17,
+          time: "16:00",
+          value: 45,
+        },
+      ],
     });
     onMounted(async () => {});
 
@@ -149,7 +225,7 @@ export default {
       margin: 0 auto;
     }
   }
-  .bottom{
+  .bottom {
     height: calc(100% - 520px);
     // border: 1px solid red;
   }
@@ -161,10 +237,29 @@ export default {
   }
   .width200 {
     width: 200px;
-    >span {
+    > span {
       display: inline-block;
       width: 180px;
     }
   }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    height: 200px;
+    td {
+      text-align: center;
+    }
+    th {
+      height: 50px;
+    }
+    th:first-child {
+      background: #ddd;
+    }
+    tr {
+      td:first-child {
+        background: #ddd;
+      }
+    }
+  }
 }
 </style>