Commit 887a41e7 authored by XXM's avatar XXM

数据精算1和2

parent 81ff4226
...@@ -93,7 +93,6 @@ export default { ...@@ -93,7 +93,6 @@ export default {
this.menuListData = data.data; this.menuListData = data.data;
this.menuTreeData = toTreeData(data.data, -1, "id", "parentId"); this.menuTreeData = toTreeData(data.data, -1, "id", "parentId");
this.SET_menuList_X(deepClone(this.menuListData)); this.SET_menuList_X(deepClone(this.menuListData));
this.SET_menuTree_X(deepClone(this.menuTreeData)); this.SET_menuTree_X(deepClone(this.menuTreeData));
......
...@@ -6,7 +6,7 @@ const routes = [ ...@@ -6,7 +6,7 @@ const routes = [
redirect: "/home/dataManagement", redirect: "/home/dataManagement",
component: () => component: () =>
import(/* webpackChunkName: "home" */ "@/views/home/home.vue"), import(/* webpackChunkName: "home" */ "@/views/home/home.vue"),
meta: { title: "首页" }, meta: { title: "政务一体化平台" },
children: [ children: [
{ {
path: "dataManagement", path: "dataManagement",
...@@ -436,6 +436,75 @@ const routes = [ ...@@ -436,6 +436,75 @@ const routes = [
), ),
meta: { title: "数据精算" }, meta: { title: "数据精算" },
}, },
{
path: "dataActuary/business",
name: "business",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/business/index.vue"
),
meta: { title: "业务数据分析" },
redirect: 'dataActuary/business/basecontent',
children: [
{
path: "basecontent",
name: "basecontent",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/business/basecontent/index.vue"
),
meta: { title: "基本分析" },
},
{
path: "analysiscontent",
name: "analysiscontent",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/business/analysiscontent/index.vue"
),
meta: { title: "分析结果" },
},
]
},
{
path: "dataActuary/portrayal",
name: "portrayal",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/portrayal/index.vue"
),
meta: { title: "群众画像图谱" },
redirect: 'dataActuary/portrayal/portrayalbase',
children: [
{
path: "portrayalbase",
name: "portrayalbase",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/portrayal/portrayalBase/index.vue"
),
meta: { title: "基本分析" },
},
{
path: "portrayalanalysis",
name: "portrayalanalysis",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/portrayal/portrayalAnalysis/index.vue"
),
meta: { title: "分析结果" },
},
]
},
{
path: "dataActuary/portrayal/register",
name: "register",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/portrayal/register/index.vue"
),
meta: { title: "群众注册列表" },
},
{ {
path: "dataActuary/behaviour", path: "dataActuary/behaviour",
name: "behaviour", name: "behaviour",
......
<template>
<div>
<div :id="id" :style="{height: this.height+'px', width: this.width+'px'}"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
let myChart= null
export default {
props: {
id: {
type: String
},
height:{
type: String | Number,
},
width:{
type: String | Number,
},
datas: Object
},
data() {
return {
}
},
watch:{
datas: function(obj) {
let arr= []
if(obj) {
obj.data.map((item)=>{
let objData= {
data: [],
name: '',
type: ''
}
if(item){
objData.data= item.data
objData.name= item.name
objData.type= item.type
arr.push(objData)
}
})
this.barInit(obj.title, obj.xData, arr)
}
}
},
methods: {
barInit(name, xData, data) {
myChart = echarts.init(document.getElementById(this.id))
let option = {
title: {
text: name,
textStyle: {
fontSize: '14'
}
},
legend:{},
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: data
}
myChart.setOption(option)
// 让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<div :id="id" :style="{height: this.height+'px', width: this.width+'px'}"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
let myChart= null
export default {
props: {
id: {
type: String
},
height:{
type: String | Number,
},
width:{
type: String | Number,
},
datas: Object
},
data() {
return {
}
},
watch:{
datas: function(obj){
if(obj) {
this.pieInit(obj.title, obj.pieName, obj.firstName, obj.firstVal, obj.firstTotal, obj.secondName, obj.secondVal, obj.secondTotal)
}
}
},
methods: {
pieInit(title, pieName, firstName, firstVal, firstTotal, secondName, secondVal, secondTotal) {
myChart = echarts.init(document.getElementById(this.id))
let option = {
title: {
text: title,
textStyle: {
fontSize: '14'
}
},
series: [
{
name: pieName,
type: 'pie',
radius: ["55%", '70%'],
center: ['25%', '50%'],
label: {
show: false
},
data: [
{
value: firstVal,
name: firstName,
label: {
show: true,
position: 'center',
formatter: '{b|{b}}\n{d|{d}}%',
rich: {
b: {
fontSize: 14,
lineHeight: 30,
color: "#333"
},
d: {
fontSize: 14,
color: "#333",
lineHeight: 30,
fontWeight: "bold"
}
},
color: "#333"
},
itemStyle: {
color: '#04CA8F'
}
},
{
value: firstTotal - firstVal,
//不需要显示的数据,颜色设置成和背景一样
itemStyle: {
color: '#F0F2F5'
}
}
]
},
{
name: pieName,
type: 'pie',
radius: ["55%", '70%'],
center: ['75%', '50%'],
label: {
show: false
},
data: [
{
value: secondVal,
name: secondName,
label: {
show: true,
position: 'center',
formatter: '{b|{b}}\n{d|{d}}%',
rich: {
b: {
fontSize: 14,
lineHeight: 30,
color: "#333"
},
d: {
fontSize: 14,
color: "#333",
lineHeight: 30,
fontWeight: "bold"
}
},
color: "#333"
},
itemStyle: {
color: '#6394f9'
}
},
{
value: secondTotal - secondVal,
//不需要显示的数据,颜色设置成和背景一样
itemStyle: {
color: '#F0F2F5'
}
}
]
}
]
}
myChart.setOption(option)
// 让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<div :id="id" :style="{height: height+'px', width: width+'px'}"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
let myChart= null
export default {
props: {
id: String,
height: {
type: String | Number
},
width:{
type: String | Number,
},
datas: Object
},
data() {
return {
}
},
watch:{
datas: function(obj){
if(obj){
this.pieInit(obj.name, obj.val, obj.total, obj.color)
}
}
},
created() {
},
methods: {
pieInit(name, val, total, color) {
myChart = echarts.init(document.getElementById(this.id))
let option = {
series: [
{
name: name,
type: 'pie',
radius: ["65%", '80%'],
center: ['50%', '50%'],
label: {
show: false
},
data: [
{
value: val,
name: name,
label: {
show: true,
position: 'center',
formatter: '{b|{b}}\n{d|{d}}%',
rich: {
b: {
fontSize: 14,
lineHeight: 30,
color: "#333"
},
d: {
fontSize: 14,
color: "#333",
lineHeight: 30,
fontWeight: "bold"
}
},
color: "#333"
},
itemStyle: {
color: color
}
},
{
value: total - val,
//不需要显示的数据,颜色设置成和背景一样
itemStyle: {
color: '#F0F2F5'
}
}]
}]
}
myChart.setOption(option)
// 让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<div :id="id" :style="{height: this.height+'px', width: this.width+'px'}"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
let myChart= null
export default {
props: {
id: {
type: String
},
height: {
type: String | Number
},
width:{
type: String | Number,
},
datas: Object
},
data() {
return {
}
},
watch:{
datas: function(obj){
let arr= []
if(obj){
obj.dataList.map((item)=>{
let obj= {
name: '',
type: 'line',
emphasis: {
focus: 'series'
},
data: []
}
if(item){
obj.name= item.name
obj.data= item.data
arr.push(obj)
}
})
this.lineInit(obj.title, obj.legend, obj.xData, arr)
}
}
},
methods: {
lineInit(title, legend, xData, data) {
myChart = echarts.init(document.getElementById(this.id))
let option = {
title: {
text: title,
textStyle: {
fontSize: '14'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: legend
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xData
}
],
yAxis: [
{
type: 'value'
}
],
series: data
}
myChart.setOption(option)
// 让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<div :id="id" :style="{height: this.height+'px', width: this.width+'px'}"></div>
</div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts'
let myChart= null
export default {
props: {
id: {
type: String
},
height:{
type: String | Number,
},
width:{
type: String | Number,
},
datas: Object
},
data() {
return {
}
},
created(){
axios.get('/static/json/china.json').then((chinaJson)=>{
echarts.registerMap('china', chinaJson.data);
})
},
watch:{
datas: function(obj) {
if(obj){
this.mapInit(obj.title, obj.data)
}
}
},
methods: {
mapInit(name, data) {
myChart = echarts.init(document.getElementById(this.id))
let option = {
title: {
text: name,
textStyle: {
fontSize: '14'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
name: '中国',
type: 'map',
map: 'china',
label: {
show: false
},
data: data
}
]
}
// axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then((chinaJson)=>{
// console.log(chinaJson.data)
// echarts.registerMap('china', chinaJson.data);
// myChart.setOption(option)
// })
myChart.setOption(option)
// 让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<div :id="id" :style="{height: this.height+'px', width: this.width+'px'}"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
let myChart= null
export default {
props: {
id: {
type: String
},
height:{
type: String | Number,
},
width:{
type: String | Number,
},
datas: Object
},
data() {
return {
}
},
watch:{
datas: function(obj){
if(obj){
this.pieInit(obj.title, obj.type, obj.legend, obj.data)
}
}
},
methods: {
pieInit(name, type, legend, data) {
myChart = echarts.init(document.getElementById(this.id))
let option = {
title: {
text: name,
textStyle: {
fontSize: '14'
},
left: 'left'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: type,
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: legend
},
series: [
{
name: name,
type: 'pie',
radius: '45%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option)
// 让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<div :id="id" :style="{height: this.height+'px', width: this.width+'px'}"></div>
</div>
</template>
<script >
import * as echarts from 'echarts'
let myChart= null
export default {
props: {
id: {
type: String
},
height:{
type: String | Number,
},
width:{
type: String | Number,
},
datas: Object
},
data() {
return {
}
},
watch:{
datas: function(obj){
if(obj){
this.pieInit(obj.data)
}
}
},
methods: {
pieInit(data) {
myChart = echarts.init(document.getElementById(this.id))
let option = {
radar: {
// shape: 'circle',
indicator: [
{ name: '在线预约', max: 100 },
{ name: '现场取号', max: 100 },
{ name: '个人申报', max: 100 },
{ name: '评价次数', max: 100 },
{ name: '意见建议', max: 100 },
{ name: '办不成事', max: 100 }
]
},
series: [
{
type: 'radar',
data: data
}
]
};
myChart.setOption(option)
// 让图表跟随屏幕自动的去适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>
<a-card :bordered="false" class="mb_15">
<template slot="title">
<div class="head">
<div class="head_title">分析结果</div>
</div>
</template>
<a-row type="flex" align="middle">
<a-col :span="4">
<div class="f_40 f_center">{{ formState.name }}</div>
<div class="f_center">业务名称</div>
</a-col>
<a-col :span="10">
<a-form layout="horizontal" :model="formState" :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-item label="流水号:">{{ formState.flownum }}</a-form-item>
<a-form-item label="关联排号:">{{ formState.device_name }}</a-form-item>
<a-form-item label="受理区域:">
<a-tag v-for="(item, index) in formState.region" :key="index">{{ item }}</a-tag>
</a-form-item>
<a-form-item label="是否延时:">{{ formState.isweek_work ? '是' : '否' }}</a-form-item>
<a-form-item label="优先叫号:">{{ formState.first ? '是' : '否' }}</a-form-item>
</a-form>
</a-col>
<a-col :span="10">
<a-form layout="horizontal" :model="formState" :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-item label="业务级别:">{{ formState.level }}</a-form-item>
<a-form-item label="父级业务:">{{ formState.parent_name }}</a-form-item>
<a-form-item label="关联事项:">
<a-tag v-for="(item, index) in formState.matter" :key="index">{{ item.matterName }}</a-tag>
</a-form-item>
<a-form-item label="是否预约:">{{ formState.canorder ? '允许' : '不允许'}}</a-form-item>
<a-form-item label="验证方式:">{{ }}</a-form-item>
</a-form>
</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>
</template>
<template #extra>
<a-select
ref="select"
v-model:value="useNumber"
:options="options"
style="width: 120px"
@change="handleChange"
>
</a-select>
</template>
<LineChart
:id="`one_line`"
:datas="lineData"
:height="200"
:width="1700"
/>
</a-card>
</div>
</template>
<script >
import axios from 'axios'
import LineChart from "../Component/line/index.vue";
export default {
components:{
LineChart
},
props:{
},
data(){
return{
options:[
{
value: '0',
label: '今天',
},
{
value: '1',
label: '近7日',
},
{
value: '2',
label: '近30日',
},
{
value: '3',
label: '近3个月',
},
{
value: '4',
label: '本年度',
},
],
lineData: {},
useNumber: '0',
checkName: '',
formState: {}
}
},
mounted(){
// this.getAnalysisData()
},
watch:{
'$route.query': {
immediate: true,
handler(newVal, oldVal){
this.checkName= newVal
this.getAnalysisData(newVal.name)
}
}
},
methods: {
async getAnalysisData(name, val) {
if(val == undefined) {
val= 0
}
await axios.get('http://192.168.0.98:8090/inter/statistic/busInfoById',{ params: {bus_name: name, selected: val }}).then((res)=>{
if(res && res.status == 200){
this.formState= res.data.data
console.log(this.formState)
}
})
},
handleChange(val){
this.getAnalysisData(this.checkName, val)
}
},
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item{
margin-bottom: 0
}
.head{
display: flex;
justify-content: flex-start;
align-items: center;
.head_title{
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
color: #0595FD;
margin-right: 1.25rem;
}
.head_desc{
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #888888;
}
}
.mb_15{
margin-bottom: .9375rem;
}
.f_40{
font-size: 2.5rem;
}
.f_center{
text-align: center;
}
</style>
\ No newline at end of file
<template>
<div>
<a-card :bordered="false" class="mb_15">
<template slot="title">
<div class="head">
<div class="head_title">整体情况</div>
<div class="head_desc">更新时间:{{ nowDate }}</div>
</div>
</template>
<a-row type="flex" align="middle">
<a-col :span="4">
<div class="f_40 f_center warning">{{ situation.lev1_nums }}</div>
<div class="f_center">一级业务总量</div>
</a-col>
<a-col :span="8">
<a-row type="flex" align="middle">
<a-col :span="12">
<div class="f_40 f_center success">{{ situation.lev1_not_child_nums }}</div>
<div class="f_center">一级业务(无子业务)</div>
</a-col>
<a-col :span="12">
<Pie
:id="`one_pie`"
:height=200
:width=200
:datas="firstPie"
/>
</a-col>
</a-row>
</a-col>
<a-col :span="12">
<a-row type="flex" align="middle">
<a-col :span="8">
<div class="f_40 f_center prima">{{ situation.lev1_has_child_nums }}</div>
<div class=" f_center">一级业务(有子业务)</div>
</a-col>
<a-col :span="8">
<div class="f_40 f_center prima">{{ situation.child_nums }}</div>
<div class=" f_center">子级业务</div>
</a-col>
<a-col :span="8">
<Pie
:id="`two_pie`"
:height=200
:width=200
:datas="secondPie"
/>
</a-col>
</a-row>
</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-col :span="4">
<a-row>
<a-col :span="12">
<div class="f_20 f_center success">{{ takeLineTotal }}</div>
<div class="f_center">排队业务总量</div>
</a-col>
<a-col :span="12">
<div class="f_20 f_center success">{{ noTakeLine }}</div>
<div class="f_center">未排队业务</div>
</a-col>
</a-row>
<Pie
:id="`three_pie`"
:height="200"
:width="280"
:datas="thirdPie"
/>
</a-col>
<a-col :span="20">
<div class="table_title">排队业务分布情况</div>
<a-table :row-key="record => record.key" :dataSource="lineUp" :columns="lineUpColumns" :pagination="false" :scroll="{ x: 1400, y: 0 }"/>
</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-col :span="4">
<a-row>
<a-col :span="12">
<div class="f_20 f_center success">{{ appointmentTotal }}</div>
<div class="f_center">预约业务总量</div>
</a-col>
<a-col :span="12">
<div class="f_20 f_center success">{{ noAppointment }}</div>
<div class="f_center">未预约业务</div>
</a-col>
</a-row>
<Pie
:id="`four_pie`"
:height="200"
:width="280"
:datas="fourthPie"
/>
</a-col>
<a-col :span="20">
<div>预约业务分布情况</div>
<a-table :row-key="record => record.id" :dataSource="appointment" :columns="appointmentColumns" :pagination="false" :scroll="{ x: 1400, y: 0 }"/>
</a-col>
</a-row>
</a-card>
<a-row>
<a-col :span="12">
<a-card :bordered="false" class="mb_15" style="margin-right: .625rem; min-height: 44.125rem">
<template slot="title">
<div class="head">
<div class="head_title">取号最多业务Top10</div>
</div>
</template>
<template #extra>
<a-select
ref="select"
v-model:value="takeNumberTopDate"
:options="options"
style="width: 120px"
@change="changeTakeNumberTopDate"
>
</a-select>
</template>
<a-table :row-key="record => record.index" :dataSource="takeNumberTop" :columns="takeNumberTopColumns" :pagination="false">
<span slot="index" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="nums" slot-scope="text, record, index" style="display: flex;">
<a-progress :percent="text" :showInfo="false" strokeColor="#87d068"/>
<div style="min-width: 3.125rem;text-align: right;">{{ text }}件</div>
</span>
</a-table>
</a-card>
</a-col>
<a-col :span="12">
<a-card :bordered="false" class="mb_15" style="margin-left: .625rem; min-height: 44.125rem">
<template slot="title">
<div class="head">
<div class="head_title">预约最多业务Top10</div>
</div>
</template>
<template #extra>
<a-select
ref="select"
v-model:value="appointmentTopDate"
:options="options"
style="width: 120px"
@change="changeAppointmentTopDate"
>
</a-select>
</template>
<a-table :row-key="record => record.index" :dataSource="appointmentTop" :columns="appointmentTopColumns" :pagination="false">
<span slot="index" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="nums" slot-scope="text, record, index" style="display: flex;">
<a-progress :percent="text" :showInfo="false" strokeColor="#87d068"/>
<div style="min-width: 3.125rem;text-align: right;">{{ text }}件</div>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-card :bordered="false" class="mb_15" style="margin-right: .625rem; min-height: 44.125rem">
<template slot="title">
<div class="head">
<div class="head_title">取号最少业务Top10</div>
</div>
</template>
<template #extra>
<a-select
ref="select"
v-model:value="takeNumberLessDate"
:options="options"
style="width: 120px"
@change="changeTakeNumberLessDate"
>
</a-select>
</template>
<a-table :row-key="record => record.index" :dataSource="takeNumberLess" :columns="takeNumberLessColumns" :pagination="false">
<span slot="index" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="nums" slot-scope="text, record, index" style="display: flex;">
<a-progress :percent="text" :showInfo="false" strokeColor="#87d068"/>
<div style="min-width: 3.125rem;text-align: right;">{{ text }}件</div>
</span>
</a-table>
</a-card>
</a-col>
<a-col :span="12">
<a-card :bordered="false" class="mb_15" style="margin-left: .625rem; min-height: 44.125rem">
<template slot="title">
<div class="head">
<div class="head_title">预约最少业务Top10</div>
</div>
</template>
<template #extra>
<a-select
ref="select"
v-model:value="appointmentLessDate"
:options="options"
style="width: 120px"
@change="changeAppointmentLessDate"
>
</a-select>
</template>
<a-table :row-key="record => record.index" :dataSource="appointmentLess" :columns="appointmentLessColumns" :pagination="false">
<span slot="index" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="nums" slot-scope="text, record, index" style="display: flex;">
<a-progress :percent="text" :showInfo="false" strokeColor="#87d068"/>
<div style="min-width: 3.125rem;text-align: right;">{{ text }}件</div>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script >
import Pie from "../Component/emptyPie/index.vue"
import axios from 'axios'
import moment from "moment"
export default {
components:{
Pie
},
data(){
return{
nowDate: '',
// 基本情况
situation: {},
// 第一个饼状图
firstPie: {},
// 第二个饼状图
secondPie: {},
// 第三个饼状图
thirdPie: {},
// 第四个饼状图
fourthPie: {},
takeLineTotal: '', // 排队业务总数
noTakeLine: '', // 未排队业务
appointmentTotal: '', // 预约业务总数
noAppointment: '', // 未预约业务
// 下拉框选项
options:[
{
value: '0',
label: '今天',
},
{
value: '1',
label: '近7日',
},
{
value: '2',
label: '近30日',
},
{
value: '3',
label: '近3个月',
},
{
value: '4',
label: '本年度',
},
],
// 排队表格数据
lineUp:[
{
key: '1',
info: '绑定一级业务数量',
title: '排队机名称',
},
{
key: '2',
info: '占比',
title: '排队机名称',
},
{
key: '3',
info: '绑定二级业务数量',
title: '排队机名称',
},
{
key: '4',
info: '占比',
title: '排队机名称',
},
],
// 排队表格列
lineUpColumns:[
{
key: 'key',
title: '排队机名称',
width: 200,
dataIndex: 'info',
fixed: 'left'
},
],
// 预约表格数据
appointment:[
{
key: '1',
info: '预约一级业务数量',
title: '排队机名称',
},
{
key: '2',
info: '占比',
title: '排队机名称',
},
{
key: '3',
info: '预约二级业务数量',
title: '排队机名称',
},
{
key: '4',
info: '占比',
title: '排队机名称',
},
],
// 预约表格列
appointmentColumns:[
{
key: 'key',
title: '排队机名称',
width: 200,
dataIndex: 'info',
fixed: 'left'
},
],
// 排队TOP
takeNumberTop:[],
// 排队TOP列
takeNumberTopColumns: [
{
key:'index',
title: '排名',
dataIndex: 'index',
scopedSlots: { customRender: 'index' },
},
{
key:'businessName',
title: '业务名称',
dataIndex: 'name',
},
{
key:'number',
title: '办理数量',
dataIndex: 'nums',
scopedSlots: { customRender: 'nums' },
},
],
// 预约TOP数据
appointmentTop:[],
// 预约TOP列
appointmentTopColumns: [
{
key:'index',
title: '排名',
dataIndex: 'index',
scopedSlots: { customRender: 'index' },
},
{
key:'businessName',
title: '业务名称',
dataIndex: 'name',
},
{
key:'number',
title: '办理数量',
dataIndex: 'nums',
scopedSlots: { customRender: 'nums' },
},
],
// 排队Less
takeNumberLess:[],
// 排队Less列
takeNumberLessColumns: [
{
key:'index',
title: '排名',
dataIndex: 'index',
scopedSlots: { customRender: 'index' },
},
{
key:'businessName',
title: '业务名称',
dataIndex: 'name',
},
{
key:'number',
title: '办理数量',
dataIndex: 'nums',
scopedSlots: { customRender: 'nums' },
},
],
// 预约Less数据
appointmentLess:[],
// 预约Less列
appointmentLessColumns: [
{
key:'index',
title: '排名',
dataIndex: 'index',
scopedSlots: { customRender: 'index' },
},
{
key:'businessName',
title: '业务名称',
dataIndex: 'name',
},
{
key:'number',
title: '办理数量',
dataIndex: 'nums',
scopedSlots: { customRender: 'nums' },
},
],
takeNumberTopDate: '0',
appointmentTopDate: '0',
takeNumberLessDate: '0',
appointmentLessDate: '0',
}
},
mounted(){
this.getAllData()
this.getTakeLineData()
this.getAppointmentData()
this.getTakeNumberTop()
this.getAppointmentTop()
this.getTakeNumberLess()
this.getAppointmentLess()
},
methods:{
//获取全部基本数据
async getAllData() {
this.nowDate= moment(new Date()).format('YYYY-MM-DD h:mm:ss')
await axios.get('http://192.168.0.98:8090/inter/statistic/allInfo',{ params: { siteid: '1' }}).then((res)=>{
if(res && res.status == 200){
this.situation= res.data.data
this.firstPie= {
name: '占比',
val: res.data.data.lev1_nums,
total: res.data.data.lev1_not_child_nums,
color: '#04CA8F'
}
this.secondPie= {
name: '占比',
val: res.data.data.lev1_has_child_nums,
total: res.data.data.child_nums,
color: '#6394f9'
}
}
})
},
// 排队取号
async getTakeLineData() {
await axios.get('http://192.168.0.98:8090/inter/statistic/businessInfo',{ params: { siteid: '1' }}).then((res)=>{
if(res && res.status == 200){
let arr= res.data.data.info
let newArr= []
arr.forEach((item ,index)=>{
let obj={
id: item.id,
dataIndex: item.id,
title: item.name,
}
newArr.push(obj)
this.lineUp[0][item.id]= item.lev1_nums
this.lineUp[1][item.id]= (item.lev1_rate * 100).toFixed(2) + '%'
this.lineUp[2][item.id]= item.lev2_nums
this.lineUp[3][item.id]= (item.lev2_rate * 100).toFixed(2) + '%'
})
this.lineUpColumns= [...this.lineUpColumns, ...newArr]
this.takeLineTotal=res.data.data.use_bus_nums
this.noTakeLine=res.data.data.not_use_bus_nums
this.thirdPie= {
name: '占比',
val: res.data.data.not_use_bus_nums,
total: res.data.data.use_bus_nums,
color: '#04CA8F'
}
}
})
},
// 预约情况
async getAppointmentData() {
await axios.get('http://192.168.0.98:8090/inter/statistic/wyInfo',{ params: { siteid: '1' }}).then((res)=>{
if(res && res.status == 200){
let arr= res.data.data.info
let newArr= []
arr.forEach((item ,index)=>{
let obj={
id: item.id,
dataIndex: item.id,
title: item.name,
}
newArr.push(obj)
this.appointment[0][item.id]= item.lev1_nums
this.appointment[1][item.id]= (item.lev1_rate * 100).toFixed(2) + '%'
this.appointment[2][item.id]= item.lev2_nums
this.appointment[3][item.id]= (item.lev2_rate * 100).toFixed(2) + '%'
})
this.appointmentColumns= [...this.appointmentColumns, ...newArr]
this.appointmentTotal=res.data.data.use_bus_nums
this.noAppointment=res.data.data.not_use_bus_nums
this.fourthPie= {
name: '占比',
val: res.data.data.not_use_bus_nums,
total: res.data.data.use_bus_nums,
color: '#04CA8F'
}
}
})
},
// 取号TOP
async getTakeNumberTop(val){
if(val== undefined){
val = 0
}
await axios.get('http://192.168.0.98:8090/inter/statistic/topBusiness',{ params: { siteid: '1', selected: val, sort: 'DESC' }}).then((res)=>{
if(res && res.status == 200) {
this.takeNumberTop= res.data.data
}
})
},
// 取号Less
async getTakeNumberLess(val){
if(val== undefined){
val = 0
}
await axios.get('http://192.168.0.98:8090/inter/statistic/topBusiness',{ params: { siteid: '1', selected: val, sort: 'ASC' }}).then((res)=>{
if(res && res.status == 200) {
this.takeNumberLess= res.data.data
}
})
},
// 预约TOP
async getAppointmentTop(val){
if(val== undefined){
val = 0
}
await axios.get('http://192.168.0.98:8090/inter/statistic/topWy',{ params: { siteid: '1', selected: val, sort: 'DESC' }}).then((res)=>{
if(res && res.status == 200) {
this.appointmentTop= res.data.data
}
})
},
// 预约LESS
async getAppointmentLess(val){
if(val== undefined){
val = 0
}
await axios.get('http://192.168.0.98:8090/inter/statistic/topWy',{ params: { siteid: '1', selected: val, sort: 'ASC' }}).then((res)=>{
if(res && res.status == 200) {
this.appointmentLess= res.data.data
}
})
},
changeTakeNumberTopDate(val){
this.getTakeNumberTop(val)
},
changeAppointmentTopDate(val){
this.getAppointmentTop(val)
},
changeTakeNumberLessDate(val){
this.getTakeNumberLess(val)
},
changeAppointmentLessDate(val){
this.getAppointmentLess(val)
},
}
}
</script>
<style scoped lang="less">
.head{
display: flex;
justify-content: flex-start;
align-items: center;
.head_title{
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
color: #0595FD;
margin-right: 1.25rem;
}
.head_desc{
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #888888;
}
}
/deep/ .ant-table{
width: 100% !important;
}
.table_title{
color: #333;
font-weight: 700;
font-style: normal;
font-size: .875rem;
margin-bottom: .625rem;
}
.f_20{
font-size: 1.25rem;
}
.f_40{
font-size: 2.5rem;
}
.f_center{
text-align: center;
}
.warning{
color: #FD6805
}
.primary{
color: #0595FD
}
.success{
color: #04CA8F
}
.h_200{
height: 12.5rem;
}
.mb_15{
margin-bottom: .9375rem;
}
</style>
\ No newline at end of file
<template>
<div>
<a-breadcrumb separator=" > " class="bread">
<a-breadcrumb-item v-for="(item) in breadArr" :key="item.path">
<span>{{ item.title }}</span>
<!-- <router-link :to="{ path: item.path}">{{ item.title }}</router-link> -->
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
<script>
export default {
data(){
return{
// 面包屑导航
breadArr: []
}
},
mounted(){
this.filterBread()
},
methods:{
// 面包屑
filterBread(){
let newArr= []
this.$route.matched.forEach(item=>{
if(item.path!= ''){
newArr.push({
path:item.path,
title:item.meta.title
})
}
})
this.breadArr= newArr
},
}
}
</script>
<style scoped>
.bread{
height: 2.8125rem;
line-height: 2.8125rem;
}
</style>
\ No newline at end of file
<template>
<div class="Container">
<div class="main">
<div class="first_card">
<div class="breadMenu">
<Breadcrumb/>
</div>
<div class="searchBox">
<a-auto-complete
v-model="businessName"
:data-source="dataSource"
optionLabelProp="value"
style="width: 35.625rem"
placeholder="请输入业务名称搜索"
@select="onSelect"
@search="onSearch"
/>
<a-button type="primary" @click="startAnalysis">开始分析</a-button>
<a-button type="primary" v-if="btnShow" @click="backBase">返回</a-button>
</div>
</div>
<div class="content_view">
<router-view />
</div>
</div>
</div>
</template>
<script>
import _ from 'lodash'
import axios from 'axios'
import Breadcrumb from "./breadcrumb/index.vue";
export default {
components:{
Breadcrumb
},
data() {
return {
// 搜索框
businessName: '',
dataSource: [],
dataList: [],
btnShow: false,
}
},
mounted() {
this.getList()
},
methods:{
startAnalysis() {
if(!this.businessName){
this.$message.error('请输入业务名称搜索')
}else{
this.$router.push({ path: 'analysiscontent', query:{name: this.businessName}})
this.btnShow= true
}
},
backBase() {
this.$router.push({ path: 'basecontent'})
this.btnShow= false
this.businessName= ''
},
async getList(){
await axios.get('http://192.168.0.98:8090/inter/statistic/busList',{params: {siteid: 1}}).then((res)=>{
if(res && res.status==200){
res.data.data.forEach(item=>{
this.dataList.push(item.name)
})
}
})
},
onSearch: _.debounce(function(val){
this.dataSource= []
this.dataList.forEach(item=>{
if(item.indexOf(val) !== -1){
this.dataSource.push(item)
}
})
}, 1000),
onSelect(val){
this.businessName= val
}
}
}
</script>
<style lang="less" scoped>
@headerH: 4.5rem;
.Container {
height: 100% !important;
// background: #fac;
background: #f5f5f5;
display: flex;
flex-direction: column;
.main {
// background: #afc;
border-radius: 6px;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
&::before {
content: "";
display: block;
width: 100%;
height: @headerH;
background: rgb(59, 135, 255);
background: -moz-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: -webkit-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff",endColorstr="#6c35f7",GradientType=1);
}
/deep/.ant-tabs-nav {
.ant-tabs-tab {
margin: 0 !important;
}
}
/deep/.ant-tabs-tab {
font-size: 1rem !important;
& + .ant-tabs-tab {
margin: 0 !important;
margin-left: 0.7rem !important;
}
}
/deep/.ant-tabs-bar{
margin: 0;
}
}
.first_card{
background: #FFF;
margin-bottom: .9375rem;
}
.breadMenu{
height: 2.8125rem;
line-height: 2.8125rem;
padding: 0 5rem;
border-bottom: 1px solid rgba(226, 226, 226, 1);
}
.searchBox{
height: 6.25rem;
display: flex;
justify-content: center;
align-items: center;
}
.content_view{
padding: 0 5rem;
}
</style>
\ No newline at end of file
<template>
<div>
<a-breadcrumb separator=" > " class="bread">
<a-breadcrumb-item v-for="(item) in breadArr" :key="item.path">
<span>{{ item.title }}</span>
<!-- <router-link :to="{ path: item.path}">{{ item.title }}</router-link> -->
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
<script>
export default {
data(){
return{
// 面包屑导航
breadArr: []
}
},
mounted(){
this.filterBread()
},
methods:{
// 面包屑
filterBread(){
let newArr= []
this.$route.matched.forEach(item=>{
if(item.path!= ''){
newArr.push({
path:item.path,
title:item.meta.title
})
}
})
this.breadArr= newArr
},
}
}
</script>
<style scoped>
.bread{
height: 2.8125rem;
line-height: 2.8125rem;
}
</style>
\ No newline at end of file
<template>
<div class="Container">
<div class="main">
<div class="first_card">
<div class="breadMenu">
<Breadcrumb/>
</div>
<div class="searchBox">
<a-input v-model="peopleName" placeholder="请输入群众名称搜索" style="width: 35.625rem"></a-input>
<a-button type="primary" @click="startAnalysis()">开始分析</a-button>
<a-button type="primary" v-if="btnShow" @click="backBase()">返回</a-button>
</div>
</div>
<div class="content_view">
<router-view />
</div>
</div>
</div>
</template>
<script>
import Breadcrumb from "./breadcrumb/index.vue";
export default {
components:{
Breadcrumb
},
data() {
return {
// 搜索框
peopleName: '',
btnShow: false,
}
},
methods:{
startAnalysis() {
this.peopleName= ''
this.$router.push({ path: 'portrayalAnalysis'})
this.btnShow= true
},
backBase() {
this.peopleName= ''
this.$router.push({ path: 'portrayalBase'})
this.btnShow= false
},
}
}
</script>
<style lang="less" scoped>
@headerH: 4.5rem;
.Container {
height: 100% !important;
// background: #fac;
background: #f5f5f5;
display: flex;
flex-direction: column;
.main {
// background: #afc;
border-radius: 6px;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
&::before {
content: "";
display: block;
width: 100%;
height: @headerH;
background: rgb(59, 135, 255);
background: -moz-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: -webkit-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff",endColorstr="#6c35f7",GradientType=1);
}
/deep/.ant-tabs-nav {
.ant-tabs-tab {
margin: 0 !important;
}
}
/deep/.ant-tabs-tab {
font-size: 1rem !important;
& + .ant-tabs-tab {
margin: 0 !important;
margin-left: 0.7rem !important;
}
}
/deep/.ant-tabs-bar{
margin: 0;
}
}
.first_card{
background: #FFF;
margin-bottom: .9375rem;
}
.breadMenu{
height: 2.8125rem;
line-height: 2.8125rem;
padding: 0 5rem;
border-bottom: 1px solid rgba(226, 226, 226, 1);
}
.searchBox{
height: 6.25rem;
display: flex;
justify-content: center;
align-items: center;
}
.content_view{
padding: 0 5rem;
}
</style>
\ No newline at end of file
<template>
<div>
<a-card :bordered="false" class="mb_15">
<template slot="title">
<div class="head">
<div class="head_title">分析结果</div>
</div>
</template>
<a-row>
<a-col :span="8">
<div class="inside_card">
<div class="head_title mb_15">用户信息</div>
<a-form layout="horizontal" :model="formState" :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-item label="openID:">{{ formState.openId }}</a-form-item>
<a-form-item label="微信昵称:">{{ formState.name }}</a-form-item>
<a-form-item label="城市:">{{ formState.city }}</a-form-item>
<a-form-item label="联系电话:">{{ formState.phone }}</a-form-item>
<a-form-item label="身份证号:">{{ formState.ID }}</a-form-item>
<a-form-item label="注册时间:">{{ formState.registerTime }}</a-form-item>
<a-form-item label="注册来源:">{{ formState.source }}</a-form-item>
<a-form-item label="户籍地址:">{{ formState.address }}</a-form-item>
</a-form>
</div>
<div class="inside_card">
<div class="head_title mb_15">关键数据</div>
<a-form layout="horizontal" :model="formState" :label-col="{span: 4}" :wrapper-col="{span: 20}">
<a-form-item label="预约最多:">{{ formState.appointment.name }}({{ formState.appointment.value }})</a-form-item>
<a-form-item label="取号最多:">{{ formState.appointment.name }}({{ formState.appointment.value }})</a-form-item>
<a-form-item label="申报最多:">{{ formState.appointment.name }}({{ formState.appointment.value }})</a-form-item>
<a-form-item label="小程序最多:">{{ formState.appointment.name }}({{ formState.appointment.value }})</a-form-item>
</a-form>
<div class="evaluate_box">
<div class="good_box">
<div class="good_title">{{ formState.good.value }}({{ formState.good.percent }}%)</div>
<div class="good_desc">好评次数</div>
</div>
<div class="bad_box">
<div class="bad_title">{{ formState.bad.value }}({{ formState.bad.percent }}%)</div>
<div class="bad_desc">差评次数</div>
</div>
</div>
</div>
</a-col>
<a-col :span="8" class="f_center">
<img src="http://sy.scsmile.cn/YX-4.0/03-02YHHXTP/images/%E7%BE%A4%E4%BC%97%E5%88%86%E6%9E%90/u1433.png" alt="" style="height: 31.25rem">
<div class="information">
<div class="info_name">
神奇小伙<a-tag color="green" class="info_tag">实名认证</a-tag>
</div>
<a-row>
<a-col :span="8">年龄:18</a-col>
<a-col :span="8">性别:未知</a-col>
<a-col :span="8">民族:氪族</a-col>
</a-row>
<div>点击查看区块链信息</div>
</div>
</a-col>
<a-col :span="8">
<div class="inside_card">
<Radar
:id="`radar`"
:height="350"
:width="500"
:datas="radarData"
/>
</div>
<div>
</div>
</a-col>
</a-row>
</a-card>
</div>
</template>
<script >
import Radar from "../../business/Component/radar/index.vue";
export default {
components: {
Radar
},
data(){
return{
options:[
{
value: '0',
label: '今天',
},
{
value: '1',
label: '近7日',
},
{
value: '2',
label: '近30日',
},
{
value: '3',
label: '近3个月',
},
{
value: '4',
label: '本年度',
},
],
radarData: {},
useNumber: '0',
formState: {
openId: '4568782121245',
name: '张张那个张',
city: '四川省成都市',
phone: '13088088888',
ID: '513822199302034567',
registerTime: '2023-03-01 10:00:00',
source: '排队叫号系统',
address: '四川省宜宾市叙州区林南路23号',
appointment: {name: '机动车违章业务办理', value: '25'},
good: {value: '36', percent: '20'},
bad: {value: '2', percent: '10'}
}
}
},
mounted(){
this.getRadarData()
},
methods: {
handleChange() {},
getRadarData() {
this.radarData= {
data: [
{
value: [42, 30, 20, 35, 50, 18],
name: '偏好',
areaStyle: {
color: '#a6c5fc'
}
},
]
}
}
},
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item{
margin-bottom: 0
}
.head{
display: flex;
justify-content: flex-start;
align-items: center;
}
.head_title{
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
color: #0595FD;
margin-right: 1.25rem;
}
.head_desc{
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #888888;
}
.inside_card{
background: #f3faff;
margin: .9375rem;
padding: .9375rem;
}
.evaluate_box{
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 1.25rem;
}
.good_box{
width: 10rem;
background: #d0f3ee;
text-align: center;
padding: .9375rem;
.good_title{
font-size: 1.25rem;
font-weight: 400;
font-style: normal;
color: #04CA8F;
margin-bottom: .625rem;
}
.good_desc{
font-size: .875rem;
font-weight: 400;
font-style: normal;
color: #04CA8F;
}
}
.bad_box{
width: 10rem;
background: #f5e3e7;
text-align: center;
padding: .9375rem;
.bad_title{
font-size: 1.25rem;
font-weight: 400;
font-style: normal;
color: #FF5F5F;
margin-bottom: .625rem;
}
.bad_desc{
font-size: .875rem;
font-weight: 400;
font-style: normal;
color: #FF5F5F;
}
}
.information{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
height: 200px;
}
.info_name{
position: relative;
font-size: 2.5rem;
}
.info_tag{
position: absolute;
top: .9375rem;
margin-left: .9375rem;
}
.mb_15{
margin-bottom: .9375rem;
}
.f_40{
font-size: 2.5rem;
}
.f_center{
text-align: center;
}
</style>
\ No newline at end of file
<template>
<div>
<a-card :bordered="false" class="mb_15">
<template slot="title">
<div class="head">
<div class="head_title">整体情况</div>
<div class="head_desc">更新时间:{{ nowDate }}</div>
</div>
</template>
<a-row type="flex" align="middle">
<a-col :span="4">
<div class="f_40 f_center warning">111</div>
<div class="f_center">群众注册总量</div>
<div class="f_center primary" @click="toTable">点击查看报表</div>
</a-col>
<a-col :span="20">
<lineChart
:id="`one_line`"
:title="`近30日注册情况分析`"
:datas="oneLineData"
:height="200"
:width="1420"/>
</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>
<a-col :span="8">
<map-chart
:id="`one_map`"
:datas="oneMapData"
:height="400"
:width="550"
/>
</a-col>
<a-col :span="8">
<a-table
:row-key="record => record.ranking" :dataSource="provinces" :columns="provincesColumns" :pagination="false">
</a-table>
</a-col>
<a-col :span="8">
<pieChart
:id="`one_pie`"
:height="400"
:width="550"
:datas="onePieData"
/>
</a-col>
<a-col :span="12">
<doublePieChart
:id="`two_pie`"
:height="300"
:width="800"
:datas="twoPieData"
/>
</a-col>
<a-col :span="12">
<barChart
:id="`one_bar`"
:height="300"
:width="800"
:datas="oneBarData"
/>
</a-col>
<a-col :span="12">
<barChart
:id="`two_bar`"
:height="300"
:width="800"
:datas="twoBarData"
/>
</a-col>
<a-col :span="12">
<pieChart
:id="`three_pie`"
:height="300"
:width="800"
:datas="threePieData"
/>
</a-col>
<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="oneMapData"
:height="400"
:width="550"
/>
</a-col>
<a-col :span="8">
<a-table
:row-key="record => record.ranking" :dataSource="provinces" :columns="provincesColumns" :pagination="false">
</a-table>
</a-col>
<a-col :span="8">
<pieChart
:id="`four_pie`"
:height="400"
:width="550"
:datas="onePieData"
/>
</a-col>
<a-col :span="12">
<doublePieChart
:id="`five_pie`"
:height="300"
:width="800"
:datas="twoPieData"
/>
</a-col>
<a-col :span="12">
<barChart
:id="`six_bar`"
:height="300"
:width="800"
:datas="oneBarData"
/>
</a-col>
<a-col :span="12">
<barChart
:id="`three_bar`"
:height="300"
:width="800"
:datas="twoBarData"
/>
</a-col>
<a-col :span="12">
<pieChart
:id="`six_pie`"
:height="300"
:width="800"
:datas="threePieData"
/>
</a-col>
<a-col :span="12">
</a-col>
<a-col :span="12">
</a-col>
</a-row>
</a-row>
</a-card>
</div>
</template>
<script >
import barChart from '../../business/Component/bar/index.vue'
import doublePieChart from "../../business/Component/doublePie/index.vue"
import pieChart from "../../business/Component/pie/index.vue"
import lineChart from "../../business/Component/line/index.vue"
import mapChart from "../../business/Component/map/index.vue"
import moment from "moment"
export default {
components:{
mapChart, pieChart, lineChart, doublePieChart, barChart
},
data(){
return{
options:[
{
value: '0',
label: '今天',
},
{
value: '1',
label: '近7日',
},
{
value: '2',
label: '近30日',
},
{
value: '3',
label: '近3个月',
},
{
value: '4',
label: '本年度',
},
],
oneLineData: {},
oneMapData: {},
onePieData: {},
twoPieData: {},
oneBarData: {},
twoBarData: {},
threePieData: {},
provinces: [
{
ranking: 1,
province: '四川省',
people: '999',
percent: '2'
},
{
ranking: 2,
province: '四川省',
people: '999',
percent: '2'
},
],
provincesColumns: [
{
key:'ranking',
title: '序号',
dataIndex: 'ranking',
},
{
key:'province',
title: '省份',
dataIndex: 'province',
},
{
key:'people',
title: '注册人数',
dataIndex: 'people',
},
{
key:'percent',
title: '注册占比',
dataIndex: 'percent',
},
],
takeNumber: '0',
nowDate: ''
}
},
mounted(){
this.test()
},
methods:{
handleChange(){},
toTable(){
this.$router.push({path:'register'})
},
test(){
this.nowDate= moment(new Date()).format('YYYY-MM-DD h:mm:ss')
this.oneLineData= {
title: '近30日注册情况分析:',
legend: ['自助服务系统注册人数','微官网注册人数','排队系统注册人数'],
xData: ['3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
dataList: [
{name: '自助服务系统注册人数', data: [120, 132, 101, 134, 90, 230, 210]},
{name: '微官网注册人数', data: [220, 182, 191, 234, 290, 330, 310]},
{name: '排队系统注册人数', data: [150, 232, 201, 154, 190, 330, 410]},
]
}
this.oneMapData={
title: "注册用户地域分析",
data:[
{ name: '四川省', value: 20057.34 },
{ name: '广东省', value: 15477.48 },
{ name: '福建省', value: 31686.1 },
{ name: '河北省', value: 6992.6 },
{ name: '河南省', value: 44045.49 },
{ name: '江苏省', value: 40689.64 },
]
}
this.onePieData={
title: '',
type: 'scroll',
legend: ['四川省', '广东省', '福建省','河北省','河南省','江苏省',],
data: [
{ name: '四川省', value: 20057.34 },
{ name: '广东省', value: 15477.48 },
{ name: '福建省', value: 31686.1 },
{ name: '河北省', value: 6992.6 },
{ name: '河南省', value: 44045.49 },
{ name: '江苏省', value: 40689.64 },
]
}
this.twoPieData={
title: '本地人与外地人注册分布',
pieName: '分布详情',
firstName: '宜宾市本地人注册占比',
firstVal: '1',
firstTotal: '10',
secondName: '外地人注册占比',
secondVal: '1',
secondTotal: '10',
}
this.oneBarData={
title: '性别分布',
xData: ['', ''],
data: [
{name: '自助服务系统注册人数', type: 'bar' ,data: [150, 232, 201, 154, 190, 330, 410]},
{name: '微官网注册人数', type: 'bar' ,data: [220, 182, 191, 234, 290, 330, 310]},
{name: '排队系统注册人数', type: 'bar' ,data: [120, 132, 101, 134, 90, 230, 210]},
]
}
this.twoBarData= {
title: '年龄分布',
xData: ['1-10', '10-20', '20-30', '30-40', '40-50'],
data: [
{name: '办理次数', type: 'bar' ,data: [150, 232, 201, 154, 190, 330, 410]},
{name: '占比', type: 'line' ,data: [220, 182, 191, 234, 290, 330, 310]},
]
}
this.threePieData={
title: '民族分布',
type: '',
legend: ['四川省', '广东省', '福建省','河北省','河南省','江苏省',],
data: [
{ name: '四川省', value: 20057.34 },
{ name: '广东省', value: 15477.48 },
{ name: '福建省', value: 31686.1 },
{ name: '河北省', value: 6992.6 },
{ name: '河南省', value: 44045.49 },
{ name: '江苏省', value: 40689.64 },
]
}
}
}
}
</script>
<style scoped lang="less">
.head{
display: flex;
justify-content: flex-start;
align-items: center;
.head_title{
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
color: #0595FD;
margin-right: 1.25rem;
}
.head_desc{
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #888888;
}
}
/deep/ .ant-table{
width: 100% !important;
}
.f_20{
font-size: 1.25rem;
}
.f_40{
font-size: 2.5rem;
}
.f_center{
text-align: center;
}
.warning{
color: #FD6805
}
.primary{
color: #0595FD
}
.success{
color: #04CA8F
}
.h_200{
height: 12.5rem;
}
.mb_15{
margin-bottom: .9375rem;
}
</style>
\ No newline at end of file
<template>
<div class="Container">
<div class="main">
<div class="first_card">
<div class="breadMenu">
<Breadcrumb/>
</div>
</div>
<div class="content_view">
<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>
<template #extra>
<a-button @click="">返回</a-button>
</template>
<div style="display: flex;justify-content: space-between;align-items: center;">
<a-button type="primary">导出</a-button>
<diV>
<a-form layout="inline" :model="seacrhForm">
<a-form-item>
<a-select v-model="selectVal" :options="options"></a-select>
</a-form-item>
<a-form-item>
<a-range-picker :locale="locale"/>
</a-form-item>
<a-form-item>
<a-input placeholder="请输入昵称关键字查询" />
</a-form-item>
<a-form-item>
<a-button type="primary">搜索</a-button>
</a-form-item>
</a-form>
</diV>
</div>
<a-table
:rowSelection="rowSelection"
:dataSource="peopleList"
:columns="peopleListColumns">
</a-table>
</a-card>
</div>
</div>
</div>
</template>
<script >
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import Breadcrumb from "../breadcrumb/index.vue";
export default {
components:{
Breadcrumb
},
data(){
return{
locale,
selectVal: 'all',
options:[
{
value: 'all',
label: '全部',
},
{
value: 'yes',
label: '实名认证',
},
{
value: 'no',
label: '未实名认证',
},
],
seacrhForm: {},
rowSelection: {},
peopleList: [],
peopleListColumns: [
{
key:'',
dataIndex: '',
title: '序号',
align: 'center',
width: 100,
fixed: 'left'
},
{
key:'',
dataIndex: '',
title: '真实姓名',
align: 'center',
width: 100,
fixed: 'left'
},
{
key:'',
dataIndex: '',
title: '注册来源',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '身份证号',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '手机号码',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '性别',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '民族',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '户籍地址',
align: 'center',
},
{
key:'',
dataIndex: '',
title: 'openID',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '普通用户昵称',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '普通用户城市',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '用户头像',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '授权时间',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '是否实名认证',
align: 'center',
},
{
key:'',
dataIndex: '',
title: '操作',
align: 'center',
width: 200,
fixed: 'right'
},
]
}
},
methods:{
}
}
</script>
<style lang="less" scoped>
@headerH: 4.5rem;
.Container {
height: 100% !important;
// background: #fac;
background: #f5f5f5;
display: flex;
flex-direction: column;
.main {
// background: #afc;
border-radius: 6px;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
&::before {
content: "";
display: block;
width: 100%;
height: @headerH;
background: rgb(59, 135, 255);
background: -moz-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: -webkit-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff",endColorstr="#6c35f7",GradientType=1);
}
/deep/.ant-tabs-nav {
.ant-tabs-tab {
margin: 0 !important;
}
}
/deep/.ant-tabs-tab {
font-size: 1rem !important;
& + .ant-tabs-tab {
margin: 0 !important;
margin-left: 0.7rem !important;
}
}
/deep/.ant-tabs-bar{
margin: 0;
}
}
/deep/ .ant-table{
width: 100% !important;
}
.first_card{
background: #FFF;
margin-bottom: .9375rem;
}
.breadMenu{
height: 2.8125rem;
line-height: 2.8125rem;
padding: 0 5rem;
border-bottom: 1px solid rgba(226, 226, 226, 1);
}
.searchBox{
height: 6.25rem;
display: flex;
justify-content: center;
align-items: center;
}
.content_view{
padding: 0 5rem;
}
.head{
display: flex;
justify-content: flex-start;
align-items: center;
.head_title{
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
color: #0595FD;
margin-right: 1.25rem;
}
.head_desc{
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #888888;
}
}
</style>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
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