shanxi_power/src/views/IntegratedAlarm/safe/temperatureMonitoring/index.vue

<template>
  <div class="temperatureMonitoring">
    <div class="form-wrapper">
      <div class="search-wrapper">
        <div class="search-item">
          <span class="label">场站：</span>
          <div class="search-content">
            <el-select
              v-model="stationId"
              clearable
              size="mini"
              placeholder="全部"
              popper-class="select"
              @change="getWindturbineList"
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="btns">
            <el-button class="buttons" round size="mini">查询</el-button>
        </div>
      </div>
    </div>
    <div class="table-wrapper">
      <div class="leftContent" :data-type="$store.state.moreSty">
        <span>{{ pageTitle }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "temperatureMonitoring",
  data() {
    return {
        pageTitle: "温度监控",
        stationId: "",
        stationList: "",

    }
  },
  methods: {},
};
</script>

<style scoped lang="less">
.temperatureMonitoring {
  height: 100%;
  width: 100%;
  padding: 0 20px;
  padding-bottom: 10px;
  .form-wrapper ::v-deep {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    position: relative;
    .search-wrapper {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
      margin-bottom: 10px;
      .search-item {
        display: flex;
        margin-right: 10px;
        max-width: 450px;
        align-items: center;
        .label {
          margin-right: 10px;
          text-align: right;
          white-space: nowrap;
          // width: 60px;
        }
        .search-content {
          flex: 1;
        }
      }
    }

    .btns {
      margin-right: 10px;
    }

    .buttons {
      background-color: rgba(5, 187, 76, 0.2);
      border: 1px solid #3b6c53;
      color: #b3b3b3;
      font-size: 14px;

      &:hover {
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
      }
    }
  }
  .table-wrapper {
    height: calc(100% - 43px);
    width: 100%;
    .leftContent[data-type~="greenSty"] {
            background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
        }
        .leftContent[data-type~="blueSty"] {
            background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
        }
    .leftContent {
      width: 242px;
      height: 41px;
      display: flex;
      align-items: center;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 25px;
      }
    }
    .pagination-wrapper :deep {
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>