hb_sis_zhfx/src/views/HealthControl/healthLineChart2.vue

<template>
  <div class="health-7">
    <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="fc-info mg-b-16">
      <panel :title="'健康走势图'" :showLine="false">
        <normal-line-chart :height="'150px'" />
      </panel>
    </div>
    <div class="data-list">
      <Table :data="tableData" :canScroll="true" />
    </div>
  </div>
</template>

<script>
import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
export default {
  setup() {},
  components: { SvgIcon, Panel, VertivalBarLineChart, NormalLineChart, Table },
  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"},
      ],
      tableData: {
        column: [
          { name: "部件名称",field: "name" },
          { name: "MTBF（h）",field: "v1", is_num: true },
          { name: "MTTR（h）",field: "v2", is_num: true },
          { name: "损失电量（kw/h）",field: "v3",is_num: true },
          { name: "当前状态",field: "v4",
            template: function(data) {
              if (data == 1) return "<div class='dot green'></div>";
              else if (data == 2) return "<div class='dot purple'></div>";
              else if (data == 3) return "<div class='dot yellow'></div>";
              else if (data == 4) return "<div class='dot orange'></div>";
            },
          },
        ],
        data: [],
      },
      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
      lineData: [],
      wtId: undefined,
      hisValue: {},  //健康走势图
    };
  },
  created() {
    this.wtId = this.$route.params.wtId;
    this.requestCoulometry(2)
    this.requestHisValue()
    this.requestMttrrand()
  },
  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;
          }
        },
      });
    },
    //风机健康走势图
    requestHisValue(){
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthsub/findWtHisValueForBj",
        data: { wtId: that.wtId },
        success(res) {
          if(res.code == 200){
            let data = res.data;
            data.time = data.time.slice(0, 65)
            that.hisValue = data
          }
        },
      });
    },
    //部件健康情况
    requestMttrrand(){
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthsub/getWtMttrandMtbfByBj",
        data: { wtId: that.wtId },
        success(res) {
          if(res.code == 200){
            let data = res.data;
            that.tableData.data = [
              {name:data.clx[1], v1:data.clx[4], v2:data.clx[5], v3:data.clx[6], v4:data.clx[0]},
              {name:data.fdj[1], v1:data.fdj[4], v2:data.fdj[5], v3:data.fdj[6], v4:data.fdj[0]},
              {name:data.bj[1], v1:data.bj[4], v2:data.bj[5], v3:data.bj[6], v4:data.bj[0]},
              {name:data.zk[1], v1:data.zk[4], v2:data.zk[5], v3:data.zk[6], v4:data.zk[0]},
              {name:data.zz[1], v1:data.zz[4], v2:data.zz[5], v3:data.zz[6], v4:data.zz[0]},
              {name:data.ph[1], v1:data.ph[4], v2:data.ph[5], v3:data.ph[6], v4:data.ph[0]},
              {name:data.jc[1], v1:data.jc[4], v2:data.jc[5], v3:data.jc[6], v4:data.jc[0]},
              {name:data.bpq[1], v1:data.bpq[4], v2:data.bpq[5], v3:data.bpq[6], v4:data.bpq[0]},
            ]
          }
        },
      });
    }
  }
};
</script>

<style lang="less">
.health-7 {
  // 电量健康情况
  .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;
    }
  }

  .data-list {
    .dot {
      width: 12px;
      height: 12px;
      margin: auto;

      &.green {
        background: @green;
      }

      &.purple {
        background: @purple;
      }

      &.yellow {
        background: @yellow;
      }

      &.orange {
        background: @orange;
      }
    }
  }
}
</style>