hb_sis_zhfx/src/views/HealthControl/Health8.vue

<template>
  <div class="health-8">
    <div class="query mg-b-8">
      <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"
              @change="searchWindTurbineHealthList"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="table">
      <table style="width: 100%" border="0" cellspacing="0">
        <thead>
          <tr>
            <th rowspan="2" class="type1" style="width: 50px"></th>
            <th rowspan="2" class="type1" style="width: 105px">风机编号</th>
            <th rowspan="2" class="type1" style="width: 105px">风机型号</th>
            <th rowspan="2" class="type1" style="width: 350px">置信度</th>
            <th rowspan="2" class="type1" style="width: 100px">健康分数</th>
            <th
              rowspan="2"
              class="type1"
              style="border: 2px solid #07140f; border-left: 0"
            >
              未来风机健康程度
            </th>
            <th colspan="8">组件健康度</th>
          </tr>
          <tr>
            <th style="width: 100px">齿轮箱</th>
            <th style="width: 100px">发电机</th>
            <th style="width: 100px">主轴</th>
            <th style="width: 100px">变桨</th>
            <th style="width: 100px">偏航</th>
            <th style="width: 100px">机舱</th>
            <th style="width: 100px">变频器</th>
            <th style="width: 100px">主控</th>
          </tr>
        </thead>
      </table>
      <el-scrollbar>
        <div style="height: calc(100vh - 174px)">
          <table style="width: 100%" border="0" cellspacing="0">
            <tbody>
              <tr v-for="(item,index) in tableData" :key="index">
                <td style="width: 50px">{{item.id}}</td>
                <td style="width: 105px">{{item.wtname}}</td>
                <td style="width: 105px">{{item.model}}</td>
                <td style="width: 350px">
                  <div class="percent-item">
                    {{item.zxd}}%
                    <div class="percent-bar" style="">
                      <div class="percent-value" :style="{'width':`${item.zxd}%`}"></div>
                    </div>
                  </div>
                </td>
                <td class="score" style="width: 100px">
                  <div>{{item.score}}</div>
                </td>
                <td>
                  <table-line-chart :list='item.futureHealth'/>
                </td>
                <td class="item">
                  <div :class="[color(item.clx)]">{{item.clx}}</div>
                </td>
                <td class="item">
                  <div :class="[color(item.fdj)]">{{item.fdj}}</div>
                </td>
                <td class="item">
                  <div :class="[color(item.zz)]">{{item.zz}}</div>
                </td>
                <td class="item">
                  <div :class="[color(item.bj)]">{{item.bj}}</div>
                </td>
                <td class="item">
                  <div :class="[color(item.ph)]">{{item.ph}}</div>
                </td>
                <td class="item">
                  <div :class="[color(item.jc)]">{{item.jc}}</div>
                </td>
                <td class="item">
                  <div :class="[color(item.bpq)]">{{item.bpq}}</div>
                </td>
                <td class="item">
                  <div :class="[color(item.zk)]">{{item.zk}}</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import TableLineChart from "../../components/chart/line/table-line-chart.vue";
export default {
  setup() {},
  components: { TableLineChart },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value1: "",
      tableData:'',
      colorval:{
        '优':'purple',
        '良':'orange',
        '差':'red',
      }
    };
  },
  created() {
    this.search();
  },
  methods: {
    color(val){
     return this.colorval[val]
    },
    async search() {
      const {data} = await this.API.requestData({
        subUrl: "powercompare/windfarmAjax",
      });
      this.options = data.data
      this.value1 = data.data[0].id
      this.searchWindTurbineHealthList()
    },
    async searchWindTurbineHealthList(){
      const {data} = await this.API.requestData({
        subUrl: "wtHealthList/windTurbineHealthList",
        method: "POST", 
        data:{
          wpId : this.value1
        }
      });
        this.tableData = data.data
    }
  },
};
</script>

<style lang="less">
.health-8 {
  .table {
    tbody {
      tr:nth-child(2n) td {
        background-color: fade(@gray, 20%);

        &.item {
          background-color: transparent;
        }
      }
    }

    th {
      background: fade(@gray, 40);
      font-size: 12px;
      font-weight: 400;
      line-height: 24px;
      color: @gray-l;
      border: 2px solid #07140f;

      &.type1 {
        border-left: 0;
        border-right: 0;
      }
    }
    td {
      color: @gray-l;
      text-align: center;
      height: 26px;
      line-height: 26px;

      &.item {
        width: 100px;
        div {
          color: @white;
          background: fade(@gray, 20);
          margin: 2px;
          border: 1px solid transparent;

          &.green {
            color: @green;
            background: fade(@green, 20);
            border-color: @green;
          }

          &.purple {
            color: @purple;
            background: fade(@purple, 20);
            border-color: @purple;
          }

          &.orange {
            color: @orange;
            background: fade(@orange, 20);
            border-color: @orange;
          }

          &.red {
            color: @red;
            background: fade(@red, 20);
            border-color: @red;
          }
        }
      }
    }

    .percent-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;

      .percent-bar {
        height: 12px;
        width: 170px;
        background: transparent;
        border: 1px solid @gray-l;
        margin-left: 8px;

        .percent-value {
          height: calc(100% - 4px);
          background: @green;
          margin: 2px;
        }
      }
    }

    .score {
      width: 100px;
      div {
        background: fade(@gray, 20);
      }
    }
  }
}
</style>