Skip to content

C
center-chart-show-h5
提交 e215b284 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

update

上级 eac053f5
隐藏空白字符变更
内嵌 并排
正在显示 包含 555 行增加 和 170 行删除
src/api/index.js
浏览文件 @ e215b284
...@@ -16,7 +16,7 @@ export function getMonthIncome(params) { ...@@ -16,7 +16,7 @@ export function getMonthIncome(params) {
} }
// 各项目每月 销售额/完成率 // 各项目每月 销售额/完成率
export function getx(params) { export function getMonthIncomeTrend(params) {
return httpRequest.get('/v1/big_screen_marketing/every_month_project_income', { params }) return httpRequest.get('/v1/big_screen_marketing/every_month_project_income', { params })
} }
......
src/app.vue
浏览文件 @ e215b284
...@@ -13,7 +13,7 @@ body { ...@@ -13,7 +13,7 @@ body {
background: linear-gradient(180deg, #1e0c0d, #1a0200); background: linear-gradient(180deg, #1e0c0d, #1a0200);
} }
#app { #app {
max-width: 375px; /* max-width: 375px; */
margin: 0 auto; margin: 0 auto;
} }
table { table {
......
src/components/card.vue
浏览文件 @ e215b284
<template> <template>
<div class="card"> <div class="card">
<div class="card-hd" v-if="title">{{ title }}</div> <div class="card-inner">
<div class="card-bd"> <div class="card-hd" v-if="title">{{ title }}</div>
<slot></slot> <div class="card-bd">
<slot></slot>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -17,9 +19,37 @@ export default { ...@@ -17,9 +19,37 @@ export default {
<style lang="scss"> <style lang="scss">
.card { .card {
border: 3px solid; position: relative;
border-image: linear-gradient(56deg, #162b85, #20b4e2, #000f4a, #172987) 10 10; background: linear-gradient(56deg, #162b85, #20b4e2, #000f4a, #172987) 100%;
border-radius: 20px;
overflow: hidden;
padding: 3px;
&::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
background: #000;
border-radius: 20px;
overflow: hidden;
}
}
.card-inner {
position: relative;
background: linear-gradient(0deg, #1d357a 0%, rgba(23, 41, 136, 0) 100%); background: linear-gradient(0deg, #1d357a 0%, rgba(23, 41, 136, 0) 100%);
border-radius: 20px; border-radius: 20px;
overflow: hidden;
}
.card-hd {
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
line-height: 30px;
color: #fff;
}
.card-bd {
margin: 0 20px;
} }
</style> </style>
src/components/monthCompleteRate.vue
浏览文件 @ e215b284
<template> <template>
<!-- 月收入 --> <v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
<v-chart class="chart" :option="option" />
</template> </template>
<script> <script>
...@@ -9,104 +8,45 @@ export default { ...@@ -9,104 +8,45 @@ export default {
name: 'MonthlyIncome', name: 'MonthlyIncome',
data() { data() {
return { return {
loading: false,
response: { sell_data: [] } response: { sell_data: [] }
} }
}, },
computed: { computed: {
option() { option() {
// const data = this.response.sell_data.map(item => { const axisData = []
// return { value: item.pay_money, name: item.project_name } const seriesData = []
// }) this.response.sell_data.forEach(item => {
axisData.push(item.project_name)
seriesData.push({ value: parseFloat(item.completion_rate), name: item.project_name })
})
const option = { const option = {
grid: { tooltip: {
// 直角坐标系内绘图网格 trigger: 'axis',
left: '80', // grid 组件离容器左侧的距离, axisPointer: {
// left的值可以是80这样具体像素值， type: 'none'
// 也可以是'80%'这样相对于容器高度的百分比 }
top: '80',
right: '0',
bottom: '0',
containLabel: true // gid区域是否包含坐标轴的刻度标签。为true的时候，
// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
// 所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
},
xAxis: {
// 直角坐标系grid中的x轴,
// 一般情况下单个grid组件最多只能放上下两个x轴,
// 多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
type: 'value', // 坐标轴类型,分别有：
// 'value'-数值轴；'category'-类目轴;
// 'time'-时间轴;'log'-对数轴
splitLine: { show: false }, // 坐标轴在 grid 区域中的分隔线
axisLabel: { show: false }, // 坐标轴刻度标签
axisTick: { show: false }, // 坐标轴刻度
axisLine: { show: false } // 坐标轴轴线
}, },
grid: { left: '60px', top: 0, right: '60px', bottom: 0 },
xAxis: { show: false, max: 100 },
yAxis: { yAxis: {
inverse: true,
type: 'category', type: 'category',
axisTick: { show: false }, data: axisData,
axisLine: { show: false }, axisLine: { show: false },
axisLabel: { axisTick: { show: false }
color: 'black',
fontSize: 36
},
data: ['sofia', 'kelley'] // 类目数据，在类目轴（type: 'category'）中有效。
// 如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
}, },
textStyle: { color: '#fff' },
series: [ series: [
// 系列列表。每个系列通过 type 决定自己的图表类型
{ {
name: '%', // 系列名称
type: 'bar', // 柱状、条形图
barWidth: 19, // 柱条的宽度,默认自适应
data: [20, 120], // 系列中数据内容数组
label: {
// 图形上的文本标签
show: true,
position: 'right', // 标签的位置
offset: [0, -40], // 标签文字的偏移，此处表示向上偏移40
formatter: '{c}{a}', // 标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
color: 'black', // 标签字体颜色
fontSize: 36 // 标签字号
},
itemStyle: {
// 图形样式
normal: {
// normal 图形在默认状态下的样式;
// emphasis图形在高亮状态下的样式
barBorderRadius: 10 // 柱条圆角半径,单位px.
// 此处统一设置4个角的圆角大小;
// 也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
// color: new Echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: '#22B6ED'
// },
// {
// offset: 1,
// color: '#3FE279'
// }
// ])
}
},
zlevel: 1 // 柱状图所有图形的 zlevel 值,
// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
},
{
name: '进度条背景',
type: 'bar', type: 'bar',
barGap: '-100%', // 不同系列的柱间距离，为百分比。 barWidth: 10,
// 在同一坐标系上，此属性会被多个 'bar' 系列共享。 barCategoryGap: '0%',
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效， data: seriesData,
// 并且是对此坐标系中所有 'bar' 系列生效。 itemStyle: { color: '#34A6D2', borderRadius: 100 },
barWidth: 19, label: { show: true, position: 'right', color: '#E59700', formatter: '{c}%' },
data: [100, 100, 100], showBackground: true,
color: '#151B87', // 柱条颜色 backgroundStyle: { color: 'transparent', borderWidth: 1, borderColor: '#0A7199', borderRadius: 100 }
itemStyle: {
normal: {
barBorderRadius: 10
}
}
} }
] ]
} }
...@@ -116,9 +56,15 @@ export default { ...@@ -116,9 +56,15 @@ export default {
}, },
methods: { methods: {
getData() { getData() {
api.getMonthIncome().then(response => { this.loading = true
this.response = response api
}) .getMonthIncome()
.then(response => {
this.response = response
})
.finally(() => {
this.loading = false
})
} }
}, },
beforeMount() { beforeMount() {
...@@ -129,6 +75,6 @@ export default { ...@@ -129,6 +75,6 @@ export default {
<style scoped> <style scoped>
.chart { .chart {
height: 200px; height: 120px;
} }
</style> </style>
src/components/monthDashboard.vue
浏览文件 @ e215b284
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="inner"> <div class="inner">
<dl> <dl>
<dt>总销售额</dt> <dt>总销售额</dt>
<dd>¥{{ response.all_pay_money / 10000 }}<span class="unit">万元</span></dd> <dd>¥{{ response.all_pay_money.toLocaleString() }}</dd>
</dl> </dl>
<dl> <dl>
<dt>总成单量</dt> <dt>总成单量</dt>
<dd>{{ response.all_pay_count }}<span class="unit">位</span></dd> <dd>{{ response.all_pay_count.toLocaleString() }}</dd>
</dl> </dl>
</div> </div>
</template> </template>
...@@ -17,7 +17,7 @@ export default { ...@@ -17,7 +17,7 @@ export default {
name: 'MonthDashboard', name: 'MonthDashboard',
data() { data() {
return { return {
response: {} response: { all_pay_money: 0, all_pay_count: 0 }
} }
}, },
methods: { methods: {
......
src/components/monthIncome.vue
浏览文件 @ e215b284
<template> <template>
<!-- 月收入 --> <v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
<v-chart class="chart" :option="option" />
</template> </template>
<script> <script>
...@@ -9,43 +8,56 @@ export default { ...@@ -9,43 +8,56 @@ export default {
name: 'MonthlyIncome', name: 'MonthlyIncome',
data() { data() {
return { return {
loading: false,
response: { sell_data: [] } response: { sell_data: [] }
} }
}, },
computed: { computed: {
option() { option() {
// const data = this.response.sell_data.map(item => { const axisData = []
// return { value: item.pay_money, name: item.project_name } const seriesData = []
// }) this.response.sell_data.forEach(item => {
axisData.push(item.project_name)
seriesData.push({ value: item.pay_money, name: item.project_name })
})
const option = { const option = {
toolbox: {}, tooltip: {
trigger: 'axis'
},
grid: { left: 0, top: 0, right: 0, bottom: 0 },
angleAxis: { angleAxis: {
max: 2,
startAngle: 30,
splitLine: {
show: false
},
show: false show: false
}, },
radiusAxis: { radiusAxis: {
type: 'category', type: 'category',
data: ['sofia', 'kelley'],
z: 10 // data: ['sofia', 'kelley'],
data: axisData,
z: 10,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
textStyle: {
color: '#fff'
}, },
polar: {}, polar: {},
series: [ series: [
{ {
type: 'bar', type: 'bar',
data: [920870], barWidth: 10,
coordinateSystem: 'polar',
name: 'sofia' // data: [
}, // { value: 100, itemStyle: { color: '#34A6D2' } },
{ // { value: 200, itemStyle: { color: '#34A6D2' } }
type: 'bar', // ],
data: [499600], data: seriesData,
coordinateSystem: 'polar', coordinateSystem: 'polar',
name: 'kelley', roundCap: true,
roundCap: true itemStyle: { color: '#34A6D2' }
} }
] ]
} }
...@@ -54,9 +66,15 @@ export default { ...@@ -54,9 +66,15 @@ export default {
}, },
methods: { methods: {
getData() { getData() {
api.getMonthIncome().then(response => { this.loading = true
this.response = response api
}) .getMonthIncome()
.then(response => {
this.response = response
})
.finally(() => {
this.loading = false
})
} }
}, },
beforeMount() { beforeMount() {
...@@ -69,10 +87,4 @@ export default { ...@@ -69,10 +87,4 @@ export default {
.chart { .chart {
height: 200px; height: 200px;
} }
.card {
border: 3px solid;
border-image: linear-gradient(56deg, #162b85, #20b4e2, #000f4a, #172987) 10 10;
background: linear-gradient(0deg, #1d357a 0%, rgba(23, 41, 136, 0) 100%);
border-radius: 20px;
}
</style> </style>
src/components/monthIncomeTrend.vue 0 → 100644
浏览文件 @ e215b284
<template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
</template>
<script>
import * as api from '@/api/index'
export default {
name: 'MonthIncomeTrend',
data() {
return {
loading: false,
response: []
}
},
computed: {
dataset() {
const dimensions = []
const source = {}
const series = []
this.response.forEach(item => {
if (!dimensions.includes(item.pay_month)) {
dimensions.push(item.pay_month)
}
if (!source[item.project_name]) {
source[item.project_name] = []
series.push({
type: 'bar',
name: item.project_name,
stack: 'total',
// label: { show: true },
barWidth: 20
})
}
source[item.project_name].push(item.pay_money)
})
source.product = dimensions
return { dimensions, source, series }
},
option() {
return {
tooltip: { trigger: 'axis', axisPointer: {} },
dataset: { source: this.dataset.source },
legend: {
top: 'bottom',
itemWidth: 13,
itemHeight: 13,
icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 }
},
yAxis: { type: 'value', splitLine: { show: false } },
xAxis: { type: 'category', axisTick: { show: false }, axisLine: { show: false } },
series: this.dataset.series
}
}
},
methods: {
getData() {
this.loading = true
api
.getMonthIncomeTrend()
.then(response => {
this.response = response
})
.finally(() => {
this.loading = false
})
}
},
beforeMount() {
this.getData()
}
}
</script>
<style scoped>
.chart {
height: 300px;
}
</style>
src/components/nowApply.vue
浏览文件 @ e215b284
<template> <template>
<div class="inner"> <div class="inner">
<table cellpadding="0" cellspacing="0" border="0"> <table cellpadding="0" cellspacing="0" border="0" class="table">
<tr> <tr>
<th>时间</th> <th>时间</th>
<th>姓名</th> <th>姓名</th>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<td>{{ item.user_name }}</td> <td>{{ item.user_name }}</td>
<td>{{ item.pay_type }}</td> <td>{{ item.pay_type }}</td>
<td>{{ item.project_name }}</td> <td>{{ item.project_name }}</td>
<td>{{ item.pay_money }}</td> <td>{{ item.pay_money.toLocaleString() }}</td>
</tr> </tr>
</table> </table>
</div> </div>
...@@ -42,10 +42,18 @@ export default { ...@@ -42,10 +42,18 @@ export default {
</script> </script>
<style scoped> <style scoped>
.table {
width: 100%;
color: #fff;
}
td, td,
th { th {
text-align: center; text-align: center;
} }
th {
line-height: 40px;
}
td { td {
padding: 12px 0; padding: 12px 0;
white-space: nowrap; white-space: nowrap;
......
src/components/nowIncome.vue
浏览文件 @ e215b284
<template> <template>
<div class="inner"> <div class="inner">
<table cellpadding="0" cellspacing="0" border="0"> <table cellpadding="0" cellspacing="0" border="0" class="table">
<tr> <tr>
<th>时间</th> <th>时间</th>
<th>姓名</th> <th>姓名</th>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<td>{{ item.user_name }}</td> <td>{{ item.user_name }}</td>
<td>{{ item.pay_type }}</td> <td>{{ item.pay_type }}</td>
<td>{{ item.project_name }}</td> <td>{{ item.project_name }}</td>
<td>{{ item.pay_money }}</td> <td>{{ item.pay_money.toLocaleString() }}</td>
</tr> </tr>
</table> </table>
</div> </div>
...@@ -42,10 +42,20 @@ export default { ...@@ -42,10 +42,20 @@ export default {
</script> </script>
<style scoped> <style scoped>
.inner {
padding-bottom: 20px;
}
.table {
width: 100%;
color: #fff;
}
td, td,
th { th {
text-align: center; text-align: center;
} }
th {
line-height: 40px;
}
td { td {
padding: 12px 0; padding: 12px 0;
white-space: nowrap; white-space: nowrap;
......
src/components/paymentStructure.vue
浏览文件 @ e215b284
<template> <template>
<!-- 月收入 --> <v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
<v-chart class="chart" :option="option" />
</template> </template>
<script> <script>
...@@ -9,35 +8,23 @@ export default { ...@@ -9,35 +8,23 @@ export default {
name: 'PaymentStructure', name: 'PaymentStructure',
data() { data() {
return { return {
response: { sell_data: [] } loading: false,
response: []
} }
}, },
computed: { computed: {
dataset() {
return this.response.map(item => ({ value: item.pay_money, name: item.channel_name }))
},
option() { option() {
return { return {
radar: [ tooltip: { trigger: 'item' },
{ legend: { orient: 'vertical', left: 'left', top: 'middle', textStyle: { color: '#fff' } },
indicator: [
{ text: '品牌', max: 100 },
{ text: '内容', max: 100 },
{ text: '可用性', max: 100 },
{ text: '功能', max: 100 }
]
}
],
series: [ series: [
{ {
type: 'radar', type: 'pie',
tooltip: { data: this.dataset,
trigger: 'item' emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
},
areaStyle: {},
data: [
{
value: [60, 73, 85, 40],
name: '某软件'
}
]
} }
] ]
} }
...@@ -45,9 +32,15 @@ export default { ...@@ -45,9 +32,15 @@ export default {
}, },
methods: { methods: {
getData() { getData() {
api.getChannelPayMoney().then(response => { this.loading = true
this.response = response api
}) .getChannelPayMoney()
.then(response => {
this.response = response
})
.finally(() => {
this.loading = false
})
} }
}, },
beforeMount() { beforeMount() {
......
src/components/projectCost.vue
浏览文件 @ e215b284
<template> <template>
<div class="inner"> <div class="inner">
<table cellpadding="0" cellspacing="0" border="0"> <table cellpadding="0" cellspacing="0" border="0" class="table">
<tr> <tr>
<th>项目</th> <th>项目</th>
<th>留资总数</th> <th>留资总数</th>
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
</tr> </tr>
<tr v-for="(item, index) in response" :key="index"> <tr v-for="(item, index) in response" :key="index">
<td>{{ item.project_name }}</td> <td>{{ item.project_name }}</td>
<td>{{ item.app_count }}</td> <td>{{ item.app_count.toLocaleString() }}</td>
<td>{{ item.app_cost }}</td> <td>{{ item.app_cost.toLocaleString() }}</td>
<td>{{ item.pay_count }}</td> <td>{{ item.pay_count.toLocaleString() }}</td>
<td>{{ item.conversion_rate }}</td> <td>{{ item.conversion_rate }}</td>
</tr> </tr>
</table> </table>
...@@ -42,10 +42,20 @@ export default { ...@@ -42,10 +42,20 @@ export default {
</script> </script>
<style scoped> <style scoped>
.inner {
padding: 20px 0;
}
.table {
width: 100%;
color: #fff;
}
td, td,
th { th {
text-align: center; text-align: center;
} }
th {
line-height: 40px;
}
td { td {
padding: 12px 0; padding: 12px 0;
white-space: nowrap; white-space: nowrap;
......
src/components/projectRanking.vue 0 → 100644
浏览文件 @ e215b284
<template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
</template>
<script>
import * as api from '@/api/index'
export default {
name: 'MonthlyIncome',
data() {
return {
loading: false,
response: []
}
},
computed: {
option() {
const axisData = []
const seriesData = []
this.response.forEach(item => {
axisData.push(item.project_name)
seriesData.push({ value: item.apply_count, name: item.project_name })
})
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
}
},
grid: { left: '60px', top: 0, right: '60px', bottom: 0 },
xAxis: { show: false, textAlign: 'left' },
yAxis: {
type: 'category',
data: axisData,
axisLine: { show: false },
axisTick: { show: false },
nameTextStyle: {
align: 'left'
}
},
textStyle: { color: '#fff' },
series: [
{
type: 'bar',
barWidth: 8,
barCategoryGap: '0%',
data: seriesData,
itemStyle: { color: '#34A6D2', borderRadius: 100 },
label: { show: true, position: 'right', color: '#E59700' },
showBackground: false,
backgroundStyle: { color: 'transparent', borderWidth: 1, borderColor: '#0A7199', borderRadius: 100 }
}
]
}
return option
}
},
methods: {
getData() {
this.loading = true
api
.getYearApply()
.then(response => {
this.response = response
})
.finally(() => {
this.loading = false
})
}
},
beforeMount() {
this.getData()
}
}
</script>
<style scoped>
.chart {
height: 120px;
}
</style>
src/components/wekkIncome.vue 0 → 100644
浏览文件 @ e215b284
<template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
</template>
<script>
import * as api from '@/api/index'
export default {
name: 'MonthlyIncome',
data() {
return {
loading: false,
response: { sell_data: [] }
}
},
computed: {
option() {
const axisData = []
const seriesData = []
this.response.sell_data.forEach(item => {
axisData.push(item.project_name)
seriesData.push({ value: item.pay_money, name: item.project_name })
})
const option = {
tooltip: {
trigger: 'axis'
},
grid: { left: 0, top: 0, right: 0, bottom: 0 },
angleAxis: {
show: false
},
radiusAxis: {
type: 'category',
// data: ['sofia', 'kelley'],
data: axisData,
z: 10,
axisLine: {
show: false
},
axisTick: {
show: false
}
},
textStyle: {
color: '#fff'
},
polar: {},
series: [
{
type: 'bar',
barWidth: 10,
barCategoryGap: '0%',
// data: [
// { value: 100, itemStyle: { color: '#34A6D2' } },
// { value: 200, itemStyle: { color: '#34A6D2' } }
// ],
data: seriesData,
coordinateSystem: 'polar',
roundCap: true,
itemStyle: { color: '#34A6D2' }
}
]
}
return option
}
},
methods: {
getData() {
this.loading = true
api
.getMonthIncome()
.then(response => {
this.response = response
})
.finally(() => {
this.loading = false
})
}
},
beforeMount() {
this.getData()
}
}
</script>
<style scoped>
.chart {
height: 200px;
}
</style>
src/components/yearIncome.vue 0 → 100644
浏览文件 @ e215b284
<template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
</template>
<script>
import * as api from '@/api/index'
export default {
name: 'YearIncome',
data() {
return {
loading: false,
response: []
}
},
computed: {
option() {
let total = 0
const data = this.response.map(item => {
total += item.all_pay_money
return { value: item.all_pay_money, name: item.project_name }
})
const option = {
title: {
zlevel: 0,
text: `{value|${(total / 10000).toFixed(2)}万}`,
top: 'center',
textStyle: {
rich: { value: { color: '#fff', fontSize: 20, width: 160, align: 'center' } }
}
},
tooltip: { trigger: 'item' },
legend: {
orient: 'vertical',
left: '200px',
top: 'middle',
itemWidth: 13,
itemHeight: 13,
icon: 'rect',
textStyle: { color: '#fff', fontSize: 16, padding: [0, 0, 0, 12] }
},
series: [
{
name: '年度总营收',
type: 'pie',
radius: ['60%', '90%'],
width: 160,
height: 160,
stillShowZeroSum: false,
avoidLabelOverlap: false,
zlevel: 1,
label: { formatter: '{d}%', color: '#fff', fontSize: 16 },
labelLayout({ dataIndex }) {
return {
x: 340,
y: `${dataIndex * 25 + 30}`,
verticalAlign: 'middle',
align: 'left'
}
},
labelLine: { show: false },
data
}
]
}
return option
}
},
methods: {
getData() {
this.loading = true
api
.getYearIncome()
.then(response => {
this.response = response
})
.finally(() => {
this.loading = false
})
}
},
beforeMount() {
this.getData()
}
}
</script>
<style scoped>
.chart {
height: 160px;
}
</style>
src/index.html
浏览文件 @ e215b284
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Expires" content="0" />
<title></title> <title>紫荆教育决策数据看板</title>
<meta <meta
name="viewport" name="viewport"
id="viewport" id="viewport"
......
src/pages/home/index.vue
浏览文件 @ e215b284
<template> <template>
<div> <div>
<month-dashboard></month-dashboard> <month-dashboard style="margin-bottom: 24px"></month-dashboard>
<card title="各项目月度营收"> <card title="各项目月度营收">
<month-income></month-income> <month-income></month-income>
</card> </card>
...@@ -10,7 +10,18 @@ ...@@ -10,7 +10,18 @@
<card title="营收实时滚动信息"> <card title="营收实时滚动信息">
<now-income></now-income> <now-income></now-income>
</card> </card>
<project-cost></project-cost> <card>
<project-cost></project-cost>
</card>
<card title="年度总营收及各项目占比">
<year-income></year-income>
</card>
<card title="项目报名数据排名">
<project-ranking></project-ranking>
</card>
<card title="各月营收走势">
<month-income-trend></month-income-trend>
</card>
<card title="缴费结构"> <card title="缴费结构">
<payment-structure></payment-structure> <payment-structure></payment-structure>
</card> </card>
...@@ -28,14 +39,38 @@ import MonthCompleteRate from '@/components/monthCompleteRate' ...@@ -28,14 +39,38 @@ import MonthCompleteRate from '@/components/monthCompleteRate'
// 营收实时滚动信息 // 营收实时滚动信息
import NowIncome from '@/components/nowIncome' import NowIncome from '@/components/nowIncome'
import ProjectCost from '@/components/projectCost' import ProjectCost from '@/components/projectCost'
// 年度总营收及各项目占比
import YearIncome from '@/components/yearIncome'
// 项目报名数据排名
import ProjectRanking from '@/components/projectRanking'
// 各月营收走势
import MonthIncomeTrend from '@/components/monthIncomeTrend'
// 缴费结构 // 缴费结构
import PaymentStructure from '@/components/PaymentStructure' import PaymentStructure from '@/components/PaymentStructure'
export default { export default {
name: 'Index', name: 'Index',
components: { Card, MonthDashboard, MonthIncome, MonthCompleteRate, NowIncome, ProjectCost, PaymentStructure }, components: {
Card,
MonthDashboard,
MonthIncome,
MonthCompleteRate,
NowIncome,
ProjectCost,
YearIncome,
ProjectRanking,
MonthIncomeTrend,
PaymentStructure
},
data() { data() {
return {} return {}
} }
} }
</script> </script>
<style lang="scss">
.card {
margin-bottom: 24px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论