monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 188680adff21095be3333edd30b94372ce8ccd5e 2 parents 7f542aa2 a8656733

Merge branch 'master-V32-XuHaoJie' into 'master' 

通用-端口侦测-前端开发



See merge request !328
Inline Side-by-side
Showing 11 changed files with 294 additions and 6 deletions
@@ -472,6 +472,27 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form', @@ -472,6 +472,27 @@ layui.define(['common', 'tree', 'laypage', 'laytpl', 'upload', 'admin', 'form',
472 } 472 }
473 }) 473 })
474 474
  475 + //端口侦测
  476 + $("#resManagePostSense").unbind().on("click", function () {
  477 + //获取资源ids
  478 + var data = table.checkStatus('resManageTable').data;
  479 + var resIds = [];
  480 + $.each(data, function (i, e) {
  481 + resIds.push(e.resId)
  482 + })
  483 + if (data.length <= 0) {//不传参
  484 + layer.open({
  485 + type: 1
  486 + , title: '端口侦测'
  487 + , closeBtn: 1
  488 + , area: ['90%', '80%']
  489 + , id: 'lay_port_sense' //设定一个id，防止重复弹出
  490 + , content: '<iframe src="/vue3/index.html#/vue3/portSense" frameborder="0" class="layadmin-iframe"/>' //支持传入html
  491 + });
  492 + }else{//传参
  493 +
  494 + }
  495 + })
