修改table 表样式。

chenyabin

2021-04-13 efc4fcf8e7e8d607d59e8f4967a720f787dbe249

修改table 表样式。

 src/assets/css/map/map-panel-style.less

@@ -111,6 +111,7 @@

  thead.is-group th {
    background: transparent;
    padding:0
  }

  .el-table__expanded-cell {

 src/components/table/components/AirQuality.vue

@@ -1,50 +1,18 @@
<template>
    <div class="AirQuality">
        <el-table
                class="tableBox"
                :data="tableData"
                :header-cell-style="tableHeaderColor"
                :cell-style="rowClass"
                border
        >
            <el-table-column
                    width="30px"
                    label=""
            >
        <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 label="序号" width="60px" type="index"></el-table-column>
            <el-table-column prop="UserName" label="企业名称"></el-table-column>
            <el-table-column prop="AQI" label="AQI"></el-table-column>
            <el-table-column prop="MajorPollutant" label="首要污染物 "></el-table-column>
            <el-table-column prop="AirQualityCategory" label="空气质量类别"></el-table-column>
            <el-table-column prop="RegionalColor" label="区域颜色">
              <template slot-scope="scope">
                <div v-if="scope.row.RegionalColor==='四级红色'" style="background-color: red">{{scope.row.RegionalColor}}</div>
                <div v-else-if="scope.row.RegionalColor==='三级橙色'" style="background-color: orange">{{scope.row.RegionalColor}}</div>
@@ -89,11 +57,11 @@
  },
  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'
      // 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'
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    }
  }
}

 src/components/table/components/IndexStatistics.vue

@@ -1,171 +1,60 @@
<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="指标统计" name="first"><el-table
                :data="tableData">
            <el-table-column
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="单位名称">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="工业取水量(m3)">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="外排废水量(m3)">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="工业废气排放量(m3)">
            </el-table-column>
        <el-tab-pane label="指标统计" name="first">
            <el-table :data="tableData" >
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="date" label="单位名称"></el-table-column>
                <el-table-column prop="province" label="工业取水量(m3)"></el-table-column>
                <el-table-column prop="province" label="外排废水量(m3)"></el-table-column>
                <el-table-column prop="province" label="工业废气排放量(m3)"></el-table-column>
            <el-table-column label="COD(t)">
                    <el-table-column
                            prop="province"
                            label="累计产生量">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="当月产生量">
                    </el-table-column>
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="氨氮(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                </el-table-column>
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="二氧化硫(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                </el-table-column>
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="氮氧化物(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                </el-table-column>
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="VOCs(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                </el-table-column>
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
            </el-table-column>
            <el-table-column label="固废(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                </el-table-column>
            </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业排名" name="second"><el-table :data="tableData">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="date" label="企业名称"></el-table-column>
            <el-table-column prop="name" label="废水达标率"></el-table-column>
            <el-table-column prop="province" label="名次"></el-table-column>
            <el-table-column prop="city" label="废气达标率"></el-table-column>
            <el-table-column prop="address" label="名次"></el-table-column>
            <el-table-column prop="zip" label="传输率"></el-table-column>
            <el-table-column prop="zip" label="名次"></el-table-column>
            <el-table-column prop="zip" label="设备完好率"></el-table-column>
            <el-table-column prop="zip" label="排名"></el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="企业排名" name="second"><el-table
                :data="tableData"
                style="width: 100%"
                max-height="250">
            <el-table-column
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="企业名称">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="废水达标率">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="废气达标率">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="传输率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="排名">
            </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="排放点排名" name="third"><el-table
                :data="tableData">
            <el-table-column
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="排放点名称">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="排放类型">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="达标率">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="传输率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次">
            </el-table-column>
        <el-tab-pane label="排放点排名" name="third"><el-table :data="tableData">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="date" label="排放点名称"></el-table-column>
            <el-table-column prop="name" label="排放类型"></el-table-column>
            <el-table-column prop="province" label="达标率"></el-table-column>
            <el-table-column prop="city" label="名次"></el-table-column>
            <el-table-column prop="address" label="传输率"></el-table-column>
            <el-table-column prop="zip" label="名次"></el-table-column>
            <el-table-column prop="zip" label="设备完好率"></el-table-column>
            <el-table-column prop="zip" label="名次"></el-table-column>
        </el-table></el-tab-pane>
    </el-tabs>


 src/components/table/components/SolidWaste.vue

