Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

wangqi

2021-04-08 6a5c681cfad3b2fb1d5d52b7646f0baec6afabc5

 src/components/table/summarySheets.vue

@@ -1,35 +1,87 @@
<template>
    <div class="summary-sheets">
        <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
            <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
            <span class="icon-name">统计表</span>
  <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">
                <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
                <!--<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()" >
                <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" class="icon">
                <!--<span class="icon-name">预报警</span>-->
              </div>
            </el-tooltip>
        </div>
        <Dialog ref="summarySheets" title="企业指标分类统计">
          <tab-handover></tab-handover>
        </Dialog >
    </div>
    </transition>
    <Dialog ref="summarySheets" title="企业预警报警分类统计" >
      <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="企业预警报警分类统计" >
      <warn></warn>
    </Dialog>
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
      <index-statistics></index-statistics>
    </Dialog>
  </div>
</template>

<script>
import tabHandover from '@components/table/components/tabHandover'
import Dialog from '@views/popup/Dialog'
// import Dialog from '@views/popup/Dialog'
import Dialog from '../../views/popup/Dialog'
import Warn from './components/Warn'
import IndexStatistics from './components/IndexStatistics'

import '@/components/BaseNav/SolidWaste/directive/dir'

export default {
  name: 'summary-sheet.vue',
  components: {
    tabHandover,
    Dialog
    Dialog,
    Warn,
    IndexStatistics
    // Dialog
  },
  data () {
    return {
      summaryVisible: false
      summaryVisible: false,
      dialogShow: false,
      comp: Warn,
      warnVisible: false,
      companyVisible: false,
      subtopic: false
    }
  },
  methods: {
    closeBtn () {
      // const summary = document.getElementById('summary')
      // summary.style.display = 'none'
      this.$refs.summarySheets.show()
      this.summaryVisible = true
    },
    showWarnDialog () {
      this.$refs.warnDialog.show()
      this.warnVisible = true
    },
    showStatisDialog () {
      this.$refs.indexStatisticsDialog.show()
      this.companyVisible = true
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
    }
  },
  mounted () {
@@ -38,25 +90,63 @@
      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">
    .summary-sheets {
        position: absolute;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        z-index:500;
  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

        /*color: #fff;*/
       .el-icon-c-scale-to-original {
         width: 30px;
         height: 30px;
         font-size: 30px;
       }
  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

.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:#DCDFE6;
      color:#fff;
    }
    .iconBtn.active-button{
      border-color:#00fff6 !important;
      color:#00fff6 !important;
    }
  }

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

  /*color: #fff;*/

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