|
@@ -5,6 +5,59 @@
|
|
<el-breadcrumb-item>用户分析</el-breadcrumb-item>
|
|
<el-breadcrumb-item>用户分析</el-breadcrumb-item>
|
|
<el-breadcrumb-item>用户趋势</el-breadcrumb-item>
|
|
<el-breadcrumb-item>用户趋势</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</el-breadcrumb>
|
|
|
|
+ <el-card class="box-card">
|
|
|
|
+ <div class="head">
|
|
|
|
+ <div class="head-item">
|
|
|
|
+ <el-form
|
|
|
|
+ ref="form"
|
|
|
|
+ :model="form"
|
|
|
|
+ size="small"
|
|
|
|
+ :inline="true"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="demo-form-inline"
|
|
|
|
+ >
|
|
|
|
+ <el-form-item label="应用">
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="form.app"
|
|
|
|
+ placeholder="请选择时段"
|
|
|
|
+ @change="change"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in cycle"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :disabled="item.disabled"
|
|
|
|
+ >
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="head-item" v-if="!userTotalList.length" />
|
|
|
|
+ <div class="head-item" v-if="!userTotalList.length" />
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, i) in userTotalList"
|
|
|
|
+ :key="i + item.key"
|
|
|
|
+ class="head-item"
|
|
|
|
+ :style="{
|
|
|
|
+ borderTopColor: type === item.key ? '#396fff' : '#fff',
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
|
+ <div class="value">
|
|
|
|
+ <countTo
|
|
|
|
+ v-if="!item.isNum"
|
|
|
|
+ :startVal="0"
|
|
|
|
+ :endVal="item.value - 0"
|
|
|
|
+ :duration="1500"
|
|
|
|
+ ></countTo>
|
|
|
|
+ <span v-else v-text="item.value"></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <br />
|
|
<el-card class="box-card">
|
|
<el-card class="box-card">
|
|
<el-form
|
|
<el-form
|
|
ref="form"
|
|
ref="form"
|
|
@@ -27,22 +80,6 @@
|
|
>
|
|
>
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="应用">
|
|
|
|
- <el-select
|
|
|
|
- v-model="form.app"
|
|
|
|
- placeholder="请选择时段"
|
|
|
|
- @change="change"
|
|
|
|
- >
|
|
|
|
- <el-option
|
|
|
|
- v-for="item in cycle"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.label"
|
|
|
|
- :value="item.value"
|
|
|
|
- :disabled="item.disabled"
|
|
|
|
- >
|
|
|
|
- </el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
<el-form-item label="版本">
|
|
<el-form-item label="版本">
|
|
<el-select
|
|
<el-select
|
|
filterable
|
|
filterable
|
|
@@ -105,9 +142,7 @@
|
|
<el-button type="primary" @click="onExport">导出</el-button>
|
|
<el-button type="primary" @click="onExport">导出</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
- </el-card>
|
|
|
|
- <br />
|
|
|
|
- <el-card class="box-card">
|
|
|
|
|
|
+
|
|
<div class="head" v-if="oriData.total">
|
|
<div class="head" v-if="oriData.total">
|
|
<div
|
|
<div
|
|
v-for="(item, i) in oriData.total"
|
|
v-for="(item, i) in oriData.total"
|
|
@@ -202,7 +237,13 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
// @ is an alias to /src
|
|
// @ is an alias to /src
|
|
-import { getRule, getAppList, getHistory, getSearchData } from '@/api/index';
|
|
|
|
|
|
+import {
|
|
|
|
+ getRule,
|
|
|
|
+ getAppList,
|
|
|
|
+ getHistory,
|
|
|
|
+ getSearchData,
|
|
|
|
+ getUserTotal,
|
|
|
|
+} from '@/api/index';
|
|
|
|
|
|
import countTo from '@/components/counto/vue-countTo.vue';
|
|
import countTo from '@/components/counto/vue-countTo.vue';
|
|
import { defaultAppNameFunc } from '@/utils/tool.js';
|
|
import { defaultAppNameFunc } from '@/utils/tool.js';
|
|
@@ -217,6 +258,7 @@ import {
|
|
LegendComponent,
|
|
LegendComponent,
|
|
} from 'echarts/components';
|
|
} from 'echarts/components';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
|
|
+
|
|
echarts.use([
|
|
echarts.use([
|
|
TitleComponent,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
TooltipComponent,
|
|
@@ -230,7 +272,7 @@ echarts.use([
|
|
// import config from "@/config/index";
|
|
// import config from "@/config/index";
|
|
let chart = undefined;
|
|
let chart = undefined;
|
|
export default {
|
|
export default {
|
|
- name: 'RealOnline',
|
|
|
|
|
|
+ name: 'History',
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
type: '',
|
|
type: '',
|
|
@@ -249,6 +291,7 @@ export default {
|
|
version: [],
|
|
version: [],
|
|
channel: [],
|
|
channel: [],
|
|
client: [],
|
|
client: [],
|
|
|
|
+ userTotalList: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
async mounted() {
|
|
async mounted() {
|
|
@@ -259,7 +302,6 @@ export default {
|
|
value: 'mname',
|
|
value: 'mname',
|
|
label: 'mname',
|
|
label: 'mname',
|
|
};
|
|
};
|
|
- console.log(clentli);
|
|
|
|
const clentliList = clentli.find(r => r.mdefault) || false;
|
|
const clentliList = clentli.find(r => r.mdefault) || false;
|
|
let client = clentliList ? clentliList.mcode.toString() : -1;
|
|
let client = clentliList ? clentliList.mcode.toString() : -1;
|
|
this.cycle = this.verifyList(appli, source, keys, false);
|
|
this.cycle = this.verifyList(appli, source, keys, false);
|
|
@@ -283,6 +325,17 @@ export default {
|
|
date: [new Date(Date.now() - 604800000), new Date(Date.now() - 86400000)],
|
|
date: [new Date(Date.now() - 604800000), new Date(Date.now() - 86400000)],
|
|
};
|
|
};
|
|
this.onSubmit();
|
|
this.onSubmit();
|
|
|
|
+ getUserTotal({ app: this.lastParams.app || this.form.app }).then(r => {
|
|
|
|
+ this.userTotalList = (r || []).map(v => {
|
|
|
|
+ return {
|
|
|
|
+ name: v.name,
|
|
|
|
+ value: v.value,
|
|
|
|
+ key: v.name,
|
|
|
|
+ isNum: isNaN(v.value),
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ console.log(this.userTotalList);
|
|
|
|
+ });
|
|
},
|
|
},
|
|
computed: {},
|
|
computed: {},
|
|
methods: {
|
|
methods: {
|