| | |
| | | <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"> |
| | | <!-- --> |
| | |
| | | </el-tooltip> |
| | | </div> |
| | | </transition> |
| | | <Dialog ref="summarySheets" title="报表" > |
| | | <Dialog ref="summarySheets" title="报表" class="baoBiao" > |
| | | <tab-handover></tab-handover> |
| | | </Dialog> |
| | | <Dialog ref="warnDialog" title="预报警" > |
| | |
| | | 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 |
| | |
| | | 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; |
| | |
| | | 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; |
| | | } |
| | | } |
| | | |
| | |
| | | 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 { |
| | |
| | | height: 30px; |
| | | font-size: 30px; |
| | | } |
| | | |
| | | .el-dialog.el-dialog--center{ |
| | | left: 0.5rem; |
| | | top: 0.73979rem; |
| | | } |
| | | |
| | | } |
| | | </style> |