hb_sis_zhfx/src/views/HealthControl/HealthTab2.vue

<template>
  <div class="health-tab-2">
    <div class="power-info mg-b-16">
      <div class="info-tab">
        <div
          class="tab"
          v-for="(item, index) in infoList"
          :key="index"
          :class="item.active ? 'active' : ''"
          @click="onClickInfo(item)"
        >
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="item.svgid" />
          </i>
          <span> {{ item.title }} </span>
        </div>
        <div class="empty"></div>
      </div>
      <div class="info-chart">
        <panel class="info-chart-panel" :title="'健康趋势'">
          <vertival-bar-line-chart
            :height="'310px'"
            :bardata="bardata"
            :lineData="lineData"
          />
        </panel>
      </div>
    </div>
    <div class="health-report">
      <panel class="health-report-panel" :title="'已推荐风机'" :showLine="false">
        <div class="report-items scroll">
          <div class="item" v-for="(item, index) in recommenList" :key="index">
            <div class="title">风机编号：{{ item.wtid }}</div>
            <div class="info">
              <p>推荐理由：{{ item.reason }}</p>
              <p>推荐检修时间：{{ new Date(item.recodedate).formatDate("yyyy-MM-dd hh:mm:ss") }}</p>
              <p>推荐时间对应风速：{{ item.speed }} m/s</p>
              <p>判断时间：{{ new Date(item.createdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</p>
            </div>
          </div>
        </div>
      </panel>
    </div>
  </div>
</template>

<script>
import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";

export default {
  components: { SvgIcon, Panel, VertivalBarLineChart },
  data() {
    return {
      infoList: [
        // {title: '24小时健康趋势', svgid: 'svg-24-houre', active: false, type: 'houre'},
        { title: "7日健康趋势", svgid: "svg-h-day", active: true, type: "day" },
        { title: "30日健康趋势", svgid: "svg-h-month", active: false, type: "month"},
      ],
      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
      lineData: [],
      recommenList: [], // 健康报告推荐
    };
  },
  created() {
    this.requestCoulometry(2);
    this.requestRecommen();
  },
  methods: {
    // 未确认缺陷按钮下的健康趋势选项
    onClickInfo(item) {
      this.infoList.forEach((element) => {
        if (item.type == element.type) {
          item.active = true;
          switch (item.type) {
            case "day":
              this.requestCoulometry(2);
              break;
            case "month":
              this.requestCoulometry(3);
          }
        } else {
          element.active = false;
        }
      });
    },
    // 损失电量分析  type：1 表示24小时健康趋势，2 表示七天健康趋势 3 表示30天健康趋势
    requestCoulometry(type) {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "recommen/findAllChartjz",
        data: { wpId: 0, type: type },
        success(res) {
          if (res.code == 200) {
            that.bardata.legend = ["优数量", "良数量", "差数量"];
            that.lineData = res.data.lvchart;
            that.bardata.area = res.data.datechart;
            that.bardata.data[2] = res.data.cslchart;
            that.bardata.data[1] = res.data.lslchart;
            that.bardata.data[0] = res.data.yslchart;
          }
        },
      });
    },
     // 已确认健康报告推荐
    requestRecommen() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: 'recommen/recommenConfirmedList',
        success(res) {
          if (res.code == 200) that.recommenList = res.data;
        },
      });
    },
  },
};
</script>


<style lang="less" scoped>
.health-tab-2 {
  .power-info {
    display: flex;
    .info-tab {
      flex: 0 0 156px;
      display: flex;
      flex-direction: column;
      height: 350px;
      margin-right: 1.4815vh;

      .tab {
        position: relative;
        flex: 0 0 auto;
        text-align: center;
        line-height: 33px;
        margin-right: 8px;
        color: @gray-l;
        font-size: 12px;
        background: fade(@gray, 20);
        border: 1px solid fade(@gray, 20);

        display: flex;
        align-items: center;

        i {
          margin: 0 1.4815vh;
          svg use {
            fill: @gray-l;
          }
        }

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

          i svg use {
            fill: @green;
          }
        }

        &.active::after {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          right: -19px;
          padding: 0;
          border-bottom: 9px solid @green;
          border-top: 9px solid transparent;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          display: block;
          content: "";
          z-index: 10;
          transform: rotate(90deg);
        }

        &.active::before {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          right: -17px;
          padding: 0;
          border-bottom: 9px solid #063319;
          border-top: 9px solid transparent;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          display: block;
          content: "";
          z-index: 12;
          transform: rotate(90deg);
        }

        & + .tab {
          margin-top: 0.7407vh;
        }

        &:last-child {
          text-align: center;
          justify-content: center;
        }
      }

      .empty {
        flex: 1 0 auto;
      }
    }

    .info-chart {
      flex: 1 0 auto;
    }
  }

  .health-report {
    .report-items {
      display: flex;
      flex-wrap: wrap;
      height: calc(100vh - 592px);

      .item {
        flex: 0 0 calc(100% / 6 - 16px);
        margin-bottom: 16px;

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

        &:nth-child(6n + 1) {
          margin-left: 0px;
        }

        .title {
          background: fade(@gray, 40);
          // color: fade(@white, 75);
          color: @gray-l;
          line-height: 37px;
          padding-left: 16px;
          font-size: @fontsize-s;
        }

        .info {
          background: fade(@gray, 20);
          padding: 16px;
          font-size: @fontsize-s;
          color: @font-color;
          line-height: 1.5;
          p {
            margin: 0;
            line-height: 2;
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
          }

          .actions {
            display: flex;
            align-items: center;
            justify-content: center;

            .success {
              border-color: #05bb4c;
              color: #05bb4c;
              background: rgba(5, 187, 76, 0.2);
            }
          }
        }
      }
    }
  }
}
</style>