sis_zhfx/src/views/HealthControl/Health1.vue

<template>
  <div class="health-1">
    <div class="selections mg-b-16">
      <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">未确认缺陷</div>
      <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">未确认缺陷</div>
      <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">未确认缺陷</div>
      <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">未确认缺陷</div>
    </div>
    <div v-if="tabIndex == 0">
      <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="'310px'" />
          </panel>
        </div>
      </div>
      <div class="health-report">
        <panel class="health-report-panel" :title="'健康报告'" :showLine="false">
          <div class="actions mg-b-16">
            <div class="item green">当日内推荐</div>
            <div class="item purple">三日内推荐</div>
            <div class="item gray">超三日推荐</div>
          </div>
          <el-scrollbar>
            <div class="report-items">
              <div class="item">
                <div class="title">风机编号：QG01_04</div>
                <div class="info">
                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
                  <p>推荐检修时间：2021-06-04 16:00:00</p>
                  <p>推荐时间对应风速：2.4</p>
                  <p>判断时间：2021-05-27 08:20:00</p>
                  <div class="actions mg-t-16">
                    <button class="btn success">
                      <i class="fa fa-check"></i>
                      提交
                    </button>
                    <button class="btn">
                      <i class="fa fa-close"></i>
                      取消
                    </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="title">风机编号：QG01_04</div>
                <div class="info">
                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
                  <p>推荐检修时间：2021-06-04 16:00:00</p>
                  <p>推荐时间对应风速：2.4</p>
                  <p>判断时间：2021-05-27 08:20:00</p>
                  <div class="actions mg-t-16">
                    <button class="btn success">
                      <i class="fa fa-check"></i>
                      提交
                    </button>
                    <button class="btn">
                      <i class="fa fa-close"></i>
                      取消
                    </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="title">风机编号：QG01_04</div>
                <div class="info">
                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
                  <p>推荐检修时间：2021-06-04 16:00:00</p>
                  <p>推荐时间对应风速：2.4</p>
                  <p>判断时间：2021-05-27 08:20:00</p>
                  <div class="actions mg-t-16">
                    <button class="btn success">
                      <i class="fa fa-check"></i>
                      提交
                    </button>
                    <button class="btn">
                      <i class="fa fa-close"></i>
                      取消
                    </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="title">风机编号：QG01_04</div>
                <div class="info">
                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
                  <p>推荐检修时间：2021-06-04 16:00:00</p>
                  <p>推荐时间对应风速：2.4</p>
                  <p>判断时间：2021-05-27 08:20:00</p>
                  <div class="actions mg-t-16">
                    <button class="btn success">
                      <i class="fa fa-check"></i>
                      提交
                    </button>
                    <button class="btn">
                      <i class="fa fa-close"></i>
                      取消
                    </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="title">风机编号：QG01_04</div>
                <div class="info">
                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
                  <p>推荐检修时间：2021-06-04 16:00:00</p>
                  <p>推荐时间对应风速：2.4</p>
                  <p>判断时间：2021-05-27 08:20:00</p>
                  <div class="actions mg-t-16">
                    <button class="btn success">
                      <i class="fa fa-check"></i>
                      提交
                    </button>
                    <button class="btn">
                      <i class="fa fa-close"></i>
                      取消
                    </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="title">风机编号：QG01_04</div>
                <div class="info">
                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
                  <p>推荐检修时间：2021-06-04 16:00:00</p>
                  <p>推荐时间对应风速：2.4</p>
                  <p>判断时间：2021-05-27 08:20:00</p>
                  <div class="actions mg-t-16">
                    <button class="btn success">
                      <i class="fa fa-check"></i>
                      提交
                    </button>
                    <button class="btn">
                      <i class="fa fa-close"></i>
                      取消
                    </button>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="title">风机编号：QG01_04</div>
                <div class="info">
                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
                  <p>推荐检修时间：2021-06-04 16:00:00</p>
                  <p>推荐时间对应风速：2.4</p>
                  <p>判断时间：2021-05-27 08:20:00</p>
                  <div class="actions mg-t-16">
                    <button class="btn success">
                      <i class="fa fa-check"></i>
                      提交
                    </button>
                    <button class="btn">
                      <i class="fa fa-close"></i>
                      取消
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </panel>
      </div>
    </div>
    <div v-if="tabIndex == 1">
      <health-2 />
    </div>
    <div v-if="tabIndex == 2">
      <button class="btn" @click="dialogVisible = true">点击弹窗</button>
      <button class="btn" @click="dialog2Visible = true">消缺跟踪弹窗</button>
      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
        <dayinfo />
      </el-dialog>
      <el-dialog title="消缺跟踪" v-model="dialog2Visible" width="1400px" top="10vh" custom-class="modal" :close-on-click-modal="false">
        <Track />
      </el-dialog>
      <button class="btn" @click="showMessage">消息提醒</button>
      <button class="btn" @click="showComfirm">操作确认</button>
    </div>
    <div v-if="tabIndex == 3">
      tab4
    </div>
  </div>
</template>

<script>
import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import Dayinfo from "./dayinfo.vue";
import Health2 from "./Health2.vue";
import Track from "./track.vue";
export default {
  setup() {},
  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo, Track },
  data() {
    return {
      tabIndex: 0,
      dialogVisible: false,
      dialog2Visible: false,
    };
  },
  methods: {
    tabSelect(state) {
      this.tabIndex = state;
    },
    showMessage() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });

          // this.$message({
          //   type: "warning",
          //   message: `action: ${action}`,
          // });

          // this.$message({
          //   type: "success",
          //   message: `action: ${action}`,
          // });

          // this.$message({
          //   type: "error",
          //   message: `action: ${action}`,
          // });
        },
      });
    },
    showComfirm() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less">
.health-1 {
  .selections {
    display: flex;

    .item {
      flex: 0 0 128px;
      text-align: center;
      line-height: 33px;
      margin-right: 8px;
      color: @font-color;
      font-size: @fontsize-s;
      background: fade(@gray, 20);
      border: 1px solid fade(@gray, 20);

      &:hover,
      &.active {
        background: fade(@green, 20);
        border: 1px solid @green;
        color: @green;
        cursor: pointer;
      }
    }
  }

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

  .health-report {
    // 健康报告 按钮样式
    .actions {
      display: flex;

      .item {
        flex: 0 0 102px;
        text-align: center;
        line-height: 33px;
        margin-right: 8px;
        color: fade(@white, 75);
        font-size: @fontsize-s;

        &.green {
          background: @green;
        }

        &.purple {
          background: @purple;
        }

        &.gray {
          background: @gray;
        }
      }
    }

    .report-items {
      display: flex;
      flex-wrap: wrap;
      height: calc(100vh - 592px);

      .item {
        flex: 0 0 calc(100% / 6 - 16px);
        margin-bottom: 16px;

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

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

        .title {
          background: fade(@gray, 40);
          // color: fade(@white, 75);
          color: @gray-l;
          line-height: 37px;
          padding-left: 16px;
          font-size: @fontsize-s;
        }

        .info {
          background: fade(@gray, 20);
          padding: 16px;
          font-size: @fontsize-s;
          color: @font-color;
          line-height: 1.5;

          p {
            margin: 0;
            line-height: 2;
          }

          .actions {
            display: flex;
            align-items: center;
            justify-content: center;

            .success {
              border-color: #05bb4c;
              color: #05bb4c;
              background: rgba(5, 187, 76, 0.2);
            }
          }
        }
      }
    }
  }
}
</style>