遇到这种情况,每个卡片的布局一致,只有内容不一致
使用resolveDynamicComponent动态解析组件
这几个组件里的内容写在对应的views的component文件夹下
对应的ts写出对应的标题和详情页配置
import { reactive } from 'vue';
import runSituation from '../monitor/runSituation';
import productionMonitor from '../monitor/productionMonitor';
import separation from '../monitor/separation';
import plantYield from '../monitor/plantYield';
import rockYield from '../monitor/rockYield';
import alarmMonitor from '../monitor/alarmMonitor';
export const coms = [
runSituation,
productionMonitor,
separation,
plantYield,
rockYield,
alarmMonitor,
];
const cards = reactive<{
list: Array<{
name: string;
com: string;
more?: boolean;
url?: string;
num1?: string;
num2?: string;
}>;
}>({
list: [
{
com: 'runSituation',
name: '运行概况',
more: true,
url: '/chartDetail/time',
num1: 'runTime',
num2: 'stopTime',
},
{
com: 'productionMonitor',
name: '生产监控',
},
{
com: 'separation',
name: '分选入料',
more: true,
url: '/chartDetail/feeding',
num1: 'feedingValue',
},
{
com: 'plantYield',
name: '精煤产量',
more: true,
url: '/chartDetail/cleanCoal',
num1: 'cleanCoalValue',
num2: 'cleanCoalRate',
},
{
com: 'rockYield',
name: '矸石产量',
more: true,
url: '/chartDetail/waste',
num1: 'wasteValue',
num2: 'wasteRate',
},
{
com: 'alarmMonitor',
name: '报警监控',
url: 'alarm',
more: true,
},
],
});
export default cards;
组件注册在global或者在main.ts里导入
import { coms } from '@/components/cards/index';
export default (app: App): void => {
app.config.globalProperties.$vitevuu = vitevuu;
app.use(vitevui).use(Vant).use(router);
// new VConsole();
app.component('module', module);
app.component('card', card);
for (const i of coms) { //组件注册
app.component(`${i.name}`, i);
}
};
使用:在主页渲染
import { defineComponent, onMounted, resolveDynamicComponent } from 'vue';
import cards from '@/components/cards';
import monitorHeader from '@/components/header';
import { useRouter } from 'vue-router';
import store from '@/_store';
export default defineComponent({
components: { monitorHeader },
setup() {
onMounted(() => {
store.dispatch('getAlarmDetail');
const h = localStorage.getItem('scrollY');// 进入详情页返回后保持在原来的位置
window.scrollTo(0, Number(h));
});
const router = useRouter();
router.beforeEach(() => {
localStorage.setItem('scrollY', `${window.scrollY}`);
});
return () => (
<div>
<monitorHeader name='数据看板' />
{cards.list.map((item) => {
const cardBody = resolveDynamicComponent(`${item.com}`);
return (
<module
title={item.name}
url={item.url}
more={item.more}
num1={item.num1}
num2={item.num2}
>
<div style='padding:0 0.5rem'>
<cardBody /> // 这里就是卡片的内容
</div>
</module>
);
})}
</div>
);
},
});