jn_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.aname"
                :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 class="to" style="width: 50px">{{ item.id }}</td>
                <td class="to" style="width: 110px">{{ item.nemCode }}</td>
                <td class="to" style="width: 105px">{{ item.model }}</td>
                <td class="to" style="width: 300px">
                  <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
                    :width="'370px'"
                    :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";
import api from "@api/wisdomOverhaul/health/index.js";
import axios from "axios";
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",
      },
    };
    futureHealth: null;
  },
  created() {
    this.search();
  },
  methods: {
    color(val) {
      return this.colorval[val];
    },
    async search() {
      axios({
        method: "get",
        baseURL: process.env.VUE_APP_API,
        url: `/benchmarking/wpByCplist?companyids=SXJ_RGN&type=-1`,
      }).then((res) => {
        if (res.data.data.code === 200) {
          this.options = res.data.data?.data || [];
          this.value1 = this?.options?.[0].id || "";
          this.searchWindTurbineHealthList();
        }
      });
    },
    async searchWindTurbineHealthList() {
      const { data } = await api.wtHealthListWindTurbineHealthList({
        wpId: this.value1,
      });
      this.tableData = data;
      data.forEach((k) => {
        let arr = [];
        k.futureHealth.forEach((e, index) => {
          let obj = {
            text: index,
            value: e,
          };
          arr.push(obj);
        });
        k.futureHealth = arr;
      });
    },
  },
};
</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;
          }
        }
      }

      &.to {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .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>