From c110cc60944003c6980b4c43e88a1327b44553d1 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 16 Oct 2023 10:48:10 +0800
Subject: [PATCH] Merge branch 'feature_1.0'

---
 src/views/charts/index.vue |   69 ++++++++++++++++++++++++----------
 1 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue
index 50a1083..40d8e50 100644
--- a/src/views/charts/index.vue
+++ b/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>

--
Gitblit v1.8.0