profitManage/src/views/disRevenue/resource/resMonitor/details.vue

<template>
  <div class="app-container app-viewContent">
    <Form :formList="formList" :ruleFormData="ruleForm" :config="{buttonGroup: []}" @fnClick="callback"></Form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="监控项" name="first">
        <ResMonitorDigitalSuper></ResMonitorDigitalSuper>
      </el-tab-pane>
      <el-tab-pane label="自动发现项" name="second">
        <ResMonitorDigitalAutoFind v-if="activeName === 'second'"></ResMonitorDigitalAutoFind>
      </el-tab-pane>
      <el-tab-pane label="告警信息" name="third">
        <TableList style="height: 500px" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="columns" :queryParams="queryParams" :tableList="tableList" @fnRenderList="getList"></TableList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
  import Form from '@/components/form/index.vue';
  import TableList from "@/components/table/index.vue"
  import {listAllBusinessList, calculateAvg} from "@/api/disRevenue/earnManage"
  import {listAllResourList, listTopology} from "@/api/disRevenue/resource"
  import EchartsLine from "@/components/echartsList/line.vue";
  import ResMonitorDigitalSuper from "./digitalSuper";
  import ResMonitorDigitalAutoFind from "./digitalAutoFind";
  export default {
    name: 'ResMonitorDetails',
    components: {Form, TableList, EchartsLine, ResMonitorDigitalSuper, ResMonitorDigitalAutoFind},
    dicts: ['rm_topology_type', 'rm_register_online_state', 'rm_register_resource_type'],
    data() {
      return {
        ruleForm: {},
        formList: [],
        ruleFormTow: {},
        formListTow: [],
        paramsData: {},
        activeName: 'first',
        linuxSystem: [],
        columns: {
          id: { label: `ID`, width: '50', visible: false },
          switchSn: { label: `源IP`, minWidth: '200', visible: true},
          switchName: { label: `发生时间`, minWidth: '250', visible: true },
          interfaceName: { label: `状态`, minWidth: '100', visible: true },
          connectedDeviceType: { label: `内容`, minWidth: '250', visible: true },
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
        tableList: []
      }
    },
    created() {
      // this.paramsData = this.$route && this.$route.query;
      this.fnFormList('1');
      // this.switchList();
    },
    methods: {
      handleClick(tab, event) {
        if (tab && tab.index === '1') {
          // this.secondList();
        } else if (tab && tab.index === '2') {
          this.getList();
        }
      },
      // formList集合
      fnFormList(num) {
        this.formList = [{
          config: {title: '基本信息'},
          controls: {
            id: {label: 'ID',hidden: true},
            hardwareSn: {label: '硬件SN', span: 12, type: 'input',disabled: true},
            resourceType: {label: '资源类型', span: 12, type: 'select',disabled: true, options: this.dict.type.rm_register_resource_type},
            resourceName: {label: '资源名称', span: 12, type: 'input', disabled: true},
            ipAddress: {label: 'IP地址', span: 12, type: 'input',disabled: true},
            onlineStatus: {label: '在线状态', span: 12, type: 'select',disabled: true, options: this.dict.type.rm_register_online_state},
            switchName: {label: '关联监控模版', span: 12, type: 'select',disabled: true},
            resourceGroup: {label: '所属资源组', span: 12, type: 'select',disabled: true},
            cpu: {label: 'CPU使用率%', span: 12, type: 'input',disabled: true},
            neicun: {label: '内存使用率%', span: 12, type: 'input',disabled: true},
            gaojing: {label: '未处理告警数', span: 12, type: 'input',disabled: true},
          }
        }];
        let formFirst = [
          {name: '系统描述', value: 'aaa'},
          {name: '系统位置', value: 'aaa'},
          {name: '系统Object ID', value: 'aaa'},
          {name: '系统MAC地址', value: 'aaa'},
          {name: '系统运行时间', value: 'aaa'},
          {name: '设备名称', value: 'aaa'},
          {name: '系统联系信息', value: 'aaa'},
          {name: '设备软件版本', value: 'aaa'},
          {name: '系统名称', value: 'aaa'},
        ];
        let formSecond = [
          {name: '总内存', value: 'aaa'},
          {name: '操作系统', value: 'aaa'},
          {name: '操作系统架构', value: 'aaa'},
          {name: '最大进程数', value: 'aaa'},
          {name: '硬盘总可用空间', value: 'aaa'},
          {name: '系统启动时间', value: 'aaa'},
          {name: '系统描述', value: 'aaa'},
          {name: '系统正常运行时间', value: 'aaa'},
          {name: '系统本地时间', value: 'aaa'},
          {name: 'CPU数量', value: 'aaa'},
        ];
        this.formListTow = num && num === '1' ? formFirst : formSecond;
      },
      getList() {
        this.loading = true;
        listTopology(this.addDateRange(this.queryParams)).then(response => {
          this.tableList = response.rows;
          this.queryParams.total = response.total;
          this.loading = false;
        })
      },
      // 获取交换机下拉
      switchList() {
        listAllResourList({resourceType: this.paramsData.resourceType}).then(val => {
          this.formList[0].controls.nodeName['options'] = val && val.map(item => {
            return Object.assign({label: item.resourceName, value: item.resourceName});
          });
        });
        listAllBusinessList().then(val => {
          this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
            return Object.assign({label: item.businessName, value: item.id});
          });
        });
      },
      // 监听事件
      callback(result, dataVal, formVal) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'businessName':
              if (dataVal) {
                formVal.options.forEach(item => {
                  if (item.value === dataVal) {
                    this.$set(this.ruleForm, 'businessName', item.label);
                  }
                });
                this.$set(this.ruleForm, 'code', dataVal);
              }
              break;
            case 'submit':
              dataVal['resourceType'] = this.paramsData.resourceType;
              calculateAvg(dataVal).then(response => {
                this.$modal.msgSuccess(response.msg);
                if (this.paramsData && this.paramsData.resourceType === '1') {
                  this.$router.push("/earnManage/server");
                }
                // else {
                //   this.$router.push("/disRevenue/earnManage/switch");
                // }
              }).catch(() => {
                this.$modal.msgError("操作失败")
              });
              break;
            case 'cancle':
              if (this.paramsData && this.paramsData.resourceType === '1') {
                this.$router.push("/earnManage/server");
              }
              // else {
              //   this.$router.push("/disRevenue/earnManage/switch");
              // }
              break;
            default:
          }
        }
      }
    }
  }
</script>