quanyawei
2023-10-16 c110cc60944003c6980b4c43e88a1327b44553d1
src/views/charts/index.vue
@@ -40,17 +40,23 @@
    </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>
@@ -176,17 +182,14 @@
    },
    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)
@@ -303,7 +306,7 @@
      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))) {
@@ -312,9 +315,11 @@
      })
      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>&nbsp' + "<span class='numName'>("
        firstIndex.forEach((item, index) => {
          a += (originalValue[item].name).replace(/\s+/g, '') + (index === firstIndex.length - 1 ? '' : ',')
        })
        a += ')</span>'
        fiestDateList.push({
          name: a
        })
@@ -325,15 +330,17 @@
            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>&nbsp' + "<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>&nbsp(' + (originalValue[0].name).replace(/\s+/g, '') + ')'
        })
        if (originalValue.length > 1) {
          originalValue.forEach((value, inx) => {
@@ -341,9 +348,11 @@
              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>&nbsp' + "<span class='numName'>("
          secondeIndex.forEach((item, index) => {
            b += (originalValue[item].name).replace(/\s+/g, '') + (index === secondeIndex.length - 1 ? '' : ',')
          })
          b += ')</span>'
          secondeDateList.push({
            name: b
          })
@@ -567,8 +576,7 @@
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-43deg); /*调整斜线的角度*/
  transform: rotate(-70deg); /*调整斜线的角度*/
  transform: rotate(299deg); /*调整斜线的角度*/
  -webkit-transform-origin: top;
  transform-origin: top;
}
@@ -583,13 +591,32 @@
  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>