@@ -18,63 +18,33 @@
              placement="bottom"
              trigger="click"
              :disabled="!isShowIcon"
              popper-class="popovers"
          >
              popper-class="popovers">
            <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
            <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
            <!--                   <i class="el-icon-caret-bottom"   slot="reference" v-else @click="doIcon($index)"></i>-->
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="序号"
          width="45px"
          type="index">
      <el-table-column label="序号" width="45px" type="index">
      </el-table-column>
      <el-table-column
          prop="UserName"
          label="企业名称"
          width="120px">
      <el-table-column prop="UserName" label="企业名称" width="120px">
        <template slot-scope="scope">
          <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else >{{scope.row.UserName}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="WasteWaters"
          label="外排废水量（m³）"
          width="100px">
      </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 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 prop="NH4NPut" label="累计产生量"></el-table-column>
        <el-table-column prop="NH4NMonth" label="当月生产量"></el-table-column>
      </el-table-column>
      <el-table-column label="排放口检测统计状态">
        <el-table-column
            prop="normal"
            label="正常"
            width="60px">
        <el-table-column prop="normal" label="正常" width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=2" >{{row.normal}}</u>
            <el-popover v-else
@@ -92,25 +62,10 @@
            </el-popover>
          </template>
        </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 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">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=1" >{{row.deficiency}}</u>
            <el-popover v-else
@@ -201,11 +156,11 @@
  },
  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'
      // 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'
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    },
    // 获取点击的表格
    handle (row, column, event, cell) {

 src/components/table/components/WasteWater.vue

@@ -3,9 +3,6 @@
           <el-table
                   class="tableBox"
                   :data="tableData"
                   style="width: 100%"
                   :header-cell-style="tableHeaderColor"
                   :cell-style="rowClass"
                   @cell-click="handle"
           >
               <el-table-column
@@ -41,11 +38,7 @@
                   <div v-else >{{scope.row.UserName}}</div>
                 </template>
               </el-table-column>
               <el-table-column
                       prop="WasteWaters"
                       label="外排废水量（m³）"
                       width="100px">
               </el-table-column>
               <el-table-column prop="WasteWaters" label="外排废水量（m³）"></el-table-column>
               <el-table-column label="COD  (t)">
                   <el-table-column
                           prop="AddOutPut"
@@ -201,11 +194,11 @@
  },
  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'
    //  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'
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    },
    // 获取点击的表格
    handle (row, column, event, cell) {
@@ -228,17 +221,6 @@
}
</script>

<style scoped>
.popovers{
  width: auto !important;
  background-color: gray !important;
}
.popovers.el-popover{
padding:0;
}
.active {
  /*color: red;*/
  transform:rotate(90deg);
}
<style>

</style>

 src/components/table/components/tabHandover.vue

@@ -1,5 +1,5 @@
<template>
  <el-tabs  v-model="activeName" type="border-card">
  <el-tabs  v-model="activeName">
    <el-tab-pane label="废水" name="first">
      <waste-water></waste-water>
    </el-tab-pane>

 src/components/table/summarySheets.vue

@@ -27,10 +27,10 @@
            </el-tooltip>
        </div>
    </transition>
    <Dialog ref="summarySheets" title="企业预警报警分类统计" >
    <Dialog ref="summarySheets" title="报表" >
      <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="企业预警报警分类统计" >
    <Dialog ref="warnDialog" title="预报警" >
      <warn></warn>
    </Dialog>
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">

 src/styles/theme-dark/el-ui/tabs.less

@@ -1,12 +1,15 @@
.el-tabs{}
.el-tabs{

}
.el-table td, .el-table th{
  padding: 0;
}
.el-tabs__header{
  border-bottom: 1px solid @background-color-split !important;
  padding: 0;
  position: relative;
  margin: 0 0 15px;
}

.el-tabs__active-bar{
  position: absolute;
  bottom: 0;

 src/views/popup/Dialog.vue

@@ -2,7 +2,6 @@
    <el-dialog  v-dialogDrag
            :title="title"
            :visible.sync="centerDialogVisible"
            width="30%"
            :modal="false"
            :close-on-click-modal="false"
             @close='closeDialog'