派生自 wuyushui/SewerAndRainNetwork

陈泽平
2021-05-24 9ce740e0a9eb54c544febfd1f4213618a7ab20e3
src/components/table/summarySheets.vue
@@ -1,12 +1,12 @@
<template>
  <div class="summary-sheets">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn" >
      <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-if="subtopic">
        <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">
                  <!--  -->
@@ -28,7 +28,7 @@
            </el-tooltip>
        </div>
    </transition>
    <Dialog ref="summarySheets" title="报表" >
    <Dialog ref="summarySheets" title="报表" class="baoBiao" >
      <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="预报警" >
@@ -47,7 +47,7 @@
import Warn from './components/Warn'
import IndexStatistics from './components/IndexStatistics'
// import '@/components/BaseNav/SolidWaste/directive/dir'
// import '@/components/base-page/SolidWaste/directive/dir'
// import '@/components/plugin/DialogDrag'
import bus from '@/eventBus'
@@ -67,11 +67,35 @@
      comp: Warn,
      warnVisible: false,
      companyVisible: false,
      subtopic: false
      selectGroup: false
    }
  },
  mounted () {
    const that = this
    // 监听是否点击了当前图标按钮
    bus.$on('changeState', function (state) {
      if (state.num !== 2 && state.type) {
        that.selectGroup = false
      }
    })
    // 外部调用 与报警弹框
    bus.$on('forecastWarningDetails', function (state) {
      that.showWarnDialog()
    })
    // 子组件事件控制当前变量
    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: {
    closeBtn () {
      this.$refs.summarySheets.show()
      this.summaryVisible = true
@@ -85,46 +109,18 @@
      this.companyVisible = true
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
      this.selectGroup = !this.selectGroup
      const state = {
        type: this.subtopic,
        type: this.selectGroup,
        num: 2
      }
      bus.$emit('changeState', state)
    }
  },
  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
      })
    })
  }
}
</script>
<style scoped lang="less">
  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }
  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }
<style lang="less">
.summary-sheets {
  position: absolute;
  display: inline-flex;
@@ -138,12 +134,12 @@
    display: inline-flex;
    .iconBtn{
      margin-left: 0.03rem;
      border-color:#DCDFE6;
      color:#fff;
      border-color:#00fff6;
      color:#00fff6;
    }
    .iconBtn.active-button{
      border-color:#00fff6 !important;
      color:#00fff6 !important;
      //border-color:#00fff6 !important;
      //color:#00fff6 !important;
    }
  }
@@ -154,7 +150,14 @@
    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 {
@@ -162,5 +165,11 @@
    height: 30px;
    font-size: 30px;
  }
        .el-dialog.el-dialog--center{
            left: 0.5rem;
            top: 0.73979rem;
        }
}
</style>