Skip to content

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

update

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