Commit ff4809df authored by daywrite's avatar daywrite

售前数据

parent ec6dfa94
...@@ -10,5 +10,8 @@ export default { ...@@ -10,5 +10,8 @@ export default {
}, },
getSalesGoal: { getSalesGoal: {
url: '/vue/analysis/get-sales-goal' url: '/vue/analysis/get-sales-goal'
},
getPreSalesChart: {
url: '/vue/analysis/get-pre-sales-chart'
} }
} }
export default {
methods: {
/* eslint-disable */
c () {
var chart = Highcharts.chart('key', {
chart: {
type: 'column'
},
title: {
text: '堆叠柱形图'
},
xAxis: {
categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
},
yAxis: {
min: 0,
title: {
text: '水果消费总量'
},
stackLabels: { // 堆叠数据标签
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'总量: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
// 如果不需要数据标签阴影,可以将 textOutline 设置为 'none'
textOutline: '1px 1px black'
}
}
}
},
series: [{
name: '小张',
data: [5, 3, 4, 7, 2]
}, {
name: '小彭',
data: [2, 2, 3, 2, 1]
}, {
name: '小潘',
data: [3, 4, 4, 2, 5]
}]
});
}
}
}
<template>
<section>
<div class="content">
<search-header
ref="searchHeader"
:title="'销售数据'"
@update:headerClear="() => searchClear()">
</search-header>
<time-search-form
ref="timeSearchForm"
formSearchKey="projectSearch"
@update:list="search => timeSearchForm(search)">
</time-search-form>
<search-form
ref="clientForm"
:filter="filter"
@update:clientList="form =>{ updateForm(form) }">
</search-form>
<div class="page-body-content">
<div class="mb10">
<singleRadioTool
:form-item="type"
:options-list="navArray"
@update:item="val => { typeChange(val) }">
</singleRadioTool>
</div>
<div class="mt10">
<el-row class="header-title" style="height: 100%;">
<el-col>
<span class="title-two">售前简报</span>
<countArr :list="result.countList"></countArr>
</el-col>
</el-row>
<div class="header-title header-flex" style="height: 100%;">
<!-- <div v-for="item in chartTypeArray">
<span class="title-two">{{ item.name }}</span>
<div :id="item.key" style="height:400px;"></div>
</div> -->
<div>
<span class="title-two">123</span>
<div id="key" style="height:400px;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import SearchHeader from '../../common/searchHeader'
import SearchForm from '../../common/SearchForm'
import countArr from '../analysis/countArr'
import TimeSearchForm from '../analysis/timeSearchForm'
import singleRadioTool from '../../common/singleRadioTool'
import preSales from './preSales.js'
import {
requestAPI,
api
} from '@/lib/commonMixin'
export default {
name: 'caseHome',
mixins: [preSales],
components: {
SearchHeader,
SearchForm,
TimeSearchForm,
singleRadioTool,
countArr
},
data () {
return {
filter: [],
form: {
},
type: 'all',
navArray: [],
result: {
countList: []
}
}
},
mounted () {
this.init()
},
methods: {
init () {
this.getFilter()
this.getSalesChart()
},
getSalesChart () {
requestAPI(api.getPreSalesChart, {})
.then(res => {
this.result.countList = res.counts
this.c()
})
},
// 1.查询条件
getFilter () {
requestAPI(api.getFilterSalesChart).then(res => {
this.filter = res
// let _inx = res.findIndex(item => item.key === 'CaseSearch[case_status]')
// let _newRes = res.splice(_inx, 1)
// this.filter = res
// let _navArray = _newRes[0].value
// _navArray.unshift({key: 'all', name: '全部'})
// this.navArray = _navArray
})
},
typeChange (val) {
let ret = this.setParams({
...this.form,
page: this.pagenation.thispage
}, { 'CaseSearch[case_status]': val })
this.getList(ret)
},
// 3.2关键字后面的重置
searchClear () {
},
// 5.1查询条件
updateForm (search) {
let ret = this.setParams({
...this.form,
page: this.pagenation.thispage
}, search)
this.getList(ret)
},
// 5.3 TimeSearchForm
timeSearchForm (search) {
let ret = this.setParams({
...this.form,
page: this.pagenation.thispage
}, search)
this.getList(ret)
}
}
}
</script>
<style scoped lang="scss">
.header-flex {
display: flex;
flex-wrap: wrap;
}
.header-flex div {
flex: 0 1 50%;
}
@include c('opearate-button') {
> .el-button {
margin-right:0px;
}
& .btn-primary .badge {
color: #333744;
background-color: #fff;
}
& .badge {
position: relative;
top: 0px;
left: -5px;
display: inline-block;
padding: 0px 5px;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
background:white;
color:#333744;
}
i {
display: inline-block;
padding-right: 3px;
}
}
</style>
...@@ -16,16 +16,18 @@ export default { ...@@ -16,16 +16,18 @@ export default {
title: { title: {
text: `${item.name}${item.year}年销售任务` text: `${item.name}${item.year}年销售任务`
}, },
gridLineWidth: 1,
labels: { labels: {
rotation: -45 rotation: -45
}, },
categories: categories categories: categories
}, },
yAxis: { yAxis: {
max: Math.ceil(item.goal_profit / 500000) * 500000, max: Math.ceil(item.goal_profit / 500000) * 500000 ,
title: { title: {
text: '' text: ''
}, },
gridLineWidth: 1,
labels: { labels: {
formatter: function () { formatter: function () {
return (this.value / 10000) + '万' return (this.value / 10000) + '万'
...@@ -48,15 +50,29 @@ export default { ...@@ -48,15 +50,29 @@ export default {
crosshairs: true, crosshairs: true,
shared: true shared: true
}, },
plotOptions: { plotOptions: {
spline: { column: {
marker: { stacking: 'normal',
radius: 4, dataLabels: {
lineColor: '#666666', // 柱状图里面是否显示value值
lineWidth: 1 // enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
// 如果不需要数据标签阴影,可以将 textOutline 设置为 'none'
textOutline: '1px 1px black'
}
} }
} }
}, },
// plotOptions: {
// spline: {
// marker: {
// radius: 4,
// lineColor: '#666666',
// lineWidth: 1
// }
// }
// },
series: [{ series: [{
name: item.name, name: item.name,
data: item.data_profits data: item.data_profits
......
import AnalysisHome from '../components/analysis/analysis/analysisHome' import AnalysisHome from '../components/analysis/analysis/analysisHome'
import SalesHome from '../components/analysis/sales/salesHome' import SalesHome from '../components/analysis/sales/salesHome'
import SalesGoalHome from '../components/analysis/sales-goal/SalesGoalHome' import SalesGoalHome from '../components/analysis/sales-goal/SalesGoalHome'
import PreSalesHome from '../components/analysis/pre-sales/preSalesHome'
const routes = [{ const routes = [{
path: '/analysis', path: '/analysis',
name: 'analysis', name: 'analysis',
...@@ -13,5 +14,9 @@ const routes = [{ ...@@ -13,5 +14,9 @@ const routes = [{
path: '/salesGoal', path: '/salesGoal',
name: 'salesGoal', name: 'salesGoal',
component: SalesGoalHome component: SalesGoalHome
}, {
path: '/preSales',
name: 'preSalesHome',
component: PreSalesHome
}] }]
export default routes export default routes
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment