From 41bbfe3cccf679f67b29d22d999ed1f399d7539c Mon Sep 17 00:00:00 2001
From: dshclm <3321914460@qq.com>
Date: Fri, 9 Aug 2024 09:12:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=89=E5=AF=86=E7=BD=91=E7=BB=9C=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/network/networknum/networknum.html | 139 ++++++++++++------
 1 file changed, 97 insertions(+), 42 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/system/network/networknum/networknum.html b/ruoyi-admin/src/main/resources/templates/system/network/networknum/networknum.html
index 773bba2..1093389 100644
--- 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,57 +3,79 @@
 <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="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 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">
+                            <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>
-            </form>
+                <div class="col-sm-12 select-table table-striped" style="min-height: 84%">
+                    <table id="bootstrap-table"></table>
+                </div>
+            </div>
         </div>
 
-        <div class="btn-group-sm" id="toolbar" role="group">
-
-        </div>
-        <div class="col-sm-12 select-table table-striped">
-            <table id="bootstrap-table"></table>
-        </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>
