~xingchuan/SewerAndRainNetwork.git

			@@ -1,62 +1,187 @@
			<template>
			<div class="summary-sheets">
			<div :class='["iconBtn",summaryVisible ? "active" : ""]' @click="closeBtn"><span><img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" width="26px" style="display: block;margin: auto"><span class="icon-name">统计表</span></span></div>
			<Dialog ref="summarySheets" title="企业指标分类统计">
			<tab-handover></tab-handover>
			</Dialog >
			<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>
			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/base-page/SolidWaste/directive/dir'
			// import '@/components/plugin/DialogDrag'

			import bus from '@/eventBus'

			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,
			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 () {
			// 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.selectGroup = !this.selectGroup
			const state = {
			type: this.selectGroup,
			num: 2
			}
			bus.$emit('changeState', state)
			}
			}
			}
			</script>

			<style scoped lang="less">
			<style lang="less">
			.summary-sheets {
			position: absolute;
			top: 70px;
			left: 1px;
			display: inline-flex;
			overflow: hidden;
			top: 0.42979rem;
			left: 0.14583rem;
			/width: 850px;/
			/height: 265px;/
			z-index:2000;
			z-index: 500;
			.el-dialog__header {
			padding: 10px 20px 10px !important;
			.el-dialog__headerbtn{
			top: 16px;
			right: 16px;
			}
			}
			.subtopic {
			display: inline-flex;

			.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;
			}
			.iconBtn {
			width:45px;
			text-align: center;
			background: rgba(0, 16, 30, 0.5);
			cursor: pointer;
			color: #00fff6;
			border: 0.00521rem solid #00fff6;
			box-shadow: 0 0 0.03rem #00fff6;

			.el-icon-c-scale-to-original {
			width: 30px;
			height: 30px;
			font-size: 30px;
			}
			.active {
			border: 0.00521rem solid #fff700;
			box-shadow: 0 0 0.03rem #fff700;

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

			}
			</style>