hb_sis_zhfx/src/views/HealthControl/healthLineChart2.vue

<template>
  <div class="health-7">
    <wt-chooser @change="switchWt" :wpId="wpId" :wtId="wtId"></wt-chooser>
    <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/health-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";
import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue";
import api from "@api/wisdomOverhaul/health/index.js";

export default {
  setup() {},
  components: {
    SvgIcon,
    Panel,
    VertivalBarLineChart,
    NormalLineChart,
    Table,
    WtChooser,
  },
  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,
      wpId: undefined,
      hisValue: {}, //健康走势图
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.wtId = this.$route.params.wtId;
      this.wpId = this.$route.params.wpId;
      this.requestCoulometry(2);
      this.requestHisValue();
      this.requestMttrrand();
    },
    switchWt(data) {
      this.$router.push(
        `/health/health4/healthLineChart2/${data.wpId}/${data.wtId}`
      );
      this.init();
    },
    // 未确认缺陷按钮下的健康趋势选项
    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) {
      api
        .findAllChartjz({
          wpId: 0,
          type: type,
        })
        .then((res) => {
          if (res.code == 200) {
            this.bardata.legend = ["优数量", "良数量", "差数量"];
            this.lineData = res.data.lvchart;
            this.bardata.area = res.data.datechart;
            this.bardata.data[2] = res.data.cslchart;
            this.bardata.data[1] = res.data.lslchart;
            this.bardata.data[0] = res.data.yslchart;
          }
        });

      // let that = this;
      // that.API.requestData({
      //   method: "POST",
      //   timeout: 8000,
      //   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() {
      api
        .healthsubFindWtHisValueForBj({
          wtId: this.wtId,
        })
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            data.time = data.time.slice(0, 65);
            this.hisValue = data;
          }
        });

      // 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() {
      api
        .healthsubGetWtMttrandMtbfByBj({
          wtId: this.wtId,
        })
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            this.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],
              },
            ];
          }
        });

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