Skip to content

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

update

上级 d243aca6
显示空白字符变更
内嵌 并排
正在显示 包含 253 行增加 和 147 行删除
.config.dev.js
浏览文件 @ db1053f7
......@@ -34,6 +34,6 @@ module.exports = {
ProvidePlugin: {},
others: {
baseUrl: '/api',
loginUrl: 'https://login2.ezijing.com/xlearn/login/index'
loginUrl: 'https://login.ezijing.com/auth/login/index'
}
}
src/components/monthCompleteRate.vue
浏览文件 @ db1053f7
......@@ -5,7 +5,10 @@
<script>
import * as api from '@/api/index'
export default {
name: 'MonthlyIncome',
name: 'MonthCompleteRate',
props: {
data: Object
},
data() {
return {
loading: false,
......@@ -13,45 +16,48 @@ export default {
}
},
computed: {
option() {
const axisData = []
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 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
currentData() {
return this.data || this.response
},
dataset() {
const axis = []
const seriesItem = {
type: 'bar',
barWidth: 10,
barCategoryGap: '0%',
itemStyle: { borderRadius: 100 },
label: { show: true, position: 'right', color: '#E59700' }
// showBackground: true,
// backgroundStyle: { color: 'transparent', borderWidth: 1, borderColor: '#0A7199', borderRadius: 100 },
}
const series = [
{ ...seriesItem, name: '收入', data: [] },
{ ...seriesItem, name: '投入', data: [] }
]
this.currentData.sell_data &&
this.currentData.sell_data.forEach(item => {
axis.push(item.project_name)
series[0].data.push({ value: item.pay_money.toFixed(), name: item.project_name })
series[1].data.push({ value: item.cost.toFixed(), name: item.project_name })
})
return { axis, series }
},
grid: { left: '60px', top: 0, right: '60px', bottom: 0 },
xAxis: { show: false, max: 100 },
option() {
return {
tooltip: { trigger: 'axis', axisPointer: { type: 'none' } },
grid: { left: '60px', right: '60px', bottom: 0 },
legend: { textStyle: { color: '#fff' } },
xAxis: { show: false },
yAxis: {
inverse: true,
type: 'category',
data: axisData,
data: this.dataset.axis,
axisLine: { show: false },
axisTick: { show: false }
},
textStyle: { color: '#fff' },
series: [
{
type: 'bar',
barWidth: 10,
barCategoryGap: '0%',
data: seriesData,
itemStyle: { color: '#34A6D2', borderRadius: 100 },
label: { show: true, position: 'right', color: '#E59700', formatter: '{c}%' },
showBackground: true,
backgroundStyle: { color: 'transparent', borderWidth: 1, borderColor: '#0A7199', borderRadius: 100 }
}
]
series: this.dataset.series
}
return option
}
},
methods: {
......@@ -68,13 +74,13 @@ export default {
}
},
beforeMount() {
this.getData()
!this.data && this.getData()
}
}
</script>
<style scoped>
.chart {
height: 120px;
height: 280px;
}
</style>
src/components/monthDashboard.vue
浏览文件 @ db1053f7
......@@ -2,11 +2,11 @@
<div class="inner">
<dl>
<dt>总销售额</dt>
<dd>¥{{ response.all_pay_money.toLocaleString() }}</dd>
<dd>¥{{ formatValue(currentData.all_pay_money) }}</dd>
</dl>
<dl>
<dt>总成单量</dt>
<dd>{{ response.all_pay_count.toLocaleString() }}</dd>
<dd>{{ formatValue(currentData.all_pay_count) }}</dd>
</dl>
</div>
</template>
......@@ -15,20 +15,31 @@
import * as api from '@/api/index'
export default {
name: 'MonthDashboard',
props: {
data: Object
},
data() {
return {
response: { all_pay_money: 0, all_pay_count: 0 }
}
},
computed: {
currentData() {
return this.data || this.response
}
},
methods: {
getData() {
api.getMonthIncome().then(response => {
this.response = response
})
},
formatValue(value = '') {
return value.toLocaleString()
}
},
beforeMount() {
this.getData()
!this.data && this.getData()
}
}
</script>
......
src/components/monthIncome.vue
浏览文件 @ db1053f7
......@@ -6,6 +6,9 @@
import * as api from '@/api/index'
export default {
name: 'MonthlyIncome',
props: {
data: Object
},
data() {
return {
loading: false,
......@@ -13,53 +16,39 @@ export default {
}
},
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 })
currentData() {
return this.data || this.response
},
colors() {
return this.$store.state.colors
},
dataset() {
const axis = []
const series = []
this.currentData.sell_data &&
this.currentData.sell_data.forEach(item => {
const color = this.colors[item.project_name]
axis.push(`${item.project_name}（${item.pay_money / 10000}万）`)
series.push({ value: item.pay_money, name: item.project_name, itemStyle: { color } })
})
const option = {
tooltip: {
trigger: 'axis'
return { axis, series }
},
option() {
const option = {
tooltip: {},
grid: { left: 0, top: 0, right: 0, bottom: 0 },
angleAxis: {
show: false
},
angleAxis: { show: false, max: value => (value.max * 4) / 3 },
radiusAxis: {
type: 'category',
// data: ['sofia', 'kelley'],
data: axisData,
z: 10,
axisLine: {
show: false
},
axisTick: {
show: false
}
inverse: true,
data: this.dataset.axis,
axisLabel: { interval: 0, color: '#fff' },
axisLine: { show: false },
axisTick: { show: false, alignWithLabel: true },
splitLine: { show: true, lineStyle: { color: 'rgba(17, 51, 68, 0.8)' } }
},
textStyle: {
color: '#fff'
},
polar: {},
series: [
{
type: 'bar',
barWidth: 10,
// data: [
// { value: 100, itemStyle: { color: '#34A6D2' } },
// { value: 200, itemStyle: { color: '#34A6D2' } }
// ],
data: seriesData,
coordinateSystem: 'polar',
// roundCap: true,
itemStyle: { color: '#34A6D2' }
}
]
polar: { radius: ['30%', '100%'] },
series: [{ type: 'bar', barWidth: 10, data: this.dataset.series, coordinateSystem: 'polar' }]
}
return option
}
......@@ -78,7 +67,7 @@ export default {
}
},
beforeMount() {
this.getData()
!this.data && this.getData()
}
}
</script>
......
src/components/monthIncomeTrend.vue
浏览文件 @ db1053f7
<template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
<v-chart
class="chart"
:option="option"
:autoresize="true"
:loading="loading"
@legendselectchanged="legendselectchanged"
/>
</template>
<script>
......@@ -9,53 +15,102 @@ export default {
data() {
return {
loading: false,
response: []
response: [],
legendselect: {}
}
},
computed: {
colors() {
return this.$store.state.colors
},
totalBar() {
// 统计
const total = this.dataset.axis.map(month => {
return this.response.reduce((result, item) => {
if (item.pay_month === month && this.legendselect[item.project_name] !== false) {
result += item.pay_money
}
return result
}, 0)
})
// 统计
return {
type: 'bar',
name: '',
stack: '',
barWidth: 20,
z: -1,
barGap: '-100%',
data: total,
label: {
show: true,
position: 'top',
color: '#fff',
formatter({ value }) {
return value / 10000
}
},
itemStyle: { color: 'transparent' }
}
},
dataset() {
const dimensions = []
const source = {}
const legend = []
const axis = []
const series = []
this.response.forEach(item => {
if (!dimensions.includes(item.pay_month)) {
dimensions.push(item.pay_month)
// 类目
if (!legend.includes(item.project_name)) {
legend.push(item.project_name)
}
// X 轴
if (!axis.includes(item.pay_month)) {
axis.push(item.pay_month)
}
if (!source[item.project_name]) {
source[item.project_name] = []
series.push({
const currentData = { name: item.project_name, value: item.pay_money }
const color = this.colors[item.project_name] || '#000'
const serisItem = {
type: 'bar',
name: item.project_name,
stack: 'total',
// label: { show: true },
barWidth: 20
})
barWidth: 20,
data: [],
itemStyle: { color }
}
const found = series.find(data => data.name === item.project_name)
if (found) {
found.data.push(currentData)
} else {
serisItem.data.push(currentData)
series.push(serisItem)
}
source[item.project_name].push(item.pay_money)
})
source.product = dimensions
return { dimensions, source, series }
return { legend, axis, series }
},
option() {
return {
tooltip: { trigger: 'axis', axisPointer: {} },
dataset: { source: this.dataset.source },
// tooltip: { trigger: 'axis', axisPointer: {} },
legend: {
// top: 'bottom',
bottom: '10px',
top: 'bottom',
itemWidth: 13,
itemHeight: 13,
icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 }
},
yAxis: { type: 'value', splitLine: { show: false }, axisLabel: { color: '#0A7199' } },
yAxis: {
type: 'value',
splitLine: { show: false },
axisLabel: { color: '#0A7199', formatter: value => value / 10000 }
},
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { color: '#0A7199' }
axisLabel: { color: '#0A7199' },
data: this.dataset.axis
},
series: this.dataset.series
series: [...this.dataset.series, this.totalBar]
}
}
},
......@@ -70,6 +125,9 @@ export default {
.finally(() => {
this.loading = false
})
},
legendselectchanged({ selected }) {
this.legendselect = selected
}
},
beforeMount() {
......
src/components/paymentStructure.vue
浏览文件 @ db1053f7
......@@ -31,7 +31,7 @@ export default {
series: [
{
type: 'pie',
label: { alignTo: 'labelLine', color: '#fff' },
label: { alignTo: 'labelLine', color: '#fff', formatter: '{b} {d}%' },
data: this.dataset
}
]
......
src/components/weekIncome.vue
浏览文件 @ db1053f7
<template>
<v-chart class="chart" :option="option" :autoresize="true" :loading="loading" />
<v-chart
class="chart"
:option="option"
:autoresize="true"
:loading="loading"
@legendselectchanged="legendselectchanged"
/>
</template>
<script>
......@@ -9,13 +15,44 @@ export default {
data() {
return {
loading: false,
response: []
response: [],
legendselect: {}
}
},
computed: {
colors() {
return this.$store.state.colors
},
totalBar() {
// 统计
const total = this.dataset.axis.map(week => {
return this.response.reduce((result, item) => {
if (item.week === week && this.legendselect[item.project_name] !== false) {
result += item.pay_money
}
return result
}, 0)
})
// 统计
return {
type: 'bar',
name: '',
stack: '',
barWidth: 20,
z: -1,
barGap: '-100%',
data: total,
label: {
show: true,
position: 'top',
color: '#fff',
formatter({ value }) {
return value / 10000
}
},
itemStyle: { color: 'transparent' }
}
},
dataset() {
const legend = []
const axis = []
......@@ -32,12 +69,19 @@ export default {
const currentData = { name: item.project_name, value: item.pay_money }
const color = this.colors[item.project_name] || '#000'
// 去除颜色，显示边框
if (['当前周预测', 'T+1', 'T+2'].includes(item.week)) {
const borderColor = this.colors[item.project_name] || '#000'
currentData.itemStyle = { color: 'transparent', borderWidth: 1, borderType: 'dashed', borderColor }
currentData.itemStyle = { color: 'transparent', borderWidth: 1, borderType: 'dashed', borderColor: color }
}
const serisItem = {
type: 'bar',
name: item.project_name,
stack: 'total',
barWidth: 20,
data: [],
itemStyle: { color }
}
const serisItem = { type: 'bar', name: item.project_name, stack: 'total', barWidth: 20, data: [] }
const found = series.find(data => data.name === item.project_name)
if (found) {
found.data.push(currentData)
......@@ -46,37 +90,24 @@ export default {
series.push(serisItem)
}
})
// 统计
const total = axis.map(week => {
return this.response.reduce((item, result) => {
if (item.week === week) {
result += item.pay_money
}
return result
}, 0)
})
// 统计
series.push({ type: 'bar', name: 'total', stack: 'total', barWidth: 20, data: total })
return { legend, axis, series }
},
option() {
return {
tooltip: { trigger: 'axis', axisPointer: {} },
dataset: { source: this.dataset.source },
// tooltip: { trigger: 'axis', axisPointer: { type: 'none' } },
grid: { left: 0, top: '10%', right: 0, bottom: '12%', containLabel: true },
legend: {
show: false,
bottom: '10px',
itemWidth: 13,
itemHeight: 13,
icon: 'rect',
textStyle: { color: '#fff', fontSize: 16 },
data: this.dataset.legend
textStyle: { color: '#fff', fontSize: 16 }
// data: this.dataset.legend
},
yAxis: {
type: 'value',
splitLine: { show: false },
axisLabel: { color: '#0A7199', width: 40, interval: 0, formatter: value => value / 10000 }
axisLabel: { color: '#0A7199', formatter: value => value / 10000 }
},
xAxis: {
type: 'category',
......@@ -85,7 +116,7 @@ export default {
axisLabel: { color: '#0A7199', rotate: 45 },
data: this.dataset.axis
},
series: this.dataset.series
series: [...this.dataset.series, this.totalBar]
}
}
},
......@@ -100,6 +131,9 @@ export default {
.finally(() => {
this.loading = false
})
},
legendselectchanged({ selected }) {
this.legendselect = selected
}
},
beforeMount() {
......
src/pages/home/index.vue
浏览文件 @ db1053f7
<template>
<div>
<month-dashboard style="margin-bottom: 24px"></month-dashboard>
<card>
<month-dashboard :data="month" style="margin-bottom: 24px"></month-dashboard>
<card title="周营收平台走势及预测（万）">
<week-income></week-income>
</card>
<card title="各项目月度营收">
<month-income></month-income>
<month-income :data="month"></month-income>
</card>
<card title="各项目月度达成率">
<month-complete-rate></month-complete-rate>
<card title="各项目月度投入产出比">
<month-complete-rate :data="month"></month-complete-rate>
</card>
<card title="营收实时滚动信息">
<now-income></now-income>
</card>
<card>
<card title="周营收平台走势及预测（万）">
<project-cost></project-cost>
</card>
<card title="年度总营收及各项目占比">
......@@ -32,6 +32,8 @@
</template>
<script>
import * as api from '@/api/index'
import Card from '@/components/card'
// 月概览
import MonthDashboard from '@/components/monthDashboard'
......@@ -68,7 +70,19 @@ export default {
WeekIncome
},
data() {
return {}
return {
month: {}
}
},
methods: {
getMonthData() {
api.getMonthIncome().then(response => {
this.month = response
})
}
},
beforeMount() {
this.getMonthData()
}
}
</script>
......
src/store/index.js
浏览文件 @ db1053f7
......@@ -6,7 +6,7 @@ Vue.use(Vuex)
const store = new Vuex.Store({
state: {
colors: { sofia: '#FC654B', kelley: '#34A6D2', ciis: '#EFB1AE', cu: '#F9BD73', shms: '#9892F0' },
colors: { Sofia: '#FC654B', Kelley: '#34A6D2', CIIS: '#EFB1AE', CU: '#F9BD73', SHMS: '#9892F0' },
user: {},
isLogin: false,
isIos: /iphone|ipad|ipod/i.test(navigator.userAgent),
......
src/utils/axios.js
浏览文件 @ db1053f7
import axios from 'axios'
import router from '@/router'
const httpRequest = axios.create({
baseURL: webConf.others.baseUrl,
timeout: 60000,
......@@ -23,24 +22,19 @@ httpRequest.interceptors.request.use(
// 响应拦截
httpRequest.interceptors.response.use(
function(response) {
const { data } = response
if (data.code !== 200) {
console.error(data.msg || data.message)
const { data, code } = response.data
if (code === 401) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
}
if (code !== 200) {
return Promise.reject(data)
}
return data.data
return data
},
function(error) {
if (error.response) {
const { status, message, code } = error.response.data
// 未登录
if (status === 403) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
} else if (status === 400 && code === 401) {
router.push('/role')
} else {
console.error(message || error.response.data)
}
const { msg } = error.response.data
console.error(msg || error.response.data)
return Promise.reject(error.response)
} else {
console.error(error)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论