Home Explore Help
Register Sign In
raolu
/
PC-application
Watch 0
Star 0
Fork 1
Files Issues 0 Pull Requests 0 Wiki
Browse Source

祝福分析 功能

zhangyanfang 5 years ago
parent
a22ae3c3cf
commit
f87511e388
8 changed files with 1060 additions and 1 deletions
Split View Show Diff Stats
  1. 157 0
      app/statistics/css/blessing-analysis.css
  2. 125 0
      app/statistics/html/blessing-analysis.html
  3. 399 0
      app/statistics/js/blessing-analysis.js
  4. 7 1
      app/statistics/js/home.js
  5. 116 0
      component/statistics/area-data-panel3.js
  6. 256 0
      component/statistics/line-chart2.js
  7. BIN
      images/wenhao.png
  8. BIN
      images/zhufufenxi_icon_pc.png

+ 157 - 0
app/statistics/css/blessing-analysis.css
View File 

@ -0,0 +1,157 @@
 
* {
 
    box-sizing: border-box;
 
}
 
.bgc-f2f3f5 {
 
    background-color: #f2f3f5;
 
}
 
.el-input__inner {
 
    height: 28px;
 
    line-height: 28px;
 
    width: 180px;
 
}
 
.el-input__icon {
 
    line-height: 28px;
 
}
 
.selectYear {
 
    padding: 20px;
 
}
 
.flex-box {
 
    display: -webkit-box;
 
    display: -ms-flexbox;
 
    display: flex;
 
    -webkit-box-pack: center;
 
    -ms-flex-pack: center;
 
    -webkit-box-align: center;
 
    -ms-flex-align: center;
 
    align-items: center;
 
}
 
.leftBlock {
 
    border-right: 1px solid rgba(255,255,255,0.4);
 
    height: 100%;
 
    width: 40%;
 
    padding-top: 20px;
 
}
 
.bottomBorder{
 
    border-bottom: 1px solid rgba(255,255,255,0.4);
 
}
 
.rightBlock{
 
    height: 100%;
 
    width: 60%;
 
}
 
.rightBlock .top,.rightBlock .bottom{
 
    height: 50%;
 
}
 
.percent{
 
    padding-top: 35px;
 
}
 
