Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
raolu
/
PC-application
İzle 0
Yıldızla 0
Çatalla 1
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

Merge branch 'master' of http://192.168.1.220:10080/raolu/PC-application

Xiao_yanpeng 7 yıl önce
ebeveyn
89f5df5c94 8cb9185909
işleme
525eac2f80
10 değiştirilmiş dosya ile 1076 ekleme ve 28 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 78 0
      app/statistics/change-back.html
  2. 73 6
      app/statistics/consulting-analysis.html
  3. 311 0
      app/statistics/js/consulting-analysis.js
  4. 3 3
      app/statistics/js/home.js
  5. 379 0
      app/statistics/js/renew-progress.js
  6. 3 18
      app/statistics/js/sign-progress.js
  7. 78 0
      app/statistics/renew-progress.html
  8. 78 0
      app/statistics/two-rate-analysis.html
  9. 1 1
      component/statistics/area-data-panel.js
  10. 72 0
      component/statistics/renew-progress-filter.js

+ 78 - 0
app/statistics/change-back.html
Dosyayı Görüntüle 

@ -0,0 +1,78 @@
 
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset="UTF-8">
 
		<title>退改签</title>
 
		<meta name="author" content="yihu.com" />
 
		<meta name="format-detection" content="telephone=no" />
 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
		<meta name="apple-mobile-web-app-capable" content="yes" />
 
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" />
 
		<link rel="stylesheet" type="text/css" href="../../css/style.min.css" />
 
		<link rel="stylesheet" type="text/css" href="../../css/cross.css" />
 
		<link rel="stylesheet" type="text/css" href="css/common.css" />
 
	</head>
 
	<body style="margin: 0;">
 
		<div id="main">
 
			<header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
 
			<header-prompt></header-prompt>
 
			<!-- 饼图 -->
 
			<div class="mt10 mb30">
 
				<div class="c-row">
 
					<div class="c-50 c-t-center c-position-r">
 
						<div class="div-radius-panel">
 
							<div class="c-f16 c-12b7f5 mt15">{{signRateData.signRateText}}</div>
 
							<div class="c-f14 c-666">签约率</div>
 
						</div>
 
						<div id="signMain" class="c-100 height-120"></div>
 
						<div class="c-f12 c-999 div-data-value">
 
							<span class="c-f12 c-12b7f5 qianyuelv">{{signRateData.signAmount}}</span>/
 
							<span class="c-f12 c-333 qianyuezong">{{signRateData.signRateAll}}</span>
 
						</div>
 
					</div>
 
					<div class="c-50 c-t-center c-position-r">
 
						<div class="div-radius-panel">
 
							<div class="c-f16 c-12b7f5 mt15">{{signRateData.completeRateText}}</div>
 
							<div class="c-f14 c-666">完成率</div>
 
						</div>
 
						<div id="completeMain" class="c-100" style="height: 120px;"></div>
 
						<div class="c-f12 c-999 div-data-value">
 
							<span class="c-f12 c-12b7f5">{{signRateData.completeAmount}}</span>/
 
							<span class="c-f12 c-333">{{signRateData.completeRateAll}}</span>
 
						</div>
 
					</div>
 
				</div>
 
			</div>
 
			<!-- 折线图 -->
 
			<line-chart v-on:getlinedata="getNewLineData" class="mlr8"></line-chart>
 
			<!-- 底部区域图 -->
 
			<area-data-panel class="mt20 mlr8" v-on:getnewdata="getAreaData"></area-data-panel>
 
			<!--模态框组件-->
 
			<vuedals></vuedals>
 
		</div>
 
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
 
		<!--<script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
 
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/common/event-bus.js"></script>
 
		<script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/sign-progress-filter.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="js/sign-progress.js" type="text/javascript" charset="utf-8"></script>
 
	</body>
 
</html>

+ 73 - 6
app/statistics/consulting-analysis.html
Dosyayı Görüntüle 

