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

<template>
  <div class="alarm-center">
    <div class="action-bar">
      <div class="selections mg-b-16">
        <div v-for="(tabItem, tabIndex) in tabLists" :key="tabItem.type" class="item" :class="{ active: tabIndex == cureent }" @click="tabSelect(tabItem.type, tabIndex)">
          {{ tabItem.name }}
        </div>
        <!-- <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="optSelectValue" clearable placeholder="请选择" popper-class="select" @change="handelSelectChange">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="handelSelectChange">搜索</button>
        </div>
      </div>
    </div>
    <el-scrollbar>
      <div class="fj">
        <div class="fj-item" v-for="(item, index) in tableLists" :key="index">
          <div class="fj-title">风机编号:{{ item[0].wtId }}</div>
          <div class="fj-info">
            <Table :data="handleTable(item)"></Table>
          </div>
        </div>
      </div>
      <!-- <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 {
      cureent: 0,
      optSelectValue: "",
      tabLists: [
        {
          type: "fdj",
          name: "发电机",
        },
        {
          type: "clx",
          name: "齿轮箱",
        },
        {
          type: "bj",
          name: "变桨系统",
        },
        {
          type: "yyz",
          name: "液压站",
        },
        {
          type: "zd",
          name: "风机震动",
        },
        {
          type: "qt",
          name: "其他参数",
        },
      ],
      // tableData: {
      //   column: [
      //     {
      //       name: "",
      //       field: "name",
      //       is_num: false,
      //       is_light: false,
      //     },
      //     {
      //       name: "",
      //       field: "value",
      //       is_num: false,
      //       is_light: false,
      //     },
      //   ],
      //   data: [
      //     // {
      //     //   name: "发电机绕组U1温度",
      //     //   desc: "1234.56",
      //     // },
      //   ],
      // },
      tableLists: [],
      options: [],
      type: "",
      timmer: null, // 遮罩开关
    };
  },
  methods: {
    tabSelect(type, index) {
      this.cureent = index;
      this.type = type;
      this.getList(true);
    },
    handleTable(item) {
      let tableData = {
        column: [
          {
            name: "",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "value",
            is_num: false,
            is_light: false,
          },
        ],
        data: item,
      };
      return tableData;
    },
    handelSelectChange() {
      this.getList(true);
    },
    getList(showLoading) {
      let _this = this;
      _this.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "/temperature/getTemperatureList",
        data: {
          type: this.type,
          wpId: this.optSelectValue,
        },
        success(res) {
          _this.tableLists = res.data;
          // this.tableData.data = res.data
          // debugger
          console.log(res);
        },
      });
    },

    getSelectLists(showLoading) {
      let _this = this;
      _this.API.requestData({
        showLoading,
        method: "GET",
        subUrl: "/powercompare/windfarmAjax",
        success(res) {
          _this.options = res.data;
          _this.optSelectValue = res.data[0].id;
          _this.$nextTick(() => {
            _this.getList(false);
            _this.timmer = setInterval(() => {
              _this.getList(false);
            }, _this.$store.state.websocketTimeSec);
          });
        },
      });
    },
  },
  created() {
    // for (let i = 1; i < 7; i++) {
    //   this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
    // }
    this.type = this.tabLists[0].type;
    this.getSelectLists(false);

    // this.getList()
  },

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</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>