涉密网络统计

8 months ago · 41bbfe3ccc
parent 4b6435cc31
commit 41bbfe3ccc
1 changed files with 97 additions and 42 deletions
--- a/ruoyi-admin/src/main/resources/templates/system/network/networknum/networknum.html
+++ b/ruoyi-admin/src/main/resources/templates/system/network/networknum/networknum.html
@ -3,9 +3,31 @@
 <head>
    <th:block th:include="include :: header('涉密网络设备列表')" />
 </head>
+<style>
+    .echart{
+        width: 100%;
+        height: 98%;
+        background-color: white;
+        margin-top: 10px;
+        border-radius: 10px;
+        box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+    }
+    .children_echarts{
+        width: 49%;
+        height: 100%;
+    }
+</style>
 <body class="gray-bg">
 <div class="container-div" id="app">
    <div class="row">
+        <div class="echart">
+            <div class="children_echarts left_echarts" style="width: 30%;padding-top: 10px;">
+                <div id="leftMain" style="width: 400px;height:500px"></div>
+            </div>
+            <div class="children_echarts right_echarts" style="width: 70%">
                <div class="col-sm-12 search-collapse">
                    <form id="formId">
                        <div class="select-list">
@ -44,16 +66,16 @@
                        </div>
                    </form>
                </div>
-
-        <div class="btn-group-sm" id="toolbar" role="group">
-
-        </div>
-        <div class="col-sm-12 select-table table-striped">
+                <div class="col-sm-12 select-table table-striped" style="min-height: 84%">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
+
+    </div>
+</div>
 <th:block th:include="include :: footer" />
+<th:block th:include="include :: echarts-js" />
 <script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:network:edit')}]];
    var printFlag = [[${@permission.hasPermi('system:networknum:print')}]];
@ -75,6 +97,7 @@
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            modalName: "涉密网络设备",
+            pageSize:'5',
            columns: [
                {
                    field: 'netId',
@ -180,6 +203,38 @@
        var url = prefix + '/print/' + netId;
        $.modal.openTab("打印", url);
    }
+    var myChart = echarts.init(document.getElementById('leftMain'));
+    axios.post(prefix + '/countInfo').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            myChart.setOption({
+                title: {
+                    text: '网络设备密级统计'
+                },
+                tooltip: {},
+                legend: {
+                    data:['设备密级'],
+                    bottom: 'bottom',
+                },
+                xAxis: {
+                    data: response.data.data.xAxisData
+                },
+                yAxis: {
+
+                },
+                series: [
+                    {
+                        name: '设备密级',
+                        type: 'bar',
+                        data: response.data.data.yAxisData,
+                        itemStyle: {
+                            color: '#6adae8'
+                        }
+                    }
+                ]
+            });
+            console.log(response.data.data)
+        }
+    })
 </script>
 </body>
 </html>