@ -1,9 +1,76 @@
 
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset="UTF-8">
 
		<title>咨询分析</title>
 
	</head>
 
	<body>
 
	</body>
 
    <head>
 
        <meta charset="UTF-8">
 
        <title>咨询分析</title>
 
        <meta name="author" content="yihu.com" />
 
        <meta name="format-detection" content="telephone=no" />
 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
        <meta name="apple-mobile-web-app-capable" content="yes" />
 
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
 
        <link rel="stylesheet" type="text/css" href="../../css/style.min.css"/>
 
        <link rel="stylesheet" type="text/css" href="../../css/cross.css"/>
 
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
 
    </head>
 
    <body>
 
        <div id="main">
 
            <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
 
            <header-prompt></header-prompt>
 
            <div class="clearfix ">
 
                <ul class="l-banner">
 
                    <li style="width: calc(100% / 4)">
 
                        <div class="tag">
 
                            <div class="c-f18">{{topDatas['total']}}</div>
 
                            <div class="mt5 c-f14 l-name">总咨询数</div>
 
                        </div>
 
                    </li>
 
                    <li style="width: calc(100% / 4)">
 
                        <div class="tag">
 
                            <div id="index_4" class="c-f18">{{topDatas['noRelyRate']}}</div>
 
                            <div class="mt5 c-f14 l-name">未回复率</div>
 
                        </div>
 
                    </li>
 
                    <li style="width: calc(100% / 4)">
 
                        <div class="tag">
 
                            <div class="c-f18">{{topDatas['noRelyCount']}}</div>
 
                            <div class="mt5 c-f14 l-name">未回复数</div>
 
                        </div>
 
                    </li>
 
                    <li style="width: calc(100% / 4)">
 
                        <div class="tag">
 
                            <div class="c-f18">{{topDatas['relyRate']}}</div>
 
                            <div class="mt5 c-f14 l-name">回复及时率</div>
 
                        </div>
 
                    </li>
 
                </ul>
 
            </div>
 
            <div class="mt10 c-border">
 
                <div class="plr10 ptb10 c-border-b">
 
                    <span class="c-f14 c-333 ml5">首次回复时间分布（次数）</span>
 
                </div>
 
                <div id="barChart" style="height: 200px; width: 100%;"></div>
 
            </div>
 
            <!-- 底部区域图 -->
 
            <area-data-panel class="mt20" v-on:getnewdata="getAreaData"></area-data-panel>
 
            <!--模态框组件-->
 
            <vuedals></vuedals>
 
        </div>
 
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../component/common/event-bus.js"></script>
 
        <script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 
        <script src="js/consulting-analysis.js" type="text/javascript" charset="utf-8"></script>
 
    </body>
 
</html>

+ 311 - 0
app/statistics/js/consulting-analysis.js
Dosyayı Görüntüle 

@ -0,0 +1,311 @@
 
var reqList = [];
 
new Vue({
 
    el: "#main",
 
    data: {
 
        appname: "咨询分析",
 
        isback: true,
 
        isrefresh: true,
 
        isfilter: true,
 
        isopen: true,
 
        //页面请求参数
 
        level: '',
 
        area: '',
 
        areaTitle: '',
 
        lowLevel: '',
 
        chooseYear: '',
 
        endDate: '',
 
        topDatas: {
 
            total: 0,
 
            noRelyCount: 0,
 
            noRelyRate: 0,
 
            relyRate: 0
 
        }
 
    },
 
    components: {
 
        vuedals: Vuedals.Component
 
    },
 
    methods:{
 
        getAreaData: function(arg){
 
            //如果level改变，则需要重新加载整个页面的数据，否则只需加载底部区域数据
 
            if(arg.level == this.level){
 
                this.lowLevel = arg.lowLevel;
 
                loadData([2], this);
 
            }else{
 
                this.level = arg.level;
 
                this.lowLevel = arg.lowLevel;
 
                this.area = arg.area;
 
                this.areaTitle = arg.areaTitle;
 
                loadData([0,1,2], this);
 
            }
 
            EventBus.$emit('update-area-name', {areaName: this.areaTitle});
 
            //存储请求所带的参数
 
            reqList.push({
 
                level: this.level,
 
                area: this.area,
 
                areaTitle: this.areaTitle,
 
                lowLevel: this.lowLevel,
 
                endDate: this.endDate
 
            })
 
        }
 
    },
 
    mounted: function(){
 
        //初始化数据
 
        initData(this);
 
        
        //获得顶部各tab的值
 
        loadData([0,1,2], this); //参数组数表示请求的区域为上中下
 
        
        //存储请求所带的参数
 
        reqList.push({
 
            level: this.level,
 
            area: this.area,
 
            areaTitle: this.areaTitle,
 
            index: this.index,
 
            endDate: this.endDate,
 
            startDate: this.startDate,
 
            lowLevel: this.lowLevel
 
        });
 
        
        //设置监听器， 监听折线图日期变化
 
        var vm = this;
 
        //监听后退按钮的操作
 
        EventBus.$on("back-click", function(arg){
 
            if(reqList.length == 1){
 
                history.go(-1);
 
            } 
            else{
 
                var preInfo = reqList.pop();
 
                var info = reqList[reqList.length - 1];
 
                vm.level = info.level;
 
                vm.area = info.area;
 
                vm.areaTitle = info.areaTitle;
 
                vm.lowLevel = info.lowLevel;
 
                vm.index = info.index;
 
                
                loadData([0,1,2], vm);
 
            }
 
        });
 
        //监听页面刷新
 
        EventBus.$on("refresh-click", function(arg){
 
            loadData([0,1,2], vm);
 
        });
 
    }
 
});
 
function initData(vm){
 
    //获得缓存中缓存的角色权限
 
    var userRole = window.localStorage.getItem("selectedRole");
 
    if(!userRole){
 
        return false;
 
    }
 
    vm.userRole = JSON.parse(userRole);
 
    vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
 
    vm.area = vm.userRole.code;
 
    vm.areaTitle = vm.userRole.name;
 
    EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
 
    
    var now = new Date();
 
    if(now.getMonth() >= 6){
 
        vm.chooseYear = now.getFullYear();
 
    }else{
 
        vm.chooseYear = now.getFullYear() - 1;
 
    }
 
    vm.endDate = getEndDate(vm.chooseYear);
 
}
 
