| | |
| | | <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> |
| | | <div v-else style="background-color: green">{{scope.row.RegionalColor}}</div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | |
| | | }, |
| | | 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' |
| | | } |
| | | } |
| | | } |