Skip to content

X
xichonght
Commit 95d85e2a authored by zouliang's avatar zouliang
Browse files
Options

业务统计图

parent c4e44c70
Show whitespace changes
Inline Side-by-side
Showing with 2689 additions and 3017 deletions
xichongSys/package-lock.json
View file @ 95d85e2a
This source diff could not be displayed because it is too large. You can view the blob instead.
xichongSys/src/http/moudules/getlist.js
View file @ 95d85e2a
...@@ -201,3 +201,11 @@ export const selebjbfdc = (data) => { ...@@ -201,3 +201,11 @@ export const selebjbfdc = (data) => {
data data
}) })
}; };
//柱状图数据查询
export const selectchartInfo = (params) => {
return axios({
url: 'chart/selectchartInfo',
method: 'get',
params
})
};
xichongSys/src/main.js
View file @ 95d85e2a
...@@ -10,6 +10,8 @@ import 'element-ui/lib/theme-chalk/index.css' ...@@ -10,6 +10,8 @@ import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css' import 'font-awesome/css/font-awesome.min.css'
import '@/assets/iconfont/iconfont.css' import '@/assets/iconfont/iconfont.css'
import getType from "@/utils/type.js" import getType from "@/utils/type.js"
import charts from 'echarts';
Vue.prototype.$echarts = charts
Vue.prototype.getType =getType.getType Vue.prototype.getType =getType.getType
Vue.prototype.regetType =getType.regetType Vue.prototype.regetType =getType.regetType
......
xichongSys/src/views/Intro/Intro.vue
View file @ 95d85e2a
<template> <template>
<div class="page-container" style="width:99%;margin-top:150px;"> <el-carousel :interval="100000" type="card" class="carousel" height="70vh" >
<el-carousel :interval="3000" type="card" height="450px" class="carousel"> <el-carousel-item class="carousel-item-intro" style="width:85%; height:100%;position:absolute;left:-18%;">
<el-carousel-item class="carousel-item-intro"> <div class="ddiv1">
<div class="div1" id="echartContainer1">
</div>
<div class="nextpage">
<p style="display:none">{{count}}</p>
<el-button class="gopagediv1" @click="goPageClick1"> 上一页</el-button>
<el-button class="gopagediv1" @click="nextPageClick1"> 下一页</el-button>
</div>
</div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item class="carousel-item-func"> <el-carousel-item class="carousel-item-func" style="width:85%;height:100%;position:absolute;left:-18%">
<div class="ddiv2">
<div class="div2" id="echartContainer2" ></div>
</div>
<div class="nextpage">
</div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item class="carousel-item-env"> <el-carousel-item class="carousel-item-env" style="width:85%;height:100%;position:absolute;left:-18%;">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div>
</template> </template>
<script> <script>
var echarts = require('echarts');
export default { export default {
components:{ components:{
}, },
methods :{ data () {
return {
echartzz:{
title : {
text: '业务详情统计',
x:'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
x:'center',
top:'10%',
data: ['参保登记', '信息变更','待遇申请','参保注销','补缴保费','升档改办','关系转移']
},
grid: {
top: '30%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
name:'乡镇名称',
data: []
},
series: [
{
name: '参保登记',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '信息变更',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '待遇申请',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '参保注销',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '补缴保费',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '升档改办',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '关系转移',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
]
},
count: 1,
chartdata:{
chartnum:'',
chartsize:'',
},
total:'',
echartrz:{
title : {
text: '认证统计',
x:'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
x:'center',
top:'10%',
data: ['已认证', '未认证','认证比例']
},
grid: {
top: '30%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
name:'乡镇名称',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
series: [
{
name: '已认证',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '未认证',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '认证比例',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [0.56, 0.35, 0.91, 0.34, 0.9, 0.3, 0.31]
},
]
},
} }
},
mounted(){
sessionStorage.setItem("lj",JSON.stringify(this.echartzz));
this.chartinfo();
this.chart11();
},
methods:{
chart11(){
},
chartinfo(){
this.$api.getlist.selectchartInfo(this.chartdata).then((res) => {
res.data.result = res.data.result.reverse();
for (var i = 0; i < res.data.result.length; i++) {
this.echartzz.yAxis.data.push(res.data.result[i].name+" ");
this.echartzz.series[0].data.push(res.data.result[i].t1);
this.echartzz.series[1].data.push(res.data.result[i].t2);
this.echartzz.series[2].data.push(res.data.result[i].t3);
this.echartzz.series[3].data.push(res.data.result[i].t4);
this.echartzz.series[4].data.push(res.data.result[i].t5);
this.echartzz.series[5].data.push(res.data.result[i].t6);
this.echartzz.series[6].data.push(res.data.result[i].t7);
}
this.total = res.data.pagetotal;
let myChart1 = echarts.init(document.getElementById('echartContainer1'));
myChart1.setOption(this.echartzz);
/* let myChart2 = echarts.init(document.getElementById('echartContainer2'));
myChart2.setOption(this.echartrz);*/
}).catch((res) => {
console.log('报错了');
});
},
nextPageClick1(){
this.count++;
this.chartdata.chartnum = this.count;
this.chartdata.chartsize=10;
console.log(this.count);
if(this.total>(this.chartdata.chartnum-1)*this.chartdata.chartsize){
this.echartzz=JSON.parse(sessionStorage.getItem("lj"));
this.chartinfo(this.chartdata);
}else {
alert('已经到最后一页了');
} }
},
goPageClick1(){
this.count--;
this.chartdata.chartnum = this.count;
this.chartdata.chartsize=10;
console.log(this.count);
if(this.count<1){
alert('已经第一页了');
}else{
this.echartzz=JSON.parse(sessionStorage.getItem("lj"));
this.chartinfo(this.chartdata);
}
}
},
}
</script> </script>
<style> <style>
.carousel {
padding-left: 20px;
padding-right: 20px;
margin-right: 20px;
}
.carousel h2 {
color: #475669;
font-size: 22px;
opacity: 1.75;
line-height: 100px;
margin: 0;
}
.carousel ul {
color: #475669;
font-size: 15px;
opacity: 1.75;
line-height: 40px;
margin: 0;
}
.carousel-item-intro h2 {
color: #ffffff;
font-size: 22px;
opacity: 1.75;
line-height: 80px;
margin: 0;
}
.carousel-item-intro ul {
color: #ffffff;
font-size: 15px;
opacity: 1.75;
line-height: 65px;
padding: 5px;
margin: 0;
}
.carousel-item-func h2 {
color: #3f393b;
font-size: 22px;
opacity: 1.75;
line-height: 50px;
margin: 0;
}
.carousel-item-func ul {
color: #3f393b;
font-size: 15px;
opacity: 1.75;
line-height: 30px;
text-align: left;
padding-left: 90px;
margin: 0;
}
.carousel-item-env h2 {
color: #475669;
font-size: 22px;
opacity: 1.75;
line-height: 50px;
margin: 0;
}
.carousel-item-env ul {
color: #475669;
font-size: 15px;
opacity: 1.75;
line-height: 35px;
text-align: left;
padding-left: 110px;
margin: 0;
}
.carousel-item-intro { .carousel-item-intro {
background-color: #19aaaf73; background-color: #EFF3F4;
-webkit-border-radius: 25px; -webkit-border-radius: 25px;
border-radius: 25px; border-radius: 25px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
...@@ -100,7 +304,7 @@ ...@@ -100,7 +304,7 @@
box-shadow: 0 0 25px #a3b3b965; box-shadow: 0 0 25px #a3b3b965;
} }
.carousel-item-func { .carousel-item-func {
background-color: #19aaaf73; background-color: #52c578;
-webkit-border-radius: 25px; -webkit-border-radius: 25px;
border-radius: 25px; border-radius: 25px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
...@@ -108,20 +312,34 @@ ...@@ -108,20 +312,34 @@
box-shadow: 0 0 25px #a3b3b965; box-shadow: 0 0 25px #a3b3b965;
} }
.carousel-item-env { .carousel-item-env {
background-color: #19aaaf73; background-color: #41a7b9;
-webkit-border-radius: 25px; -webkit-border-radius: 25px;
border-radius: 25px; border-radius: 25px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
background-clip: padding-box; background-clip: padding-box;
box-shadow: 0 0 25px #a3b3b965; box-shadow: 0 0 25px #a3b3b965;
} }
.carousel-item-intro { .ddiv1{
background-color: #b95e5e; margin: auto;
width: 90%;
height: 90%;
} }
.carousel-item-func { .div1{
background-color: #52c578; width:70%;
height:65%;
margin-top: 5%;
} }
.carousel-item-env { .nextpage{
background-color: #41a7b9; }
.ddiv2{
margin: auto;
width: 90%;
height: 90%;
}
.div2{
width:70%;
height:65%;
margin-top: 5%;
} }
</style> </style>
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