From 06c08c416eec4b2898e7952ee264e1fe8c08a684 Mon Sep 17 00:00:00 2001 From: zhujiyan <17812234322@163.com> Date: Wed, 31 Jul 2024 16:23:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../govern/device/control/tabs/realtime.vue | 205 ++++++++++++------ 1 file changed, 135 insertions(+), 70 deletions(-) diff --git a/src/views/govern/device/control/tabs/realtime.vue b/src/views/govern/device/control/tabs/realtime.vue index ed21cb5..488343d 100644 --- a/src/views/govern/device/control/tabs/realtime.vue +++ b/src/views/govern/device/control/tabs/realtime.vue @@ -21,39 +21,75 @@
-
+
-
- -
-
- {{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }}) -
-
-
- {{ vv.phase + '相 ' }} +
+
+
+ +
+
+ {{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }}) +
+
+
+ {{ vv.phase == 'M' ? '' : vv.phase + '相 ' }} +
+
+
+ +
+
+ {{ + tableData.find(item => { + return item.anotherName == vv.showName && item.phase == vv.phase + })?.statisticalData + ? tableData.find(item => { + return item.anotherName == vv.showName && item.phase == vv.phase + })?.statisticalData + : '/' + }} +
- -
-
- {{ - tableData.find(item => { - return item.anotherName == vv.showName && item.phase == vv.phase - })?.statisticalData - ? tableData.find(item => { - return item.anotherName == vv.showName && item.phase == vv.phase - })?.statisticalData - : '/' - }} +
+ +
+
+
+ +
+
+ {{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }}) +
+
+
+ {{ vv.phase == 'M' ? '' : vv.phase + '相 ' }} +
+
+
+ +
+
+ {{ + tableData.find(item => { + return item.anotherName == vv.showName && item.phase == vv.phase + })?.statisticalData + ? tableData.find(item => { + return item.anotherName == vv.showName && item.phase == vv.phase + })?.statisticalData + : '/' + }} +
+
-
+
@@ -65,7 +101,6 @@ import { ref, onMounted } from 'vue' import MyEchart from '@/components/echarts/MyEchart.vue' import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery' import * as echarts from 'echarts' -import { split } from 'lodash-es' const pieChartRef: any = ref() const pieChart1: any = ref() const pieChart2: any = ref() @@ -374,7 +409,6 @@ const listA: any = ref([]) const loading = ref(false) //定义表格所需要的数据 const tableData: any = ref([]) -loading.value = true const columnsData: any = ref([]) const getColumns = () => { getRealTimeTableList().then(res => { @@ -382,20 +416,34 @@ const getColumns = () => { }) } //处理表格数据 +const columnsDataTop: any = ref([]) +const columnsDataBot: any = ref([]) const getTableData = (list: any) => { + loading.value = true tableData.value = list - columnsData.value.map((item: any) => { + columnsDataTop.value = [] + columnsDataBot.value = [] + columnsData.value.map((item: any, index: any) => { item.map((vv: any) => { vv.statisticalData = list.find((kk: any) => { return kk.anotherName == vv.showName && kk.phase == vv.phase })?.statisticalData }) + if (index < 4) { + columnsDataTop.value.push(item) + } + if (index >= 4) { + columnsDataBot.value.push(item) + } + loading.value = false }) - loading.value = false } //获取实时数据 const getRealTimeData = (val: any) => { + loading.value = true if (val.length != 0) { + getColumns() + getTableData(val) dataList.value = val dataList.value.map((item: any, index: any) => { if (item.anotherName == '相电压总有效值') { @@ -478,8 +526,6 @@ const getRealTimeData = (val: any) => { } ] pieChart6.value.initChart() - getColumns() - getTableData(val) } else { init() } @@ -551,64 +597,83 @@ onMounted(() => { .view_bot_tables { margin-bottom: 10px; height: auto; + min-height: 120px; } } } .view::-webkit-scrollbar { display: none; } -.table { +.table_container { width: 100%; - height: 120px; - border: 1px solid #eee; - border-bottom: 2px solid #eee; - margin-bottom: 20px; + height: auto; display: flex; - flex-direction: column; - .thead { - width: 100%; - height: auto; - background: #f4f6f9; - text-align: center; - display: flex; - flex-direction: column; - .thead_top { + align-items: center; + justify-content: center; + .table { + flex: 1; + .table_info { width: 100%; - height: 40px; - line-height: 40px; + height: 120px; border: 1px solid #eee; - color: #111; - font-size: 14px; - font-weight: 800; - } - .thead_bot { - width: 100%; - height: 40px; - line-height: 40px; + border-bottom: 2px solid #eee; + margin-bottom: 20px; display: flex; - color: #111; - font-size: 14px; - font-weight: 800; - .thead_bot_cell { - flex: 1; + flex-direction: column; + } + .thead { + width: 100%; + height: auto; + background: #f4f6f9; + text-align: center; + display: flex; + flex-direction: column; + .thead_top { + width: 100%; + height: 40px; + line-height: 40px; border: 1px solid #eee; + color: #111; + font-size: 14px; + font-weight: 800; + } + .thead_bot { + width: 100%; + height: 40px; + line-height: 40px; + display: flex; + color: #111; + font-size: 14px; + font-weight: 800; + .thead_bot_cell { + flex: 1; + border: 1px solid #eee; + } } } - } - .tbody { - flex: 1; - display: flex; - text-align: center; - .tbody_cell { + .tbody { flex: 1; + display: flex; text-align: center; - line-height: 40px; - border: 1px solid #eee; - border-bottom: 0; + .tbody_cell { + flex: 1; + text-align: center; + line-height: 40px; + border: 1px solid #eee; + border-bottom: 0; + } + } + .tbody:hover { + background: #f4f6f9; } } - .tbody:hover { - background: #f4f6f9; - } } +.table_container:hover{ + .table { + .tbody{ + background: #f4f6f9; + } + } +} +