123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- 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;
- }
- }
- })
|