sdz/cmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

成都劳动力大屏集成

Browse Source
This commit is contained in:
zxy
2024-02-05 10:16:53 +08:00
parent ca50d9cab0
commit d06101daec
97 changed files with 17341 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

520
public/chengdu/history.html Normal file
View File

@@ -0,0 +1,520 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<title>市场招聘大数据展示平台</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/theme/default/layer.css" />
<script type="text/javascript" src="js/common/jquery.min.js"></script>
<script type="text/javascript" src="js/common/layer.js"></script>
<script type="text/javascript" src="js/common/echarts.min.js"></script>
<style>
.tb {
position: absolute;
left: 20px;
z-index: 10000;
}
.switch {
position: absolute;
right: 20px;
z-index: 10000;
}
#main {
margin-top: 40px;
}
#tb-main {
margin-top: 40px;
}
.pop-title {
color: #ffffff;
font-size: 24px;
}
</style>
</head>
<body>
<!-- 历史数据 -->
<div
id="sj"
class="container"
style="padding: 20px; width: 100%; height: 100%"
>
<div class="center-block text-center pop-title">历史数据</div>
<div class="tb" style="display: flex;align-items: center;">
<div id="btn-tb" class="btn btn-default" onclick="tbShow()">
历史同比
</div>
<div style="display: flex; margin-left: 20px;align-items: center;">
<span style="display: block;width: 30px;height: 15px;background-color: #dd76aa;border-radius: 3px;";></span>
<span style="color: #dd76aa;margin-left: 5px;">2022</span>
<span style="display: block;width: 30px;height: 15px;background-color: #36c3fd;border-radius: 3px;margin-left: 20px;";></span>
<span style="color: #36c3fd;margin-left: 5px;">2023</span>
</div>
</div>
<div class="switch btn-group">
<div id="btn-xqs" class="btn btn-default active" onclick="xqsShow()">
岗位需求数
</div>
<div id="btn-qzs" class="btn btn-default" onclick="qzsShow()">
求职人数
</div>
</div>
<div id="main" style="width: 100%; height: 580px"></div>
</div>
<!-- 历史同比 -->
<div
id="tb"
class="container"
style="display: none; padding: 20px; width: 100%; height: 100%"
>
<div class="center-block text-center pop-title">历史同比</div>
<div class="tb">
<div id="btn-tb" class="btn btn-default" onclick="sjShow()">返回</div>
</div>
<div class="switch btn-group">
<div
id="btn-tb-xqs"
class="btn btn-default active"
onclick="tbxqsShow()"
>
岗位需求数
</div>
<div id="btn-tb-qzs" class="btn btn-default" onclick="tbqzsShow()">
求职人数
</div>
</div>
<div id="tb-main" style="width: 958px; height: 580px"></div>
</div>
<script type="text/javascript">
var baseUrl = "http://39.101.167.152:8088/shekecaiji";
function getUrlParam(name) {
//构造一个含有目标参数的正则表达式对象
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
//匹配目标参数
var r = window.location.search.substr(1).match(reg);
//返回参数值
if (r != null) return decodeURI(r[2]);
return "";
}
var pageType = getUrlParam("type"); //父页面的类型
var abbreviation = getUrlParam("abbreviation"); //父页面的类型
var histUrl,
tongbiUrl = "";
if (pageType == 1) {
histUrl = "/histNew/getData8";
tongbiUrl = "/tongbi/getData8";
} else if (pageType == 2) {
histUrl = "/histNew/getData5";
tongbiUrl = "/tongbi/getData5";
} else if (pageType == 3) {
histUrl = "/histNew/getData7";
tongbiUrl = "/tongbi/getData7";
} else if (pageType == 4) {
histUrl = "/histNew/getData4";
tongbiUrl = "/tongbi/getData4";
} else if (pageType == 5) {
histUrl = "/histNew/getData12";
tongbiUrl = "/tongbi/getData12";
} else if (pageType == 6) {
histUrl = "/histNew/getData10";
tongbiUrl = "/tongbi/getData10";
} else if (pageType == 0) {
histUrl = "/histNew/getData1";
tongbiUrl = "/tongbi/getData1";
} else if (pageType == 7) {
histUrl = "/histNew/getData6";
tongbiUrl = "/tongbi/getData6";
} else if (pageType == 11) {
histUrl = "/histNew/getData11";
tongbiUrl = "/tongbi/getData11";
}
var chartType = "xq"; //图表类型
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var colors = {2022: '#dd76aa', 2023: '#36c3fd', 2024: '#FFC851', 2025: '#C1EBDD'}
var option;
option = {
legend: {
data: [],
textStyle: {
color: "orange",
},
width: "95%", // 设置最大宽度为容器宽度的50%
itemGap: 10, // 设置图例每项之间的间隔为10px
left: "center", // 居中显示图例
top: "top", // 避免遮挡title
selected: {},
show: true,
itemWidth: 15,
selectedMode: "single",
itemHeight: 15,
icon: "path://M512 0C227.06087 0 0 227.06087 0 512S227.06087 1024 512 1024 1024 796.93913 1024 512 796.93913 0 512 0z m311.652174 391.791304l-342.817391 342.817392c-8.904348 8.904348-22.26087 13.356522-31.165218 13.356521s-22.26087-4.452174-31.165217-13.356521l-169.182609-169.182609c-17.808696-17.808696-17.808696-48.973913 0-66.782609 17.808696-17.808696 48.973913-17.808696 66.782609 0l138.017391 138.017392 311.652174-311.652174c17.808696-17.808696 48.973913-17.808696 66.782609 0 8.904348 17.808696 8.904348 48.973913-8.904348 66.782608z",
},
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
grid: {
left: "0",
top: "20%",
right: "5",
bottom: "5",
containLabel: true,
},
xAxis: {
nameLocation: "end",
nameGap: 7,
type: "category",
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.9)",
width: 1,
type: "solid",
},
},
axisTick: { show: false },
axisLabel: {
interval: 0,
rotate: 0,
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "9" },
},
},
yAxis: {
type: "value",
name: "万人/万个",
nameGap: 0,
nameTextStyle: {
color: "#fff",
fontSize: 10,
lineHeight: 30,
height: 30,
padding: 6,
},
position: "top",
axisLabel: {
show: true,
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "10" },
},
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.9)",
width: 1,
type: "solid",
},
},
splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
},
series: [],
};
function loadData(type) {
let arrData = [];
if (chartType == "xq") {
option.yAxis.name = "万个";
} else {
option.yAxis.name = "万人";
}
$.ajax({
type: "GET",
url: baseUrl + histUrl,
async: true,
data: {
shengfen: abbreviation,
},
success: function (res) {
if (res.code == "0") {
var data = res.data;
option.xAxis.data = data.xiabiao;
option.legend.selected = {};
option.series = [];
var tempData = [];
for (let i = 0; i < data.fenlei.length; i++) {
let name = data.fenlei[i];
var tempObj = {
name: name,
};
tempData.push(tempObj);
let listName = chartType + name;
if(pageType == 0) {
listName = chartType
}
if (i == 0) {
option.legend.selected[`${data.fenlei[i]}`] = true;
} else {
option.legend.selected[`${data.fenlei[i]}`] = false;
}
for(item in data.data) {
console.log(item)
let myData = data.data[item]
let obj = {
name: data.fenlei[i],
type: "bar",
itemStyle: {
normal: {
opacity: 1,
barBorderRadius: 0,
color: colors[item],
},
},
label: {
show: true,
position: "top",
distance: 5,
fontSize: "10",
},
barWidth: "25%",
data: myData[listName],
};
arrData.push(obj);
}
}
option.legend.data = tempData;
option.series = arrData;
option && myChart.setOption(option);
}
},
});
}
xqsShow();
function xqsShow() {
$("#btn-xqs").addClass("active");
$("#btn-qzs").removeClass("active");
chartType = "xq";
loadData(1);
}
function qzsShow() {
$("#btn-xqs").removeClass("active");
$("#btn-qzs").addClass("active");
chartType = "qz";
loadData(1);
}
function sjShow() {
$("#sj").show();
$("#tb").hide();
}
function tbShow() {
$("#sj").hide();
$("#tb").show();
tbxqsShow();
}
var tbChartDom = document.getElementById("tb-main");
var tBChart = echarts.init(tbChartDom);
var tbOption;
tbOption = {
// textStyle: {
// color: "#ccc",
// },
// tooltip: {
// trigger: "axis",
// },
// legend: {
// data: [],
// textStyle: {
// color: "orange",
// },
// width: "95%", // 设置最大宽度为容器宽度的50%
// itemGap: 10, // 设置图例每项之间的间隔为10px
// left: "center", // 居中显示图例
// top: "top", // 避免遮挡title
// selected: {},
// show: true,
// selectedMode: "single",
// itemWidth: 15,
// itemHeight: 15,
// icon: "path://M512 0C227.06087 0 0 227.06087 0 512S227.06087 1024 512 1024 1024 796.93913 1024 512 796.93913 0 512 0z m311.652174 391.791304l-342.817391 342.817392c-8.904348 8.904348-22.26087 13.356522-31.165218 13.356521s-22.26087-4.452174-31.165217-13.356521l-169.182609-169.182609c-17.808696-17.808696-17.808696-48.973913 0-66.782609 17.808696-17.808696 48.973913-17.808696 66.782609 0l138.017391 138.017392 311.652174-311.652174c17.808696-17.808696 48.973913-17.808696 66.782609 0 8.904348 17.808696 8.904348 48.973913-8.904348 66.782608z",
// },
// grid: {
// top: "20%",
// left: "3%",
// right: "4%",
// bottom: "3%",
// containLabel: true,
// },
// toolbox: {
// feature: {
// saveAsImage: {},
// },
// },
// xAxis: {
// type: "category",
// boundaryGap: false,
// name: "月份",
// data: [],
// },
// yAxis: {
// type: "value",
// name: "增长率",
// },
// series: [],
legend: {
data: [],
textStyle: {
color: "orange",
},
width: "95%", // 设置最大宽度为容器宽度的50%
itemGap: 10, // 设置图例每项之间的间隔为10px
left: "center", // 居中显示图例
top: "top", // 避免遮挡title
selected: {},
show: true,
itemWidth: 15,
selectedMode: "single",
itemHeight: 15,
icon: "path://M512 0C227.06087 0 0 227.06087 0 512S227.06087 1024 512 1024 1024 796.93913 1024 512 796.93913 0 512 0z m311.652174 391.791304l-342.817391 342.817392c-8.904348 8.904348-22.26087 13.356522-31.165218 13.356521s-22.26087-4.452174-31.165217-13.356521l-169.182609-169.182609c-17.808696-17.808696-17.808696-48.973913 0-66.782609 17.808696-17.808696 48.973913-17.808696 66.782609 0l138.017391 138.017392 311.652174-311.652174c17.808696-17.808696 48.973913-17.808696 66.782609 0 8.904348 17.808696 8.904348 48.973913-8.904348 66.782608z",
},
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
grid: {
left: "0",
top: "20%",
right: "5",
bottom: "5",
containLabel: true,
},
xAxis: {
nameLocation: "end",
nameGap: 7,
name: "月份",
type: "category",
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.9)",
width: 1,
type: "solid",
},
},
axisTick: { show: false },
axisLabel: {
interval: 0,
rotate: 0,
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "9" },
},
},
yAxis: {
type: "value",
name: "增长率",
nameGap: 0,
nameTextStyle: {
color: "#fff",
fontSize: 10,
lineHeight: 30,
height: 30,
padding: 6,
},
position: "top",
axisLabel: {
show: true,
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "10" },
},
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.9)",
width: 1,
type: "solid",
},
},
splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
},
series: [],
};
function tbLoadData(type) {
let arrData = [];
$.ajax({
type: "GET",
url: baseUrl + tongbiUrl,
async: true,
data: {
shengfen: abbreviation,
},
success: function (res) {
if (res.code == "0") {
var data = res.data;
tbOption.xAxis.data = data.dataList;
tbOption.legend.data = data.name;
tbOption.series = [];
for (let i = 0; i < data.name.length; i++) {
let listName = chartType + "list" + i;
if (pageType == 0) {
listName = chartType + "list";
}
if (i == 0) {
tbOption.legend.selected[`${data.name[i]}`] = true;
} else {
tbOption.legend.selected[`${data.name[i]}`] = false;
}
let obj = {
name: data.name[i],
type: "bar",
barWidth: "40%",
itemStyle: {
normal: {
opacity: 1,
barBorderRadius: 0,
color: "#36c3fd",
},
},
label: {
show: true,
position: "top",
distance: 5,
fontSize: "10",
},
data: data[listName],
};
arrData.push(obj);
}
tbOption.series = arrData;
tbOption && tBChart.setOption(tbOption);
}
},
});
}
function tbxqsShow() {
$("#btn-tb-xqs").addClass("active");
$("#btn-tb-qzs").removeClass("active");
chartType = "xq";
tbLoadData(1);
}
function tbqzsShow() {
$("#btn-tb-xqs").removeClass("active");
$("#btn-tb-qzs").addClass("active");
chartType = "qz";
tbLoadData(1);
}
</script>
</body>
</html>