Skip to content

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

1

parent 33947b75
Show 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 @@
.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">
......@@ -231,6 +238,22 @@
<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>
......@@ -253,7 +276,7 @@
</el-col>
<el-col :span="2" style="position: relative;">
<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>
</div>
<div class="right-data">
......@@ -268,7 +291,7 @@
{{(day_avg_num[0].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<div class="item">
<!-- <div class="item">
<div>20日平均</div>
<div>
{{(day_avg_num[2].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
......@@ -279,7 +302,7 @@
<div>
{{(day_avg_num[3].OrderAvgCount + '').split('.')[0]}} <img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
</div> -->
</div>
<!-- 线路占比 -->
<div>
......@@ -292,7 +315,7 @@
{{day_line_statics[0].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/lvsedian.png" alt="">
</div>
</div>
<div class="item">
<!-- <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="">
......@@ -303,7 +326,7 @@
<div>
{{day_line_statics[1].OrderPercent*100}}<span class="sub">%</span><img src="../../assets/img/viitto/hongsedian.png" alt="">
</div>
</div>
</div> -->
</div>
<!-- 报名单 -->
......@@ -317,7 +340,7 @@
{{(day_order_statics[0].OrderCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<!-- <div class="item">
<div>5日平均</div>
<div>
{{(day_order_statics[1].OrderCount + '').split('.')[0]}}
......@@ -328,7 +351,7 @@
<div>
{{(day_order_statics[2].OrderCount + '').split('.')[0]}}
</div>
</div>
</div> -->
</div>
<!-- 产品点击 -->
......@@ -342,7 +365,7 @@
{{(day_click_statics[0].ClickCount + '').split('.')[0]}}
</div>
</div>
<div class="item">
<!-- <div class="item">
<div>5日平均</div>
<div>
{{(day_click_statics[1].ClickCount + '').split('.')[0]}}
......@@ -353,7 +376,7 @@
<div>
{{(day_click_statics[2].ClickCount + '').split('.')[0]}}
</div>
</div>
</div> -->
</div>
<!-- 历史卖价 -->
<div>
......@@ -366,7 +389,7 @@
{{Math.round(day_history_price[0].MaxPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
<div class="item">
<!-- <div class="item">
<div>最低</div>
<div>
{{Math.round(day_history_price[0].MinPrice* 100) / 100}}<span class="sub"></span>
......@@ -377,7 +400,7 @@
<div class="gree-color">
{{Math.round(day_history_price[0].AvgPrice* 100) / 100}}<span class="sub"></span>
</div>
</div>
</div> -->
</div>
<!-- 成交量 -->
<div>
......@@ -390,7 +413,7 @@
{{day_history_preferprice[0].MaxPreferPrice}}<span class="sub"></span>
</div>
</div>
<div class="item">
<!-- <div class="item">
<div>最低</div>
<div>
{{day_history_preferprice[0].MinPreferPrice}}<span class="sub"></span>
......@@ -401,7 +424,7 @@
<div>
{{day_history_preferprice[0].AvgPreferPrice}}<span class="sub"></span>
</div>
</div>
</div> -->
</div>
</div>
......@@ -579,6 +602,22 @@ export default {
},
data(){
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
drawer: false,
direction: 'rtl',
rightShow: false,
......@@ -610,6 +649,12 @@ export default {
day_total_guestprice: {},
loding: false,
lineChartKData: [],
outbranchid: -1,
companyMsg:{
RB_Group_Id:'0',
Status:0,
},
companyList: [],
}
},
watch: {
......@@ -636,10 +681,17 @@ export default {
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();
},
......@@ -649,6 +701,7 @@ export default {
if (regionIdArr.length == 1) {
lineId = regionIdArr[0]
} else {
lineId = regionIdArr[0]
slineId = regionIdArr[1]
}
this.prolineId = lineId
......@@ -681,7 +734,8 @@ export default {
let msg={
startdate: this.StartTime,
lineid: this.prolineId,
ltid: this.slineId
ltid: this.slineId,
outbranchid: this.outbranchid
}
this.getOutherData(url, msg)
this.getKdata(url2, msg)
......@@ -691,7 +745,6 @@ export default {
this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){
let data = r.data.data;
console.log(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
......@@ -724,7 +777,6 @@ export default {
this.apiRequest(url,{msg:msg},r=>{
if(r.data.resultCode==1){
let data = r.data.data.k_unitprice;
console.log(data)
this.lineChartKData = data;
this.chartShow2 = true;
this.$forceUpdate()
......
src/components/viitto/lineChart2.vue
View file @ dc309a0f
......@@ -281,8 +281,7 @@ export default {
])
}
},
}
,
},
{
name:'产品点击',
type:'line',
......
src/components/viitto/lineChartK.vue
View file @ dc309a0f
......@@ -47,14 +47,15 @@ export default {
return {
myChart: null,
dataList: [],
dates: []
dates: [],
dataList2: []
}
},watch:{
},created(){
},mounted() {
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) {
return item.CreateDate;
......@@ -75,6 +76,7 @@ export default {
dataList.push(obj)
}
this.dataList = dataList
this.dataList2 = dataList
this.dates = dates
this.myChart = this.$echarts.init(this.$refs.myecharts);
this.init()
......@@ -88,8 +90,9 @@ export default {
let _this = this;
let option = {
backgroundColor: '#21202D',
color:['#2ecc71','#3498db','#9b59b6','#f1c40f','#e74c3c','#fffa65'],
legend: {
data: ['成交单价', '产品点击', '5日平均', '10日平均'],
data: ['开始值', '最高值', '结束值', '最低值', '5日平均', '10日平均', '30日平均', '90日平均', '180日平均','产品点击', ],
inactiveColor: '#777',
textStyle: {
color: '#fff'
......@@ -99,43 +102,6 @@ export default {
},
tooltip: {
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: {
animation: false,
type: 'cross',
......@@ -144,22 +110,86 @@ export default {
width: 2,
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: {
type: 'category',
data: _this.dates,
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: {
yAxis: [{
scale: true,
axisLine: { lineStyle: { color: '#8392A5' } },
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: {
bottom: 80,
left: 70,
right: 20,
right: 70,
},
dataZoom: [{
textStyle: {
......@@ -194,79 +224,86 @@ export default {
type: 'candlestick',
name: '成交单价',
data: _this.dataList,
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
}
},
{
name: '产品点击',
name: '5日平均',
type: 'line',
data: calculateMA(4, _this.dataList),
yAxisIndex: 0,
data: calculateMA(5, _this.dataList2),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 3,
color: '#F5AF19',
opacity: 0.5
}
},
{
name: '5日平均',
name: '10日平均',
type: 'line',
data: calculateMA(5, _this.dataList),
yAxisIndex: 0,
data: calculateMA(6, _this.dataList2),
smooth: true,
showSymbol: false,
z: 3,
lineStyle: {
width: 3,
color: '#3FD2F3',
opacity: 0.5
}
},
{
name: '10日平均',
name: '30日平均',
type: 'line',
data: calculateMA(6, _this.dataList),
yAxisIndex: 0,
data: calculateMA(7, _this.dataList2),
smooth: true,
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: {
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);
......
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