sis_zhfx/src/views/HealthControl/Health7.vue

<template>
  <div class="health-7">
    <div class="power-info mg-b-16">
      <div class="info-tab">
        <div class="tab active">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-24-houre'" />
          </i>
          <span> 24小时健康趋势 </span>
        </div>
        <div class="tab">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-h-day'" />
          </i>
          <span> 7日健康趋势 </span>
        </div>
        <div class="tab">
          <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="'损失电量分析'">
          <vertival-bar-line-chart :height="'250px'" />
        </panel>
      </div>
    </div>
    <div class="fc-info mg-b-16">
      <panel :title="'健康走势图'" :showLine="false">
        <normal-line-chart :height="'250px'" />
      </panel>
    </div>
    <div class="data-list">
      <Table :data="tableData" :canScroll="false" />
    </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 {
      tableData: {
        column: [
          {
            name: "部件名称",
            field: "name",
          },
          {
            name: "备件数量",
            field: "v1",
            is_num: true,
          },
          {
            name: "平均间隔时间(h)",
            field: "v2",
            is_num: true,
          },
          {
            name: "平均消耗时间(h)",
            field: "v3",
            is_num: true,
          },
          {
            name: "预计作业时间(小时)",
            field: "v4",
            is_num: true,
          },
          {
            name: "损失电量统计",
            field: "v5",
            is_num: true,
          },
          {
            name: "当前状态",
            field: "v6",
            template: function(data) {
              if (data == 1) return "<div class='dot green'></div>";
              else return "<div class='dot yellow'></div>";
            },
          },
        ],
        data: [
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 1,
          },
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 1,
          },
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 1,
          },
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 1,
          },
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 1,
          },
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 2,
          },
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 2,
          },
          {
            name: "齿轮箱",
            v1: 15.78,
            v2: 12,
            v3: 2.3,
            v4: 231.23,
            v5: 123.23,
            v6: 2,
          },
        ],
      },
    };
  },
  created() {},
};
</script>

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

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

      &.green {
        background: @green;
      }

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