@@ -0,0 +1,37 @@ | |||
<!-- | |||
filename: chip-invest.vue | |||
author: liubin | |||
date: 2024-04-10 08:59:28 | |||
description: | |||
--> | |||
<template> | |||
<chart-container class="chip-invest-chart"> | |||
<div class="chart-title">chip-invest</div> | |||
<div class="chart-body"> | |||
<div class="chart-item">chip-invest</div> | |||
<div class="chart-item">chip-invest</div> | |||
<div class="chart-item">chip-invest</div> | |||
<div class="chart-item">chip-invest</div> | |||
</div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import ChartContainerVue from "../components/ChartContainer.vue"; | |||
export default { | |||
name: "chip-investChart", | |||
components: { | |||
ChartContainer: ChartContainerVue, | |||
}, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,37 @@ | |||
<!-- | |||
filename: fto.vue | |||
author: liubin | |||
date: 2024-04-10 08:59:28 | |||
description: | |||
--> | |||
<template> | |||
<chart-container class="fto-chart"> | |||
<div class="chart-title">FTO</div> | |||
<div class="chart-body"> | |||
<div class="chart-item">FTO</div> | |||
<div class="chart-item">FTO</div> | |||
<div class="chart-item">FTO</div> | |||
<div class="chart-item">FTO</div> | |||
</div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import ChartContainerVue from "../components/ChartContainer.vue"; | |||
export default { | |||
name: "FtoChart", | |||
components: { | |||
ChartContainer: ChartContainerVue, | |||
}, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,34 @@ | |||
<!-- | |||
filename: ChartContainer.vue | |||
author: liubin | |||
date: 2024-04-10 08:54:33 | |||
description: | |||
todo: 实现滑动条 和动态宽高 | |||
--> | |||
<template> | |||
<div class="chart-container"> | |||
<slot /> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "ChartContainer", | |||
components: {}, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.chart-container { | |||
background: #151516; | |||
height: 100%; | |||
flex: 1; | |||
} | |||
</style> |
@@ -25,7 +25,9 @@ | |||
:class="[ | |||
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | |||
]" | |||
></div> | |||
> | |||
<slot /> | |||
</div> | |||
</div> | |||
</template> | |||
@@ -82,7 +84,7 @@ export default { | |||
} | |||
.container-body { | |||
padding: 8px; | |||
padding: 12px; | |||
display: flex; | |||
flex: 1; | |||
} | |||
@@ -5,13 +5,29 @@ | |||
<db-header class="db-header"></db-header> | |||
<div class="db-body"> | |||
<div class="db-left"> | |||
<db-container icon="cube" title="FTO投入"></db-container> | |||
<db-container icon="chip" title="芯片投入"></db-container> | |||
<db-container icon="cube" title="FTO投入"> | |||
<fto-chart /> | |||
</db-container> | |||
<db-container icon="chip" title="芯片投入"> | |||
<chip-invest-chart /> | |||
</db-container> | |||
</div> | |||
<div class="db-right"> | |||
<db-container side="right" icon="chip2" title="芯片产出"></db-container> | |||
<db-container side="right" icon="std" title="标准组件产出"></db-container> | |||
<db-container side="right" icon="stack" title="BIPV产出"></db-container> | |||
<db-container | |||
side="right" | |||
icon="chip2" | |||
title="芯片产出" | |||
></db-container> | |||
<db-container | |||
side="right" | |||
icon="std" | |||
title="标准组件产出" | |||
></db-container> | |||
<db-container | |||
side="right" | |||
icon="stack" | |||
title="BIPV产出" | |||
></db-container> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -30,6 +46,9 @@ import store from "@/store"; | |||
import DashboardHeader from "./dashboard/components/Header.vue"; | |||
import CompanyInfo from "./dashboard/components/CompanyInfo.vue"; | |||
import Container from "./dashboard/components/Container.vue"; | |||
import ChartContainer from "./dashboard/components/ChartContainer.vue"; | |||
import FtoChart from "./dashboard/charts/Fto.vue"; | |||
import ChipInvestChart from './dashboard/charts/ChipInvest.vue'; | |||
export default { | |||
name: "Index", | |||
@@ -37,6 +56,9 @@ export default { | |||
CompanyInfo, | |||
DbHeader: DashboardHeader, | |||
DbContainer: Container, | |||
ChartContainer, | |||
FtoChart, | |||
ChipInvestChart | |||
}, | |||
data() { | |||
return { | |||
@@ -169,7 +191,7 @@ export default { | |||
z-index: 9998; | |||
width: 1.702vw; | |||
height: 1.702vw; | |||
/* | |||
/* | |||
width: 32px; | |||
height: 32px; | |||
*/ | |||