jn_sis_zhfx/src/views/NewPages/dialogs.vue

<template>
  <div class="dialog">
    <div>
      <button class="btn" @click="dialogVisible = true">日信息对比</button>
      <button class="btn" @click="dialog2Visible = true">消缺跟踪弹窗</button>
      <button class="btn" @click="dialog3Visible = true">指标排行弹窗</button>
      <button class="btn" @click="dialog4Visible = true">故障诊断弹窗</button>
      <button class="btn" @click="showDet">消缺跟踪</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>
      <el-dialog title="风功率曲线" v-model="dialog3Visible" width="1400px" top="10vh" custom-class="modal" :close-on-click-modal="false">
        <ranking-pop />
      </el-dialog>
      <el-dialog title="故障诊断" v-model="dialog4Visible" width="1400px" top="10vh" custom-class="modal hide-header" :close-on-click-modal="false">
        <fault-diagnosis />
      </el-dialog>

      <defect-elimination-tracking ref="det" :show="showDefectEliminationTracking"></defect-elimination-tracking>
    </div>
  </div>
</template>

<script>
import Dayinfo from "../HealthControl/dayinfo.vue";
import DefectEliminationTracking from "../HealthControl/defect-elimination-tracking.vue";
import FaultDiagnosis from "../malfunctionRecall/components/fault-diagnosis.vue";
import RankingPop from "../HealthControl/ranking-pop.vue";
import Track from "../HealthControl/track.vue";
export default {
  setup() {},
  components: {
    Dayinfo,
    RankingPop,
    FaultDiagnosis,
    Track,
    DefectEliminationTracking,
  },
  data() {
    return {
      tabIndex: 0,
      dialogVisible: false,
      dialog2Visible: false,
      dialog3Visible: false,
      dialog4Visible: false,
      showDefectEliminationTracking: false,
    };
  },
  methods: {
    showDet() {
      this.$refs.det.show();
    },
    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;
      height: 33px;
      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;
        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;
    }
  }

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