涉密网络统计

ruoyi-admin/src/main/resources/templates/system/network/networknum/networknum.html

@@ -6,7 +6,7 @@
 <style>
     .echart{
         width: 100%;
-        height: 98%;
+        height: 43%;
         background-color: white;
         margin-top: 10px;
         border-radius: 10px;
@@ -24,54 +24,54 @@
 <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 class="children_echarts left_echarts">
-                <div id="leftMain" style="width: 400px;height:500px"></div>
+                <div id="leftMain" style="width: 600px;height:330px"></div>
             </div>
-            <div class="children_echarts right_echarts" style="width: 70%">
+            <div class="children_echarts right_echarts">
-                <div class="col-sm-12 search-collapse">
+                <div id="rightMain" style="width: 600px;height:330px"></div>
-                    <form id="formId">
-                        <div class="select-list">
-                            <ul>
-                                <li>
-                                    <label>所属市州：</label>
-                                    <select id="City" name="framework" @change="getAreaList()" v-model="City">
-                                        <option value="">请选择</option>
-                                        <option v-for="option in CityList" :value="option.id" :key="option.id">
-                                            {{ option.name }}
-                                        </option>
-                                    </select>
-                                </li>
-                                <li>
-                                    <label>所属区县：</label>
-                                    <select id="Area" name="area" v-model="Area">
-                                        <option value="">请选择</option>
-                                        <option v-for="option in AreaList" :value="option.id" :key="option.id">
-                                            {{ option.name }}
-                                        </option>
-                                    </select>
-                                </li>
-                                <li>
-                                    <label>使用单位：</label>
-                                    <input type="text" name="netDepart"/>
-                                </li>
-                                <li>
-                                    <label>部门名称：</label>
-                                    <input type="text" name="part"/>
-                                </li>
-                                <li>
-                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
-                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </form>
-                </div>
-                <div class="col-sm-12 select-table table-striped" style="min-height: 84%">
-                    <table id="bootstrap-table"></table>
-                </div>
             </div>
         </div>
-
+        <div class="col-sm-12 search-collapse">
+        <form id="formId">
+            <div class="select-list">
+                <ul>
+                    <li>
+                        <label>所属市州：</label>
+                        <select id="City" name="framework" @change="getAreaList()" v-model="City">
+                            <option value="">请选择</option>
+                            <option v-for="option in CityList" :value="option.id" :key="option.id">
+                                {{ option.name }}
+                            </option>
+                        </select>
+                    </li>
+                    <li>
+                        <label>所属区县：</label>
+                        <select id="Area" name="area" v-model="Area">
+                            <option value="">请选择</option>
+                            <option v-for="option in AreaList" :value="option.id" :key="option.id">
+                                {{ option.name }}
+                            </option>
+                        </select>
+                    </li>
+                    <li>
+                        <label>使用单位：</label>
+                        <input type="text" name="netDepart"/>
+                    </li>
+                    <li>
+                        <label>部门名称：</label>
+                        <input type="text" name="part"/>
+                    </li>
+                    <li>
+                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+                    </li>
+                </ul>
+            </div>
+        </form>
+    </div>
+    <div class="col-sm-12 select-table table-striped" style="min-height: 44%">
+        <table id="bootstrap-table"></table>
+    </div>
     </div>
 </div>
 <th:block th:include="include :: footer" />
@@ -208,12 +208,11 @@
         if (response.data.code == web_status.SUCCESS){
             myChart.setOption({
                 title: {
-                    text: '网络设备密级统计'
+                    text: '网络终端数统计'
                 },
                 tooltip: {},
                 legend: {
-                    data:['设备密级'],
+                    data:['终端数'],
-                    bottom: 'bottom',
                 },
                 xAxis: {
                     data: response.data.data.xAxisData
@@ -223,7 +222,7 @@
                 },
                 series: [
                     {
-                        name: '设备密级',
+                        name: '终端数',
                         type: 'bar',
                         data: response.data.data.yAxisData,
                         itemStyle: {
@@ -232,7 +231,36 @@
                     }
                 ]
             });
-            console.log(response.data.data)
+        }
+    })
+    var rightMain = echarts.init(document.getElementById('rightMain'));
+    axios.post(prefix + '/countNetInfo').then(response => {
+        if (response.data.code == web_status.SUCCESS){
+            rightMain.setOption({
+                title: {
+                    text: '网络设备种类统计'
+                },
+                tooltip: {},
+                legend: {
+                    data:['设备种类'],
+                },
+                xAxis: {
+                    data: response.data.data.xAxisData
+                },
+                yAxis: {
+
+                },
+                series: [
+                    {
+                        name: '设备种类',
+                        type: 'bar',
+                        data: response.data.data.yAxisData,
+                        itemStyle: {
+                            color: '#4e9bf1'
+                        }
+                    }
+                ]
+            });
         }
     })
 </script>