Skip to content

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

1

parent 33947b75
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 111 deletions
src/components/viitto/dataLook.vue
View file @ dc309a0f
...@@ -224,6 +224,13 @@ ...@@ -224,6 +224,13 @@
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{ .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
background-color: #252D48 !important; 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> </style>
<template> <template>
<div class="dataLook" v-loading="!loding"> <div class="dataLook" v-loading="!loding">
...@@ -231,6 +238,22 @@ ...@@ -231,6 +238,22 @@
<el-row :gutter="70"> <el-row :gutter="70">
<el-col :span="18"> <el-col :span="18">
<el-row :gutter="70"> <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"> <el-col :span="8">
<div class="xilie"> <div class="xilie">
<div>系列</div> <div>系列</div>
...@@ -253,7 +276,7 @@ ...@@ -253,7 +276,7 @@
</el-col> </el-col>
<el-col :span="2" style="position: relative;"> <el-col :span="2" style="position: relative;">
<div class="open-btn" @click="drawer = true"> <div class="open-btn" @click="drawer = true">
<i class="iconfont icon-zhankai1" v-if="!rightShow"></i> <i class="iconfont icon-zhankai1" style="color: white" v-if="!rightShow"></i>
<i class="iconfont icon-zhankai-" v-else></i> <i class="iconfont icon-zhankai-" v-else></i>
</div> </div>
<div class="right-data"> <div class="right-data">
...@@ -268,7 +291,7 @@ ...@@ -268,7 +291,7 @@
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt=""> {{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>20日平均</div> <div>20日平均</div>
<div> <div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
...@@ -279,7 +302,7 @@ ...@@ -279,7 +302,7 @@
<div> <div>
{{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt=""> {{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> </div> -->
</div> </div>
<!-- 线路占比 --> <!-- 线路占比 -->
<div> <div>
...@@ -292,7 +315,7 @@ ...@@ -292,7 +315,7 @@
{{day_line_statics[0].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt=""> {{day_line_statics[0].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt="">
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>60日平均</div> <div>60日平均</div>
<div> <div>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
...@@ -303,7 +326,7 @@ ...@@ -303,7 +326,7 @@
<div> <div>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt=""> {{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div> </div>
</div> </div> -->
</div> </div>
<!-- 报名单 --> <!-- 报名单 -->
...@@ -317,7 +340,7 @@ ...@@ -317,7 +340,7 @@
{{(day_order_statics[0].OrderCount + '').split('.')[0]}} {{(day_order_statics[0].OrderCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>5日平均</div> <div>5日平均</div>
<div> <div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}} {{(day_order_statics[1].OrderCount + '').split('.')[0]}}
...@@ -328,7 +351,7 @@ ...@@ -328,7 +351,7 @@
<div> <div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}} {{(day_order_statics[2].OrderCount + '').split('.')[0]}}
</div> </div>
</div> </div> -->
</div> </div>
<!-- 产品点击 --> <!-- 产品点击 -->
...@@ -342,7 +365,7 @@ ...@@ -342,7 +365,7 @@
{{(day_click_statics[0].ClickCount + '').split('.')[0]}} {{(day_click_statics[0].ClickCount + '').split('.')[0]}}
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>5日平均</div> <div>5日平均</div>
<div> <div>
{{(day_click_statics[1].ClickCount + '').split('.')[0]}} {{(day_click_statics[1].ClickCount + '').split('.')[0]}}
...@@ -353,7 +376,7 @@ ...@@ -353,7 +376,7 @@
<div> <div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}} {{(day_click_statics[2].ClickCount + '').split('.')[0]}}
</div> </div>
</div> </div> -->
</div> </div>
<!-- 历史卖价 --> <!-- 历史卖价 -->
<div> <div>
...@@ -366,7 +389,7 @@ ...@@ -366,7 +389,7 @@
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span> {{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span>
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>最低</div> <div>最低</div>
<div> <div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span> {{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
...@@ -377,7 +400,7 @@ ...@@ -377,7 +400,7 @@
<div class="gree-color"> <div class="gree-color">
{{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span> {{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span>
</div> </div>
</div> </div> -->
</div> </div>
<!-- 成交量 --> <!-- 成交量 -->
<div> <div>
...@@ -390,7 +413,7 @@ ...@@ -390,7 +413,7 @@
{{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span> {{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span>
</div> </div>
</div> </div>
<div class="item"> <!-- <div class="item">
<div>最低</div> <div>最低</div>
<div> <div>
{{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span> {{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span>
...@@ -401,7 +424,7 @@ ...@@ -401,7 +424,7 @@
<div> <div>
{{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span> {{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
...@@ -411,7 +434,7 @@ ...@@ -411,7 +434,7 @@
:visible.sync="drawer" :visible.sync="drawer"
:direction="direction" :direction="direction"
:before-close="handleClose"> :before-close="handleClose">
<div class="right-data"> <div class="right-data">
<!-- 报名人数 --> <!-- 报名人数 -->
<div> <div>
<div class="tab pingfangR"><span>报名人数</span></div> <div class="tab pingfangR"><span>报名人数</span></div>
...@@ -579,6 +602,22 @@ export default { ...@@ -579,6 +602,22 @@ export default {
}, },
data(){ data(){
return { return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
drawer: false, drawer: false,
direction: 'rtl', direction: 'rtl',
rightShow: false, rightShow: false,
...@@ -610,6 +649,12 @@ export default { ...@@ -610,6 +649,12 @@ export default {
day_total_guestprice: {}, day_total_guestprice: {},
loding: false, loding: false,
lineChartKData: [], lineChartKData: [],
outbranchid: -1,
companyMsg:{
RB_Group_Id:'0',
Status:0,
},
companyList: [],
} }
}, },
watch: { watch: {
...@@ -636,10 +681,17 @@ export default { ...@@ -636,10 +681,17 @@ export default {
var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate(); var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
this.StartTime = s2; this.StartTime = s2;
this.init() this.init()
this.getCompany()
// setTimeout(() => { // setTimeout(() => {
// this.init() // this.init()
// }, 1000); // }, 1000);
},methods:{ },methods:{
getCompany(){ //公司
this.apipost('admin_get_BranchGetList', {}, res => {
let data = res.data.data;
this.companyList = data;
})
},
handleClose(done) { handleClose(done) {
done(); done();
}, },
...@@ -649,6 +701,7 @@ export default { ...@@ -649,6 +701,7 @@ export default {
if (regionIdArr.length == 1) { if (regionIdArr.length == 1) {
lineId = regionIdArr[0] lineId = regionIdArr[0]
} else { } else {
lineId = regionIdArr[0]
slineId = regionIdArr[1] slineId = regionIdArr[1]
} }
this.prolineId = lineId this.prolineId = lineId
...@@ -681,7 +734,8 @@ export default { ...@@ -681,7 +734,8 @@ export default {
let msg={ let msg={
startdate: this.StartTime, startdate: this.StartTime,
lineid: this.prolineId, lineid: this.prolineId,
ltid: this.slineId ltid: this.slineId,
outbranchid: this.outbranchid
} }
this.getOutherData(url, msg) this.getOutherData(url, msg)
this.getKdata(url2, msg) this.getKdata(url2, msg)
...@@ -691,7 +745,6 @@ export default { ...@@ -691,7 +745,6 @@ export default {
this.apiRequest(url,{msg:msg},r=>{ this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){ if(r.data.resultCode==1){
let data = r.data.data; let data = r.data.data;
console.log(data)
this.day_avg_num = data.day_avg_num this.day_avg_num = data.day_avg_num
this.day_history_price = data.day_history_price this.day_history_price = data.day_history_price
this.day_order_statics = data.day_order_statics this.day_order_statics = data.day_order_statics
...@@ -724,7 +777,6 @@ export default { ...@@ -724,7 +777,6 @@ export default {
this.apiRequest(url,{msg:msg},r=>{ this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){ if(r.data.resultCode==1){
let data = r.data.data.k_unitprice; let data = r.data.data.k_unitprice;
console.log(data)
this.lineChartKData = data; this.lineChartKData = data;
this.chartShow2 = true; this.chartShow2 = true;
this.$forceUpdate() this.$forceUpdate()
......
src/components/viitto/lineChart2.vue
View file @ dc309a0f
...@@ -281,8 +281,7 @@ export default { ...@@ -281,8 +281,7 @@ export default {
]) ])
} }
}, },
} },
,
{ {
name:'产品点击', name:'产品点击',
type:'line', type:'line',
......
src/components/viitto/lineChartK.vue
View file @ dc309a0f
...@@ -47,14 +47,15 @@ export default { ...@@ -47,14 +47,15 @@ export default {
return { return {
myChart: null, myChart: null,
dataList: [], dataList: [],
dates: [] dates: [],
dataList2: []
} }
},watch:{ },watch:{
},created(){ },created(){
},mounted() { },mounted() {
let data = this.lineChartKData.map(function (item) { let data = this.lineChartKData.map(function (item) {
return [item.StartPrice, item.MaxPrice, item.EndPrice, item.MinPrice, item.ClickCount, item.FiveAvg, item.TenAvg]; return [+item.StartPrice, +item.EndPrice, +item.MinPrice, +item.MaxPrice, +item.ClickCount, +item.FiveAvg, +item.TenAvg, +item.ThirtyAvg, +item.NinetyAvg, +item.ThirtyMonthAvg];
}); });
var dates = this.lineChartKData.map(function (item) { var dates = this.lineChartKData.map(function (item) {
return item.CreateDate; return item.CreateDate;
...@@ -75,6 +76,7 @@ export default { ...@@ -75,6 +76,7 @@ export default {
dataList.push(obj) dataList.push(obj)
} }
this.dataList = dataList this.dataList = dataList
this.dataList2 = dataList
this.dates = dates this.dates = dates
this.myChart = this.$echarts.init(this.$refs.myecharts); this.myChart = this.$echarts.init(this.$refs.myecharts);
this.init() this.init()
...@@ -88,8 +90,9 @@ export default { ...@@ -88,8 +90,9 @@ export default {
let _this = this; let _this = this;
let option = { let option = {
backgroundColor: '#21202D', backgroundColor: '#21202D',
color:['#2ecc71','#3498db','#9b59b6','#f1c40f','#e74c3c','#fffa65'],
legend: { legend: {
data: ['成交单价', '产品点击', '5日平均', '10日平均'], data: ['开始值', '最高值', '结束值', '最低值', '5日平均', '10日平均', '30日平均', '90日平均', '180日平均','产品点击', ],
inactiveColor: '#777', inactiveColor: '#777',
textStyle: { textStyle: {
color: '#fff' color: '#fff'
...@@ -99,43 +102,6 @@ export default { ...@@ -99,43 +102,6 @@ export default {
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: function (params) {
var obj = {}
if (params[0].value[0] !== undefined) {// 防止放上去提示undefined
obj = {
sName: params[0].seriesName,
name: params[0].name,
start: params[0].value[1],
close: params[0].value[2],
low: params[0].value[3],
height: params[0].value[4],
click: params[0].value[5],
FiveAvg: params[0].value[6],
TenAvg: params[0].value[7],
}
} else {
obj = {
sName: params[1].seriesName,
name: params[1].name,
start: params[1].value[1],
close: params[1].value[2],
low: params[1].value[3],
height: params[1].value[4],
click: params[1].value[5],
FiveAvg: params[0].value[6],
TenAvg: params[0].value[7],
}
}
var res = obj.sName + ' ' + obj.name
res += '<br/> 开始值: ' + obj.start
res += '<br/> 最高值: ' + obj.height
res += '<br/> 结束值: ' + obj.close
res += '<br/> 最低值: ' + obj.low
res += '<br/> 点击: ' + obj.click
res += '<br/> 5日平均: ' + obj.FiveAvg
res += '<br/> 10日平均: ' + obj.TenAvg
return res
},
axisPointer: { axisPointer: {
animation: false, animation: false,
type: 'cross', type: 'cross',
...@@ -144,22 +110,86 @@ export default { ...@@ -144,22 +110,86 @@ export default {
width: 2, width: 2,
opacity: 1 opacity: 1
} }
} },
// formatter: function (params){
// console.log(params)
// var obj = {}
// if (params[0].value[0] !== undefined) {// 防止放上去提示undefined
// obj = {
// start: params[0].value[0],
// close: params[0].value[1],
// low: params[0].value[2],
// height: params[0].value[3],
// FiveAvg: params[0].value[5],
// TenAvg: params[0].value[6],
// ThirtyAvg: params[0].value[7],
// NinetyAvg: params[0].value[8],
// ThirtyMonthAvg: params[0].value[9],
// click: params[0].value[4],
// }
// } else {
// obj = {
// start: params[1].value[0],
// close: params[1].value[1],
// low: params[1].value[2],
// height: params[1].value[3],
// FiveAvg: params[1].value[5],
// TenAvg: params[1].value[6],
// ThirtyAvg: params[1].value[7],
// NinetyAvg: params[1].value[8],
// ThirtyMonthAvg: params[1].value[9],
// click: params[1].value[4],
// }
// }
// var res = '成交单价'
// res += '<br/> 开始值: ' + obj.start
// res += '<br/> 最高值: ' + obj.height
// res += '<br/> 结束值: ' + obj.close
// res += '<br/> 最低值: ' + obj.low
// res += '<br/> 5日平均: ' + obj.FiveAvg
// res += '<br/> 10日平均: ' + obj.TenAvg
// res += '<br/> 30日平均: ' + obj.ThirtyAvg
// res += '<br/> 90日平均: ' + obj.NinetyAvg
// res += '<br/> 180日平均: ' + obj.ThirtyMonthAvg
// res += '<br/> 产品点击: ' + obj.click
// return res
// },
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: _this.dates, data: _this.dates,
axisLine: { lineStyle: { color: '#8392A5' } } axisLine: { lineStyle: { color: '#8392A5' } }
}, },
yAxis: { yAxis: [{
scale: true, scale: true,
axisLine: { lineStyle: { color: '#8392A5' } }, axisLine: { lineStyle: { color: '#8392A5' } },
splitLine: { show: false } splitLine: { show: false }
}, },
{
name : '产品点击',
type : 'value',
position: 'right',
splitLine: {
show: false,
lineStyle: {
color: '#30374E',
type: 'dashed'
}
},
nameTextStyle: {
color: '#ffffff',
padding: [0, 60, 0, 0],
fontSize: 18
},
axisLabel: {
color: '#12BBFF',
},
}
],
grid: { grid: {
bottom: 80, bottom: 80,
left: 70, left: 70,
right: 20, right: 70,
}, },
dataZoom: [{ dataZoom: [{
textStyle: { textStyle: {
...@@ -194,79 +224,86 @@ export default { ...@@ -194,79 +224,86 @@ export default {
type: 'candlestick', type: 'candlestick',
name: '成交单价', name: '成交单价',
data: _this.dataList, data: _this.dataList,
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
}, },
{ {
name: '产品点击', name: '5日平均',
type: 'line', type: 'line',
data: calculateMA(4, _this.dataList), yAxisIndex: 0,
data: calculateMA(5, _this.dataList2),
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
z: 3,
lineStyle: { lineStyle: {
width: 3, width: 3,
color: '#F5AF19',
opacity: 0.5
} }
}, },
{ {
name: '5日平均', name: '10日平均',
type: 'line', type: 'line',
data: calculateMA(5, _this.dataList), yAxisIndex: 0,
data: calculateMA(6, _this.dataList2),
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
z: 3,
lineStyle: { lineStyle: {
width: 3, width: 3,
color: '#3FD2F3',
opacity: 0.5
} }
}, },
{ {
name: '10日平均', name: '30日平均',
type: 'line', type: 'line',
data: calculateMA(6, _this.dataList), yAxisIndex: 0,
data: calculateMA(7, _this.dataList2),
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
z: 3,
lineStyle: {
width: 3,
}
},
{
name: '90日平均',
type: 'line',
yAxisIndex: 0,
data: calculateMA(8, _this.dataList2),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 3,
}
},
{
name: '180日平均',
type: 'line',
yAxisIndex: 0,
data: calculateMA(9, _this.dataList2),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 3,
}
},
{
name: '产品点击',
type: 'line',
data: calculateMA(4, _this.dataList2),
smooth: true,
yAxisIndex: 1,
showSymbol: false,
lineStyle: { lineStyle: {
width: 3, width: 3,
color: '#EE4454',
opacity: 0.5
} }
}, },
// {
// name: '月均线',
// type: 'line',
// data: calculateMA(10, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// },
// {
// name: '季度均线',
// type: 'line',
// data: calculateMA(20, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// },
// {
// name: '黄金线',
// type: 'line',
// data: calculateMA(30, data),
// smooth: true,
// showSymbol: false,
// lineStyle: {
// normal: {
// width: 1
// }
// }
// }
] ]
} }
_this.myChart.setOption(option); _this.myChart.setOption(option);
......
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