|
|
|
|
|
$(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 += `
|
|
|
<tr>
|
|
|
<td class="tg-0pky">${e.topic_name}</td>
|
|
|
<td class="tg-0pky" style="max-width: 110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${e.social_name}</td>
|
|
|
<td class="tg-0pky">${e.total}</td>
|
|
|
</tr>`
|
|
|
})
|
|
|
$("#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 += `
|
|
|
// <div class="huoyue"><span>${e}</span><br>活跃度</div>`
|
|
|
// })
|
|
|
// $("#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 += `
|
|
|
<div class="huoyue"><span>${e.total}</span><br>活跃度</div>`
|
|
|
})
|
|
|
$("#huoyuedu").html(phHtml)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