.mainBlocktop {
 
    width: 480px;
 
    height: 195px;
 
    background-image: linear-gradient(90deg,
 
            #5a83ff 0%,
 
            #1954fd 100%),
 
        linear-gradient(#f36161,
 
            #f36161);
 
    background-blend-mode: normal,
 
        normal;
 
    border-radius: 6px;
 
    color: #fff;
 
    font-size: 16px;
 
}
 
.mainBlockbottom {
 
    width: 480px;
 
    height: 195px;
 
    font-size: 16px;
 
    background-image: linear-gradient(90deg,
 
            #ff8145 0%,
 
            #ffba78 100%),
 
        linear-gradient(90deg,
 
            #5a83ff 0%,
 
            #1954fd 100%),
 
        linear-gradient(#f36161,
 
            #f36161);
 
    background-blend-mode: normal,
 
        normal,
 
        normal;
 
    border-radius: 6px;
 
    color: #fff;
 
}
 
.bottomTable{
 
    border-radius: 6px;
 
}
 
.bottomTable .title{
 
    padding-left: 16px;
 
    letter-spacing: 0px;
 
}
 
.bgc-ebebf5{
 
    background-color: #ebebf5;
 
}
 
.area-tab span,.panelTop{
 
    height: 60px;
 
    font-size: 18px;
 
    color: #333;
 
}
 
.panelTop{
 
    line-height: 60px;
 
}
 
.bottom-list-table{
 
    margin-top: 18px;
 
}
 
.bottom-list-table thead{
 
    background-color: rgba(23, 179, 236, 0.1);
 
}
 
.bottom-list-table td{
 
    border-bottom: none;
 
}
 
.bottom-list-table tbody>tr,td{
 
    border-bottom: none;
 
}
 
.bottom-list-table td,.bottom-list-table th{
 
    border: 1px solid #e1e1e1;;
 
}
 
.bottom-list-table th{
 
    font-weight: normal;
 
    color: #333;
 
}
 
.bottom-list-table {
 
    border-collapse:collapse;
 
}
 
.toJump:hover{
 
    color: #12b7f5;
 
    border-bottom: 1px solid #12b7f5;
 
    cursor: pointer;
 
}
 
.bottom-list-table tbody>tr:hover {
 
	background-color: #fff;
 
}
 
.bottom-list-table thead tr,.bottom-list-table tr{
 
    height: 50px;
 
    font-size: 16px;
 
}
 
.shadow {
 
    position: absolute;
 
    left:104px;
 
    top: 34px;
 
    background-color: rgba(50, 50, 50, 0.701961);
 
    border-color: rgb(51, 51, 51);
 
    color: rgb(255, 255, 255);
 
    font-size: 14px;
 
    font-family: sans-serif;
 
    border-radius: 4px;
 
    padding: 5px;
 
    visibility: hidden;
 
    min-width: 310px;
 
    z-index: 99999;
 
    text-align: left;
 
}
 
.shadowTop{left: 88px;min-width: 300px;}

+ 125 - 0
app/statistics/html/blessing-analysis.html
View File 

@ -0,0 +1,125 @@
 
<!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/element-ui.css" />
 
    <link href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
 
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
 
    <link rel="stylesheet" href="../css/blessing-analysis.css">
 
</head>
 
<body style="margin: 0;">
 
    <div id="main" class="c-hide"  v-loading.fullscreen.lock="isloading">
 
        <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isopen="isopen"></header-tab>
 
        <!-- 年份选择 -->
 
        <div class="bgc-f2f3f5 selectYear">
 
            <label class="c-333 c-f14" for="">时间：</label>
 
            <el-select v-model="chooseYear" @change="selectChange">
 
                <el-option v-for="(item , index) in years" :label="item" :value="item"></el-option>
 
            </el-select>
 
        </div>
 
        <!-- 百分比 折线图-->
 
        <div class="flex-box">
 
            <div class="ml20">
 
                <div class="flex-box mainBlocktop">
 
                    <div class="leftBlock" style="position: relative;">
 
                        <div class="pl20">发送率
 
                            <img  @mouseenter="jumpTip(1)" @mouseleave="leaveTip(1)" src="../../../images/wenhao.png" alt="" class="tip">
 
                        </div>
 
                        <div id="shadow1" class="shadow shadowTop">发送率=已发送生日祝福的居民量/生日居民量</div>
 
                        <div class="c-f28 c-t-center percent">{{sendRate}}</div>
 
                    </div>
 
                    <div class="rightBlock">
 
                        <div class="top bottomBorder">
 
                            <div class="pt20 pl20">
 
                                已发送量
 
                            </div>
 
                            <div class="c-t-center c-f22">
 
                                {{sendCount}}
 
                            </div>
 
                        </div>
 
                        <div class="bottom">
 
                            <div class="pt20 pl20">
 
                                生日居民量
 
                            </div>
 
                            <div class="c-t-center c-f22">{{total}}</div>
 
                        </div>
 
                    </div>
 
                </div>
 
                <div class="flex-box mainBlockbottom mt10">
 
                    <div class="leftBlock" style="position: relative;">
 
                        <div class="pl20">未发送率
 
                            <img  @mouseenter="jumpTip(2)" @mouseleave="leaveTip(2)" src="../../../images/wenhao.png" alt="" class="tip">
 
                        </div>
 
                        <div id="shadow2" class="shadow">未发送率=未发送生日祝福的居民量/生日居民量</div>
 
                        <div class="c-f28 c-t-center percent">{{noSendRate}}</div>
 
                    </div>
 
                    <div class="rightBlock">
 
                        <div class="top bottomBorder">
 
                            <div class="pt20 pl20">
 
                                未发送量
 
                            </div>
 
                            <div class="c-t-center c-f22">
 
                                {{noSendCount}}
 
                            </div>
 
                        </div>
 
                        <div class="bottom">
 
                            <div class="pt20 pl20">
 
                                生日居民量
 
                            </div>
 
                            <div class="c-t-center c-f22">{{total}}</div>
 
                        </div>
 
                    </div>
 
                </div>
 
            </div>
 
            <!-- 折线图 -->
 
            <line-chart v-on:getlinedata="getNewLineData" lineid="lineChart" class="mlr8"></line-chart>
 
        </div>
 
        <!-- 底部表格 -->
 
        <div class="c-border bottomTable m20 mb0">
 
            <div class="c-f16 c-333 title ptb20">未发送生日祝福</div>
 
            <!-- 底部区域图 -->
 
            <area-data-panel class="mlr8" v-on:getnewdata="getAreaData"></area-data-panel>
 
            <div class="tableBlock">
 
            </div>
 
        </div>
 
        <!--模态框组件-->
 
        <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/element-ui.js" type="text/javascript" charset="utf-8"></script>
 
    <script src="../../../plugins/toastr/toastr.min.js"></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-chart2.js" type="text/javascript" charset="utf-8"></script>
 
    <script src="../../../component/statistics/area-data-panel3.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/blessing-analysis.js" type="text/javascript" charset="utf-8"></script>
 
</body>
 
</html>

+ 399 - 0
app/statistics/js/blessing-analysis.js
View File 

@ -0,0 +1,399 @@
 
var reqList = []; //记录请求的参数和url，用于后退时使用
 
Vue.use(Vuedals.default);
 
new Vue({
 
	el: "#main",
 
	data: {
 
		appname: "祝福分析",
 
		years: [],
 
		isback: true,
 
		isrefresh: true,
 
		isopen: false,
 
		//请求页面所需参数
 
		level: '',
 
		area: '',
 
		areaTitle: '',
 
		index: '3',
 
		selectedDateType: 3, //折线图坐标值1-日，2-周，3-月
 
		endDate: '',
 
		startDate: '',
 
		lowLevel: '',
 
		lowCode: '',
 
		chooseYear: '',
 
		userRole: '',
 
		analysisType: "1", // 筛选维度的id, 1-按任务，2-按人口，3-高血压，4-糖尿病，5-65岁以上人群
 
		analysisName: "按任务",
 
		signRateData: {
 
			signRateText: "",
 
			signRate: "",
 
			signAmount: "",
 
			signRateAll: "",
 
			completeRateText: "",
 
			completeRate: "",
 
			completeAmount: "",
 
			completeRateAll: ""
 
		},
 
		sendRate:null,
 
		noSendRate:null,
 
		sendCount:null,
 
		noSendCount:null,
 
		total:null,
 
		yearHtml: "",
 
		contentHtml: "",
 
		isloading:false,
 
	},
 
	components: {
 
		vuedals: Vuedals.Component
 
	},
 
	methods: {
 
		getNewLineData: function (arg) {
 
			this.selectedDateType = arg.dateType;
 
			loadData([1], this);
 
		},
 
		selectChange: function () {
 
			var vm=this
 
			vm.startDate = getStartDate(vm.chooseYear);
 
			vm.endDate = getEndDate(vm.chooseYear);		
			//请求参数重置，页面类型重新开始
 
			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
 
			});
 
			//然后清空请求列表数组
 
			reqList.splice(0, reqList.length);
 
			loadData([0, 1, 2], vm); //刷新数据
 
			//存储请求所带的参数
 
			reqList.push({
 
				level: vm.level,
 
				area: vm.area,
 
				areaTitle: vm.areaTitle,
 
				index: vm.index,
 
				endDate: vm.endDate,
 
				startDate: vm.startDate,
 
				lowLevel: vm.lowLevel,
 
				lowCode: vm.lowCode,
 
				analysisType: vm.analysisType
 
			});
 
			EventBus.$emit('update-statistics-year', {
 
				selectDate: vm.chooseYear + "年"
 
			}); //更新年份
 
			EventBus.$emit('update-statistics-time', {}); //更新统计时间
 
		},
 
		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,
 
				index: this.index,
 
				endDate: this.endDate,
 
				startDate: this.startDate,
 
				lowLevel: this.lowLevel,
 
				lowCode: this.lowCode,
 
				analysisType: this.analysisType,
 
			})
 
		},
 
		jumpTip: function (tab) {
 
			$('#shadow' + tab).css("visibility", "visible")
 
		},
 
		leaveTip: function (tab) {
 
			$('#shadow' + tab).css("visibility", "hidden")
 
		},
 
	},
 
	mounted: function () {
 
		//初始化数据
 
		initData(this);
 
		// 初始化年份
 
		initYear(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,
 
			analysisType: this.analysisType
 
		});
 
		//设置监听器， 监听折线图日期变化
 
		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.$emit('update-area-name', { areaName: vm.areaTitle });
 
			}
 
		});
 
		//监听页面刷新
 
		EventBus.$on("refresh-click", function (arg) {
 
			EventBus.$emit('update-statistics-time', {}); //更新统计时间
 
			loadData([0, 1, 2], vm);
 
		});
 
		$("#main").removeClass("c-hide");
 
	}
 
})
 
