监控中心 - 环境监控 根据UI设计图进行页面优化

This commit is contained in:
fks-yangshouda
2024-08-14 17:29:18 +08:00
parent aef40e64de
commit 59c3004067
5 changed files with 204 additions and 115 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,19 +1,22 @@
<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
<!-- <a-spin :spinning="loading"> -->
<div style="background: #ffffff; height: 95%">
<div style="background: #ffffff; height: 95%; position: relative">
<a-spin :spinning="loading">
<a-table
:columns="tableColumns"
:data-source="pageData"
bordered
:pagination="false"
style="height: 75%"
:scroll="{ x: 100, y: 450 }">
<template #title>
<div
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
<div style="display: flex; align-items: center; width: 85%">
<div style="width: 10%">数据报表</div>
<div style="width: 10%"
><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
>
<a-select
v-model:value="frequencyValue"
@@ -39,15 +42,24 @@
</div>
</template>
</a-table>
<a-pagination
:current="queryParams.pageNum"
:total="total"
:page-size="queryParams.pageSize"
style="display: flex; justify-content: center; margin-top: 16px"
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" />
</a-spin>
<a-pagination
:current="queryParams.pageNum"
:total="total"
:show-total="(total, range) => `${total}`"
:page-size="queryParams.pageSize"
style="
display: flex;
position: absolute;
bottom: 20px;
right: 30px;
justify-content: right;
margin-top: 16px;
margin-right: 30px;
"
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" />
</div>
<!-- </a-spin> -->
</template>

View File

@@ -1,18 +1,21 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div style="background: #ffffff; height: 95%">
<a-spin :spinning="loading">
<div style="background: #ffffff; height: 95%; position: relative">
<a-spin :spinning="loading" style="height: 100%">
<a-table
:columns="tableColumns"
:data-source="pageData"
bordered
:pagination="false"
:scroll="{ x: 100 }">
:height="500"
:scroll="{ x: 3000, y: 440 }">
<template #title>
<div
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
<div style="display: flex; align-items: center; width: 85%">
<div style="width: 10%">数据报表</div>
<div style="width: 10%"
><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
>
<a-select
v-model:value="typeValue"
placeholder="请选择环境参数"
@@ -20,7 +23,7 @@
:options="typeList" />
<a-tree-select
v-model:value="quyuvalue"
style="width: 17%; margin-left: 10px"
style="width: 22%; margin-left: 10px"
:tree-data="treeData2"
:field-names="{
children: 'childList',
@@ -54,13 +57,22 @@
</div>
</template>
</a-table>
<a-pagination
:total="total"
show-size-changer
show-quick-jumper
@change="onChange"
style="display: flex; justify-content: center; margin-top: 10px" />
</a-spin>
<a-pagination
:total="total"
:show-total="(total, range) => `${total}`"
show-size-changer
show-quick-jumper
@change="onChange"
style="
display: flex;
position: absolute;
bottom: 20px;
right: 30px;
justify-content: right;
margin-top: 10px;
margin-right: 30px;
" />
</div>
</template>
<script lang="ts" setup>
@@ -138,6 +150,7 @@
{
title: '区域名称',
dataIndex: 'location',
width: 100,
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -160,6 +173,7 @@
{
title: '点位',
dataIndex: 'pointName',
width: 100,
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -186,6 +200,7 @@
{
title: '日期',
dataIndex: 'time',
width: 110,
},
];