派生自 wuyushui/SewerAndRainNetwork

徐旺旺
2021-05-30 a312e0dd96d8f7e96fb3341f1a55561b12394405
src/components/table/summarySheets.vue
@@ -1,43 +1,43 @@
<template>
  <div class="summary-sheets">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",selectGroup ? "active-button" : ""]' @click="subtopicBtn" >
         <i class="el-icon-tickets icon"></i>
      </div>
    </el-tooltip>
    <transition name="animationChange">
        <div class="subtopic" v-show="selectGroup">
            <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>
    <Dialog ref="summarySheets" title="报表" class="baoBiao" >
      <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="预报警" >
      <warn></warn>
    </Dialog>
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计" >
      <index-statistics></index-statistics>
    </Dialog>
  </div>
    <div class="summary-sheets">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
            <div :class='["iconBtn",selectGroup ? "active-button" : ""]' @click="subtopicBtn">
                <i class="el-icon-tickets icon"></i>
            </div>
        </el-tooltip>
        <transition name="animationChange">
            <div class="subtopic" v-show="selectGroup">
                <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>
        <Dialog ref="summarySheets" title="报表" class="baoBiao">
            <tab-handover></tab-handover>
        </Dialog>
        <Dialog ref="warnDialog" title="预报警">
            <warn></warn>
        </Dialog>
        <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
            <index-statistics></index-statistics>
        </Dialog>
    </div>
</template>
<script>
@@ -51,6 +51,7 @@
// import '@/components/plugin/DialogDrag'
import bus from '@/eventBus'
export default {
  name: 'summary-sheet.vue',
  components: {
@@ -121,55 +122,60 @@
</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;
  .subtopic{
    display: inline-flex;
    .iconBtn{
      margin-left: 0.03rem;
      border-color:#00fff6;
      color:#00fff6;
    }
    .iconBtn.active-button{
      //border-color:#00fff6 !important;
      //color:#00fff6 !important;
    }
  }
    .summary-sheets {
        position: absolute;
        display: inline-flex;
        overflow: hidden;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        z-index: 500;
  .dialog {
    //width: 800px;
    //height: 300px;
    position: absolute;
    top: 15%;
    left: 3rem;
  }
    .animationChange-enter-active, .animationChange-leave-active {
        transition: all 0.5s;
    }
        .subtopic {
            display: inline-flex;
    .animationChange-enter, .animationChange-leave-to {
        opacity: 0;
        transform: translateX(-100px);
    }
  /*color: #fff;*/
            .iconBtn {
                margin-left: 0.03rem;
                border-color: #00fff6;
                color: #00fff6;
            }
  .el-icon-c-scale-to-original {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }
            .iconBtn.active-button {
                //border-color:#00fff6 !important;
                //color:#00fff6 !important;
            }
        }
        .el-dialog.el-dialog--center{
        .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>