|
|
@@ -83,6 +83,23 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="来源">
|
|
|
+ <el-select
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ v-model="form.client"
|
|
|
+ placeholder="请选择来源"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in client"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item style="float: right">
|
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
<el-button type="primary" @click="onExport">导出</el-button>
|
|
|
@@ -129,7 +146,7 @@
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
{{
|
|
|
- lastParams.cityType === "1"
|
|
|
+ lastParams.cityType === '1'
|
|
|
? scope.row.city
|
|
|
: scope.row.province
|
|
|
}}
|
|
|
@@ -142,7 +159,7 @@
|
|
|
align="center"
|
|
|
>
|
|
|
<template #default>
|
|
|
- <span>{{ lastParams.app || "-" }}</span>
|
|
|
+ <span>{{ lastParams.app || '-' }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
@@ -187,9 +204,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import china from "../../assets/map/100000_full.json";
|
|
|
-import shanxi from "../../assets/map/610000_shaanxi.json";
|
|
|
-import countTo from "@/components/counto/vue-countTo.vue";
|
|
|
+import china from '../../assets/map/100000_full.json';
|
|
|
+import shanxi from '../../assets/map/610000_shaanxi.json';
|
|
|
+import countTo from '@/components/counto/vue-countTo.vue';
|
|
|
import { defaultAppNameFunc } from '@/utils/tool.js';
|
|
|
// @ is an alias to /src
|
|
|
import {
|
|
|
@@ -197,54 +214,69 @@ import {
|
|
|
getAppList,
|
|
|
getRegionChart,
|
|
|
getSearchData,
|
|
|
-} from "@/api/index";
|
|
|
+ getMaplever,
|
|
|
+} from '@/api/index';
|
|
|
|
|
|
-import * as echarts from "echarts";
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
|
// import config from "@/config/index";
|
|
|
let chart = undefined;
|
|
|
export default {
|
|
|
- name: "region",
|
|
|
+ name: 'region',
|
|
|
data() {
|
|
|
return {
|
|
|
lastParams: {},
|
|
|
table: [],
|
|
|
form: {
|
|
|
- app: "",
|
|
|
+ app: '',
|
|
|
version: [],
|
|
|
channel: [],
|
|
|
date: [],
|
|
|
- region: "",
|
|
|
- cityType: "1",
|
|
|
+ region: '',
|
|
|
+ cityType: '1',
|
|
|
+ client: '',
|
|
|
},
|
|
|
cycle: [],
|
|
|
item: {},
|
|
|
version: [],
|
|
|
channel: [],
|
|
|
+ client: [],
|
|
|
};
|
|
|
},
|
|
|
async mounted() {
|
|
|
if (echarts) {
|
|
|
- echarts.registerMap("China", china);
|
|
|
- echarts.registerMap("ShanXi", shanxi);
|
|
|
+ echarts.registerMap('China', china);
|
|
|
+ echarts.registerMap('ShanXi', shanxi);
|
|
|
}
|
|
|
if (chart && chart.dispose) chart.dispose();
|
|
|
- const { source, appV, appC, appli, appCLi, appVLi } =
|
|
|
+ const { source, appV, appC, appli, appCLi, appVLi, clentli, clentV } =
|
|
|
await this.getAppListFunc();
|
|
|
const keys = {
|
|
|
- value: "mname",
|
|
|
- label: "mname",
|
|
|
+ value: 'mname',
|
|
|
+ label: 'mname',
|
|
|
};
|
|
|
+ const clentliList = clentli.find(r => r.mdefault) || false;
|
|
|
+ let client = clentliList ? clentliList.mcode.toString() : -1;
|
|
|
this.cycle = this.verifyList(appli, source, keys, false);
|
|
|
this.channel = this.verifyList(appCLi, appC, keys, true);
|
|
|
this.version = this.verifyList(appVLi, appV, keys, true);
|
|
|
+ this.client = this.verifyList(
|
|
|
+ clentli,
|
|
|
+ clentV,
|
|
|
+ {
|
|
|
+ value: 'mcode',
|
|
|
+ label: 'mname',
|
|
|
+ },
|
|
|
+ true
|
|
|
+ );
|
|
|
this.form = {
|
|
|
// app: (this.cycle[0] || { value: "" }).value,
|
|
|
app: defaultAppNameFunc(this.cycle),
|
|
|
- version: [(this.version[0] || { value: "" }).value],
|
|
|
- channel: [(this.channel[0] || { value: "" }).value],
|
|
|
+ version: [(this.version[0] || { value: '' }).value],
|
|
|
+ channel: [(this.channel[0] || { value: '' }).value],
|
|
|
date: [new Date(Date.now() - 604800000), new Date(Date.now() - 86400000)],
|
|
|
- cityType: "1",
|
|
|
+ cityType: '1',
|
|
|
+ client,
|
|
|
};
|
|
|
this.onSubmit();
|
|
|
},
|
|
|
@@ -254,7 +286,7 @@ export default {
|
|
|
if (!obj) return;
|
|
|
let li = list || [];
|
|
|
const out = [];
|
|
|
- more && out.push({ value: -1, label: "不限" });
|
|
|
+ more && out.push({ value: -1, label: '不限' });
|
|
|
for (let i = 0; i < li.length; i++) {
|
|
|
const v = li[i];
|
|
|
if (verify.length !== 0 && !verify[v.mcode]) continue;
|
|
|
@@ -276,34 +308,36 @@ export default {
|
|
|
manufacturer: this.form.channel == -1 ? undefined : this.form.channel,
|
|
|
version: this.form.version == -1 ? undefined : this.form.version,
|
|
|
cityType: this.form.cityType,
|
|
|
+ lib: this.form.client == -1 ? undefined : this.form.client,
|
|
|
};
|
|
|
- getRegionChart(this.lastParams)
|
|
|
+ getMaplever(this.lastParams)
|
|
|
.then(r => {
|
|
|
if (!this.$refs.regionChart) return;
|
|
|
- let list = r || [];
|
|
|
+ let list = r.list || [];
|
|
|
chart && chart.clear();
|
|
|
this.lastParams.cityType = this.form.cityType;
|
|
|
this.table = list;
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
const v = list[i];
|
|
|
- if (v.city === "西安市" || v.province === "陕西省") {
|
|
|
+ if (v.city === '西安市' || v.province === '陕西省') {
|
|
|
this.item = {
|
|
|
- name: v.city === "西安市" ? "西安市" : "陕西省",
|
|
|
+ name: v.city === '西安市' ? '西安市' : '陕西省',
|
|
|
value: v.userSum,
|
|
|
- distribution: (v.distribution * 100).toFixed(2) - 0 + "%",
|
|
|
+ distribution: (v.distribution * 100).toFixed(2) - 0 + '%',
|
|
|
userSum: v.userSum,
|
|
|
};
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
- this.createImage(list);
|
|
|
+ console.log(r);
|
|
|
+ this.createImage(list, r.range || []);
|
|
|
chart && chart.hideLoading();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
chart && chart.clear() && chart.hideLoading();
|
|
|
});
|
|
|
},
|
|
|
- createImage(list) {
|
|
|
+ createImage(list, range) {
|
|
|
if (!chart) {
|
|
|
chart = echarts.init(this.$refs.regionChart);
|
|
|
window.onresize = chart.resize;
|
|
|
@@ -312,14 +346,14 @@ export default {
|
|
|
chart.resize({
|
|
|
height: this.$refs.regionChart.offsetWidth * 1,
|
|
|
});
|
|
|
- // let min = list[list.length - 1].userSum;
|
|
|
+ // let min = list[list.length - 1].userSum;
|
|
|
const p = {
|
|
|
tooltip: {
|
|
|
confine: true,
|
|
|
- trigger: "item",
|
|
|
+ trigger: 'item',
|
|
|
formatter: function (e) {
|
|
|
- if (e.value) return e.name + "<br />" + (e.value || "");
|
|
|
- return "";
|
|
|
+ if (e.value) return e.name + '<br />' + (e.value || '');
|
|
|
+ return '';
|
|
|
},
|
|
|
},
|
|
|
visualMap: {
|
|
|
@@ -330,27 +364,21 @@ export default {
|
|
|
// inRange: {
|
|
|
// color: ["lightskyblue", "yellow", "orangered"],
|
|
|
// },
|
|
|
- type: "piecewise",
|
|
|
- pieces: [
|
|
|
- {min: 0, max: 500, label: "活跃用户数< 5000", color: '#02a7f0'},
|
|
|
- {max: 1000, min: 500, label: "500<=活跃用户数< 1000", color: '#95f204'},
|
|
|
- {min: 1000, max: 2500, label: "1000<=活跃用户数< 2500", color: '#ffff00'},
|
|
|
- {min: 2500, max: 5000, label: "2500<= 活跃用户数< 5000", color: '#f59a23'},
|
|
|
- {min: 5000, label: "活跃用户数>= 5000", color: '#d9001b'},
|
|
|
- ],
|
|
|
+ type: 'piecewise',
|
|
|
+ pieces: range,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- type: "map",
|
|
|
- map: this.lastParams.cityType === "1" ? "ShanXi" : "China",
|
|
|
+ type: 'map',
|
|
|
+ map: this.lastParams.cityType === '1' ? 'ShanXi' : 'China',
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
data: list.map(v => {
|
|
|
return {
|
|
|
- name: this.lastParams.cityType === "1" ? v.city : v.province,
|
|
|
+ name: this.lastParams.cityType === '1' ? v.city : v.province,
|
|
|
value: v.userSum,
|
|
|
- distribution: (v.distribution * 100).toFixed(2) - 0 + "%",
|
|
|
+ distribution: (v.distribution * 100).toFixed(2) - 0 + '%',
|
|
|
userSum: v.userSum,
|
|
|
};
|
|
|
}),
|
|
|
@@ -359,12 +387,12 @@ export default {
|
|
|
};
|
|
|
chart.setOption(p);
|
|
|
const _this = this;
|
|
|
- chart.on("click", function (params) {
|
|
|
+ chart.on('click', function (params) {
|
|
|
_this.item = params.data || {};
|
|
|
});
|
|
|
},
|
|
|
async getAppListFunc() {
|
|
|
- const { r, li, appVersion, channel } = await this.getAppListOri();
|
|
|
+ const { r, li, appVersion, channel, clientList } = await this.getAppListOri();
|
|
|
let source = { length: 0 },
|
|
|
appli = [];
|
|
|
let appV = { length: 0 },
|
|
|
@@ -373,19 +401,21 @@ export default {
|
|
|
appCLi = [];
|
|
|
let clentV = { length: 0 },
|
|
|
clentli = [];
|
|
|
- let prvList = r.output.data.prvRolectrl || [];
|
|
|
+ let prvList =
|
|
|
+ r.output && r.output.data ? r.output.data.prvRolectrl || [] : [];
|
|
|
for (let i = 0; i < prvList.length; i++) {
|
|
|
const v = prvList[i];
|
|
|
- if (v.controlid == "RMT_SOURCE")
|
|
|
+ if (v.controlid == 'RMT_SOURCE')
|
|
|
(source[v.detid] = true), (source.length = source.length + 1);
|
|
|
- if (v.controlid == "APP_VERSION")
|
|
|
+ if (v.controlid == 'APP_VERSION')
|
|
|
(appV[v.detid] = true), (appV.length = appV.length + 1);
|
|
|
- if (v.controlid == "CHANNEL")
|
|
|
+ if (v.controlid == 'CHANNEL')
|
|
|
(appC[v.detid] = true), (appC.length = appC.length + 1);
|
|
|
}
|
|
|
- if (li.status === "0") appli = li.output.data || [];
|
|
|
+ if (li.status === '0') appli = li.output.data || [];
|
|
|
if (appVersion.length) appVLi = appVersion || [];
|
|
|
if (channel.length) appCLi = channel || [];
|
|
|
+ if (clientList.length) clentli = clientList || [];
|
|
|
return {
|
|
|
source,
|
|
|
appV,
|
|
|
@@ -399,37 +429,41 @@ export default {
|
|
|
},
|
|
|
async getAppListOri() {
|
|
|
const roleid = JSON.parse(
|
|
|
- window.parent.localStorage.userinfo || "{}"
|
|
|
+ window.parent.localStorage.userinfo || '{}'
|
|
|
).roleid;
|
|
|
const r = await getRule({
|
|
|
- db: "authplat",
|
|
|
- exportMark: "0",
|
|
|
+ db: 'authplat',
|
|
|
+ exportMark: '0',
|
|
|
menuid: 399,
|
|
|
roleid,
|
|
|
});
|
|
|
// 应用列表
|
|
|
-
|
|
|
const li = await getAppList({
|
|
|
- exportMark: "0",
|
|
|
- gcode: "SOURCE",
|
|
|
+ exportMark: '0',
|
|
|
+ gcode: 'SOURCE',
|
|
|
pageid: 1,
|
|
|
pagesize: 1000,
|
|
|
});
|
|
|
const cycle = li.output ? li.output.data || [] : [];
|
|
|
+ // 端列表
|
|
|
+ const clientList = await getSearchData({
|
|
|
+ gcode: 'CLIENT_TYPE',
|
|
|
+ source: defaultAppNameFunc(cycle, 'mname'),
|
|
|
+ });
|
|
|
// 应用版本列表
|
|
|
const appVersion = await getSearchData({
|
|
|
- gcode: "APP_VERSION",
|
|
|
+ gcode: 'APP_VERSION',
|
|
|
source: defaultAppNameFunc(cycle, 'mname'),
|
|
|
});
|
|
|
// 应用渠道列表
|
|
|
const channel = await getSearchData({
|
|
|
- gcode: "CHANNEL",
|
|
|
+ gcode: 'CHANNEL',
|
|
|
source: defaultAppNameFunc(cycle, 'mname'),
|
|
|
});
|
|
|
- return { r, li, appVersion, channel };
|
|
|
+ return { r, li, appVersion, channel, clientList };
|
|
|
},
|
|
|
disabledDate(time) {
|
|
|
- const first = new Date("2021-06-21 00:00:00");
|
|
|
+ const first = new Date('2021-06-21 00:00:00');
|
|
|
return (
|
|
|
time.getTime() > Date.now() - 86400000 ||
|
|
|
time.getTime() < first.getTime()
|
|
|
@@ -439,9 +473,9 @@ export default {
|
|
|
const d = new Date(date || Date.now() - 86400000);
|
|
|
const year = d.getFullYear();
|
|
|
const month =
|
|
|
- d.getMonth() <= 8 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
|
|
|
- const day = d.getDate() <= 9 ? "0" + d.getDate() : d.getDate();
|
|
|
- return [year, month, day].join("-");
|
|
|
+ d.getMonth() <= 8 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1;
|
|
|
+ const day = d.getDate() <= 9 ? '0' + d.getDate() : d.getDate();
|
|
|
+ return [year, month, day].join('-');
|
|
|
},
|
|
|
timeFormat(t) {
|
|
|
const Time = t || 0;
|
|
|
@@ -449,40 +483,40 @@ export default {
|
|
|
let hour = (Time - mH) / 3600;
|
|
|
let min = (mH - (mH % 60)) / 60;
|
|
|
let son = Number(mH % 60).toFixed(0);
|
|
|
- hour = hour <= 9 ? "0" + hour : hour;
|
|
|
- min = min <= 9 ? "0" + min : min;
|
|
|
- son = son <= 9 ? "0" + son : son;
|
|
|
+ hour = hour <= 9 ? '0' + hour : hour;
|
|
|
+ min = min <= 9 ? '0' + min : min;
|
|
|
+ son = son <= 9 ? '0' + son : son;
|
|
|
let out = [];
|
|
|
if (hour * 1 > 0) out.push(hour);
|
|
|
out.push(...[min, son]);
|
|
|
- return out.join(":");
|
|
|
+ return out.join(':');
|
|
|
},
|
|
|
change() {
|
|
|
const roleid = JSON.parse(
|
|
|
- window.parent.localStorage.userinfo || "{}"
|
|
|
+ window.parent.localStorage.userinfo || '{}'
|
|
|
).roleid;
|
|
|
const appV = {
|
|
|
length: 0,
|
|
|
};
|
|
|
getRule({
|
|
|
- db: "authplat",
|
|
|
- exportMark: "0",
|
|
|
+ db: 'authplat',
|
|
|
+ exportMark: '0',
|
|
|
menuid: 399,
|
|
|
roleid,
|
|
|
}).then(rule => {
|
|
|
let prvList = rule.output.data.prvRolectrl || [];
|
|
|
for (let i = 0; i < prvList.length; i++) {
|
|
|
const v = prvList[i];
|
|
|
- if (v.controlid == "APP_VERSION")
|
|
|
+ if (v.controlid == 'APP_VERSION')
|
|
|
(appV[v.detid] = true), (appV.length = appV.length + 1);
|
|
|
}
|
|
|
getSearchData({
|
|
|
- gcode: "APP_VERSION",
|
|
|
+ gcode: 'APP_VERSION',
|
|
|
source: this.form.app,
|
|
|
}).then(r => {
|
|
|
let version = [
|
|
|
{
|
|
|
- label: "不限",
|
|
|
+ label: '不限',
|
|
|
value: -1,
|
|
|
},
|
|
|
];
|
|
|
@@ -531,23 +565,23 @@ export default {
|
|
|
getRegionChart(this.lastParams).then(r => {
|
|
|
// 生成数据
|
|
|
let strcsv =
|
|
|
- "data:text/csv;charset=utf-8,\uFEFF应用名称,省份,地市,活跃用户数\r\n";
|
|
|
+ 'data:text/csv;charset=utf-8,\uFEFF应用名称,省份,地市,活跃用户数\r\n';
|
|
|
(r || []).map(v => {
|
|
|
strcsv += [
|
|
|
this.lastParams.app,
|
|
|
v.province,
|
|
|
v.city,
|
|
|
v.userSum,
|
|
|
- "\r\n",
|
|
|
- ].join(",");
|
|
|
+ '\r\n',
|
|
|
+ ].join(',');
|
|
|
});
|
|
|
// 导出
|
|
|
- let link = document.createElement("a");
|
|
|
- link.id = "download-csv";
|
|
|
- link.setAttribute("href", encodeURI(strcsv));
|
|
|
+ let link = document.createElement('a');
|
|
|
+ link.id = 'download-csv';
|
|
|
+ link.setAttribute('href', encodeURI(strcsv));
|
|
|
link.setAttribute(
|
|
|
- "download",
|
|
|
- this.lastParams.app + "地域分析" + S + "_" + E + ".csv"
|
|
|
+ 'download',
|
|
|
+ this.lastParams.app + '地域分析' + S + '_' + E + '.csv'
|
|
|
);
|
|
|
// document.body.appendChild(link);
|
|
|
link.click();
|
liyongli