效果图:
http://218.200.85.76:8557/DataStatistics/DynamicUnemployment
<form id="Excelform" method="post" enctype="multipart/form-data" style="display: inline-block;">
<div class="excelupload" style="display:none;z-index:101;">
<div class="excelHead">
<label style="float:left;color: #49d6ff;font-size: 18px;font-weight: bold;margin-left:158px; margin-top:20px;">数据导入</label>
<img src="~/Scripts/statics/images/X.png" style="float:right; margin-top:4px;margin-right:4px;opacity:.5; cursor: pointer;" id="close_btn" />
</div>
<div class="set_date">
<label>选择时间:</label>
<input type="text" class="select_butn layui-input" style="font-size:14px;text-align:left;opacity:.7;border:1px solid #2D9EF3;" id="useDate" name="UCE512" value="" readonly required placeholder="日期" />
</div>
<div class="upload_file">
<input type="file" class="filess" id="attend-files" style="display:none;" name="File" value=" " onchange="addFiles();" />
<label class="filetext" style="color:white;font-size:14px;width:30px;">选择文件:</label>
<u class="change_btn" style="color:white;cursor:pointer;" onclick="try{change_btn_click()}catch(e){alert(e)}" >上传文件</u>
</div>
<div class="file_import" style="margin-left: 160px;"><button type="button" onclick="btnClick();">导入</button> </div>
</div>
</form>
<!--提示框-->
<div id='promptDiv' style="display:none;z-index:201;height:198px;width: 377px;
border: 1px #4075D4 solid;background-color: #011F60; position: fixed;
left: 50%;top: 40%; transform: translate(-50%, -50%);">
<div id='header_prompt' style='height: 55px;'><lable style='font-size:20px;font-weight: bold;margin-left:152px; margin-top:12px;color:#C80925;height:26px;display:inline-block;padding-top:0'>导入失败!</lable><img /></div>
<div id='body_prompt' style='height: 90px;'><label style="color:white;margin-left:96px;font-size:16px;margin-top:0;display:inline-block">导入成功</label></div>
<div id='body_prompt'>
<button id='confirm' style='width: 63px; height: 29px; color: white;border: 1px solid #2D9EF3;
border-radius:5px;text-decoration:none; outline:none;cursor:pointer;background-color:#2D9EF3 ;margin-left: 158px;' onclick="hiddenDialog_Click();">
确 定
</button>
</div>
</div>
/*被弹出的div*/
.excelupload {
border: 1px #4075D4 solid;
background-color: #011F60;
border-radius: 10px;
width: 377px;
height: 198px;
/*让其浮在最上面*/
position: fixed;
display: none;
/*设置弹出的div窗口位置*/
left: 40%;
top: 30%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index:100;
}
.excelupload .excelHead {
height: 59px;
}
.excelupload .set_date label {
margin-left: 86px;
color: white;
font-size: 14px;
width: 30px;
}
.excelupload .upload_file #up_file {
margin-left: 25px;
}
.excelupload .upload_file {
margin-top: 20px;
margin-left: 86px;
}
.excelupload .file_import {
margin-top: 20px;
margin-left: 100px;
clear: both;
}
.excelupload .file_import button {
width: 63px;
height: 29px;
color: white;
border: 1px solid #2D9EF3;
border-radius:5px;
text-decoration:none;
outline:none;
cursor:pointer;
}
#close_btn:hover{
opacity:1;
}
u {
width: 100%;
opacity:.7;
word-wrap: break-word;
text-align: justify;
line-height: 200%;
text-decoration: none;
border-bottom: 1px solid #2D9EF3;
}
//统计字段
var field1, field2, field3, field4, field5, field6, field7, field8, field9, field10, field11
var slideTime = null;
//数据源对象
var dataObj = {
fexl1: "",
fexl2: "",
fexl3: "",
fexl4: "",
fexl5: "",
fexl6: "",
fexl7: "",
fexl8: "",
fexl9: "",
fexl10: "",
fexl11: 0,
fexl12: "",
fexl13: "",
realTimeDatas: "",
chartData1: "",
chartData2: "",
chartData3: "",
comNewData: "",
jobFairDatas: "",
silde: true,
silde2: true
}
var dataStatistics = {
myChart5: null,
//展示统计图表
showChart: function () {
var textdatas = [], datas1 = [], datas2 = [], datas3 = [];
try {
$.ajax({
url: "http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/BasicInfo",
type: "GET",
data: {
AAB301: region,
UCE512: ny
},
dataType: "json",
success: function (data) {
var str1 = 300, str2 = 400, str3 = 500;
for (var i = 0; i < 10; i++) {
str1 = str1 + 15;
str2 = str2 + 15;
str3 = str3 + 15;
var tostr1 = str1.toString();
var tostr2 = str2.toString();
var tostr3 = str3.toString();
textdatas.push("2020-8");//设置时间
datas1.push({ name: "在岗人数", value: tostr1 });
datas2.push({ name: "缺工人数", value: tostr2 });
datas3.push({ name: "招用人数", value: tostr3 });
}
dataStatistics.setChartLine(textdatas, datas1, datas2, datas3);
},
error: function (error) {
}
})
}
catch (e) {
}
},
setChartLine: function (textdatas, datas1, datas2, datas3) {
var option2 = {
legend: {
top: "30px",
right: "20px",
data: [{
name: datas1[0].name, textStyle: {
color: '#D66B4F'
}
}, {
name: datas2[0].name, textStyle: {
color: '#157BB6'
}
}, {
name: datas3[0].name, textStyle: {
color: '#F9B636'
}
}]
},
xAxis: {
type: 'category',
boundaryGap: true,
axisLine: {
lineStyle: {
type: 'solid',
color: '#3486DA',
width: '1'
}
},
axisLabel: {
interval: 0,
rotate: 45,
textStyle: {
color: "#65C6E7",
fontSize: 12
}
},
data: textdatas
},
tooltip: {
backgroundColor: "#00B7B8",
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: { //文字样式
color: "#65C6E7",
fontSize: 11
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#3486DA',
width: '1'
}
},
splitLine: {
show: false,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'solid'
}
}
},
series: [{
data: datas1,
name: datas1[0].name,
type: 'line',
itemStyle: {
normal: {
color: "#D66B4F",
}
}
},
{
data: datas2,
type: 'line',
name: datas2[0].name,
itemStyle: {
normal: {
color: "#157BB6",
}
}
},
{
data: datas3,
type: 'line',
name: datas3[0].name,
itemStyle: {
normal: {
color: "#F9B636",
}
}
}
]
};
option2.color = ["#D66B4F", "#157BB6", "#F9B636"];
dataStatistics.myChart5.setOption(option2);
},
//页面初始化
init: function () {
dataStatistics.myChart5 = echarts.init(document.getElementById('main2'));
dataStatistics.showChart();
},
}
$(function () {
dataStatistics.init();
$(".city").click(function () {
if ($(this).attr("state") == "true") {
$(this).attr("state", "false");
$(".cityclick").css({ "left": $(this).position().left + "px" });
$(".cityclick").show();
} else {
$(this).attr("state", "true");
$(".cityclick").hide();
}
});
$(".cityclick div").click(function () {
$(".city").attr("state", "true");
//localStorage["city"] = $(this).attr("value");
$("#cityname").text($(this).text());
$("#cityname").attr("city", $(this).attr("value"))
$(".cityclick").hide();
dataStatistics.showChart();
});
//数据导入点击事件
$(".dataimport").click(function () {
$(".excelupload").show();
insertMaskLayer('#maskDiv1', 'maskDiv1', 100, false);
});
$("#close_btn").click(function () {
$(".excelupload").hide();
insertMaskLayer('#maskDiv1', 'maskDiv1', 100, true);
});
//$(".change_btn").click(function () {
// $(".filess").click();
//});
laydate.render({
elem: '#date_value',
type: 'month',
done: function () {
setTimeout(function () { dataStatistics.statistics(); }, 500);
}
});
laydate.render({
elem: '#useDate',
type: 'month'
});
//插入数据
appendData();
rollNum();
//showAuto();
});
//取文件全名名称
function GetFileName(filepath) {
if (filepath != "") {
var names = filepath.split("\\");
return names[names.length - 1];
}
}
//插入数据
function appendData() {
try {
$.ajax({
url: "http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/BasicInfo",
type: "GET",
data: {
AAB301: region,
UCE512: ny
},
dataType: "json",
success: function (data) {
for (var i = 0; i < 10; i++) {
$("#datalistview1 li").eq(i).find(".fexd1").text("荆门市熊兴化工有限公司");
$("#datalistview1 li").eq(i).find(".fexd2").text("荆门市");
$("#datalistview1 li").eq(i).find(".fexd3").text("265");
}
},
error: function (err) {
//
console.log("_________error____________");
},
}
);
}
catch (e) {
}
}
var count = 0;
//数字滚动效果
function rollNum() {
setInterval("showAuto()", 30000);
}
function showAuto() {
//推荐岗位查看数
try{
//取地区 年月
var region = $("#cityname").text();
var ny = $("#date_value").val();
if (ny == "") {
ny = doHandleDate();
}
$.ajax({
url: "http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/BasicInfo",
type: "GET",
data: {
AAB301: region,
UCE512: ny
},
dataType: "json",
success: function (data) {
$("#fexl1").rollNum({
deVal: parseInt(count)
});
$("#fexl2").rollNum({
deVal: parseInt(count)
});
$("#fexl3").rollNum({
deVal: parseInt(count)
});
$("#chNum1").rollNum({
deVal: parseInt(count)
});
$("#chNum2").rollNum({
deVal: parseInt(count)
});
$("#chNum3").rollNum({
deVal: parseInt(count)
});
},
error: function (err) {
//
console.log("_________error____________");
}
});
}
catch (e) {
}
}
function addFiles(){
var file = document.getElementById("attend-files").files;
var filename = file[0].name;
var filetext = filename.substring(filename.lastIndexOf("."), filename.length)
filetext = filetext.toLowerCase();
if (filetext != '.xls' && filetext != '.xlsx') {
promptDialog("文件格式错误!")
RevertUploadFileInput();
return;
}
var filesize = file[0].size;
if (filesize > 1024 * 1024 * 200) {
console.log("文件大小不能超过200M");
return;
}
var file = $('.filess').val();
var str = GetFileName(file);
if (str.length > 15) {
var short= str.replace(/^(^.{8})(.+)(.{2}\.+\w+$)$/g, "$1...$3");
$('.change_btn').text(short);
}
else {
$('.change_btn').text(str);
}
}
function FileUpload () {
//SystemNotice.show({
// systitle: "温馨提示", systext: "正在上传",
//});
console.log("正在上传中");
//表格上传
var options = {
type: "post",
url: 'http://localhost:62101/StatisticsService/JobIntroduction/Unemployment/v1/UploadExcel',
success: function (resultjson) {
console.log(resultjson);
if (resultjson.IsOK) {
if (resultjson.RowCount == "0") {
console.log("表中没有数据!");
}
console.log("上传成功");
//上传成功后 把控件还原初始状态
//按钮变色
$('#useDate').attr('value', '');
$('.filess').attr('value', '');
} else {
//上传失败后 把控件还原初始状态
if (resultjson.Message != null || resultjson.Message != "" || resultjson.Message != undefined) {
//SystemNotice.show({
// systitle: "温馨提示", systext: resultjson.Message,
//});
} else {
//SystemNotice.show({
// systitle: "温馨提示", systext: "上传失败!",
//});
}
}
}
};
$("#Excelform").ajaxForm(options).submit();
}
//提交表单
function btnClick()
{
//年月和文件不能为空
var ym = $('#useDate').val();
var file = $('.filess').val();
if (ym === "" || file === "") {
promptDialog("请填写完整!");
insertMaskLayer('#maskDiv2', 'maskDiv2', 200, false);
return;
}
//调用文件上传
FileUpload();
}
function doHandleDate() {
var myDate = new Date();
var tYear = myDate.getFullYear();
var tMonth = myDate.getMonth();
var m = tMonth + 1;
if (m.toString().length == 1) {
m = "0" + m;
}
return tYear + '-' + m;
}
//提示框
function promptDialog(str) {
$('#promptDiv').show();
$('#promptDiv #body_prompt label').text(str);
}
function hiddenDialog_Click() {
$('#promptDiv').hide();
insertMaskLayer('#maskDiv2', 'maskDiv2', 200, true);
}
function insertMaskLayer(eleNameById, eleName, zIndex, isRemove) {
if ($(eleNameById).length > 0) {
if (isRemove) {
$(eleNameById).remove();
}
return;
}
if (!isRemove) {
var sWidth, sHeight;
sWidth = document.body.offsetWidth;
sHeight = screen.height;
var bgObj = document.createElement("div");
bgObj.setAttribute('id', eleName);
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "rgba(0,0,0,0.5)";
bgObj.style.filter = "alpha(opacity=50);";
bgObj.style.opacity = "0.5";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
bgObj.style.zIndex = zIndex;
document.body.appendChild(bgObj);
}
};
function change_btn_click() {
console.log('changebtnclick');
$(".filess").click();
}
function RevertUploadFileInput() {
$(".upload_file").html('');
var htmls = '';
htmls = ' <input type="file" class="filess" id="attend-files" style="display:none;" name="File" value=" " onchange="addFiles();" />';
htmls += ' <label class="filetext" style="color:white;font-size:14px;width:30px;">选择文件:</label>';
htmls += '<u class="change_btn" style="color:white;cursor:pointer;" onclick="try{change_btn_click()}catch(e){alert(e)}" >上传文件</u>';
$(".upload_file").html(htmls);
}