hb_sis_zhfx/src/views/NewPages/alarm-center.vue

<template>
  <div class="alarm-center">
    <div class="action-bar">
      <div class="selections mg-b-16">
        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">发电机</div>
        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">齿轮箱</div>
        <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">变桨系统</div>
        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">液压站</div>
        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">风机震动</div>
        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 5 }">其他参数</div>
      </div>
      <div class="query mg-b-16">
        <div class="query-items">
          <div class="query-item">
            <div class="lable">风场：</div>
            <div class="search-input">
              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green">搜索</button>
        </div>
      </div>
    </div>
    <el-scrollbar>
      <div class="fj">
        <div class="fj-item" v-for="index in 25" :key="index">
          <div class="fj-title">风机编号:000</div>
          <div class="fj-info">
            <Table :data="tableData"></Table>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import Table from "../../components/coms/table/table.vue";
export default {
  components: { Table },
  data() {
    return {
      tableData: {
        column: [
          {
            name: "",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "desc",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            name: "发电机绕组U1温度",
            desc: "1234.56",
          },
        ],
      },
    };
  },
  methods: {
    tabSelect(tab) {},
  },
  created() {
    for (let i = 1; i < 7; i++) {
      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
    }
  },
};
</script>

<style lang="less">
.alarm-center {
  .action-bar {
    display: flex;

    .selections {
      flex: 1 0 auto;
      display: flex;

      .item {
        flex: 0 0 164px;
        text-align: center;
        height: 33px;
        line-height: 33px;
        margin-right: 8px;
        color: @font-color;
        font-size: @fontsize-s;
        background: fade(@gray, 20);
        border: 1px solid fade(@gray, 20);

        &:hover,
        &.active {
          background: fade(@green, 20);
          border: 1px solid @green;
          color: @green;
          cursor: pointer;
        }
      }
    }

    .query {
      flex: 1 0 0;
      justify-content: left;
    }
  }

  .fj {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100vh - 126px);

    .fj-item {
      flex: 0 0 calc(100% / 5 - 8px);
      outline: 1px solid fade(@gray, 50);
      margin-top: 8px;

      .fj-title {
        text-align: center;
        height: 30px;
        line-height: 30px;
        background: fade(@gray, 30);
        font-size: 12px;
        color: @gray-l;
      }

      thead {
        display: none;
      }

      & + .fj-item {
        margin-left: 8px;
      }

      &:nth-child(5n + 1) {
        margin-left: 0px;
      }
    }
  }
}
</style>