Skip to content

M
Muse
Commit 2c383fd7 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

销售数据统计

parent 9e5fdfd3
Hide whitespace changes
Inline Side-by-side
Showing with 1591 additions and 312 deletions
src/App.vue
View file @ 2c383fd7
...@@ -38,8 +38,7 @@ export default { ...@@ -38,8 +38,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_988027_pm4p4dmbxwe.css'; @import '//at.alicdn.com/t/font_988027_icjaw26gr1.css';
@import '//at.alicdn.com/t/font_635492_i78o4snnnqp.css';
@import './assets/global/global.css'; @import './assets/global/global.css';
body,html{ body,html{
padding: 0px; padding: 0px;
......
src/components/viitto/dataLook.vue
View file @ 2c383fd7
...@@ -586,18 +586,22 @@ ...@@ -586,18 +586,22 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<lineChart v-if="chartShow" :zoom="zoom" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/> <lineChart v-if="chartShow && (!RB_Branch_id || RB_Branch_id !== 0)" :zoom="zoom" :inquireList="inquireList" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/>
<lineChart2 v-if="chartShow && RB_Branch_id == 0" :zoom="zoom" :inquireList="inquireList" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/>
<!-- <lineChart2 v-if="chartShow" :zoom="zoom" :inquireList="inquireList" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/> -->
</el-row> </el-row>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import lineChart from "./lineChart2"; import lineChart from "./lineChart";
import lineChart2 from "./lineChart2";
import lineChartK from "./lineChartK"; import lineChartK from "./lineChartK";
export default { export default {
components: { components: {
lineChart, lineChart,
lineChart2,
lineChartK lineChartK
}, },
data(){ data(){
...@@ -644,6 +648,7 @@ export default { ...@@ -644,6 +648,7 @@ export default {
day_order_statics: [], day_order_statics: [],
day_click_statics: [], day_click_statics: [],
day_history_preferprice: [], day_history_preferprice: [],
inquireList: [],
zoom: 1, zoom: 1,
day_line_statics: [], day_line_statics: [],
day_total_guestprice: {}, day_total_guestprice: {},
...@@ -655,6 +660,7 @@ export default { ...@@ -655,6 +660,7 @@ export default {
Status:0, Status:0,
}, },
companyList: [], companyList: [],
RB_Branch_id: null
} }
}, },
watch: { watch: {
...@@ -662,6 +668,10 @@ export default { ...@@ -662,6 +668,10 @@ export default {
this.loadRegionChild(nv) this.loadRegionChild(nv)
}, },
},created(){ },created(){
let user = localStorage.user ? JSON.parse(localStorage.user) : ''
if (user) {
this.RB_Branch_id = user.RB_Branch_id
}
this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => { this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
let data = res.data.data; let data = res.data.data;
...@@ -763,6 +773,8 @@ export default { ...@@ -763,6 +773,8 @@ export default {
this.ordercountList = data.day_guestprice.ordercountList this.ordercountList = data.day_guestprice.ordercountList
// 时间 // 时间
this.dateList = data.day_guestprice.dateList this.dateList = data.day_guestprice.dateList
// 询价
this.inquireList = data.day_guestprice.inquireList
// 合计 // 合计
this.day_total_guestprice = data.day_total_guestprice[0] this.day_total_guestprice = data.day_total_guestprice[0]
this.chartShow = true; this.chartShow = true;
......
src/components/viitto/lineChart.vue
View file @ 2c383fd7
...@@ -30,8 +30,6 @@ ...@@ -30,8 +30,6 @@
</div> </div>
</template> </template>
<script> <script>
let preferpriceList = [],guestnumList = [],clickcountList = [],ordercountList = [],unitpriceList = [],day_total_guestprice = [],dateList = [];
let myChart = null
export default { export default {
props:[ props:[
'preferpriceList', 'preferpriceList',
...@@ -41,6 +39,7 @@ export default { ...@@ -41,6 +39,7 @@ export default {
'unitpriceList', 'unitpriceList',
'day_total_guestprice', 'day_total_guestprice',
'dateList', 'dateList',
'inquireList',
'zoom' 'zoom'
], ],
data(){ data(){
...@@ -49,17 +48,10 @@ export default { ...@@ -49,17 +48,10 @@ export default {
},created(){ },created(){
},mounted() { },mounted() {
myChart = this.$echarts.init(this.$refs.myecharts);
preferpriceList = this.preferpriceList
guestnumList = this.guestnumList
clickcountList = this.clickcountList
ordercountList = this.ordercountList
unitpriceList = this.unitpriceList
day_total_guestprice = this.day_total_guestprice
dateList = this.dateList
this.init() this.init()
},methods:{ },methods:{
init() { init() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = []; var dataAxis = [];
let _this = this; let _this = this;
let option = { let option = {
...@@ -86,9 +78,9 @@ export default { ...@@ -86,9 +78,9 @@ export default {
{ {
show: true, show: true,
realtime: true, realtime: true,
start: 99, start: 90,
end: 100, end: 100,
xAxisIndex: [0, 1], xAxisIndex: [0, 1, 2, 3],
textStyle: { textStyle: {
color: "#ffffff" color: "#ffffff"
}, },
...@@ -101,10 +93,9 @@ export default { ...@@ -101,10 +93,9 @@ export default {
{ {
type: 'inside', type: 'inside',
realtime: true, realtime: true,
start: 99, start: 90,
end: 100, end: 100,
xAxisIndex: [0, 1], xAxisIndex: [0, 1, 2, 3],
bottom: 0,
textStyle: { textStyle: {
color: "#ffffff" color: "#ffffff"
}, },
...@@ -121,79 +112,70 @@ export default { ...@@ -121,79 +112,70 @@ export default {
}, },
grid: [{ grid: [{
left: 50, left: 80,
right: 50, right: 10,
// height: '17%' top: '5%',
height: '16%'
}, {
left: 80,
right: 10,
top: '28%',
height: '16%'
}, {
left: 80,
right: 10,
top: '51%',
height: '16%'
}, {
left: 80,
right: 10,
top: '74%',
height: '16%'
} }
// , {
// left: 50,
// right: 50,
// top: '31%',
// height: '17%'
// }, {
// left: 50,
// right: 50,
// top: '55%',
// height: '17%'
// }, {
// left: 50,
// right: 50,
// top: '80%',
// height: '17%'
// }
], ],
xAxis : [ xAxis : [
{ {
gridIndex: 0,
type : 'category', type : 'category',
boundaryGap : false, boundaryGap : false,
data: dateList, data: _this.dateList,
// "show": false, position: 'bottom',
axisLabel: { "show": false,
color: '#fff', },
formatter: function (value, index) { {
return value.substring(0, 10); gridIndex: 1,
} type : 'category',
}, boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false,
}, },
{ {
gridIndex: 2,
type : 'category', type : 'category',
boundaryGap : false, boundaryGap : false,
data: dateList, data: _this.dateList,
position: 'bottom',
"show": false, "show": false,
}, },
// { {
// gridIndex: 1, gridIndex: 3,
// type : 'category', type : 'category',
// boundaryGap : false, boundaryGap : false,
// data: _this.dateList, data: _this.dateList,
// position: 'bottom', position: 'bottom',
// "show": false "show": true,
// }, axisLabel: {
// { color: '#fff',
// gridIndex: 2, },
// type : 'category', }
// boundaryGap : false,
// data: _this.dateList,
// position: 'bottom',
// "show": false,
// },
// {
// gridIndex: 3,
// type : 'category',
// boundaryGap : false,
// data: _this.dateList,
// position: 'bottom',
// "show": true,
// axisLabel: {
// color: '#fff',
// },
// }
], ],
yAxis : [ yAxis : [
{ {
gridIndex: 0, gridIndex: 0,
name : '人数 '+ _this.day_total_guestprice.GuestNum +'人', name : '报名单数 '+ _this.day_total_guestprice.OrderCount,
type : 'value', type : 'value',
inverse: false,
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#30374E', color: '#30374E',
...@@ -202,98 +184,77 @@ export default { ...@@ -202,98 +184,77 @@ export default {
}, },
nameTextStyle: { nameTextStyle: {
color: '#ffffff', color: '#ffffff',
padding: [0, 0, 0, 60], padding: [0, 0, 0, 80],
fontSize: 18 fontSize: 18
}, },
axisLabel: { axisLabel: {
color: '#34C69C', color: '#3FD2F3',
}
},
{
gridIndex: 1,
name : '收客人头数 '+ _this.day_total_guestprice.GuestNum,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
}, },
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 80],
fontSize: 18
},
axisLabel: {
color: '#32ff7e',
}
}, },
{ {
gridIndex: 0, gridIndex: 2,
name : '价格', name : '产品点击 '+ _this.day_total_guestprice.ClickCount,
type : 'value', type : 'value',
position: 'right', inverse: false,
splitLine: { splitLine: {
show: false, lineStyle: {
lineStyle: { color: '#30374E',
color: '#30374E', type: 'dashed'
type: 'dashed' }
},
nameTextStyle: {
color: '#ffffff',
padding: [10, 0, 0, 110],
fontSize: 18
},
axisLabel: {
color: '#EE4454',
} }
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 60, 0, 0],
fontSize: 18
},
axisLabel: {
color: '#12BBFF',
},
}, },
// { {
// gridIndex: 1, gridIndex: 3,
// name : '成交总量 ￥'+ _this.day_total_guestprice.PreferPrice +'元', name : '询价统计 '+ _this.day_total_guestprice.InquireCount,
// type : 'value', type : 'value',
// inverse: false, inverse: false,
// splitLine: { splitLine: {
// lineStyle: { lineStyle: {
// color: '#30374E', color: '#30374E',
// type: 'dashed' type: 'dashed'
// } }
// }, },
// nameTextStyle: { nameTextStyle: {
// color: '#ffffff', color: '#ffffff',
// padding: [0, 0, 0, 160], padding: [10, 0, 0, 110],
// fontSize: 18 fontSize: 18
// }, },
// axisLabel: { axisLabel: {
// color: '#F5AF19', color: 'rgb(106, 176, 76)',
// } }
// }, }
// {
// gridIndex: 2,
// name : '报名单数 '+ _this.day_total_guestprice.OrderCount,
// type : 'value',
// inverse: false,
// splitLine: {
// lineStyle: {
// color: '#30374E',
// type: 'dashed'
// }
// },
// nameTextStyle: {
// color: '#ffffff',
// padding: [0, 0, 0, 80],
// fontSize: 18
// },
// axisLabel: {
// color: '#3FD2F3',
// }
// },
// {
// gridIndex: 3,
// name : '产品点击 '+ _this.day_total_guestprice.ClickCount,
// type : 'value',
// inverse: false,
// splitLine: {
// lineStyle: {
// color: '#30374E',
// type: 'dashed'
// }
// },
// nameTextStyle: {
// color: '#ffffff',
// padding: [10, 0, 0, 110],
// fontSize: 18
// },
// axisLabel: {
// color: '#EE4454',
// }
// }
], ],
series : [ series : [
{ {
name:'人数', name:'报名单数',
type:'line', type:'line',
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
...@@ -301,160 +262,122 @@ export default { ...@@ -301,160 +262,122 @@ export default {
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
data: guestnumList, data: _this.ordercountList,
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
color: '#0F56FF', color: '#3FD2F3',
shadowBlur: 10, shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)' shadowColor: 'rgba(255,250,0,1)'
}, },
sampling: 'average',
lineStyle: { lineStyle: {
color: "#12BBFF", color: "#9345F8",
shadowBlur: 0, shadowBlur: 2,
width: 2, width: 1,
// shadowColor: "#0F56FF" shadowColor: "#3FD2F3"
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(18,187,255,1)" }, { offset: 0, color: "rgba(147,69,248,1)" },
{ offset: 1, color: "rgba(15,86,255,0)" } { offset: .8, color: "rgba(147,69,248,0)" }
]) ])
} }
}, },
tooltip: {
formatter: '{b}: {c}'
}
}, },
,
{ {
name:'价格', name:'收客人头数',
type:'line', type:'line',
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
symbolSize: 2, symbolSize: 2,
hoverAnimation: true, hoverAnimation: true,
smooth: true, smooth: true,
// symbol: 'none', showSymbol: false,
showSymbol: false, data: _this.guestnumList,
data: unitpriceList, itemStyle: {
sampling: 'average', borderWidth: 2,
itemStyle: { color: '#3FD2F3',
borderWidth: 2, shadowBlur: 5,
color: '#44D6AC', shadowColor: 'rgba(255,250,0,1)'
shadowBlur: 10, },
shadowColor: 'rgba(255,250,0,1)' lineStyle: {
}, color: "#32ff7e",
lineStyle: { shadowBlur: 2,
color: "#A7DE8A", width: 1,
shadowBlur: 0, shadowColor: "#3ae374"
width: 2, },
// shadowColor: "#44D6AC" areaStyle: {
}, normal: {
areaStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
normal: { { offset: 0, color: "rgba(50, 255, 126,1)" },
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: .8, color: "rgba(50, 255, 126,0)" }
{ offset: 0, color: "rgba(167,222,138,1)" }, ])
{ offset: 1, color: "rgba(167,222,138,0)" } }
]) },
}
},
}, },
// { {
// name:'成交总量', name:'产品点击',
// type:'line', type:'line',
// xAxisIndex: 2, xAxisIndex: 2,
// yAxisIndex: 2, yAxisIndex: 2,
// symbolSize: 2, symbolSize: 2,
// hoverAnimation: true, hoverAnimation: true,
// smooth: true, smooth: true,
// showSymbol: false, showSymbol: false,
// data: _this.preferpriceList, data: _this.clickcountList,
// itemStyle: { itemStyle: {
// borderWidth: 2, borderWidth: 2,
// color: '#F5AF19', color: '#EE4454',
// shadowBlur: 10, shadowBlur: 5,
// shadowColor: 'rgba(255,250,0,1)' shadowColor: 'rgba(255,250,0,1)'
// }, },
// lineStyle: { lineStyle: {
// color: "#F5AF19", color: "#FFAA85",
// shadowBlur: 10, width: 1,
// width: 5, shadowBlur: 2,
// shadowColor: "#F5AF19" shadowColor: "#EE4454"
// }, },
// areaStyle: { areaStyle: {
// normal: { normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(245,175,25,1)" }, { offset: 0, color: "rgba(239,71,86,1)" },
// { offset: 1, color: "rgba(245,175,25,0)" } { offset: .8, color: "rgba(239,71,86,0)" }
// ]) ])
// } }
// }, },
// } },
// , {
// { name:'询价统计',
// name:'报名单数', type:'line',
// type:'line', xAxisIndex: 3,
// xAxisIndex: 3, yAxisIndex: 3,
// yAxisIndex: 3, symbolSize: 2,
// symbolSize: 2, hoverAnimation: true,
// hoverAnimation: true, smooth: true,
// smooth: true, showSymbol: false,
// showSymbol: false, data: _this.inquireList,
// data: _this.ordercountList, itemStyle: {
// itemStyle: { borderWidth: 2,
// borderWidth: 2, color: "rgb(106, 176, 76)",
// color: '#3FD2F3', shadowBlur: 5,
// shadowBlur: 10, shadowColor: 'rgba(255,250,0,1)'
// shadowColor: 'rgba(255,250,0,1)' },
// }, lineStyle: {
// lineStyle: { color: "rgb(106, 176, 76)",
// color: "#9345F8", width: 1,
// shadowBlur: 10, shadowBlur: 2,
// width: 5, shadowColor: "rgb(106, 176, 76)",
// shadowColor: "#3FD2F3" },
// }, areaStyle: {
// areaStyle: { normal: {
// normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(106, 176, 76,1)" },
// { offset: 0, color: "rgba(147,69,248,1)" }, { offset: .8, color: "rgba(106, 176, 76,0)" }
// { offset: 1, color: "rgba(147,69,248,0)" } ])
// ]) }
// } },
// }, }
// }
// ,
// {
// name:'产品点击',
// type:'line',
// xAxisIndex: 4,
// yAxisIndex: 4,
// symbolSize: 2,
// hoverAnimation: true,
// smooth: true,
// showSymbol: false,
// data: _this.clickcountList,
// itemStyle: {
// borderWidth: 2,
// color: '#EE4454',
// shadowBlur: 10,
// shadowColor: 'rgba(255,250,0,1)'
// },
// lineStyle: {
// color: "#FFAA85",
// width: 5,
// shadowBlur: 10,
// shadowColor: "#EE4454"
// },
// areaStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(239,71,86,1)" },
// { offset: 1, color: "rgba(239,71,86,0)" }
// ])
// }
// },
// }
] ]
} }
myChart.setOption(option); myChart.setOption(option);
......
src/components/viitto/lineChart2.vue
View file @ 2c383fd7
...@@ -20,12 +20,12 @@ ...@@ -20,12 +20,12 @@
.PINGFANG{ .PINGFANG{
font-family: "PINGFANG REGULAR"; font-family: "PINGFANG REGULAR";
} }
.myecharts{ .myechartsS{
height: 100%; height: 1100px !important;
} }
</style> </style>
<template> <template>
<div class="myecharts" ref="myecharts" > <div class="myecharts myechartsS" ref="myecharts" >
</div> </div>
</template> </template>
...@@ -39,6 +39,7 @@ export default { ...@@ -39,6 +39,7 @@ export default {
'unitpriceList', 'unitpriceList',
'day_total_guestprice', 'day_total_guestprice',
'dateList', 'dateList',
'inquireList',
'zoom' 'zoom'
], ],
data(){ data(){
...@@ -79,7 +80,7 @@ export default { ...@@ -79,7 +80,7 @@ export default {
realtime: true, realtime: true,
start: 90, start: 90,
end: 100, end: 100,
xAxisIndex: [0, 1, 2, 3], xAxisIndex: [0, 1, 2, 3, 4],
textStyle: { textStyle: {
color: "#ffffff" color: "#ffffff"
}, },
...@@ -94,7 +95,7 @@ export default { ...@@ -94,7 +95,7 @@ export default {
realtime: true, realtime: true,
start: 90, start: 90,
end: 100, end: 100,
xAxisIndex: [0, 1, 2, 3], xAxisIndex: [0, 1, 2, 3, 4],
textStyle: { textStyle: {
color: "#ffffff" color: "#ffffff"
}, },
...@@ -113,23 +114,28 @@ export default { ...@@ -113,23 +114,28 @@ export default {
grid: [{ grid: [{
left: 80, left: 80,
right: 10, right: 10,
top: '5%', top: '40px',
height: '16%' height: '150px'
}, { }, {
left: 80, left: 80,
right: 10, right: 10,
top: '28%', top: '250px',
height: '16%' height: '150px'
}, { }, {
left: 80, left: 80,
right: 10, right: 10,
top: '51%', top: '460px',
height: '16%' height: '150px'
}, { }, {
left: 80, left: 80,
right: 10, right: 10,
top: '74%', top: '670px',
height: '16%' height: '150px'
}, {
left: 80,
right: 10,
top: '880px',
height: '150px'
} }
], ],
xAxis : [ xAxis : [
...@@ -163,6 +169,14 @@ export default { ...@@ -163,6 +169,14 @@ export default {
boundaryGap : false, boundaryGap : false,
data: _this.dateList, data: _this.dateList,
position: 'bottom', position: 'bottom',
"show": false,
},
{
gridIndex: 4,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": true, "show": true,
axisLabel: { axisLabel: {
color: '#fff', color: '#fff',
...@@ -212,7 +226,7 @@ export default { ...@@ -212,7 +226,7 @@ export default {
}, },
{ {
gridIndex: 2, gridIndex: 2,
name : '收客人头数 '+ _this.day_total_guestprice.OrderCount, name : '收客人头数 '+ _this.day_total_guestprice.GuestNum,
type : 'value', type : 'value',
inverse: false, inverse: false,
splitLine: { splitLine: {
...@@ -249,6 +263,26 @@ export default { ...@@ -249,6 +263,26 @@ export default {
axisLabel: { axisLabel: {
color: '#EE4454', color: '#EE4454',
} }
},
{
gridIndex: 4,
name : '询价统计 '+ _this.day_total_guestprice.InquireCount,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [10, 0, 0, 110],
fontSize: 18
},
axisLabel: {
color: 'rgb(106, 176, 76)',
}
} }
], ],
series : [ series : [
...@@ -377,6 +411,37 @@ export default { ...@@ -377,6 +411,37 @@ export default {
]) ])
} }
}, },
},
{
name:'询价统计',
type:'line',
xAxisIndex: 4,
yAxisIndex: 4,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.inquireList,
itemStyle: {
borderWidth: 2,
color: "rgb(106, 176, 76)",
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "rgb(106, 176, 76)",
width: 1,
shadowBlur: 2,
shadowColor: "rgb(106, 176, 76)",
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(106, 176, 76,1)" },
{ offset: .8, color: "rgba(106, 176, 76,0)" }
])
}
},
} }
] ]
} }
......
src/components/viitto/saleDataLook.vue 0 → 100644
View file @ 2c383fd7
<style>
.dataLook{
height: 100%;
width: 100%;
background-color: #1D243D;
}
.dataLook .nav{
padding: 25px 45px;
background-color: #252D48;
}
.dataLook .nav .name {
font-size: 30px;
font-weight: 700;
color: #fff;
text-align: right;
font-family: 'pingfangR';
}
.pingfangR{
font-family: 'pingfangR';
}
.type-box>div{
background:rgba(19,25,44,1);
box-shadow:0px 0px 5px 0px rgba(2,3,6, .55);
border-radius:6px 6px 6px 6px;
float: left;
}
.danris{
padding: 6px 25px;
font-size:20px;
font-family: 'pingfangR';
font-weight:bold;
color:rgba(254,254,255,1);
text-shadow:1px 2px 2px rgba(0,95,106,1);
width: 50%;
float: left;
cursor: pointer;
}
.danris.active{
background:linear-gradient(90deg,rgba(147,69,248,1),rgba(63,210,243,1));
box-shadow:1px 2px 4px 0px rgba(23,29,48,1);
border-radius:6px;
}
.xilie{
display: flex;
align-items: center;
}
.xilie>div:nth-child(1){
width: 30%;
background:rgba(106,116,146, .35);
border-radius:20px 0px 0px 20px;
padding: 10px 20px 9px;
box-sizing: border-box;
color:rgba(254,254,255,1);
text-align: center;
}
.xilie>div:nth-child(2){
width: 70%;
background:rgba(22,28,49,.55);
border-radius:0 20px 20px 0;
overflow: hidden;
}
.xilie>div:nth-child(2) .el-select,.xilie>div:nth-child(2) .el-date-editor.el-input {
width: 100%;
}
.xilie>div:nth-child(2) .el-input--suffix .el-input__inner{
border-radius: 0;
}
.xilie>div:nth-child(2) input{
background:rgba(22,28,49,.5);
border: none !important;
}
.dataLook .content{
height: 88%;
/* height: calc(100vh - 122px); */
padding: 30px 40px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
}
.dataLook .content .el-row,.dataLook .content .el-row .el-col{
height: 100%;
}
.right-data{
background:linear-gradient(0deg,rgba(29,34,63,1),rgba(46,56,85,1));
border-radius:20px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.right-data::-webkit-scrollbar ,.content::-webkit-scrollbar,.el-cascader-menu::-webkit-scrollbar{
/*滚动条整体样式*/
width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 47px;
}
.right-data::-webkit-scrollbar-thumb ,.content::-webkit-scrollbar-thumb,.el-cascader-menu::-webkit-scrollbar-thumb{
/*滚动条里面小方块*/
border-radius: 4px;
background: rgba(106,116,146, .35);
}
.right-data::-webkit-scrollbar-track ,.content::-webkit-scrollbar-track,.el-cascader-menu::-webkit-scrollbar-track{
/*滚动条里面轨道*/
border-radius: 4px;
background: #252D48;
}
.tab span{
display: inline-block;
width:128px;
height:38px;
background:linear-gradient(135deg,rgba(90,96,124,1), rgba(46,52,81,1));
border-radius:0 19px 19px 0px;
text-align: center;
line-height: 38px;
color: #8089B4;
font-size: 20px;
}
.item-box{
display: flex;
justify-content: space-between;
padding: 20px;
}
.item-box .item>div:nth-child(1){
font-size:18px;
font-family:'pingfangR';
font-weight:400;
color:rgba(73,78,99,1);
}
.item-box .item>div:nth-child(2){
font-size: 36px;
font-family:'pingfangR';
font-weight:400;
color:rgba(255,255,255,1);
}
.item-box .item>div:nth-child(2) img{
position: relative;
top: -25px;
left: 0;
}
.red-color{
color:rgba(255,255,255,1);
background:linear-gradient(0deg,rgba(255,133,133,1) 0%, rgba(238,68,84,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.gree-color{
color:rgba(255,255,255,1);
background:linear-gradient(0deg,rgba(167,222,138,1) 0%, rgba(68,214,172,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.org-color{
color:rgba(255,255,255,1);
background:linear-gradient(180deg,rgba(244,121,22,1) 0%, rgba(245,175,25,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bl-color{
color:rgba(255,255,255,1);
background:linear-gradient(180deg,rgba(255,108,176,1) 0%, rgba(255,147,109,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.pink-color{
color:rgba(255,255,255,1);
background:linear-gradient(180deg,rgba(147,69,248,1) 0%, rgba(63,210,243,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.sub{
font-size: 20px;
}
.width-100{
width: 100%;
}
.open-btn{
position: absolute;
left: 0;
color: #3A4158;
top: 45%;
height: 60px;
line-height: 60px;
background: rgba(13,18,36, .5);
border-radius: 6px 0 0 6px;
width: 20px;
text-align: center;
cursor: pointer;
}
.el-cascader-menus{
border: none !important;
}
.el-cascader-menu{
background-color: #1d243d !important;
}
.el-cascader-menu__item,.el-cascader-menu__item.is-active{
color: white !important;
}
.el-cascader-menu__item:focus:not(:active), .el-cascader-menu__item:hover {
background-color: #252D48 !important;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
border-bottom-color: #1d243d;
}
.el-cascader-menu{
border: 0 !important;
}
.my-drawer{
padding: 100px 0 60px 0;
background-color: transparent !important;
}
.my-drawer .el-drawer__header{
display: none;
}
.my-drawer .el-drawer__open .el-drawer.rtl{
background-color: transparent;
}
.my-drawer .el-drawer__body{
height: 100%;
}
.el-cascader__dropdown{
border: none !important
}
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
background-color: #252D48 !important;
}
.company-class{
background-color: rgb(29, 36, 61) !important;
border-color: rgb(29, 36, 61) !important;
}
.company-class .el-select-dropdown__item.hover,.company-class .el-select-dropdown__item:hover {
background-color: #252D48 !important;
}
</style>
<template>
<div class="dataLook" v-loading="!loding">
<div class="nav">
<el-row :gutter="70">
<el-col :span="18">
<el-row :gutter="70">
<el-col :span="8">
<div class="xilie">
<div>公司</div>
<div>
<el-select v-model="outbranchid" placeholder="请选择" @change="init" popper-class="company-class">
<el-option label="不限" :value="-1"></el-option>
<el-option
v-for="item in companyList"
:key="item.Id"
:label="item.BName"
:value="item.Id">
</el-option>
</el-select>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="xilie">
<div>销售</div>
<div>
<el-cascader class="width-100" :options="lineList" :props="{ checkStrictly: true }" v-model="selectedRegion" change-on-select/>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="name">
印象之旅线路看板
</el-col>
</el-row>
</div>
<div class="content" >
<el-row :gutter="40" style="margin-bottom: 20px;">
<el-col :span="22">
<lineChart v-if="chartShow" :zoom="zoom" :preferpriceList="preferpriceList" :guestnumList="guestnumList" :clickcountList="clickcountList" :ordercountList="ordercountList" :unitpriceList="unitpriceList" :day_total_guestprice="day_total_guestprice" :dateList="dateList"/>
</el-col>
<el-col :span="2" style="position: relative;">
<div class="open-btn" @click="drawer = true">
<i class="iconfont icon-zhankai1" style="color: white" v-if="!rightShow"></i>
<i class="iconfont icon-zhankai-" v-else></i>
</div>
<div class="right-data">
<!-- 报名人数 -->
<div>
<div class="tab pingfangR"><span>报名人数</span></div>
</div>
<div class="item-box" v-if="day_avg_num && day_avg_num.length > 0">
<div class="item">
<div>5日平均</div>
<div>
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<!-- <div class="item">
<div>20日平均</div>
<div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>60日平均</div>
<div>
{{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div> -->
</div>
<!-- 线路占比 -->
<div>
<div class="tab pingfangR"><span>线路占比</span></div>
</div>
<div class="item-box" v-if="day_line_statics && day_line_statics.length > 0">
<div class="item">
<div>30日平均</div>
<div>
{{day_line_statics[0].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<!-- <div class="item">
<div>60日平均</div>
<div>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>90日平均</div>
<div>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div> -->
</div>
<!-- 报名单 -->
<div>
<div class="tab pingfangR"><span>报名单</span></div>
</div>
<div class="item-box" v-if="day_order_statics && day_order_statics.length > 0">
<div class="item">
<div>当日</div>
<div class="bl-color">
{{(day_order_statics[0].OrderCount + '').split('.')[0]}}
</div>
</div>
<!-- <div class="item">
<div>5日平均</div>
<div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}}
</div>
</div> -->
</div>
<!-- 产品点击 -->
<div>
<div class="tab pingfangR"><span>产品点击</span></div>
</div>
<div class="item-box" v-if="day_click_statics && day_click_statics.length > 0">
<div class="item">
<div>当日</div>
<div class="pink-color">
{{(day_click_statics[0].ClickCount + '').split('.')[0]}}
</div>
</div>
<!-- <div class="item">
<div>5日平均</div>
<div>
{{(day_click_statics[1].ClickCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}}
</div>
</div> -->
</div>
<!-- 历史卖价 -->
<div>
<div class="tab pingfangR"><span>历史卖价</span></div>
</div>
<div class="item-box" v-if="day_history_price && day_history_price.length > 0">
<div class="item">
<div>最高</div>
<div class="red-color">
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
<!-- <div class="item">
<div>最低</div>
<div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>平均</div>
<div class="gree-color">
{{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span>
</div>
</div> -->
</div>
<!-- 成交量 -->
<div>
<div class="tab pingfangR"><span>成交量</span></div>
</div>
<div class="item-box" v-if="day_history_preferprice && day_history_preferprice.length > 0">
<div class="item">
<div>最高</div>
<div class="org-color">
{{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span>
</div>
</div>
<!-- <div class="item">
<div>最低</div>
<div>
{{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>平均</div>
<div>
{{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span>
</div>
</div> -->
</div>
</div>
<el-drawer
custom-class="my-drawer"
:show-close="false"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<div class="right-data">
<!-- 报名人数 -->
<div>
<div class="tab pingfangR"><span>报名人数</span></div>
</div>
<div class="item-box" v-if="day_avg_num && day_avg_num.length > 0">
<div class="item">
<div>5日平均</div>
<div>
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<div class="item">
<div>20日平均</div>
<div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>60日平均</div>
<div>
{{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
</div>
<!-- 线路占比 -->
<div>
<div class="tab pingfangR"><span>线路占比</span></div>
</div>
<div class="item-box" v-if="day_line_statics && day_line_statics.length > 0">
<div class="item">
<div>30日平均</div>
<div>
{{Math.round(day_line_statics[0].OrderPercent*10000) / 100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<div class="item">
<div>60日平均</div>
<div>
{{Math.round(day_line_statics[1].OrderPercent*10000) / 100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
<div class="item">
<div>90日平均</div>
<div>
{{Math.round(day_line_statics[2].OrderPercent*10000) / 100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
</div>
<!-- 报名单 -->
<div>
<div class="tab pingfangR"><span>报名单</span></div>
</div>
<div class="item-box" v-if="day_order_statics && day_order_statics.length > 0">
<div class="item">
<div>当日</div>
<div class="bl-color">
{{(day_order_statics[0].OrderCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<div>5日平均</div>
<div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}}
</div>
</div>
</div>
<!-- 产品点击 -->
<div>
<div class="tab pingfangR"><span>产品点击</span></div>
</div>
<div class="item-box" v-if="day_click_statics && day_click_statics.length > 0">
<div class="item">
<div>当日</div>
<div class="pink-color">
{{(day_click_statics[0].ClickCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<div>5日平均</div>
<div>
{{(day_click_statics[1].ClickCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<div>10日平均</div>
<div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}}
</div>
</div>
</div>
<!-- 历史卖价 -->
<div>
<div class="tab pingfangR"><span>历史卖价</span></div>
</div>
<div class="item-box" v-if="day_history_price && day_history_price.length > 0">
<div class="item">
<div>最高</div>
<div class="red-color">
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>最低</div>
<div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>平均</div>
<div class="gree-color">
{{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
</div>
<!-- 成交量 -->
<div>
<div class="tab pingfangR"><span>成交量</span></div>
</div>
<div class="item-box" v-if="day_history_preferprice && day_history_preferprice.length > 0">
<div class="item">
<div>最高</div>
<div class="org-color">
{{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>最低</div>
<div>
{{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span>
</div>
</div>
<div class="item">
<div>平均</div>
<div>
{{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span>
</div>
</div>
</div>
</div>
</el-drawer>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import lineChart from "./saleLineChart";
export default {
components: {
lineChart
},
data(){
return {
drawer: false,
direction: 'rtl',
rightShow: false,
selectedRegion: [],
navActive: 0,
options: [],
value: '',
value1: '',
StartTime: '',
day_avg_num: [],
day_history_price: [{}],
clickcountList: [],
guestnumList: [],
preferpriceList: [],
ordercountList: [],
unitpriceList: [],
dateList: [],
chartShow: false,
lineList: [],
prolineId: 0,
slineId: 0,
LineTeamList: [],
day_order_statics: [],
day_click_statics: [],
day_history_preferprice: [],
zoom: 1,
day_line_statics: [],
day_total_guestprice: {},
loding: false,
outbranchid: -1,
companyMsg:{
RB_Group_Id:'0',
Status:0,
},
companyList: [],
}
},
watch: {
selectedRegion(nv) {
this.loadRegionChild(nv)
},
},created(){
this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
data.map(x=>{
x.label = x.LineName,
x.value = x.LineID,
x.children = []
})
this.lineList = data
}
});
},mounted() {
let Height = window.innerHeight
this.zoom = Math.round((Height/1080) * 100) / 100
var day2 = new Date();
day2.setTime(day2.getTime());
var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
this.StartTime = s2;
this.init()
this.getCompany()
// setTimeout(() => {
// this.init()
// }, 1000);
},methods:{
getCompany(){ //公司
this.apipost('admin_get_BranchGetList', {}, res => {
let data = res.data.data;
this.companyList = data;
})
},
handleClose(done) {
done();
},
loadRegionChild(regionIdArr) {
let lineId = 0,
slineId = 0;
if (regionIdArr.length == 1) {
lineId = regionIdArr[0]
} else {
lineId = regionIdArr[0]
slineId = regionIdArr[1]
}
this.prolineId = lineId
this.slineId = slineId
this.init()
this.apipost("team_post_GetList", {
lineID: lineId,
isTOOP: 1
}, res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
data.map(x=>{
x.value = x.LtID
x.label = x.LtName
})
this.lineList.map(x=>{
if (x.value == lineId) {
x.children = data
}
})
}
});
} ,
init(){
this.loding = false;
this.chartShow = false;
let url='http://47.96.23.199:5001/api/order/get_single_data'
let url2 = "http://47.96.23.199:5001/api/order/get_single_data_v2"
let msg={
startdate: this.StartTime,
lineid: this.prolineId,
ltid: this.slineId,
outbranchid: this.outbranchid
}
this.getOutherData(url, msg)
},
getOutherData: function (url, msg){
this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){
let data = r.data.data;
this.day_avg_num = data.day_avg_num
this.day_history_price = data.day_history_price
this.day_order_statics = data.day_order_statics
this.day_click_statics = data.day_click_statics
this.day_history_preferprice = data.day_history_preferprice
this.day_line_statics = data.day_line_statics
// 点击
this.clickcountList = data.day_guestprice.clickcountList
// 人数
this.guestnumList = data.day_guestprice.guestnumList
// 钱
this.unitpriceList = data.day_guestprice.unitpriceList
// 成交
this.preferpriceList = data.day_guestprice.preferpriceList
// 报名单
this.ordercountList = data.day_guestprice.ordercountList
// 时间
this.dateList = data.day_guestprice.dateList
// 合计
this.day_total_guestprice = data.day_total_guestprice[0]
this.chartShow = true;
this.$forceUpdate()
}else{
this.Error(r.data.message);
}
this.loding = true;
});
},
setNavActive: function(n){
this.navActive = n
}
}
}
</script>
\ No newline at end of file
src/components/viitto/saleLineChart.vue 0 → 100644
View file @ 2c383fd7
<style>
@font-face {
font-family: "PINGFANG EXTRALIGHT";
src:url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "PINGFANG REGULAR";
src:url("../../assets/fonts/PINGFANG REGULAR.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "MADA-MEDIUM";
src:url("../../assets/fonts/MADA-MEDIUM.TTF") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
.PINGFANG{
font-family: "PINGFANG REGULAR";
}
.myecharts-sale{
height: 100%;
}
.myecharts-sale{
height: 1480px;
}
</style>
<template>
<div class="myecharts-sale" ref="myecharts" >
</div>
</template>
<script>
export default {
props:[
'preferpriceList',
'guestnumList',
'clickcountList',
'ordercountList',
'unitpriceList',
'day_total_guestprice',
'dateList',
'zoom'
],
data(){
return {
}
},created(){
},mounted() {
this.init()
},methods:{
init() {
let myChart = this.$echarts.init(this.$refs.myecharts);
var dataAxis = [];
let _this = this;
let option = {
textStyle: {
fontFamily: 'PINGFANG REGULAR',
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true,
type: 'cross',
label: {
backgroundColor: '#E62382',
},
lineStyle: {
width: 4,
color: 'rgba(255,255,255,.1)'
}
},
backgroundColor: '#E62382',
confine: true,
},
dataZoom: [
{
show: true,
realtime: true,
start: 90,
end: 100,
xAxisIndex: [0, 1, 2, 3, 4, 5],
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
},
{
type: 'inside',
realtime: true,
start: 90,
end: 100,
xAxisIndex: [0, 1, 2, 3, 4, 5],
textStyle: {
color: "#ffffff"
},
dataBackground: {
lineStyle: {
color: '#ffffff'
}
}
}
],
axisPointer: {
snap: true,
link: {xAxisIndex: 'all'}
},
grid: [{
left: 80,
right: 10,
top: '40px',
height: '180px'
}, {
left: 80,
right: 10,
top: '280px',
height: '180px'
}, {
left: 80,
right: 10,
top: '520px',
height: '180px'
}, {
left: 80,
right: 10,
top: '760px',
height: '180px'
}, {
left: 80,
right: 10,
top: '1000px',
height: '180px'
}, {
left: 80,
right: 10,
top: '1240px',
height: '180px'
}
],
xAxis : [
{
gridIndex: 0,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false
},
{
gridIndex: 1,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false,
},
{
gridIndex: 2,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false,
},
{
gridIndex: 3,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false,
},
{
gridIndex: 4,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": false,
},
{
gridIndex: 5,
type : 'category',
boundaryGap : false,
data: _this.dateList,
position: 'bottom',
"show": true,
axisLabel: {
color: '#fff',
},
}
],
yAxis : [
{
gridIndex: 0,
name : '名单开发 ￥'+ _this.day_total_guestprice.PreferPrice +'元',
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 160],
fontSize: 18
},
axisLabel: {
color: '#F5AF19',
}
},
{
gridIndex: 1,
name : '约访 '+ _this.day_total_guestprice.OrderCount,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 80],
fontSize: 18
},
axisLabel: {
color: '#3FD2F3',
}
},
{
gridIndex: 2,
name : '探寻需求 '+ _this.day_total_guestprice.GuestNum,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 80],
fontSize: 18
},
axisLabel: {
color: '#32ff7e',
}
},
{
gridIndex: 3,
name : '解决需求 '+ _this.day_total_guestprice.GuestNum,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 80],
fontSize: 18
},
axisLabel: {
color: '#32ff7e',
}
},
{
gridIndex: 4,
name : '说明成交 '+ _this.day_total_guestprice.GuestNum,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 0, 0, 80],
fontSize: 18
},
axisLabel: {
color: '#32ff7e',
}
},
{
gridIndex: 5,
name : '售后服务 '+ _this.day_total_guestprice.ClickCount,
type : 'value',
inverse: false,
splitLine: {
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [10, 0, 0, 110],
fontSize: 18
},
axisLabel: {
color: '#EE4454',
}
}
],
series : [
{
name:'明单开发',
type:'line',
xAxisIndex: 0,
yAxisIndex: 0,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.preferpriceList,
itemStyle: {
borderWidth: 2,
color: '#F5AF19',
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#F5AF19",
shadowBlur: 5,
width: 3,
shadowColor: "#F5AF19"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(245,175,25,1)" },
{ offset: .8, color: "rgba(245,175,25,0)" }
])
}
},
}
,
{
name:'约访',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.ordercountList,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#9345F8",
shadowBlur: 5,
width: 3,
shadowColor: "#3FD2F3"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(147,69,248,1)" },
{ offset: .8, color: "rgba(147,69,248,0)" }
])
}
},
}
,
{
name:'探寻需求',
type:'line',
xAxisIndex: 2,
yAxisIndex: 2,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#32ff7e",
shadowBlur: 5,
width: 3,
shadowColor: "#3ae374"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(50, 255, 126,1)" },
{ offset: .8, color: "rgba(50, 255, 126,0)" }
])
}
},
},
{
name:'解决需求',
type:'line',
xAxisIndex: 3,
yAxisIndex: 3,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
itemStyle: {
borderWidth: 2,
color: 'rgb(103, 230, 220)',
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "rgb(103, 230, 220)",
shadowBlur: 5,
width: 3,
shadowColor: "#3ae374"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(103, 230, 220,1)" },
{ offset: .8, color: "rgba(103, 230, 220,0)" }
])
}
},
},
{
name:'说明成交',
type:'line',
xAxisIndex: 4,
yAxisIndex: 4,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.guestnumList,
itemStyle: {
borderWidth: 2,
color: '#3FD2F3',
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "rgb(255, 184, 184)",
shadowBlur: 5,
width: 3,
shadowColor: "rgb(255, 184, 184)"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(255, 184, 184,1)" },
{ offset: .8, color: "rgba(255, 184, 184,0)" }
])
}
},
},
{
name:'售后服务',
type:'line',
xAxisIndex: 5,
yAxisIndex: 5,
symbolSize: 2,
hoverAnimation: true,
smooth: true,
showSymbol: false,
data: _this.clickcountList,
itemStyle: {
borderWidth: 2,
color: '#EE4454',
shadowBlur: 5,
shadowColor: 'rgba(255,250,0,1)'
},
lineStyle: {
color: "#FFAA85",
width: 3,
shadowBlur: 5,
shadowColor: "#EE4454"
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(239,71,86,1)" },
{ offset: .8, color: "rgba(239,71,86,0)" }
])
}
},
}
]
}
myChart.setOption(option);
},
}
}
</script>
\ No newline at end of file
src/router.js
View file @ 2c383fd7
...@@ -5,6 +5,7 @@ import index from './views/index' ...@@ -5,6 +5,7 @@ import index from './views/index'
import viittoData from './components/viitto/viittoData' import viittoData from './components/viitto/viittoData'
import viittoData2 from './components/viitto/viittoData2' import viittoData2 from './components/viitto/viittoData2'
import dataLook from './components/viitto/dataLook' import dataLook from './components/viitto/dataLook'
import saleDataLook from './components/viitto/saleDataLook'
import PerCompetition from './components/viitto/PerCompetition' import PerCompetition from './components/viitto/PerCompetition'
Vue.use(Router) Vue.use(Router)
...@@ -43,6 +44,11 @@ export default new Router({ ...@@ -43,6 +44,11 @@ export default new Router({
name: 'dataLook', name: 'dataLook',
component: dataLook, component: dataLook,
}, },
{
path: '/saleDataLook',
name: 'saleDataLook',
component: saleDataLook,
},
{ {
path: '/PerCompetition', path: '/PerCompetition',
name: 'PerCompetition', name: 'PerCompetition',
......
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