123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315 |
- Vue.component('resident-analysis', {
- template: '<div>\
- <div class="div-qingkuang-left">\
- <div class="div-header-block">\
- <div class="div-analysis-title">缴费情况</div>\
- </div>\
- <div class="c-position-r height-140">\
- <div class="div-right-info">\
- <div class="y-amount c-f16">{{yiJiaoFeiData}}</div>\
- <div class="y-rate c-f14 mt5">{{yiJiaoFeiPer}}</div>\
- <div class="y-title c-f12 mt10">已缴费人数</div>\
- </div>\
- <div class="div-left-info">\
- <div class="y-amount c-f16">{{weiJiaoFeiData}}</div>\
- <div class="y-rate c-f14 mt5">{{weiJiaoFeiPer}}</div>\
- <div class="y-title c-f12 mt10">未缴费人数</div>\
- </div>\
- <div id="jiaoFeiChart" class="height-140"></div>\
- </div>\
- </div>\
- <div class="div-qingkuang-right">\
- <div class="div-header-block">\
- <div class="div-analysis-title">健康分布</div>\
- </div>\
- <div class="c-position-r height-140">\
- <div id="healthChart" class="height-140"></div>\
- <div class="ui-col-1 ui-grid ui-grid-vertical">\
- <div id="jkCatalogs">\
- <div class="ui-col-1">\
- <span class="span-frame cb-12b7f5"></span>\
- <span class="c-f14 c-12b7f5">{{jianKangRQPer}}</span>\
- <span class="c-f12 c-909090">(健康人群)</span>\
- </div>\
- <div class="ui-col-1">\
- <span class="span-frame cb-fb5dab"></span>\
- <span class="c-f14 c-fb5dab">{{huanBingRQPer}}</span>\
- <span class="c-f12 c-909090">(患病人群)</span>\
- </div>\
- <div class="ui-col-1">\
- <span class="span-frame cb-cd67fd"></span>\
- <span class="c-f14 c-cd67fd">{{gaoWeiRQPer}}</span>\
- <span class="c-f12 c-666">(高危人群)</span>\
- </div>\
- <div class="ui-col-1">\
- <span class="span-frame cb-ffc800"></span>\
- <span class="c-f14 c-ffc800">{{huiFuQiRQPer}}</span>\
- <span class="c-f12 c-666">(恢复期人群)</span>\
- </div>\
- <div class="ui-col-1">\
- <span class="span-frame cb-61eb41"></span>\
- <span class="c-f14 c-61eb41">{{weiBiaoZRQPer}}</span>\
- <span class="c-f12 c-666">(未标注)</span>\
- </div>\
- </div>\
- </div>\
- </div>\
- </div>\
- <div class="div-qingkuang-left">\
- <div class="div-header-block">\
- <div class="div-analysis-title">服务分布比例</div>\
- </div>\
- <div id="serviceChart" class="height-140"></div>\
- </div>\
- <div class="div-qingkuang-right">\
- <div class="div-header-block">\
- <div class="div-analysis-title">性别情况</div>\
- </div>\
- <div class="c-position-r height-140">\
- <div class="div-right-info">\
- <div class="y-amount c-f16">{{maleData}}</div>\
- <div class="y-rate c-f14 mt5">{{malePer}}</div>\
- <div class="y-title c-f12 mt10">男性</div>\
- </div>\
- <div class="div-left-info">\
- <div class="y-amount c-f16 c-fb5dab">{{femaleData}}</div>\
- <div class="y-rate c-f14 mt5 c-fb5dab">{{femalePer}}</div>\
- <div class="y-title c-f12 mt10 c-fb5dab">女性</div>\
- </div>\
- <div id="sexChart" class="height-140"></div>\
- </div>\
- </div>\
- <div class="div-service-kuang">\
- <div class="div-header-block">\
- <div class="div-analysis-title">年龄分布</div>\
- </div>\
- <div id="ageChart" class="height-140"></div>\
- </div>\
- </div>',
- props: [],
- data: function() {
- return {
- yiJiaoFeiData:"",
- yiJiaoFeiPer:"",
- weiJiaoFeiData:"",
- weiJiaoFeiPer:"",
- jianKangRQPer:"",
- huanBingRQPer:"",
- gaoWeiRQPer:"",
- huiFuQiRQPer:"",
- weiBiaoZRQPer:"",
- maleData:"",
- malePer:"",
- femaleData:"",
- femalePer:"",
- chooseYear:"",//选择年份值
- curLevel:null,//当前level值
- curCode:null,//当前选中区域的code值
- curName:null,//当前选中区域名称值
- endDate:null,
- userRole:null,
- roleLevel:null,
- }
- },
- mounted: function() {
- var vm = this;
- var now = new Date();
- if(now.getMonth() >= 6){
- vm.chooseYear = now.getFullYear();
- }else{
- vm.chooseYear = now.getFullYear() - 1;
- }
- vm.userRole = JSON.parse(window.localStorage.getItem("selectedRole"));
- vm.roleLevel = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length==6 ? 3 : 2;
- vm.endDate = getEndDate(vm.chooseYear);
- vm.curLevel = vm.roleLevel;
- vm.curCode = vm.userRole.code;
- vm.curName = vm.userRole.name;
-
-
- //初始化数据
- initData(vm);
-
- //刷新数据
- EventBus.$on('refresh-click', function(arg) {
- initData(vm);
- });
-
- //弹出筛选框
- EventBus.$on('filter-click', function(arg) {
- //弹框显示筛选条件
- Vuedals.Bus.$emit('new', {
- title: '条件筛选',
- onClose:function(data){
- vm.chooseYear = data.year;
- vm.curName = data.name;
- vm.curCode = data.areaCode;
- vm.curLevel = data.level;
- vm.endDate = getEndDate(vm.chooseYear);
- initData(vm);//刷新数据
- },
- component: 'resident-analysis-filter',
- props: {
- curLevel: vm.roleLevel,
- curCode: vm.userRole.code,
- curName: vm.userRole.name
- }
- });
- });
-
-
- },
- methods: {
-
- }
- })
- //请求接口数据
- function initData(vm) {
- var url = "/statistics/leveltwo_increment";
- EventBus.$emit('update-area-name', {areaName:vm.curName});//更新区域名称
- EventBus.$emit('update-statistics-time', {});//更新统计时间
- EventBus.$emit('update-statistics-year', {selectDate:vm.chooseYear+"年"});//更新统计年份
-
- var reqUrl = [{
- url: url,
- reqType: 'get',
- data: {
- endDate:vm.endDate,
- area:vm.curCode,
- level:vm.curLevel,
- index:16,
- }
- },
- {
- url: url,
- reqType: 'get',
- data: {
- endDate:vm.endDate,
- area:vm.curCode,
- level:vm.curLevel,
- index:15,
- }
- },
- {
- url: url,
- reqType: 'get',
- data: {
- endDate:vm.endDate,
- area:vm.curCode,
- level:vm.curLevel,
- index:vm.chooseYear==2016?7:36,
- }
- },
- {
- url: url,
- reqType: 'get',
- data: {
- endDate:vm.endDate,
- area:vm.curCode,
- level:vm.curLevel,
- index:6,
- }
- },
- {
- url: url,
- reqType: 'get',
- data: {
- endDate:vm.endDate,
- area:vm.curCode,
- level:vm.curLevel,
- index:8,
- }
- }
- ];
- httpRequest.getReqPromises(reqUrl).then(function(datas) {
- var jiaoFeiArr = datas[0],
- healthArr = datas[1],
- serviceArr = datas[2],
- sexArr = datas[3],
- ageArr = datas[4];
-
- //缴费情况处理
- if(jiaoFeiArr.status == "200") {
- var data = jiaoFeiArr.data.index_16;
- var yiJiaoFeiData = "";
- var weiJiaoFeiData = "";
- if(data && data.length == 1 && data[0].code == 0) { //未缴费率为100%的情况,后台没有返回已缴费的数据
- vm.yiJiaoFeiData = "0";
- vm.yiJiaoFeiPer = "0.00%";
- }
- $.each(data, function(i, v) {
- if(v.code == 0 || v.code == 1) {
- if(v.code == 1) {
- yiJiaoFeiData = v.amount;
- v.rate = parseFloat(v.rate).toFixed(2);
- vm.yiJiaoFeiData = v.amount;
- vm.yiJiaoFeiPer = v.rate + "%";
- } else {
- weiJiaoFeiData = v.amount;
- v.rate = parseFloat(v.rate).toFixed(2);
- vm.weiJiaoFeiData = v.amount;
- vm.weiJiaoFeiPer = v.rate + "%";
- }
- }
- })
- jiaoFeiData(yiJiaoFeiData,weiJiaoFeiData);
- }
-
- //健康分布处理
- if(healthArr.status == "200") {
- var data = healthArr.data.index_15;
- var wbzdata = data[0].amount;
- var jkrqdata = data[1].amount;
- var hbrqdata = data[2].amount;
- var gwrqdata = data[3].amount;
- var hfqrqdata = data[4].amount;
- vm.weiBiaoZRQPer = parseFloat(data[0].rate).toFixed(2);
- vm.jianKangRQPer = parseFloat(data[1].rate).toFixed(2);
- vm.huanBingRQPer = parseFloat(data[2].rate).toFixed(2);
- vm.gaoWeiRQPer = parseFloat(data[3].rate).toFixed(2);
- vm.huiFuQiRQPer = parseFloat(data[4].rate).toFixed(2);
- healthData(jkrqdata,hbrqdata,gwrqdata,hfqrqdata,wbzdata);
- }
-
- //服务分布处理
- if(serviceArr.status=="200"){
- var data=serviceArr.data["index_"+(vm.chooseYear==2016?7:36)];
- var amountArr = [];
- $.each(data, function(i, v) {
- amountArr.push(v.amount);
- })
- serviceData(amountArr);
- }
-
- //性别情况处理
- if(sexArr.status=="200"){
- var data = sexArr.data.index_6;
- var femaleData,maleData;
- $.each(data, function(i, v) {
- if(v.code=="1"){//女
- femaleData = v.amount;
- vm.femaleData = v.amount;
- vm.femalePer = parseFloat(v.rate).toFixed(2)+"%";
- }else{//男
- maleData = v.amount;
- vm.maleData = v.amount;
- vm.malePer = parseFloat(v.rate).toFixed(2)+"%";
- }
- })
- sexData(femaleData,maleData);
- }
-
-
- //年龄分布处理
- if(ageArr.status=="200"){
- var data=ageArr.data.index_8;
- var amountArr = [];
- $.each(data, function(i, v) {
- amountArr.push(v.amount);
- })
- ageData(amountArr);
- }
- })
- }
|