中台-日志改造-第3步-优化可视化界面

leiSP-admin/src/main/resources/templates/main.html

@@ -95,6 +95,7 @@
                 <h5>接口总数</h5>
             </div>
             <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: 0px;">单位：个</span>
                 <span id="tj_interface_total">[[${count}]]</span>
             </div>
         </div>
@@ -105,6 +106,7 @@
                 <h5>调用频次</h5>
             </div>
             <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: 0px;">单位：次</span>
                 <span id="tj_dypc">[[${callFrequency}]]</span>
             </div>
         </div>
@@ -115,6 +117,7 @@
                 <h5>归集频次</h5>
             </div>
             <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: 0px;">单位：次</span>
                 <span id="tj_gjpc">[[${pushFrequency}]]</span>
             </div>
         </div>
@@ -125,6 +128,7 @@
                 <h5>共享频次</h5>
             </div>
             <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: 0px;">单位：次</span>
                 <span id="tj_gxpc">[[${pullFrequency}]]</span>
             </div>
         </div>
@@ -135,6 +139,7 @@
                 <h5 >接入部门</h5>
             </div>
             <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: 0px;">单位：个</span>
                 <span id="tj_jrbm">[[${depts}]]</span>
             </div>
         </div>
@@ -145,11 +150,10 @@
                 <h5>接口故障</h5>
             </div>
             <div class="col-sm-6 ibox-right-th">
+                <span style="font-size: 14px;position: absolute;top: -50px;display: block;height: 25px;right: 0px;">单位：个</span>
                 <span id="tj_jkgz">[[${faultCount}]]</span>
             </div>
         </div>
-
-
     </div>
 
     <div class="row mg-top-15">

mybusiness/src/main/java/com/sooka/system/controller/TUInterfaceinfoController.java

@@ -68,16 +68,18 @@ public class TUInterfaceinfoController extends BaseController {
     /**
      * 根据部门ID获取接口
      */
-    @GetMapping("/selectInterfaceByDeptId/{deptId}")
-    public String selectInterfaceByDeptId(@PathVariable("deptId") String deptId, ModelMap mmap)
+    @GetMapping("/selectInterfaceByDeptId/{deptId}/{shareType1}/{shareType3}")
+    public String selectInterfaceByDeptId(@PathVariable("deptId") String deptId,
+                                          @PathVariable("shareType1") String shareType1,
+                                          @PathVariable("shareType3") String shareType3, ModelMap mmap)
     {
         TUInterfaceinfo tuInterfaceinfo = new TUInterfaceinfo();
         tuInterfaceinfo.setDeptId(deptId);
         //只查询可用的接口
         tuInterfaceinfo.setStatus("0");
         //只查询 市共享和省上报的接口
-        tuInterfaceinfo.setShareType1("share_type_1");
-        tuInterfaceinfo.setShareType3("share_type_3");
+        tuInterfaceinfo.setShareType1(shareType1);
+        tuInterfaceinfo.setShareType3(shareType3);
         startPage();
         List<TUInterfaceinfo> list = tUInterfaceinfoService.selectTUInterfaceinfoList(tuInterfaceinfo);
         mmap.put("list", list.stream().collect(Collectors.toList()));

mybusiness/src/main/resources/mapper/system/TUInterfaceinfoMapper.xml

@@ -58,7 +58,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="code != null  and code != ''"> and code = #{code}</if>
             <if test="callsuccnum != null  and callsuccnum != ''"> and callsuccnum = #{callsuccnum}</if>
             <if test="callfailnum != null  and callfailnum != ''"> and callfailnum = #{callfailnum}</if>
-            and share_type in (#{shareType1}, #{shareType3})
+            <if test="shareType1 != null  and shareType1 != '' and shareType3 != null  and shareType3 != ''">
+                and share_type in (#{shareType1}, #{shareType3})
+            </if>
         </where>
         order by create_time desc
     </select>
@@ -249,6 +251,8 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
                             COUNT(id)
                         FROM
                             t_u_interfaceinfo
+                        WHERE DATE_FORMAT(create_time,'%Y') = #{year}
+                        <if test="deptId != null  and deptId != ''"> and dept_id = #{deptId}</if>
                     ) * 100
                 ),
                 DECIMAL (10, 0)
@@ -274,6 +278,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
                             COUNT(id)
                         FROM
                             t_u_interfaceinfo
+                        WHERE DATE_FORMAT(create_time,'%Y') = #{year}
                     ) * 100
                 ),
                 DECIMAL (10, 0)

mybusiness/src/main/resources/static/visualization/css/th_yj.css

@@ -954,15 +954,27 @@ body::-webkit-scrollbar {
 	background: url("../images/thqzj_tk3.png") 23px 5px no-repeat;
 }
 
+.dypc{
+	font-size: 16px;
+	float: right;
+	padding-right: 15px;
+	text-align: revert;
+	background: url("../images/dypc.png") no-repeat left center;
+	padding-left: 30px;
+	background-size: 30px;
+	color: #28b1f3;
+}
+
 .tk_x {
 	display: block;
-	width: 100%;
+	width: 137%;
 	position: absolute;
 	top: -12px;
+	left: -160px;
 }
 
 .tk_jklb h1 {
-	text-align: center;
+	text-align: left;
 	font-size: 20px;
 	color: rgb(255, 255, 255);
 	height: 40px;

mybusiness/src/main/resources/templates/apply/record/add.html

@@ -137,7 +137,7 @@
         if(deptId == "" || deptId == null){
             $.modal.alertError('请先选择接口提供部门');
         }else{
-            let url = prefix + '/interfaceinfo/selectInterfaceByDeptId/' + deptId;
+            let url = prefix + '/interfaceinfo/selectInterfaceByDeptId/' + deptId + '/share_type_1/share_type_3';
             $.modal.open("请选择接口", url, ($(window).width() - 50),($(window).height() - 50), interfaceCallback);
         }
     }

mybusiness/src/main/resources/templates/apply/record/edit.html

@@ -191,7 +191,7 @@
         if(deptId == "" || deptId == null){
             $.modal.alertError('请先选择接口提供部门');
         }else{
-            let url = prefix + '/interfaceinfo/selectInterfaceByDeptId/' + deptId;
+            let url = prefix + '/interfaceinfo/selectInterfaceByDeptId/' + deptId + '/share_type_1/share_type_3';
             $.modal.open("请选择接口", url, ($(window).width() - 50),($(window).height() - 50), interfaceCallback);
         }
     }

mybusiness/src/main/resources/templates/visualization/tk_iframe.html

@@ -20,13 +20,17 @@
 </div>
 <div class="tk_con clearfix">
     <div class="tk_jklb tk_bg fl">
-        <i class="tk_x"><img th:src="@{/visualization/images/thqzj_tk2.png}"></i>
-        <h1>接口列表</h1>
+        <i class="tk_x"><img style="width: 100%" th:src="@{/visualization/images/thqzj_tk2.png}"></i>
+        <h1 style="padding-top: 10px;">
+            接口列表
+            <span class="dypc">代表接口调用频次</span>
+        </h1>
         <div id="FontScroll">
             <ul class="jk_list line">
                 <li class="list_div" th:each="info:${interfaceList}">
                     <i><img th:src="@{/visualization/images/thqzj_tk4.png}"/></i>
                     <span>[[${#strings.abbreviate(info.interfaceName,16)}]]</span>
+                    <u style="float: right;color: rgb(40 177 243);text-decoration: none;font-size: 16px;">3.5k</u>
                 </li>
             </ul>
         </div>