add fto&chip-invest
This commit is contained in:
parent
3857489cbf
commit
4c2bca6c76
37
src/views/dashboard/charts/ChipInvest.vue
Normal file
37
src/views/dashboard/charts/ChipInvest.vue
Normal file
@ -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>
|
37
src/views/dashboard/charts/Fto.vue
Normal file
37
src/views/dashboard/charts/Fto.vue
Normal file
@ -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>
|
34
src/views/dashboard/components/ChartContainer.vue
Normal file
34
src/views/dashboard/components/ChartContainer.vue
Normal file
@ -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="[
|
:class="[
|
||||||
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
|
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
|
||||||
]"
|
]"
|
||||||
></div>
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -82,7 +84,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container-body {
|
.container-body {
|
||||||
padding: 8px;
|
padding: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
@ -5,13 +5,29 @@
|
|||||||
<db-header class="db-header"></db-header>
|
<db-header class="db-header"></db-header>
|
||||||
<div class="db-body">
|
<div class="db-body">
|
||||||
<div class="db-left">
|
<div class="db-left">
|
||||||
<db-container icon="cube" title="FTO投入"></db-container>
|
<db-container icon="cube" title="FTO投入">
|
||||||
<db-container icon="chip" title="芯片投入"></db-container>
|
<fto-chart />
|
||||||
|
</db-container>
|
||||||
|
<db-container icon="chip" title="芯片投入">
|
||||||
|
<chip-invest-chart />
|
||||||
|
</db-container>
|
||||||
</div>
|
</div>
|
||||||
<div class="db-right">
|
<div class="db-right">
|
||||||
<db-container side="right" icon="chip2" title="芯片产出"></db-container>
|
<db-container
|
||||||
<db-container side="right" icon="std" title="标准组件产出"></db-container>
|
side="right"
|
||||||
<db-container side="right" icon="stack" title="BIPV产出"></db-container>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -30,6 +46,9 @@ import store from "@/store";
|
|||||||
import DashboardHeader from "./dashboard/components/Header.vue";
|
import DashboardHeader from "./dashboard/components/Header.vue";
|
||||||
import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
|
import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
|
||||||
import Container from "./dashboard/components/Container.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 {
|
export default {
|
||||||
name: "Index",
|
name: "Index",
|
||||||
@ -37,6 +56,9 @@ export default {
|
|||||||
CompanyInfo,
|
CompanyInfo,
|
||||||
DbHeader: DashboardHeader,
|
DbHeader: DashboardHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
ChartContainer,
|
||||||
|
FtoChart,
|
||||||
|
ChipInvestChart
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -169,7 +191,7 @@ export default {
|
|||||||
z-index: 9998;
|
z-index: 9998;
|
||||||
width: 1.702vw;
|
width: 1.702vw;
|
||||||
height: 1.702vw;
|
height: 1.702vw;
|
||||||
/*
|
/*
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
*/
|
*/
|
||||||
|
Loading…
Reference in New Issue
Block a user