企业指标分类统计表格统计结构

wangqi

2021-03-12 523e053e73f7f9c4cfb5e69e9d07844a8ac4d99c

企业指标分类统计表格统计结构

 src/components/table/components/AirQuality.vue

New file
@@ -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>

 src/components/table/components/SolidWaste.vue

New file
@@ -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>

 src/components/table/components/WasteGas.vue

New file
@@ -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>

 src/components/table/components/WasteWater.vue

New file
@@ -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>

 src/components/table/summarySheets.vue

New file
@@ -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>