Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实时数据冻结图表滚动，改为表格区域滚动

Browse Source
This commit is contained in:
zhujiyan
2024-10-15 19:39:38 +08:00
parent f064f61301
commit 9423a2f0a2
1 changed files with 6 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -21,80 +21,6 @@
<div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div> <div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
</div> </div>
</div> </div>
<div class="view_bot" style="display: none">
<div class="view_bot_tables">
<!-- 表格数据 -->
<div v-if="tableData.length != 0">
<!-- div设计table -->
<div class="table_container">
<div class="table" v-for="(item, index) in columnsDataTop" :key="index">
<div class="table_info">
<!-- 单层表头 -->
<div class="thead">
<div class="thead_top">
{{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
</div>
<div class="thead_bot">
<div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
{{ vv.phase == 'M' ? '' : vv.phase + '相 ' }}
</div>
</div>
</div>
<!-- 有合并表头的数据 -->
<div class="tbody">
<div class="tbody_cell" v-for="(vv, key) in item" :key="key">
{{
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
: '/'
}}
</div>
</div>
</div>
</div>
</div>
<div class="table_container">
<div class="table" v-for="(item, index) in columnsDataBot" :key="index">
<div class="table_info">
<!-- 单层表头 -->
<div class="thead">
<div class="thead_top">
{{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
</div>
<div class="thead_bot">
<div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
{{ vv.phase == 'M' ? '' : vv.phase + '相 ' }}
</div>
</div>
</div>
<!-- 有合并表头的数据 -->
<div class="tbody">
<div class="tbody_cell" v-for="(vv, key) in item" :key="key">
{{
tableData.find((item: any) => {
return item.anotherName == vv.showName && item.phase == vv.phase
})?.statisticalData
? tableData.find((item: any) => {
return item.anotherName == vv.showName && item.phase == vv.phase
})?.statisticalData
: '/'
}}
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else style="border: 1px solid #eee">
<el-empty description="暂无数据" />
</div>
</div>
</div>
<div class="view_bot"> <div class="view_bot">
<vxe-table <vxe-table
border border
@@ -663,9 +589,9 @@ onMounted(() => {
.view { .view {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-bottom: 200px;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; display: flex;
flex-direction: column;
.view_top { .view_top {
width: 100%; width: 100%;
height: auto; height: auto;
@@ -718,6 +644,10 @@ onMounted(() => {
.view_bot { .view_bot {
min-height: 300px; min-height: 300px;
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
overflow: auto !important;
flex: 1 !important;
padding-bottom: 200px !important;
box-sizing: border-box !important;
.view_bot_tables { .view_bot_tables {
margin-bottom: 10px; margin-bottom: 10px;
height: auto; height: auto;