sis_zhfx/src/views/HealthControl/Health2.vue

<template>
  <div class="health-2">
    <div class="power-info mg-b-16">
      <div class="info-tab">
        <div class="tab" :class="type === '2' ? 'active' : ''" @click="changeDate('2')">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-h-day'" />
          </i>
          <span> 7日健康趋势 </span>
        </div>
        <div class="tab" :class="type === '3' ? 'active' : ''" @click="changeDate('3')">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-h-month'" />
          </i>
          <span>30日健康趋势</span>
        </div>
        <div class="empty"></div>
        <!-- <div class="tab">
          <span>全部风场健康趋势</span>
        </div> -->
      </div>
      <div class="info-chart">
        <!-- <panel class="info-chart-panel" :title="'损失电量分析'"> -->
           <panel class="info-chart-panel" :title="'健康趋势'">
          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'250px'" />
        </panel>
      </div>
    </div>
    <div class="fc-info mg-b-16">
      <div class="fc-item" v-for="(item, index) in wpmap" :key="index">
        <div class="title" @click="jumpUrl(item.wpId)">{{ item.name }}</div>
        <div class="tags">
          <div class="tag">
            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
              <svg-icon :svgid="item.svgIcon" />
            </i>
          </div>
          <div class="tag">
            <div class="tag-title">实时风速</div>
            <div class="tag-value">{{ item.sjfs }}<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">预测风速</div>
            <div class="tag-value">{{ item.ycfs }}<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（优）</div>
            <div class="tag-value">{{ item.ysl }}<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（良）</div>
            <div class="tag-value">{{ item.lsl }}<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（差）</div>
            <div class="tag-value">{{ item.csl }}<span class="unit">台</span></div>
          </div>
        </div>
        <div class="health-info">
          <div class="title">
            设备健康度
            <div class="actions">
              <div class="action" :class="item.showType === '1' ? 'active' : ''" @click="changeWpShowType(index, '1')">
                <i class="svg-icon svg-icon-sm">
                  <svg-icon :svgid="'svg-wind-site'" />
                </i>
                比例
              </div>
              <div class="action" :class="item.showType === '2' ? 'active' : ''" @click="changeWpShowType(index, '2')">
                <i class="svg-icon svg-icon-sm">
                  <svg-icon :svgid="'svg-wind-site'" />
                </i>
                风机号
              </div>
            </div>
          </div>
          <div class="info-body">
            <div class="proportion-info" v-show="item.showType === '1'">
              <thermometer-chart :value="item.jkd" :height="'120px'" :width="'80px'" />
              <dashboard :value="item.csl" :max="item.jrts" :height="'150px'" :width="'150px'" />
            </div>
             <div class="device-list" v-show="item.showType === '2'">
              <div class="item orange" v-for="(gzItem, gzIndex) in item.gzId" :key="gzIndex">{{ gzItem.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fc-list">
      <Table :data="tableData" />
    </div>
  </div>
</template>

<script>
import VertivalBarLineChart from "../../components/chart/combination/health-bar-line-chart.vue";
import Dashboard from "../../components/chart/other/Dashboard.vue";
import ThermometerChart from "../../components/chart/other/thermometer-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, ThermometerChart, Dashboard, Table },
  data() {
    return {
      type: "2",
      bardata: {
        area: [],
        legend: [],
        data: [[]],
      },
      wpmap: [],
      lineData: [],
      tableData: {
        column: [
          {
            name: "",
            field: "",
            is_num: false,
            is_light: false,
          },
          {
            name: "风机编号",
            field: "windTurbineId",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障时间",
            field: "stopTime",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障类型",
            field: "stopTypeId",
            is_num: false,
            is_light: false,
          },
          {
            name: "报警描述",
            field: "warningId",
            is_num: false,
            is_light: false,
          },
        ],
        data: [],
      },
    };
  },
  created() {
    this.requestData();
    this.getAllMap();
  },

  methods: {
    // 获取顶部柱状图数据
    requestData() {
      let that = this;
      that.API.requestData({
        method: "POST",
        timeout: 8000,
        subUrl: "recommen/findAllChartjz",
        data: {
          wpId: "0",
          type: that.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;
          }
        },
      });
    },

    getAllMap() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthmain/findAllMap",
        success(res) {
          res.data.wpmap.forEach((ele) => {
            if (ele.tqyb < 10) ele.tqyb = "0" + ele.tqyb;
            ele.showType = "1";
            ele.svgIcon = "svg-" + ele.tqyb;
          });

          that.wpmap = res.data.wpmap;

          that.tableData.data = res.data.gzls;
        },
      });
    },

    // 改变风场显示类型
    changeWpShowType(index, showType) {
      this.wpmap[index].showType = showType;
    },

    changeDate(type) {
      this.type = type;
      this.requestData();
    },

    // 页面跳转
    jumpUrl(wpId) {
      this.$router.push({
        path: `/health/health3/${wpId}`,
      });
    },
  },
};
</script>

