manager/my-bigScreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏项目初始化

Browse Source
This commit is contained in:
gaoxq
2026-03-10 23:06:16 +08:00
parent e6f7af148b
commit aa08785db5
4 changed files with 790 additions and 756 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
screen-vue/src/views/screen/Erp/index.vue
View File

@@ -7,19 +7,17 @@
</div>
<div class="erp-section erp-upper-section">
<div class="erp-col erp-col-1-3">
<div
v-for="item in getComponentsBySortRange(1, 3)"
:key="item.sort"
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" />
<component
:is="componentMap[item.vueName]"
:formParams="FormValues"
v-if="componentMap[item.vueName]"
/>
</div>
</div>
</div>
@@ -27,21 +25,28 @@
<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
v-for="item in getComponentsBySortRange(4, 5)"
:key="item.sort"
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" />
<component
:is="componentMap[item.vueName]"
:formParams="FormValues"
v-if="componentMap[item.vueName]"
/>
</div>
</div>
</div>
</div>
<div class="erp-col erp-col-1-2">
<div class="erp-card">
<ChartV06 :formParams="FormValues" />
<component
:is="componentMap[getComponentBySort(6)?.vueName]"
:formParams="FormValues"
v-if="getComponentBySort(6) && componentMap[getComponentBySort(6).vueName]"
/>
</div>
</div>
</div>
@@ -49,21 +54,28 @@
<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
v-for="item in getComponentsBySortRange(7, 8)"
:key="item.sort"
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" />
<component
:is="componentMap[item.vueName]"
:formParams="FormValues"
v-if="componentMap[item.vueName]"
/>
</div>
</div>
</div>
</div>
<div class="erp-col erp-col-1-2">
<div class="erp-card">
<ChartV09 :formParams="FormValues" />
<component
:is="componentMap[getComponentBySort(9)?.vueName]"
:formParams="FormValues"
v-if="getComponentBySort(9) && componentMap[getComponentBySort(9).vueName]"
/>
</div>
</div>
</div>
@@ -71,18 +83,9 @@
</template>
<script setup>
import { ref, watch } from 'vue';
import { ref, watch, onMounted, computed } 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';
import ChartTop from './components/ChartTop.vue';
const route = useRoute();
@@ -93,13 +96,71 @@ const FormValues = ref({
watch(
() => route.query.year,
(newVal) => {
FormValues.value.reqParam = newVal;
FormValues.value.reqParam = newVal;
},
{
deep: true,
immediate: true
}
);
const componentMap = ref({});
const chartData = ref([]);
const getComponentBySort = (sort) => {
return chartData.value.find(item => item.sort === sort);
};
const getComponentsBySortRange = (start, end) => {
return chartData.value.filter(item => item.sort >= start && item.sort <= end);
};
const loadComponent = async (vueName) => {
try {
const module = await import(`./components/${vueName}.vue`);
return module.default;
} catch (error) {
console.error('加载组件失败', error);
return null;
}
};
const fetchChartData = async () => {
return new Promise((resolve) => {
setTimeout(() => {
const apiData = [
{ sort: 1, vueName: 'ChartV01' },
{ sort: 2, vueName: 'ChartV02' },
{ sort: 3, vueName: 'ChartV03' },
{ sort: 4, vueName: 'ChartV04' },
{ sort: 5, vueName: 'ChartV05' },
{ sort: 6, vueName: 'ChartV06' },
{ sort: 7, vueName: 'ChartV07' },
{ sort: 8, vueName: 'ChartV08' },
{ sort: 9, vueName: 'ChartV09' },
];
resolve(apiData);
}, 300);
});
};
onMounted(async () => {
try {
const data = await fetchChartData();
chartData.value = data.sort((a, b) => a.sort - b.sort);
const newComponentMap = {};
const uniqueComponents = [...new Set(data.map(item => item.vueName))];
for (const vueName of uniqueComponents) {
const component = await loadComponent(vueName);
if (component) {
newComponentMap[vueName] = component;
}
}
componentMap.value = newComponentMap;
} catch (error) {
console.error('加载图表数据失败：', error);
}
});
</script>
<style scoped>
@@ -176,7 +237,6 @@ watch(
.full-card {
width: 100%;
}
.erp-card:hover {
@@ -203,6 +263,15 @@ watch(
line-height: 1.5;
}
.empty-card {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #88a0c2;
font-size: 14px;
}
@media (max-width: 1600px) {
.erp-layout-container {
padding: 6px;