.babelrc | ●●●●● patch | view | raw | blame | history | |
babel.config.js | ●●●●● patch | view | raw | blame | history | |
package-lock.json | ●●●●● patch | view | raw | blame | history | |
package.json | ●●●●● patch | view | raw | blame | history | |
src/views/charts/index.vue | ●●●●● patch | view | raw | blame | history |
.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> ' + "<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> ' + "<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) => { @@ -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> ' + "<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>