You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bigData_XT/js/fulltimeTeachersTitle.js

395 lines
16 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

// 专任教师职称情况
$(function () {
// 标题增加年份
$('#title_text').prepend(config_now_year)
// 渲染年份列表 在nav.js中获取select_year
$('#select-year').append(select_year)
$('.select').on('click', '.placeholder', function (e) {
var parent = $(this).closest('.select');
if (!parent.hasClass('is-open')) {
parent.addClass('is-open');
$('.select.is-open').not(parent).removeClass('is-open');
} else {
parent.removeClass('is-open');
}
e.stopPropagation();
}).on('click', 'ul>li', function () {
var parent = $(this).closest('.select');
parent.removeClass('is-open').find('.placeholder').text($(this).text());
$(window).attr('location', "fulltimeTeachersTitle.html?year=" + $(this).text());
let on_year = $(this).text();
echartSizeInfo(on_year);
});
// var data = [
// {name: '南关区', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '12%'},
// {name: '宽城区', info1: '6%', info2: '1%', info3: '2%', info4: '7%', info5: '4%', info6: '12%'},
// {name: '朝阳区', info1: '12%', info2: '5%', info3: '6%', info4: '8%', info5: '12%', info6: '12%'},
// {name: '二道区', info1: '3%', info2: '7%', info3: '3%', info4: '19%', info5: '8%', info6: '12%'},
// {name: '绿园区', info1: '6%', info2: '9%', info3: '2%', info4: '15%', info5: '4%', info6: '12%'},
// {name: '双阳区', info1: '10%', info2: '3%', info3: '7%', info4: '11%', info5: '4%', info6: '12%'},
// {name: '九台区', info1: '7%', info2: '15%', info3: '3%', info4: '5%', info5: '6%', info6: '12%'},
// {name: '农安县', info1: '12%', info2: '15%', info3: '2%', info4: '12%', info5: '4%', info6: '12%'},
// {name: '经开区', info1: '2%', info2: '15%', info3: '12%', info4: '12%', info5: '2%', info6: '12%'},
// {name: '净月区', info1: '18%', info2: '2%', info3: '2%', info4: '12%', info5: '4%', info6: '12%'},
// {name: '高新区', info1: '12%', info2: '5%', info3: '2%', info4: '14%', info5: '12%', info6: '12%'},
// {name: '汽车区', info1: '12%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '12%'},
// {name: '榆树市', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '12%'},
// {name: '德惠市', info1: '10%', info2: '5%', info3: '2%', info4: '12%', info5: '4%', info6: '12%'},
// ]
var tableDate = [];
var typeOfBe = '小学';
$('#Sxiaoxue').click(function (event) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
typeOfBe = '小学';
tableDate = [];
echartSizeInfo(config_now_year);
})
$('#Schuzhong').click(function (event) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
typeOfBe = '初中';
tableDate = [];
echartSizeInfo(config_now_year);
})
$('#Sgaozhong').click(function (event) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
typeOfBe = '高中';
tableDate = [];
echartSizeInfo(config_now_year);
})
echartSizeInfo(config_now_year);
function echartSizeInfo(year) {
$.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "A031",
"query_param": [
year
]
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"gatherregionc"
]
}), function (resport) {
var data = resport.result;
var indata = JSON.parse(data);
var nameData = [];
var info1 = [];
var info2 = [];
var info3 = [];
var info4 = [];
var info5 = [];
var info6 = [];
indata.forEach((item, index) => {
if (item.stage === typeOfBe) {
if (item.didgroup.trim() === "正高级") {
nameData.push(item.gatherregionc);
if (item.teacherno == 0) {
info1.push(0);
} else {
info1.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "副高级") {
if (item.teacherno == 0) {
info2.push(0);
} else {
info2.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "中级") {
if (item.teacherno == 0) {
info3.push(0);
} else {
info3.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "助理级") {
if (item.teacherno == 0) {
info4.push(0);
} else {
info4.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "员级") {
if (item.teacherno == 0) {
info5.push(0);
} else {
info5.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
if (item.didgroup.trim() === "未定职级") {
if (item.teacherno == 0) {
info6.push(0);
} else {
info6.push(Math.round(((item.total / item.teacherno).toFixed(4)) * 100));
}
}
}
});
nameData.forEach((item, index) => {
tableDate.push({
name: item,
info1: `${info1[index]}%`,
info2: `${info2[index]}%`,
info3: `${info3[index]}%`,
info4: `${info4[index]}%`,
info5: `${info5[index]}%`,
info6: `${info6[index]}%`,
})
});
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('echartTeacherTitle')); // 专任教师职称情况柱状图
option = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['正高级', '副高级', '中级', '助理级', '员级', '未定级'],
textStyle: {
color: '#fff'
}
},
grid: {
left: '0%',
top: '8%',
right: '0%',
bottom: '4%',
containLabel: true
},
xAxis: [{
type: 'category',
data: nameData,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
// rotate:50,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} %',
show: true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1 )",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
series: [
{
name: '正高级',
stack: '职称',
type: 'bar',
data: info1,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#00BBFF',
opacity: 1,
}
}
},
{
name: '副高级',
stack: '职称',
type: 'bar',
data: info2,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#ffaa33',
opacity: 1,
}
}
},
{
name: '中级',
stack: '职称',
type: 'bar',
data: info3,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#dddddd',
opacity: 1,
}
}
},
{
name: '助理级',
stack: '职称',
type: 'bar',
data: info4,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#ffff00',
opacity: 1,
}
}
},
{
name: '员级',
stack: '职称',
type: 'bar',
data: info5,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#5555ff',
opacity: 1,
}
}
},
{
name: '未定级',
stack: '职称',
type: 'bar',
data: info6,
barWidth: '25%', //柱子宽度
// barGap: 1, //柱子之间间距
// label: {
// show: true,
// position: 'top'
// },
itemStyle: {
normal: {
color: '#c71585',
opacity: 1,
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
getTable();
}, 'json')
}
function getTable() {
$('#teacherTitleTable').empty();
$('#teacherTitleTable').append(
'<tr style="line-height: 0.35rem;"><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 5%; background: #0044bb;">序号</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 15%; background: #0044bb;">县域名称</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 13.3%; background: #0044bb;">正高级</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 13.3%; background: #0044bb;">副高级</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 13.3%; background: #0044bb;">中级</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 13.3%; background: #0044bb;">助理级</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 13.3%; background: #0044bb;">员级</th><th style="text-align: center; color: #fff; width: 13.3%; background: #0044bb;">未定级</th></tr>'
)
tableDate.forEach((item, index) => {
var newIndex = index + 1;
$('#teacherTitleTable').append(
"<tr style='line-height: 0.35rem; border-bottom: 1px solid rgba(255,255,255,.2)'><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 5%;'>" + newIndex + "</td><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 15%;'>" + item.name + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 13.3%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info1 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 13.3%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info2 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 13.3%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info3 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 13.3%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info4 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 13.3%; border-right: 1px solid rgba(255,255,255,.2);'>" + item.info5 + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 13.3%;'>" + item.info6 + "</td></tr>"
)
})
}
})