From 6738d48087c2c89d136eaf2a494c61392e087b54 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 21 Nov 2023 14:50:02 +0800
Subject: [PATCH] fix:表格滚动修改

---
 src/views/charts/index.vue |  205 +++++++++++++++++++++++++++++++++++---------------
 1 files changed, 143 insertions(+), 62 deletions(-)

diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue
index 50a1083..9172a88 100644
--- a/src/views/charts/index.vue
+++ b/src/views/charts/index.vue
@@ -12,8 +12,17 @@
         style="width: 354px"
       />
       <!-- <div> -->
-      <el-select v-model="value" placeholder="������������" style="margin-left: 20px">
-        <el-option v-for="(item, index) in newSensor" :key="index" :label="item.label" :value="item.value" />
+      <el-select
+        v-model="value"
+        placeholder="������������"
+        style="margin-left: 20px"
+      >
+        <el-option
+          v-for="(item, index) in newSensor"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-select>
       <!-- </div> -->
       <!-- <el-radio-group v-model="radio1" style="margin-left:20px">
@@ -22,8 +31,17 @@
         <el-radio-button label="������" />
         <el-radio-button label="���������" />
       </el-radio-group> -->
-      <el-select v-model="select1" placeholder="���������" style="margin-left: 20px; width: 200px">
-        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+      <el-select
+        v-model="select1"
+        placeholder="���������"
+        style="margin-left: 20px; width: 200px"
+      >
+        <el-option
+          v-for="item in options1"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-select>
       <component
         :is="dataType"
@@ -32,29 +50,64 @@
         @sendPickerChild="showPickerChild"
       />
       <!--������������-->
-      <el-button class="btn1" @click="selectData">������</el-button>
+      <el-button class="btn1" @click="selectData"> ������ </el-button>
     </div>
     <div class="topTitle">
-      <div style="position: absolute">{{ selectyz }}</div>
+      <div style="position: absolute">
+        {{ selectyz }}
+      </div>
       <!-- <div style="text-align: center;width: 100%;">{{ newData }}��{{ newMac?newMac[0]:'' }}��{{ newMac?newMac[newMac.length - 1][0]:'' }}��{{ value |sensorFilter }}�����������</div> -->
     </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">
+    <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="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>
-
   </div>
 </template>
 
