Commit 0ada2b45 authored by “yiyousong”'s avatar “yiyousong”
parents 0daa4acb f251984b
...@@ -80,23 +80,30 @@ export default { ...@@ -80,23 +80,30 @@ export default {
this.queryform.dateTimeStart = this.time ? this.time[0] : null; this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.queryform.dateTimeStart = this.time ? this.time[1] : null; this.queryform.dateTimeStart = this.time ? this.time[1] : null;
getWayAccessAnalyse(this.queryform).then((res) => { getWayAccessAnalyse(this.queryform).then((res) => {
let data = res.data.data.map((item, i) => let newobj = {};
item.code != "/sceneSignIn" let data = res.data.data.reduce((preVal, curVal) => {
? { newobj[curVal.name]
name: item.name, ? ""
} : (newobj[curVal.name] = preVal.push(curVal));
: "" return preVal;
); }, []);
// let data = res.data.data.map((item, i) =>
// item.code != "/sceneSignIn"
// ? {
// name: item.name,
// }
// : ""
// );
let links = res.data.links.map((item) => ({ let links = res.data.links.map((item) => ({
source: item.sourceName, source: item.sourceName,
target: item.targetName, target: item.targetName,
value: item.value, value: item.value,
lineStyle: { lineStyle: {
color: "source", color: "source",
}, },
})); }));
data = data.filter((v) => v); data = data.filter((v) => v);
links = links.filter((v) => v.target != "首页"); links = links.filter((v) => v.target != "首页" && v.target != v.source);
this.init(data, links); this.init(data, links);
}); });
}, },
......
...@@ -217,12 +217,14 @@ export default { ...@@ -217,12 +217,14 @@ export default {
display: flex; display: flex;
.img-dv { .img-dv {
width: 60%; flex: 1;
margin: 100px; margin: 100px;
height: 600px;
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height: 100%;
} }
#queuing { #queuing {
...@@ -236,7 +238,7 @@ export default { ...@@ -236,7 +238,7 @@ export default {
} }
.list-dv { .list-dv {
width: 40%; width: 55%;
min-height: 100%; min-height: 100%;
border-left: solid 1px #efefef; border-left: solid 1px #efefef;
box-sizing: border-box; box-sizing: border-box;
......
<template> <template>
<!-- 使用习惯分析 --> <!-- 使用习惯分析 -->
<div class="page"> <div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline"> <a-form-model
<a-form-model-item> :model="queryform"
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品"> :label-col="labelCol"
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index"> :wrapper-col="wrapperCol"
{{item.title}} layout="inline"
</a-select-option> >
</a-select> <a-form-model-item>
</a-form-model-item> <a-select
<a-form-model-item> v-model="queryform.productId"
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false"/> style="width: 200px"
</a-form-model-item> placeholder="选择产品"
<a-form-model-item> >
<a-button type="primary" class="addclass" @click="getData"> <a-select-option
开始分析 :value="item.id"
</a-button> v-for="(item, index) in product"
</a-form-model-item> :key="index"
</a-form-model> >
<div class="charts-box"> {{ item.title }}
<!-- <div id="canal"></div> --> </a-select-option>
<div id="type"></div> </a-select>
<!-- <div id="way"></div> --> </a-form-model-item>
</div> <a-form-model-item>
</div> <a-range-picker
valueFormat="yyyy-MM-DD"
v-model="time"
style="width: 300px"
:allowClear="false"
/>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" class="addclass" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="charts-box">
<!-- <div id="canal"></div> -->
<div id="type"></div>
<!-- <div id="way"></div> -->
</div>
</div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import moment from 'moment'; import moment from "moment";
import {getUsageCensus} from '@/api/dataActuary.js' import { getUsageCensus } from "@/api/dataActuary.js";
import product from "../mixins/product" import product from "../mixins/product";
export default { export default {
mixins:[product], mixins: [product],
data() { data() {
return { return {
queryform: { queryform: {
productId: 1, productId: 1,
dateTimeStart: moment().format('yyyy-MM-DD'), dateTimeStart: moment().format("yyyy-MM-DD"),
dateTimeEnd: moment().format('yyyy-MM-DD'), dateTimeEnd: moment().format("yyyy-MM-DD"),
pageCode: '/' pageCode: "/",
}, },
time: [moment().format('yyyy-MM-DD'), moment().format('yyyy-MM-DD')], time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
product: [{ product: [
title: '排队机', {
id: 1 title: "排队机",
}], id: 1,
labelCol: { },
span: 1 ],
}, labelCol: {
wrapperCol: { span: 1,
span: 14 },
}, wrapperCol: {
} span: 14,
}, },
mounted() { };
this.getData() },
}, mounted() {
methods: { this.getData();
getData() { },
this.queryform.dateTimeStart = this.time ? this.time[0] : null methods: {
this.queryform.dateTimeEnd = this.time ? this.time[1] : null getData() {
getUsageCensus(this.queryform).then(res=>{ this.queryform.dateTimeStart = this.time ? this.time[0] : null;
let data = res.data.map(({businessName,propValue})=>({name:businessName,value:propValue * 100})) this.queryform.dateTimeEnd = this.time ? this.time[1] : null;
this.initType(data) this.queryform.productId == 1
}) ? (this.queryform.businessCodeList = [
}, "iDCardSignIn",
initWay(){ "mobCheck_in",
let chartDom = document.getElementById('way') "qrCode",
let myChart = echarts.init(chartDom); ])
myChart.setOption({ : "";
title: { console.log(this.queryform);
text: '取号方式分析', getUsageCensus(this.queryform).then((res) => {
left: 'center' let data = res.data.map(({ businessName, propValue }) => ({
}, name: businessName,
tooltip: { value: propValue * 100,
trigger: 'item', }));
}, this.initType(data);
legend: { });
bottom: 0, },
left: 'center', initWay() {
itemWidth: 10, let chartDom = document.getElementById("way");
itemHeight: 10 let myChart = echarts.init(chartDom);
}, myChart.setOption({
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'], title: {
series: [{ text: "取号方式分析",
name: 'Access From', left: "center",
type: 'pie', },
radius: '65%', tooltip: {
label: { trigger: "item",
normal: { },
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比) legend: {
} bottom: 0,
}, left: "center",
labelLine: { itemWidth: 10,
normal: { itemHeight: 10,
length: 1 },
} color: [
}, "#6395F9",
data: [{ "#64DAAB",
value: 1048, "#647798",
name: 'Search Engine' "#F6C02D",
}, "#7567FA",
{ "#75CBED",
value: 735, ],
name: 'Direct' series: [
}, {
{ name: "Access From",
value: 580, type: "pie",
name: 'Email' radius: "65%",
}, label: {
{ normal: {
value: 484, formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
name: 'Union Ads' },
}, },
{ labelLine: {
value: 300, normal: {
name: 'Video Ads' length: 1,
} },
], },
}] data: [
}) {
}, value: 1048,
initType(data) { name: "Search Engine",
console.log(data) },
let chartDom = document.getElementById('type') {
let myChart = echarts.init(chartDom); value: 735,
myChart.setOption({ name: "Direct",
title: { },
text: this.queryform.productId==1?'取号类型分析':'功能使用分布', {
left: 'center' value: 580,
}, name: "Email",
tooltip: { },
trigger: 'item', {
}, value: 484,
legend: { name: "Union Ads",
bottom: 0, },
left: 'center', {
itemWidth: 10, value: 300,
itemHeight: 10 name: "Video Ads",
}, },
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'], ],
series: [{ },
type: 'pie', ],
radius: '65%', });
label: { },
normal: { initType(data) {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比) console.log(data);
} let chartDom = document.getElementById("type");
}, let myChart = echarts.init(chartDom);
labelLine: { myChart.setOption({
normal: { title: {
length: 1 text: this.queryform.productId == 1 ? "取号类型分析" : "功能使用分布",
} left: "center",
}, },
data: data tooltip: {
}] trigger: "item",
}) },
}, legend: {
initCanal() { bottom: 0,
let chartDom = document.getElementById('canal') left: "center",
let myChart = echarts.init(chartDom); itemWidth: 10,
myChart.setOption({ itemHeight: 10,
title: { },
text: '取号渠道分析', color: [
left: 'center' "#6395F9",
}, "#64DAAB",
tooltip: { "#647798",
trigger: 'item', "#F6C02D",
}, "#7567FA",
legend: { "#75CBED",
bottom: 0, ],
left: 'center', series: [
itemWidth: 10, {
itemHeight: 10 type: "pie",
}, radius: "65%",
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'], label: {
series: [{ normal: {
name: 'Access From', formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
type: 'pie', },
radius: '65%', },
label: { labelLine: {
normal: { normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比) length: 1,
} },
}, },
labelLine: { data: data,
normal: { },
length: 1 ],
} });
}, },
data: [{ initCanal() {
value: 1048, let chartDom = document.getElementById("canal");
name: '终端取号' let myChart = echarts.init(chartDom);
}, myChart.setOption({
{ title: {
value: 735, text: "取号渠道分析",
name: '在线取号' left: "center",
} },
] tooltip: {
}] trigger: "item",
}) },
} legend: {
} bottom: 0,
}; left: "center",
itemWidth: 10,
itemHeight: 10,
},
color: [
"#6395F9",
"#64DAAB",
"#647798",
"#F6C02D",
"#7567FA",
"#75CBED",
],
series: [
{
name: "Access From",
type: "pie",
radius: "65%",
label: {
normal: {
formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
},
},
labelLine: {
normal: {
length: 1,
},
},
data: [
{
value: 1048,
name: "终端取号",
},
{
value: 735,
name: "在线取号",
},
],
},
],
});
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.page { .page {
height: calc(100% - 50px); height: calc(100% - 50px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/deep/.ant-form { /deep/.ant-form {
padding: 15px; padding: 15px;
} }
.charts-box { .charts-box {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 50px 0; padding: 50px 0;
#canal,#type,#way { #canal,
width: 30%; #type,
height: 100%; #way {
} width: 30%;
} height: 100%;
} }
</style> }
\ No newline at end of file }
</style>
<template> <template>
<div> <div>
<a-card :bordered="false" class="mb_15"> <a-card :bordered="false" class="mb_15">
<template slot="title"> <template slot="title">
<div class="head"> <div class="head">
<div class="head_title">整体情况</div> <div class="head_title">整体情况</div>
<div class="head_desc">更新时间:{{ nowDate }}</div> <div class="head_desc">更新时间:{{ nowDate }}</div>
</div> </div>
</template> </template>
<a-row type="flex" align="middle"> <a-row type="flex" align="middle">
<a-col :span="4"> <a-col :span="4">
<div class="f_40 f_center warning">{{ massCount }}</div> <div class="f_40 f_center warning">{{ massCount }}</div>
<div class="f_center">群众注册总量</div> <div class="f_center">群众注册总量</div>
<!-- <div class="f_center primary" @click="toTable">点击查看报表</div> --> <!-- <div class="f_center primary" @click="toTable">点击查看报表</div> -->
</a-col> </a-col>
<a-col :span="20"> <a-col :span="20">
<lineChart :id="`one_line`" :title="`近30日注册情况分析`" :datas="oneLineData" :height="200" :width="1420" /> <lineChart
</a-col> :id="`one_line`"
</a-row> :title="`近30日注册情况分析`"
</a-card> :datas="oneLineData"
<a-card :bordered="false" class="mb_15"> :height="200"
<template slot="title"> :width="1420"
<div class="head"> />
<div class="head_title">注册用户理解</div> </a-col>
<div class="head_desc"></div> </a-row>
</div> </a-card>
</template> <a-card :bordered="false" class="mb_15">
<a-row> <template slot="title">
<a-col :span="8"> <div class="head">
<map-chart :id="`one_map`" :datas="oneMapData" :height="400" :width="550" /> <div class="head_title">注册用户理解</div>
</a-col> <div class="head_desc"></div>
<a-col :span="8"> </div>
<a-table :rowKey="(record, index) => { return index }" :dataSource="provinces" </template>
:columns="provincesColumns" :scroll="{ y: 300 }" :pagination="false"> <a-row>
</a-table> <a-col :span="8">
</a-col> <map-chart
<a-col :span="8"> :id="`one_map`"
<pieChart :id="`one_pie`" :height="400" :width="550" :datas="onePieData" /> :datas="oneMapData"
</a-col> :height="400"
<a-col :span="12"> :width="550"
<doublePieChart :id="`two_pie`" :height="300" :width="800" :datas="twoPieData" /> />
</a-col> </a-col>
<a-col :span="12"> <a-col :span="8">
<barChart :id="`one_bar`" :height="300" :width="800" :datas="oneBarData" /> <a-table
</a-col> :rowKey="
<a-col :span="12"> (record, index) => {
<barChart :id="`two_bar`" :height="300" :width="800" :datas="twoBarData" /> return index;
</a-col> }
<a-col :span="12"> "
<pieChart :id="`three_pie`" :height="300" :width="800" :datas="threePieData" /> :dataSource="provinces"
</a-col> :columns="provincesColumns"
<a-col :span="12"> :scroll="{ y: 300 }"
</a-col> :pagination="false"
<a-col :span="12"> >
</a-col> </a-table>
</a-row> </a-col>
</a-card> <a-col :span="8">
<a-card :bordered="false" class="mb_15"> <pieChart
<template slot="title"> :id="`one_pie`"
<div class="head"> :height="400"
<div class="head_title">办件用户理解</div> :width="550"
<div class="head_desc"></div> :datas="onePieData"
</div> />
</template> </a-col>
<a-row type="flex" align="middle"> <a-col :span="12">
<a-row> <doublePieChart
<a-col :span="8"> :id="`two_pie`"
<map-chart :id="`two_map`" :datas="oneMapData2" :height="400" :width="550" /> :height="300"
</a-col> :width="800"
<a-col :span="8"> :datas="twoPieData"
<a-table :rowKey="(record, index) => { return index }" :dataSource="provinces2" />
:columns="provincesColumns2" :pagination="false" :scroll="{ y: 300 }"> </a-col>
</a-table> <a-col :span="12">
</a-col> <barChart
<a-col :span="8"> :id="`one_bar`"
<pieChart :id="`four_pie`" :height="400" :width="550" :datas="onePieData2" /> :height="300"
</a-col> :width="800"
<a-col :span="12"> :datas="oneBarData"
<doublePieChart :id="`five_pie`" :height="300" :width="800" :datas="twoPieData2" /> />
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<barChart :id="`six_bar`" :height="300" :width="800" :datas="oneBarData2" /> <barChart
</a-col> :id="`two_bar`"
<a-col :span="12"> :height="300"
<barChart :id="`three_bar`" :height="300" :width="800" :datas="twoBarData2" /> :width="800"
</a-col> :datas="twoBarData"
<a-col :span="12"> />
<pieChart :id="`six_pie`" :height="300" :width="800" :datas="threePieData2" /> </a-col>
</a-col> <a-col :span="12">
<a-col :span="12"> <pieChart
</a-col> :id="`three_pie`"
<a-col :span="12"> :height="300"
</a-col> :width="800"
</a-row> :datas="threePieData"
</a-row> />
</a-card> </a-col>
</div> <a-col :span="12"> </a-col>
<a-col :span="12"> </a-col>
</a-row>
</a-card>
<a-card :bordered="false" class="mb_15">
<template slot="title">
<div class="head">
<div class="head_title">办件用户理解</div>
<div class="head_desc"></div>
</div>
</template>
<a-row type="flex" align="middle">
<a-row>
<a-col :span="8">
<map-chart
:id="`two_map`"
:datas="oneMapData2"
:height="400"
:width="550"
/>
</a-col>
<a-col :span="8">
<a-table
:rowKey="
(record, index) => {
return index;
}
"
:dataSource="provinces2"
:columns="provincesColumns2"
:pagination="false"
:scroll="{ y: 300 }"
>
</a-table>
</a-col>
<a-col :span="8">
<pieChart
:id="`four_pie`"
:height="400"
:width="550"
:datas="onePieData2"
/>
</a-col>
<a-col :span="12">
<doublePieChart
:id="`five_pie`"
:height="300"
:width="800"
:datas="twoPieData2"
/>
</a-col>
<a-col :span="12">
<barChart
:id="`six_bar`"
:height="300"
:width="800"
:datas="oneBarData2"
/>
</a-col>
<a-col :span="12">
<barChart
:id="`three_bar`"
:height="300"
:width="800"
:datas="twoBarData2"
/>
</a-col>
<a-col :span="12">
<pieChart
:id="`six_pie`"
:height="300"
:width="800"
:datas="threePieData2"
/>
</a-col>
<a-col :span="12"> </a-col>
<a-col :span="12"> </a-col>
</a-row>
</a-row>
</a-card>
</div>
</template> </template>
<script > <script>
import barChart from '../../business/Component/bar/index.vue' import barChart from "../../business/Component/bar/index.vue";
import doublePieChart from "../../business/Component/doublePie/index.vue" import doublePieChart from "../../business/Component/doublePie/index.vue";
import pieChart from "../../business/Component/pie/index.vue" import pieChart from "../../business/Component/pie/index.vue";
import lineChart from "../../business/Component/line/index.vue" import lineChart from "../../business/Component/line/index.vue";
import mapChart from "../../business/Component/map/index.vue" import mapChart from "../../business/Component/map/index.vue";
import moment from "moment" import moment from "moment";
import { import {
peopleQs, registerProvince, registerBwd, registerSex, registerAge, registerNation, provinceCase, bwdStatistic, peopleQs,
provinceStatistic, genderRateType, ageRate, TopNationStatistic, registerProvince,
} from "@/api/userPortrait.js" registerBwd,
registerSex,
registerAge,
registerNation,
provinceCase,
bwdStatistic,
provinceStatistic,
genderRateType,
ageRate,
TopNationStatistic,
} from "@/api/userPortrait.js";
export default { export default {
components: { components: {
mapChart, pieChart, lineChart, doublePieChart, barChart mapChart,
}, pieChart,
data() { lineChart,
return { doublePieChart,
options: [ barChart,
{ },
value: '0', data() {
label: '今天', return {
}, options: [
{ {
value: '1', value: "0",
label: '近7日', label: "今天",
}, },
{ {
value: '2', value: "1",
label: '近30日', label: "近7日",
}, },
{ {
value: '3', value: "2",
label: '近3个月', label: "近30日",
}, },
{ {
value: '4', value: "3",
label: '本年度', label: "近3个月",
}, },
], {
oneLineData: {}, value: "4",
oneMapData: {}, label: "本年度",
oneMapData2: {}, },
onePieData: {}, ],
onePieData2: {}, oneLineData: {},
twoPieData: {}, oneMapData: {},
twoPieData2: {}, oneMapData2: {},
oneBarData: {}, onePieData: {},
oneBarData2: {}, onePieData2: {},
twoBarData: {}, twoPieData: {},
twoBarData2: {}, twoPieData2: {},
threePieData: {}, oneBarData: {},
threePieData2: {}, oneBarData2: {},
provinces: [ twoBarData: {},
{ twoBarData2: {},
ranking: 1, threePieData: {},
province: '四川省', threePieData2: {},
people: '999', provinces: [
percent: '2' {
}, ranking: 1,
{ province: "四川省",
ranking: 2, people: "999",
province: '四川省', percent: "2",
people: '999', },
percent: '2' {
}, ranking: 2,
], province: "四川省",
provinces2: [ people: "999",
{ percent: "2",
ranking: 1, },
province: '四川省', ],
people: '999', provinces2: [
percent: '2' {
}, ranking: 1,
{ province: "四川省",
ranking: 2, people: "999",
province: '四川省', percent: "2",
people: '999', },
percent: '2' {
}, ranking: 2,
], province: "四川省",
provincesColumns: [ people: "999",
{ percent: "2",
key: 'ranking', },
title: '序号', ],
dataIndex: 'id', provincesColumns: [
{
key: "ranking",
title: "序号",
dataIndex: "id",
},
{
key: "province",
title: "省份",
dataIndex: "province",
},
{
key: "value",
title: "注册人数",
dataIndex: "value",
},
{
key: "zb_lv",
title: "注册占比",
dataIndex: "zb_lv",
customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%";
},
},
],
provincesColumns2: [
{
key: "ranking",
title: "序号",
dataIndex: "id",
},
{
key: "province",
title: "省份",
dataIndex: "province",
},
{
key: "value",
title: "办件人数",
dataIndex: "value",
},
{
key: "nums_val",
title: "办件占比",
dataIndex: "nums_val",
customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%";
},
},
],
takeNumber: "0",
nowDate: "",
}, massCount: "0", //群众总量
{ timeArr: [], //群众注册时间
key: 'province',
title: '省份',
dataIndex: 'province',
},
{
key: 'value',
title: '注册人数',
dataIndex: 'value',
},
{
key: 'zb_lv',
title: '注册占比',
dataIndex: 'zb_lv',
customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%"
}
},
],
provincesColumns2: [
{
key: 'ranking',
title: '序号',
dataIndex: 'id',
}, doTotal: 0,
{ };
key: 'province', },
title: '省份', created() {},
dataIndex: 'province', mounted() {
}, this.getPeopleQs();
{ this.getRegisterProvince();
key: 'value', this.getRegisterBwd();
title: '办件人数', this.getRegisterSex();
dataIndex: 'value', this.getRegisterAge();
}, this.getRegisterNation();
{
key: 'nums_val',
title: '办件占比',
dataIndex: 'nums_val',
customRender(text, record, index) {
return parseFloat((text * 100).toFixed(2)) + "%"
}
},
],
takeNumber: '0',
nowDate: '',
massCount: '0',//群众总量 this.getProvinceCase();
timeArr: [],//群众注册时间 this.getProvinceStatistic();
this.getBwdStatistic();
this.getGenderRateType();
this.getAgeRate();
this.getTopNationStatistic();
this.nowDate = moment(new Date()).format("YYYY-MM-DD h:mm:ss");
},
methods: {
toTable() {
this.$router.push({ path: "register" });
},
//整体情况
async getPeopleQs() {
let res = await peopleQs({ siteid: localStorage.getItem("siteId") });
if (res.code == 1) {
this.massCount = res.data.count;
let time = res.data.list?.map((i) => {
//循环获取时间
return moment(i.datetime).format("MM-DD");
});
let take = [];
let app = [];
let Applets = [];
res.data.list?.forEach((i) => {
i.row.forEach((j) => {
if (j.register_type == "take") {
//循环获取排号机注册情况
return take.push(j.count);
}
if (j.register_type == "app") {
//循环获取自助终端注册情况
return app.push(j.count);
}
if (j.register_type == "Applets") {
//循环获取微官网注册情况
return Applets.push(j.count);
}
});
});
this.oneLineData = {
title: "近30日注册情况分析:",
legend: [
"自助服务系统注册人数",
"微官网注册人数",
"排队系统注册人数",
],
xData: time,
dataList: [
{ name: "自助服务系统注册人数", data: app },
{ name: "微官网注册人数", data: Applets },
{ name: "排队系统注册人数", data: take },
],
};
doTotal: 0, this.$forceUpdate(this.oneLineData);
} }
}, },
created() { //区域注册情况
async getRegisterProvince() {
}, let res = await registerProvince({
mounted() { siteid: localStorage.getItem("siteId"),
this.getPeopleQs() });
this.getRegisterProvince() let arr2 = res.data.sort(function (a, b) {
this.getRegisterBwd() return b.count - a.count;
this.getRegisterSex() });
this.getRegisterAge() let arr = arr2.map((i, j) => {
this.getRegisterNation() i.id = j + 1;
i.name = i.province;
this.getProvinceCase() i.value = i.count;
this.getProvinceStatistic() return i;
this.getBwdStatistic() });
this.getGenderRateType() // console.log(arr)
this.getAgeRate() this.oneMapData = {
this.getTopNationStatistic() title: "注册用户地域分析",
this.nowDate = moment(new Date()).format('YYYY-MM-DD h:mm:ss') data: arr,
}, };
methods: { this.provinces = arr;
toTable() { this.onePieData = {
this.$router.push({ path: 'register' }) title: "",
}, type: "scroll",
//整体情况 legend: arr.forEach((i) => {
async getPeopleQs() { return i.province;
let res = await peopleQs({ siteid: localStorage.getItem('siteId') }) }),
if (res.code == 1) { data: arr,
this.massCount = res.data.count };
let time = res.data.list?.map(i => { //循环获取时间 },
return moment(i.datetime).format('MM-DD') //注册分布情况
}) async getRegisterBwd() {
let take = [] let res = await registerBwd({ siteid: localStorage.getItem("siteId") });
let app = [] this.twoPieData = {
let Applets = [] title: "本地人与外地人注册分布",
res.data.list?.forEach(i => { pieName: "分布详情",
i.row.forEach(j => { firstName: "宜宾市本地人注册占比",
if (j.register_type == 'take') {//循环获取排号机注册情况 firstVal: res.data.bd_lv,
return take.push(j.count) firstTotal: 1,
} secondName: "外地人注册占比",
if (j.register_type == 'app') {//循环获取自助终端注册情况 secondVal: res.data.wd_lv,
return app.push(j.count) secondTotal: 1,
} };
if (j.register_type == 'Applets') {//循环获取微官网注册情况 },
return Applets.push(j.count) //注册性别分布情况
} async getRegisterSex() {
}) let res = await registerSex({ siteid: localStorage.getItem("siteId") });
}) // console.log(res)
this.oneLineData = { if (res.data ? res.data.length > 0 : "") {
title: '近30日注册情况分析:', let man = res.data[0].row;
legend: ['自助服务系统注册人数', '微官网注册人数', '排队系统注册人数'], let woman = res.data[1].row;
xData: time, this.oneBarData = {
dataList: [ title: "性别分布",
{ name: '自助服务系统注册人数', data: app }, xData: ["", ""],
{ name: '微官网注册人数', data: Applets }, data: [
{ name: '排队系统注册人数', data: take }, {
] name: "自助服务系统注册人数",
} type: "bar",
} data: [man[1].count || 0, woman[1].count || 0],
}, },
//区域注册情况 {
async getRegisterProvince() { name: "微官网注册人数",
let res = await registerProvince({ siteid: localStorage.getItem('siteId') }) type: "bar",
let arr2 = res.data.sort(function (a, b) { data: [man[2].count || 0, woman[2].count || 0],
return b.count - a.count; },
}) {
let arr = arr2.map((i, j) => { name: "排队系统注册人数",
i.id = j + 1 type: "bar",
i.name = i.province data: [man[0].count || 0, woman[0].count || 0],
i.value = i.count },
return i ],
}) };
// console.log(arr) }
this.oneMapData = { },
title: "注册用户地域分析", //注册年龄分布情况
data: arr async getRegisterAge() {
} let res = await registerAge({ siteid: localStorage.getItem("siteId") });
this.provinces = arr // console.log(res)
this.onePieData = { let age_area = res.data.map((i) => {
title: '', return i.age_area;
type: 'scroll', });
legend: arr.forEach(i => { return i.province }), let total = 0;
data: arr let count = res.data.map((i) => {
} total += i.nums;
}, return i.nums;
//注册分布情况 });
async getRegisterBwd() { // console.log(total)
let res = await registerBwd({ siteid: localStorage.getItem('siteId') }) let zb = count.map((i) => {
this.twoPieData = { return parseFloat(((i / total) * 10000).toFixed(2));
title: '本地人与外地人注册分布', });
pieName: '分布详情', // console.log(zb)
firstName: '宜宾市本地人注册占比', this.twoBarData = {
firstVal: res.data.bd_lv, title: "年龄分布",
firstTotal: 1, xData: age_area,
secondName: '外地人注册占比', data: [
secondVal: res.data.wd_lv, { name: "办理次数", type: "bar", data: count },
secondTotal: 1, { name: "占比", type: "line", data: zb },
} ],
};
}, },
//注册性别分布情况 //注册民族分布情况
async getRegisterSex() { async getRegisterNation() {
let res = await registerSex({ siteid: localStorage.getItem('siteId') }) let res = await registerNation({
// console.log(res) siteid: localStorage.getItem("siteId"),
if (res.data ? res.data.length > 0 : '') { });
let man = res.data[0].row // console.log(res)
let woman = res.data[1].row res.data.forEach((i) => {
this.oneBarData = { i.name = i.idcard_Nation;
title: '性别分布', i.value = i.count;
xData: ['', ''], });
data: [ // console.log(res.data)
{ name: '自助服务系统注册人数', type: 'bar', data: [man[1].count || 0, woman[1].count || 0] }, this.threePieData = {
{ name: '微官网注册人数', type: 'bar', data: [man[2].count || 0, woman[2].count || 0] }, title: "民族分布",
{ name: '排队系统注册人数', type: 'bar', data: [man[0].count || 0, woman[0].count || 0] }, type: "",
] legend: res.data,
} data: res.data,
} };
}, },
//注册年龄分布情况 //办件用户地域分析
async getRegisterAge() { async getProvinceCase() {
let res = await registerAge({ siteid: localStorage.getItem('siteId') }) let res = await provinceCase({
// console.log(res) siteid: localStorage.getItem("siteId"),
let age_area = res.data.map(i => { selected: 2,
return i.age_area });
}) // console.log(res)
let total = 0 let arr2 = res.data.sort(function (a, b) {
let count = res.data.map(i => { return b.nums - a.nums;
total += i.nums });
return i.nums let arr = arr2.map((i, j) => {
}) i.id = j + 1;
// console.log(total) i.province = i.name;
let zb = count.map(i => { i.value = i.nums;
return parseFloat((i / total * 10000).toFixed(2)) this.doTotal += i.nums;
}) return i;
// console.log(zb) });
this.twoBarData = { arr.forEach((i) => {
title: '年龄分布', i.nums_val = i.nums / this.doTotal;
xData: age_area, });
data: [ // console.log(arr)
{ name: '办理次数', type: 'bar', data: count }, this.oneMapData2 = {
{ name: '占比', type: 'line', data: zb }, title: "办件用户地域分析",
] data: arr,
} };
}, this.provinces2 = arr;
//注册民族分布情况 },
async getRegisterNation() { //办件用户地域分析
let res = await registerNation({ siteid: localStorage.getItem('siteId') }) async getProvinceStatistic() {
// console.log(res) let res = await provinceStatistic({
res.data.forEach(i => { siteid: localStorage.getItem("siteId"),
i.name = i.idcard_Nation selected: 2,
i.value = i.count province: "四川省",
}) });
// console.log(res.data) // console.log(res)
this.threePieData = { res.data.forEach((i) => {
title: '民族分布', i.value = i.count;
type: '', });
legend: res.data, this.onePieData2 = {
data: res.data title: "",
} type: "scroll",
}, legend: res.data,
//办件用户地域分析 data: res.data,
async getProvinceCase() { };
let res = await provinceCase({ siteid: localStorage.getItem('siteId'), selected: 2 }) },
// console.log(res) //本外地分析
let arr2 = res.data.sort(function (a, b) { async getBwdStatistic() {
return b.nums - a.nums; let res = await bwdStatistic({
}) siteid: localStorage.getItem("siteId"),
let arr = arr2.map((i, j) => { selected: 2,
i.id = j + 1 });
i.province = i.name // console.log(res)
i.value = i.nums this.twoPieData2 = {
this.doTotal += i.nums title: "本地人与外地人办件分布",
return i pieName: "分布详情",
}) firstName: "宜宾市本地人办件占比",
arr.forEach(i => { firstVal: res.data.bd_lv,
i.nums_val = i.nums / this.doTotal firstTotal: 1,
}) secondName: "外地人办件占比",
// console.log(arr) secondVal: res.data.wd_lv,
this.oneMapData2 = { secondTotal: 1,
title: "办件用户地域分析", };
data: arr },
} //性别办件分析
this.provinces2 = arr async getGenderRateType() {
}, let res = await genderRateType({
//办件用户地域分析 siteid: localStorage.getItem("siteId"),
async getProvinceStatistic() { selected: 2,
let res = await provinceStatistic({ siteid: localStorage.getItem('siteId'), selected: 2, province: '四川省' }) });
// console.log(res) if (res.data ? res.data.length > 0 : "") {
res.data.forEach(i => { let man = res.data[0].row;
i.value = i.count let woman = res.data[1].row;
}) this.oneBarData2 = {
this.onePieData2 = { title: "性别分布",
title: '', xData: ["", ""],
type: 'scroll', data: [
legend: res.data, {
data: res.data name: "自助服务系统注册人数",
} type: "bar",
}, data: [man[1].nums || 0, woman[1].nums || 0],
//本外地分析 },
async getBwdStatistic() { {
let res = await bwdStatistic({ siteid: localStorage.getItem('siteId'), selected: 2 }) name: "微官网注册人数",
// console.log(res) type: "bar",
this.twoPieData2 = { data: [man[2].nums || 0, woman[2].nums || 0],
title: '本地人与外地人办件分布', },
pieName: '分布详情', {
firstName: '宜宾市本地人办件占比', name: "排队系统注册人数",
firstVal: res.data.bd_lv, type: "bar",
firstTotal: 1, data: [man[0].nums || 0, woman[0].nums || 0],
secondName: '外地人办件占比', },
secondVal: res.data.wd_lv, ],
secondTotal: 1, };
} }
}, },
//性别办件分析 //办件年龄分析
async getGenderRateType() { async getAgeRate() {
let res = await genderRateType({ siteid: localStorage.getItem('siteId'), selected: 2 }) let res = await ageRate({
if (res.data ? res.data.length > 0 : '') { siteid: localStorage.getItem("siteId"),
let man = res.data[0].row selected: 2,
let woman = res.data[1].row });
this.oneBarData2 = { let age_area = res.data.list.map((i) => {
title: '性别分布', return i.age_area;
xData: ['', ''], });
data: [ let total = 0;
{ name: '自助服务系统注册人数', type: 'bar', data: [man[1].nums || 0, woman[1].nums || 0] }, let count = res.data.list.map((i) => {
{ name: '微官网注册人数', type: 'bar', data: [man[2].nums || 0, woman[2].nums || 0] }, total += i.nums;
{ name: '排队系统注册人数', type: 'bar', data: [man[0].nums || 0, woman[0].nums || 0] }, return i.nums;
] });
} // console.log(total)
} let zb = count.map((i) => {
}, return parseFloat(((i / total) * 10000).toFixed(2));
//办件年龄分析 });
async getAgeRate() { // console.log(zb)
let res = await ageRate({ siteid: localStorage.getItem('siteId'), selected: 2 }) this.twoBarData2 = {
let age_area = res.data.list.map(i => { title: "年龄分布",
return i.age_area xData: age_area,
}) data: [
let total = 0 { name: "办理次数", type: "bar", data: count },
let count = res.data.list.map(i => { { name: "占比", type: "line", data: zb },
total += i.nums ],
return i.nums };
}) },
// console.log(total) async getTopNationStatistic() {
let zb = count.map(i => { let res = await TopNationStatistic({
return parseFloat((i / total * 10000).toFixed(2)) siteid: localStorage.getItem("siteId"),
}) selected: 2,
// console.log(zb) });
this.twoBarData2 = { // console.log(res)
title: '年龄分布', res.data.forEach((i) => {
xData: age_area, i.name = i.idcard_Nation;
data: [ i.value = i.count;
{ name: '办理次数', type: 'bar', data: count }, });
{ name: '占比', type: 'line', data: zb }, // console.log(res.data)
] this.threePieData2 = {
} title: "民族分布",
}, type: "",
async getTopNationStatistic() { legend: res.data,
let res = await TopNationStatistic({ siteid: localStorage.getItem('siteId'), selected: 2 }) data: res.data,
// console.log(res) };
res.data.forEach(i => { },
i.name = i.idcard_Nation },
i.value = i.count };
})
// console.log(res.data)
this.threePieData2 = {
title: '民族分布',
type: '',
legend: res.data,
data: res.data
}
},
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
/deep/.ant-col { /deep/.ant-col {
margin-bottom: 20px; margin-bottom: 20px;
} }
.head { .head {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.head_title { .head_title {
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #333; color: #333;
margin-right: 1.25rem; margin-right: 1.25rem;
} }
.head_desc { .head_desc {
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #888888; color: #888888;
} }
} }
/deep/ .ant-table { /deep/ .ant-table {
width: 100% !important; width: 100% !important;
} }
.f_20 { .f_20 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.f_40 { .f_40 {
font-size: 2.5rem; font-size: 2.5rem;
} }
.f_center { .f_center {
text-align: center; text-align: center;
} }
.warning { .warning {
color: #FD6805 color: #fd6805;
} }
.primary { .primary {
color: #0595FD color: #0595fd;
} }
.success { .success {
color: #04CA8F color: #04ca8f;
} }
.h_200 { .h_200 {
height: 12.5rem; height: 12.5rem;
} }
.mb_15 { .mb_15 {
margin-bottom: .9375rem; margin-bottom: 0.9375rem;
} }
</style> </style>
\ No newline at end of file
package com.mortals.xhx.module.page.service.impl; package com.mortals.xhx.module.page.service.impl;
import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.JSONObject;
import com.mortals.framework.util.DateUtils;
import com.mortals.framework.util.StringUtils;
import com.mortals.xhx.module.page.model.pdu.BuryPointPdu;
import com.mortals.xhx.module.page.model.pdu.PageCensusPdu;
import org.apache.commons.collections4.CollectionUtils;
import org.springframework.stereotype.Service;
import com.mortals.framework.service.impl.AbstractCRUDServiceImpl;
import com.mortals.framework.exception.AppException; import com.mortals.framework.exception.AppException;
import com.mortals.framework.model.Context; import com.mortals.framework.model.Context;
import com.mortals.framework.service.impl.AbstractCRUDServiceImpl;
import com.mortals.framework.util.StringUtils;
import com.mortals.xhx.module.page.dao.PageAccessDao; import com.mortals.xhx.module.page.dao.PageAccessDao;
import com.mortals.xhx.module.page.model.PageAccessEntity; import com.mortals.xhx.module.page.model.PageAccessEntity;
import com.mortals.xhx.module.page.model.pdu.BuryPointPdu;
import com.mortals.xhx.module.page.model.pdu.PageCensusPdu;
import com.mortals.xhx.module.page.service.PageAccessService; import com.mortals.xhx.module.page.service.PageAccessService;
import org.apache.commons.collections4.CollectionUtils;
import org.springframework.stereotype.Service;
import java.text.DecimalFormat; import java.text.DecimalFormat;
import java.text.ParseException; import java.text.ParseException;
...@@ -122,7 +121,7 @@ public class PageAccessServiceImpl extends AbstractCRUDServiceImpl<PageAccessDao ...@@ -122,7 +121,7 @@ public class PageAccessServiceImpl extends AbstractCRUDServiceImpl<PageAccessDao
if(CollectionUtils.isNotEmpty(todayList)){ if(CollectionUtils.isNotEmpty(todayList)){
for (PageAccessEntity item:todayList){ for (PageAccessEntity item:todayList){
if(item!=null) { if(item!=null) {
DecimalFormat decimalFormat=new DecimalFormat(".00"); DecimalFormat decimalFormat=new DecimalFormat("#0.00");
String key = item.getTimeStr() + "_" + item.getFirstCode() + "_" + item.getSecondCode() + "_" + item.getThirdCode() + "_" + item.getFourthCode(); String key = item.getTimeStr() + "_" + item.getFirstCode() + "_" + item.getSecondCode() + "_" + item.getThirdCode() + "_" + item.getFourthCode();
if (mp.containsKey(key)) { if (mp.containsKey(key)) {
PageAccessEntity last = mp.get(key); PageAccessEntity last = mp.get(key);
......
...@@ -127,7 +127,7 @@ public class PageEventServiceImpl extends AbstractCRUDServiceImpl<PageEventDao, ...@@ -127,7 +127,7 @@ public class PageEventServiceImpl extends AbstractCRUDServiceImpl<PageEventDao,
float a = (float)vo.getValue(); float a = (float)vo.getValue();
float b = (float)clickSum; float b = (float)clickSum;
float p = a/b; float p = a/b;
DecimalFormat decimalFormat=new DecimalFormat(".00%"); DecimalFormat decimalFormat=new DecimalFormat("#0.00%");
String s = decimalFormat.format(p); String s = decimalFormat.format(p);
vo.setProportion(s); vo.setProportion(s);
} }
...@@ -173,7 +173,7 @@ public class PageEventServiceImpl extends AbstractCRUDServiceImpl<PageEventDao, ...@@ -173,7 +173,7 @@ public class PageEventServiceImpl extends AbstractCRUDServiceImpl<PageEventDao,
float a = (float)clickSum; float a = (float)clickSum;
float b = (float)trendCensusVos.size(); float b = (float)trendCensusVos.size();
float p = a/b; float p = a/b;
DecimalFormat decimalFormat=new DecimalFormat(".00"); DecimalFormat decimalFormat=new DecimalFormat("#0.00");
String s = decimalFormat.format(p); String s = decimalFormat.format(p);
dayAccessAvg = Float.valueOf(s); dayAccessAvg = Float.valueOf(s);
} }
...@@ -232,8 +232,8 @@ public class PageEventServiceImpl extends AbstractCRUDServiceImpl<PageEventDao, ...@@ -232,8 +232,8 @@ public class PageEventServiceImpl extends AbstractCRUDServiceImpl<PageEventDao,
float a = (float)clickSum; float a = (float)clickSum;
float b = (float)item.getAccessCount(); float b = (float)item.getAccessCount();
float p = b/a; float p = b/a;
DecimalFormat decimalFormat=new DecimalFormat(".00%"); DecimalFormat decimalFormat=new DecimalFormat("#0.00%");
DecimalFormat df=new DecimalFormat(".00"); DecimalFormat df=new DecimalFormat("#0.00");
String s = decimalFormat.format(p); String s = decimalFormat.format(p);
String s1 = df.format(p); String s1 = df.format(p);
item.setProportion(s); item.setProportion(s);
......
...@@ -75,7 +75,15 @@ public class PageRouteServiceImpl extends AbstractCRUDServiceImpl<PageRouteDao, ...@@ -75,7 +75,15 @@ public class PageRouteServiceImpl extends AbstractCRUDServiceImpl<PageRouteDao,
} }
Map<String,Object> result = new HashMap<>(); Map<String,Object> result = new HashMap<>();
List<PageWayCensusVo> pageWayCensusVos = dao.getPageWayCensus(pdu); List<PageWayCensusVo> pageWayCensusVos = dao.getPageWayCensus(pdu);
result.put("links",pageWayCensusVos); List<PageWayCensusVo> list = new ArrayList<>();
Map<String,String> source = new HashMap<>();
for(PageWayCensusVo item:pageWayCensusVos){
source.put(item.getSource(),item.getSourceName());
if(!source.containsKey(item.getTarget())){
list.add(item);
}
}
result.put("links",list);
List<Map<String, Object>> pageCodes = dao.getPageWayCode(pdu); List<Map<String, Object>> pageCodes = dao.getPageWayCode(pdu);
result.put("data",pageCodes); result.put("data",pageCodes);
return result; return result;
......
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