function initReqParams(vm){
 
    var param = [{
 
        url: "/statistics/Consulting_Title",
 
        data: {level: vm.level, area: vm.area, year: vm.chooseYear}
 
    },{
 
        url: "/statistics/getCoutListByTime",
 
        data: {level: vm.level, area: vm.area, year: vm.chooseYear}
 
    },{
 
        url: "/statistics/Consulting_StatList",
 
        data: {level: vm.level, area: vm.area, year: vm.chooseYear, sort: 1, date: vm.endDate, lowlevel: vm.lowLevel}
 
    }];
 
    
    return param;
 
}
 
function loadData(loadArr, vm){
 
    //获取其他请求的参数
 
    var reqParams = initReqParams(vm),
 
        reqPromise = [];
 
    
    for(i=0; i< loadArr.length; i++){
 
        var j = loadArr[i];
 
        var param = reqParams[j];
 
        reqPromise.push(httpRequest.get(param.url, {data: param.data}));
 
    }
 
        
    if(reqPromise.length > 0){
 
        Promise.all(reqPromise).then(function(ress){
 
            var res1, res2, res2;
 
            for(var i=0; i<loadArr.length; i++){
 
                var j = loadArr[i] + 1;
 
                if(j == 1){
 
                    res1 = ress[i];
 
                }
 
                if(j == 2){
 
                    res2 = ress[i];
 
                }
 
                if(j == 3){
 
                    res3 = ress[i];
 
                }
 
                
            }
 
            if(res1){
 
                if(res1.status == 200){
 
                    handleTopPanelData(res1.data, vm);
 
                }else{
 
                    console.log(res1.msg);
 
                }
 
            }
 
            if(res2){
 
                if(res2.status == 200){
 
                    handleSecondPanelData(res2.data, vm);
 
                }else{
 
                   console.log(res2.msg);
 
                }
 
                
            }
 
            if(res3){
 
                if(res3.status == 200){
 
                    listHandle(res3.data, vm);
 
                }else{
 
                    console.log(res3.msg);
 
                }
 
            }
 
        })
 
    }
 
}
 
function handleTopPanelData(data, vm){
 
    var obj = data.result[0];
 
    console.log(obj);
 
    vm.topDatas = {
 
        total: obj.total,
 
        noRelyCount: obj.noRelyCount,
 
        noRelyRate: obj.noRelyRate,
 
        relyRate: obj.relyRate
 
    }
 
}
 
function handleSecondPanelData(data, vm){
 
    var list = data.resultList,
 
        xData = [],
 
        yData = [];
 
    for(i=0; i<list.length; i++){
 
        var item = list[i];
 
        xData.push(item.name + "时");
 
        yData.push(item.num);
 
    }
 
    drawBarChart(xData, yData);
 
}
 
function listHandle(data, vm){
 
    var list = data.resultList;
 
    var topArr = soreRank(getKeyValueArr(list, 'relyDoubleRate'));
 
    var arr = _.map(list, function(o, index){
 
        var cols = [o.name, o.total, o.noRelyCount, o.noRelyRate];
 
        return {
 
            rank: topArr[index],
 
            code: o.code,
 
            name: o.name,
 
            cols: cols
 
        }
 
    });
 
    
    EventBus.$emit("render-area-data",{
 
        level: vm.level,
 
        area: vm.area,
 
        lowLevel: vm.lowLevel,
 
        headers: ["排名", "咨询数", "未回复数", "未回复率"],
 
        rows: arr
 
    });
 
}
 
function drawBarChart(xData, yData) {
 
    var myChart = echarts.init(document.getElementById('barChart'));
 
    var options = {
 
        calculable: true,
 
        tooltip: {
 
            trigger: 'item',
 
//          formatter: '{a}<br />{b} : {c}次'
 
        },
 
        toolbox: {
 
            dataZoom: true,
 
            show: true,
 
            orient: 'vertical',
 
            x: 'right',
 
            y: 'center'
 
        },
 
        grid: {
 
            left: '20px',
 
            right: '20px',
 
            bottom: '20px',
 
            top: '20px',
 
            containLabel: true
 
        },
 
        xAxis: [{
 
            type: 'category',
 
            axisLine: {
 
                show: true,
 
                lineStyle: {
 
                    color: '#dcdcdc',
 
                    width: 1
 
                }
 
            },
 
            axisLabel: {
 
                show: true,
 
                color: '#666'
 
            },
 
            splitLine: {
 
                show: false
 
            },
 
            data: xData
 
        }],
 
        yAxis: [{
 
            type: 'value',
 
            axisLine: {
 
                show: true,
 
                lineStyle: {
 
                    color: '#dcdcdc',
 
                    width: 1
 
                }
 
            },
 
            axisLabel: {
 
                show: true,
 
                color: '#666'
 
            },
 
            splitLine: {
 
                show: false
 
            },
 
        }],
 
        series: [{
 
            name: '回复次数',
 
            type: 'bar',
 
            barWidth: 40,
 
            itemStyle: {
 
                normal: {
 
                    color: function(params) {
 
                        var colorList = ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'];
 
                        return colorList[params.dataIndex]
 
                    },
 
                    label: {
 
                        show: true,
 
                        position: 'top',
 
                        formatter: function(params) {
 
                            return params.value;
 
                        }
 
                    },
 
                    barBorderRadius: 0
 
                }
 
            },
 
            data: yData
 
        }]
 
    };
 
    myChart.clear();
 
    myChart.setOption(options);
 
}