function initData(vm) {
 
	//获得缓存中缓存的角色权限
 
	var userRole = window.sessionStorage.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: vm.chooseYear + "年",
 
		dimensionVal: vm.analysisName
 
	});
 
}
 
function initReqParams(vm) {
 
	vm.index = 13;
 
	if (vm.lowCode) {
 
		vm.index = 17;
 
	}
 
	reqParam = [{
 
		url: "/statistics/article_total",
 
		reqType: 'get',
 
		data: {
 
			index:'98,99',
 
			level: vm.level,
 
			area: vm.area,
 
			year: vm.chooseYear,
 
			endDate: vm.endDate,
 
			startDate: vm.startDate,
 
		}
 
	}, {
 
		url: "/statistics/interval",
 
		reqType: 'get',
 
		data: {
 
			index: '99',
 
			level: vm.level,
 
			area: vm.area,
 
			startDate: vm.startDate,
 
			endDate: vm.endDate,
 
			interval: vm.selectedDateType,
 
		}
 
	}, {
 
		url: "/statistics/birthday_lowlevel_total",
 
		reqType: 'get',
 
		data: {
 
			sort: 1,
 
			endDate: vm.endDate,
 
			level: vm.level,
 
			area: vm.area,
 
		}
 
	}];
 
	if (vm.lowLevel) {
 
		reqParam[2].data.lowLevel = vm.lowLevel;
 
	}
 
	return reqParam;
 
}
 
