hsgy/src/components/History1.vue

<template>
  <div class="history-container">
    <div class="flex top">
      <div class="flex width200">
        <span> 参数选择：</span>
        <el-select v-model="value1" placeholder="请选择" size="mini" @change="changeValue">
          <el-option
            v-for="item in fxOptions"
            :key="item.value"
            :label="item.label"
            :value="item"
          />
        </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>
    <div class="bottom">
      <!-- <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> -->
      <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>
          <tr>
            <td>数值</td>
            <td v-for="(item, index) in tableHeader" :key="index">
              {{ item.value }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchartG.vue";
import Process from "./Process.vue";
import Date from "@/components/Date.vue";
export default {
  name: "History",
  components: {
    BarEchart,
    Process,
    Date,
  },
  setup() {
    const state = reactive({
      listData: [
      {
          id: "echart0",
          title: "降水量-柱状图",
          legend: [],
          color: ["#6fdbce", "#f00", "#0000ff"],
        }
      ],
      fxOptions: [
        {
          value: "0",
          label: "径流系数",
        },
        {
          value: "1",
          label: "蒸腾量",
        },
        {
          value: "2",
          label: "COD",
        },
        {
          value: "3",
          label: "氨氮",
        },
        {
          value: "4",
          label: "SS",
        },
        {
          value: "5",
          label: "屋面温度无绿化",
        },
        {
          value: "6",
          label: "屋面温度有绿化",
        },
        {
          value: "7",
          label: "热岛消减率",
        },
      ],
      value1: "0",
      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 () => {
      state.value1 = state.fxOptions[0];
      console.log(123, state.value1)
      state.listData[0].title = state.value1.label;
    });
    const changeValue = (data) => {
      console.log('data', data);
      console.log('selectItem', state.value1);
      state.listData[0].title = state.value1.label;
    }
    return {
      ...toRefs(state),
      changeValue
    };
  },
};
</script>

<style lang="scss" scoped>
.history-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  .top {
    width: 100%;
    height: 50px;
  }
  .middle {
    width: 100%;
    height: 400px;
    // border: 1px solid red;s
    .echartDiv100 {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
  }
  .bottom {
    height: calc(100% - 520px);
    // border: 1px solid red;
  }
  .date {
    width: 100%;
    display: flex;
    justify-content: end;
    height: 50%;
  }
  .width200 {
    width: 200px;
    > 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>