Commit 44881299 authored by Zhang Xiaojie's avatar Zhang Xiaojie

fix

parent 40e6fcb8
<template> <template>
<div class=" overflow-x-auto"> <div class="overflow-x-auto 2xl:overflow-x-hidden">
<p class="text-2xl font-bold mb-5">实时数据</p> <p class="text-2xl font-bold mb-5">实时数据</p>
<a-row type="flex" justify="center" align="middle" :gutter="[50, 100]"> <a-row type="flex" justify="center" align="middle" :gutter="[50, 100]">
<a-col> <a-col>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<div <div
id="barchart" id="barchart"
ref="barchart" ref="barchart"
style="width:1200px" style="width: 1100px"
class="h-96 mx-auto text-center" class="h-96 mx-auto text-center"
></div> ></div>
</div> </div>
...@@ -59,31 +59,46 @@ export default Vue.extend({ ...@@ -59,31 +59,46 @@ export default Vue.extend({
data() { data() {
return { return {
option: { option: {
tooltip: {
trigger: "axis",
axisPointer: { type: "cross" },
},
color: "#3E4FAF", color: "#3E4FAF",
xAxis: { xAxis: {
name: "日期",
type: "category", type: "category",
// mock // mock
data: [] as Array<any> data: [] as Array<any>,
axisTick: {
alignWithLabel: true,
},
// data: [] as Array<number>, // data: [] as Array<number>,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "用户数量",
axisLabel: {
formatter: "{value} 人",
},
}, },
grid:[ grid: [
{ {
left: 20, left: 60,
top: 30, top: 50,
right: 0, right: 40,
bottom: 70, bottom: 70,
} },
], ],
series: [ series: [
{ {
// data: [] as Array<number>, // data: [] as Array<number>,
// mock // mock
data: [820, 932, 901, 934, 1290, 1330, 1320,934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,934, 1290, 1330, 1320], data: [
820, 932, 901, 934, 1290, 1330, 1320, 934, 1290, 1330, 1320, 820,
932, 901, 934, 1290, 1330, 1320, 934, 1290, 1330, 1320,
],
type: "line", type: "line",
areaStyle: {color: "#F5F5FB"}, areaStyle: { color: "#F5F5FB" },
smooth: true, smooth: true,
showBackground: false, showBackground: false,
}, },
...@@ -91,9 +106,9 @@ export default Vue.extend({ ...@@ -91,9 +106,9 @@ export default Vue.extend({
}, },
timeRange: 10, timeRange: 10,
myChart: undefined as undefined | echarts.ECharts, myChart: undefined as undefined | echarts.ECharts,
chartType:eBarChart.not_login_dau, chartType: eBarChart.not_login_dau,
eBarChart, eBarChart,
type:'', type: "",
login_dau: 0, login_dau: 0,
total_dau: 0, total_dau: 0,
total_register_user: 0, total_register_user: 0,
...@@ -104,8 +119,8 @@ export default Vue.extend({ ...@@ -104,8 +119,8 @@ export default Vue.extend({
document.getElementById("barchart") as HTMLCanvasElement document.getElementById("barchart") as HTMLCanvasElement
); );
this.initEchart(this.timeRange); this.initEchart(this.timeRange);
this.queryRealtime() this.queryRealtime();
this.queryChart() this.queryChart();
}, },
methods: { methods: {
handleChangeTimeRange(e: any) { handleChangeTimeRange(e: any) {
...@@ -113,20 +128,23 @@ export default Vue.extend({ ...@@ -113,20 +128,23 @@ export default Vue.extend({
this.initEchart(this.timeRange); this.initEchart(this.timeRange);
}, },
handleChangeSource(e: any) { handleChangeSource(e: any) {
let type = e.target!.value let type = e.target!.value;
console.log(type); console.log(type);
this.chartType = type === eBarChart.login_dau? eBarChart.login_dau:eBarChart.not_login_dau this.chartType =
this.queryChart() type === eBarChart.login_dau
? eBarChart.login_dau
: eBarChart.not_login_dau;
this.queryChart();
}, },
initEchart(period: number) { initEchart(period: number) {
// mock // mock
(this.option.xAxis.data as Array<String>) = getPastDaysUtilYesterday( (this.option.xAxis.data as Array<String>) = getPastDaysUtilYesterday(
period period
) as Array<String>; ) as Array<String>;
// //
(this.myChart as echarts.ECharts).setOption(this.option); (this.myChart as echarts.ECharts).setOption(this.option);
this.queryChart() this.queryChart();
}, },
async queryRealtime() { async queryRealtime() {
const ret = await DashboardService.getInstance().queryRealTime(); const ret = await DashboardService.getInstance().queryRealTime();
...@@ -137,21 +155,21 @@ export default Vue.extend({ ...@@ -137,21 +155,21 @@ export default Vue.extend({
} }
}, },
async queryChart() { async queryChart() {
console.log(this.timeRange,this.chartType); console.log(this.timeRange, this.chartType);
const ret = await DashboardService.getInstance().queryChart( const ret = await DashboardService.getInstance().queryChart({
{ days: this.timeRange,
days:this.timeRange, name: this.chartType,
name:this.chartType });
}
);
if (ret.code === 200) { if (ret.code === 200) {
console.log(ret); console.log(ret);
ret.data.map((data)=>{ this.option.series[0].data = [];
this.option.xAxis.data = [];
ret.data.map((data) => {
// 真实数据 // 真实数据
// this.option.series[0].data.push(data.value) // this.option.series[0].data.push(data.value)
// this.option.xAxis.data.push(data.time) // this.option.xAxis.data.push(data.time)
}) });
} }
}, },
}, },
......
...@@ -267,8 +267,8 @@ export default Vue.extend({ ...@@ -267,8 +267,8 @@ export default Vue.extend({
product_name: this.form.name, product_name: this.form.name,
products: this.form.introduction, products: this.form.introduction,
loan_type: this.form.type, loan_type: this.form.type,
rate_lower: this.form.interstMin, rate_lower: +this.form.interstMin,
rate_upper: this.form.interstMax, rate_upper: +this.form.interstMax,
submit_cond: this.form.submissionCon, submit_cond: this.form.submissionCon,
min_amount: this.form.limitMin, min_amount: this.form.limitMin,
min_date: this.form.startTime, min_date: this.form.startTime,
...@@ -298,8 +298,8 @@ export default Vue.extend({ ...@@ -298,8 +298,8 @@ export default Vue.extend({
loan_type: this.form.type as eProductType, loan_type: this.form.type as eProductType,
product_name: this.form.name, product_name: this.form.name,
products: this.form.introduction, products: this.form.introduction,
rate_lower: this.form.interstMin, rate_lower: +this.form.interstMin,
rate_upper: this.form.interstMax, rate_upper: +this.form.interstMax,
submit_cond: this.form.submissionCon, submit_cond: this.form.submissionCon,
}) })
.then((ret) => { .then((ret) => {
......
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