jn_sis_zhfx/src/views/powerGenerating/index.vue

<template>
  <router-view />
</template>

<script>
export default {
  name: "powerGenerating", //发电能力分析
};
</script>

<style lang="less">
//公共边框阴影
.card-shadow {
  border-radius: 10px;
  box-shadow: 0 1px 3px 0 rgba(5, 187, 76, 1),
    0 1px 2px -1px rgba(5, 187, 76, 1);
}

// 公共标题样式
.wrapper {
  position: relative;
  .card-title {
    position: absolute;
    top: -10px;
  }
}
//发电能力分析模块公共样式
.container-wrapper {
  height: 100%;
  width: calc(100% - 20px * 2);
  margin: 0 20px;
  padding: 10px 0;
  .power-data-wrapper {
    height: calc(100% - 58px - 20px - 20px);
    margin-top: 20px;
    width: 100%;
    background: #161f1e;
    padding: 20px;
    padding-bottom: 12px;

    .data-wrapper {
      height: 100%;
      display: flex;
      .tree-wrapper {
        width: 20%;
        margin-right: 20px;
      }
      .excel-wrapper{
         width: 18%;
      }
      .data-left-wrapper {
        display: flex;
        width: 22%;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 20px;
        .tree-wrapper {
          width: 100%;
          margin-right: 0;
        }
        .tree-height {
          height: calc(50% - 10px);
          width: 100%;
        }
      }
      .data-excel-wrapper {
        display: flex;
        width: 22%;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 20px;
        .excel-height {
          height: calc(50% - 10px);
          width: 100%;
        }
        .excel-wrapper {
          width: 100%;
          margin-right: 0;
        }
      }
      .data-chart-wrapper {
        width: calc(62% - 40px);
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .data-chart-item {
          width: calc(50% - 10px);
          height: calc(50% - 10px);
          padding: 10px;
          position: relative;
          .zoom-icon {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 2;
            cursor: pointer;
          }
        }
        .mb-10 {
          margin-bottom: 10px;
        }
      }
      .data-table-wrapper {
        width: calc(58% - 40px);
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;
        position: relative;
        .submit-btn,
        .submit-btns {
          position: absolute;
          z-index: 2;
          top: 10px;
          right: 10px;
        }
        .data-table-chart {
          height: 100%;
          padding: 10px;
        }
      }
    }
  }
}
//发电能力分析search组件公共样式
.operation-wrapper {
  background: #161f1e;
  padding: 20px;
  padding-bottom: 12px;
}
::v-deep.operation-form .el-checkbox {
  .el-checkbox__input {
    display: block !important;
  }
}
.buttons {
  max-width: 120px;
  background-color: rgba(5, 187, 76, 0.2);
  border: 1px solid #3b6c53;
  color: #b3b3b3;
  font-size: 14px;

  &:hover {
    background-color: rgba(5, 187, 76, 0.5);
    color: #ffffff;
  }
}
</style>