统计首页饼图功能实现

api/http-request.js

@@ -11,13 +11,13 @@
        server = "http://www.xmtyw.cn/wlyy/"
        imserver = "http://27.155.101.77:3000/api/v2";
        socketUrl = "http://27.155.101.77:3000";
        loginUrl = "/wlyy/prescription/login.html";
        loginUrl = "../login/login.html";
        imgServer = "http://www.xmtyw.cn/";
        if(isInner){
            server = "http://10.95.22.10:8011/wlyy/"
            imserver = "http://10.95.22.138:3000/api/v2";
            socketUrl = "http://10.95.22.138:3000";
            loginUrl = "/wlyy/prescription/login.html";
            loginUrl = "../login/login.html";
            imgServer = "http://10.95.22.10:8011/";
        }
    } else { // 测试环境配置
@@ -32,7 +32,7 @@
//      imserver = "http://192.168.131.24:3000/api/v2"
//      socketUrl = "http://192.168.131.24:3000";
        loginUrl = "/wlyy/prescription/login.html";
        loginUrl = "../login/login.html";
//      loginUrl = "/PC-prescription/login.html"; //自己本地测试时的路径
        imgServer = "http://172.19.103.54/";
    }
@@ -155,7 +155,7 @@
            sessionStorage.setItem("wlyy_relogin", 1)
//          var path = top.location.pathname,
//              rootPath = path.split("/")[1];
            top.location.replace(top.location.origin+loginUrl + '?redirect_url=' + encodeURIComponent(top.location.href))
            top.location.replace(loginUrl + '?redirect_url=' + encodeURIComponent(top.location.href))
        }, 2000)
    }
@@ -172,7 +172,7 @@
        if(tip) {
            count ++;
            if(count == 1){
                toastr && toastr.warning(tip)
//              toastr && toastr.warning(tip)
                toLoginPage()
            }
        }

api/statistics-api.js