@@ -104,15 +157,15 @@
     HourPicker1
   },
   filters: {
-    sensorFilter: function(value) {
-      if (!value) return ''
+    sensorFilter: function (value) {
+      if (!value) { return '' }
       return json[value]
     }
   },
   props: {
     // defaultData: Array
   },
-  data() {
+  data () {
     // ������������������
     return {
       dataType: 'HourPicker',
@@ -160,7 +213,7 @@
   },
   // ������������ ���������data������
   computed: {
-    thArr() {
+    thArr () {
       const data = []
       if (this.searchData.length > 0) {
         this.searchData.forEach((item, index) => {
@@ -174,30 +227,27 @@
       }
       return data
     },
-    tableData() {
+    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
+          if (item.deviceData.length > 0) {
+            fobj['souceData' + index] = this.sortFind(item.deviceData)[0].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)
-      console.log('datadatadata', data)
       return data
     }
   },
   // ������data������������������
   watch: {
     // ���������������������������
-    newMac(newVal, oldval) {
+    newMac (newVal, oldval) {
       this.newMac1 = []
       for (let i = 0; i < newVal.length; i++) {
         // console.log(newVal[i], 111)
@@ -207,7 +257,7 @@
       this.getSensor()
     },
     // ������dataType���������������
-    select1(nv, ov) {
+    select1 (nv, ov) {
       if (nv === '������') {
         this.dataType = 'HourPicker'
         this.unit = 'day'
@@ -228,7 +278,7 @@
         this.unit = 'hour'
       }
     },
-    value(one, two) {
+    value (one, two) {
       if (
         one === 'a34004' ||
         one === 'a34002' ||
@@ -274,36 +324,46 @@
     }
   },
   // ������������ - ��������������������������������� this ���������
-  created() {
+  created () {
     this.getData()
   },
   // ������������ - ��������������������������� DOM ���������
   // mounted() {
   //
   // },
-  beforeCreate() { }, // ������������ - ������������
-  beforeMount() { }, // ������������ - ������������
-  beforeUpdate() { }, // ������������ - ������������
-  updated() { }, // ������������ - ������������
-  beforeDestroy() { }, // ������������ - ������������
-  destroyed() { }, // ������������ - ������������
-  activated() { },
+  beforeCreate () { }, // ������������ - ������������
+  beforeMount () { }, // ������������ - ������������
+  beforeUpdate () { }, // ������������ - ������������
+  updated () { }, // ������������ - ������������
+  beforeDestroy () { }, // ������������ - ������������
+  destroyed () { }, // ������������ - ������������
+  activated () { },
   // ������������
   methods: {
-    sortFind(data) {
+    sortFind (data) {
       let arr = []
       let a = ''
       let b = ''
       // const duplicateValue = _.orderBy(this.refrain(data), ['sensorValue'], ['desc']) // ���������������
       // console.log('duplicateValue', duplicateValue)
-      const originalValue = _.orderBy(data, ['sensorValue'], ['desc'])
+      let allData = data.map(item => {
+        if (item.sensorValue !== null) {
+          return item
+        } else {
+          item.sensorValue = '0.0'
+          return item
+        }
+
+      })
+
+      const originalValue = _.orderBy(allData, ['sensorValue'], ['desc'])
       const firstIndex = []
       const fiestDateList = []
       const secondeIndex = []
       const secondeDateList = []
-      console.log('originalValue', originalValue)
+      console.log('allData', allData)
       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 +372,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 +387,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,18 +405,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
           })
         }
       }
-      console.log('fiestDateList', fiestDateList)
-      console.log('secondeDateList', secondeDateList)
       arr = fiestDateList.concat(secondeDateList)
-      console.log('arr', arr)
       return arr
       // console.log('refrainrefrainrefrain', this.refrain(data))
       // const arr = []
@@ -363,7 +426,7 @@
       // })
     },
     // ������������
-    selectData() {
+    selectData () {
       console.log(this.newData)
       var newLineChartData = {
         series: [],
@@ -432,7 +495,7 @@
         })
     },
     // ������������������������
-    getData() {
+    getData () {
       this.$request({
         url: '/monitorPoint/queryMonitorPoints',
         method: 'get',
@@ -466,7 +529,7 @@
         })
     },
     // ���������������������������������
-    getSensor() {
+    getSensor () {
       this.newSensor = []
       // stringMacs.su
       // var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1]
@@ -493,14 +556,14 @@
         })
     },
     // ���������������������������������������������
-    showPickerChild(data) {
+    showPickerChild (data) {
       this.newData = data
     }
   } // ���������������keep-alive������������������������������������
 }
 </script>
 <style scoped lang="scss">
-#chartTableContent{
+#chartTableContent {
   overflow-y: scroll;
   overflow-x: hidden;
 }
@@ -558,7 +621,7 @@
 }
 /*������������*/
 ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
-  content: "";
+  content: '';
   position: absolute;
   width: 1px;
   height: 100px; /*���������������*/
@@ -567,14 +630,13 @@
   background-color: grey;
   opacity: 0.2;
   display: block;
-  transform: rotate(-43deg); /*���������������������*/
-  transform: rotate(-70deg); /*���������������������*/
+  transform: rotate(299deg); /*���������������������*/
   -webkit-transform-origin: top;
   transform-origin: top;
 }
 
 ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
-  content: "";
+  content: '';
   position: absolute;
   width: 1px;
   height: 100px; /*���������������*/
@@ -583,13 +645,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