20211217

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%;

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%;

html/images/95521bb744463633c858cc50abb44e7d.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639559354596" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2123" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M875.008 295.424a34.133333 34.133333 0 1 0-58.197333 35.669333c35.328 57.514667 53.930667 123.562667 53.930666 191.488 0 201.898667-164.352 366.250667-366.250666 366.250667S138.24 724.48 138.24 522.581333 302.592 156.330667 504.490667 156.330667c18.773333 0 34.133333-15.36 34.133333-34.133334s-15.36-34.133333-34.133333-34.133333C264.874667 88.064 69.973333 282.965333 69.973333 522.581333s194.901333 434.517333 434.517334 434.517334 434.517333-194.901333 434.517333-434.517334c0.170667-80.384-22.016-159.061333-64-227.157333z" fill="#01DFF4" p-id="2124"></path><path d="M501.248 389.973333c-77.653333 0-140.8 63.146667-140.8 140.8s63.146667 140.8 140.8 140.8 140.8-63.146667 140.8-140.8V224.256c0-19.456 15.872-35.328 35.328-35.328 19.456 0 35.328 15.872 35.328 35.328 0 18.773333 15.36 34.133333 34.133333 34.133333s34.133333-15.36 34.133334-34.133333c0-57.173333-46.421333-103.594667-103.594667-103.594667s-103.594667 46.421333-103.594667 103.594667v186.026667a140.526933 140.526933 0 0 0-72.533333-20.309334z m0 213.333334a72.704 72.704 0 0 1-72.533333-72.533334 72.704 72.704 0 0 1 72.533333-72.533333 72.704 72.704 0 0 1 72.533333 72.533333 72.704 72.704 0 0 1-72.533333 72.533334z" fill="#01DFF4" p-id="2125"></path></svg>

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();
+            });
 
-            })
+
+        })
 
     }
 })

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 += '<span class="placeholder">' + config_now_year + '</span>'

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]
 
         }
 

html/js/script.js

@@ -8,4 +8,29 @@ $(document).ready(function () {
         var whei = $(window).width()
         $("html").css({ fontSize: whei / 20 })
     });
