| | |
| | | <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> |
| | | <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 > |
| | | </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' |
| | | export default { |
| | | name: 'summary sheet.vue', |
| | | name: 'summary-sheet.vue', |
| | | components: { |
| | | WasteWater, |
| | | WasteGas, |
| | | SolidWaste, |
| | | AirQuality |
| | | tabHandover, |
| | | Dialog |
| | | }, |
| | | data () { |
| | | return { |
| | | activeName: 'first' |
| | | summaryVisible: false |
| | | } |
| | | }, |
| | | methods: { |
| | | handleClick (tab, event) { |
| | | console.log(tab, event) |
| | | closeBtn () { |
| | | // const summary = document.getElementById('summary') |
| | | // summary.style.display = 'none' |
| | | this.$refs.summarySheets.show() |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | <style scoped lang="less"> |
| | | .summary-sheets { |
| | | /*overflow: hidden;*/ |
| | | position: absolute; |
| | | top: 50px; |
| | | left: 50px; |
| | | width: 850px; |
| | | height: 265px; |
| | | border: #90c8e0 1px solid; |
| | | z-index:9999999; |
| | | background-color: rgba(26, 73, 81, 0.901960784313726); |
| | | top: 70px; |
| | | left: 1px; |
| | | /*width: 850px;*/ |
| | | /*height: 265px;*/ |
| | | z-index:500; |
| | | /*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-rowscol{ |
| | | width: 100%; |
| | | height: 100%; |
| | | .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; |
| | | } |
| | | .active { |
| | | border: 0.00521rem solid #fff700; |
| | | box-shadow: 0 0 0.03rem #fff700; |
| | | } |
| | | } |
| | | </style> |