From 523e053e73f7f9c4cfb5e69e9d07844a8ac4d99c Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期五, 12 三月 2021 11:28:34 +0800
Subject: [PATCH] 企业指标分类统计表格统计结构
---
src/components/table/summarySheets.vue | 89 ++++++++
src/components/table/components/AirQuality.vue | 99 +++++++++
src/components/table/components/WasteWater.vue | 162 ++++++++++++++
src/components/table/components/WasteGas.vue | 170 +++++++++++++++
src/components/table/components/SolidWaste.vue | 113 ++++++++++
5 files changed, 633 insertions(+), 0 deletions(-)
diff --git a/src/components/table/components/AirQuality.vue b/src/components/table/components/AirQuality.vue
new file mode 100644
index 0000000..b0dc855
--- /dev/null
+++ b/src/components/table/components/AirQuality.vue
@@ -0,0 +1,99 @@
+<template>
+ <div class="AirQuality">
+ <el-table
+ class="tableBox"
+ :data="tableData"
+ :header-cell-style="tableHeaderColor"
+ :cell-style="rowClass"
+ border
+ >
+ <el-table-column
+ width="30px"
+ label=""
+ >
+ <template>
+ <i class="el-icon-caret-right"></i>
+ <span style="margin-left: 10px"></span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="搴忓彿"
+ width="60px"
+ type="index">
+ </el-table-column>
+ <el-table-column
+ prop="UserName"
+ label="浼佷笟鍚嶇О"
+ width="120px">
+ </el-table-column>
+ <el-table-column
+ prop="AQI"
+ label="AQI"
+ width="200px">
+ </el-table-column>
+ <el-table-column
+ prop="MajorPollutant"
+ label="棣栬姹℃煋鐗� "
+ width="200px">
+ </el-table-column>
+ <el-table-column
+ prop="AirQualityCategory"
+ label="绌烘皵璐ㄩ噺绫诲埆"
+ width="200px">
+ </el-table-column>
+ <el-table-column
+ prop="RegionalColor"
+ label="鍖哄煙棰滆壊"
+ width="200px">
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'AirQuality',
+ data () {
+ return {
+ tableData: [{
+ UserName: '闆嗗洟鍚嶇О',
+ AQI: '',
+ MajorPollutant: '',
+ AirQualityCategory: '閲嶅害姹℃煋 浜斾釜',
+ RegionalColor: ''
+ }, {
+ UserName: '鍖椾含鐭虫补',
+ AQI: '152',
+ MajorPollutant: '',
+ AirQualityCategory: '涓害姹℃煋',
+ RegionalColor: '鍥涚骇绾㈣壊'
+ }, {
+ UserName: '澶╂触鐭冲寲',
+ AQI: '105',
+ MajorPollutant: '',
+ AirQualityCategory: '杞诲害姹℃煋',
+ RegionalColor: '涓夌骇姗欒壊'
+ }, {
+ UserName: '璐靛窞鐭虫补',
+ AQI: '35',
+ MajorPollutant: '',
+ AirQualityCategory: '浼�',
+ RegionalColor: '涓�绾х豢鑹�'
+ }]
+ }
+ },
+ methods: {
+ tableHeaderColor ({ row, column, owIndex, columnIndex }) {
+ return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
+ },
+ // 琛ㄥご鏍峰紡璁剧疆
+ rowClass () {
+ return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/table/components/SolidWaste.vue b/src/components/table/components/SolidWaste.vue
new file mode 100644
index 0000000..14a9020
--- /dev/null
+++ b/src/components/table/components/SolidWaste.vue
@@ -0,0 +1,113 @@
+<template>
+ <div class="Solid-Waste">
+ <el-table
+ class="tableBox"
+ :data="tableData"
+ :header-cell-style="tableHeaderColor"
+ :cell-style="rowClass"
+ >
+ <el-table-column
+ width="30px"
+ label=""
+ >
+ <template>
+ <i class="el-icon-caret-right"></i>
+ <span style="margin-left: 10px"></span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="搴忓彿"
+ width="60px"
+ type="index">
+ </el-table-column>
+ <el-table-column
+ prop="UserName"
+ label="浼佷笟鍚嶇О"
+ width="120px">
+ </el-table-column>
+ <el-table-column
+ prop="WasteWaters"
+ label="宸ヤ笟澶栨帓搴熸按閲忥紙m鲁锛�"
+ width="200px">
+ </el-table-column>
+ <el-table-column label="浜х敓閲� 锛堝惃锛�">
+ <el-table-column
+ prop="AddOutPut"
+ label="涓�鑸浐搴�"
+ width="100px">
+ </el-table-column>
+ <el-table-column
+ prop="MonthOutPut"
+ label="鍗遍櫓搴熺墿"
+ width="100px">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="璐瓨鐘舵�侊紙涓級">
+ <el-table-column
+ prop="normal"
+ label="姝ｅ父"
+ width="100px">
+ </el-table-column>
+ <el-table-column
+ prop="warning"
+ label="棰勮"
+ width="100px">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'SolidWaste',
+ data () {
+ return {
+ tableData: [{
+ UserName: '闆嗗洟鍚嶇О',
+ WasteWaters: '',
+ AddOutPut: '',
+ MonthOutPut: '',
+ normal: '',
+ warning: ''
+ }, {
+ UserName: '澶╂触鐭冲寲',
+ WasteWaters: '116.6',
+ AddOutPut: '58.3',
+ MonthOutPut: '13.1',
+ warning: '13.1',
+ normal: '21'
+ }, {
+ UserName: 'xxxx鐐煎寲3',
+ WasteWaters: '116.6',
+ MonthOutPut: '13.1',
+ warning: '13.1',
+ normal: '21'
+ }, {
+ UserName: 'xxxx4',
+ WasteWaters: '116.6',
+ AddOutPut: '58.3',
+ MonthOutPut: '13.1',
+ warning: '13.1',
+ normal: '21'
+ }]
+ }
+ },
+ methods: {
+ tableHeaderColor ({ row, column, owIndex, columnIndex }) {
+ return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
+ },
+ // 琛ㄥご鏍峰紡璁剧疆
+ rowClass () {
+ return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ }
+ }
+}
+</script>
+
+<style scoped>
+.Solid-Waste{
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/components/table/components/WasteGas.vue b/src/components/table/components/WasteGas.vue
new file mode 100644
index 0000000..1068b8b
--- /dev/null
+++ b/src/components/table/components/WasteGas.vue
@@ -0,0 +1,170 @@
+<template>
+ <div class="Waste-water">
+ <el-table
+ class="tableBox"
+ :data="tableData"
+ :header-cell-style="tableHeaderColor"
+ :cell-style="rowClass"
+ >
+ <el-table-column
+ width="30px"
+ label=""
+ >
+ <template>
+ <i class="el-icon-caret-right"></i>
+ <span style="margin-left: 10px"></span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="搴忓彿"
+ width="45px"
+ type="index">
+ </el-table-column>
+ <el-table-column
+ prop="UserName"
+ label="浼佷笟鍚嶇О"
+ width="120px">
+ </el-table-column>
+ <el-table-column
+ prop="WasteWaters"
+ label="宸ヤ笟澶栨帓搴熸按閲忥紙m鲁锛�"
+ width="100px">
+ </el-table-column>
+ <el-table-column label="浜屾哀鍖栫～ (t)">
+ <el-table-column
+ prop="AddOutPut"
+ label="绱浜х敓閲�"
+ width="70px">
+ </el-table-column>
+ <el-table-column
+ prop="MonthOutPut"
+ label="褰撴湀鐢熶骇閲�"
+ width="70px">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="姘ㄦ哀鍖栫墿 (t)">
+ <el-table-column
+ prop="NH4NPut"
+ label="绱浜х敓閲�"
+ width="70px">
+ </el-table-column>
+ <el-table-column
+ prop="NH4NMonth"
+ label="褰撴湀鐢熶骇閲�"
+ width="70px">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="VOCs (t)">
+ <el-table-column
+ prop="NH4NPut"
+ label="绱浜х敓閲�"
+ width="70px">
+ </el-table-column>
+ <el-table-column
+ prop="NH4NMonth"
+ label="褰撴湀鐢熶骇閲�"
+ width="70px">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鎺掓斁鍙ｆ娴嬬姸鎬�">
+ <el-table-column
+ prop="normal"
+ label="姝ｅ父"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="overProof"
+ label="瓒呮爣"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="Abnormal"
+ label="寮傚父"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="StopProduction"
+ label="鍋滀骇"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="deficiency"
+ label="缂哄け"
+ width="60px">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'WasteGas',
+ data () {
+ return {
+ tableData: [{
+ UserName: '闆嗗洟鍚嶇О',
+ WasteWaters: '',
+ AddOutPut: '',
+ MonthOutPut: '',
+ NH4NPut: '',
+ NH4NMonth: '',
+ normal: '',
+ overProof: '',
+ Abnormal: '',
+ StopProduction: '',
+ deficiency: ''
+ }, {
+ UserName: '澶╂触鐭冲寲',
+ WasteWaters: '116.6',
+ AddOutPut: '58.3',
+ MonthOutPut: '13.1',
+ NH4NPut: '58.3',
+ NH4NMonth: '13.1',
+ normal: '21',
+ overProof: '2',
+ Abnormal: '2',
+ StopProduction: '2',
+ deficiency: '2'
+ }, {
+ UserName: 'xxxx鐐煎寲3',
+ WasteWaters: '116.6',
+ MonthOutPut: '13.1',
+ NH4NPut: '58.3',
+ NH4NMonth: '13.1',
+ normal: '21',
+ overProof: '2',
+ Abnormal: '2',
+ StopProduction: '2',
+ deficiency: '2'
+ }, {
+ UserName: 'xxxx4',
+ WasteWaters: '116.6',
+ AddOutPut: '58.3',
+ MonthOutPut: '13.1',
+ NH4NPut: '58.3',
+ NH4NMonth: '13.1',
+ normal: '21',
+ overProof: '2',
+ Abnormal: '2',
+ StopProduction: '2',
+ deficiency: '2'
+
+ }]
+ }
+ },
+ methods: {
+ tableHeaderColor ({ row, column, owIndex, columnIndex }) {
+ return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
+ },
+ // 琛ㄥご鏍峰紡璁剧疆
+ rowClass () {
+ return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/table/components/WasteWater.vue b/src/components/table/components/WasteWater.vue
new file mode 100644
index 0000000..a196886
--- /dev/null
+++ b/src/components/table/components/WasteWater.vue
@@ -0,0 +1,162 @@
+<template>
+ <div class="waste-water">
+<!-- <el-row>-->
+<!-- <el-col>-->
+ <el-table
+ class="tableBox"
+ :data="tableData"
+ :header-cell-style="tableHeaderColor"
+ :cell-style="rowClass"
+ >
+ <el-table-column
+ width="30px"
+ label=""
+ >
+ <template>
+ <i class="el-icon-caret-right"></i>
+ <span style="margin-left: 10px"></span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="搴忓彿"
+ width="45px"
+ type="index">
+ </el-table-column>
+ <el-table-column
+ prop="UserName"
+ label="浼佷笟鍚嶇О"
+ width="120px">
+ </el-table-column>
+ <el-table-column
+ prop="WasteWaters"
+ label="澶栨帓搴熸按閲忥紙m鲁锛�"
+ width="100px">
+ </el-table-column>
+ <el-table-column label="COD (t)">
+ <el-table-column
+ prop="AddOutPut"
+ label="绱浜х敓閲�"
+ width="70px">
+ </el-table-column>
+ <el-table-column
+ prop="MonthOutPut"
+ label="褰撴湀鐢熶骇閲�"
+ width="70px">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="姘ㄦ爱 (t)">
+ <el-table-column
+ prop="NH4NPut"
+ label="绱浜х敓閲�"
+ width="70px">
+ </el-table-column>
+ <el-table-column
+ prop="NH4NMonth"
+ label="褰撴湀鐢熶骇閲�"
+ width="70px">
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鎺掓斁鍙ｆ娴嬬粺璁＄姸鎬�">
+ <el-table-column
+ prop="normal"
+ label="姝ｅ父"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="overProof"
+ label="瓒呮爣"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="Abnormal"
+ label="寮傚父"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="StopProduction"
+ label="鍋滀骇"
+ width="60px">
+ </el-table-column>
+ <el-table-column
+ prop="deficiency"
+ label="缂哄け"
+ width="60px">
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+<!-- </el-col>-->
+<!-- </el-row>-->
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'WasteWater',
+ data () {
+ return {
+ tableData: [{
+ UserName: '闆嗗洟鍚嶇О',
+ WasteWaters: '',
+ AddOutPut: '',
+ MonthOutPut: '',
+ NH4NPut: '',
+ NH4NMonth: '',
+ normal: '',
+ overProof: '',
+ Abnormal: '',
+ StopProduction: '',
+ deficiency: ''
+ }, {
+ UserName: '澶╂触鐭冲寲',
+ WasteWaters: '116.6',
+ AddOutPut: '58.3',
+ MonthOutPut: '13.1',
+ NH4NPut: '58.3',
+ NH4NMonth: '13.1',
+ normal: '21',
+ overProof: '2',
+ Abnormal: '2',
+ StopProduction: '2',
+ deficiency: '2'
+ }, {
+ UserName: 'xxxx鐐煎寲3',
+ WasteWaters: '116.6',
+ MonthOutPut: '13.1',
+ NH4NPut: '58.3',
+ NH4NMonth: '13.1',
+ normal: '21',
+ overProof: '2',
+ Abnormal: '2',
+ StopProduction: '2',
+ deficiency: '2'
+ }, {
+ UserName: 'xxxx4',
+ WasteWaters: '116.6',
+ AddOutPut: '58.3',
+ MonthOutPut: '13.1',
+ NH4NPut: '58.3',
+ NH4NMonth: '13.1',
+ normal: '21',
+ overProof: '2',
+ Abnormal: '2',
+ StopProduction: '2',
+ deficiency: '2'
+
+ }]
+ }
+ },
+ methods: {
+ tableHeaderColor ({ row, column, owIndex, columnIndex }) {
+ return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
+ },
+ // 琛ㄥご鏍峰紡璁剧疆
+ rowClass () {
+ return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue
new file mode 100644
index 0000000..2a45071
--- /dev/null
+++ b/src/components/table/summarySheets.vue
@@ -0,0 +1,89 @@
+<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>
+</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'
+export default {
+ name: 'summary sheet.vue',
+ components: {
+ WasteWater,
+ WasteGas,
+ SolidWaste,
+ AirQuality
+ },
+ data () {
+ return {
+ activeName: 'first'
+ }
+ },
+ methods: {
+ handleClick (tab, event) {
+ console.log(tab, event)
+ }
+ }
+}
+</script>
+
+<style>
+ .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);
+ /*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%;
+ }
+</style>
--
Gitblit v1.8.0