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 '组盘中'; } }