my-bigScreen/screen-vue/src/views/screen/Erp/index.vue

<template>
  <div class="erp-layout-container">
    <div class="erp-section erp-top-header">
      <div class="erp-card full-card">
        <ChartTop />
      </div>
    </div>

    <div class="erp-section erp-upper-section">
      <div class="erp-col erp-col-1-3">
        <div class="erp-card">
          <ChartV01 :formParams="FormValues" />
        </div>
      </div>
      <div class="erp-col erp-col-1-3">
        <div class="erp-card">
          <ChartV02 :formParams="FormValues" />
        </div>
      </div>
      <div class="erp-col erp-col-1-3">
        <div class="erp-card">
          <ChartV03 :formParams="FormValues" />
        </div>
      </div>
    </div>

    <div class="erp-section erp-middle-section">
      <div class="erp-col erp-col-1-2">
        <div class="erp-inner-layout">
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
              <ChartV04 :formParams="FormValues" />
            </div>
          </div>
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
              <ChartV05 :formParams="FormValues" />
            </div>
          </div>
        </div>
      </div>
      <div class="erp-col erp-col-1-2">
        <div class="erp-card">
          <ChartV06 :formParams="FormValues" />
        </div>
      </div>
    </div>

    <div class="erp-section erp-lower-section">
      <div class="erp-col erp-col-1-2">
        <div class="erp-inner-layout">
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
              <ChartV07 :formParams="FormValues" />
            </div>
          </div>
          <div class="erp-col erp-col-1-2">
            <div class="erp-card">
              <ChartV08 :formParams="FormValues" />
            </div>
          </div>
        </div>
      </div>
      <div class="erp-col erp-col-1-2">
        <div class="erp-card">
          <ChartV09 :formParams="FormValues" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import ChartTop from './components/ChartTop.vue'
import ChartV01 from './components/ChartV01.vue';
import ChartV02 from './components/ChartV02.vue';
import ChartV03 from './components/ChartV03.vue';
import ChartV04 from './components/ChartV04.vue';
import ChartV05 from './components/ChartV05.vue';
import ChartV06 from './components/ChartV06.vue';
import ChartV07 from './components/ChartV07.vue';
import ChartV08 from './components/ChartV08.vue';
import ChartV09 from './components/ChartV09.vue';

const route = useRoute();

const FormValues = ref({
  reqParam: route.query.year
});

watch(
  () => route.query.year,
  (newVal) => {
	  FormValues.value.reqParam = newVal;
  },
  { 
    deep: true,
    immediate: true
  }
);
</script>

<style scoped>
.erp-layout-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  margin: 0 !important;
  box-sizing: border-box;
  background-color: transparent;
  overflow: hidden;
}

.erp-section {
  width: 100%;
  display: flex;
  gap: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

.erp-top-header {
  height: 10%;
}

.erp-upper-section,
.erp-middle-section,
.erp-lower-section {
  height: 30%;
}

.erp-col {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.erp-col-1-3 {
  width: calc((100% - 12px) / 3);
}

.erp-col-1-2 {
  width: calc((100% - 6px) / 2);
}

.erp-inner-layout {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 6px;
  box-sizing: border-box;
}

.erp-card {
  width: 100%;
  height: 100%;
  background-color: rgba(15, 52, 96, 0.1);
  border: 1px solid rgba(26, 80, 139, 0.3);
  border-radius: 8px;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e0e6ff;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 0;
}

.full-card {
  width: 100%;
  
}

.erp-card:hover {
  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
  border-color: rgba(60, 156, 255, 0.6);
  transition: all 0.3s ease;
}

.erp-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
  letter-spacing: 1px;
  background: #3c9cff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.erp-card p {
  font-size: 13px;
  opacity: 0.75;
  color: #b4c7e7;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 1600px) {
  .erp-layout-container {
    padding: 6px;
    gap: 4px;
  }
  .erp-section {
    gap: 4px;
  }
  .erp-col-1-3 {
    width: calc((100% - 8px) / 3);
  }
  .erp-col-1-2 {
    width: calc((100% - 4px) / 2);
  }
  .erp-inner-layout {
    gap: 4px;
  }
  .erp-card {
    padding: 10px;
  }
  .erp-card h3 {
    font-size: 14px;
  }
  .erp-card p {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .erp-layout-container {
    flex-direction: column;
    height: auto;
    min-height: 100%;
    padding: 6px;
    gap: 6px;
    overflow-y: auto;
  }
  .erp-section {
    flex-direction: column;
    height: auto !important;
    min-height: 120px;
    gap: 6px;
  }
  .erp-col-1-3,
  .erp-col-1-2 {
    width: 100%;
    height: calc((100% - 12px) / 3);
  }
  .erp-inner-layout {
    flex-direction: column;
    height: 100%;
  }
  .erp-card {
    padding: 8px;
  }
}

@media (max-height: 900px) {
  .erp-layout-container {
    padding: 6px;
    gap: 4px;
  }
  .erp-section {
    gap: 4px;
  }
  .erp-card {
    padding: 8px;
  }
  .erp-card h3 {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .erp-card p {
    font-size: 12px;
  }
}
</style>