监控策略、拓扑图、资源分组等
This commit is contained in:
		@@ -70,6 +70,15 @@ export function listTopology(query) {
 | 
			
		||||
    data: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
// 查询all列表
 | 
			
		||||
export function listAllTopology(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/system/management/getListChart',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 查询资源注册详细
 | 
			
		||||
export function getTopology(Id) {
 | 
			
		||||
  return request({
 | 
			
		||||
@@ -152,6 +161,14 @@ export function delGroup(Ids) {
 | 
			
		||||
    method: 'delete'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
// 包含设备向右移动校验
 | 
			
		||||
export function exitsResourceById(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/system/group/exitsResourceById',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
// 包含设备查询
 | 
			
		||||
export function resNameList() {
 | 
			
		||||
  return request({
 | 
			
		||||
@@ -175,6 +192,14 @@ export function getMonitorTemp(Id) {
 | 
			
		||||
    method: 'get'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
// 查询资源监控项
 | 
			
		||||
export function getMonitorTempList(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/rocketmq/initialMonitorItem/list',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 新增资源注册
 | 
			
		||||
export function addMonitorTemp(data) {
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/level1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/level1.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 12 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/level2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/level2.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 7.9 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/level2True.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/level2True.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 1.2 MiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/level3.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/level3.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 3.2 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/level3True.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/level3True.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 3.5 MiB  | 
@@ -1,12 +1,13 @@
 | 
			
		||||
<template>
 | 
			
		||||
    <div>
 | 
			
		||||
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" class="demo-ruleForm">
 | 
			
		||||
      {{config && config.key}}
 | 
			
		||||
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" :key="config && config.key" class="demo-ruleForm">
 | 
			
		||||
        <template v-for="(formItem,index) of formList">
 | 
			
		||||
          <h4 v-if="formItem && formItem.config && formItem.config.title" class="form-header h4">{{formItem.config.title}}</h4>
 | 
			
		||||
          <el-row>
 | 
			
		||||
            <el-col v-for="(formVal,key,index) of formItem['controls']" :span="formVal.span" v-if="!formVal.hidden" :class="formItem.config.colSpan" :style="formVal.style">
 | 
			
		||||
              <el-form-item
 | 
			
		||||
                :key="index"
 | 
			
		||||
                :key="config && config.key ? `${config && config.key}-${key}` : `${key}`"
 | 
			
		||||
                :prop="key"
 | 
			
		||||
                :required="formVal.required">
 | 
			
		||||
                <template #label>
 | 
			
		||||
@@ -135,7 +136,7 @@
 | 
			
		||||
                    :data="formVal.options"
 | 
			
		||||
                    :disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
 | 
			
		||||
                    :placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? formVal.placeholder || `请输入${formVal.label}` : null"
 | 
			
		||||
                    @[formVal.eventName]="(val) => handleChange(key,val,formVal)"
 | 
			
		||||
                    @[formVal.eventName]="(val,option) => handleChange(key,val,option)"
 | 
			
		||||
                  ></el-transfer>
 | 
			
		||||
                </template>
 | 
			
		||||
 | 
			
		||||
@@ -199,7 +200,14 @@
 | 
			
		||||
        },
 | 
			
		||||
        deep: true,
 | 
			
		||||
        immediate: true
 | 
			
		||||
      }
 | 
			
		||||
      },
 | 
			
		||||
      // formList: {
 | 
			
		||||
      //   handler(val) {
 | 
			
		||||
      //     this.initFormData();
 | 
			
		||||
      //   },
 | 
			
		||||
      //   deep: true,
 | 
			
		||||
      //   immediate: true
 | 
			
		||||
      // }
 | 
			
		||||
    },
 | 
			
		||||
    methods: {
 | 
			
		||||
      // 初始化表单数据
 | 
			
		||||
 
 | 
			
		||||
@@ -11,7 +11,7 @@
 | 
			
		||||
        </el-row>
 | 
			
		||||
        <!-- 表格数据 -->
 | 
			
		||||
        <el-table v-loading="loading" :data="tableList" ref="selChangeList" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
 | 
			
		||||
            <el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" align="center" />
 | 
			
		||||
            <el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" :selectable="() => config && config.selectable ? false : true" align="center" />
 | 
			
		||||
            <!--      展开列内容        -->
 | 
			
		||||
            <el-table-column v-if="config && config.expand" type="expand">
 | 
			
		||||
              <template #default="props">
 | 
			
		||||
 
 | 
			
		||||
@@ -269,6 +269,7 @@ export const dynamicRoutes = [
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
  // 资源拓扑
 | 
			
		||||
  {
 | 
			
		||||
    path: '/disRevenue/resource/topology/edit',
 | 
			
		||||
    component: Layout,
 | 
			
		||||
@@ -279,7 +280,21 @@ export const dynamicRoutes = [
 | 
			
		||||
        path: 'index/:id?',
 | 
			
		||||
        component: () => import('@/views/disRevenue/resource/topology/details'),
 | 
			
		||||
        name: 'TopologyEdit',
 | 
			
		||||
        meta: { title: '交换机信息', activeMenu: '/disRevenue/resource/topology' }
 | 
			
		||||
        meta: { title: '拓扑信息', activeMenu: '/disRevenue/resource/topology' }
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    path: '/disRevenue/resource/topology/gplot',
 | 
			
		||||
    component: Layout,
 | 
			
		||||
    hidden: true,
 | 
			
		||||
    permissions: ['disRevenue:resource:topology:gplot'],
 | 
			
		||||
    children: [
 | 
			
		||||
      {
 | 
			
		||||
        path: 'index/:id?',
 | 
			
		||||
        component: () => import('@/views/disRevenue/resource/topology/gplot'),
 | 
			
		||||
        name: 'TopologyGplot',
 | 
			
		||||
        meta: { title: '拓扑展示', activeMenu: '/disRevenue/resource/topology' }
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
@@ -472,7 +487,7 @@ export const dynamicRoutes = [
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
  // 资源远程管理
 | 
			
		||||
  // 资源远程管理---脚本执行结果
 | 
			
		||||
  {
 | 
			
		||||
    path: '/disRevenue/resource/remoteManage/view',
 | 
			
		||||
    component: Layout,
 | 
			
		||||
@@ -483,7 +498,7 @@ export const dynamicRoutes = [
 | 
			
		||||
        path: ':id?',
 | 
			
		||||
        component: () => import('@/views/disRevenue/resource/remoteManage/remoteManageView'),
 | 
			
		||||
        name: 'remoteManageView',
 | 
			
		||||
        meta: { title: '文件管理信息', activeMenu: '/disRevenue/resource/remoteManage' }
 | 
			
		||||
        meta: { title: '脚本执行结果信息', activeMenu: '/disRevenue/resource/remoteManage' }
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
@@ -1,12 +1,12 @@
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="app-container">
 | 
			
		||||
        <Form :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
 | 
			
		||||
        <Form ref="formRes" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup name="Handle">
 | 
			
		||||
  import Form from '@/components/form/index.vue';
 | 
			
		||||
  import {addGroup, getGroup, updateGroup, resNameList} from "@/api/disRevenue/resource"
 | 
			
		||||
  import {addGroup, getGroup, updateGroup, resNameList,exitsResourceById} from "@/api/disRevenue/resource"
 | 
			
		||||
  export default {
 | 
			
		||||
    name: 'GroupDetails',
 | 
			
		||||
    components: {Form},
 | 
			
		||||
@@ -14,7 +14,8 @@
 | 
			
		||||
      return {
 | 
			
		||||
        ruleForm: {},
 | 
			
		||||
        formList: [],
 | 
			
		||||
        paramsData: {}
 | 
			
		||||
        paramsData: {},
 | 
			
		||||
        includedDevicesList: {},
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    created() {
 | 
			
		||||
@@ -34,7 +35,7 @@
 | 
			
		||||
            id: {label: 'ID',hidden: true},
 | 
			
		||||
            groupName: {label: '名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
 | 
			
		||||
            description: {label: '描述', span: 24, type: 'textarea'},
 | 
			
		||||
            includedDevices: {label: '包含设备', span: 24, type: 'transfer',options: []}
 | 
			
		||||
            includedDevicesId: {label: '包含设备', span: 24, type: 'transfer',options: [], eventName: 'change'}
 | 
			
		||||
          }
 | 
			
		||||
        }];
 | 
			
		||||
      },
 | 
			
		||||
@@ -42,8 +43,9 @@
 | 
			
		||||
      getFormDataList(id) {
 | 
			
		||||
        getGroup(id).then(val => {
 | 
			
		||||
          if (val && val.data) {
 | 
			
		||||
            if (val.data && val.data['includedDevices']) {
 | 
			
		||||
              val.data['includedDevices'] = val.data['includedDevices'].split(',');
 | 
			
		||||
            if (val.data && val.data['includedDevicesId']) {
 | 
			
		||||
              let newArr = val.data['includedDevicesId'].split(',');
 | 
			
		||||
              val.data['includedDevicesId'] = newArr.map(id => Number(id));
 | 
			
		||||
            }
 | 
			
		||||
            this.ruleForm = val.data;
 | 
			
		||||
          }
 | 
			
		||||
@@ -54,19 +56,24 @@
 | 
			
		||||
      // 包含设备
 | 
			
		||||
      getResNameList() {
 | 
			
		||||
        resNameList().then(val => {
 | 
			
		||||
          this.formList[0].controls['includedDevices']['options']= val && val.map(item => {
 | 
			
		||||
            return Object.assign({label: item.resourceName, key: item.resourceName});
 | 
			
		||||
          if (val) {
 | 
			
		||||
            this.formList[0].controls['includedDevicesId']['options']= val && val.map(item => {
 | 
			
		||||
              this.includedDevicesList[item.id] = item;
 | 
			
		||||
              return Object.assign({label: item.resourceName, key: item.id});
 | 
			
		||||
            });
 | 
			
		||||
          }
 | 
			
		||||
        }).catch(() => {
 | 
			
		||||
          this.$modal.msgError("操作失败")
 | 
			
		||||
        });
 | 
			
		||||
      },
 | 
			
		||||
      // 监听事件
 | 
			
		||||
      callback(result, dataVal, formVal) {
 | 
			
		||||
        console.log('result===',formVal);
 | 
			
		||||
        if (result && result.fnCode) {
 | 
			
		||||
          switch (result.fnCode) {
 | 
			
		||||
            case 'submit':
 | 
			
		||||
              dataVal['includedDevices'] = dataVal['includedDevices'].join();
 | 
			
		||||
              dataVal['includedDevicesName'] = (dataVal['includedDevicesId'].map(id => this.includedDevicesList[id].resourceName)).join();
 | 
			
		||||
              dataVal['includedDevicesId'] = dataVal['includedDevicesId'].join();
 | 
			
		||||
              let fnType = addGroup;
 | 
			
		||||
              if (dataVal && dataVal.id) {
 | 
			
		||||
                fnType = updateGroup;
 | 
			
		||||
@@ -81,6 +88,20 @@
 | 
			
		||||
            case 'cancle':
 | 
			
		||||
              this.$router.push("/resource/group");
 | 
			
		||||
              break;
 | 
			
		||||
            case 'includedDevicesId':
 | 
			
		||||
              // if (formVal && formVal === 'right') {
 | 
			
		||||
              //   exitsResourceById({resourceIds: dataVal.join(',')}).then(res => {
 | 
			
		||||
              //     console.log('res=',res.msg);
 | 
			
		||||
              //     if (res.msg) {
 | 
			
		||||
              //       let content = '<p style="font-size: 1rem;font-weight: 600;">资源从其他分组移动到此组</p>' +
 | 
			
		||||
              //         '<p style="height: 0px;margin:10px 0 50px;">资源移动到此组后,将在原来到组中消失,相关的监控策略也会消失</p>';
 | 
			
		||||
              //       this.$modal.confirm(content).then(() => {
 | 
			
		||||
              //
 | 
			
		||||
              //       }).catch(() => {});
 | 
			
		||||
              //     }
 | 
			
		||||
              //   });
 | 
			
		||||
              // }
 | 
			
		||||
              break;
 | 
			
		||||
            default:
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 
 | 
			
		||||
@@ -50,7 +50,7 @@
 | 
			
		||||
            id: { label: `ID`, visible: false },
 | 
			
		||||
            groupName: { label: `名称`, visible: true},
 | 
			
		||||
            description: { label: `描述`, visible: true},
 | 
			
		||||
            includedDevices: { label: `包含设备`, visible: true },
 | 
			
		||||
            includedDevicesName: { label: `包含设备`, visible: true },
 | 
			
		||||
            createTime: { label: `创建时间`},
 | 
			
		||||
            updateTime: { label: `修改时间`, visible: true}
 | 
			
		||||
          },
 | 
			
		||||
 
 | 
			
		||||
@@ -14,36 +14,36 @@
 | 
			
		||||
        </div>
 | 
			
		||||
        <!--    active:2    -->
 | 
			
		||||
        <div v-show="active === 1">
 | 
			
		||||
          <el-tabs type="border-card">
 | 
			
		||||
          <el-tabs type="border-card" v-model="activeTypeName" @tab-click="handleClick">
 | 
			
		||||
            <!--    2-1    -->
 | 
			
		||||
            <el-tab-pane label="Linux系统">
 | 
			
		||||
              <el-tabs v-model="linuxActiveName">
 | 
			
		||||
            <el-tab-pane label="Linux系统" name="linux">
 | 
			
		||||
              <el-tabs v-model="linuxActiveName" @tab-click="handleClick">
 | 
			
		||||
                <!--    2-1-1    -->
 | 
			
		||||
                <el-tab-pane label="监控项" name="first">
 | 
			
		||||
                <el-tab-pane label="监控项" name="monitorItem">
 | 
			
		||||
                  <el-collapse v-model="activeNames">
 | 
			
		||||
                    <el-collapse-item v-for="(item,index) of linuxSystem.monitorList['dataList']" :title="item.title" :name="index">
 | 
			
		||||
                    <el-collapse-item v-for="(item,index) of linuxSystem.monitorItem['dataList']" :title="item.title" :name="index">
 | 
			
		||||
                      <template slot="title">
 | 
			
		||||
                        {{item.title}}
 | 
			
		||||
                        <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" class="ml20" @change="(checked) => handleCheckAllChange(checked,item)">全选</el-checkbox>
 | 
			
		||||
                        <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="item.disabled" class="ml20" @change="(checked) => handleCheckAllChange(checked,item)">全选</el-checkbox>
 | 
			
		||||
                      </template>
 | 
			
		||||
                      <el-checkbox-group v-model="checkParams[item.modelName]" @change="(checkValList) => handleCheckedCitiesChange(checkValList, item)" style="padding: 0 20px;">
 | 
			
		||||
                        <el-checkbox v-for="city of item.checkList" :label="city.id" :key="city.id" class="w45 mt10 mb10">
 | 
			
		||||
                          <span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
 | 
			
		||||
                          <span>{{city.towName}}</span>
 | 
			
		||||
                        <el-checkbox v-for="city of item.checkList" :label="city.id" :key="city.id" :disabled="item.disabled" class="w45 mt10 mb10">
 | 
			
		||||
                          <span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
 | 
			
		||||
                          <span>{{city.metricName}}</span>
 | 
			
		||||
                        </el-checkbox>
 | 
			
		||||
                      </el-checkbox-group>
 | 
			
		||||
                    </el-collapse-item>
 | 
			
		||||
                  </el-collapse>
 | 
			
		||||
                </el-tab-pane>
 | 
			
		||||
                <!--    2-1-2    -->
 | 
			
		||||
                <el-tab-pane label="自动发现项" name="second">
 | 
			
		||||
                <el-tab-pane label="自动发现项" name="autodiscoverItem">
 | 
			
		||||
                  <el-collapse v-model="activeNames">
 | 
			
		||||
                    <el-collapse-item v-for="(item,index) of linuxSystem.autoFindList['dataList']" :title="item.title" :name="index">
 | 
			
		||||
                    <el-collapse-item v-for="(item,index) of linuxSystem.autodiscoverItem['dataList']" :title="item.title" :name="index">
 | 
			
		||||
                      <div style="display: flex;justify-content: center;">
 | 
			
		||||
                        <el-checkbox-group v-model="checkParams[item.modelName]" style="padding: 0 20px;">
 | 
			
		||||
                          <el-checkbox v-for="city of item.checkList" :label="city.id" :key="city.id" class="mt10 mb10 disBlock">
 | 
			
		||||
                            <span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
 | 
			
		||||
                            <span>{{city.towName}}</span>
 | 
			
		||||
                          <el-checkbox v-for="city of item.checkList" :disabled="item.disabled" :label="city.id" :key="city.id" class="mt10 mb10 disBlock">
 | 
			
		||||
                            <span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
 | 
			
		||||
                            <span>{{city.metricName}}</span>
 | 
			
		||||
                          </el-checkbox>
 | 
			
		||||
                        </el-checkbox-group>
 | 
			
		||||
                      </div>
 | 
			
		||||
@@ -53,7 +53,7 @@
 | 
			
		||||
              </el-tabs>
 | 
			
		||||
            </el-tab-pane>
 | 
			
		||||
            <!--    2-2    -->
 | 
			
		||||
            <el-tab-pane label="华为交换机">
 | 
			
		||||
            <el-tab-pane label="华为交换机" name="switch">
 | 
			
		||||
              <span slot="label">
 | 
			
		||||
                华为交换机
 | 
			
		||||
                <el-tooltip trigger="click" effect="dark" placement="top">
 | 
			
		||||
@@ -61,18 +61,18 @@
 | 
			
		||||
                  <i class="el-icon-question"></i>
 | 
			
		||||
                </el-tooltip>
 | 
			
		||||
              </span>
 | 
			
		||||
              <el-tabs v-model="hwActiveName">
 | 
			
		||||
              <el-tabs v-model="hwActiveName" @tab-click="handleClick">
 | 
			
		||||
                <!--    2-2-1    -->
 | 
			
		||||
                <el-tab-pane label="监控项" name="first">
 | 
			
		||||
                <el-tab-pane label="监控项" name="monitorItem">
 | 
			
		||||
                  <template v-for="(item,index) of monitorTable['nodeOne']">
 | 
			
		||||
                    <TableList :ref="`tableRef_${item.config.tableKey}`" :config="item.config" :columns="item.columns" :queryParams="{total: 0}" :tableList="item.tableList"  @fnClick="callback"></TableList>
 | 
			
		||||
                    <TableList :ref="`tableRef_${item.config.tableKey}`" :config="item.config" :columns="switchColumns" :queryParams="{total: 0}" :tableList="item.tableList"  @fnClick="callback"></TableList>
 | 
			
		||||
                  </template>
 | 
			
		||||
                </el-tab-pane>
 | 
			
		||||
                <!--    2-2-2    -->
 | 
			
		||||
                <el-tab-pane label="自动发现项" name="second">
 | 
			
		||||
                <el-tab-pane label="自动发现项" name="autodiscoverItem">
 | 
			
		||||
                  <el-collapse v-model="activeNames">
 | 
			
		||||
                    <el-collapse-item v-for="(val,index) of monitorTable['nodeTow']" :title="val.title" :name="index">
 | 
			
		||||
                      <TableList :ref="`tableRef_${val.config.tableKey}`" :config="val.config" :columns="val.columns" :queryParams="{total: 0}" :tableList="val.tableList"  @fnClick="callback"></TableList>
 | 
			
		||||
                      <TableList :class="val && val.classType" :ref="`tableRef_${val.config.tableKey}`" :config="val.config" :columns="switchColumns" :queryParams="{total: 0}" :tableList="val.tableList"  @fnClick="callback"></TableList>
 | 
			
		||||
                    </el-collapse-item>
 | 
			
		||||
                  </el-collapse>
 | 
			
		||||
                </el-tab-pane>
 | 
			
		||||
@@ -96,6 +96,7 @@
 | 
			
		||||
<script setup>
 | 
			
		||||
  import Form from '@/components/form/index.vue';
 | 
			
		||||
  import TableList from "@/components/table/index.vue"
 | 
			
		||||
  import {getMonitorTempList} from "@/api/disRevenue/resource"
 | 
			
		||||
  import MonitorTempView from './view'
 | 
			
		||||
  export default {
 | 
			
		||||
    name: 'MonitorTempDetails',
 | 
			
		||||
@@ -103,11 +104,13 @@
 | 
			
		||||
    data() {
 | 
			
		||||
      return {
 | 
			
		||||
        active: 0,
 | 
			
		||||
        activeNames: [0, 1],
 | 
			
		||||
        linuxActiveName: 'first',
 | 
			
		||||
        hwActiveName: 'first',
 | 
			
		||||
        activeNames: [0, 1,2,3],
 | 
			
		||||
        activeTypeName: 'linux',  // 两个系统
 | 
			
		||||
        linuxActiveName: 'monitorItem', // linux系统下的两个栏
 | 
			
		||||
        hwActiveName: 'monitorItem',  // 华为交换机下的两个栏
 | 
			
		||||
        dataListMap: {},  // 存储监控字段
 | 
			
		||||
        checkAllParams: {},
 | 
			
		||||
        checkParams: {cpu: [], other: [], mount: [], netPort:[]},
 | 
			
		||||
        checkParams: {cpu: [], other: [], point: [], net:[], disk: [], docker: []},
 | 
			
		||||
        allSelectedData: {},
 | 
			
		||||
        synthesisList: {},
 | 
			
		||||
        // 第一节点
 | 
			
		||||
@@ -129,10 +132,10 @@
 | 
			
		||||
        }],
 | 
			
		||||
        // 第二节点 1栏
 | 
			
		||||
        linuxSystem: {
 | 
			
		||||
          monitorList: {
 | 
			
		||||
          monitorItem: {
 | 
			
		||||
            firstTitle: 'Linux系统', title: '监控项',
 | 
			
		||||
            dataList: [{
 | 
			
		||||
              title: 'CPU监控', modelName: 'cpu', checkAll: false, isIndeterminate: false,
 | 
			
		||||
              title: 'CPU监控', modelName: 'cpu', checkAll: true, isIndeterminate: false, disabled: true,
 | 
			
		||||
              checkList: [
 | 
			
		||||
                {id: '1', name: 'system.cpu.load.avg1', towName: 'CPU的1分钟负载'},
 | 
			
		||||
                {id: '2', name: 'system.cpu.util.normal', towName: 'CPU正常运行时间'},
 | 
			
		||||
@@ -142,97 +145,69 @@
 | 
			
		||||
              ]},
 | 
			
		||||
              {
 | 
			
		||||
                title: '其他监控', modelName: 'other', checkAll: false, isIndeterminate: false,
 | 
			
		||||
                checkList: [
 | 
			
		||||
                  {id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间(字节)'},
 | 
			
		||||
                  {id: '7', name: 'proc.num.run', towName: '正在运行的进程数'},
 | 
			
		||||
                  {id: '8', name: 'memory.utilization', towName: '内存利用率'},
 | 
			
		||||
                  {id: '9', name: 'system.users.num', towName: '登录用户数'},
 | 
			
		||||
                  {id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比'},
 | 
			
		||||
                ]
 | 
			
		||||
                checkList: []
 | 
			
		||||
              }
 | 
			
		||||
            ],
 | 
			
		||||
          },
 | 
			
		||||
          autoFindList: {
 | 
			
		||||
          autodiscoverItem: {
 | 
			
		||||
            firstTitle: 'Linux系统', title: '自动发现项',
 | 
			
		||||
            dataList:[{
 | 
			
		||||
              title: '发现挂载文件系统', modelName: 'mount', checkAll: false, isIndeterminate: false,
 | 
			
		||||
              checkList: [
 | 
			
		||||
                {id: '1', name: 'vfs.fs.type', towName: '某个挂载点(如/)的文件系统类型'},
 | 
			
		||||
                {id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点(如/)的可用空间'},
 | 
			
		||||
                {id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点(如/)的总空间'},
 | 
			
		||||
                {id: '4', name: 'vfs.fs.util', towName: '某个挂载点(如/)的空间利用率'},
 | 
			
		||||
              ]},
 | 
			
		||||
              {
 | 
			
		||||
                title: '发现网络接口', modelName: 'netPort', checkAll: false, isIndeterminate: false,
 | 
			
		||||
                checkList: [
 | 
			
		||||
                  {id: '1', name: 'net.if.in.dropped', towName: '某个网络接口(如interface eth0)的入站丢包'},
 | 
			
		||||
                  {id: '2', name: 'net.if.out.dropped', towName: '某个网络接口(如interface eth0)的出站丢包'},
 | 
			
		||||
                  {id: '3', name: 'net.if.out', towName: '某个网络接口(如interface eth0)的发送流量'},
 | 
			
		||||
                  {id: '4', name: 'net.if.out.type', towName: '某个网络接口(如interface eth0)的接口类型'},
 | 
			
		||||
                  {id: '5', name: 'net.if.in', towName: '某个网络接口(如interface eth0)的接收流量'}
 | 
			
		||||
              title: '发现挂载文件系统', modelName: 'point', checkAll: false, isIndeterminate: false, disabled: true,
 | 
			
		||||
              checkList: []
 | 
			
		||||
              }, {
 | 
			
		||||
                title: '发现网络接口', modelName: 'net', checkAll: false, isIndeterminate: false, disabled: true,
 | 
			
		||||
                checkList: []
 | 
			
		||||
              }, {
 | 
			
		||||
                  title: '发现硬盘设备', modelName: 'disk', checkAll: false, isIndeterminate: false, disabled: true,
 | 
			
		||||
                  checkList: []
 | 
			
		||||
              }, {
 | 
			
		||||
                  title: '发现docker', modelName: 'docker', checkAll: false, isIndeterminate: false, disabled: true,
 | 
			
		||||
                  checkList: []
 | 
			
		||||
              }
 | 
			
		||||
            ]
 | 
			
		||||
            }]
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
        // 第二节点 2栏 列显隐信息
 | 
			
		||||
        switchColumns: {
 | 
			
		||||
          id: { label: `ID`, visible: false },
 | 
			
		||||
          metricKey: { label: `监控标识`, visible: true},
 | 
			
		||||
          metricName: { label: `监控名称`, visible: true},
 | 
			
		||||
          oid: { label: `监控OID`, visible: true },
 | 
			
		||||
          filterValue: { label: `过滤值`, visible: true},
 | 
			
		||||
          monitorDescription: { label: `自动监控说明`, visible: true}
 | 
			
		||||
        },
 | 
			
		||||
        monitorTable: {
 | 
			
		||||
          nodeOne: [{
 | 
			
		||||
            firstTitle: '华为交换机', secondTitle: '监控项',
 | 
			
		||||
            columns: {
 | 
			
		||||
              id: { label: `ID`, visible: false },
 | 
			
		||||
              ident: { label: `监控标识`, visible: true},
 | 
			
		||||
              name: { label: `监控名称`, visible: true},
 | 
			
		||||
              monitor: { label: `监控OID`, visible: true },
 | 
			
		||||
              filter: { label: `过滤值`},
 | 
			
		||||
              explain: { label: `监控说明`, visible: true}
 | 
			
		||||
            },
 | 
			
		||||
            tableList: [
 | 
			
		||||
              {id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
              {id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
 | 
			
		||||
              {id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
              {id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
 | 
			
		||||
              {id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
            ],
 | 
			
		||||
            config: {tableKey: 'web'}
 | 
			
		||||
            tableList: [],
 | 
			
		||||
            config: {tableKey: 'web', colTopHiddenIcon: true}
 | 
			
		||||
          }],
 | 
			
		||||
          nodeTow: [
 | 
			
		||||
            {
 | 
			
		||||
              firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现',
 | 
			
		||||
              columns: {
 | 
			
		||||
                id: { label: `ID`, visible: false },
 | 
			
		||||
                ident: { label: `监控标识`, visible: true},
 | 
			
		||||
                name: { label: `监控名称`, visible: true},
 | 
			
		||||
                monitor: { label: `监控OID`, visible: true },
 | 
			
		||||
                filter: { label: `过滤值`},
 | 
			
		||||
                explain: { label: `监控说明`, visible: true}
 | 
			
		||||
              },
 | 
			
		||||
              tableList: [
 | 
			
		||||
                {id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
                {id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
 | 
			
		||||
                {id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
                {id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
 | 
			
		||||
                {id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
              ],
 | 
			
		||||
              config: {tableKey: 'web1'}
 | 
			
		||||
              firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', classType: 'checkHidden',
 | 
			
		||||
              tableList: [],
 | 
			
		||||
              config: {tableKey: 'web1', colTopHiddenIcon: true, selectable: true}
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
              firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现',
 | 
			
		||||
              columns: {
 | 
			
		||||
                id: { label: `ID`, visible: false },
 | 
			
		||||
                ident: { label: `监控标识`, visible: true},
 | 
			
		||||
                name: { label: `监控名称`, visible: true},
 | 
			
		||||
                monitor: { label: `监控OID`, visible: true },
 | 
			
		||||
                filter: { label: `过滤值`},
 | 
			
		||||
                explain: { label: `监控说明`, visible: true}
 | 
			
		||||
              firstTitle: '华为交换机', secondTitle: '自动发现项',title: 'MPU发现', classType: 'checkHidden',
 | 
			
		||||
              tableList: [],
 | 
			
		||||
              config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
 | 
			
		||||
            },
 | 
			
		||||
              tableList: [
 | 
			
		||||
                {id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
                {id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
 | 
			
		||||
                {id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
                {id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
 | 
			
		||||
                {id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
              ],
 | 
			
		||||
              config: {tableKey: 'web2'}
 | 
			
		||||
            // {
 | 
			
		||||
            //   firstTitle: '华为交换机', secondTitle: '自动发现项',title: '电源发现', classType: 'checkHidden',
 | 
			
		||||
            //   tableList: [
 | 
			
		||||
            //     {id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
            //     {id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
 | 
			
		||||
            //     {id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
            //     {id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
 | 
			
		||||
            //     {id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
 | 
			
		||||
            //   ],
 | 
			
		||||
            //   config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
 | 
			
		||||
            // },
 | 
			
		||||
            {
 | 
			
		||||
              firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', classType: 'checkHidden',
 | 
			
		||||
              tableList: [],
 | 
			
		||||
              config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
 | 
			
		||||
            },
 | 
			
		||||
        ]},
 | 
			
		||||
      }
 | 
			
		||||
@@ -250,12 +225,58 @@
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    methods: {
 | 
			
		||||
      fnGetMonitorTempList(params) {
 | 
			
		||||
        let towType = this.hwActiveName;
 | 
			
		||||
        towType = this.linuxActiveName;
 | 
			
		||||
        getMonitorTempList(params).then(res => {
 | 
			
		||||
          // console.log('data====',res);
 | 
			
		||||
          if (this.activeTypeName === 'linux') {
 | 
			
		||||
            if (this.linuxActiveName === 'monitorItem'){
 | 
			
		||||
              this.linuxSystem[this.linuxActiveName].dataList[0].checkList = res.data && res.data.cpu;
 | 
			
		||||
              this.linuxSystem[this.linuxActiveName].dataList[1].checkList = res.data && res.data.other;
 | 
			
		||||
              // 全选操作
 | 
			
		||||
              this.handleCheckAllChange(true, this.linuxSystem[this.linuxActiveName].dataList[0]);
 | 
			
		||||
            } else {
 | 
			
		||||
              this.checkParams.point = res.data.point.map(item => item.id);
 | 
			
		||||
              this.checkParams.net = res.data.net.map(item => item.id);
 | 
			
		||||
              this.checkParams.disk = res.data.disk.map(item => item.id);
 | 
			
		||||
              this.checkParams.docker = res.data.docker.map(item => item.id);
 | 
			
		||||
              this.linuxSystem[this.linuxActiveName].dataList[0].checkList = res.data && res.data.point;
 | 
			
		||||
              this.linuxSystem[this.linuxActiveName].dataList[1].checkList = res.data && res.data.net;
 | 
			
		||||
              this.linuxSystem[this.linuxActiveName].dataList[2].checkList = res.data && res.data.disk;
 | 
			
		||||
              this.linuxSystem[this.linuxActiveName].dataList[3].checkList = res.data && res.data.docker;
 | 
			
		||||
            }
 | 
			
		||||
          } else {
 | 
			
		||||
            if (params.itemType === 'monitorItem') {
 | 
			
		||||
              let defaultNum = 0;
 | 
			
		||||
              let relevance = {id: []};
 | 
			
		||||
              res.data.system.forEach((item,index) => {
 | 
			
		||||
                if (item && item.filterValue === '9') {
 | 
			
		||||
                  defaultNum = index;
 | 
			
		||||
                }
 | 
			
		||||
                if (item && item.monitorDescription === '如果需要设备索引,当选中此项的时候,设备索引项自动选中') {
 | 
			
		||||
                  relevance['id'].push(item.id);
 | 
			
		||||
                }
 | 
			
		||||
              });
 | 
			
		||||
              res.data.system[defaultNum]['relevance'] = relevance;
 | 
			
		||||
              this.monitorTable.nodeOne[0].tableList = res.data.system;
 | 
			
		||||
            } else {
 | 
			
		||||
              this.monitorTable.nodeTow[0].tableList = res.data.netport;
 | 
			
		||||
              this.monitorTable.nodeTow[1].tableList = res.data.lightmodule;
 | 
			
		||||
              this.monitorTable.nodeTow[2].tableList = res.data.fan;
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
      },
 | 
			
		||||
      async next(num) {
 | 
			
		||||
        console.log('num====',num,'this.active===',this.active);
 | 
			
		||||
        if (num === '-1') {
 | 
			
		||||
          this.active--;
 | 
			
		||||
        } else {
 | 
			
		||||
          if (this.active === 0 && !await this.fnFormValid()) {
 | 
			
		||||
            return;
 | 
			
		||||
          } else {
 | 
			
		||||
            this.handleClick();
 | 
			
		||||
          }
 | 
			
		||||
          if (this.active === 1) {
 | 
			
		||||
            this.selectAllChange();
 | 
			
		||||
@@ -263,6 +284,15 @@
 | 
			
		||||
          this.active++;
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      handleClick() {
 | 
			
		||||
        let params = {};
 | 
			
		||||
        if (this.activeTypeName === 'linux') {
 | 
			
		||||
          params = {resourceType: this.activeTypeName, itemType: this.linuxActiveName};
 | 
			
		||||
        } else {
 | 
			
		||||
          params = {resourceType: this.activeTypeName, itemType: this.hwActiveName};
 | 
			
		||||
        }
 | 
			
		||||
        this.fnGetMonitorTempList(params);
 | 
			
		||||
      },
 | 
			
		||||
      // form验证
 | 
			
		||||
      fnFormValid() {
 | 
			
		||||
        return new Promise((resolve) => {
 | 
			
		||||
@@ -349,4 +379,7 @@
 | 
			
		||||
    padding-left: 20px;
 | 
			
		||||
    font-size: 1rem;
 | 
			
		||||
  }
 | 
			
		||||
  ::v-deep .checkHidden .el-table .el-table__fixed .el-table__header-wrapper .el-table__header .el-table-column--selection .el-checkbox__input {
 | 
			
		||||
    display: none!important;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -34,7 +34,7 @@
 | 
			
		||||
      if (this.paramsData && this.paramsData.id) {
 | 
			
		||||
        this.getFormDataList(this.paramsData.id);
 | 
			
		||||
      } else {
 | 
			
		||||
        this.fnFormList({});
 | 
			
		||||
        this.fnFormList(this.ruleForm);
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    methods: {
 | 
			
		||||
@@ -64,7 +64,7 @@
 | 
			
		||||
            resourceUserName: {label: '用户名', span: 12, type: 'input', hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
 | 
			
		||||
            resourcePwd: {label: '密码', span: 12, type: 'input', hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
 | 
			
		||||
            description: {label: '描述', span: 12, type: 'textarea',disabled: objVal && objVal.registrationStatus === '1' ? true : false},
 | 
			
		||||
            agentVersion: {label: 'AGENT版本', span: 12, type: 'input',disabled: objVal && objVal.id ? true : false},
 | 
			
		||||
            agentVersion: {label: 'AGENT版本', span: 12, type: 'input',hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.id ? true : false},
 | 
			
		||||
            // customerName: {label: '设备业务客户', span: 12, type: 'input'},
 | 
			
		||||
            // serviceNumber: {label: '业务号', span: 12, type: 'input'},
 | 
			
		||||
            agentWeek: {label: 'Agent与交换机心跳检测周期', span: 12, type: 'input', disabled: true},
 | 
			
		||||
@@ -92,11 +92,13 @@
 | 
			
		||||
                this.formList[0].controls.resourceVersion['hidden'] = false;
 | 
			
		||||
                this.formList[0].controls.rwPermission['hidden'] = false;
 | 
			
		||||
                this.formList[0].controls.snmpCollectAddr['hidden'] = false;
 | 
			
		||||
                this.formList[0].controls.snmpCollectPort['hidden'] = false;
 | 
			
		||||
                this.formList[0].controls.teamName['hidden'] = false;
 | 
			
		||||
              } else {
 | 
			
		||||
                this.formList[0].controls.resourceVersion['hidden'] = true;
 | 
			
		||||
                this.formList[0].controls.rwPermission['hidden'] = true;
 | 
			
		||||
                this.formList[0].controls.snmpCollectAddr['hidden'] = true;
 | 
			
		||||
                this.formList[0].controls.snmpCollectPort['hidden'] = true;
 | 
			
		||||
                this.formList[0].controls.teamName['hidden'] = true;
 | 
			
		||||
              }
 | 
			
		||||
              break;
 | 
			
		||||
 
 | 
			
		||||
@@ -3,8 +3,8 @@
 | 
			
		||||
    <div>
 | 
			
		||||
      <el-steps :active="active" finish-status="success">
 | 
			
		||||
        <el-step title="基本信息"></el-step>
 | 
			
		||||
        <el-step title="监控信息"></el-step>
 | 
			
		||||
        <el-step title="信息确认"></el-step>
 | 
			
		||||
        <el-step title="脚本策略"></el-step>
 | 
			
		||||
        <el-step title="策略确认"></el-step>
 | 
			
		||||
      </el-steps>
 | 
			
		||||
      <!--    内容区   -->
 | 
			
		||||
      <div style="margin-top: 30px;">
 | 
			
		||||
@@ -171,7 +171,8 @@
 | 
			
		||||
            index: this.addNum,
 | 
			
		||||
            controls: {
 | 
			
		||||
              id: {label: 'ID',hidden: true},
 | 
			
		||||
              localAddress: {label: `源文件${currentIndex + 1 + this.addNum}地址格式`, span: 12, type: 'radio', required: true, options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
 | 
			
		||||
              localAddress: {label: `源文件${currentIndex + 1 + this.addNum}地址格式`, span: 12, type: 'radio', required: true,
 | 
			
		||||
                warningTitle: '注意:当文件大小超过100M时,请选择【外网HTTP(S)】地址格式', options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
 | 
			
		||||
              btn: {label: '', span: 12, slotName: 'btnType', btnName: '删除', btnType: 'delete', parentKey: newKey},
 | 
			
		||||
              serverPort: {label: `源文件${currentIndex + 1 + this.addNum}地址`, span: 12, type: 'input'}
 | 
			
		||||
            },
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										152
									
								
								src/views/disRevenue/resource/topology/gplot.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										152
									
								
								src/views/disRevenue/resource/topology/gplot.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,152 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div style="width:100%;height: calc(100vh - 115px);margin: 30px auto 0;" class="textAlignCenter">
 | 
			
		||||
    <div class="w100">
 | 
			
		||||
      <el-input v-model="resName" placeholder="请输入你需要搜索的交换机名称或服务器节点名称入内容" style="width: 80%;" @keyup.enter.native="handleQuery"></el-input>
 | 
			
		||||
      <el-button type="primary" class="ml10" icon="Search" @click="handleQuery(1)">搜索</el-button>
 | 
			
		||||
      <el-button icon="Refresh" @click="handleQuery(2)">重置</el-button>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div id="gplotChart" class="w100 h100"></div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
  import * as echarts from 'echarts'
 | 
			
		||||
  import {resNameBtType, listAllTopology} from "@/api/disRevenue/resource"
 | 
			
		||||
  export default {
 | 
			
		||||
    name: 'gplot',
 | 
			
		||||
    data() {
 | 
			
		||||
      return {
 | 
			
		||||
        level1Img: require('@/assets/images/level1.png'),
 | 
			
		||||
        level2Img: require('@/assets/images/level2.png'),
 | 
			
		||||
        level3Img: require('@/assets/images/level3.png'),
 | 
			
		||||
        level2ImgTrue: require('@/assets/images/level2True.png'),
 | 
			
		||||
        level3ImgTrue: require('@/assets/images/level3True.png'),
 | 
			
		||||
        switchNameList: {},
 | 
			
		||||
        resName: '',
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    created() {
 | 
			
		||||
      this.switchList();
 | 
			
		||||
    },
 | 
			
		||||
    mounted() {
 | 
			
		||||
      // this.$nextTick(() => {
 | 
			
		||||
      //   this.getList();
 | 
			
		||||
      // })
 | 
			
		||||
    },
 | 
			
		||||
    methods: {
 | 
			
		||||
      // 获取详情
 | 
			
		||||
      getList(res,lightVal) {
 | 
			
		||||
        const gplotChartLine = echarts.init(document.getElementById('gplotChart'));
 | 
			
		||||
        let seriesNodes = [
 | 
			
		||||
            {
 | 
			
		||||
              id: 'cloud',
 | 
			
		||||
              name: '云',
 | 
			
		||||
              // symbolSize: 80,
 | 
			
		||||
              symbol: `image://${this.level1Img}`,
 | 
			
		||||
              symbolSize: [40, 40], // 图片宽高
 | 
			
		||||
              x: 250,
 | 
			
		||||
              y: 300
 | 
			
		||||
            },
 | 
			
		||||
        ];
 | 
			
		||||
        let links = [];
 | 
			
		||||
        if (res.params) {
 | 
			
		||||
          Object.keys(res.params).forEach((item,index) => {
 | 
			
		||||
            links.push({source: 'cloud', target: item, lineStyle: { width: 2 }});
 | 
			
		||||
            seriesNodes.push({
 | 
			
		||||
              id: item,
 | 
			
		||||
              name: item,
 | 
			
		||||
              // symbol: 'rect',
 | 
			
		||||
              // symbolSize: 60,
 | 
			
		||||
              symbol: `image://${lightVal && lightVal[item] ? this.level2ImgTrue : this.level2Img}`,
 | 
			
		||||
              symbolSize: [40, 40], // 图片宽高
 | 
			
		||||
              x: 400,
 | 
			
		||||
              y: 200 * (index + 1)
 | 
			
		||||
            });
 | 
			
		||||
            res.params[item].forEach((val,indexVal) => {
 | 
			
		||||
              if (val && val.serverName) {
 | 
			
		||||
                links.push({source: item, target: val.serverName, lineStyle: { width: 2 }});
 | 
			
		||||
                seriesNodes.push({
 | 
			
		||||
                  id: val.serverName,
 | 
			
		||||
                  name: val.serverName,
 | 
			
		||||
                  // symbol: 'rect',
 | 
			
		||||
                  // symbolSize: 60,
 | 
			
		||||
                  symbol: `image://${lightVal && lightVal[val.serverName] ? this.level3ImgTrue : this.level3Img}`,
 | 
			
		||||
                  symbolSize: [40, 40], // 图片宽高
 | 
			
		||||
                  x: 900,
 | 
			
		||||
                  y: 60 * (indexVal + 1)
 | 
			
		||||
                });
 | 
			
		||||
              }
 | 
			
		||||
            });
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
        let option = {
 | 
			
		||||
          title: {
 | 
			
		||||
            text: '',
 | 
			
		||||
            left: 'center',
 | 
			
		||||
          },
 | 
			
		||||
          tooltip: {},
 | 
			
		||||
          series: [
 | 
			
		||||
            {
 | 
			
		||||
              type: 'graph', // 关系图类型
 | 
			
		||||
              layout: 'none', // 关闭力导向布局,使用固定位置
 | 
			
		||||
              roam: true, // 不允许鼠标缩放和平移
 | 
			
		||||
              label: {
 | 
			
		||||
                show: false, // 显示节点标签
 | 
			
		||||
              },
 | 
			
		||||
              // 节点数据 - 增加了固定的x和y坐标
 | 
			
		||||
              nodes: seriesNodes,
 | 
			
		||||
              links: links
 | 
			
		||||
            },
 | 
			
		||||
          ],
 | 
			
		||||
        };
 | 
			
		||||
        gplotChartLine.setOption(option);
 | 
			
		||||
      },
 | 
			
		||||
      // 获取交换机下拉
 | 
			
		||||
      switchList(val) {
 | 
			
		||||
        let params = {};
 | 
			
		||||
        if (val && val.resourceName) {
 | 
			
		||||
          params = val;
 | 
			
		||||
        }
 | 
			
		||||
        listAllTopology(params).then(res => {
 | 
			
		||||
          let params = {};
 | 
			
		||||
          res && res.data.forEach(item => {
 | 
			
		||||
            if (params.hasOwnProperty(item.switchName)) {
 | 
			
		||||
              params[item.switchName].push(item);
 | 
			
		||||
            } else {
 | 
			
		||||
              params[item.switchName] = [item];
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
          if (val && val.resourceName) {
 | 
			
		||||
            let newParam = {};
 | 
			
		||||
            Object.keys(params).forEach(item => {
 | 
			
		||||
              newParam[item] = true;
 | 
			
		||||
              params[item].forEach(val => {
 | 
			
		||||
                newParam[val.serverName] = true;
 | 
			
		||||
              });
 | 
			
		||||
            });
 | 
			
		||||
            console.log('newParam==',newParam);
 | 
			
		||||
            this.getList(this.switchNameList,newParam);
 | 
			
		||||
          } else {
 | 
			
		||||
            this.switchNameList = {params: params};
 | 
			
		||||
            this.getList({params: params});
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
      },
 | 
			
		||||
      handleQuery(num){
 | 
			
		||||
        if (num === 2) {
 | 
			
		||||
          this.resName = '';
 | 
			
		||||
          this.switchList();
 | 
			
		||||
        } else {
 | 
			
		||||
          let params = {};
 | 
			
		||||
          if (this.resName) {
 | 
			
		||||
            params = {resourceName: this.resName};
 | 
			
		||||
          }
 | 
			
		||||
          this.switchList(params);
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
 | 
			
		||||
</style>
 | 
			
		||||
@@ -64,6 +64,7 @@
 | 
			
		||||
                {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'disRevenue:resource:topology:add'},
 | 
			
		||||
                {content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'disRevenue:resource:topology:detele'},
 | 
			
		||||
                {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:topology:export'},
 | 
			
		||||
                {content: '拓扑展示', fnCode: 'echarts', type: 'warning', icon: 'el-icon-picture-outline-round', hasPermi: 'disRevenue:resource:topology:echarts'},
 | 
			
		||||
              ],
 | 
			
		||||
              line: [
 | 
			
		||||
                {content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'disRevenue:resource:topology:edit'},
 | 
			
		||||
@@ -126,6 +127,14 @@
 | 
			
		||||
                  this.$modal.msgSuccess("删除成功")
 | 
			
		||||
                }).catch(() => {});
 | 
			
		||||
                break;
 | 
			
		||||
              case 'echarts':
 | 
			
		||||
                this.$router.push({
 | 
			
		||||
                  path:'/disRevenue/resource/topology/gplot/index',
 | 
			
		||||
                  query:{
 | 
			
		||||
                    id: rowData.id
 | 
			
		||||
                  }
 | 
			
		||||
                });
 | 
			
		||||
                break;
 | 
			
		||||
              case 'export':
 | 
			
		||||
                // let dataList = [];
 | 
			
		||||
                // Object.keys(this.columns).forEach(item => {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user