11

ruoyi-admin/src/main/java/com/ruoyi/web/controller/visual/VisualController.java

@@ -95,7 +95,7 @@ public class VisualController {
     }
 
     /**
-     * 市政府门户网站访问情况监测-门户网站栏目浏览量-数据推送接口
+     * 市政府门户网站访问情况监测-门户网站栏目浏览量排名-数据推送接口
      */
     @PostMapping("putColumnPageView")
     @ResponseBody

ruoyi-admin/src/main/resources/templates/websiteAccess.html

@@ -24,7 +24,7 @@
           <div class="content-list-left w40 flex-col">
             <div class="content-list-body height-41" style="width: auto; padding: 0">
               <div class="fw-tit"><span>市政府网站十日内点击量</span></div>
-              <div id="chart-panel" style="width: 100%; height: 33vh; margin-top: 10px"></div>
+              <div id="chart-panel" style="width: 100%; height: 33vh; margin-top: 10px" th:text="${dataSourceOne}"></div>
             </div>
           </div>
           <div class="content-list-left w50 flex-col">
@@ -38,7 +38,7 @@
           <div class="content-list-left w40 flex-col m-t-20">
             <div class="content-list-body height-41" style="width: auto; padding: 0">
               <div class="fw-tit"><span>门户网站栏目浏览量排名</span></div>
-              <div id="chart-panel3" style="width: 100%; height: 34vh; margin-top: 10px"></div>
+              <div id="chart-panel3" style="width: 100%; height: 34vh; margin-top: 10px" th:text="${dataSourceTree}"></div>
             </div>
           </div>
           <div class="content-list-left w50 flex-col m-t-20 ">
@@ -60,9 +60,11 @@
     <!-- 内容End -->
     <script type="text/javascript" src="/js/socket.js"></script>
     <!-- echarts1 -->
-    <script type="text/javascript">
+    <script type="text/javascript" th:inline="javascript">
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById("chart-panel"));
+      let dataSourceOne = [[${dataSourceOne}]];
+      console.log("dataSourceOne",dataSourceOne)
       option = {
         title: {
           show: false,
@@ -128,51 +130,19 @@
               show: true,
               margin: 20,
               textStyle: {
-                fontSize: 20,
+                fontSize: 12,
                 color: "rgba(255,255,255,1)",
               },
               formatter: function (params) {
                 console.log(params);
-                return "2021.11." + params;
+                return params;
               },
             },
             splitLine: {
               show: false,
             },
             boundaryGap: false,
-            data: [
-              "1",
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-              "7",
-              "8",
-              "9",
-              "10",
-              "11",
-              "12",
-              "13",
-              "14",
-              "15",
-              "16",
-              "17",
-              "18",
-              "19",
-              "20",
-              "21",
-              "22",
-              "23",
-              "24",
-              "25",
-              "26",
-              "27",
-              "28",
-              "29",
-              "30",
-              "31",
-            ],
+            data: dataSourceOne.timeNames,
           },
         ],
 
@@ -263,10 +233,7 @@
                 global: false, // 缺省为 false
               },
             },
-            data: [
-              30, 32, 32, 32, 32, 38, 32, 33, 36, 32, 32, 32, 34, 32, 32, 32,
-              39, 32, 32, 32, 32, 32, 33, 32, 32, 23, 32, 32, 32, 32, 32,
-            ],
+            data: dataSourceOne.timeDatas,
           },
         ],
       };
@@ -277,39 +244,13 @@
     </script>
 
     <!-- echarts2 -->