-});
+});
+
+//时间显示
+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);
+}

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 += `
+                    <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() {
+
+
+        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();
+            });
+
+
+        })
+
+    }
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

html/kaipingkongjian.html

@@ -13,7 +13,7 @@
     <title>大数据汇聚与管理系统</title>
     <script type="text/javascript" src="js/jquery.js"></script>
     <link rel="stylesheet" href="css/comon0.css">
-    <link rel="stylesheet" href="css/kaiping.css">
+    <link rel="stylesheet" href="css/style.css">
 
 
     <link rel="stylesheet" href="./css/bootstrap.min.css">
@@ -49,378 +49,30 @@
 <script type="text/javascript" src="js/echarts.min.js"></script>
 <script language="JavaScript" src="js/kaipingkongjian.js"></script>
 
-<body>
+<body class="sub-page">
 
     <div class="loading">
         <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
     </div>
     <div class="head">
-
         <h1 id="title_text" class="h1">
             唐山开平教育大数据中心
         </h1>
-        <a href="#" class="nav" style="color:#00F7FA">互动课堂教育运行监测</a>
-        <a href="#" class="nav sub">网络学习空间运行监测</a>
-        <a href="./kaipingziyuan.html" class="nav sub">资源共建共享运行监测</a>
-
-
+        <a href="./kaipingkongjian.html" class="nav">互动课堂教育运行监测</a>
+        <a href="javascript:void(0)" class="nav sub">网络学习空间运行监测</a>
+        <a href="javascript:void(0)" class="nav sub" style="color:#00F7FA">资源共建共享运行监测</a>
+        <div class="header-right">
+            <span id="clock"></span>
+            <a href="" class="exit"><img src="./images/exit.svg"></a>
+        </div>
     </div>
-    <div class="switch-time">
-        <a href="#">本月</a>
-        <a href="#">本年</a>
-        <a href="#" class="act">全部</a>
+    <div class="switch-time" id="switch-time">
+        <a href="javascript:void(0)" id="switch_month">本月</a>
+        <a href="javascript:void(0)" id="switch_year">本年</a>
+        <a href="javascript:void(0)" class="act" id="switch_all">全部</a>
     </div>
-    <div class="mainbox">
-        <ul class="clearfix">
-            <li>
-                <div class="boxall" style="height: 4rem">
-
-                    <div class="alltitle">
-                        <div class="line-l"></div>
-                        <div class="line-r"></div>
-                        <div class="border-lt"></div>
-                        <div class="border-lb"></div>
-                        <div class="border-tr"></div>
-                        <div class="border-br"></div>
-
-                        <div class="title">学校空间访问情况监测</div>
-                    </div>
-                    <div style="overflow: hidden;float: left; color: aqua;width: 100%;">
-
-                        <div style="overflow: hidden;float: left;padding:0 10px">总访问量：<span id="fwSum"></span></div>
-                        <div style="overflow: hidden;float: left;padding:0 10px">总关注量：<span id="gzSum"></span></div>
-                    </div>
-
-
-
-
-
-
-
-
-                    <div style="height: 100%;" id="l1"></div>
-                    <div class="boxfoot"></div>
-                </div>
-                <div class="boxall" style="height: 4.5rem">
-                    <div class="alltitle">
-                        <div class="line-l"></div>
-                        <div class="line-r"></div>
-                        <div class="border-lt"></div>
-                        <div class="border-lb"></div>
-                        <div class="border-tr"></div>
-                        <div class="border-br"></div>
-
-                        <div class="title">空间资源建设情况统计</div>
-                    </div>
-
-
-
-                    <div class="kjzyjs">
-                        <div class="kjzyjs-left">
-
-                            <img src="./images/wzfb.svg" width="30" alt="">
-                            <br>文章发布
-                        </div>
-                        <div class="kjzyjs-center">
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #0590A1;"></div>
-                                <div class="progress" style="background-color: #00ffff;width: 50%;"></div>
-                                <div id="progressbar"></div>
-                            </div>
-                            <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
-                            </div>
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #24796B;"></div>
-                                <div class="progress" style="background-color: #43DF8F;width: 50%;"></div>
-                            </div>
-
-                            累计统计：    教师发布213条      占比 56%
-                        </div>
-
-                        <div class="kjzyjs-right">
-                            空间累计<br>534
-                        </div>
-                    </div>
-
-                    <div class="kjzyjs">
-                        <div class="kjzyjs-left">
-
-                            <img src="./images/xcsc.svg" width="30" alt="">
-                            <br>相册上传
-                        </div>
-                        <div class="kjzyjs-center">
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #978E59;"></div>
-                                <div class="progress" style="background-color: #FAD361;width: 50%;"></div>
-                            </div>
-                            <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
-                            </div>
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #256AA0;"></div>
-                                <div class="progress" style="background-color: #3FB0F7;width: 50%;"></div>
-                            </div>
-
-                            累计统计：    教师发布213条      占比 56%
-                        </div>
-
-                        <div class="kjzyjs-right">
-                            空间累计
-                        </div>
-                    </div>
-
-                    <div class="kjzyjs">
-                        <div class="kjzyjs-left">
-
-                            <img src="./images/fkly.svg" width="30" alt="">
-                            <br>访客留言
-                        </div>
-                        <div class="kjzyjs-center">
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
-                            </div>
-                            <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
-                            </div>
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
-                            </div>
-
-                            累计统计：    教师发布213条      占比 56%
-                        </div>
-
-                        <div class="kjzyjs-right">
-                            <div style="line-height: 20px;padding-top: 10px;">
-                                空间累计<br>534
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="kjzyjs">
-                        <div class="kjzyjs-left">
-
-                            <img src="./images/zthd.svg" width="30" alt="">
-                            <br>主题活动
-                        </div>
-                        <div class="kjzyjs-center">
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
-                            </div>
-                            <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
-                            </div>
-                            <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
-                            </div>
-
-                            累计统计：    教师发布213条      占比 56%
-                        </div>
-
-                        <div class="kjzyjs-right">
-                            空间累计<br>534
-                        </div>
-                    </div>
-
-
-                    <div class="boxfoot"></div>
-                </div>
-            </li>
 
-            <li>
-                <div class="boxall" style="height: 3.3rem">
-
-                    <div class="alltitle">
-                        <div class="line-l"></div>
-                        <div class="line-r"></div>
-                        <div class="border-lt"></div>
-                        <div class="border-lb"></div>
-                        <div class="border-tr"></div>
-                        <div class="border-br"></div>
-
-                        <div class="title">学校空间访问情况监测</div>
-                    </div>
-
-                    <div class="tabslect" style="position: relative; " id="xuezhi">
-                        <select id="mySelect" class="select">
-                            <option>全部</option>
-                            <option>小学</option>
-                            <option>初中</option>
-                            <option>高中</option>
-                        </select>
-
-                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">登录人数</a>
-                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">登录次数</a>
-
-                    </div>
-
-
-
-                    <div style="height: 88%;" id="c1"></div>
-
-                    <!-- <div style="height: 49%;" id="echart2"></div> -->
-                    <!-- <div style="height: 49%;" id="echart22"></div> -->
-                    <div class="boxfoot"></div>
-                </div>
-                <div class="boxall" style="height: 2.5rem">
- 
-                    <div class="alltitle">
-                        <div class="line-l"></div>
-                        <div class="line-r"></div>
-
-                        <div class="border-lt"></div>
-                        <div class="border-lb"></div>
-                        <div class="border-tr"></div>
-                        <div class="border-br"></div>
-
-                        <div class="title">空间登录访问监测</div>
-                    </div>
-
-
-
-                    <div style="height: 95%;" id="c2"></div>
-
-                    <!-- <div style="height: 49%;" id="echart2"></div> -->
-                    <!-- <div style="height: 49%;" id="echart22"></div> -->
-                    <div class="boxfoot"></div>
-                </div>
-                <div class="boxall" style="height: 2.4rem">
-
-                    <div class="alltitle">
-                        <div class="line-l"></div>
-                        <div class="line-r"></div>
-                        <div class="border-lt"></div>
-                        <div class="border-lb"></div>
-                        <div class="border-tr"></div>
-                        <div class="border-br"></div>
-
-                        <div class="title">主题活动汇总监测</div>
-                    </div>
-                    <div style="height: 90%; width: 40%;float: left;" id="c3"></div>
-                    <!-- <div class="zhutipaihang-title">主题活动冠军排行榜</div> -->
-                    <!-- <div style="height: 49%;" id="echart2"></div> -->
-                    <!-- <div style="height: 49%;" id="echart22"></div> -->
-
-                    <div class="r2paihang">
-
-
-                        <div class="title" rowspan="6">主题活动冠军排行榜</div>
-
-                        <table class="tg">
-                            <thead>
-                                <tr>
-                                    <td class="tg-0pky">活动类型</td>
-                                    <td class="tg-0pky">活动名称</td>
-                                    <td class="tg-0pky">参与人数</td>
-                                </tr>
-                                <tr>
-                                    <td class="tg-0pky">德育</td>
-                                    <td class="tg-0pky">溯古风诗韵养灵性诗情</td>
-                                    <td class="tg-0pky">2323</td>
-                                </tr>
-                                <tr>
-                                    <td class="tg-0pky">德育</td>
-                                    <td class="tg-0pky">溯古风诗韵养灵性诗情</td>
-                                    <td class="tg-0pky">2323</td>
-                                </tr>
-                                <tr>
-                                    <td class="tg-0pky">德育</td>
-                                    <td class="tg-0pky">溯古风诗韵养灵性诗情</td>
-                                    <td class="tg-0pky">2323</td>
-                                </tr>
-                                <tr>
-                                    <td class="tg-0pky">德育</td>
-                                    <td class="tg-0pky">溯古风诗韵养灵性诗情</td>
-                                    <td class="tg-0pky">2323</td>
-                                </tr>
-                                <tr>
-                                    <td class="tg-0pky">德育</td>
-                                    <td class="tg-0pky">溯古风诗韵养灵性诗情</td>
-                                    <td class="tg-0pky">2323</td>
-                                </tr>
-
-
-                                </tr>
-                            </thead>
-                        </table>
-
-                    </div>
-
-                    <div class="boxfoot"></div>
-                </div>
-            </li>
-            <li>
-                <div class="boxall" style="height:6rem">
-                    <div class="alltitle">
-                        <div class="line-l"></div>
-                        <div class="line-r"></div>
-                        <div class="border-lt"></div>
-                        <div class="border-lb"></div>
-                        <div class="border-tr"></div>
-                        <div class="border-br"></div>
-
-                        <div class="title">空间建设活跃度排行榜</div>
-                    </div>
-
-                    <div class="tabslect" style="position: relative; " id="xuezhi">
-                        <select id="mySelect" class="select">
-                            <option>小学</option>
-                            <option>初中</option>
-                        </select>
-
-
-                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">小学</a>
-
-                    </div>
-                    <div style="height: 100%;" class="kongjian-r1-class">
-                        <div style="clear: both;float: left;width: 80%;height: 90%;float: left;" id="r1"></div>
-                        <div style="float: left;" class="zongshu">
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                        </div>
-                    </div>
-                    <!-- <div style="height: 49%;" id="echart4"></div> -->
-                    <!-- <div style="height: 49%;" id="echart44"></div> -->
-                    <div class="boxfoot"></div>
-                </div>
-                <div class="boxall" style="height:2.4rem">
-                    <div class="alltitle">
-                        <div class="line-l"></div>
-                        <div class="line-r"></div>
-                        <div class="border-lt"></div>
-                        <div class="border-lb"></div>
-                        <div class="border-tr"></div>
-                        <div class="border-br"></div>
-
-                        <div class="title">学校主题活动开展情况监测</div>
-                    </div>
-                    <div style="overflow: hidden;float: left; color: aqua;width: 100%;">
-                        <select id="mySelect" class="select">
-                            <option>小学</option>
-                            <option>初中</option>
-                        </select>
-
-                    </div>
-                    <div style="height: 90%;clear: both;" id="r2"></div>
-
-                    <!-- <div style="height: 49%;" id="echart4"></div> -->
-                    <!-- <div style="height: 49%;" id="echart44"></div> -->
-                    <div class="boxfoot"></div>
-                </div>
-            </li>
-        </ul>
-
-    </div>
-    <div class="back"></div>
 
-    <div class="bgDiv"></div>
 
 
 </body>

html/resource.html

@@ -16,8 +16,8 @@
         <h1 id="title_text" class="h1">
             唐山开平教育大数据中心
         </h1>
-        <a href="./kaipingkongjian.html" class="nav">互动课堂教育运行监测</a>
-        <a href="javascript:void(0)" class="nav sub">网络学习空间运行监测</a>
+        <a href="javascript:void(0)" class="nav">互动课堂教育运行监测</a>
+        <a href="./space.html" class="nav sub">网络学习空间运行监测</a>
         <a href="javascript:void(0)" class="nav sub" style="color:#00F7FA">资源共建共享运行监测</a>
         <div class="header-right">
             <span id="clock"></span>
@@ -122,7 +122,7 @@
                     </div>
                     <div style="overflow: hidden;float: left; color: aqua;width: 100%;">
 
-                        <div class="tabslect " id="qyzyhzjjc">
+                        <div class="tabslect " id="qyzyhzjjc" style="width: 75%;">
 
                             <a class="tabslect-item act" id="qyzyhzjjc_zysc" href="javascript:void(0)">资源上传</a>
                             <a class="tabslect-item" id="qyzyhzjjc_zyxz" href="javascript:void(0)">资源下载</a>
@@ -231,6 +231,6 @@
     <script src="js/md5.min.js"></script>
     <script src="js/echarts.min.js"></script>
     <script src="js/script.js"></script>
-    <script src="js/kaipingziyuan.js"></script>
+    <script src="js/resource.js"></script>
 </body>
 </html>

html/space.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html>
+
 <head>
     <meta charset="utf-8">
     <title>大数据汇聚与管理系统</title>
@@ -8,17 +9,20 @@
     <link rel="stylesheet" href="css/comon0.css">
     <link rel="stylesheet" href="css/style.css">
 </head>
+
 <body class="sub-page">
-    <div class="loading">
-        <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
-    </div>
+
     <div class="head">
         <h1 id="title_text" class="h1">
             唐山开平教育大数据中心
         </h1>
-        <a href="#" class="nav" style="color:#00F7FA">互动课堂教育运行监测</a>
-        <a href="#" class="nav sub">网络学习空间运行监测</a>
-        <a href="./kaipingziyuan.html" class="nav sub">资源共建共享运行监测</a>
+        <a href="#" class="nav">互动课堂教育运行监测</a>
+        <a href="#" class="nav sub" style="color:#00F7FA">网络学习空间运行监测</a>
+        <a href="./resource.html" class="nav sub">资源共建共享运行监测</a>
+        <div class="header-right">
+            <span id="clock"></span>
+            <a href="" class="exit"><img src="./images/exit.svg"></a>
+        </div>
     </div>
     <div class="switch-time">
         <a href="#">本月</a>
@@ -29,6 +33,7 @@
         <ul class="clearfix">
             <li>
                 <div class="boxall" style="height: 4rem">
+
                     <div class="alltitle">
                         <div class="line-l"></div>
                         <div class="line-r"></div>
@@ -36,13 +41,29 @@
                         <div class="border-lb"></div>
                         <div class="border-tr"></div>
                         <div class="border-br"></div>
+
                         <div class="title">学校空间访问情况监测</div>
                     </div>
-                    <div style="overflow: hidden;float: left; color: aqua;width: 100%;">
-                        <div style="overflow: hidden;float: left;padding:0 10px">总访问量：<span id="fwSum"></span></div>
-                        <div style="overflow: hidden;float: left;padding:0 10px">总关注量：<span id="gzSum"></span></div>
+                    <!-- <div style="overflow: hidden;float: left; color: aqua;width: 100%;"> -->
+
+                    <div class="tabslect" id="xuezhi">
+                        <select id="djfwqkxz" class="select">
+                            <option value="">全部</option>
+                            <option value="1">小学</option>
+                            <option value="2">初中</option>
+                            <option value="3">高中</option>
+                        </select>
+
+                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">登录人数</a>
+                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">登录次数</a>
+
                     </div>
-                    <div style="height: 100%;" id="l1"></div>
+
+
+
+
+
+                    <div style="height: 95%;" id="l1"></div>
                     <div class="boxfoot"></div>
                 </div>
                 <div class="boxall" style="height: 4.5rem">
@@ -55,107 +76,133 @@
                         <div class="border-br"></div>
                         <div class="title">空间资源建设情况统计</div>
                     </div>
+
+
+
                     <div class="kjzyjs">
                         <div class="kjzyjs-left">
+
                             <img src="./images/wzfb.svg" width="30" alt="">
                             <br>文章发布
                         </div>
                         <div class="kjzyjs-center">
                             <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #0590A1;"></div>
-                                <div class="progress" style="background-color: #00ffff;width: 50%;"></div>
+                                <div class="progress" style="background-color: #00ffff50;"></div>
+                                <div class="progress" style="background-color: #00ffff;width: 0;" id="wenzhangTloading"></div>
                                 <div id="progressbar"></div>
                             </div>
                             <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
+                                累计统计： 教师发布<span id="wenzhangTNum"></span>条 占比 <span id="wenzhangTAcc"></span>
                             </div>
                             <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #24796B;"></div>
-                                <div class="progress" style="background-color: #43DF8F;width: 50%;"></div>
+                                <div class="progress" style="background-color: #43df8f50;"></div>
+                                <div class="progress" style="background-color: #43df8f;width: 0;" id="wenzhangSloading"></div>
                             </div>
-                            累计统计：    教师发布213条      占比 56%
+
+                            累计统计： 学生发布<span id="wenzhangSNum"></span>条 占比 <span id="wenzhangSAcc"></span>
                         </div>
+
                         <div class="kjzyjs-right">
-                            空间累计<br>534
+                            <div>空间累计</div>
+                            <div id="num1">534</div>
                         </div>
                     </div>
+
                     <div class="kjzyjs">
                         <div class="kjzyjs-left">
+
                             <img src="./images/xcsc.svg" width="30" alt="">
                             <br>相册上传
                         </div>
                         <div class="kjzyjs-center">
                             <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #978E59;"></div>
-                                <div class="progress" style="background-color: #FAD361;width: 50%;"></div>
+                                <div class="progress" style="background-color: #d5b75f50;"></div>
+                                <div class="progress" style="background-color: #d5b75f;width: 0;" id="xiangceTloading"></div>
                             </div>
                             <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
+                                累计统计： 教师发布<span id="xiangceTNum"></span>条 占比 <span id="xiangceTAcc"></span>
                             </div>
                             <div style="width: 90%; position: relative;">
-                                <div class="progress" style="background-color: #256AA0;"></div>
-                                <div class="progress" style="background-color: #3FB0F7;width: 50%;"></div>
+                                <div class="progress" style="background-color: #d57b5f50;"></div>
+                                <div class="progress" style="background-color: #d57b5f;width: 0;" id="xiangceSloading"></div>
                             </div>
-                            累计统计：    教师发布213条      占比 56%
+
+                            累计统计： 学生发布<span id="xiangceSNum"></span>条 占比 <span id="xiangceSAcc"></span>
+
                         </div>
+
                         <div class="kjzyjs-right">
-                            空间累计
+                            <div>空间累计</div>
+                            <div id="num2">534</div>
+
                         </div>
                     </div>
+
                     <div class="kjzyjs">
                         <div class="kjzyjs-left">
+
                             <img src="./images/fkly.svg" width="30" alt="">
                             <br>访客留言
                         </div>
                         <div class="kjzyjs-center">
                             <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
+                                <div class="progress" style="background-color: #be5a6650;"></div>
+                                <div class="progress" style="background-color: #be5a66;width: 0;" id="liuyanTloading"></div>
                             </div>
                             <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
+                                累计统计： 教师发布<span id="liuyanTNum"></span>条 占比 <span id="liuyanTAcc"></span>
                             </div>
                             <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
+                                <div class="progress" style="background-color: #d174a650;"></div>
+                                <div class="progress" style="background-color: #d174a6;width: 0;" id="liuyanSloading"></div>
                             </div>
-                            累计统计：    教师发布213条      占比 56%
+
+                            累计统计： 学生发布<span id="liuyanSNum"></span>条 占比 <span id="liuyanSAcc"></span>
                         </div>
+
                         <div class="kjzyjs-right">
-                            <div style="line-height: 20px;padding-top: 10px;">
-                                空间累计<br>534
-                            </div>
+                            <div>空间累计</div>
+                            <div id="num3">534</div>
                         </div>
                     </div>
+
                     <div class="kjzyjs">
                         <div class="kjzyjs-left">
+
                             <img src="./images/zthd.svg" width="30" alt="">
                             <br>主题活动
                         </div>
                         <div class="kjzyjs-center">
                             <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
+                                <div class="progress" style="background-color: #8e72e750;"></div>
+                                <div class="progress" style="background-color: #8e72e7;width: 0;" id="huodongTloading"></div>
                             </div>
                             <div style="width: 100%;">
-                                累计统计：    教师发布213条      占比 56%
+                                累计统计： 教师发布<span id="huodongTNum"></span>条 占比 <span id="huodongTAcc"></span>
                             </div>
                             <div style="width: 90%; position: relative;">
-                                <div class="progress"></div>
-                                <div class="progress"></div>
+                                <div class="progress" style="background-color: #509cf150;"></div>
+                                <div class="progress" style="background-color: #509cf1;width: 0;" id="huodongSloading"></div>
                             </div>
-                            累计统计：    教师发布213条      占比 56%
+
+                            累计统计： 学生发布<span id="huodongSNum"></span>条 占比 <span id="huodongSAcc"></span>
                         </div>
+
                         <div class="kjzyjs-right">
-                            空间累计<br>534
+                            <div>空间累计</div>
+                            <div id="num4">534</div>
+
                         </div>
                     </div>
+
+
                     <div class="boxfoot"></div>
-                </div>
+
             </li>
 
             <li>
-                <div class="boxall" style="height: 3.3rem">
+                <div class="boxall" style="height: 4rem">
+
                     <div class="alltitle">
                         <div class="line-l"></div>
                         <div class="line-r"></div>
@@ -163,39 +210,51 @@
                         <div class="border-lb"></div>
                         <div class="border-tr"></div>
                         <div class="border-br"></div>
-                        <div class="title">学校空间访问情况监测</div>
-                    </div>
-                    <div class="tabslect" style="position: relative; " id="xuezhi">
-                        <select id="mySelect" class="select">
-                            <option>全部</option>
-                            <option>小学</option>
-                            <option>初中</option>
-                            <option>高中</option>
-                        </select>
-                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">登录人数</a>
-                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">登录次数</a>
+
+                        <div class="title">学校主题活动开展情况监测</div>
                     </div>
-                    <div style="height: 88%;" id="c1"></div>
+
+
+                    <select id="zthdkzxz" class="select">
+                        <option value="">全部</option>
+                        <option value="1">小学</option>
+                        <option value="2">初中</option>
+                        <option value="3">高中</option>
+                    </select>
+
+
+
+
+                    <div style="height: 95%;" id="c1"></div>
+
                     <!-- <div style="height: 49%;" id="echart2"></div> -->
                     <!-- <div style="height: 49%;" id="echart22"></div> -->
                     <div class="boxfoot"></div>
                 </div>
-                <div class="boxall" style="height: 2.5rem"> 
+                <div class="boxall" style="height: 2rem">
+
                     <div class="alltitle">
                         <div class="line-l"></div>
                         <div class="line-r"></div>
+
                         <div class="border-lt"></div>
                         <div class="border-lb"></div>
                         <div class="border-tr"></div>
                         <div class="border-br"></div>
+
                         <div class="title">空间登录访问监测</div>
                     </div>
+
+
+
                     <div style="height: 95%;" id="c2"></div>
+
                     <!-- <div style="height: 49%;" id="echart2"></div> -->
                     <!-- <div style="height: 49%;" id="echart22"></div> -->
                     <div class="boxfoot"></div>
                 </div>
                 <div class="boxall" style="height: 2.4rem">
+
                     <div class="alltitle">
                         <div class="line-l"></div>
                         <div class="line-r"></div>
@@ -203,14 +262,19 @@
                         <div class="border-lb"></div>
                         <div class="border-tr"></div>
                         <div class="border-br"></div>
+
                         <div class="title">主题活动汇总监测</div>
                     </div>
                     <div style="height: 90%; width: 40%;float: left;" id="c3"></div>
                     <!-- <div class="zhutipaihang-title">主题活动冠军排行榜</div> -->
                     <!-- <div style="height: 49%;" id="echart2"></div> -->
                     <!-- <div style="height: 49%;" id="echart22"></div> -->
+
                     <div class="r2paihang">
+
+
                         <div class="title" rowspan="6">主题活动冠军排行榜</div>
+                        
                         <table class="tg">
                             <thead>
                                 <tr>
@@ -218,6 +282,8 @@
                                     <td class="tg-0pky">活动名称</td>
                                     <td class="tg-0pky">参与人数</td>
                                 </tr>
+                            </thead>
+                            <tbody id="huodongtable">
                                 <tr>
                                     <td class="tg-0pky">德育</td>
                                     <td class="tg-0pky">溯古风诗韵养灵性诗情</td>
@@ -243,15 +309,19 @@
                                     <td class="tg-0pky">溯古风诗韵养灵性诗情</td>
                                     <td class="tg-0pky">2323</td>
                                 </tr>
-                                </tr>
-                            </thead>
+
+
+                            </tbody>
                         </table>
+
                     </div>
+
                     <div class="boxfoot"></div>
                 </div>
             </li>
             <li>
-                <div class="boxall" style="height:6rem">
+                <div class="boxall" style="height:3.5rem">
+
                     <div class="alltitle">
                         <div class="line-l"></div>
                         <div class="line-r"></div>
@@ -259,30 +329,23 @@
                         <div class="border-lb"></div>
                         <div class="border-tr"></div>
                         <div class="border-br"></div>
-                        <div class="title">空间建设活跃度排行榜</div>
-                    </div>
-                    <div class="tabslect" style="position: relative; " id="xuezhi">
-                        <select id="mySelect" class="select">
-                            <option>小学</option>
-                            <option>初中</option>
-                        </select>
-                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">小学</a>
+
+                        <div class="title">学校空间访客情况监测</div>
                     </div>
-                    <div style="height: 100%;" class="kongjian-r1-class">
-                        <div style="clear: both;float: left;width: 80%;height: 90%;float: left;" id="r1"></div>
-                        <div style="float: left;" class="zongshu">
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                            <div class="huoyue"><span>604</span><br>活跃度</div>
-                        </div>
+
+                    <div class="tabslect" id="xuezhi">
+                        <div style="overflow: hidden;float: left;padding:0 10px">总访问量：<span id="fwSum"></span></div>
+                        <div style="overflow: hidden;float: left;padding:0 10px">总关注量：<span id="gzSum"></span></div>
                     </div>
+
+                    <div style="height: 100%;clear: both;" id="r1"></div>
+
                     <!-- <div style="height: 49%;" id="echart4"></div> -->
                     <!-- <div style="height: 49%;" id="echart44"></div> -->
                     <div class="boxfoot"></div>
                 </div>
-                <div class="boxall" style="height:2.4rem">
+                <div class="boxall" style="height:5rem">
+
                     <div class="alltitle">
                         <div class="line-l"></div>
                         <div class="line-r"></div>
@@ -290,24 +353,40 @@
                         <div class="border-lb"></div>
                         <div class="border-tr"></div>
                         <div class="border-br"></div>
-                        <div class="title">学校主题活动开展情况监测</div>
+
+                        <div class="title">空间建设活跃度排行榜</div>
                     </div>
-                    <div style="overflow: hidden;float: left; color: aqua;width: 100%;">
-                        <select id="mySelect" class="select">
-                            <option>小学</option>
-                            <option>初中</option>
+
+                    <div class="tabslect" id="xuezhi">
+                        <select id="huoyuedu" class="select">
+                            <option value="">全部</option>
+                            <option value="1">小学</option>
+                            <option value="2">初中</option>
+                            <option value="3">高中</option>
                         </select>
+
+                        <a class="tabslect-item act" id="l2_xiaoxue" href="javascript:void(0)">小学</a>
+
                     </div>
-                    <div style="height: 90%;clear: both;" id="r2"></div>
+                    <div style="height: 100%;" class="kongjian-r1-class">
+                        <div style="clear: both;float: left;width: 85%;height: 100%;float: left;" id="r2"></div>
+                        <div class="zongshu">
+                            <div class="huoyue"><span id="huodongnum1"></span><br>活跃度</div>
+                            <div class="huoyue"><span id="huodongnum2"></span><br>活跃度</div>
+                            <div class="huoyue"><span id="huodongnum3"></span><br>活跃度</div>
+                            <div class="huoyue"><span id="huodongnum4"></span><br>活跃度</div>
+                            <div class="huoyue"><span id="huodongnum5"></span><br>活跃度</div>
+                        </div>
+                    </div>
+
                     <!-- <div style="height: 49%;" id="echart4"></div> -->
                     <!-- <div style="height: 49%;" id="echart44"></div> -->
                     <div class="boxfoot"></div>
                 </div>
             </li>
         </ul>
+
     </div>
-    <div class="back"></div>
-    <div class="bgDiv"></div>
     <script src="js/jquery-2.1.1.min.js"></script>
     <script src="js/nav.js"></script>
     <script src="js/axios.min.js"></script>
@@ -315,4 +394,5 @@
     <script src="js/script.js"></script>
     <script src="js/space.js"></script>
 </body>
+
 </html>