| | |
| | | </div> |
| | | <LineChart :chart-data="lineChartData" style="height: 40rem" /> |
| | | <div style="padding: 0px 10px;margin-bottom: 50px;"> |
| | | <el-table v-if="searchData.length>0" :data="tableData" border size="mini" style="width: 100%" max-height="250" tooltip-effect> |
| | | <el-table-column prop="rankingTitle" label="日期" width="150" align="center"> |
| | | <el-table v-if="searchData.length>0" :data="tableData" border size="mini" style="width: 100%" max-height="250" tooltip-effect="dark"> |
| | | <el-table-column prop="rankingTitle" label="日期" width="100" align="center" fixed="left"> |
| | | <el-table-column |
| | | prop="rankingTitle" |
| | | class-name="rankingTitle" |
| | | label="高值" |
| | | align="center" |
| | | width="150" |
| | | width="100" |
| | | fixed="left" |
| | | /> |
| | | </el-table-column> |
| | | <template v-for="(th, thIndex) in thArr"> |
| | | <el-table-column :key="thIndex" align="center" :label="th.label" :prop="th.prop" /> |
| | | <el-table-column :key="thIndex" align="center" :label="th.label" :prop="th.prop" :show-overflow-tooltip="true" min-width="120"> |
| | | <template slot-scope="scope"> |
| | | <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-html="scope.row[th.prop]" /> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </el-table> |
| | | </div> |
| | |
| | | }, |
| | | tableData() { |
| | | const data = [] |
| | | const souceData = [] |
| | | const firstData = [] |
| | | const fobj = {} |
| | | const sobj = {} |
| | | if (this.searchData.length > 0) { |
| | | this.searchData.forEach((item, index) => { |
| | | fobj['souceData' + index] = this.sortFind(item.deviceData)[0].name |
| | | sobj['souceData' + index] = this.sortFind(item.deviceData)[1].name |
| | | sobj['souceData' + index] = this.sortFind(item.deviceData)[1]?.name ? this.sortFind(item.deviceData)[1]?.name : '--' |
| | | }) |
| | | } |
| | | const a = [...firstData] |
| | | data.push({ ...fobj, rankingTitle: '第一高值' }, { ...sobj, rankingTitle: '第二高值' }) |
| | | console.log('firstData', fobj) |
| | | console.log('souceData', sobj) |
| | |
| | | const secondeDateList = [] |
| | | console.log('originalValue', originalValue) |
| | | if ((Number(originalValue[0].sensorValue) === Number(0))) { |
| | | return [{ name: '/' }, { name: '/' }] |
| | | return [{ name: '--' }, { name: '--' }] |
| | | } |
| | | originalValue.forEach((value, inx) => { |
| | | if ((Number(originalValue[0].sensorValue) === Number(value.sensorValue))) { |
| | |
| | | }) |
| | | |
| | | if (firstIndex.length > 1) { |
| | | firstIndex.forEach(item => { |
| | | a += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ',' |
| | | a = "<span class='numColor'>" + originalValue[firstIndex[0]].sensorValue + '</span> ' + "<span class='numName'>(" |
| | | firstIndex.forEach((item, index) => { |
| | | a += (originalValue[item].name).replace(/\s+/g, '') + (index === firstIndex.length - 1 ? '' : ',') |
| | | }) |
| | | a += ')</span>' |
| | | fiestDateList.push({ |
| | | name: a |
| | | }) |
| | |
| | | secondeIndex.push(inx) |
| | | } |
| | | }) |
| | | secondeIndex.forEach(item => { |
| | | b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ',' |
| | | b = "<span class='numColor'>" + originalValue[secondeIndex[0]].sensorValue + '</span> ' + "<span class='numName'>(" |
| | | secondeIndex.forEach((item, index) => { |
| | | b += (originalValue[item].name).replace(/\s+/g, '') + (index === secondeIndex.length - 1 ? '' : ',') |
| | | }) |
| | | b += ')</span>' |
| | | secondeDateList.push({ |
| | | name: b |
| | | }) |
| | | } else if (firstIndex.length <= 1) { |
| | | fiestDateList.push({ |
| | | name: (originalValue[0].name).replace(/\s+/g, '') + '(' + originalValue[0].sensorValue + ')' |
| | | name: "<span class='numColor'>" + originalValue[0].sensorValue + '</span> (' + (originalValue[0].name).replace(/\s+/g, '') + ')' |
| | | }) |
| | | if (originalValue.length > 1) { |
| | | originalValue.forEach((value, inx) => { |
| | |
| | | secondeIndex.push(inx) |
| | | } |
| | | }) |
| | | secondeIndex.forEach(item => { |
| | | b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ',' |
| | | b = "<span class='numColor'>" + originalValue[secondeIndex[0]].sensorValue + '</span> ' + "<span class='numName'>(" |
| | | secondeIndex.forEach((item, index) => { |
| | | b += (originalValue[item].name).replace(/\s+/g, '') + (index === secondeIndex.length - 1 ? '' : ',') |
| | | }) |
| | | b += ')</span>' |
| | | secondeDateList.push({ |
| | | name: b |
| | | }) |
| | |
| | | background-color: grey; |
| | | opacity: 0.2; |
| | | display: block; |
| | | transform: rotate(-43deg); /*调整斜线的角度*/ |
| | | transform: rotate(-70deg); /*调整斜线的角度*/ |
| | | transform: rotate(299deg); /*调整斜线的角度*/ |
| | | -webkit-transform-origin: top; |
| | | transform-origin: top; |
| | | } |
| | |
| | | background-color: grey; |
| | | opacity: 0.2; |
| | | display: block; |
| | | transform: rotate(-45deg); /*调整斜线的角度*/ |
| | | transform: rotate(-70deg); /*调整斜线的角度*/ |
| | | transform: rotate(299deg); /*调整斜线的角度*/ |
| | | -webkit-transform-origin: bottom; |
| | | transform-origin: bottom; |
| | | } |
| | | ::v-deep .el-table thead.is-group th { |
| | | height: 27.4px; |
| | | } |
| | | |
| | | ::v-deep .el-table thead{ |
| | | color: #000; |
| | | font-size: 15px; |
| | | } |
| | | ::v-deep .el-table tr{ |
| | | font-size: 15px; |
| | | } |
| | | /deep/.numColor{ |
| | | color: red; |
| | | display: inline-block; |
| | | margin-right: 8px; |
| | | } |
| | | /deep/.rankingTitle{ |
| | | font-weight: 700; |
| | | color: #000; |
| | | } |
| | | </style> |
| | | <style> |
| | | .el-tooltip__popper{ |
| | | font-size: 16px!important; |
| | | } |
| | | </style> |