大屏页面初始化

This commit is contained in:
2026-03-11 10:42:44 +08:00
parent ee7e32e738
commit a560cf5acb
2 changed files with 50 additions and 49 deletions

View File

@@ -83,10 +83,9 @@
</template>
<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { ref, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import ChartTop from './components/ChartTop.vue';
import { getChartListAll } from '@/api/bizChart'
const route = useRoute();
@@ -165,8 +164,8 @@ onMounted(async () => {
height: 100%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
gap: 2px;
padding: 2px;
margin: 0 !important;
box-sizing: border-box;
background-color: transparent;
@@ -176,7 +175,7 @@ onMounted(async () => {
.erp-section {
width: 100%;
display: flex;
gap: 6px;
gap: 2px;
box-sizing: border-box;
overflow: hidden;
}
@@ -198,18 +197,18 @@ onMounted(async () => {
}
.erp-col-1-3 {
width: calc((100% - 12px) / 3);
width: calc((100% - 4px) / 3);
}
.erp-col-1-2 {
width: calc((100% - 6px) / 2);
width: calc((100% - 2px) / 2);
}
.erp-inner-layout {
width: 100%;
height: 100%;
display: flex;
gap: 6px;
gap: 2px;
box-sizing: border-box;
}
@@ -270,23 +269,23 @@ onMounted(async () => {
@media (max-width: 1600px) {
.erp-layout-container {
padding: 6px;
gap: 4px;
padding: 2px;
gap: 2px;
}
.erp-section {
gap: 4px;
gap: 2px;
}
.erp-col-1-3 {
width: calc((100% - 8px) / 3);
width: calc((100% - 4px) / 3);
}
.erp-col-1-2 {
width: calc((100% - 4px) / 2);
width: calc((100% - 2px) / 2);
}
.erp-inner-layout {
gap: 4px;
gap: 2px;
}
.erp-card {
padding: 10px;
padding: 2px;
}
.erp-card h3 {
font-size: 14px;
@@ -301,40 +300,41 @@ onMounted(async () => {
flex-direction: column;
height: auto;
min-height: 100%;
padding: 6px;
gap: 6px;
padding: 2px;
gap: 2px;
overflow-y: auto;
}
.erp-section {
flex-direction: column;
height: auto !important;
min-height: 120px;
gap: 6px;
gap: 2px;
}
.erp-col-1-3,
.erp-col-1-2 {
width: 100%;
height: calc((100% - 12px) / 3);
height: calc((100% - 4px) / 3);
}
.erp-inner-layout {
flex-direction: column;
height: 100%;
gap: 2px;
}
.erp-card {
padding: 8px;
padding: 2px;
}
}
@media (max-height: 900px) {
.erp-layout-container {
padding: 6px;
gap: 4px;
padding: 2px;
gap: 2px;
}
.erp-section {
gap: 4px;
gap: 2px;
}
.erp-card {
padding: 8px;
padding: 2px;
}
.erp-card h3 {
font-size: 14px;

View File

@@ -64,7 +64,6 @@
import { ref, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import ChartTop from './components/ChartTop.vue';
import { getChartListAll } from '@/api/bizChart'
const route = useRoute();
@@ -113,7 +112,7 @@ async function getChartList(){
const res = await getChartListAll(reqParams)
chartData.value = res || []
} catch (error) {
console.error('获取数据失败:', error)
console.error('获取数据失败:', error);
chartData.value = []
}
}
@@ -143,8 +142,8 @@ onMounted(async () => {
height: 100%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
gap: 2px;
padding: 2px;
margin: 0 !important;
box-sizing: border-box;
background-color: transparent;
@@ -154,7 +153,7 @@ onMounted(async () => {
.work-section {
width: 100%;
display: flex;
gap: 6px;
gap: 2px;
box-sizing: border-box;
overflow: hidden;
}
@@ -174,21 +173,21 @@ onMounted(async () => {
}
.work-col-1-3 {
width: calc((100% - 12px) / 3);
width: calc((100% - 4px) / 3);
}
.work-left-col, .work-middle-col, .work-right-col {
display: flex;
flex-direction: column;
gap: 6px;
gap: 2px;
}
.work-card-1-3 {
height: calc((100% - 12px) / 3);
height: calc((100% - 4px) / 3);
}
.work-card-2-3 {
height: calc(2 * ((100% - 12px) / 3) + 6px);
height: calc(2 * ((100% - 4px) / 3) + 2px);
}
.work-card {
@@ -206,6 +205,7 @@ onMounted(async () => {
backdrop-filter: blur(2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 0;
margin: 0;
}
.full-card {
@@ -248,23 +248,23 @@ onMounted(async () => {
@media (max-width: 1600px) {
.work-layout-container {
padding: 6px;
gap: 4px;
padding: 2px;
gap: 2px;
}
.work-section {
gap: 4px;
gap: 2px;
}
.work-col-1-3 {
width: calc((100% - 8px) / 3);
width: calc((100% - 4px) / 3);
}
.work-card-1-3 {
height: calc((100% - 8px) / 3);
height: calc((100% - 4px) / 3);
}
.work-card-2-3 {
height: calc(2 * ((100% - 8px) / 3) + 4px);
height: calc(2 * ((100% - 4px) / 3) + 2px);
}
.work-card {
padding: 10px;
padding: 2px;
}
.work-card h3 {
font-size: 14px;
@@ -279,15 +279,15 @@ onMounted(async () => {
flex-direction: column;
height: auto;
min-height: 100%;
padding: 6px;
gap: 6px;
padding: 2px;
gap: 2px;
overflow-y: auto;
}
.work-section {
flex-direction: column;
height: auto !important;
min-height: 120px;
gap: 6px;
gap: 2px;
}
.work-col-1-3 {
width: 100%;
@@ -296,26 +296,27 @@ onMounted(async () => {
.work-left-col, .work-middle-col, .work-right-col {
flex-direction: column;
height: auto;
gap: 2px;
}
.work-card-1-3, .work-card-2-3 {
height: 120px;
margin-bottom: 6px;
margin-bottom: 2px;
}
.work-card {
padding: 8px;
padding: 2px;
}
}
@media (max-height: 900px) {
.work-layout-container {
padding: 6px;
gap: 4px;
padding: 2px;
gap: 2px;
}
.work-section {
gap: 4px;
gap: 2px;
}
.work-card {
padding: 8px;
padding: 2px;
}
.work-card h3 {
font-size: 14px;