diff --git a/html/css/kaiping.css b/html/css/kaiping.css index 6a00ad7..cd5701f 100644 --- a/html/css/kaiping.css +++ b/html/css/kaiping.css @@ -135,7 +135,7 @@ .kjzyjs-left { text-align: center; width: 20%; - line-height: 46px; + line-height: 40px; } .kjzyjs-center { width: 68%; @@ -150,23 +150,39 @@ position: absolute; } .kjzyjs-right { - width: 12%; + width: 10%; height: 60px; border-radius: 50%; border: 1px solid #01dff4; text-align: center; display: flex; + background-color: yellow; align-items: center; justify-content: center; } + +.kjzyjs-right div{ + background-color: red; + padding: 0 0.05rem; + display: block; +} .select { float: left; border: #01dff4 1px solid; background-color: #25e1f152; border-radius: 4px; padding: 0 5px; -} + box-sizing: border-box; + font-weight: bold; + color: #fff; +} +.select option { + border: #01dff4 1px solid; + background-color: #0d4f81; + color: white; +} +option:hover{background-color: #554ddd;} .switch-time { margin-top: -0.1rem; padding-right: 0.3rem; @@ -453,11 +469,14 @@ top: 0; .tg td{border-style:solid;border-width:1px;color:white;padding: 0.03rem; text-align: center;vertical-align:middle ;line-height: 0.245rem;} .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top; text-align: center;vertical-align:middle ;} .tg .tg-0lax{text-align:left;vertical-align:top} - +.zongshu{ + float: left; + margin-top:0.43rem; +} .kongjian-r1-class .huoyue{ -width:0.8rem; -margin: 0.2rem; -height:0.8rem; +width:0.55rem; +margin: 0.14rem; +height:0.55rem; background-color: #171147; border: 1px solid #577ada; border-radius: 50%; diff --git a/html/css/style.css b/html/css/style.css index 2c4ab4e..c069d00 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -144,7 +144,7 @@ body.sub-page .head .sub { /* padding-left:0.3rem; */ color:aqua; - width:65%; + width:45%; padding-top:0.1rem; position:absolute; z-index:99; @@ -254,7 +254,7 @@ body.sub-page .head .sub { .kjzyjs-left { text-align:center; width:20%; - line-height:46px; + line-height:42px; } .kjzyjs-center { width:68%; @@ -269,7 +269,7 @@ body.sub-page .head .sub { position:absolute; } .kjzyjs-right { - width:12%; + width:10%; height:60px; border-radius:50%; border:1px solid #01dff4; @@ -278,13 +278,31 @@ body.sub-page .head .sub { align-items:center; justify-content:center; } -.select { - float:left; - border:#01dff4 1px solid; - background-color:#25e1f152; - border-radius:4px; - padding:0 5px; -} +.kjzyjs-right div{ + width: 100%; + display: contents; +} +select { + + float: left; + outline: none; + border: #01dff4 1px solid; + background-color: #25e1f152; + border-radius: 4px; + padding: 0 5px; + height:0.25rem; + box-sizing: border-box; + font-weight: bold; + color: #fff; + + } + select option { + border: #01dff4 1px solid; + background-color: #0d4f81; + color: white; + } + option:hover{background-color: #554ddd;} + .switch-time { margin-top:-0.1rem; padding-right:0.3rem; @@ -584,10 +602,20 @@ body.sub-page .head .sub { text-align:left; vertical-align:top } +.huodongtable td{ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} +.zongshu{ + padding-top: 0.32rem; +} .kongjian-r1-class .huoyue { - width:0.8rem; - margin:0.2rem; - height:0.8rem; + width:0.65rem; + margin:0.15rem; + height:0.65rem; background-color:#171147; border:1px solid #577ada; border-radius:50%; diff --git a/html/images/95521bb744463633c858cc50abb44e7d.svg b/html/images/95521bb744463633c858cc50abb44e7d.svg new file mode 100644 index 0000000..ba9296a --- /dev/null +++ b/html/images/95521bb744463633c858cc50abb44e7d.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/js/kaipingkongjian.js b/html/js/kaipingkongjian.js index ef18a2b..312de5a 100644 --- a/html/js/kaipingkongjian.js +++ b/html/js/kaipingkongjian.js @@ -8,6 +8,7 @@ $(function () { // 标题增加年份 l1(); + l2(); c1(); c2(); c3(); @@ -15,9 +16,7 @@ $(function () { r2(); - - - function r2() { + function l1() { axios({ @@ -25,48 +24,183 @@ $(function () { data: { "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { - "query_id": "stage_liveness_month", + "query_id": "stage_login_num_all", "query_param": [ - "1", - "2021", - "1", - "2021" + "1" ] }, "query_cache": 0, "query_count": [ - "sub_total", "total" ], "query_format": "echarts", "query_group": [ "org_name", - "social_typename" + "social_name" ] } - }).then((response) => { - const resData = JSON.parse(response.data.result) - console.log("resData112", resData); - // const xAxisName = resData.groups[0] - // const legendData = resData.groups[1] - - // let series = [] - // resData.groups[1].map((e, i) => { - // series.push({ - // name: e, - // type: 'bar', - // data: resData.datas[i], - // barMaxWidth: 20, - // }) - - // }) - // console.log("xAxisName", xAxisName); - // console.log("legendData", legendData); - // console.log("series", series); + }) + .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', + data: resData.datas[i], + barMaxWidth: 20, + }) + + }) + + // =========================================== + + 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%" + } + ], + series: series + }; + + + // 使用刚指定的配置项和数据显示图表。 + myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); + + }) + + } + function l2() { + + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "post_total_all", + "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) + console.log(resData, 'resData'); + // 获取学科 + 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; + }) + xuekeFil.map((e, index) => { + console.log(e, 'e'); + let num = 0 + resData.map((item, i) => { + + if (item.social_typename == e.name) { + num += Number(item.total) + } + + }) + $("#num" + i).html(fwSum) + console.log(num, 'num'); + }) + + + }) } + + function c1() { axios({ @@ -93,7 +227,9 @@ $(function () { .then((response) => { const resData = JSON.parse(response.data.result) console.log(resData) - const xAxisName = resData.groups[0] + const xAxisName = resData.groups[0].map((e, i) => { + return e.replace("唐山市", "") + }) const legendData = resData.groups[1] let series = [] @@ -129,12 +265,17 @@ $(function () { color: '#01DFF4' }, grid: { - top: 30, - bottom: 60, + 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' }, @@ -150,7 +291,8 @@ $(function () { }, axisLabel: { interval: 0, - rotate: "45" + fontSize: 10, + rotate: "35" } }, @@ -179,7 +321,7 @@ $(function () { xAxisIndex: 0,   //显示x轴滑块 height: "15px", end: 80, - top: "85%" + top: "95%" } ], series: series @@ -273,7 +415,10 @@ $(function () { textStyle: { color: '#01DFF4' }, - + grid: { + top: 35, + bottom: 30 + }, color: ["#FFFF80", "#FF6E76", "#4992FF", "#3FDB94", "#FF6E76"], legend: { data: legendData, @@ -311,7 +456,13 @@ $(function () { lineStyle: { color: '#01DFF4' //更改坐标轴颜色 } - } + }, + splitLine: {//分割线配置 + lineStyle: { + show: false, + color: "#010d5f", + } + }, } ], // dataZoom: [ @@ -443,7 +594,9 @@ $(function () { } }).then((response) => { const resData = JSON.parse(response.data.result) - const xAxisName = resData.groups[0] + const xAxisName = resData.groups[0].map((e, i) => { + return e.replace("唐山市", "") + }) let fwSum = 0 let gzSum = 0 resData.datas[0].map((e) => { @@ -473,12 +626,16 @@ $(function () { }, grid: { right: 10, - top: 20, - bottom: 95, + top: 50, + bottom: 80, }, color: ["#0BCAEA", "#FE8E3A", "#3FDB94"], legend: { data: ['访客数量', '关注情况'], + itemWidth: 8, + itemHeight: 8, + right: 10, + top: 15, textStyle: { color: '#01DFF4' }, @@ -516,7 +673,7 @@ $(function () { xAxisIndex: 0,   //显示x轴滑块 height: "15px", end: 80, - top: "83%" + top: "90%" } ], series: [ @@ -546,7 +703,7 @@ $(function () { } - function l1() { + function r2() { axios({ @@ -554,116 +711,121 @@ $(function () { data: { "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", "query": { - "query_id": "stage_login_num_all", + "query_id": "stage_liveness_month", "query_param": [ - "1" + "1", + "2021", + "1", + "2021" ] }, "query_cache": 0, "query_count": [ + "sub_total", "total" ], "query_format": "echarts", "query_group": [ "org_name", - "social_name" + "social_typename" ] } - }) - .then((response) => { - const resData = JSON.parse(response.data.result) - - const xAxisName = resData.groups[0] - const legendData = resData.groups[1] - - let series = [] - resData.groups[1].map((e, i) => { - series.push({ - name: e, - type: 'bar', - data: resData.datas[i], - barMaxWidth: 20, - }) + }).then((response) => { + const resData = JSON.parse(response.data.result) + console.log("resData112", resData); + 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', + data: resData.datas[i], + barMaxWidth: 20, }) - // =========================================== + }) + // console.log("xAxisName", xAxisName); + // console.log("legendData", legendData); + // console.log("series", series); - var myChart = echarts.init(document.getElementById('l1')); // 各阶段学校数量 - option = { - // height: "100px", - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - crossStyle: { - color: '#999' - } + 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: 20, + data: legendData, + itemWidth: 8, + itemHeight: 8, + right: 20, textStyle: { color: '#01DFF4' }, - grid: { - top: 30, - bottom: 95, - }, - color: ["#0BCAEA", "#FE8E3A", "#3FDB94"], - legend: { - data: legendData, - textStyle: { - color: '#01DFF4' - }, - }, - xAxis: [ - { - type: 'category', - data: xAxisName, - axisLine: { - lineStyle: { - color: '#01DFF4' //更改坐标轴颜色 - } - }, - axisLabel: { - rotate: 30, - fontSize: 10 + }, + yAxis: [ + { + type: 'category', + data: xAxisName, + axisLine: { + lineStyle: { + color: '#01DFF4' //更改坐标轴颜色 } - }, + axisLabel: { + fontSize: 10 + } - ], - yAxis: [ + }, - { - type: 'value', - axisLine: { - lineStyle: { - color: '#01DFF4' //更改坐标轴颜色 - } + ], + xAxis: [ + + { + type: 'value', + axisLine: { + lineStyle: { + color: '#01DFF4' //更改坐标轴颜色 } + }, + axisLabel: { + fontSize: 14 } - ], - dataZoom: [ - { - type: "slider",   //slider:滑块  inside:内置，依靠鼠标滚轮或者双击缩放 - xAxisIndex: 0,   //显示x轴滑块 - height: "15px", - end: 80, - top: "90%" - } - ], - series: series - }; + } + ], + series: series + }; - // 使用刚指定的配置项和数据显示图表。 - myChart.setOption(option); - window.addEventListener("resize", function () { - myChart.resize(); - }); + // 使用刚指定的配置项和数据显示图表。 + myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); - }) + + }) } }) diff --git a/html/js/nav.js b/html/js/nav.js index 6d4fede..b71cac5 100644 --- a/html/js/nav.js +++ b/html/js/nav.js @@ -8,7 +8,15 @@ if (!localStorage.getItem("islogin")) { console.log(localStorage.getItem("islogin"), "islogin"); window.location.href = '/login.html'; }; +let date = new Date(); //当前日期 +var nowYear = date.getFullYear(); +// var nowMonth = date.getMonth() + 1 + ""; +var nowMonth = "12"; + +var nowWeekday = date.getDate(); + +console.log("nowTime", nowYear, nowMonth, nowWeekday); // 获取当前年份 var year_list = "" @@ -23,8 +31,6 @@ if (!GetQueryString("year")) { config_now_year = GetQueryString("year") } - - // 生成年份列表 var select_year = '' select_year += '' + config_now_year + '' diff --git a/html/js/kaipingziyuan.js b/html/js/resource.js similarity index 99% rename from html/js/kaipingziyuan.js rename to html/js/resource.js index 25411bd..27845d0 100644 --- a/html/js/kaipingziyuan.js +++ b/html/js/resource.js @@ -120,7 +120,7 @@ $(function () { } else if (time == "month") { query_id = "resource_up_share_day" - query_param = ["2021", "10"] + query_param = ["2021", nowMonth] query_group = ["day_name", "type_name"] xAxisformatter = '{value} 日' } @@ -281,7 +281,7 @@ $(function () { query_param = ["2021", edu, "2021", edu] } else if (time == "month") { query_id = "subject_top_day" - query_param = ["2021", "10", edu, "2021", "10", edu] + query_param = ["2021", nowMonth, edu, "2021", nowMonth, edu] } $.post(config_serverIp + "/dataex/report/QuerySimpleGP", JSON.stringify( @@ -610,7 +610,7 @@ $(function () { query_param = ["2021"] } else if (time == "month") { query_id = "org_res_type_day" - query_param = ["2021", "10"] + query_param = ["2021", nowMonth] } @@ -798,7 +798,7 @@ $(function () { query_param = ["2021"] } else if (time == "month") { query_id = "stage_rate_day" - query_param = ["2021", "10"] + query_param = ["2021", nowMonth] } @@ -927,7 +927,7 @@ $(function () { } else if (time == "month") { query_id = "resource_down_rec_day" - query_param = ["2021", "10"] + query_param = ["2021", nowMonth] query_group = ["day_name", "type_name"] xAxisformatter = '{value} 日' } @@ -1110,7 +1110,7 @@ $(function () { query_param = ["2021"] } else if (time == "month") { query_id = query_id + "day" - query_param = ["2021", "10"] + query_param = ["2021", nowMonth] } @@ -1189,7 +1189,7 @@ $(function () { query_param = ["2021"] } else if (time == "month") { query_id = query_id + "day" - query_param = ["2021", "10"] + query_param = ["2021", nowMonth] } diff --git a/html/js/script.js b/html/js/script.js index d687b3a..c924911 100644 --- a/html/js/script.js +++ b/html/js/script.js @@ -8,4 +8,29 @@ $(document).ready(function () { var whei = $(window).width() $("html").css({ fontSize: whei / 20 }) }); -}); \ No newline at end of file +}); + +//时间显示 +var newDate = ''; +function dateFilter(date) { //值小于10时，在前面补0 + if (date < 10) { + return "0" + date; + } + return date; +} +function getLangDate() { + var dateObj = new Date(); //表示当前系统时间的Date对象 + var year = dateObj.getFullYear(); //当前系统时间的完整年份值 + var month = dateObj.getMonth() + 1; //当前系统时间的月份值 + var date = dateObj.getDate(); //当前系统时间的月份中的日 + var day = dateObj.getDay(); //当前系统时间中的星期值 + var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; + var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串 + var hour = dateObj.getHours(); //当前系统时间的小时值 + var minute = dateObj.getMinutes(); //当前系统时间的分钟值 + var second = dateObj.getSeconds(); //当前系统时间的秒钟值 + var timeValue = "" + ((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午"); //当前时间属于上午、晚上还是下午 + newDate = dateFilter(year) + "-" + dateFilter(month) + "-" + dateFilter(date) + " " + dateFilter(hour) + ":" + dateFilter(minute) + ":" + dateFilter(second); + $("#clock").text(newDate); + setTimeout(getLangDate, 1000); +} \ No newline at end of file diff --git a/html/js/space.js b/html/js/space.js new file mode 100644 index 0000000..2635e33 --- /dev/null +++ b/html/js/space.js @@ -0,0 +1,982 @@ + +$(function () { + + const axiosConf = { url: config_serverIp + "/dataex/report/QuerySimpleGP", method: 'post' }; + + + + + // 标题增加年份 + l1(1); + l2(); + c1(); + c2(); + c3(); + r1(); + r2(); + c3table() + + $("#kjFangwenSelect").select(function () { + console.log(111); + }) + $("input").select(function () { + $("input").after("文本已选中!"); + }); + + + $('#djfwqkxz').on('change', function (e) { + console.log($(this).val()); + l1($(this).val()) + }) + + + function l1(xuezhi, time) { + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "stage_login_num_all", + "query_param": [ + xuezhi + "" + ] + }, + "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 = resData.groups[1] + + 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(); + }); + + }) + + } + function l2(time) { + + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "post_total_all", + "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) + // console.log(resData, 'resData'); + // 获取学科 + 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) => { + + // console.log(e, 'e'); + 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 + // console.log(num, 'num', "#" + "num" + Number(index) + 1); + // $("#" + "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 }); + } + + }) + + + }) + + } + + + function c1() { + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "stage_org_social_all", + "query_param": [ + "1" + ] + }, + "query_cache": 0, + "query_count": [ + "total" + ], + "query_format": "echarts", + "query_group": [ + "org_name", + "topic_name" + ] + } + }) + .then((response) => { + const resData = JSON.parse(response.data.result) + console.log(resData) + 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(); + }); + }) + + + + } + function c2() { + + axios.all([ + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "login_num_all", + "query_param": [] + }, + "query_cache": 0, + "query_count": [ + "total" + ], + "query_format": "echarts", + "query_group": [ + "year_name" + ] + } + }), + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "login_times_all", + "query_param": [ + ] + }, + "query_cache": 0, + "query_count": [ + "total" + ], + "query_format": "echarts", + "query_group": [ + "year_name", + "social_name" + ] + } + + }) + ]).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 = ['登录人数', ...loginNumBar.groups[1]] + // 循环显示柱形图。 + 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(); + }); + + + })); + + } + + function c3() { + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "social_topic_chart_all", + "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(); + }); + + }) + + } + + function c3table() { + + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "social_played_top5_all", + "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) + console.log(resData, 'resData'); + let phHtml = "" + resData.map((e, i) => { + phHtml += ` + + ${e.topic_name} + ${e.social_name} + ${e.total} + ` + }) + $("#huodongtable").html(phHtml) + }) + + } + + + + + function r1() { + + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "login_support_total_all", + "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(); + }); + }) + + + + + } + function r2() { + + + axios({ + ...axiosConf, + data: { + "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab", + "query": { + "query_id": "stage_liveness_all", + "query_param": [ + "1", + "1" + ] + }, + "query_cache": 0, + "query_count": [ + "sub_total", + "total" + ], + "query_format": "echarts", + "query_group": [ + "org_name", + "social_typename" + ] + } + }).then((response) => { + const resData = JSON.parse(response.data.result) + console.log("resData112", resData); + 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', + data: resData.datas[i], + barMaxWidth: 20, + }) + }) + console.log(xAxisName, "xAxisName"); + resData.datas2[0].map((e, i) => { + console.log(e, i); + $("#" + "huodongnum" + Number(i + 1)).html(e) + + }) + + + + // console.log("xAxisName", xAxisName); + // console.log("legendData", legendData); + // console.log("series", series); + + 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(); + }); + + + }) + + } +}) + + + + + + + + + + + + + + + + + + diff --git a/html/kaipingkongjian.html b/html/kaipingkongjian.html index 8df2b88..082194d 100644 --- a/html/kaipingkongjian.html +++ b/html/kaipingkongjian.html @@ -13,7 +13,7 @@ 大数据汇聚与管理系统 - + @@ -49,378 +49,30 @@ - +
页面加载中...
-

唐山开平教育大数据中心

- 互动课堂教育运行监测 - 网络学习空间运行监测 - 资源共建共享运行监测 - - + 互动课堂教育运行监测 + 网络学习空间运行监测 + 资源共建共享运行监测 +
+ + +
-
- 本月 - 本年 - 全部 +
+ 本月 + 本年 + 全部
-
- - -
-
-
diff --git a/html/kaipingziyuan.html b/html/kaipingziyuan1.html similarity index 100% rename from html/kaipingziyuan.html rename to html/kaipingziyuan1.html diff --git a/html/resource.html b/html/resource.html index 0e5551c..283898b 100644 --- a/html/resource.html +++ b/html/resource.html @@ -16,8 +16,8 @@

唐山开平教育大数据中心

- 互动课堂教育运行监测 - 网络学习空间运行监测 + 互动课堂教育运行监测 + 网络学习空间运行监测 资源共建共享运行监测
@@ -122,7 +122,7 @@
-
+
资源上传 资源下载 @@ -231,6 +231,6 @@ - + \ No newline at end of file diff --git a/html/space.html b/html/space.html index f6b0e48..1eb88dd 100644 --- a/html/space.html +++ b/html/space.html @@ -1,5 +1,6 @@ + 大数据汇聚与管理系统 @@ -8,17 +9,20 @@ + -
-
页面加载中...
-
+

唐山开平教育大数据中心

- 互动课堂教育运行监测 - 网络学习空间运行监测 - 资源共建共享运行监测 + 互动课堂教育运行监测 + 网络学习空间运行监测 + 资源共建共享运行监测 +
+ + +
本月 @@ -29,6 +33,7 @@
  • +
    @@ -36,13 +41,29 @@
    +
    学校空间访问情况监测
    -
    -
    总访问量：
    -
    总关注量：
    + + +
    + + + 登录人数 + 登录次数 +
    -
    + + + + + +
    @@ -55,107 +76,133 @@
    空间资源建设情况统计
    + + +
    +
    文章发布
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + 累计统计： 教师发布条 占比
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + + 累计统计： 学生发布条 占比
    +
    - 空间累计
    534 +
    空间累计
    +
    534
    +
    +
    相册上传
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + 累计统计： 教师发布条 占比
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + + 累计统计： 学生发布条 占比 +
    +
    - 空间累计 +
    空间累计
    +
    534
    +
    +
    +
    访客留言
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + 累计统计： 教师发布条 占比
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + + 累计统计： 学生发布条 占比
    +
    -
    - 空间累计
    534 -
    +
    空间累计
    +
    534
    +
    +
    主题活动
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + 累计统计： 教师发布条 占比
    -
    -
    +
    +
    - 累计统计： 教师发布213条 占比 56% + + 累计统计： 学生发布条 占比
    +
    - 空间累计
    534 +
    空间累计
    +
    534
    +
    + +
    -
    +
  • -
    +
    +
    @@ -163,39 +210,51 @@
    -
    学校空间访问情况监测
    -
    -
    - - 登录人数 - 登录次数 + +
    学校主题活动开展情况监测
    -
    + + + + + + + +
    +
    -
    +
    +
    +
    +
    空间登录访问监测
    + + +
    +
    +
    @@ -203,14 +262,19 @@
    +
    主题活动汇总监测
    +
    + +
    主题活动冠军排行榜
    + @@ -218,6 +282,8 @@ + + @@ -243,15 +309,19 @@ - - + + +
    活动名称 参与人数
    德育 溯古风诗韵养灵性诗情溯古风诗韵养灵性诗情 2323
    +
    +
  • -
    +
    +
    @@ -259,30 +329,23 @@
    -
    空间建设活跃度排行榜
    -
    -
    - - 小学 + +
    学校空间访客情况监测
    -
    -
    -
    -
    604
    活跃度
    -
    604
    活跃度
    -
    604
    活跃度
    -
    604
    活跃度
    -
    604
    活跃度
    -
    + +
    +
    总访问量：
    +
    总关注量：
    + +
    +
    -
    +
    +
    @@ -290,24 +353,40 @@
    -
    学校主题活动开展情况监测
    + +
    空间建设活跃度排行榜
    -
    - + + + + + + 小学 +
    -
    +
    +
    +
    +

    活跃度
    +

    活跃度
    +

    活跃度
    +

    活跃度
    +

    活跃度
    +
    +
    +
+
-
-
@@ -315,4 +394,5 @@ + \ No newline at end of file