<style lang="less">
.health-2 {
  // 电量健康情况
  .power-info {
    display: flex;
    .info-tab {
      flex: 0 0 156px;
      display: flex;
      flex-direction: column;
      height: 287px;
      margin-right: 1.4815vh;

      .tab {
        position: relative;
        flex: 0 0 auto;
        text-align: center;
        height: 33px;
        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;
    }
  }
  // 风场信息
  .fc-info {
    display: flex;
    flex-wrap: wrap;

    //
    .fc-item {
      flex: 1 0 calc(100% / 5 - 8px);

      & > .title {
        background: fade(@gray, 20);
        padding: 0 1.4815vh;
        line-height: 27px;
        color: fade(@white, 75);
        font-size: @fontsize-s;
        margin-bottom: 0.7407vh;
        cursor: pointer;
      }

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

      .tags {
        display: flex;
        flex-wrap: wrap;

        .tag {
          flex: 1 0 calc(100% / 3 - 8px);
          background: fade(@gray, 20);
          margin-bottom: 8px;

          .tag-title {
            font-size: 12px;
            color: @gray-l;
            line-height: 24px;
            background: fade(@gray, 40);
            text-align: center;
          }

          .tag-value {
            position: relative;
            font-size: 20px;
            color: @green;
            text-align: center;
            padding: 12px 0;
            .unit {
              position: absolute;
              color: @gray;
              font-size: 12px;
              bottom: 8px;
              right: 8px;
            }
          }

          & + .tag {
            margin-left: 8px;
          }

          &:nth-child(1) {
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              width: 56px;
              height: 56px;
              svg {
                width: 56px;
                height: 56px;
              }
            }
          }

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

      .health-info {
        .title {
          line-height: 24px;
          color: @gray-l;
          background: fade(@gray, 40);
          padding: 0 16px;
          font-size: 12px;

          .actions {
            float: right;
            display: flex;

            .action {
              display: flex;
              align-items: center;

              i {
                margin-right: 0.3704vh;
              }

              & + .action {
                margin-left: 1.4815vh;
              }

              &.active,
              &:hover {
                cursor: pointer;
                color: @green;

                svg use {
                  fill: @green;
                }
              }
            }
          }
        }

        .info-body {
          height: 170px;
          background: fade(@gray, 20);

          .proportion-info {
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
          }

          .device-list {
            display: flex;
            flex-wrap: wrap;
            padding: 8px 16px;

            .item {
              flex: 1 0 64px;
              line-height: 26px;
              background: fade(@gray, 20);
              color: @gray-l;
              font-size: 12px;
              margin-bottom: 4px;
              text-align: center;
              border: 1px solid transparent;

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

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

              &.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;
              }
            }

            .blank {
              flex: 1 0 64px;
              margin-left: 4px;

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

  // 列表
  .fc-list {
    .com-table thead tr th {
      padding: 4px 0;
    }
    tbody {
      height: calc(100vh - 820px);
    }
    th,
    td {
      &:nth-child(1) {
        width: 32px;
      }
    }
  }
}
</style>