$(function () {
const axiosConf = { url: config_serverIp + "/dataex/report/QuerySimpleGP", method: 'post' };
let time = "all"
let l1_xueduan = "0"
let l1_type = 1
let l2_xueduan = "0"
let r2_xueduan = "0"
// 标题增加年份
r1(time);
r2(r2_xueduan, time);
// 时间切换
$('body').on('click', '#switch_month', function (e) {
time = "day";
$('.switch-time a').removeClass('act')
$('#switch_month').addClass("act")
l1(l1_xueduan, l1_type, time)
l2(time);
c1(l2_xueduan, time)
c2(time);
c3(time);
c3table(time)
r1(time);
r2(r2_xueduan, time);
})
// 人数、次数切换
$('body').on('click', '#switch_year', function (e) {
time = "month"
$('.switch-time a').removeClass('act')
$('#switch_year').addClass("act")
l1(l1_xueduan, l1_type, time)
l2(time);
c1(l2_xueduan, time)
c2(time);
c3(time);
c3table(time)
r1(time);
r2(r2_xueduan, time);
})
$('body').on('click', '#switch_all', function (e) {
time = "all"
$('.switch-time a').removeClass('act')
$('#switch_all').addClass("act")
l1(l1_xueduan, l1_type, time)
l2(time);
c1(l2_xueduan, time)
c2(time);
c3(time);
c3table(time)
r1(time);
r2(r2_xueduan, time);
})
// l1 学校空间访问情况监测 切换
//学段切换
$('#djfwqkxz').on('change', function () {
l1_xueduan = $(this).val() + ""
l1(l1_xueduan, l1_type, time)
})
$('#l1_loginrs').on('click', function () {
$('#l1_xuezhi').children().removeClass("act")
$('#l1_loginrs').addClass("act")
l1_type = 1
l1(l1_xueduan, l1_type, time)
})
$('#l1_logincs').on('click', function () {
$('#l1_xuezhi').children().removeClass("act")
$('#l1_logincs').addClass("act")
l1_type = 2
l1(l1_xueduan, l1_type, time)
})
l1(l1_xueduan, l1_type, time);
function l1(xueduan, type, time) {
if (type == 1 && time == "all") {
query_id = "stage_login_num_all"
query_param = [xueduan, xueduan]
} else if (type == 2 && time == "all") {
query_id = "stage_login_times_all"
query_param = [xueduan, xueduan]
} else if (type == 1 && time == "month") {
query_id = "stage_login_times_month"
query_param = [xueduan, xueduan, nowYear]
} else if (type == 2 && time == "month") {
query_id = "stage_login_times_month"
query_param = [xueduan, xueduan, nowYear]
} else if (type == 1 && time == "day") {
query_id = "stage_login_num_day"
query_param = [xueduan, xueduan, nowYear, nowMonth]
} else if (type == 2 && time == "day") {
query_id = "stage_login_times_day"
query_param = [xueduan, xueduan, nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"org_name",
"social_name"
]
}
})
.then((response) => {
const resData = JSON.parse(response.data.result)
const xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
const legendData = ["教师", "学生"]
let series = []
resData.groups[1].map((e, i) => {
series.push({
name: e,
type: 'bar',
data: resData.datas[i],
barMaxWidth: 20,
})
})
let dataZoomShow = {}
if (xAxisName.length > 15) {
dataZoomShow = {
show: true,
}
} else {
dataZoomShow = {
show: false,
end: 100
}
}
// ===========================================
var myChart = echarts.init(document.getElementById('l1')); // 各阶段学校数量
option = {
// height: "100px",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
textStyle: {
color: '#01DFF4'
},
grid: {
top: 50,
right: 10,
bottom: 80,
},
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
legend: {
data: legendData,
itemWidth: 8,
itemHeight: 8,
right: 10,
top: 10,
textStyle: {
color: '#01DFF4'
},
},
xAxis: [
{
type: 'category',
data: xAxisName,
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
axisLabel: {
rotate: 30,
fontSize: 10
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
}
],
dataZoom: [
{
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
xAxisIndex: 0, //显示x轴滑块
height: "15px",
end: 80,
top: "95%",
...dataZoomShow
}
],
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})
}
// l2 空间资源建设情况统计
l2(time);
function l2(time) {
if (time === "all") {
query_id = "post_total_all"
query_param = []
} else if (time === "month") {
query_id = "post_total_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "post_total_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"social_typename",
"social_name"
]
}
})
.then((response) => {
const resData = JSON.parse(response.data.result)
// 获取学科
const xueke = [];
resData.map((item) => {
xueke.push({ id: item.social_type, name: item.social_typename, total: item.total });
})
// 去重
xuekeFil = xueke.filter((item, index) => {
return xueke.findIndex(_item => _item.id == item.id) == index;
})
let allNum = []
xuekeFil.map((e, index) => {
let num = 0
xuekeFil.children = []
resData.map((item, i) => {
if (item.social_typename == e.name) {
num += Number(item.total)
}
})
$("#" + "num" + Number(index + 1)).html(num)
allNum.push(num)
xuekeFil[index].total = num
// $("#" + "num" + Number(index + 1)).html(num)
})
resData.map((item) => {
if (item.social_type == 1 && item.social_name == "教师") {
const w = (item.total / allNum[0] * 100).toFixed(2) + "%"
$("#wenzhangTNum").html(item.total);
$("#wenzhangTAcc").html(w);
$("#wenzhangTloading").animate({ width: w });
}
if (item.social_type == 1 && item.social_name == "学生") {
const w = (item.total / allNum[0] * 100).toFixed(2) + "%"
$("#wenzhangSNum").html(item.total)
$("#wenzhangSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
$("#wenzhangSloading").animate({ width: w });
}
if (item.social_type == 2 && item.social_name == "教师") {
const w = (item.total / allNum[1] * 100).toFixed(2) + "%"
$("#xiangceTNum").html(item.total);
$("#xiangceTAcc").html(w);
$("#xiangceTloading").animate({ width: w });
}
if (item.social_type == 2 && item.social_name == "学生") {
const w = (item.total / allNum[1] * 100).toFixed(2) + "%"
$("#xiangceSNum").html(item.total)
$("#xiangceSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
$("#xiangceSloading").animate({ width: w });
}
if (item.social_type == 4 && item.social_name == "教师") {
const w = (item.total / allNum[2] * 100).toFixed(2) + "%"
$("#liuyanTNum").html(item.total);
$("#liuyanTAcc").html(w);
$("#liuyanTloading").animate({ width: w });
}
if (item.social_type == 4 && item.social_name == "学生") {
const w = (item.total / allNum[2] * 100).toFixed(2) + "%"
$("#liuyanSNum").html(item.total)
$("#liuyanSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
$("#liuyanSloading").animate({ width: w });
}
if (item.social_type == 5 && item.social_name == "教师") {
const w = (item.total / allNum[3] * 100).toFixed(2) + "%"
$("#huodongTNum").html(item.total);
$("#huodongTAcc").html(w);
$("#huodongTloading").animate({ width: w });
}
if (item.social_type == 5 && item.social_name == "学生") {
const w = (item.total / allNum[3] * 100).toFixed(2) + "%"
$("#huodongSNum").html(item.total)
$("#huodongSAcc").html((item.total / allNum[0] * 100).toFixed(2) + "%");
$("#huodongSloading").animate({ width: w });
}
})
})
}
// c1 学校主题活动开展情况监测
//学段切换
$('#c1_xueduan').on('change', function () {
c1_xueduan = $(this).val() + ""
c1(c1_xueduan, time)
})
c1(l2_xueduan, time);
function c1(xueduan, time) {
if (time === "all") {
query_id = "stage_org_social_all"
query_param = [xueduan, xueduan]
} else if (time === "month") {
query_id = "stage_org_social_month"
query_param = [xueduan, xueduan, nowYear]
} else if (time === "day") {
query_id = "stage_org_social_day"
query_param = [xueduan, xueduan, nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"org_name",
"topic_name"
]
}
})
.then((response) => {
const resData = JSON.parse(response.data.result)
const xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
const legendData = resData.groups[1]
let series = []
resData.groups[1].map((e, i) => {
series.push({
name: e,
type: 'bar',
stack: "all",
data: resData.datas[i],
barMaxWidth: 40,
})
})
var myChart = echarts.init(document.getElementById('c1')); // 各阶段学校数量
option = {
// height: "100px",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
textStyle: {
color: '#01DFF4'
},
grid: {
top: 55,
bottom: 80,
right: 10
},
color: ["#0BCAEA", "#FE8E3A", "#3FDB94", "#4992FF", "#FF6E76"],
legend: {
data: legendData,
top: 15,
right: 10,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#01DFF4'
},
},
xAxis: [
{
type: 'category',
data: xAxisName,
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
axisLabel: {
interval: 0,
fontSize: 10,
rotate: "35"
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
},
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
}
],
dataZoom: [
{
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
xAxisIndex: 0, //显示x轴滑块
height: "15px",
end: 80,
top: "95%"
}
],
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})
}
c2(time);
function c2(time) {
if (time === "all") {
query_id1 = "login_num_all"
query_id2 = "login_times_all"
query_param = []
query_group1 = ["year_name"]
query_group2 = ["year_name", "social_name"]
} else if (time === "month") {
query_id1 = "login_num_month"
query_id2 = "login_times_month"
query_param = [nowYear]
query_group1 = ["month_name"]
query_group2 = ["month_name", "social_name"]
} else if (time === "day") {
query_id1 = "login_num_day"
query_id2 = "login_times_day"
query_param = [nowYear, nowMonth]
query_group1 = ["day_name"]
query_group2 = ["day_name", "social_name"]
}
axios.all([
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id1,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": query_group1
}
}),
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id2,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": query_group2
}
})
]).then(axios.spread(function (loginNumLineData, loginNumBarData) {
const loginNumLine = JSON.parse(loginNumLineData.data.result)
const loginNumBar = JSON.parse(loginNumBarData.data.result)
const xAxisName = loginNumLine.groups[0]
const legendData = ['登录人数', '教师登录次数', '学生登录次数']
// 循环显示柱形图。
let loginNum = []
loginNumBar.groups[1].map((e, i) => {
loginNum.push({
name: e,
type: 'bar',
data: loginNumBar.datas[i],
barMaxWidth: 20,
})
})
const lineData = loginNumLine.datas[0]
var myChart = echarts.init(document.getElementById('c2')); // 各阶段学校数量
option = {
// height: "100px",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
textStyle: {
color: '#01DFF4'
},
grid: {
top: 35,
bottom: 30
},
color: ["#FFFF80", "#FF6E76", "#4992FF", "#3FDB94", "#FF6E76"],
legend: {
data: legendData,
top: 10,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#01DFF4'
},
},
xAxis: [
{
type: 'category',
data: xAxisName,
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
},
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
splitLine: {//分割线配置
lineStyle: {
show: false,
color: "#010d5f",
}
},
}
],
// dataZoom: [
// {
// type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
// xAxisIndex: 0, //显示x轴滑块
// height: "15px",
// end: 30,
// }
// ],
series: [
{
name: '登录人数',
type: 'line',
yAxisIndex: 1,
data: lineData,
symbolSize: 2,
itemStyle: {
normal: {
lineStyle: {
width: 1// 0.1的线条是非常细的了
}
}
},
},
...loginNum
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}));
}
c3(time);
function c3(time = "all") {
if (time === "all") {
query_id = "social_topic_chart_all"
query_param = []
} else if (time === "month") {
query_id = "social_topic_chart_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "social_topic_chart_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"topic_name"
]
}
}).then((response) => {
const resData = JSON.parse(response.data.result)
const pieData = []
resData.groups[0].map((e, i) => {
pieData.push({
name: e,
value: resData.datas[0][i]
})
})
var myChart = echarts.init(document.getElementById('c3')); // 各阶段学校数量
option = {
// height: "100px",
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0
},
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
series: [
{
name: '主题活动',
type: 'pie',
radius: '50%',
data: pieData
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})
}
c3table(time)
function c3table(time) {
if (time === "all") {
query_id = "social_played_top5_all"
query_param = []
} else if (time === "month") {
query_id = "social_played_top5_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "social_played_top5_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"social_name",
"topic_name"
]
}
})
.then((response) => {
const resData = JSON.parse(response.data.result)
let phHtml = ""
resData.map((e, i) => {
phHtml += `
| ${e.topic_name} |
${e.social_name} |
${e.total} |
`
})
$("#huodongtable").html(phHtml)
})
}
function r1(time) {
if (time === "all") {
query_id = "login_support_total_all"
query_param = []
} else if (time === "month") {
query_id = "login_support_total_month"
query_param = [nowYear]
} else if (time === "day") {
query_id = "login_support_total_day"
query_param = [nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": query_id,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total",
"total2"
],
"query_format": "echarts",
"query_group": [
"org_name"
]
}
}).then((response) => {
const resData = JSON.parse(response.data.result)
const xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
let fwSum = 0
let gzSum = 0
resData.datas[0].map((e) => {
fwSum += Number(e)
})
resData.datas2[0].map((e) => {
gzSum += Number(e)
})
$("#fwSum").html(fwSum)
$("#gzSum").html(gzSum)
var myChart = echarts.init(document.getElementById('r1')); // 各阶段学校数量
option = {
// height: "100px",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
textStyle: {
color: '#01DFF4'
},
grid: {
right: 10,
top: 50,
bottom: 80,
},
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
legend: {
data: ['访客数量', '关注情况'],
itemWidth: 8,
itemHeight: 8,
right: 10,
top: 15,
textStyle: {
color: '#01DFF4'
},
},
xAxis: [
{
type: 'category',
data: xAxisName,
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
axisLabel: {
rotate: 30,
fontSize: 10
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
}
}
],
dataZoom: [
{
type: "slider", //slider:滑块 inside:内置，依靠鼠标滚轮或者双击缩放
xAxisIndex: 0, //显示x轴滑块
height: "15px",
end: 80,
top: "90%"
}
],
series: [
{
name: '访客数量',
type: 'line',
data: resData.datas[0]
},
{
name: '关注情况',
type: 'line',
data: resData.datas2[0]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})
}
// r2 学校主题活动开展情况监测
//学段切换
$('#kjjshyd').on('change', function () {
r2_xueduan = $(this).val() + ""
r2(r2_xueduan, time);
})
function r2(xueduan, time) {
if (time === "all") {
query_param = [xueduan, xueduan, xueduan, xueduan,]
query_param1 = [xueduan, xueduan]
} else if (time === "month") {
query_param = [xueduan, xueduan, nowYear, xueduan, xueduan, nowYear]
query_param1 = [xueduan, xueduan, nowYear]
} else if (time === "day") {
query_param = [xueduan, xueduan, nowYear, nowMonth, xueduan, xueduan, nowYear, nowMonth]
query_param1 = [xueduan, xueduan, nowYear, nowMonth]
}
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "stage_liveness_" + time,
"query_param": query_param
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "echarts",
"query_group": [
"org_name",
"social_typename"
]
}
}).then((response) => {
const resData = JSON.parse(response.data.result)
console.log(resData, 'ph');
const xAxisName = resData.groups[0].map((e, i) => {
return e.replace("唐山市", "")
})
const legendData = resData.groups[1]
console.log(resData);
let series = []
resData.groups[1].map((e, i) => {
series.push({
name: e,
type: 'bar',
data: resData.datas[i],
barMaxWidth: 20,
})
})
// let phHtml = ""
// resData.datas2[0].map((e, i) => {
// phHtml += `
// ${e}
活跃度
`
// })
// $("#huoyuedu").html(phHtml)
var myChart = echarts.init(document.getElementById('r2')); // 各阶段学校数量
option = {
// height: "100px",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
textStyle: {
color: '#01DFF4'
},
grid: {
top: 50,
bottom: 50,
left: 100
},
color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
legend: {
top: 10,
data: legendData,
itemWidth: 8,
itemHeight: 8,
right: 20,
textStyle: {
color: '#01DFF4'
},
},
yAxis: [
{
type: 'category',
data: xAxisName,
inverse: true,
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
axisLabel: {
fontSize: 10
}
},
],
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#01DFF4' //更改坐标轴颜色
}
},
axisLabel: {
fontSize: 14
}
}
],
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})
axios({
...axiosConf,
data: {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "stage_liveness_total_" + time,
"query_param": query_param1
},
"query_cache": 0,
"query_count": [
"total"
],
"query_format": "json",
"query_group": [
"org_name"
]
}
}).then((response) => {
const resData = JSON.parse(response.data.result)
console.log(resData, 'ph1');
let phHtml = ""
resData.map((e, i) => {
phHtml += `
${e.total}
活跃度
`
})
$("#huoyuedu").html(phHtml)
})
}
})