let pageNo = 1;
let totalPages = 1;
function fnW(str) {
var num;
str >= 10 ? num = str : num = "0" + str;
return num;
}
//获取当前时间
var timer = setInterval(function () {
var date = new Date();
var year = date.getFullYear(); //当前年份
var month = date.getMonth(); //当前月份
var data = date.getDate(); //天
var hours = date.getHours(); //小时
var minute = date.getMinutes(); //分
var second = date.getSeconds(); //秒
var day = date.getDay(); //获取当前星期几
var ampm = hours < 12 ? 'am' : 'pm';
$('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
$('#date').html('' + year + '/' + (month + 1) + '/' + data + ' ' + ampm + ' 周' + day + ' ')
}, 1000)
//页面地图数据 34个
var geoCoordMap = {
'武汉': [114.31, 30.52],
'北京市': [116.24, 39.55],
'天津市': [117.12, 39.02],
'重庆市': [106.54, 29.59],
'上海': [121.48, 31.22],
'上海市': [121.48, 31.22],
'河北省': [114.30, 38.02],
'山西省': [112.33, 37.54],
'辽宁省': [123.25, 41.48],
'吉林省': [125.19, 43.54],
'黑龙江省': [128.36, 45.44],
'江苏省': [118.46, 32.03],
'江苏': [118.46, 32.03],
'浙江省': [120.10, 30.16],
'安徽省': [117.17, 31.52],
'福建省': [119.18, 26.05],
'江西省': [115.55, 28.40],
'江西': [115.55, 28.40],
'山东省': [118.00, 36.40],
'山东': [118.00, 36.40],
'河南省': [113.40, 34.46],
'湖北省': [112.27, 30.15],
'湖南省': [112.59, 28.12],
'广东省': [113.14, 23.08],
// '海南': [108.77, 19.10],
'海南省': [110.20, 20.02],
'四川省': [104.04, 30.40],
'贵州省': [106.42, 26.35],
'云南省': [102.42, 25.04],
'陕西省': [108.57, 34.17],
'甘肃省': [103.51, 36.04],
'青海省': [101.48, 36.38],
'台湾省': [121.21, 23.53],
'内蒙古': [108.41, 40.48],
'广西': [108.19, 22.48],
'宁夏': [106.16, 38.27],
'新疆': [87.36, 43.45],
'西藏': [91.08, 29.39],
'香港': [114.1, 22.2],
'澳门': [115.07, 21.33],
};
$('.select').on('blur', function () {
$(this).find('.select-ul').hide();
})
//下拉框点击出现下拉框内容
$('.select-div').on('click', function () {
if ($(this).siblings('.select-ul').is(":hidden")) {
$(this).siblings('.select-ul').show();
} else {
$(this).siblings('.select-ul').hide();
}
})
$('.select-ul').on('click', 'li', function () {
$(this).addClass('active').siblings('li').removeClass('active').parent().hide().siblings('.select-div').html($(this).html());
var parentDiv = $(this).parent().parent().parent();
})
//鼠标滑动到按钮,按钮内容变成白色
var imgName;
$('.title-box').children('button').hover(function () {
imgName = $(this).children('img').attr('src').split('.png')[0];
$(this).children('img').attr('src', imgName + '_on.png');
}, function () {
$(this).children('img').attr('src', imgName + '.png');
});
var startColor = ['#cdddf7', '#c440ef', '#efb013', '#2fda07', '#d8ef13', '#2e4af8', '#0eebc4', '#f129b1', '#17defc', '#f86363'];
var borderStartColor = ['#0077c5', '#a819d7', '#c99002', '#24bc00', '#b6cb04', '#112ee2', '#00bd9c', '#ce078f', '#00b2cd', '#ec3c3c'];
//入库量占比,带边框效果的饼图
function chart1(data) {
//data 为模拟数据
if(!Array.isArray(data) || data.length != 2) {
var data = [{
name: '可用',
value: 192581,
percent: '30.8721',
}, {
name: '存货',
value: 215635,
percent: '34.076',
}];
}
var myChart = echarts.init(document.getElementById('pie'));
var myChart1 = echarts.init(document.getElementById('pie1'));
window.addEventListener('resize', function () {
myChart1.resize();
});
var str = '';
for (var i = 0; i < data.length; i++) {
str += '
' + data[i].name + '' + data[i].value + ' ' + Number(data[i].percent).toFixed(2) + '%
';
}
$('.pie-data').html(str);
function deepCopy(obj) {
if (typeof obj !== 'object') {
return obj;
}
var newobj = {};
for (var attr in obj) {
newobj[attr] = obj[attr];
}
return newobj;
}
var xData = [],
yData = [];
data.map((a, b) => {
xData.push(a.name);
yData.push(a.value);
});
var RealData = [];
var borderData = [];
data.map((item, index) => {
var newobj = deepCopy(item);
var newobj1 = deepCopy(item);
RealData.push(newobj);
borderData.push(newobj1);
});
RealData.map((item, index) => {
item.itemStyle = {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: startColor[index] // 0% 处的颜色
}, {
offset: 1,
color: startColor[index] // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
}
}
});
borderData.map((item, index) => {
item.itemStyle = {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: borderStartColor[index] // 0% 处的颜色
}, {
offset: 1,
color: borderStartColor[index] // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
}
}
});
var option = {
tooltip: {
trigger: 'item',
// position: ['30%', '50%'],
confine: true,
formatter: "{a} {b}: {c} ({d}%)"
},
series: [
// 主要展示层的
{
radius: ['50%', '85%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
name: "",
data: RealData
},
// 边框的设置
{
radius: ['45%', '50%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: borderData
}
]
};
myChart.clear();
myChart1.clear();
myChart.setOption(option);
myChart1.setOption(option);
}
// chart1()
//----------------------派件入库量占比内容end---------------
//------------广东省寄派件数据内容---------------
//点击筛选按钮
$('#filBtn').on('click', function () {
if ($('#filCon').is(":hidden")) {
$('#filCon').attr('style', 'display:flex');
} else {
$('#filCon').hide();
}
})
//点击筛选按钮end
function chart2(chartType) {
var data = [
{
name: '广州市',
value: 120057.34
},
{
name: '韶关市',
value: 15477.48
},
{
name: '深圳市',
value: 131686.1
},
{
name: '珠海市',
value: 6992.6
},
{
name: '汕头市',
value: 44045.49
},
{
name: '佛山市',
value: 40689.64
},
{
name: '江门市',
value: 37659.78
},
{
name: '湛江市',
value: 45180.97
},
{
name: '茂名市',
value: 5204.26
},
{
name: '肇庆市',
value: 21900.9
},
{
name: '惠州市',
value: 4918.26
},
{
name: '梅州市',
value: 5881.84
},
{
name: '汕尾市',
value: 4178.01
},
{
name: '河源市',
value: 2227.92
},
{
name: '阳江市',
value: 2180.98
},
{
name: '清远市',
value: 9172.94
},
{
name: '东莞市',
value: 3368
},
{
name: '中山市',
value: 306.98
},
{
name: '潮州市',
value: 810.66
},
{
name: '揭阳市',
value: 542.2
},
{
name: '云浮市',
value: 256.38
}]
var myCharts = echarts.init(document.getElementById('gdMaps'));
window.addEventListener('resize', function () {
myCharts.resize();
});
var yMax = 0;
for (var j = 0; j < data.length; j++) {
if (yMax < data[j].value) {
yMax = data[j].value;
}
}
myCharts.hideLoading();
var option = {
animation: true,
tooltip: {
show: true
},
visualMap: {
min: 0,
max: yMax,
text: ['高', '低'],
orient: 'horizontal',
itemWidth: 15,
itemHeight: 200,
right: 0,
bottom: 30,
inRange: {
color: ['#75ddff', '#cdddf7']
},
textStyle: {
color: 'white'
}
},
series: [
{
name: '数据名称',
type: 'map',
mapType: '广东',
selectedMode: 'multiple',
tooltip: {
trigger: 'item',
formatter: '{b} {c} (件)'
},
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#cdddf7',
label: {
show: false
}
},
emphasis: { // 也是选中样式
borderWidth: 1,
borderColor: '#fff',
backgroundColor: 'red',
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
data: data,
}
]
};
myCharts.setOption(option);
}
chart2('');
//------------广东省寄派件数据内容end---------------
//cityName全国的省级行政区域数据
var cityName = [{
"ProID": 1,
"name": "北京",
"ProSort": 1,
"firstP": "B",
"ProRemark": "直辖市"
}, {
"ProID": 2,
"name": "天津",
"ProSort": 2,
"firstP": "T",
"ProRemark": "直辖市"
}, {
"ProID": 3,
"name": "河北",
"ProSort": 5,
"firstP": "H",
"ProRemark": "省份"
}, {
"ProID": 4,
"name": "山西",
"ProSort": 6,
"firstP": "S",
"ProRemark": "省份"
}, {
"ProID": 5,
"name": "内蒙古",
"ProSort": 32,
"firstP": "N",
"ProRemark": "自治区"
}, {
"ProID": 6,
"name": "辽宁",
"ProSort": 8,
"firstP": "L",
"ProRemark": "省份"
}, {
"ProID": 7,
"name": "吉林",
"ProSort": 9,
"firstP": "J",
"ProRemark": "省份"
}, {
"ProID": 8,
"name": "黑龙江",
"ProSort": 10,
"firstP": "H",
"ProRemark": "省份"
}, {
"ProID": 9,
"name": "上海",
"ProSort": 3,
"firstP": "S",
"ProRemark": "直辖市"
}, {
"ProID": 10,
"name": "江苏",
"ProSort": 11,
"firstP": "J",
"ProRemark": "省份"
}, {
"ProID": 11,
"name": "浙江",
"ProSort": 12,
"firstP": "Z",
"ProRemark": "省份"
}, {
"ProID": 12,
"name": "安徽",
"ProSort": 13,
"firstP": "A",
"ProRemark": "省份"
}, {
"ProID": 13,
"name": "福建",
"ProSort": 14,
"firstP": "F",
"ProRemark": "省份"
}, {
"ProID": 14,
"name": "江西",
"ProSort": 15,
"firstP": "J",
"ProRemark": "省份"
}, {
"ProID": 15,
"name": "山东",
"ProSort": 16,
"firstP": "S",
"ProRemark": "省份"
}, {
"ProID": 16,
"name": "河南",
"ProSort": 17,
"firstP": "H",
"ProRemark": "省份"
}, {
"ProID": 17,
"name": "湖北",
"ProSort": 18,
"firstP": "H",
"ProRemark": "省份"
}, {
"ProID": 18,
"name": "湖南",
"ProSort": 19,
"firstP": "H",
"ProRemark": "省份"
}, {
"ProID": 19,
"name": "广东",
"ProSort": 20,
"firstP": "G",
"ProRemark": "省份"
}, {
"ProID": 20,
"name": "海南",
"ProSort": 24,
"firstP": "H",
"ProRemark": "省份"
}, {
"ProID": 21,
"name": "广西",
"ProSort": 28,
"firstP": "G",
"ProRemark": "自治区"
}, {
"ProID": 22,
"name": "甘肃",
"ProSort": 21,
"firstP": "G",
"ProRemark": "省份"
}, {
"ProID": 23,
"name": "陕西省",
"ProSort": 27,
"firstP": "S",
"ProRemark": "省份"
}, {
"ProID": 24,
"name": "新疆维吾尔",
"ProSort": 31,
"firstP": "X",
"ProRemark": "自治区"
}, {
"ProID": 25,
"name": "青海",
"ProSort": 26,
"firstP": "Q",
"ProRemark": "省份"
}, {
"ProID": 26,
"name": "宁夏",
"ProSort": 30,
"firstP": "N",
"ProRemark": "自治区"
}, {
"ProID": 27,
"name": "重庆",
"ProSort": 4,
"firstP": "C",
"ProRemark": "直辖市"
}, {
"ProID": 28,
"name": "四川省",
"ProSort": 22,
"firstP": "S",
"ProRemark": "省份"
}, {
"ProID": 29,
"name": "贵州省",
"ProSort": 23,
"firstP": "G",
"ProRemark": "省份"
}, {
"ProID": 30,
"name": "云南省",
"ProSort": 25,
"firstP": "Y",
"ProRemark": "省份"
}, {
"ProID": 31,
"name": "西藏",
"ProSort": 29,
"firstP": "X",
"ProRemark": "自治区"
}, {
"ProID": 32,
"name": "台湾",
"ProSort": 7,
"firstP": "T",
"ProRemark": "省份"
}, {
"ProID": 33,
"name": "澳门",
"ProSort": 33,
"firstP": "A",
"ProRemark": "特别行政区"
}, {
"ProID": 34,
"name": "香港",
"ProSort": 34,
"firstP": "X",
"ProRemark": "特别行政区"
}]
addCityBtn(cityName);
function addCityBtn(data) {
var li_con = '';
for (var i = 0; i < data.length; i++) {
li_con += '' + data[i].name + ' '
}
$('#city').html(li_con);
$('#citys').html(li_con);
}
$('.city-btn').on('click', 'li', function () {
var str;
var patt = [/[a-z]/i, /[a-e]/i, /[f-i]/i, /[k-o]/i, /[p-t]/i, /[u-z]/i];
var index = $(this).index();
var li_con = '';
for (var i = 0; i < cityName.length; i++) {
str = cityName[i].firstP;
if (patt[index].test(str)) {
li_con += '' + cityName[i].name + ' '
}
}
$(this).addClass('active').siblings('li').removeClass('active');
if (index == 0) {
$('#city').children().removeClass('active');
if ($(this).parent().data('city') == 1) {
$('.ranking-box').show();
if ($("#barType").find('.active').data('value') == 1) {
$('#titleQ').html('全网 到珠海');
} else if ($("#barType").find('.active').data('value') == 2) {
$('#titleQ').html('珠海到全网 ')
}
$('#city').html(li_con);
} else if ($(this).parent().data('city') == 2) {
if ($('.cont-div').eq(0).css('visibility') != 'hidden') {
$('.ranking-box').show();
}
if ($("#barTypes").find('.active').data('value') == 1) {
$('#titleQs').html('全网 到珠海');
} else if ($("#barTypes").find('.active').data('value') == 2) {
$('#titleQs').html('珠海到全网 ')
}
$('#citys').html(li_con);
}
} else {
if ($(this).parent().data('city') == 1) {
$('#city').html(li_con);
} else if ($(this).parent().data('city') == 2) {
$('#citys').html(li_con);
}
}
})
$('#city').on('click', 'li', function () {
$(this).addClass('active').siblings('li').removeClass('active');
$('.center-bottom .ranking-box').hide();
if ($("#barType").find('.active').data('value') == 1) {
$('#titleQ').html('' + $(this).html() + ' 到珠海');
} else if ($("#barType").find('.active').data('value') == 2) {
$('#titleQ').html('珠海到' + $(this).html() + ' ')
}
})
$('#citys').on('click', 'li', function () {
$(this).addClass('active').siblings('li').removeClass('active');
$('.pop-data .ranking-box').hide();
if ($("#barTypes").find('.active').data('value') == 1) {
$('#titleQs').html('' + $(this).html() + ' 到珠海');
} else if ($("#barTypes").find('.active').data('value') == 2) {
$('#titleQs').html('珠海到' + $(this).html() + ' ')
}
})
//寄派件选择
$("#barType").on('click', 'li', function () {
$(this).addClass('active').siblings('li').removeClass('active');
$('#barTitle').html($(this).html() + '数据');
$('#tabBtn').data('state', $(this).data('value'));
if ($(this).data('value') == 1) {
$('.table1').eq(0).show().siblings('table').hide();
} else if ($(this).data('value') == 2) {
$('.table1').eq(1).show().siblings('table').hide();
}
chart3($(this).data('value'), 0);
chart4(chart4Data, $(this).data('value'), 0);
})
//寄派件选择
$("#barTypes").on('click', 'li', function () {
$(this).addClass('active').siblings('li').removeClass('active');
$('#barTitles').html($(this).html() + '数据');
$('#tabBtns').data('state', $(this).data('value'));
if ($(this).data('value') == 1) {
$('.table2').eq(0).show().siblings('table').hide();
} else if ($(this).data('value') == 2) {
$('.table2').eq(1).show().siblings('table').hide();
}
chart3($(this).data('value'), 1);
chart4(chart4Data, $(this).data('value'), 1);
})
function chart3(data_) {
var myChart = echarts.init(document.getElementById('chart3'));
var myCharts = echarts.init(document.getElementById('chart3s'));
window.addEventListener('resize', function () {
myChart.resize();
myCharts.resize();
});
//x轴数据
let x_data = data_.reduce((curr,item)=> {
item.key = item.key.length >= 4 ? item.key.substr(0,3) : item.key
curr.push(item.key)
return curr;
},[])
let y_data = data_.reduce((curr,item) => {
curr.push(item.value)
return curr;
},[])
var option = {
yAxis: {
show: true,
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: "#cdddf7"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: '#cdddf7'
},
},
xAxis: {
type: 'category',
position: "bottom",
data: x_data,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'
},
}
},
series: [
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'top'
},
barMaxWidth: 30,
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#cdddf7','rgba(239,176,19)','rgba(196,164,239)','rgba(219,44,44)','rgba(196,64,88)','rgba(196,64,239)'];
return colorList[params.dataIndex]
}
}
},
data: y_data
},
// {
// name: '直接访问',
// type: 'bar',
// stack: '总量',
// label: {
// show: false
// },
// barMaxWidth: 20,
// itemStyle: {
// color: 'rgba(14, 148, 235, 0.102)'
// },
// data: dataShadow
// },
]
};
myChart.clear();
myCharts.clear();
myChart.setOption(option);
myCharts.setOption(option);
}
// chart3(1, '')
//
//
//
$('#dateBtn').on('click', function () {
if ($('#timeBox').is(":hidden")) {
$('#timeBox').show();
document.getElementById('timeBox').focus();
} else {
$('#timeBox').hide();
}
})
$('#dateBtns').on('click', function () {
if ($('#timeBoxs').is(":hidden")) {
$('#timeBoxs').show();
document.getElementById('timeBoxs').focus();
} else {
$('#timeBoxs').hide();
}
})
$('#switchBtn').on('click', 'span', function () {
$(this).addClass('active').siblings().removeClass('active');
if ($(this).data('datatype') == 'income') {
$('#totalProfit').html('123,456');
} else if ($(this).data('datatype') == 'expend') {
$('#totalProfit').html('32,111');
}
})
$('#tabBtn').on('click', function () {
var _this = $(this);
if ($('.right-top').children('.chart-box').is(':hidden')) {
_this.children('span').html('图表');
$('.right-top').children('.chart-box').show().siblings('.data-box').hide();
} else {
_this.children('span').html('表格');
$('.right-top').children('.data-box').show().siblings('.chart-box').hide();
if (_this.data('state') == 1) {
$('.table1').eq(0).show().siblings('table').hide();
} else if (_this.data('state') == 2) {
$('.table1').eq(1).show().siblings('table').hide();
}
}
})
$('#tabBtns').on('click', function () {
var _this = $(this);
if (_this.siblings('.pop-chart').is(':hidden')) {
_this.children('span').html('图表');
_this.siblings('.pop-chart').show().siblings('.data-box').hide();
} else {
_this.children('span').html('表格');
_this.siblings('.data-box').show().siblings('.chart-box').hide();
if (_this.data('state') == 1) {
$('.table2').eq(0).show().siblings('table').hide();
} else if (_this.data('state') == 2) {
$('.table2').eq(1).show().siblings('table').hide();
}
}
})
//时间选择器
var startV = '';
var endV = '';
laydate.skin('danlan');
var startTime = {
elem: '#startTime',
format: 'YYYY-MM-DD',
min: '1997-01-01', //设定最小日期为当前日期
max: laydate.now(), //最大日期
istime: true,
istoday: true,
fixed: false,
choose: function (datas) {
startV = datas;
endTime.min = datas; //开始日选好后,重置结束日的最小日期
}
};
var endTime = {
elem: '#endTime',
format: 'YYYY-MM-DD',
min: laydate.now(),
max: laydate.now(),
istime: true,
istoday: true,
fixed: false,
choose: function (datas) {
// startTime.max = datas; //结束日选好后,重置开始日的最大日期
endV = datas;
}
};
// laydate(startTime);
// laydate(endTime);
//时间选择器
var startVs = '';
var endVs = '';
laydate.skin('danlan');
var startTimes = {
elem: '#startTimes',
format: 'YYYY-MM-DD',
min: '1997-01-01', //设定最小日期为当前日期
max: '2099-06-16', //最大日期
istime: true,
istoday: true,
fixed: false,
choose: function (datas) {
startVs = datas;
endTimes.min = datas; //开始日选好后,重置结束日的最小日期
setQgData($('#barTypes').parent().parent(), 1);
}
};
var endTimes = {
elem: '#endTimes',
format: 'YYYY-MM-DD',
min: laydate.now(),
max: laydate.now(),
istime: true,
istoday: true,
fixed: false,
choose: function (datas) {
// startTime.max = datas; //结束日选好后,重置开始日的最大日期
endVs = datas;
setQgData($('#barTypes').parent().parent(), 1);
}
};
laydate(startTimes);
laydate(endTimes);
//点击时间选择器的时候更改样式
$('#endTime').on('click', function () {
dateCss();
})
$('#end').on('click', function () {
dateCss();
})
//更改日期插件的样式
function dateCss() {
var arr = $('#laydate_box').attr('style').split(';');
var cssStr =
'position:absolute;right:0;';
for (var i = 0; i < arr.length; i++) {
if (arr[i].indexOf('top') != -1) {
cssStr += arr[i];
}
}
$('#laydate_box').attr('style', cssStr);
}
//chart4Data模拟数据 地图线
var chart4Data = [
// {
// 'name': "天津",
// 'value': 1
// }
]
// chart4(chart4Data, 2, '');
function chart4(data, type, chartType) {
var s_data = [];
var myChart = echarts.init(document.getElementById('chart4'));
var myCharts = echarts.init(document.getElementById('chart4s'));
window.addEventListener('resize', function () {
myChart.resize();
myCharts.resize();
});
function formtGCData(geoData, data, srcNam, dest) {
var tGeoDt = [];
if (dest) {
for (var i = 0, len = data.length; i < len; i++) {
if (srcNam != data[i].name) {
tGeoDt.push({
coords: [geoData[srcNam], geoData[data[i].name]],
});
}
}
} else {
for (var i = 0, len = data.length; i < len; i++) {
if (srcNam != data[i].name) {
tGeoDt.push({
coords: [geoData[data[i].name], geoData[srcNam]],
});
}
}
}
return tGeoDt;
}
function formtVData(geoData, data, srcNam) {
var tGeoDt = [];
for (var i = 0, len = data.length; i < len; i++) {
var tNam = data[i].name
if (srcNam != tNam) {
tGeoDt.push({
name: tNam,
symbolSize: 2,
itemStyle: {
normal: {
color: '#ffeb40',
}
},
value: geoData[tNam]
});
}
}
tGeoDt.push({
name: srcNam,
value: geoData[srcNam],
symbolSize: 5,
itemStyle: {
normal: {
color: '#2ef358',
}
}
});
return tGeoDt;
}
var planePath = 'pin';
if (type == 2) {
s_data.push({
type: 'lines',
zlevel: 2,
mapType: 'china',
symbol: 'none',
effect: {
show: true,
period: 1.5,
trailLength: 0.1,
// color: '#ffeb40',
color: '#2ef358',
symbol: planePath,
symbolSize: 6,
trailLength: 0.5
},
lineStyle: {
normal: {
color: '#2ef358',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: formtGCData(geoCoordMap, data, '武汉', true)
})
} else if (type == 1) {
s_data.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 1.5,
trailLength: 0.1,
// color: '#2ef358',
color: '#ffeb40',
symbol: planePath,
symbolSize: 6,
trailLength: 0.5
},
lineStyle: {
normal: {
color: '#ffeb40',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: formtGCData(geoCoordMap, data, '武汉', false)
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'stroke'
},
symbol: 'none',
symbolSize: 4,
itemStyle: {
normal: {
color: '#fff'
}
},
data: formtVData(geoCoordMap, data, '武汉')
})
}
var option = {
tooltip: {
trigger: 'item',
},
geo: {
map: 'china',
label: {
show: true,
position: 'insideLeft',
color: 'white',
fontSize: '10',
emphasis: {
show: true
}
},
roam: true,
silent: true,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#cdddf7',
shadowBlur: 10,
shadowColor: '#0e94ea'
}
},
left: 10,
right: 10
},
series: s_data
};
if (chartType === '') {
console.log(option, 'option')
myChart.setOption(option);
myCharts.setOption(option);
} else if (chartType === 0) {
myChart.setOption(option);
} else if (chartType === 1) {
myCharts.setOption(option);
}
}
$('.close-pop').on('click', function () {
$(this).parent().parent().hide().find('.cont-div').attr('style', 'visibility: hidden');
})
$('#setBtn').on('click', function () {
$('.container').attr('style', 'visibility: visible').find('.pop-up').eq(4).attr('style', 'visibility: visible').siblings().attr('style', 'visibility: hidden');
})
var workDate;
var time = {
elem: '#times',
format: 'YYYY-MM-DD',
min: laydate.now(),
max: laydate.now() + 30,
istime: true,
istoday: true,
fixed: false,
choose: function (datas) {
// startTime.max = datas; //结束日选好后,重置开始日的最大日期
workDate = datas;
}
};
laydate(time);
$('#addT').on('click', function () {
$('#mineusT').show();
if ($(this).siblings('input').length < 6) {
if ($(this).siblings('input').length == 5) {
$(this).hide();
}
$(this).before(' ');
}
})
$('#mineusT').on('click', function () {
if ($(this).siblings('input').length > 1) {
if ($(this).siblings('input').length == 6) {
$('#addT').show();
} else if ($(this).siblings('input').length == 2) {
$(this).hide()
}
$(this).siblings('input:last').remove();
}
})
$('#addL').on('click', function () {
$('#mineusL').show();
if ($(this).siblings('input').length < 3) {
if ($(this).siblings('input').length == 2) {
$(this).hide();
}
$(this).before(' ');
}
})
$('#mineusL').on('click', function () {
if ($(this).siblings('input').length > 1) {
if ($(this).siblings('input').length == 3) {
$('#addL').show();
} else if ($(this).siblings('input').length == 2) {
$(this).hide()
}
$(this).siblings('input:last').remove();
}
})
//获取收、发、出、入数据
function getBaseData() {
$.ajax({
url: `${baseUrl}/BasicHomePage/gettask`,
data:{},
type: 'GET',
dataType: 'json',
timeout: 5000,
success:(res) => {
if(res.code == 200){
// 本周发货数
$("#faTotal").text(`${res.data.weekOutAndType.find(item => item.key == 'out').value || 0}`)
$("#faType").text(`${res.data.weekOutAndType.find(item => item.key == 'type').value || 0}`)
}else {
console.log(res.code + ":" + res.message)
}
},
error:(err) => {
console.log(JSON.stringify(err))
},
})
}
//获取库位占比
function getStorage() {
$.ajax({
url: `${baseUrl}/BasicHomePage/getStock`,
data:{},
type: 'GET',
dataType: 'json',
timeout: 5000,
success:(res) => {
if(res.code == 200){
let total = res.data.stock.reduce((curr,item) => {
curr += item.value
return curr;
},0)
let pieArr = res.data.stock.reduce((curr,item) => {
if(item.key != '空托'){
curr.push({
name: item.key,
value: item.value,
percent: item.value / total * 100
})
}
return curr;
},[])
chart1(pieArr)
}else {
console.log(res.code + ":" + res.message)
}
},
error:(err) => {
console.log(JSON.stringify(err))
},
})
}
//库存汇总
function getExistMaterial() {
$.ajax({
url: `${baseUrl}/BasicHomePage/GetStockDetail`,
data:{},
type: 'GET',
dataType: 'json',
timeout: 5000,
success:(res) => {
if(res.code == 200){
chart3(res.data.materialTypeAndNum)
}else {
console.log(res.code + ":" + res.message)
}
},
error:(err) => {
console.log(JSON.stringify(err))
},
})
}
//
function getOutByYear() {
$.ajax({
url: `${baseUrl}/BasicHomePage/getYearOutStock`,
data:{},
type: 'GET',
dataType: 'json',
timeout: 5000,
success:(res) => {
if(res.code == 200){
chart6(res.data.outYearStock)
}else {
console.log(res.code + ":" + res.message)
}
},
error:(err) => {
console.log(JSON.stringify(err))
},
})
}
//一年内发货最多的物料种类数据
function chart6(data_) {
var myChart = echarts.init(document.getElementById('chart3s'));
var myCharts = echarts.init(document.getElementById('chart6'));
window.addEventListener('resize', function () {
myChart.resize();
myCharts.resize();
});
//x轴数据
var data = data_.reduce((curr,item)=> {
console.log(item.category)
item.category = item.category
// item.category = item.category.length >= 3 ? item.category.substr(0,2) : item.category
curr.push(item.category)
return curr;
},[])
//y轴数据
var yData = data_.reduce((curr,item) => {
curr.push(item.num * 2)
return curr;
},[])
var x_data = data_.reduce((curr,item) => {
curr.push(item.num)
return curr;
},[])
//绘制图表
var yMax = 0;
for (var j = 0; j < data_.length; j++) {
if (yMax < data_[j].num) {
yMax = data_[j].num;
}
}
var dataShadow = [];
yMax = yMax < 1500 ? 1500 : yMax;
for (var i = 0; i < data_.length; i++) {
dataShadow.push(yMax);
}
var option = {
yAxis: {
show: true,
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: "#cdddf7"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: '#cdddf7'
},
},
xAxis: {
type: 'category',
position: "bottom",
data: data,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'
},
interval:0,
rotate:-20,
fontSize: '10'
}
},
series: [
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'top'
},
barMaxWidth: 30,
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#cdddf7','rgba(239,176,19)','rgba(196,164,239)','rgba(219,44,44)','rgba(196,64,88)','rgba(196,64,239)'];
return colorList[params.dataIndex]
}
}
},
data: x_data
},
// {
// name: '直接访问',
// type: 'bar',
// stack: '总量',
// label: {
// show: false
// },
// barMaxWidth: 20,
// itemStyle: {
// color: 'rgba(14, 148, 235, 0.102)'
// },
// data: dataShadow
// },
]
};
myChart.clear();
myCharts.clear();
myChart.setOption(option);
myCharts.setOption(option);
}
// chart6(1, '')
//地图左边发货数据
// 倒序排列
function compare(v1,v2){
return v2.provinceCount - v1.provinceCount
}
function renderMapTable() {
$.ajax({
url: `${baseUrl}/BasicHomePage/getprovincecount`,
data:{},
type: 'GET',
dataType: 'json',
timeout: 5000,
success:(res) => {
if(res.code == 200){
var count = 0;
var str = '城市
发货数
';
console.log(res.data )
if(Array.isArray(res.data)) {
if(res.data.length == 0) {
chart4(chart4Data, 2, '');
return console.log("参数为空数组")
}else if(res.data.length < 10) {
count = res.data.length;
}else {
count = 10;
}
}else {
chart4(chart4Data, 2, '');
return console.log("参数不是数组");
}
let strArr = Object.keys(geoCoordMap)
res.data.sort(compare)
for (var i = 0; i < count; i++) {
str += '' + (i + 1) + ' ' + res.data[i].provinceName + '
' + res.data[i].provinceCount + '
';
//动态渲染 路线图
var indexIn = strArr.indexOf(res.data[i].provinceName)
if( indexIn != -1){
chart4Data.push(
{
'name':strArr[indexIn],
'value': 0
}
)
}
}
$('.center-bottom .ranking-box').html(str);
// 渲染地图上面的路线
chart4(chart4Data, 2, '');
}else {
chart4(chart4Data, 2, '');
}
},
error:(err) => {
console.log(JSON.stringify(err))
}
})
}
//出库单任务统计
function getOuterTable() {
$.ajax({
url: `${baseUrl}/BasicHomePage/getOrderDetail?PageNo=${pageNo}&PageSize=11`,
data:{},
type: 'GET',
dataType: 'json',
timeout: 5000,
success:(res) => {
if(res.code == 200){
if(res.data && res.data.length==0){
pageNo=1
return
}
pageNo++;
totalPages = res.data.totalPage;
let str = ``;
for (var i = 0; i < res.data.length; i++) {
let opt = res.data[i];
str += `
${i + 1}
${opt.orderNo.length > 10 ? opt.orderNo.substr(0,10) : opt.orderNo}
${opt.totalQuantity}
`;
}
$('.outerList').html(str);
}else {
console.log(res.code + ":" + res.message)
}
},
error:(err) => {
console.log(JSON.stringify(err))
}
})
}
//获取出库单状态
function getStatus(type) {
switch(type) {
case 0:
return '新建';
case 1:
return '执行中';
case 2:
return '已完成';
case 3:
return '组盘中';
}
}