wrdep/wrdep-ui/src/views/dataAnalysis/components/wsAndWpd.vue

<template>
  <div class="wsAndWpdPage">
    <!--  2.3.2平均风速  -->
    <div style="height: 2220px">
      <h3>2.3.2 平均风速</h3>
      <div class="pdfTableDiv" style="width: 60%">
        <div class="tableTitle"><span>表4 {{ windTowerInfo.name }}测风设备平均风速统计结果（{{
            windTowerInfo.startTime
          }}-{{ windTowerInfo.endTime }}）</span></div>
        <div class="tableDiv">
          <el-table
            :data="wsTableData"
            border
            :header-row-style="{color: '#000'}"
            class="pdfTable">
            <el-table-column prop="parameter" align="center" label="参数"></el-table-column>
            <el-table-column prop="avg" align="center" label="平均值"></el-table-column>
            <el-table-column prop="max" align="center" label="最大值"></el-table-column>
            <el-table-column prop="min" align="center" label="最小值"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div style="height: 2220px">
      <h3>2.3.3 按月份统计平均风速（m/s）</h3>
      <div class="pdfTableDiv">
        <div class="tableTitle"><span>表5 逐月统计</span></div>
        <div class="tableDiv">
          <el-table
            :data="wsMonthTableData.mainData"
            border
            :header-row-style="{color: '#000'}"
            class="pdfTable">
            <el-table-column prop="height" align="center" label="高度"></el-table-column>
            <el-table-column v-for="item in wsMonthTableData.headerData" :prop="item.prop" align="center"
                             :label="item.label"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div style="height: 2220px">
      <h3>2.3.4 风功率密度</h3>
      <div class="pdfTableDiv" style="width: 60%">
        <div class="tableTitle"><span>表6 {{ windTowerInfo.name }}测风设备风功率密度汇总</span></div>
        <div class="tableTitle"><span>{{ windTowerInfo.startTime }}-{{ windTowerInfo.endTime }}</span></div>
        <div class="tableDiv">
          <el-table
            :data="wpdTableData"
            border
            :header-row-style="{color: '#000'}"
            class="pdfTable">
            <el-table-column prop="parameter" align="center" label="参数"></el-table-column>
            <el-table-column prop="avg" align="center" label="平均值"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wsAndWpd",
  props: {info: Object},
  watch: {
    info: {
      immediate: true,
      handler(value) {
        this.windTowerInfo = value
      }
    }
  },
  data() {
    return {
      windTowerInfo: {},
      /*平均风速*/
      wsTableData: [
        {parameter: '10米风速（m/s）', avg: '4.32', max: '19.89', min: '0.21'},
        {parameter: '20米风速（m/s）', avg: '4.67', max: '22.04', min: '0.2'},
        {parameter: '30米风速（m/s）', avg: '5.03', max: '23.43', min: '0.25'},
        {parameter: '40米风速（m/s）', avg: '5.33', max: '24.46', min: '0.01'}
      ],
      /*逐月风速*/
      wsMonthTableData: {
        headerData: [// 表头
          {prop: '202205', label: '2022.5'},
          {prop: '202206', label: '2022.6'},
          {prop: '202207', label: '2022.7'},
          {prop: '202208', label: '2022.8'},
          {prop: '202209', label: '2022.9'},
          {prop: '202210', label: '2022.10'},
          {prop: '202211', label: '2022.11'},
          {prop: '202212', label: '2022.12'},
          {prop: '202301', label: '2023.1'},
          {prop: '202302', label: '2023.2'},
          {prop: '202303', label: '2023.3'},
          {prop: '202304', label: '2023.4'},
        ],
        mainData: [// 主体数据
          {
            'height': '10m',
            '202205': '4.84',
            '202206': '4.91',
            '202207': '4.66',
            '202208': '4.66',
            '202209': '4.66',
            '202210': '4.66',
            '202211': '4.66',
            '202212': '4.66',
            '202301': '4.66',
            '202302': '4.66',
            '202303': '4.66',
            '202304': '4.66'
          }
        ]
      },
      /*风功率密度列表*/
      wpdTableData: [
        {parameter: '10米风功率密度', avg: '124.24'},
        {parameter: '20米风功率密度', avg: '158.14'},
        {parameter: '30米风功率密度', avg: '192.02'},
        {parameter: '40米风功率密度', avg: '223.43'},
        {parameter: '50米风功率密度', avg: '251.92'},
      ]
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
.wsAndWpdPage{
  font-size: 20px;
}
.wsAndWpdPage h1, .wsAndWpdPage h2, .wsAndWpdPage h3 {
  font-weight: bold;
}

.pdfTableDiv {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.pdfTable {
  width: 100%;
  border: 1px solid;
  font-weight: bold;
  color: #000;
  font-size: 20px
}

.tableTitle {
  margin: 0 auto;
}

.tableTitle span {
  font-weight: bold;
}

.tableDiv /deep/ .el-table--border .el-table__cell {
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000;
}

.tableDiv /deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
  background-color: #ffffff;
  color: #000000;
  font-size: 20px;
}
</style>