475 function openResManageCollHtml(callback){ 496 function openResManageCollHtml(callback){
476 if(data.length<=0){ 497 if(data.length<=0){
477 layer.msg("请选择资源", { offset: '15px' , icon: 7 , time: 1500 }); 498 layer.msg("请选择资源", { offset: '15px' , icon: 7 , time: 1500 });
@@ -89,6 +89,7 @@ @@ -89,6 +89,7 @@
89 <button id="res_relation_config" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe630;</i>关系配置</button> 89 <button id="res_relation_config" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe630;</i>关系配置</button>
90 <div class="right-btns" style="float: right"> 90 <div class="right-btns" style="float: right">
91 <button id="btn-resManageImport" type="button" class="hide"></button> 91 <button id="btn-resManageImport" type="button" class="hide"></button>
  92 + <button id="resManagePostSense" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe631;</i>端口侦测</button>
92 <button id="resManageImport" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe681;</i>导入</button> 93 <button id="resManageImport" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe681;</i>导入</button>
93 <button id="resManageExportExcel" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-export"></i>导出资源</button> 94 <button id="resManageExportExcel" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-export"></i>导出资源</button>
94 <button id="resManageDownloadTemp" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe601;</i>下载模板</button> 95 <button id="resManageDownloadTemp" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe601;</i>下载模板</button>
@@ -121,7 +121,6 @@ export default { @@ -121,7 +121,6 @@ export default {
121 proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) { 121 proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
122 if (res && res.data) { 122 if (res && res.data) {
123 that.list = res.data; 123 that.list = res.data;
124 - console.log("getTree:",that.list);  
125 } 124 }
126 }) 125 })
127 }, 126 },
@@ -121,7 +121,6 @@ export default { @@ -121,7 +121,6 @@ export default {
121 proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) { 121 proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
122 if (res && res.data) { 122 if (res && res.data) {
123 that.list = res.data; 123 that.list = res.data;
124 - console.log("getTree:",that.list);  
125 } 124 }
126 }) 125 })
127 }, 126 },
@@ -121,7 +121,6 @@ export default { @@ -121,7 +121,6 @@ export default {
121 proxy.$http.get("/api-web/home/resType/getTree?typeParentFlag=1", {}, function(res) { 121 proxy.$http.get("/api-web/home/resType/getTree?typeParentFlag=1", {}, function(res) {
122 if (res && res.data) { 122 if (res && res.data) {
123 that.list = res.data; 123 that.list = res.data;
124 - console.log("getTree:",that.list);  
125 } 124 }
126 }) 125 })
127 }, 126 },
@@ -95,7 +95,6 @@ export default { @@ -95,7 +95,6 @@ export default {
95 let pageSize = Vue.ref(props.pageSize); 95 let pageSize = Vue.ref(props.pageSize);
96 // let multipleSelection=Vue.ref([]); 96 // let multipleSelection=Vue.ref([]);
97 97
98 -  
99 /** 98 /**
100 * 获取宽度 99 * 获取宽度
101 * <p> 100 * <p>
@@ -187,7 +186,7 @@ export default { @@ -187,7 +186,7 @@ export default {
187 let toggleSelection=(rows)=> { 186 let toggleSelection=(rows)=> {
188 console.log("rows",rows) 187 console.log("rows",rows)
189 proxy.$nextTick(function () { 188 proxy.$nextTick(function () {
190 - console.log("set",props.dataList,props.multipleSelection) 189 + //console.log("set",props.dataList,props.multipleSelection)
191 190
192 if (rows) { 191 if (rows) {
193 rows.forEach(row => { 192 rows.forEach(row => {
@@ -27,6 +27,11 @@ const routes = [{ @@ -27,6 +27,11 @@ const routes = [{
27 path: '/assets/configmanager', 27 path: '/assets/configmanager',
28 name: 'configmanager', 28 name: 'configmanager',
29 component: () => myImport('views/assets/configmanager/index') 29 component: () => myImport('views/assets/configmanager/index')
  30 + },
  31 + {
  32 + path: '/vue3/portSense',
  33 + name: 'portSense',
  34 + component: () => myImport('views/portSense/index')
30 } 35 }
31 ]; 36 ];
32 37
  1 +<div>
  2 + <el-row>
  3 + <el-col :span="24">
  4 + <div class="set-add-div">
  5 + <el-row>
  6 + <el-col :span="24">
  7 + <div class="flex-div-start margin-top-bottom-10">
  8 + <el-input style="width:160px;" class="margin-right-10" v-model="keyWords"
  9 + placeholder="输入关键字"/>
  10 + <div class="flex-div-start">
  11 + <el-button type="primary" @click="onReset()">重置</el-button>
  12 + <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
  13 + </div>
  14 +<!-- <el-select v-model="busTypeArr" multiple filterable clearable collapse-tags-->
  15 +<!-- placeholder="请选择业务">-->
  16 +<!-- <el-option-->
  17 +<!-- v-for="item in busTypeList"-->
  18 +<!-- :label="item.busTypeName" :value="item.busId"></el-option>-->
  19 +<!-- </el-select>-->
  20 + <el-dropdown style="margin-top: -15px;margin-left: 10px;">
  21 + <el-icon class="el-icon--right">
  22 + <arrow-down/>
  23 + </el-icon>
  24 + <cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/>
  25 + </el-dropdown>
  26 +
  27 + <el-dropdown style="margin-top: -15px;margin-left: 10px;">
  28 + <el-icon class="el-icon--right">
  29 + <arrow-down/>
  30 + </el-icon>
  31 + <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
  32 + </el-dropdown>
  33 +
  34 + </div>
  35 + </el-col>
  36 + </el-row>
  37 + <el-row class="margin-bottom-50">
  38 + <el-col :span="24" class="table-height">
  39 + <cm-table-page v-if="portSenseData" :columns="columns"
  40 + :dataList="portSenseData"
  41 + :total="count"
  42 + :pageSize="pageSize"
  43 + @loaddata="loadTableDataList"
  44 + @selectionChange="selectionChange"
  45 + :showIndex="true"
  46 + :showSelection="true"
  47 + :showBorder="true"
  48 + :loading="false"
  49 + :showPage="true"
  50 + :showTools="true"
  51 + :height="(height - 500)">
  52 + <template #tools="{scope}">
  53 + <el-button type="text" size="small" @click.prevent="deleteItem(scope.row,scope.$index)">
  54 + 删除
  55 + </el-button>
  56 + </template>
  57 + </cm-table-page>
  58 + </el-col>
  59 + </el-row>
  60 + </div>
  61 + </el-col>
  62 + </el-row>
  63 + <!-- <div class="margin-top btn-faultDiagnosis flex-center position-bottom">-->
  64 + <!-- <el-button @click="cancleList">取消</el-button>-->
  65 + <!-- &lt;!&ndash; <el-button @click="saveList" type="primary">保存</el-button>&ndash;&gt;-->
  66 + <!-- </div>-->
  67 +</div>
  68 +<!--<div id="ssss">-->
  69 +<!-- {{ portSenseData[0] }}-->
  70 +<!-- {{columns}}-->
  71 +<!--</div>-->
  1 +export default {
  2 + name: 'portSense',
  3 + template: '',
  4 + components: {},
  5 + data() {
  6 + },
  7 + setup(props, {attrs, slots, emit}) {
  8 + const {proxy} = Vue.getCurrentInstance();
  9 + const columns = [
  10 + {
  11 + prop: 'resName',
  12 + label: '资源名称',
  13 + sortable: true,
  14 + align: 'center',
  15 + },
  16 + {
  17 + prop: 'ip',
  18 + label: 'ip地址',
  19 + sortable: true,
  20 + align: 'center',
  21 + },
  22 + {
  23 + prop: 'resTypeName',
  24 + label: '资源类型',
  25 + sortable: true,
  26 + align: 'center',
  27 + },
  28 + {
  29 + prop: 'lastCollTime',
  30 + label: '最近采集时间',
  31 + sortable: true,
  32 + align: 'center',
  33 + },
  34 + {
  35 + prop: 'linkState',
  36 + label: '连接状态',
  37 + sortable: true,
  38 + align: 'center',
  39 + }
  40 + ];
  41 + //配置列表总数
  42 + let count = Vue.ref(0);
  43 + //搜索关键字
  44 + let keyWords = Vue.ref('');
  45 + //列表数据
  46 + let portSenseData = Vue.ref([{resName:'123',ip:'1.2.3.4'}]);
  47 + //资源类型数据
  48 + let resTypeArr = Vue.ref([]);
  49 + //业务类型数据
  50 + let busTypeArr = Vue.ref([]);
  51 + //业务类型
  52 + let busTypeList = Vue.ref([]);
  53 + //资源类型数据
  54 + let resIdArr = Vue.ref([]);
  55 + //列表高度
  56 + let height = Vue.ref(window.innerHeight - 150);
  57 + //列表分页
  58 + let pageSize = Vue.ref(50);
  59 + let init = () => {
  60 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function (res) {
  61 + if (res && res.data) {
  62 + busTypeList.value = res.data;
  63 + }
  64 + })
  65 + }
  66 + // 挂载完
  67 + Vue.onMounted(() => {
  68 + init();
  69 + getListData();
  70 + })
  71 +
  72 + //定义列表参数
  73 + let getParams = Vue.ref({
  74 + keyWords: keyWords.value,
  75 + resTypes: resTypeArr.value.join(','),
  76 + resIds: resIdArr.value.join(','),
  77 + busIds: busTypeArr.value.join(','),
  78 + page: 1,
  79 + limit: pageSize
  80 + })
  81 + //获取列表数据
  82 + const getListData = () => {
  83 + proxy.$http.get("/api-web/bResourceExtendParam/page", getParams.value, function (res) {
  84 + if (res && res.data) {
  85 + // portSenseData.value = res.data;
  86 + // count.value = res.count;
  87 + }
  88 + })
  89 + }
  90 + // 点击按钮搜索
  91 + let onBtnSearch = () => {
  92 + loadTableDataList({page: 1, limit: pageSize});
  93 + }
  94 + // 重置
  95 + let onReset = () => {
  96 + keyWords.value = '';
  97 + resTypeArr.value = '';
  98 + resIdArr.value = '';
  99 + busTypeArr.value = '';
  100 + }
  101 + //获取资源类型
  102 + let getResType = (arr) => {
  103 + let types = arr.map(function (v) {
  104 + return v.id;
  105 + });
  106 + resTypeArr.value = types;
  107 + loadTableDataList({page: 1, limit: pageSize});
  108 + }
  109 + //获取业务系统
  110 + let getBizType = (arr) => {
  111 + let types = arr.map(function (v) {
  112 + return v.busId;
  113 + });
  114 + busTypeArr.value = types;
  115 + loadTableDataList({page: 1, limit: pageSize});
  116 + }
  117 +
  118 + //表格全选事件
  119 + let selectionChange = (val) => {
  120 + proxy.portSenseData.map((v, i) => {
  121 + v.checked = false;
  122 + });
  123 + let selectData = val;
  124 + if (selectData.length > 0) {
  125 + selectData.map((item, index) => {
  126 + proxy.portSenseData.map((v, i) => {
  127 + if (item.id == v.id) {
  128 + v.checked = true;
  129 + }
  130 + })
  131 + })
  132 + } else {
  133 + proxy.portSenseData.map((v, i) => {
  134 + v.checked = false;
  135 + })
  136 + }
  137 + }
  138 +
  139 + //删除单个数据
  140 + let deleteItem = (row, index) => {
  141 + let that = this;
  142 + this.$global.confirm("确认删除吗？", function () {
  143 + deleteItems = (that, [row.resId]);
  144 + })
  145 + }
  146 + //删除多个或单个
  147 + let deleteItems = (that, list) => {
  148 + let params = {
  149 + redIds: list.toString()
  150 + }
  151 + that.$http.get('/api-web/bResourceExtendParam/delete', params, function (res) {
  152 + if (res) {
  153 + that.$global.showMsg('删除成功');
  154 + loadTableDataList({page: 1, limit: pageSize});
  155 + }
  156 + // that.$emit('callbackDelete', item)
  157 + })
  158 + }
  159 +
  160 + //重新加载表格数据
  161 + let loadTableDataList = ({page, limit}) => {
  162 + getParams.page = page;
  163 + getParams.pageSize = limit;
  164 + getListData();
  165 + }
  166 + return {
  167 + count,
  168 + portSenseData,
  169 + columns,
  170 + height,
  171 + pageSize,
  172 +
  173 + keyWords,
  174 + resTypeArr,
  175 + busTypeArr,
  176 + busTypeList,
  177 +
  178 + selectionChange,
  179 + deleteItem,
  180 + onBtnSearch,
  181 + onReset,
  182 +
  183 + getListData,
  184 + loadTableDataList,
  185 +
  186 + getResType,
  187 + getBizType,
  188 + }
  189 + }
  190 +}
@@ -378,7 +378,6 @@ export default { @@ -378,7 +378,6 @@ export default {
378 */ 378 */
379 // 保存用户信息 379 // 保存用户信息
380 let saveUser = () => { 380 let saveUser = () => {
381 - debugger  
382 proxy.$refs.rule.validate((valid) => { 381 proxy.$refs.rule.validate((valid) => {
383 if (valid) { 382 if (valid) {
384 console.log('submit!!'); 383 console.log('submit!!');
@@ -140,6 +140,11 @@ const routes = [{ @@ -140,6 +140,11 @@ const routes = [{
140 name: 'diagnosisDoc', 140 name: 'diagnosisDoc',
141 component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index') 141 component: () => myImport('views/faultDiagnosis/components/diagnosisDoc/index')
142 }*/ 142 }*/
  143 + ,{
  144 + path: '/vue3/portSense',
  145 + name: 'portSense',
  146 + component: () => myImport('views/portSense/index')
  147 + }
143 ]; 148 ];
144 149
145 // hash模式： createWebHashHistory 150 // hash模式： createWebHashHistory