function initYear(vm) {
 
	var now = new Date(),
 
		year = now.getFullYear();
 
	if (now.getMonth() < 6) {
 
		year--;
 
	}
 
	for (i = year; i >= 2018; i--) {
 
		vm.years.push(i);
 
	}
 
}
 
function getTopTagDatas(data, vm) {
 
		// 指标98已发送，99未发送
 
		vm.total=parseFloat(data.index_98+data.index_99)
 
		vm.sendCount=data.index_98
 
		vm.noSendCount=data.index_99
 
		vm.sendRate=vm.total!=0?data.index_98 / vm.total *100 +'%':'0%'
 
		vm.noSendRate=vm.total!=0?data.index_99 / vm.total *100 +'%':'0%'	
	window.onresize = function () {
 
		window.lineCharts.resize(); //日周月折线图
 
	}
 
}
 
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]);
 
	}
 
	vm.isloading=true    
	if (reqPromise.length > 0) {
 
		Promise.all(reqPromise).then(function (ress) {
 
		vm.isloading=false
 
			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'],
 
		index_names = {
 
			'index_99': '未发送量'
 
		};
 
	for (var p in data) {
 
		names.push(index_names[p]);
 
		var xData = _.map(data[p], function (o) {
 
			return o.range;
 
		});
 
		var yData = _.map(data[p], 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,
 
		markLineValue: null,
 
		markLineName: "目标量",
 
		endDate:vm.endDate,
 
		startDate:vm.startDate
 
	});
 
}
 
function listHandle(data, vm) {
 
	for (i in data) {
 
		var list = data[i];
 
		var topArr = [];
 
		topArr = soreRank(getKeyValueArr(list, 'notPushNum'));
 
		var arr = _.map(list, function (o, index) {
 
			var cols = [];
 
			cols.push(topArr[index])
 
			cols.push(o.name)
 
			cols.push(o.notPushNum)
 
			cols.push(o.amount)
 
			cols.push(o.notPushRate)
 
			return {
 
				rank: topArr[index],
 
				code: o.code,
 
				name: o.name,
 
				cols: cols
 
			}
 
		});
 
		var headers = ["排名", "各区", "未发送量", "生日居民", "未发送率"]; //analysisType=2 为按人口
 
		if (vm.lowLevel == 2 || vm.level == 3) {	//社区
 
			headers = ["排名", "社区", "未发送量", "生日居民", "未发送率"];
 
		}
 
		if (vm.lowLevel == 1 || vm.level == 2) { //团队
 
			headers = ["排名", "团队", "未发送量", "生日居民", "未发送率"];
 
		}
 
		EventBus.$emit("render-area-data", {
 
			level: vm.level,
 
			area: vm.area,
 
			lowLevel: vm.lowLevel,
 
			headers: headers,
 
			rows: arr
 
		});
 
	}
 
}
 
//获取结束时间
 
function getEndDate(chooseYear) {
 
	chooseYear = parseInt(chooseYear);
 
	var endDate = new Date((chooseYear + 1) + '-06-29'),
 
		now = new Date();
 
	var yesterday = new Date(now.setDate(now.getDate() - 1))
 
	if (yesterday <= endDate) {
 
		return yesterday.format("yyyy-MM-dd");
 
	} else {
 
		return (chooseYear + 1) + '-06-29';
 
	}
 
}

+ 7 - 1
app/statistics/js/home.js
View File 

@ -50,7 +50,13 @@ new Vue({
 
			label: '长处方分析',
 
			url: 'prescription-analysis.html',
 
			allowArea:"",
 
		}, {
 
		},{
 
			photo: '../../../images/zhufufenxi_icon_pc.png',
 
			label: '祝福分析',
 
			url: 'blessing-analysis.html',
 
			allowArea:"",	
		},
 
		 {
 
			photo: '../../../images/shangmenfuwu_icon.png',
 
			label: '上门服务',
 
			url: 'smfw-analysis.html',

+ 116 - 0
component/statistics/area-data-panel3.js
View File 

@ -0,0 +1,116 @@
 
(function(){
 
    Vue.component('area-data-panel',{
 
        template: `<div class="area-panel">\
 
                <div class="ui-grid bgc-ebebf5 panelTop">\
 
                    <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!=1) || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
 
                    <div v-show="showTeamTab" class="area-tab" :class="{\'active\': level==2 || lowLevel==1}" @click="getLowCodeData(1)"><span>团队</span></div>\
 
                </div>\
 
                <table class="bottom-list-table mb20" id="listTable">\
 
                    <thead><tr>\
 
                        <th v-for="th in headers">{{th}}</th>\
 
                    </tr></thead>\
 
                    <tbody>\
 
                        <tr v-for="row in rows" class="data-row">\
 
                            <td v-for="(col, index) in row.cols">\
 
                                <span v-if="index==1&&level>2 && lowLevel != 1" :class="{\'toJump\':(index==1&&level>2 && lowLevel != 1)}" @click="getLowLeverData(row)">{{col}}</span>
 
                                <span v-else>{{col}}</span>\
 
                            </td>\
 
                        </tr>\
 
                    </tbody>\
 
                </table>\
 
            </div>`,
 
        props:[],
 
        data: function(){
 
            return {
 
                level: '',
 
                lowLevel: '',
 
                area: '',
 
                headers: [],
 
                rows: [],
 
                cityLevelNoShowTeamTab: false,
 
                districtLevelNoShowTeamTab: false
 
            }
 
        },
 
        mounted: function(){
 
            var vm = this;
 
            EventBus.$on("render-area-data", function(arg){
 
                vm.level = arg.level;
 
                vm.lowLevel = arg.lowLevel;
 
                vm.area = arg.area;
 
                vm.headers = arg.headers;
 
                vm.rows = arg.rows;
 
                vm.cityLevelNoShowTeamTab = arg.cityLevelNoShowTeamTab;
 
                vm.districtLevelNoShowTeamTab = arg.districtLevelNoShowTeamTab;
 
            })
 
        },
 
        computed: {
 
            showTeamTab: function(){
 
                if(this.cityLevelNoShowTeamTab){
 
                    if(this.level == 4){
 
                        return false;
 
                    }else{
 
                        if(this.districtLevelNoShowTeamTab){
 
                            if(this.level == 3){
 
                                return false;
 
                            }else{
 
                                return true;
 
                            }
 
                        }else{
 
                            return true;
 
                        }
 
                    }
 
                }else{
 
                    return true;
 
                }
 
            }
 
        },
 
        methods: {
 
            getLowLeverData: function(row){
 
                if(this.level > 2 && this.lowLevel != 1){
 
                    //跳转去下一级数据
 
                    if(this.lowLevel && (this.level - this.lowLevel) >= 2){
 
                        //从次级tab的内容查看再下一级的数据
 
                        this.level = this.level - 2;
 
                        this.lowLevel --;
 
                    }else{
 
                        this.level --;
 
                        this.lowLevel = '';
 
                    }
 
                    this.area = row.code;
 
                    this.areaTitle = row.name;
 
                    //触发组件监听事件,去父页面请求新的数据
 
                    this.$emit("getnewdata", {
 
                        level: this.level,
 
                        area: this.area,
 
                        areaTitle: this.areaTitle,
 
                        lowLevel: this.lowLevel,
 
                    });
 
                }else{
 
                    // //弹框显示团队信息
 
                    // Vuedals.Bus.$emit('new', {
 
                    //     title: '团队信息',
 
                    //     component: 'team-info',
 
                    //     props: {
 
                    //         teamId: row.code
 
                    //     }
 
                    // });
 
                }
 
            },
 
            getLowCodeData: function(code){
 
                if(code == 3){
 
                    this.lowLevel = '';
 
                }else{
 
                    this.lowLevel = code;
 
                }
 
                
                //触发组件监听事件,去父页面请求新的数据
 
                this.$emit("getnewdata", {
 
                    level: this.level,
 
                    area: this.area,
 
                    lowLevel: this.lowLevel
 
                });
 
            }
 
        }
 
    });
 
})()

+ 256 - 0
component/statistics/line-chart2.js
View File 

@ -0,0 +1,256 @@
 
(function(){
 
    var startDate,
 
        endDate,
 
        chooseYear;
 
    Vue.component('line-chart',{
 
        template: '<div class="mtb10 bgc-fff c-border pb10" style="width:100%;height:400px;border-radius:6px;">\
 
            <div class="ui-grid ui-grid-middle plr15 p20">\
 
                <div class="ui-col-1">\
 
                    <span class="c-333 c-f16">{{panelName}}</span>\
 
                </div>\
 
                <div v-if="!showDatePanel" class="ui-col-1 c-f16 c-333 c-t-right"><span>{{startDate}}</span> ~ <span>{{endDate}}</span></div>\
 
            </div>\
 
            <div class="ui-grid ui-grid-middle mt5 plr10">\
 
                <div v-if="showDatePanel" class="ui-col-1" >\
 
                    <span>数据时间:</span>\
 
                    <el-date-picker\
 
                      v-model="dateValue"\
 
                      type="daterange"\
 
                      align="right"\
 
                      unlink-panels\
 
                      range-separator="至"\
 
                      start-placeholder="开始日期"\
 
                      end-placeholder="结束日期"\
 
                      :default-value="defaultValue"\
 
                      :picker-options="pickerOptions2"\
 
                      @change="dateChange"\
 
                    >\
 
                    </el-date-picker>\
 
                </div>\
 
            </div>\
 
            <div class="line-chart" :id="lineid" style="height: 300px; width: 100%;"></div>\
 
        </div>',
 
        props:['lineid', 'showDatePanel', "chooseYear"],
 
        data: function(){
 
            return {
 
                selectedDateType: 3,
 
                startDate: "", //数据展示时显示的开始时间
 
                endDate: "", //数据展示时显示的结束时间
 
                panelName: "",
 
                unit: "人",
 
                dateValue: "",
 
                defaultValue: [],
 
                pickerOptions2: {
 
                    shortcuts: [{
 
                        text: '最近一周',
 
                        onClick: function(picker) {
 
                          var end = new Date();
 
                          var start = new Date();
 
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 
                          picker.$emit('pick', [start, end]);
 
                        }
 
                    }, {
 
                        text: '最近一个月',
 
                        onClick: function(picker) {
 
                          var end = new Date();
 
                          var start = new Date();
 
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
 
                          picker.$emit('pick', [start, end]);
 
                        }
 
                    }, {
 
                        text: '最近三个月',
 
                        onClick: function(picker) {
 
                          var end = new Date();
 
                          var start = new Date();
 
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
 
                          picker.$emit('pick', [start, end]);
 
                        }
 
                    }],
 
                    disabledDate: function(d){
 
                        var start = new Date(getStartDate(chooseYear)+" 00:00:00"),
 
                            end = new Date(getEndDate(chooseYear)+" 23:59:59");
 
                        return d < start || d > end;
 
                    }
 
                }
 
            }
 
        },
 
        methods: {
 
            changeType: function(type){
 
                this.selectedDateType = type;
 
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
 
                this.$emit("getlinedata", {dateType: type});
 
            },
 
            dateChange: function(val){
 
                var start = val[0].format("yyyy-MM-dd"),
 
                    end = val[1].format("yyyy-MM-dd");
 
                this.$emit("getlinedata", {dateType: this.selectedDateType, dateValue: [start, end]});
 
            }
 
        },
 
        mounted: function(){
 
            var vm = this;
 
            EventBus.$on("draw-line-chart", function(arg){
 
                vm.panelName = arg.panelName;
 
                if(arg.selectedDateType){
 
                    vm.selectedDateType = arg.selectedDateType;
 
                }
 
                if(arg.unit){
 
                    vm.unit = arg.unit;
 
                }
 
                vm.dateValue = arg.dateValue;
 
                vm.chooseYear = arg.chooseYear;
 
                chooseYear = arg.chooseYear;
 
                drawLine(vm, arg);
 
            })
 
            
            EventBus.$on("change-date-value", function(arg){
 
                this.defaultValue = arg;
 
            })
 
            // vm.changeType(3)
 
        }
 
    });
 
    
    function drawLine(vm, arg){
 
        var lineCharts = echarts.init(document.getElementById(vm.lineid));
 
        var xData = arg.xData,
 
            yDatas = arg.yDatas,
 
            names = arg.quotaNames,
 
            colors = arg.colors,
 
            markLineValue = arg.markLineValue,
 
            markLineName = arg.markLineName;
 
        //处理数据, 数据按照20条数一屏展示
 
//      var lastIndex = xData.length % 20;
 
        if(xData.length > 20 ){  
            dataZoom_end = 100-(19/xData.length)*100;  
        }else{  
            dataZoom_end = 0;
 
        }
 
        //初始结束时间
 
        var lastValue = xData[xData.length - 1];
 
        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
 
            vm.endDate = lastValue;
 
        }else if(vm.selectedDateType == 3){
 
            var val = lastValue.substr(5,2)+"月"
 
            vm.endDate = arg.endDate;
 
            vm.startDate=arg.startDate
 
        }
 
        var options = {
 
            tooltip: {
 
                trigger: 'axis'
 
            },
 
            color: colors,
 
            grid: {
 
                show: false,
 
                left: '20px',
 
                right: '20px',
 
                bottom: '40px',
 
                top: '20px',
 
                containLabel: true
 
            },
 
            xAxis: {
 
                type: 'category',
 
                boundaryGap: false,
 
                data: xData,
 
                axisLabel: {
 
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
 
                        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
 
                            // if(index == 0){
 
                            //     vm.startDate = value;
 
                            //     return value.substr(5,2)+"月"+value.substr(8,2);
 
                            // }else{
 
                            //     if(index == 19){
 
                            //         vm.endDate = value;
 
                            //     }
 
                            //     return value.substr(8,2);
 
                            // }
 
                        }else if(vm.selectedDateType == 3){
 
                            var val = value.substr(5,2)+"月"
 
                            if(index == 0){
 
                                // vm.startDate = value;
 
                            }else{
 
                                if(index == 19){
 
                                    vm.endDate = value;
 
                                }
 
                            }
 
                            return val;
 
                        }
 
                    }
 
                }
 
            },
 
            yAxis: {
 
                type: 'value',
 
                axisPointer: {
 
                    snap: true
 
                },
 
                scale: true,
 
                minInterval: 1,
 
                boundaryGap: ['10%', '30%'],
 
                splitLine: {show:false}
 
            },
 
            dataZoom: [{//给x轴设置滚动条  
//              show: false,
 
                start: dataZoom_end,
 
                end: 100,
 
                type: 'slider',
 
                zoomLock: false,
 
            },{ //下面这个属性是内容区域配置
 
                start: dataZoom_end,
 
                end: 100,
 
                type: 'inside',
 
                zoomLock: false,
 
            }]
 
        };
 
        var series = [];
 
        for(var i=0; i<yDatas.length; i++){
 
            var obj = {
 
                name: names[i],
 
                type: 'line',
 
                smooth: true,
 
                data: yDatas[i],
 
                lineStyle:{
 
                    normal:{
 
                        color: colors[i]
 
                    }
 
                }
 
            };
 
            series.push(obj);
 
        }
 
        options.series = series;
 
        if(markLineValue){ 
            //目前统计只有签约统计页面有目标量
 
            $.extend(options.yAxis, {
 
                min: function(value) {
 
                    if(value.min > markLineValue){
 
                        return markLineValue / 2;
 
                    }else{
 
                        return value.min / 2;
 
                    }
 
                },
 
                max: function(value){
 
                    if(value.max > markLineValue){
 
                        return parseInt(value.max * 1.5);
 
                    }else{
 
                        return parseInt(markLineValue * 1.2);
 
                    }
 
                }
 
            });
 
            $.extend(options.series[0], {markLine: {
 
                    data:[
 
                        {yAxis: markLineValue, name: markLineName}
 
                    ],
 
                    label:{
 
                        show: true,
 
                        position: 'middle',
 
                        formatter: '{b}: {c}'
 
                    },
 
                    lineStyle:{
 
                        color: 'rgb(194,53,49)'
 
                    }
 
            }});
 
        }
 
//          console.log(JSON.stringify(options));
 
        $("#"+vm.lineid).removeAttr('_echarts_instance_')
 
        lineCharts.setOption(options);
 
        window.lineCharts = lineCharts;
 
    }
 
})()

BIN
images/wenhao.png
View File


BIN
images/zhufufenxi_icon_pc.png
View File