Commit 887a41e7 authored by XXM's avatar XXM

数据精算1和2

parent 81ff4226
......@@ -93,7 +93,6 @@ export default {
this.menuListData = data.data;
this.menuTreeData = toTreeData(data.data, -1, "id", "parentId");
this.SET_menuList_X(deepClone(this.menuListData));
this.SET_menuTree_X(deepClone(this.menuTreeData));
......
......@@ -6,7 +6,7 @@ const routes = [
redirect: "/home/dataManagement",
component: () =>
import(/* webpackChunkName: "home" */ "@/views/home/home.vue"),
meta: { title: "首页" },
meta: { title: "政务一体化平台" },
children: [
{
path: "dataManagement",
......@@ -436,6 +436,75 @@ const routes = [
),
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",
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-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 diff is collapsed.
This diff is collapsed.
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