管线分析横截面

ChenZeping

2021-05-06 1929431aba55ed59dc09564fd1ee6c0fa3ec0a9f

 src/components/table/SummarySheet.vue

@@ -1,36 +1,36 @@
<template>
  <div class="summary-sheets">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn">
        <i class="el-icon-tickets icon"></i>
      </div>
    </el-tooltip>
    <transition name="animationChange">
      <div class="subtopic" v-if="subtopic">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
          <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('统计表')">
            <i class="icon iconfont iconbiaoge2"></i>
            <!--<span class="icon-name">统计表</span>-->
          </div>
    <div class="summary-sheets">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
            <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn">
                <i class="el-icon-tickets icon"></i>
            </div>
        </el-tooltip>
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
          <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('指标')">
            <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
            <i class="el-icon-office-building icon"></i>
          </div>
        </el-tooltip>
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
          <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('预报警')">
            <i class="icon iconfont iconbaojing01"></i>
            <!--<span class="icon-name">预报警</span>-->
          </div>
        </el-tooltip>
      </div>
    </transition>
    <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover>
    <Warn v-show="companyVisible" ref="titlePropWarn"></Warn>
    <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics>
  </div>
        <transition name="animationChange">
            <div class="subtopic" v-if="subtopic">
                <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
                    <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('统计表')">
                        <i class="icon iconfont iconbiaoge2"></i>
                        <!--<span class="icon-name">统计表</span>-->
                    </div>
                </el-tooltip>
                <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
                    <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('指标')">
                        <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
                        <i class="el-icon-office-building icon"></i>
                    </div>
                </el-tooltip>
                <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
                    <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('预报警')">
                        <i class="icon iconfont iconbaojing01"></i>
                        <!--<span class="icon-name">预报警</span>-->
                    </div>
                </el-tooltip>
            </div>
        </transition>
        <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover>
        <Warn v-show="companyVisible" ref="titlePropWarn"></Warn>
        <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics>
    </div>
</template>

<script>
@@ -56,26 +56,15 @@
      subtopic: false
    }
  },
  // mounted () {
  //   const that = this
  //   bus.$on('changeState', function (state) {
  //     if (state.num !== 2 && state.type) {
  //       that.subtopic = false
  //     }
  //   })
  //   this.$nextTick(() => {
  //     this.$refs.summarySheets.$on('closeDialog', () => {
  //       that.summaryVisible = false
  //     })
  //     this.$refs.warnDialog.$on('closeDialog', () => {
  //       that.warnVisible = false
  //     })
  //     this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
  //       that.companyVisible = false
  //     })
  //   })
  // },
  methods: {
    subtopicBtn () {
      this.subtopic = !this.subtopic
      const state = {
        type: this.subtopic,
        num: 2
      }
      bus.$emit('changeState', state)
    },
    closeBtn (item) {
      this.$refs.titleProp.refsDatatitle(item)
      this.summaryVisible = !this.summaryVisible
@@ -93,74 +82,66 @@
      this.warnVisible = !this.warnVisible
      this.summaryVisible = false
      this.companyVisible = false
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
      const state = {
        type: this.subtopic,
        num: 2
      }
      bus.$emit('changeState', state)
    }
  }
}
</script>

<style lang="less">
.summary-sheets {
  position: absolute;
  display: inline-flex;
  overflow: hidden;
  top: 0.42979rem;
  left: 0.14583rem;
  /*width: 850px;*/
  /*height: 265px;*/
  z-index: 500;
    .summary-sheets {
        position: absolute;
        display: inline-flex;
        overflow: hidden;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        z-index: 500;

  .subtopic {
    display: inline-flex;
        .subtopic {
            display: inline-flex;

    .iconBtn {
      margin-left: 0.03rem;
      border-color: #00fff6;
      color: #00fff6;
            .iconBtn {
                margin-left: 0.03rem;
                border-color: #00fff6;
                color: #00fff6;
            }

            .iconBtn.active-button {
                //border-color:#00fff6 !important;
                //color:#00fff6 !important;
            }
        }

        .dialog {
            //width: 800px;
            //height: 300px;
            position: absolute;
            top: 15%;
            left: 3rem;
        }

        .animationChange-enter-active, .animationChange-leave-active {
            transition: all 0.5s;
        }

        .animationChange-enter, .animationChange-leave-to {
            opacity: 0;
            transform: translateX(-100px);
        }

        /*color: #fff;*/

        .el-icon-c-scale-to-original {
            width: 30px;
            height: 30px;
            font-size: 30px;
        }

        .el-dialog.el-dialog--center {
            left: 0.5rem;
            top: 0.73979rem;
        }

    }

    .iconBtn.active-button {
      //border-color:#00fff6 !important;
      //color:#00fff6 !important;
    }
  }

  .dialog {
    //width: 800px;
    //height: 300px;
    position: absolute;
    top: 15%;
    left: 3rem;
  }

  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

  /*color: #fff;*/

  .el-icon-c-scale-to-original {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }

  .el-dialog.el-dialog--center {
    left: 0.5rem;
    top: 0.73979rem;
  }

}
</style>