涉密网络统计

pg_adapter
dshclm 8 months ago
parent 4b6435cc31
commit 41bbfe3ccc

@ -3,57 +3,79 @@
<head> <head>
<th:block th:include="include :: header('涉密网络设备列表')" /> <th:block th:include="include :: header('涉密网络设备列表')" />
</head> </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"> <body class="gray-bg">
<div class="container-div" id="app"> <div class="container-div" id="app">
<div class="row"> <div class="row">
<div class="col-sm-12 search-collapse"> <div class="echart">
<form id="formId"> <div class="children_echarts left_echarts" style="width: 30%;padding-top: 10px;">
<div class="select-list"> <div id="leftMain" style="width: 400px;height:500px"></div>
<ul> </div>
<li> <div class="children_echarts right_echarts" style="width: 70%">
<label>所属市州:</label> <div class="col-sm-12 search-collapse">
<select id="City" name="framework" @change="getAreaList()" v-model="City"> <form id="formId">
<option value="">请选择</option> <div class="select-list">
<option v-for="option in CityList" :value="option.id" :key="option.id"> <ul>
{{ option.name }} <li>
</option> <label>所属市州:</label>
</select> <select id="City" name="framework" @change="getAreaList()" v-model="City">
</li> <option value="">请选择</option>
<li> <option v-for="option in CityList" :value="option.id" :key="option.id">
<label>所属区县:</label> {{ option.name }}
<select id="Area" name="area" v-model="Area"> </option>
<option value="">请选择</option> </select>
<option v-for="option in AreaList" :value="option.id" :key="option.id"> </li>
{{ option.name }} <li>
</option> <label>所属区县:</label>
</select> <select id="Area" name="area" v-model="Area">
</li> <option value="">请选择</option>
<li> <option v-for="option in AreaList" :value="option.id" :key="option.id">
<label>使用单位:</label> {{ option.name }}
<input type="text" name="netDepart"/> </option>
</li> </select>
<li> </li>
<label>部门名称:</label> <li>
<input type="text" name="part"/> <label>使用单位:</label>
</li> <input type="text" name="netDepart"/>
<li> </li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a> <li>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a> <label>部门名称:</label>
</li> <input type="text" name="part"/>
</ul> </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>
</form> <div class="col-sm-12 select-table table-striped" style="min-height: 84%">
<table id="bootstrap-table"></table>
</div>
</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>
</div> </div>
<th:block th:include="include :: footer" /> <th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript"> <script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:network:edit')}]]; var editFlag = [[${@permission.hasPermi('system:network:edit')}]];
var printFlag = [[${@permission.hasPermi('system:networknum:print')}]]; var printFlag = [[${@permission.hasPermi('system:networknum:print')}]];
@ -75,6 +97,7 @@
url: prefix + "/list", url: prefix + "/list",
exportUrl: prefix + "/export", exportUrl: prefix + "/export",
modalName: "涉密网络设备", modalName: "涉密网络设备",
pageSize:'5',
columns: [ columns: [
{ {
field: 'netId', field: 'netId',
@ -180,6 +203,38 @@
var url = prefix + '/print/' + netId; var url = prefix + '/print/' + netId;
$.modal.openTab("打印", url); $.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> </script>
</body> </body>
</html> </html>

Loading…
Cancel
Save