@@ -1,5 +1,9 @@
(function(exports) {
    var statisticAPI = {
        /*************首页*******************/
        getSignInfo: function(data){
            return httpRequest.get("/statistics/sign_info", {data: data});
        },
        /*************总体分析页面接口列表**************/
        //1、顶部各个tab的值
        statisticTotal: function(data){

app/statistics/home.html

@@ -11,6 +11,7 @@
        <link rel="shortcut icon" href="../../favicon.ico">
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../plugins/artDialog/6.0.5/api/css/ui-dialog.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"/>
@@ -31,8 +32,44 @@
                    <img v-show="isopen" @click="open" src="../../images/zhankai_icon.png" width="18" height="18" />
                </div>
            </div>
            <!-- -->
            
            <!-- 饼图 -->
            <div class="mt10 mb30">
                <div class="c-row">
                    <div class="c-33 c-t-center c-position-r" @click="goToPage(1)">
                        <div class="div-radius-panel">
                            <div class="c-f16 c-12b7f5 mt15">{{signRateData.sign.text}}</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.sign.sign}}</span>/
                            <span class="c-f12 c-333 qianyuezong">{{signRateData.sign.people}}</span>
                        </div>
                    </div>
                    <div class="c-33 c-t-center c-position-r" @click="goToPage(1)">
                        <div class="div-radius-panel">
                            <div class="c-f16 c-12b7f5 mt15">{{signRateData.signTask.text}}</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.signTask.sign}}</span>/
                            <span class="c-f12 c-333">{{signRateData.signTask.people}}</span>
                        </div>
                    </div>
                    <div class="c-33 c-t-center c-position-r" @click="goToPage(2)">
                        <div class="div-radius-panel">
                            <div class="c-f16 c-12b7f5 mt15">{{signRateData.renew.text}}</div>
                            <div class="c-f14 c-666">续签率</div>
                        </div>
                        <div id="renewMain" class="c-100" style="height: 120px;"></div>
                        <div class="c-f12 c-999 div-data-value">
                            <span class="c-f12 c-12b7f5">{{signRateData.renew.sign}}</span>/
                            <span class="c-f12 c-333">{{signRateData.renew.people}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--签约分析-->
            <div class="mt10">
                <div class="section-header plr10">
@@ -68,6 +105,8 @@
        <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/artDialog/6.0.5/api/js/dialog-plus.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>

app/statistics/js/common.js

@@ -67,8 +67,9 @@ function soreRank(arr){
 * 绘制饼图
 * arry [{name: '', value: ''}]
 * color ['#ffc800', '#17b3ec']
 * silent 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
 */
function drawPieChart(elId, arry, color){
function drawPieChart(elId, arry, color, silent){
    var myChart = echarts.init(document.getElementById(elId));
    var option = {
        tooltip: {
@@ -85,6 +86,7 @@ function drawPieChart(elId, arry, color){
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            silent: silent,
            label: {
                normal: {
                    show: false,
@@ -103,6 +105,7 @@ function drawPieChart(elId, arry, color){
    };
    $("#"+elId).removeAttr("_echarts_instance_");
    myChart.setOption(option);
    return myChart;
}
/**

app/statistics/js/home.js

@@ -41,7 +41,27 @@ new Vue({
			photo: '../../images/changcufangfenxi_icon.png',
			label: '长处方分析',
			url: 'prescription-analysis.html'
		}]
		}],
		signRateData: {
		    signTask: {
		        text: '',
		        rate: '0.00',
		        sign: 0,
		        people: 0
		    },
		    sign: {
		        text: '',
		        rate: '0.00',
		        sign: 0,
		        people: 0
		    },
		    renew: {
		        text: '',
		        rate: '0.00',
		        sign: 0,
		        people: 0
		    }
		}
	},
	methods: {
		open: function() {
@@ -49,6 +69,13 @@ new Vue({
		},
		showDetail: function(url) {
			window.location.href = url;
		},
		goToPage: function(val){
		    var url = "sign-progress.html";
		    if(val == 2){
		        url = "renew-progress.html";
		    }
		    window.location.href = url;
		}
	},
	mounted: function() {
@@ -70,6 +97,71 @@ new Vue({
				code: val
			});
			window.localStorage.setItem("selectedRole", JSON.stringify(selected));
		    getSignData(this);
		}
	}
})
})
function getSignData(vm){
    var code = vm.selectedRole,
        now = new Date(),
        params = {
            area: code,
            level: code == '350200' ? 4 : code.length == 6 ? 3 : 2,
            endDate: now.format("yyyy-MM-dd")
        };
    statisticAPI.getSignInfo(params).then(function(res){
        if(res.status == 200){
            var data = res.data;
            vm.signRateData = {
                signTask: {
                    text: formatRate(data.signTaskRate.rate),
                    rate: '0.00',
                    sign: data.signTaskRate.sign,
                    people: data.signTaskRate.people
                },
                sign: {
                    text: formatRate(data.signRate.rate),
                    rate: '0.00',
                    sign: data.signRate.sign,
                    people: data.signRate.people
                },
                renew: {
                    text: data.renewRange,
                    rate: '0.00',
                    sign: data.renew.split("/")[0],
                    people: data.renew.split("/")[1]
                }
            }
            var signArr = [
                    {name: "签约数", value: data.signRate.sign},
                    {name: "未签约数", value: data.signRate.people - data.signRate.sign},
                ],
                signTaskArr = [
                    {name: "签约数", value: data.signTaskRate.sign},
                    {name: "未达标数", value: data.signTaskRate.people - data.signTaskRate.sign}
                ],
                val = data.renew.split("/")[1] - data.renew.split("/")[0],
                renewArr = [
                    {name: "续签数", value: data.renew.split("/")[0]},
                    {name: "未达标数", value: val<0 ? 0 : val}
                ],
                color = ['#12b7f5', '#EBEBF5'];
            var signChart = drawPieChart("signMain", signArr, color, true);
            var completeChart = drawPieChart("completeMain", signTaskArr, color, true);
            var renewChart = drawPieChart("renewMain", renewArr, color, true);
            window.onresize = function() {
                signChart.resize();
                completeChart.resize();
                renewChart.resize();
            }
        }else{
            console.log(res.msg);
        }
    })
}
function formatRate(str){
    var val = parseFloat(str);
    return val.toFixed(2)+"%";
}