fix:表格样式添加

quanyawei

2023-10-16 685511b71cc4bb676f3e5c832bb5ed218b80c250

fix:表格样式添加

 .babelrc

New file
@@ -0,0 +1,8 @@
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

 babel.config.js

@@ -1,4 +1,5 @@
module.exports = {
  plugins: ['@babel/plugin-proposal-optional-chaining'],
  presets: [
    '@vue/app'
  ]

 package-lock.json

@@ -308,6 +308,12 @@
        "@babel/types": "^7.12.13"
      }
    },
    "@babel/helper-string-parser": {
      "version": "7.22.5",
      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
      "dev": true
    },
    "@babel/helper-validator-identifier": {
      "version": "7.12.11",
      "resolved": "https://registry.npm.taobao.org/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.12.11.tgz",
@@ -425,6 +431,51 @@
        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
      }
    },
    "@babel/plugin-proposal-optional-chaining": {
      "version": "7.21.0",
      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
      "dev": true,
      "requires": {
        "@babel/helper-plugin-utils": "^7.20.2",
        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
      },
      "dependencies": {
        "@babel/helper-plugin-utils": {
          "version": "7.22.5",
          "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
          "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
          "dev": true
        },
        "@babel/helper-skip-transparent-expression-wrappers": {
          "version": "7.22.5",
          "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
          "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
          "dev": true,
          "requires": {
            "@babel/types": "^7.22.5"
          }
        },
        "@babel/helper-validator-identifier": {
          "version": "7.22.20",
          "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
          "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
          "dev": true
        },
        "@babel/types": {
          "version": "7.23.0",
          "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.23.0.tgz",
          "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
          "dev": true,
          "requires": {
            "@babel/helper-string-parser": "^7.22.5",
            "@babel/helper-validator-identifier": "^7.22.20",
            "to-fast-properties": "^2.0.0"
          }
        }
      }
    },
    "@babel/plugin-proposal-unicode-property-regex": {
      "version": "7.12.13",
      "resolved": "https://registry.npm.taobao.org/@babel/plugin-proposal-unicode-property-regex/download/@babel/plugin-proposal-unicode-property-regex-7.12.13.tgz",
@@ -498,6 +549,15 @@
        "@babel/helper-plugin-utils": "^7.8.0"
      }
    },
    "@babel/plugin-syntax-optional-chaining": {
      "version": "7.8.3",
      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
      "dev": true,
      "requires": {
        "@babel/helper-plugin-utils": "^7.8.0"
      }
    },
    "@babel/plugin-transform-arrow-functions": {
      "version": "7.13.0",
      "resolved": "https://registry.npm.taobao.org/@babel/plugin-transform-arrow-functions/download/@babel/plugin-transform-arrow-functions-7.13.0.tgz?cache=0&sync_timestamp=1614034822229&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fplugin-transform-arrow-functions%2Fdownload%2F%40babel%2Fplugin-transform-arrow-functions-7.13.0.tgz",

 package.json

@@ -59,6 +59,7 @@
  },
  "devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/register": "7.0.0",
    "@vue/cli-plugin-babel": "3.6.0",
    "@vue/cli-plugin-eslint": "3.6.0",

 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>