yzCctvHelm/assets/certificate.js

var _this;
var nowTime = new Date().getTime();
var periodChart, typeChart;
new Vue({
	el: '#app',
	data: function() {
		return {
			statisLi: [{"name":"证书总数", "value":0, "colr":"#008dd4"},
					   {"name":"正常期限", "value":0, "colr":"#00d42a"},
					   {"name":"即将到期", "value":0, "colr":"#d1d400"},
					   {"name":"已过期", "value":0, "colr":"#d40000"}],
			tableData: [],
			warmList:[],
			queryParams: {
				pageNum: 1,
				pageSize: 9999,
				orderByColumn: "certificateEffectiveDate",
				isAsc: "descending"
			}
		}
	},
	created() {
		_this = this;
	},  
	mounted:function(){
		periodChart = echarts.init(document.getElementById('periodChart'));
		typeChart = echarts.init(document.getElementById('typeChart'));
		_this.getList();
	},
	methods: {
		getList(){
			getCertificateList(_this.queryParams).then((response) => {
				let _obj = response.rows;
				let dataList = [0, 0, 0, 0, 0], _warm = [];
				let carDistr = [{"name":"船舶证书","value":0},
							   {"name":"船员证书","value":0}];
				_obj.map((item,index)=>{
					if(isNaN(item.certificateEffectiveDate) && !isNaN(Date.parse(item.certificateEffectiveDate))){
						let time = _this.getDaysBetween(nowTime, item.certificateEffectiveDate);
						item.nextTime = time;
						if (time > 365) {
							dataList[1] += 1;
						} else if (time > 31 && time < 366) { 
							dataList[2] += 1;
						} else if (time > -1 && time < 32) {
							dataList[3] += 1;
							_warm.push(item);
						} else if (time < 0) {
							_warm.push(item);
							dataList[4] += 1;
						}
					}else{
						dataList[0] += 1;
						item.nextTime = "长期";
					}
					if (item.certificateCategory == 1) {
						carDistr[0].value += 1;
					} else{
						carDistr[1].value += 1;
					}
				});
				let _arr = _this.statisLi;
				_arr[0].value = _obj.length;
				_arr[1].value = dataList[0] + dataList[1] + dataList[2];
				_arr[2].value = dataList[3];
				_arr[3].value = dataList[4];
				_this.statisLi = _arr;
				_this.tableData = _obj;
				_this.warmList = _warm;
				periodChart.setOption(_this.periodOption(dataList));
				typeChart.setOption(_this.typeOption(carDistr));
			})
		},
		periodOption(_data){
			let option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow' 
					}
				},
				grid: {
					top: '8%',
					left: '0%',
					right: '0%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
				    type: 'category',
				    data: ['长期','>365天', '32-365天', '<32天', '已过期'],
					axisLine: {
						lineStyle: {
							color: '#ddd'
						}
					},
				},
				yAxis: {
				    type: 'value',
					axisLine: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#5f5f5f'
						}
					},
					axisLabel: {
						formatter: function() {
							return "";
						}
					},
					
				},
				series: [{
					data: _data,
					name:  '实时数据',
					type: 'bar',
					barWidth: '45%',
					itemStyle: {
						label: {
							color: '#ddd'
						},
						color: function(params) {
							var colorList = [
								['#00d42a', '#00d42a'],
								['#00d42a', '#00d42a'],
								['#d1d400', '#d1d400'],
								['#d1d400', '#d1d400'],
								['#d40000', '#d40000']
							];
							var index = params.dataIndex;
							if (params.dataIndex >= colorList.length) {
								index = params.dataIndex - colorList.length;
							}
							return new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[{
										offset: 0,
										color: colorList[index][0]
									},
									{
										offset: 1,
										color: colorList[index][1]
									}
								]);
						}
					},
					label: {
						show: true,
						position: 'top',
						color: '#ddd',
						formatter: function(params) {
							var list =["个","个", "个", "个", "个"];
							var index = params.dataIndex;
							if (params.dataIndex >= list.length) {
								index = params.dataIndex - list.length;
							}
							return _data[index] + list[index]
						}
					}
				}]
			};
			return option;
		},
		typeOption(_data){
			let option = {
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} 个({d}%)"
				},
				legend: {
					top: "bottom",
					textStyle: {
						color: "#ddd"
					}
				},
				series: [{
					name: "证书分布",
					type: "pie",
					radius: '50%',
					center: ["50%", "40%"],
					itemStyle: {
						label: {
							formatter: '{d}%'
						}
					},
					data: _data,
					animationEasing: "cubicInOut",
					animationDuration: 1000
				}],
			}
			return option;
		},
		getDaysBetween(date1, date2) {
			var days = "";
			var endDate = new Date(date2.replace(/-/g,'/')).getTime();
			days = parseInt((endDate - date1) / (1*24 * 60 * 60 * 1000));
			return days;
		}
	}
})