派生自 wuyushui/SewerAndRainNetwork
src/components/table/summarySheets.vue
@@ -1,85 +1,187 @@ <template> <div class="summary-sheets"> <el-row type="flex" class="head-area" align="middle"> <el-col> <span>企业指标分类统计</span> </el-col> <el-col class="head-area-button"> <el-button style="float: right; padding: 3px 0" icon="el-icon-close" type="info"></el-button> </el-col> </el-row> <!-- <el-tabs class="tabs-text">--> <el-row :gutter="20" class="el-rowscol"> <el-col> <el-tabs class="tabs-text" v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="废水" name="first"> <waste-water></waste-water> </el-tab-pane> <el-tab-pane label="废气" name="second"> <waste-gas></waste-gas> </el-tab-pane> <el-tab-pane label="固废" name="third"> <solid-waste></solid-waste> </el-tab-pane> <el-tab-pane label="空气质量" name="fourth"> <AirQuality></AirQuality> </el-tab-pane> </el-tabs> </el-col> </el-row> <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 WasteWater from '@/components/table/components/WasteWater.vue' import WasteGas from './components/WasteGas' import SolidWaste from './components/SolidWaste' import AirQuality from './components/AirQuality' import tabHandover from '@components/table/components/tabHandover' // 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', name: 'summary-sheet.vue', components: { WasteWater, WasteGas, SolidWaste, AirQuality tabHandover, Dialog, Warn, IndexStatistics // Dialog }, data () { return { activeName: 'first' 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: { handleClick (tab, event) { console.log(tab, event) closeBtn () { 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> <style lang="less"> .summary-sheets { /*overflow: hidden;*/ position: absolute; top: 50px; left: 50px; display: inline-flex; overflow: hidden; top: 0.42979rem; left: 0.14583rem; /*width: 850px;*/ /*height: 265px;*/ border: #90c8e0 1px solid; z-index:9999999; background-color: rgba(26, 73, 81, 0.901960784313726); 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;*/ } .head-area{ color: #fff; width: 100%; height: 40px; background-color: #002433; font-size: 16px; border-bottom: #90c8e0 2px solid; padding-left: 16px; /*line-height: 40px;*/ } .head-area-button{ margin-right: 5px; .el-icon-c-scale-to-original { width: 30px; height: 30px; font-size: 30px; } .el-dialog.el-dialog--center { left: 0.45rem; top: 0.73979rem; } } </style>
