hb_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 active">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span> 24小时健康趋势 </span>
        </div>
        <div class="tab">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span> 7日健康趋势 </span>
        </div>
        <div class="tab">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </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="'310px'" />
        </panel>
      </div>
    </div>
    <div class="fc-info mg-b-16">
      <div class="fc-item">
        <div class="title">牛首山风场</div>
        <div class="tags">
          <div class="tag">
            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
              <svg-icon :svgid="'svg-duoyun'" />
            </i>
          </div>
          <div class="tag">
            <div class="tag-title">实时风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">预测风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（优）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（良）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（差）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
        </div>
        <div class="health-info">
          <div class="title">
            设备健康度
            <div class="actions">
              <div class="action active">
                <i class="svg-icon svg-icon-sm">
                  <svg-icon :svgid="'svg-wind-site'" />
                </i>
                比例
              </div>
              <div class="action">
                <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">
              <thermometer-chart :height="'120px'" :width="'80px'" />
              <dashboard :height="'150px'" :width="'150px'" />
            </div>
            <div class="device-list"></div>
          </div>
        </div>
      </div>
      <div class="fc-item">
        <div class="title">牛首山风场</div>
        <div class="tags">
          <div class="tag">
            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
              <svg-icon :svgid="'svg-duoyun'" />
            </i>
          </div>
          <div class="tag">
            <div class="tag-title">实时风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">预测风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（优）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（良）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（差）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
        </div>
        <div class="health-info">
          <div class="title">
            设备健康度
            <div class="actions">
              <div class="action active">
                <i class="svg-icon svg-icon-sm">
                  <svg-icon :svgid="'svg-wind-site'" />
                </i>
                比例
              </div>
              <div class="action">
                <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="false">
              <thermometer-chart :height="'120px'" :width="'80px'" />
              <dashboard :height="'150px'" :width="'150px'" />
            </div>
            <div class="device-list">
              <div class="item green">1号</div>
              <div class="item purple">1号</div>
              <div class="item orange">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
              <div class="item">1号</div>
            </div>
          </div>
        </div>
      </div>
      <div class="fc-item">
        <div class="title">牛首山风场</div>
        <div class="tags">
          <div class="tag">
            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
              <svg-icon :svgid="'svg-duoyun'" />
            </i>
          </div>
          <div class="tag">
            <div class="tag-title">实时风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">预测风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（优）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（良）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（差）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
        </div>
        <div class="health-info">
          <div class="title">
            设备健康度
            <div class="actions">
              <div class="action active">
                <i class="svg-icon svg-icon-sm">
                  <svg-icon :svgid="'svg-wind-site'" />
                </i>
                比例
              </div>
              <div class="action">
                <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">
              <thermometer-chart :height="'120px'" :width="'80px'" />
              <dashboard :height="'150px'" :width="'150px'" />
            </div>
            <div class="device-list"></div>
          </div>
        </div>
      </div>
      <div class="fc-item">
        <div class="title">牛首山风场</div>
        <div class="tags">
          <div class="tag">
            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
              <svg-icon :svgid="'svg-duoyun'" />
            </i>
          </div>
          <div class="tag">
            <div class="tag-title">实时风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">预测风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（优）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（良）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（差）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
        </div>
        <div class="health-info">
          <div class="title">
            设备健康度
            <div class="actions">
              <div class="action active">
                <i class="svg-icon svg-icon-sm">
                  <svg-icon :svgid="'svg-wind-site'" />
                </i>
                比例
              </div>
              <div class="action">
                <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">
              <thermometer-chart :height="'120px'" :width="'80px'" />
              <dashboard :height="'150px'" :width="'150px'" />
            </div>
            <div class="device-list"></div>
          </div>
        </div>
      </div>
      <div class="fc-item">
        <div class="title">牛首山风场</div>
        <div class="tags">
          <div class="tag">
            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
              <svg-icon :svgid="'svg-duoyun'" />
            </i>
          </div>
          <div class="tag">
            <div class="tag-title">实时风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">预测风速</div>
            <div class="tag-value">12.34<span class="unit">m/s</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（优）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（良）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
          <div class="tag">
            <div class="tag-title">健康度（差）</div>
            <div class="tag-value">12.34<span class="unit">台</span></div>
          </div>
        </div>
        <div class="health-info">
          <div class="title">
            设备健康度
            <div class="actions">
              <div class="action active">
                <i class="svg-icon svg-icon-sm">
                  <svg-icon :svgid="'svg-wind-site'" />
                </i>
                比例
              </div>
              <div class="action">
                <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">
              <thermometer-chart :height="'120px'" :width="'80px'" />
              <dashboard :height="'150px'" :width="'150px'" />
            </div>
            <div class="device-list"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="fc-list">
      <Table :data="tableData" />
    </div>
  </div>
</template>

<script>
import VertivalBarLineChart from "../../components/chart/combination/vertival-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 {
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "lqf",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "yggl",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "yyy",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "pcspp",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            name: "MG01-01",
            lqf: "0.1000",
            yggl: "0.1000",
            yyy: "0.10",
            pcspp: "0.1000",
            u1: "0.1000",
            u2: "0.1000",
            v1: "0.1000",
            v2: "0.1000",
            w1: "0.1000",
            w2: "0.1000",
            zca: "0.1000",
            zcb: "0.1000",
            clx: "0.1000",
            clx1: "0.1000",
            clx2: "0.1000",
            jc: "0.1000",
            hh: "0.1000",
            hj: "0.1000",
            is_light: false,
          },
        ],
      },
    };
  },
  created() {
    for (let i = 1; i < 20; i++) {
      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
      this.tableData.data[i].index = i + 1;
    }
  },
};
</script>

<style lang="less">
.health-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;
    }
  }
  // 风场信息
  .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;
      }

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

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