+ 3 - 3
app/statistics/js/home.js
Dosyayı Görüntüle 

@ -32,7 +32,7 @@ new Vue({
 
		}, {
 
			photo: '../../images/xuqianjingzhan_icon.png',
 
			label: '续签进展',
 
			url: ''
 
			url: 'renew-progress.html'
 
		}, {
 
			photo: '../../images/jumingfenxi_icon.png',
 
			label: '居民分析',
 
@ -40,11 +40,11 @@ new Vue({
 
		}, {
 
			photo: '../../images/tuigaiqian_icon.png',
 
			label: '退改签',
 
			url: ''
 
			url: 'change-back.html'
 
		}, {
 
			photo: '../../images/lianglvfenxi_icon.png',
 
			label: '两率分析',
 
			url: ''
 
			url: 'two-rate-analysis.html'
 
		}],
 
		serviceAnalysis: [{
 
			photo: '../../images/zongtifenxi_icon.png',

+ 379 - 0
app/statistics/js/renew-progress.js
Dosyayı Görüntüle 

@ -0,0 +1,379 @@
 
var reqList = []; //记录请求的参数和url，用于后退时使用
 
Vue.use(Vuedals.default);
 
new Vue({
 
	el: "#main",
 
	data: {
 
		appname: "续签进展",
 
		isback: true,
 
		isrefresh: true,
 
		isfilter: true,
 
		isopen: false,
 
		//请求页面所需参数
 
		level: '',
 
		area: '',
 
		areaTitle: '',
 
		index: '3',
 
		selectedDateType: 1, //折线图坐标值1-日，2-周，3-月
 
		endDate: '',
 
		startDate: '',
 
		lowLevel: '',
 
		lowCode: '',
 
		chooseYear: '',
 
		userRole: '',
 
		analysisName: "所有居民",
 
		renewRange: {
 
			renewRangeText: "",
 
			renewRange: "",
 
			renewAmount: "",
 
			renewRateAll: ""
 
		},
 
		switchRange: {
 
			switchRangeText: "",
 
			switchRange: "",
 
			switchAmount: "",
 
			switchRateAll: ""
 
		},
 
		contentHtml: ""
 
	},
 
	components: {
 
		vuedals: Vuedals.Component
 
	},
 
	methods: {
 
		changeTag: function(val) {
 
			this.index = val;
 
			loadData([1, 2], this);
 
			//存储请求所带的参数
 
			reqList.push({
 
				level: this.level,
 
				area: this.area,
 
				areaTitle: this.areaTitle,
 
				index: this.index,
 
				endDate: this.endDate,
 
				startDate: this.startDate,
 
				lowLevel: this.lowLevel,
 
				lowCode: this.lowCode
 
			})
 
		},
 
		getNewLineData: function(arg) {
 
			this.selectedDateType = arg.dateType;
 
			loadData([1], this);
 
		},
 
		getAreaData: function(arg) {
 
			//如果level改变，则需要重新加载整个页面的数据，否则只需加载底部区域数据
 
			if(arg.level == this.level) {
 
				this.lowLevel = arg.lowLevel;
 
				loadData([2], this);
 
			} else {
 
				this.level = arg.level;
 
				this.lowLevel = arg.lowLevel;
 
				this.area = arg.area;
 
				loadData([0, 1, 2], this);
 
			}
 
			//存储请求所带的参数
 
			reqList.push({
 
				level: this.level,
 
				area: this.area,
 
				areaTitle: this.areaTitle,
 
				index: this.index,
 
				endDate: this.endDate,
 
				startDate: this.startDate,
 
				lowLevel: this.lowLevel,
 
				lowCode: this.lowCode,
 
			})
 
		}
 
	},
 
	mounted: function() {
 
		//初始化数据
 
		initData(this);
 
		//获得顶部各tab的值
 
		loadData([0, 1, 2], this); //参数组数表示请求的区域为上中下
 
		//存储请求所带的参数
 
		reqList.push({
 
			level: this.level,
 
			area: this.area,
 
			areaTitle: this.areaTitle,
 
			index: this.index,
 
			endDate: this.endDate,
 
			startDate: this.startDate,
 
			lowLevel: this.lowLevel,
 
			lowCode: this.lowCode,
 
		});
 
		//设置监听器， 监听折线图日期变化
 
		var vm = this;
 
		//监听后退按钮的操作
 
		EventBus.$on("back-click", function(arg) {
 
			EventBus.$emit('update-statistics-time', {}); //更新统计时间
 
			if(reqList.length == 1) {
 
				history.go(-1);
 
			} else {
 
				var preInfo = reqList.pop();
 
				var info = reqList[reqList.length - 1];
 
				vm.level = info.level;
 
				vm.area = info.area;
 
				vm.areaTitle = info.areaTitle;
 
				vm.lowLevel = info.lowLevel;
 
				vm.index = info.index;
 
				vm.lowCode = info.lowCode;
 
				loadData([0, 1, 2], vm);
 
			}
 
		});
 
		//监听页面刷新
 
		EventBus.$on("refresh-click", function(arg) {
 
			EventBus.$emit('update-statistics-time', {}); //更新统计时间
 
			loadData([0, 1, 2], vm);
 
		});
 
		//弹出筛选框
 
		EventBus.$on('filter-click', function(arg) {
 
			//弹框显示筛选条件
 
			Vuedals.Bus.$emit('new', {
 
				title: '条件筛选',
 
				onClose: function(data) {
 
					vm.lowCode = data.lowCode;
 
					vm.contentHtml = data.contentHtml;
 
					vm.startDate = getStartDate(vm.chooseYear);
 
					vm.endDate = getEndDate(vm.chooseYear);
 
					loadData([0, 1, 2], vm); //刷新数据
 
					EventBus.$emit('update-dimension-name', {
 
						dimensionVal: data.name
 
					}); //更新维度名称
 
					EventBus.$emit('update-statistics-time', {}); //更新统计时间
 
				},
 
				component: 'renew-progress-filter',
 
				props: {
 
					contentHtml: vm.contentHtml
 
				}
 
			});
 
		});
 
	}
 
})
 
function initData(vm) {
 
	//获得缓存中缓存的角色权限
 
	var userRole = window.localStorage.getItem("selectedRole");
 
	if(!userRole) {
 
		return false;
 
	}
 
	vm.userRole = JSON.parse(userRole);
 
	vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
 
	vm.area = vm.userRole.code;
 
	vm.areaTitle = vm.userRole.name;
 
	var now = new Date();
 
	if(now.getMonth() >= 6) {
 
		vm.chooseYear = now.getFullYear();
 
	} else {
 
		vm.chooseYear = now.getFullYear() - 1;
 
	}
 
	vm.startDate = getStartDate(vm.chooseYear);
 
	vm.endDate = getEndDate(vm.chooseYear);
 
	//更新头部信息
 
	EventBus.$emit('update-all-prompt-info', {
 
		areaName: vm.areaTitle,
 
		selectDate: "",
 
		dimensionVal: vm.analysisName
 
	});
 
}
 
function initReqParams(vm) {
 
	var topIndex = {
 
			"4": "29",
 
			"3": "44",
 
			"2": "43"
 
		}, //顶部区域对应的level ： index 
		bottomIndex = {
 
			"4": "44",
 
			"3": "43",
 
			"2": "42"
 
		}; //与选中的当前底部区域tab的值有关 areaType
 
	if(vm.lowCode && vm.lowCode != "0") {
 
		var topIndex = {
 
				"4": "51",
 
				"3": "54",
 
				"2": "53"
 
			}, //顶部区域对应的level ： index 
			bottomIndex = {
 
				"4": "54",
 
				"3": "53",
 
				"2": "52"
 
			}; //与选中的当前底部区域tab的值有关 areaType
 
	}
 
	var areaType = vm.lowLevel==2 ? "3" : vm.lowLevel==1?"2":vm.level;
 
	var index = topIndex[vm.level],
 
		bIndex = bottomIndex[areaType];
 
	reqParam = [{
 
		url: "/statistics/getRenewPercentAndChangePercent",
 
		reqType: 'get',
 
		data: {
 
			level: vm.level,
 
			code: vm.area,
 
			year: vm.chooseYear,
 
			index: index,
 
			lowCode: vm.lowCode
 
		}
 
	}, {
 
		url: "/statistics/interval_total",
 
		reqType: 'get',
 
		data: {
 
			level: vm.level,
 
			area: vm.area,
 
			startDate: vm.startDate,
 
			endDate: vm.endDate,
 
			interval: vm.selectedDateType,
 
			index: index,
 
			lowCode: vm.lowCode
 
		}
 
	}, {
 
		url: "/statistics/lowlevel_all_sign_renew",
 
		reqType: 'post',
 
		data: {
 
			sort: 1,
 
			date: vm.endDate,
 
			level: vm.level,
 
			index: bIndex,
 
			area: vm.area,
 
			lowCode: vm.lowCode
 
		}
 
	}];
 
	if(vm.lowLevel) {
 
		reqParam[2].data.lowLevel = vm.lowLevel;
 
	}
 
	return reqParam;
 
}
 
function getTopTagDatas(data, vm) {
 
	vm.renewRange.renewRangeText = data.renewRange;
 
	vm.renewRange.renewRange = parseFloat(data.renewRange) / 100;
 
	vm.renewRange.renewAmount = data.thisYearRenew;
 
	vm.renewRange.renewRateAll = data.yesterYearSign;
 
	vm.switchRange.switchRangeText = data.switchRange;
 
	vm.switchRange.switchRange = parseFloat(data.switchRange) / 100;
 
	vm.switchRange.switchAmount = data.thisYearSwithch;
 
	vm.switchRange.switchRateAll = data.thisYearRenew;
 
	var renewArr = [{
 
		name: '续签量',
 
		value: vm.renewRange.renewAmount
 
	}, {
 
		name: '续签总量',
 
		value: vm.renewRange.renewRateAll
 
	}];
 
	var switchArr = [{
 
		name: '转签量',
 
		value: vm.switchRange.switchAmount
 
	}, {
 
		name: '转签总量',
 
		value: vm.switchRange.switchRateAll
 
	}];
 
	drawPieChart('renewMain', renewArr, ['#12b7f5', '#ebebf5']); //续签率
 
	drawPieChart('switchMain', switchArr, ['#12b7f5', '#ebebf5']); //转签率
 
}
 
function loadData(loadArr, vm) {
 
	//获取其他请求的参数
 
	var reqParams = initReqParams(vm),
 
		reqPromise = [],
 
		newArr = []; //记录非顶部请求的请求数组
 
	for(i = 0; i < loadArr.length; i++) {
 
		var j = loadArr[i];
 
		var param = reqParams[j];
 
		reqPromise.push(httpRequest.get(param.url, {
 
			data: param.data
 
		}));
 
		newArr.push(loadArr[i]);
 
	}
 
	if(reqPromise.length > 0) {
 
		Promise.all(reqPromise).then(function(ress) {
 
			var res1, res2, res3;
 
			for(var i = 0; i < loadArr.length; i++) {
 
				var j = loadArr[i] + 1;
 
				if(j == 1) {
 
					res1 = ress[i];
 
				}
 
				if(j == 2) {
 
					res2 = ress[i];
 
				}
 
				if(j == 3) {
 
					res3 = ress[i];
 
				}
 
			}
 
			
			if(res1 && res1.status == 200) {
 
				getTopTagDatas(res1.data, vm);
 
			}
 
			if(res2 && res2.status == 200) {
 
				handleSecondPanelData(res2.data, vm);
 
			}
 
			if(res3) {
 
				if(res3.status == 200) {
 
					listHandle(res3.data, vm);
 
				} else {
 
					console.log(res3.msg);
 
				}
 
			}
 
		})
 
	}
 
}
 
function handleSecondPanelData(data, vm) {
 
	var xDatas = [],
 
		yDatas = [],
 
		names = [],
 
		colors = ['#12b7f5'];
 
	for(var p in data) {
 
		names.push("总续签人数");
 
		var xData = _.map(data[p].data, function(o) {
 
			return o.range;
 
		});
 
		var yData = _.map(data[p].data, function(o) {
 
			return o.amount;
 
		});
 
		xDatas.push(xData);
 
		yDatas.push(yData);
 
	}
 
	EventBus.$emit("draw-line-chart", {
 
		panelName: "续签趋势",
 
		quotaNames: names,
 
		xData: xDatas[0],
 
		yDatas: yDatas,
 
		colors: colors
 
	});
 
}
 
function listHandle(data, vm) {
 
	for(i in data) {
 
		var list = data[i];
 
		var topArr = [];
 
		topArr = soreRank(getKeyValueArr(list, 'renewNum'));
 
		var arr = _.map(list, function(o, index) {
 
			var cols = [o.name];
 
			cols.push(o.rate);
 
			cols.push(o.renewNum);
 
			cols.push(o.signNum);
 
			return {
 
				rank: topArr[index],
 
				code: o.code,
 
				name: o.name,
 
				cols: cols
 
			}
 
		});
 
		var headers = ["排名", "续签率", "续签量", "去年签约量"]; 
		EventBus.$emit("render-area-data", {
 
			level: vm.level,
 
			area: vm.area,
 
			lowLevel: vm.lowLevel,
 
			headers: headers,
 
			rows: arr
 
		});
 
	}
 
}

+ 3 - 18
app/statistics/js/sign-progress.js
Dosyayı Görüntüle 

@ -185,6 +185,7 @@ function initReqParams(vm) {
 
	if(vm.lowCode) {
 
		vm.index = 17;
 
	}
 
	
	reqParam = [{
 
		url: "/statistics/sign_info",
 
		reqType: 'get',
 
@ -226,22 +227,6 @@ function initReqParams(vm) {
 
	return reqParam;
 
}
 
function getTopReqParams(index1, vm) {
 
	var url = "statistics/interval_total",
 
		data = {
 
			index: index1,
 
			level: vm.level,
 
			area: vm.area,
 
			year: vm.chooseYear,
 
			endDate: vm.endDate,
 
			startDate: vm.startDate
 
		};
 
	return {
 
		url: url,
 
		data: data
 
	};
 
}
 
function getTopTagDatas(data,vm) {
 
	vm.signRateData.signRateText = data.signRate.rate.substring(0,data.signRate.rate.length-2) + "%"
 
	vm.signRateData.signRate = parseFloat(data.signRate.rate)/100;
 
@ -376,9 +361,9 @@ function listHandle(data, vm) {
 
				cols: cols
 
			}
 
		});
 
		var activeTab =  $(".area-tab-panel .area-tab.active span").html();
 
		
		var headers = ["排名", (vm.analysisType=="2"?"人口数":"签约量"), "目标率","当前签约率"];//analysisType=2 为按人口
 
		if(activeTab=="团队"){
 
		if(vm.lowLevel==1 || vm.level==2){//团队
 
			headers = ["排名", (vm.analysisType=="2"?"人口数":"签约量"), "调控量"];
 
		}

+ 78 - 0
app/statistics/renew-progress.html
Dosyayı Görüntüle 

@ -0,0 +1,78 @@
 
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset="UTF-8">
 
		<title>续签进展</title>
 
		<meta name="author" content="yihu.com" />
 
		<meta name="format-detection" content="telephone=no" />
 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
		<meta name="apple-mobile-web-app-capable" content="yes" />
 
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" />
 
		<link rel="stylesheet" type="text/css" href="../../css/style.min.css" />
 
		<link rel="stylesheet" type="text/css" href="../../css/cross.css" />
 
		<link rel="stylesheet" type="text/css" href="css/common.css" />
 
	</head>
 
	<body style="margin: 0;">
 
		<div id="main">
 
			<header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
 
			<header-prompt></header-prompt>
 
			<!-- 饼图 -->
 
			<div class="mt10 mb30">
 
				<div class="c-row">
 
					<div class="c-50 c-t-center c-position-r">
 
						<div class="div-radius-panel">
 
							<div class="c-f16 c-12b7f5 mt15">{{renewRange.renewRangeText}}</div>
 
							<div class="c-f14 c-666">续签率</div>
 
						</div>
 
						<div id="renewMain" class="c-100 height-120"></div>
 
						<div class="c-f12 c-999 div-data-value">
 
							<span class="c-f12 c-12b7f5 qianyuelv">{{renewRange.renewAmount}}</span>/
 
							<span class="c-f12 c-333 qianyuezong">{{renewRange.renewRateAll}}</span>
 
						</div>
 
					</div>
 
					<div class="c-50 c-t-center c-position-r">
 
						<div class="div-radius-panel">
 
							<div class="c-f16 c-12b7f5 mt15">{{switchRange.switchRangeText}}</div>
 
							<div class="c-f14 c-666">转签率</div>
 
						</div>
 
						<div id="switchMain" class="c-100" style="height: 120px;"></div>
 
						<div class="c-f12 c-999 div-data-value">
 
							<span class="c-f12 c-12b7f5">{{switchRange.switchAmount}}</span>/
 
							<span class="c-f12 c-333">{{switchRange.switchRateAll}}</span>
 
						</div>
 
					</div>
 
				</div>
 
			</div>
 
			<!-- 折线图 -->
 
			<line-chart v-on:getlinedata="getNewLineData" class="mlr8"></line-chart>
 
			<!-- 底部区域图 -->
 
			<area-data-panel class="mt20 mlr8" v-on:getnewdata="getAreaData"></area-data-panel>
 
			<!--模态框组件-->
 
			<vuedals></vuedals>
 
		</div>
 
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
 
		<!--<script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
 
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/common/event-bus.js"></script>
 
		<script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/renew-progress-filter.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="js/renew-progress.js" type="text/javascript" charset="utf-8"></script>
 
	</body>
 
</html>

+ 78 - 0
app/statistics/two-rate-analysis.html
Dosyayı Görüntüle 

@ -0,0 +1,78 @@
 
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset="UTF-8">
 
		<title>签约进展</title>
 
		<meta name="author" content="yihu.com" />
 
		<meta name="format-detection" content="telephone=no" />
 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
		<meta name="apple-mobile-web-app-capable" content="yes" />
 
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" />
 
		<link rel="stylesheet" type="text/css" href="../../css/style.min.css" />
 
		<link rel="stylesheet" type="text/css" href="../../css/cross.css" />
 
		<link rel="stylesheet" type="text/css" href="css/common.css" />
 
	</head>
 
	<body style="margin: 0;">
 
		<div id="main">
 
			<header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
 
			<header-prompt></header-prompt>
 
			<!-- 饼图 -->
 
			<div class="mt10 mb30">
 
				<div class="c-row">
 
					<div class="c-50 c-t-center c-position-r">
 
						<div class="div-radius-panel">
 
							<div class="c-f16 c-12b7f5 mt15">{{signRateData.signRateText}}</div>
 
							<div class="c-f14 c-666">签约率</div>
 
						</div>
 
						<div id="signMain" class="c-100 height-120"></div>
 
						<div class="c-f12 c-999 div-data-value">
 
							<span class="c-f12 c-12b7f5 qianyuelv">{{signRateData.signAmount}}</span>/
 
							<span class="c-f12 c-333 qianyuezong">{{signRateData.signRateAll}}</span>
 
						</div>
 
					</div>
 
					<div class="c-50 c-t-center c-position-r">
 
						<div class="div-radius-panel">
 
							<div class="c-f16 c-12b7f5 mt15">{{signRateData.completeRateText}}</div>
 
							<div class="c-f14 c-666">完成率</div>
 
						</div>
 
						<div id="completeMain" class="c-100" style="height: 120px;"></div>
 
						<div class="c-f12 c-999 div-data-value">
 
							<span class="c-f12 c-12b7f5">{{signRateData.completeAmount}}</span>/
 
							<span class="c-f12 c-333">{{signRateData.completeRateAll}}</span>
 
						</div>
 
					</div>
 
				</div>
 
			</div>
 
			<!-- 折线图 -->
 
			<line-chart v-on:getlinedata="getNewLineData" class="mlr8"></line-chart>
 
			<!-- 底部区域图 -->
 
			<area-data-panel class="mt20 mlr8" v-on:getnewdata="getAreaData"></area-data-panel>
 
			<!--模态框组件-->
 
			<vuedals></vuedals>
 
		</div>
 
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
 
		<!--<script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
 
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/common/event-bus.js"></script>
 
		<script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="../../component/statistics/sign-progress-filter.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 
		<script src="js/sign-progress.js" type="text/javascript" charset="utf-8"></script>
 
	</body>
 
</html>

+ 1 - 1
component/statistics/area-data-panel.js
Dosyayı Görüntüle 

@ -3,7 +3,7 @@
 
        template: '<div class="area-panel">\
 
                <div class="area-tab-panel">\
 
                    <div v-show="level==4" class="area-tab" :class="{\'active\': level==4 && (!lowLevel || lowLevel==3)}" @click="getLowCodeData(3)"><span>各区</span></div>\
 
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': level==3 || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
 
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': (level==3 && lowLevel!=1) || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
 
                    <div class="area-tab" :class="{\'active\': level==2 || lowLevel==1}" @click="getLowCodeData(1)"><span>团队</span></div>\
 
                </div>\
 
                <table class="bottom-list-table mb20" id="listTable">\

+ 72 - 0
component/statistics/renew-progress-filter.js
Dosyayı Görüntüle 

@ -0,0 +1,72 @@
 
(function(){
 
    Vue.component('renew-progress-filter',{
 
        template:'<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
 
				<div class="ml10 filter-title">统计维度</div>\
 
				<div class="div-content" @click="contentClick">\
 
					<div class="mt20 div-group-btn c-row ml40">\
 
						<div class="div-btn c-33 active" data-lowCode="">\
 
							<a href="#" class="f-fs14">所有居民</a>\
 
						</div>\
 
						<div class="div-btn c-33" data-lowCode="3">\
 
							<a href="#" class="f-fs14">65岁以上签约</a>\
 
						</div>\
 
						<div class="div-btn c-33" data-lowCode="1">\
 
							<a href="#" class="f-fs14">高血压</a>\
 
						</div>\
 
					</div>\
 
					<div class="mt20 div-group-btn c-row ml40">\
 
						<div class="div-btn c-33" data-lowCode="2">\
 
							<a href="#" class="f-fs14">糖尿病</a>\
 
						</div>\
 
					</div>\
 
				</div>\
 
				<div id="footer">\
 
					<div class="c-row btn-wrap c-border-top fr">\
 
						<div class="div-foot-btn mr20" @click="resetClick">\
 
							<a href="#" class="c-666 f-fs16">重置</a>\
 
						</div>\
 
						<div class="div-foot-btn active" @click="confirmClick">\
 
							<a href="#" class="c-666 f-fs16">保存</a>\
 
						</div>\
 
					</div>\
 
				</div>\
 
			</div>',
 
        props:['contentHtml'],
 
        data: function(){
 
            return {
 
                
            }
 
        },
 
        methods: {
 
	         contentClick:function(){
 
	         	$(".div-content").find(".div-btn").removeClass('active');
 
	         	$(event.target.closest("div")).addClass('active');
 
	         },
 
	         resetClick:function(){
 
				$(".div-content").find(".c-33").removeClass("active");
 
				$(".div-content").find(".c-33").eq(0).addClass("active");
 
	         },
 
	         confirmClick:function(){
 
	         	var vm = this;
 
	         	var $type = $(".div-content .div-btn.active"),
 
                    typeCode = $type.attr("data-val"),
 
                    lowCode = $type.attr("data-lowCode"),
 
                    name = $type.find("a").html();
 
	         	console.log("lowCode:"+lowCode)
 
	         	console.log("name:"+name)
 
				//触发刷新
 
				this.$emit('vuedals:close', {
 
					lowCode: lowCode,
 
					name: name,
 
					contentHtml:$(".div-content").html()
 
				});
 
	         }
 
        },
 
        mounted: function(){
 
        	if(this.contentHtml){
 
        		$(".div-content").html(this.contentHtml);
 
        	}
 
        }
 
    });
 
    
})()