-    <script type="text/javascript">
+    <script type="text/javascript" th:inline="javascript">
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById("chart-panel2"));
-      console.log("dataSourceTwo",document.getElementById("chart-panel2").innerText)
-      var data1 = [
-        "50",
-        "60",
-        "30",
-        "50",
-        "60",
-        "30",
-        "50",
-        "60",
-        "40",
-        "60",
-        "20",
-        "40",
-        "60",
-      ];
-      var datacity = [
-        "北京",
-        "江苏",
-        "浙江",
-        "河北",
-        "福建",
-        "辽宁",
-        "湖北",
-        "河南",
-        "广东",
-        "安徽",
-        "吉林",
-        "内蒙古",
-      ];
+      var message = myChart.textContent;
+      let dataSourceTwo = [[${dataSourceTwo}]];
+      var data1 = dataSourceTwo.deptDatas;
+      var datacity = dataSourceTwo.deptNames;
       var option = {
         tooltip: {
           trigger: "axis",
@@ -417,10 +358,11 @@
     </script>
 
     <!-- echarts3 -->
-    <script type="text/javascript">
+    <script type="text/javascript" th:inline="javascript">
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById("chart-panel3"));
-
+      let dataSourceThree = [[${dataSourceThree}]];
+      console.log("dataSourceThree",dataSourceThree)
       function getPageList(arrays, pageNum, pageSize) {
         //计算分页页数
         pageNum = pageNum - 1;
@@ -440,58 +382,19 @@
         return dataList;
       }
 
-      let yLabel = [
-        "1.政务",
-        "2.市政府",
-        "3.市情况",
-        "4.互动",
-        "5.政策",
-        "6.办事",
-        "7.新闻",
-        "8.法规",
-        "初二",
-        "初三",
-        "高一",
-        "高二",
-        "高三",
-        "1",
-        "2",
-        "3",
-        "4",
-        "5",
-        "6",
-        "7",
-        "8",
-        "9",
-        "10",
-        "11",
-        "12",
-        "13",
-        "14",
-        "15",
-        "16",
-        "17",
-        "18",
-        "19",
-        "20",
-        "21",
-        "22",
-        "23",
-        "24",
-        "25",
-        "26",
-      ];
+      let yLabel = dataSourceThree.columnRankingList;
       var pageNum = 1,
         pageSize = 10;
       var baseRows = getPageList(yLabel, pageNum, pageSize);
-
-      let yData = [];
-      baseRows.forEach((item) => {
-        yData.push(Math.random() * 1000);
+      console.log("baseRows",baseRows)
+      let yData = dataSourceThree.browseList;
+      baseRows.forEach((item,index) => {
+        // baseRows.push(item)
+        yData.push(yData[index]);
       });
       let bgData = [];
       for (let i in yData) {
-        bgData.push(2000);
+        bgData.push(400);
       }
 
       var option = {
@@ -611,16 +514,18 @@
         }
         //原始数组
         baseRows.splice(0, 1);
-        baseRows.push(...rows);
+        // baseRows.push(...rows);
         //原始数组y刻度值
         yData.splice(0, 1);
-        rows.forEach((item) => {
-          yData.push(Math.random() * 1000);
+        rows.forEach((item,index) => {
+          baseRows.push(item)
+          yData.push(yData[index]);
         });
+        console.log("dataSourceThree.browseList",yData)
         //x轴
         bgData.splice(0, 1);
         rows.forEach((item) => {
-          bgData.push(2000);
+          bgData.push(400);
         });
 
         myChart.setOption({
@@ -652,7 +557,298 @@
 
     <script>
       socket.onMessage = function (res) {
-        let message = []
+        let message = {}
+        if (10016 == JSON.parse(res).code) {
+          message = JSON.parse(res).data
+          var myChart = echarts.init(document.getElementById("chart-panel"));
+          option = {
+            title: {
+              show: false,
+              text: "多线图",
+              textStyle: {
+                align: "center",
+                color: "#fff",
+                fontSize: 20,
+              },
+              top: "5%",
+              left: "center",
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                lineStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(0, 255, 233,0)",
+                      },
+                      {
+                        offset: 0.5,
+                        color: "rgba(255, 255, 255,1)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(0, 255, 233,0)",
+                      },
+                    ],
+                    global: false,
+                  },
+                },
+              },
+            },
+            grid: {
+              top: "15%",
+              left: "5%",
+              right: "10%",
+              bottom: "5%",
+              containLabel: true,
+            },
+            xAxis: [
+              {
+                type: "category",
+                axisLine: {
+                  show: true,
+                },
+                splitArea: {
+                  // show: true,
+                  color: "#f00",
+                  lineStyle: {
+                    color: "#f00",
+                  },
+                },
+                axisLabel: {
+                  show: true,
+                  margin: 20,
+                  textStyle: {
+                    fontSize: 12,
+                    color: "rgba(255,255,255,1)",
+                  },
+                  formatter: function (params) {
+                    console.log(params);
+                    return params;
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                boundaryGap: false,
+                data: message.timeNames,
+              },
+            ],
+
+            yAxis: [
+              {
+                type: "value",
+                min: 0,
+                // max: 140,
+                splitNumber: 4,
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: ["#fff"],
+                    opacity: 0.06,
+                  },
+                },
+                axisLine: {
+                  show: false,
+                },
+                axisLabel: {
+                  show: true,
+                  margin: 20,
+                  textStyle: {
+                    fontSize: 20,
+                    color: "rgba(255,255,255,1)",
+                  },
+                },
+                axisTick: {
+                  show: false,
+                },
+              },
+            ],
+            series: [
+              {
+                name: "注册总量",
+                type: "line",
+                smooth: true, //是否平滑
+                showAllSymbol: true,
+                // symbol: 'image://./static/images/guang-circle.png',
+                symbol: "circle",
+                symbolSize: 10,
+                lineStyle: {
+                  normal: {
+                    color: "#FFBC0D",
+                    shadowColor: "rgba(0, 0, 0, 0)",
+                    shadowBlur: 0,
+                    shadowOffsetY: 5,
+                    shadowOffsetX: 5,
+                  },
+                },
+                label: {
+                  show: false, //圆点上方数值
+                  position: "top",
+                  textStyle: {
+                    color: "rgb(218 255 232)",
+                    fontSize: 16,
+                  },
+                },
+                itemStyle: {
+                  color: "#FFBC0D",
+                  borderColor: "rgb(108,78,0)",
+                  borderWidth: 1,
+                  shadowColor: "rgba(0, 0, 0, 0)",
+                  shadowBlur: 0,
+                  shadowOffsetY: 2,
+                  shadowOffsetX: 2,
+                },
+                tooltip: {
+                  show: false,
+                },
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(255,188,13, 0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(255,188,13, 0)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                data: message.timeDatas,
+              },
+            ],
+          };
+
+          if (option) {
+            myChart.clear()
+            myChart.setOption(option);
+          }
+        }
+        if (10017 == JSON.parse(res).code) {
+          message = JSON.parse(res).data
+          var myChart = echarts.init(document.getElementById("chart-panel2"));
+          var data1 = message.deptDatas;
+          var datacity = message.deptNames;
+          var option = {
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                // 坐标轴指示器，坐标轴触发有效
+                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+              },
+            },
+            grid: {
+              left: "3%",
+              right: "3%",
+              bottom: "3%",
+              top: "10%",
+              containLabel: true,
+            },
+            yAxis: [
+              {
+                type: "value",
+                axisLabel: {
+                  //坐标轴刻度标签的相关设置。
+                  interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                  margin: 15,
+                  textStyle: {
+                    color: "#ACCFFF",
+                    fontStyle: "normal",
+                    fontSize: 12,
+                  },
+                },
+                axisLine: {
+                  lineStyle: {
+                    color: "#344B83",
+                  },
+                },
+                splitLine: {
+                  lineStyle: {
+                    color: "#344B83",
+                  },
+                },
+                axisTick: {
+                  show: false,
+                },
+              },
+            ],
+            xAxis: [
+              {
+                type: "category",
+                axisTick: {
+                  show: false,
+                },
+                axisLabel: {
+                  //坐标轴刻度标签的相关设置。
+                  interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+                  margin: 15,
+                  textStyle: {
+                    color: "#ACCFFF",
+                    fontStyle: "normal",
+                    fontSize: 12,
+                  },
+                  rotate: 30,
+                },
+                axisLine: {
+                  lineStyle: {
+                    color: "#344B83",
+                  },
+                },
+                data: datacity,
+              },
+            ],
+            series: [
+              {
+                name: "",
+                type: "bar",
+                barWidth: "10",
+                label: {
+                  normal: {
+                    show: true,
+                    position: "top",
+                    fontSize: 12,
+                    color: "#fff",
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    show: true,
+                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                      {
+                        offset: 0,
+                        color: "#45CAED",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6, 176, 203, 0.59)",
+                      },
+                    ]),
+                  },
+                },
+                data: data1,
+              },
+            ],
+          };
+          if (option) {
+            myChart.clear()
+            myChart.setOption(option);
+          }
+        }
         if (10019 == JSON.parse(res).code) {
           message = JSON.parse(res).data
           // 处理接收到的消息

ruoyi-system/src/main/java/com/ruoyi/system/service/IColumnPageViewService.java

@@ -4,10 +4,11 @@ import com.ruoyi.system.domain.ColumnPageView;
 import com.ruoyi.system.domain.WebSiteTenDaysHits;
 
 import java.util.List;
+import java.util.Map;
 
 public interface IColumnPageViewService {
 
-    List<ColumnPageView> selectColumnPageViewList();
+    Map<String, List<String>> selectColumnPageViewList();
 
     void insertBatch(List<ColumnPageView> list);
 

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/ColumnPageViewServiceImpl.java

@@ -13,7 +13,8 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.util.CollectionUtils;
 
-import java.util.List;
+import java.util.*;
+import java.util.stream.Collectors;
 
 import static com.ruoyi.common.core.domain.AjaxResult.success;
 
@@ -27,8 +28,21 @@ public class ColumnPageViewServiceImpl implements IColumnPageViewService {
 
 
     @Override
-    public List<ColumnPageView> selectColumnPageViewList() {
-        return columnPageViewMapper.selectColumnPageViewList();
+    public Map<String, List<String>> selectColumnPageViewList() {
+        Map<String, List<String>> returnMap = new HashMap<>();
+        List<String> columnRankingList = new ArrayList<>();
+//        List<String> rankingList = new ArrayList<>();
+        List<String> browseList = new ArrayList<>();
+        List<ColumnPageView> list = columnPageViewMapper.selectColumnPageViewList();
+        for (ColumnPageView var : list) {
+            columnRankingList.add(var.getColumnRanking() + "-" + var.getRanking());
+//            rankingList.add(var.getRanking());
+            browseList.add(var.getBrowse());
+        }
+        returnMap.put("columnRankingList",columnRankingList);
+//        returnMap.put("rankingList",rankingList);
+        returnMap.put("browseList",browseList);
+        return returnMap;
     }
 
     @Override

ruoyi-system/src/main/resources/mapper/system/ColumnPageViewMapper.xml

@@ -17,6 +17,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 
     <select id="selectColumnPageViewList" parameterType="ColumnPageView" resultMap="ColumnPageViewResult">
         <include refid="selectColumnPageViewVo"/>
+        order by column_ranking asc
     </select>
 
 	<delete id="deleteColumnPageViewAll" parameterType="Long">