Skip to content

X
xichonght
Commit efc45309 authored by zhangdishen's avatar zhangdishen
Browse files
Options

Merge branch 'zl' into 'master' 

业务统计图

See merge request !54
parents c4e44c70 95d85e2a
Hide whitespace changes
Inline Side-by-side
Showing with 2689 additions and 3017 deletions
xichongSys/package-lock.json
View file @ efc45309
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 @ efc45309
......@@ -201,3 +201,11 @@ export const selebjbfdc = (data) => {
data
})
};
//柱状图数据查询
export const selectchartInfo = (params) => {
return axios({
url: 'chart/selectchartInfo',
method: 'get',
params
})
};
xichongSys/src/main.js
View file @ efc45309
......@@ -10,6 +10,8 @@ import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css'
import '@/assets/iconfont/iconfont.css'
import getType from "@/utils/type.js"
import charts from 'echarts';
Vue.prototype.$echarts = charts
Vue.prototype.getType =getType.getType
Vue.prototype.regetType =getType.regetType
......@@ -25,4 +27,4 @@ new Vue({
router,
store,
render: h => h(App)
});
\ No newline at end of file
});
xichongSys/src/views/Intro/Intro.vue
View file @ efc45309
<template>
<div class="page-container" style="width:99%;margin-top:150px;">
<el-carousel :interval="3000" type="card" height="450px" class="carousel">
<el-carousel-item class="carousel-item-intro">
</el-carousel-item>
<el-carousel-item class="carousel-item-func">
</el-carousel-item>
<el-carousel-item class="carousel-item-env">
</el-carousel-item>
</el-carousel>
</div>
<el-carousel :interval="100000" type="card" class="carousel" height="70vh" >
<el-carousel-item class="carousel-item-intro" style="width:85%; height:100%;position:absolute;left:-18%;">
<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 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 class="carousel-item-env" style="width:85%;height:100%;position:absolute;left:-18%;">
</el-carousel-item>
</el-carousel>
</template>
<script>
var echarts = require('echarts');
export default {
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>
<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 {
background-color: #19aaaf73;
background-color: #EFF3F4;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-border-radius: 15px;
......@@ -100,7 +304,7 @@
box-shadow: 0 0 25px #a3b3b965;
}
.carousel-item-func {
background-color: #19aaaf73;
background-color: #52c578;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-border-radius: 15px;
......@@ -108,20 +312,34 @@
box-shadow: 0 0 25px #a3b3b965;
}
.carousel-item-env {
background-color: #19aaaf73;
background-color: #41a7b9;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-border-radius: 15px;
background-clip: padding-box;
box-shadow: 0 0 25px #a3b3b965;
}
.carousel-item-intro {
background-color: #b95e5e;
.ddiv1{
margin: auto;
width: 90%;
height: 90%;
}
.carousel-item-func {
background-color: #52c578;
.div1{
width:70%;
height:65%;
margin-top: 5%;
}
.carousel-item-env {
background-color: #41a7b9;
.nextpage{
}
.ddiv2{
margin: auto;
width: 90%;
height: 90%;
}
.div2{
width:70%;
height:65%;
margin-top: 5%;
}
</style>
\ No newline at end of file
</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