lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交数据

This commit is contained in:
zouzhibing 2022-06-16 14:48:48 +08:00
parent c9947cf164
commit 01828a12ae
7 changed files with 33 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/u-container-layout/index.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="m-container-layout">
<slot></slot>
<div class="m-container-layout-inner">
<slot></slot>
</div>
</div>
</template>
@ -10,8 +12,14 @@
<style lang="scss" scoped>
.m-container-layout{
margin: 20px;
//margin: 20px;
padding: 20px;
background: white;
box-sizing: border-box;
.m-container-layout-inner{
background: white;
padding: 20px;
background: white;
}
}
</style>

4
src/layout/components/AppMain.vue
View File

@ -35,7 +35,9 @@ const isReload = computed(() => {
//overflow: auto;
//flex: 1;
//overflow: auto;
overflow: hidden;
overflow-x: hidden;
height: 100%;
width: 100%;
box-sizing: border-box;
//padding-top: 70px;
// background: white;

2
src/layout/index.vue
View File

@ -101,6 +101,8 @@
//padding: 20px;
/*background: #f6f8f9;*/
padding-top: 93px;
box-sizing: border-box;
height: 100vh;
position: relative;
}
.app-main-hide-tag{

12
src/router/modules/charts.ts
View File

@ -31,12 +31,12 @@ const chartsRouter = {
name: 'charts-simple',
meta: { title: '简单图表', roles:['other'] }
},
// {
// path: 'complex',
// component: () => import('@/views/charts/complex.vue'),
// name: 'charts-complex',
// meta: { title: '复杂图表', roles:['other'] }
// },
{
path: 'complex',
component: () => import('@/views/charts/complex.vue'),
name: 'charts-complex',
meta: { title: '复杂图表', roles:['other'] }
},
]
}

130
src/views/charts/complex.vue
View File

@ -1,130 +1,16 @@
<template>
<div style="width: 100%;">
<el-row class="row-bg" :gutter="10">
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>水滴图</span>
</div>
</template>
<liquid-fill-charts height="200px" width="100%" id="liquidFill"/>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>柱状图</span>
</div>
</template>
<histogram-charts height="200px" width="100%" id="Histogram"/>
</el-card></el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>折线图</span>
</div>
</template>
<line-charts height="200px" width="100%" id="lineS"/>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>设备数</span>
</div>
</template>
<pie-charts height="200px" width="100%" id="pieS"/>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>圆环进度条</span>
</div>
</template>
<progress-charts height="200px" width="100%" id="progress"/>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>漏斗图</span>
</div>
</template>
<rotate-charts height="200px" width="100%" id="rotate"/>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>牛气冲天</span>
</div>
</template>
<bullish-charts height="200px" width="100%" id="bullish"/>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>雷达图</span>
</div>
</template>
<painting-charts height="200px" width="100%" id="painting"/>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>桑基图</span>
</div>
</template>
<sankey-charts height="200px" width="100%" id="sankey"/>
</el-card>
</el-col>
</el-row>
<div class="m-complex">
</div>
</template>
<script setup lang="ts">
import LiquidFillCharts from './components/complex/liquidFill.vue'
import HistogramCharts from './components/complex/Histogram.vue'
import LineCharts from './components/complex/line.vue'
import PieCharts from './components/complex/pie.vue'
import ProgressCharts from './components/complex/progress.vue'
import RotateCharts from './components/complex/rotate.vue'
import BullishCharts from './components/complex/bullish.vue'
import PaintingCharts from './components/complex/painting.vue'
import SankeyCharts from './components/complex/sankey.vue'
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
margin-bottom: 10px;
width: 100%;
}
<style lang="scss" scoped>
.m-complex{
height: 100%;
width: 100%;
background-color: #030409;
}
</style>

BIN
src/views/charts/image/1-1-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

3
src/views/charts/migration.vue
View File

@ -12,6 +12,9 @@ import MigrationCharts from './components/migration/index.vue'
<style lang="scss" scoped>
.echarts-map{
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: calc(100vh - 93px);
position: relative;
.info{