mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add chart+tables

Browse Source
This commit is contained in:
lb 2023-09-08 14:16:17 +08:00
parent 30bd1f06ed
commit 3b270eb50f
4 changed files with 109 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/yx-dark/containers/chart.vue Normal file
View File

@ -0,0 +1,30 @@
<!--
filename: chart.vue
author: liubin
date: 2023-09-08 13:53:04
description:
-->
<template>
<div class="yx-dark-chart"></div>
</template>
<script>
export default {
name: "YxDarkChart",
components: {},
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.yx-dark-chart {
height: 100%;
background: #f003;
}
</style>

6
src/components/yx-dark/containers/rect.vue
View File

@ -6,7 +6,9 @@
-->
<template>
<div class="rect-container"></div>
<div class="rect-container">
<slot />
</div>
</template>
<script>
@ -25,7 +27,7 @@ export default {
<style scoped lang="scss">
.rect-container {
background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
padding: 0;
padding: 24px;
width: 624px;
height: 304px;
}

30
src/components/yx-dark/containers/table.vue Normal file
View File

@ -0,0 +1,30 @@
<!--
filename: table.vue
author: liubin
date: 2023-09-08 13:52:12
description:
-->
<template>
<div class="yx-dark-tables"></div>
</template>
<script>
export default {
name: "YxDarkTables",
components: {},
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.yx-dark-tables {
height: 100%;
background: #fff3;
}
</style>

60
src/views/MainPanel.vue
View File

@ -7,22 +7,50 @@
<template>
<div class="main-panel">
<RectContainer class="leftTop" />
<RectContainer class="leftMiddle" />
<RectContainer class="leftBottom" />
<RectContainer class="leftTop">
<TablesContainer />
</RectContainer>
<RectContainer class="leftMiddle">
<ChartContainer />
</RectContainer>
<RectContainer class="leftBottom">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-1" />
<RectContainer class="bottom-2" />
<RectContainer class="bottom-3" />
<RectContainer class="bottom-4" />
<RectContainer class="bottom-5" />
<RectContainer class="bottom-6" />
<RectContainer class="bottom-7" />
<RectContainer class="bottom-8" />
<RectContainer class="bottom-1">
<TablesContainer />
</RectContainer>
<RectContainer class="bottom-2">
<TablesContainer />
</RectContainer>
<RectContainer class="bottom-3">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-4">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-5">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-6">
<TablesContainer />
</RectContainer>
<RectContainer class="bottom-7">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-8">
<ChartContainer />
</RectContainer>
<RectContainer class="rightTop" />
<RectContainer class="rightMiddle" />
<RectContainer class="rightBottom" />
<RectContainer class="rightTop">
<ChartContainer />
</RectContainer>
<RectContainer class="rightMiddle">
<TablesContainer />
</RectContainer>
<RectContainer class="rightBottom">
<ChartContainer />
</RectContainer>
<MainArea style="grid-area: main" />
</div>
@ -31,10 +59,12 @@
<script>
import RectContainer from "@/components/yx-dark/containers/rect.vue";
import MainArea from "./MainArea.vue";
import ChartContainer from "@/components/yx-dark/containers/chart.vue";
import TablesContainer from "@/components/yx-dark/containers/table.vue";
export default {
name: "MainPanel",
components: { RectContainer, MainArea },
components: { RectContainer, MainArea, ChartContainer, TablesContainer },
props: {},
data() {
return {};