大屏页面初始化
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user