服务器注册
This commit is contained in:
康冉冉
@@ -315,6 +315,20 @@ export const dynamicRoutes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/resource/serverRegister/monitorChart',
|
||||||
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
|
permissions: ['resource:serverRegister:echartView'],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: ':id?',
|
||||||
|
component: () => import('@/views/resource/serverRegister/monitorChart'),
|
||||||
|
name: 'SwitchRegisterChart',
|
||||||
|
meta: { title: '图形监控', activeMenu: '/resource/serverRegister' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
// 交换机管理
|
// 交换机管理
|
||||||
{
|
{
|
||||||
path: '/resource/switchRegister/edit',
|
path: '/resource/switchRegister/edit',
|
||||||
|
|||||||
39
src/views/resource/serverRegister/firstMonitor.vue
Normal file
39
src/views/resource/serverRegister/firstMonitor.vue
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div style="padding: 8px 20px 20px;">
|
||||||
|
<div class="w100 plr-20" style="font-size: 14px">
|
||||||
|
<div v-for="(item, key, index) of formData['formFirst']" class="w50 disInlineBlock p10">
|
||||||
|
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{formData['formValue'] && formData['formValue'][key]}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="item of chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5">
|
||||||
|
<EchartsLine class="w100 h100" :lineData="item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import EchartsLine from "@/components/echartsList/line.vue";
|
||||||
|
export default {
|
||||||
|
name: 'FirstMonitor',
|
||||||
|
components: {EchartsLine},
|
||||||
|
props: {
|
||||||
|
chartList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
formData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
chartDataEvent(valData, funcName) {
|
||||||
|
this.$emit("chartFnEvent", valData, funcName);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
142
src/views/resource/serverRegister/handle.vue
Normal file
142
src/views/resource/serverRegister/handle.vue
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<Form :formList="formList" :ruleFormData="ruleForm" :config="this.paramsData && this.paramsData.readonly ? {labelWidth: '140px', buttonGroup: []} : {labelWidth: '140px'}" @fnClick="callback"></Form>
|
||||||
|
<el-button v-if="this.paramsData && this.paramsData.readonly" style="float: right;margin-top: 12px;margin-left: 10px;" @click="callback({fnCode: 'cancel'})">返回</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Form from '@/components/form/index.vue';
|
||||||
|
import {listHandle, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName} from "@/api/disRevenue/resource"
|
||||||
|
export default {
|
||||||
|
name: 'serverRegisterEdit',
|
||||||
|
components: {Form},
|
||||||
|
dicts: ['rm_topology_type'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
ruleForm: {},
|
||||||
|
formList: [],
|
||||||
|
paramsData: {},
|
||||||
|
switchNameList: [],
|
||||||
|
serverNameList: [],
|
||||||
|
serverPortList: [],
|
||||||
|
interfaceNameList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.paramsData = this.$route && this.$route.query;
|
||||||
|
if (this.paramsData && this.paramsData.id) {
|
||||||
|
// this.getFormDataList(this.paramsData.id);
|
||||||
|
}
|
||||||
|
this.switchList();
|
||||||
|
this.fnFormList();
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// formList集合
|
||||||
|
fnFormList(objVal) {
|
||||||
|
if (this.paramsData && this.paramsData.readonly) {
|
||||||
|
this.formList = [{
|
||||||
|
config: {title: '基本信息',labelWidth: '140px', readonly: true},
|
||||||
|
controls: {
|
||||||
|
id: {label: 'ID',hidden: true},
|
||||||
|
clientId: {label: 'ClientID', span: 12, type: 'select', options:[]},
|
||||||
|
hardwareSn: {label: '设备SN', span: 12, type: 'input'},
|
||||||
|
one: {label: 'IP1-运营商', span: 12, type: 'input'},
|
||||||
|
one1: {label: 'IP1-省', span: 12, type: 'input'},
|
||||||
|
one2: {label: 'IP1-市', span: 12, type: 'input'},
|
||||||
|
one3: {label: 'IP1-业务公网', span: 12, type: 'input'},
|
||||||
|
one4: {label: 'IP1-接口名称', span: 12, type: 'input'},
|
||||||
|
one5: {label: 'IP1-mac地址', span: 12, type: 'input'},
|
||||||
|
one6: {label: 'IP1-接口类型', span: 12, type: 'input'},
|
||||||
|
one7: {label: 'IP1-IPv4地址', span: 12, type: 'input'},
|
||||||
|
one8: {label: '管理网-运营商', span: 12, type: 'input'},
|
||||||
|
one9: {label: '管理网-省', span: 12, type: 'input'},
|
||||||
|
one10: {label: '管理网-市', span: 12, type: 'input'},
|
||||||
|
one11: {label: '管理网-公网IP', span: 12, type: 'input'},
|
||||||
|
one12: {label: '管理网-接口名称', span: 12, type: 'input'},
|
||||||
|
one13: {label: '管理网-mac地址', span: 12, type: 'input'},
|
||||||
|
one14: {label: '管理网-接口类型', span: 12, type: 'input'},
|
||||||
|
one15: {label: '管理网-IPv4地址', span: 12, type: 'input'},
|
||||||
|
one16: {label: '管理网-网关', span: 12, type: 'input'},
|
||||||
|
one17: {label: '心跳时间间隔', span: 12, type: 'input'},
|
||||||
|
one18: {label: '心跳次数', span: 12, type: 'input'},
|
||||||
|
one19: {label: '业务名称', span: 12, type: 'input'},
|
||||||
|
one20: {label: '逻辑节点标识', span: 12, type: 'input'},
|
||||||
|
one21: {label: '在线状态', span: 12, type: 'input'},
|
||||||
|
one22: {label: '注册状态', span: 12, type: 'input'},
|
||||||
|
one23: {label: '注册时间', span: 12, type: 'input'},
|
||||||
|
one24: {label: '上机时间', span: 12, type: 'input'},
|
||||||
|
one25: {label: 'agent版本', span: 12, type: 'input'},
|
||||||
|
machineCode: {label: '金山machineCode', span: 12, type: 'input'},
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
} else {
|
||||||
|
this.formList = [{
|
||||||
|
config: {title: '基本信息',labelWidth: '140px', colSpan: 'disBlock'},
|
||||||
|
controls: {
|
||||||
|
id: {label: 'ID',hidden: true},
|
||||||
|
clientId: {label: 'ClientID', span: 12, type: 'select', options:[], required: true},
|
||||||
|
machineCode: {label: '金山machineCode', span: 12, type: 'input', required: true},
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取交换机下拉
|
||||||
|
switchList() {
|
||||||
|
resNameBtType({resourceType: 2}).then(val => {
|
||||||
|
this.switchNameList = val && val;
|
||||||
|
this.formList[0].controls.clientId['options'] = val && val.map(item => {
|
||||||
|
return Object.assign({label: item.resourceName, value: item.resourceName});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取详情
|
||||||
|
getFormDataList(id) {
|
||||||
|
getTopology(id).then(val => {
|
||||||
|
this.ruleForm = val && val.data;
|
||||||
|
this.switchList();
|
||||||
|
this.fnServerNameList();
|
||||||
|
}).catch(() => {
|
||||||
|
this.$modal.msgError("操作失败")
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 监听事件
|
||||||
|
callback(result, dataVal, formVal) {
|
||||||
|
if (result && result.fnCode) {
|
||||||
|
switch (result.fnCode) {
|
||||||
|
case 'submit':
|
||||||
|
let content = '<p style="font-size: 1rem;font-weight: 600;">确认添加machineCode</p>' +
|
||||||
|
'<p style="height: 0px;margin-bottom: 50px;">一旦添加machineCode后，将不能修改</p>';
|
||||||
|
this.$modal.confirm(content, {submitTitle: '确认添加'}).then(() => {
|
||||||
|
let fnType = addTopology;
|
||||||
|
if (dataVal && dataVal.id) {
|
||||||
|
fnType = updateTopology;
|
||||||
|
}
|
||||||
|
if(this.loading) return;
|
||||||
|
this.loading = true;
|
||||||
|
fnType(dataVal).then(response => {
|
||||||
|
this.$modal.msgSuccess(response.msg);
|
||||||
|
this.$router.push("/resource/serverRegister");
|
||||||
|
this.loading = false;
|
||||||
|
}).catch(() => {
|
||||||
|
this.$modal.msgError("操作失败")
|
||||||
|
});
|
||||||
|
}).catch(() => {});
|
||||||
|
break;
|
||||||
|
case 'cancel':
|
||||||
|
this.$router.push("/resource/serverRegister");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
::v-deep .el-radio {
|
||||||
|
margin-right: 15px!important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
319
src/views/resource/serverRegister/index.vue
Normal file
319
src/views/resource/serverRegister/index.vue
Normal file
@@ -0,0 +1,319 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container pageTopForm">
|
||||||
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="搜索" title="搜索" prop="switchName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.switchName"
|
||||||
|
placeholder="请输入公网IP/私网IP/设备SN"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="在线状态" title="在线状态" prop="onlineStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.onlineStatus"
|
||||||
|
placeholder="请选择在线状态"
|
||||||
|
clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.rm_register_online_state"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="多公网IP状态" title="多公网IP状态" prop="onlineStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.onlineStatus"
|
||||||
|
placeholder="请选择多公网IP状态"
|
||||||
|
clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.rm_register_online_state"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="注册状态" title="注册状态" prop="onlineStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.onlineStatus"
|
||||||
|
placeholder="请选择注册状态"
|
||||||
|
clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.rm_register_online_state"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="业务名称" title="业务名称" prop="onlineStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.onlineStatus"
|
||||||
|
placeholder="请选择业务名称"
|
||||||
|
clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.rm_register_online_state"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="逻辑节点标识" title="逻辑节点标识" prop="onlineStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.onlineStatus"
|
||||||
|
placeholder="请选择逻辑节点标识"
|
||||||
|
clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.rm_register_online_state"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item class="lastBtnSty">
|
||||||
|
<el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 表格数据 -->
|
||||||
|
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
|
||||||
|
<!-- 资源类型 -->
|
||||||
|
<template #tempType="{ row, column }">
|
||||||
|
<dict-tag :options="dict.type.rm_register_resource_type" :value="row.resourceType"/>
|
||||||
|
</template>
|
||||||
|
<!-- 端口 -->
|
||||||
|
<template #tempPort="{ row, column }">
|
||||||
|
<dict-tag :options="dict.type.rm_register_port" :value="row.resourcePort"/>
|
||||||
|
</template>
|
||||||
|
<!-- 协议 -->
|
||||||
|
<template #tempProtocol="{ row, column }">
|
||||||
|
<dict-tag :options="dict.type.rm_register_protocol" :value="row.protocol"/>
|
||||||
|
</template>
|
||||||
|
<!-- 注册状态 -->
|
||||||
|
<template #tempStatus="{ row, column }">
|
||||||
|
<dict-tag :options="dict.type.rm_register_status" :value="row.registrationStatus"/>
|
||||||
|
</template>
|
||||||
|
<!-- 在线状态 -->
|
||||||
|
<template #tempOnlineStatus="{ row, column }">
|
||||||
|
<dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
|
||||||
|
</template>
|
||||||
|
</TableList>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<el-dialog title="命令执行结果" :visible.sync="open" width="800px" append-to-body>
|
||||||
|
<div class="block">
|
||||||
|
<el-timeline :reverse="true">
|
||||||
|
<el-timeline-item v-for="item of timelineList" :timestamp="item.createTime" placement="top">
|
||||||
|
<pre>{{item.content}}</pre>
|
||||||
|
</el-timeline-item>
|
||||||
|
</el-timeline>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="Register">
|
||||||
|
import {listSwitchManage} from '@/api/disRevenue/resource';
|
||||||
|
import TableList from '@/components/table/index.vue';
|
||||||
|
import MonitorStrategy from './monitorStrategy';
|
||||||
|
export default {
|
||||||
|
name: 'ServerRegister',
|
||||||
|
components: {TableList, MonitorStrategy},
|
||||||
|
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
open: false,
|
||||||
|
roleList: [],
|
||||||
|
loading: true,
|
||||||
|
showSearch: true,
|
||||||
|
ids: [],
|
||||||
|
single: true,
|
||||||
|
meltiple: true,
|
||||||
|
// 列显隐信息
|
||||||
|
columns: {
|
||||||
|
id: { label: `ID`,width: '80'},
|
||||||
|
switchName: { label: `交换机名称`, visible: true, minWidth: '200'},
|
||||||
|
hardwareSn: { label: `硬件SN`,minWidth: '250'},
|
||||||
|
resourceType: { label: `交换机类型`, minWidth: '100', slotName: 'tempType'},
|
||||||
|
snmpAddress: { label: `SNMP采集地址`, visible: true, minWidth: '150'},
|
||||||
|
snmpPort: { label: `SNMP采集端口`, visible: true, minWidth: '150'},
|
||||||
|
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '120', visible: true },
|
||||||
|
upTime:{ label: `上机时间`,minWidth: '160'},
|
||||||
|
updateTime:{ label: `修改时间`,minWidth: '160'},
|
||||||
|
createTime:{ label: `创建时间`,minWidth: '160'},
|
||||||
|
heartbeatCount: { label: `交换机心跳检测次数`, minWidth: '180'},
|
||||||
|
heartbeatInterval: { label: `交换机心跳检测周期`, minWidth: '180'},
|
||||||
|
heartbeatOid: { label: `交换机心跳检测OID`, minWidth: '180'},
|
||||||
|
protocol: { label: `SNMP版本`, minWidth: '150'},
|
||||||
|
readWritePermission: { label: `读写权限`, minWidth: '120'},
|
||||||
|
securityLevel: { label: `安全级别`, minWidth: '120'},
|
||||||
|
encryptionMethod: { label: `加密方式`, minWidth: '120'},
|
||||||
|
communityName: { label: `团体名称`, minWidth: '120'},
|
||||||
|
resourceUserName: { label: `用户名`, minWidth: '100'},
|
||||||
|
resourcePwd: { label: `密码`, minWidth: '100'}
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
tableButton: {
|
||||||
|
top: [
|
||||||
|
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:serverRegister:add'},
|
||||||
|
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:serverRegister:export'},
|
||||||
|
],
|
||||||
|
line: [
|
||||||
|
{content: '选择公网业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', hasPermi: 'resource:serverRegister:pubilcNet'},
|
||||||
|
{content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:graphicAnalysis'},
|
||||||
|
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:serverRegister:details'},
|
||||||
|
{title: ' 执行策略', more: [
|
||||||
|
{content: '下发业务', fnCode: 'issueBusiness', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:serverRegister:issueBusiness'},
|
||||||
|
{content: '下发脚本策略', fnCode: 'issueScript', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:serverRegister:issueScript'},
|
||||||
|
{content: '下发监控策略', fnCode: 'issueMonitor', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:serverRegister:issueMonitor'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{content: '查看执行结果', fnCode: 'result', type: 'text', icon: 'el-icon-s-check', hasPermi: 'resource:serverRegister:result'},
|
||||||
|
{},{},{}
|
||||||
|
// {content: '注册', fnCode: 'enroll', showName: 'registrationStatus', showVal: '0', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:register:enroll'},
|
||||||
|
// {content: '取消注册', fnCode: 'unenroll', showName: 'registrationStatus', showVal: '1', type: 'text', icon: 'el-icon-circle-close', hasPermi: 'resource:register:unenroll'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
timelineList: [
|
||||||
|
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-12 12:12:12'},
|
||||||
|
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-11 12:12:12'},
|
||||||
|
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-10 12:12:12'}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 处理子组件传递的新值
|
||||||
|
handleValueChange(newValue) {
|
||||||
|
// 父组件更新自身数据，实现同步
|
||||||
|
this.showSearch = newValue;
|
||||||
|
// console.log('父组件拿到新值:', newValue);
|
||||||
|
},
|
||||||
|
/** 查询角色列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true
|
||||||
|
listSwitchManage(this.addDateRange(this.queryParams)).then(response => {
|
||||||
|
this.roleList = response.rows;
|
||||||
|
this.queryParams.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.$refs['queryRef'].resetFields();
|
||||||
|
this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
|
||||||
|
// this.resetForm("queryRef");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 多选框选中数据 */
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.roleId);
|
||||||
|
this.single = selection.length != 1;
|
||||||
|
this.multiple = !selection.length;
|
||||||
|
},
|
||||||
|
fnDialogResult(res){
|
||||||
|
this.open = false;
|
||||||
|
},
|
||||||
|
callback(result, rowData, selectChange) {
|
||||||
|
// console.log('result==',result);
|
||||||
|
if (result && result.fnCode) {
|
||||||
|
switch (result.fnCode) {
|
||||||
|
case 'add':
|
||||||
|
this.$router.push("/resource/serverRegister/edit");
|
||||||
|
break;
|
||||||
|
case 'edit':
|
||||||
|
this.$router.push({
|
||||||
|
path:'/resource/serverRegister/edit',
|
||||||
|
query: {id: rowData.id}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'details':
|
||||||
|
this.$router.push({
|
||||||
|
path:'/resource/serverRegister/edit',
|
||||||
|
query: {id: rowData.id, readonly: true}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'echartView':
|
||||||
|
this.$router.push({
|
||||||
|
path:'/resource/serverRegister/monitorChart',
|
||||||
|
query: {clientId: rowData.hardwareSn}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'result':
|
||||||
|
this.open = true;
|
||||||
|
// 获取详情
|
||||||
|
getScriptResultBySn({hardwareSn: rowData.hardwareSn}).then(val => {
|
||||||
|
this.timelineList = val && val.data && val.data.scriptResult || [];
|
||||||
|
}).catch(() => {
|
||||||
|
this.$modal.msgError("操作失败")
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'export':
|
||||||
|
// let dataList = [];
|
||||||
|
// Object.keys(this.columns).forEach(item => {
|
||||||
|
// if (item.visible) {
|
||||||
|
// dataList.push(item.prop);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// this.download("/system/registration/export", {properties: dataList,}, `资源管理_${new Date().getTime()}.xlsx`);
|
||||||
|
let paramsList = Object.assign({}, this.queryParams,rowData);
|
||||||
|
this.download("system/switchManagement/export", paramsList, `交换机管理_${new Date().getTime()}.xlsx`, null, 'json');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
::v-deep .lastBtnSty .el-form-item__content{
|
||||||
|
margin-left: 10px!important;
|
||||||
|
}
|
||||||
|
::v-deep .el-dialog__body {
|
||||||
|
padding: 0px!important;
|
||||||
|
}
|
||||||
|
::v-deep .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
|
||||||
|
display: block!important;
|
||||||
|
}
|
||||||
|
::v-deep .el-tree-node__label {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
529
src/views/resource/serverRegister/monitorChart.vue
Normal file
529
src/views/resource/serverRegister/monitorChart.vue
Normal file
@@ -0,0 +1,529 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
|
<el-tab-pane label="监控项" name="first">
|
||||||
|
<template v-if="activeName === 'first'">
|
||||||
|
<FirstMonitor v-if="loading" :formData="formData" :chartList="firstChartList" @chartFnEvent="chartFnEvent"></FirstMonitor>
|
||||||
|
</template>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="自动发现项" name="second">
|
||||||
|
<template v-if="activeName === 'second'">
|
||||||
|
<SecondAutoFind v-if="loading" :defaultTimes="defaultTimes" :matchNum="matchNum" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
|
||||||
|
</template>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<div style="float: right;margin-top: 20px;">
|
||||||
|
<el-button type="primary" @click="goBack">返回</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FirstMonitor from "./firstMonitor";
|
||||||
|
import SecondAutoFind from "./secondAutoFind";
|
||||||
|
import {switchMonitorData, switchCpuData, switchMemData,switchPowerData, postInterFaceName, switchNetDetails,switchNetDiscards,switchNeTotal,switchNetErrDiscard, switchNetSpeed} from "@/api/disRevenue/resource"
|
||||||
|
export default {
|
||||||
|
name: "MonitorChart",
|
||||||
|
components: {FirstMonitor, SecondAutoFind},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
currTimeList: {},
|
||||||
|
defaultTimes: [],
|
||||||
|
activeName: 'first',
|
||||||
|
paramsData: {},
|
||||||
|
// 第一栏
|
||||||
|
firstChartTrans: {},
|
||||||
|
formFirst: {
|
||||||
|
sysDescr: '总内存', sysLocation: '操作系统', sysObjectID: '操作系统架构', hwStackSystemMac: '最大进程数', sysUpTime: '硬盘',
|
||||||
|
entPhysicalName: '系统启动时间', sysContact: '系统描述', entPhysicalSoftwareRev: '系统正确运行时间', sysName: '系统本地时间', cpuNum: 'CPU数量'
|
||||||
|
},
|
||||||
|
formData: {},
|
||||||
|
firstChartList: [],
|
||||||
|
resultData: [
|
||||||
|
{
|
||||||
|
title: 'CPU负载(%)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: 'CPU的1分钟负载', data: []},
|
||||||
|
{name: 'CPU的5分钟负载', data: []},
|
||||||
|
{name: 'CPU的15分钟负载', data: []},
|
||||||
|
{name: 'CPU使用率', data: []},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: 'CPU时间(s)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: 'CPU正常运行时间', data: []},
|
||||||
|
{name: 'CPU空闲时间', data: []},
|
||||||
|
{name: 'CPU等待响应时间', data: []},
|
||||||
|
{name: 'CPU系统时间', data: []},
|
||||||
|
{name: 'CPU软件无响应时间', data: []},
|
||||||
|
{name: 'CPU运行用户进程所花费的时间', data: []},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: '进程(个)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: '正在运行的进程数', data: []},
|
||||||
|
{name: '进程数', data: []}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: '登录用户数(个)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: '登录用户数', data: []}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: '交换卷/文件的可用空间(字节)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: '交换卷/文件的可用空间', data: []}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: '内存利用率(%)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: '内存利用率', data: []}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: '可用交换空间百分比(%)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: '可用交换空间百分比', data: []}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: '可用内存(KB)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: '可用内存', data: []}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: '可用内存百分比(%)',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: [],
|
||||||
|
dataList: [
|
||||||
|
{name: '可用内存百分比', data: []}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 第二栏
|
||||||
|
activeNames: [],
|
||||||
|
matchNum: {num: ''},
|
||||||
|
secondChartList: {},
|
||||||
|
eventDataMap: {},
|
||||||
|
echartData: {
|
||||||
|
title: 'GE1/0/1的丢包数',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
||||||
|
dataList: [{
|
||||||
|
name: '入站丢包',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
},{
|
||||||
|
name: '出站丢包',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
linuxSystem: {
|
||||||
|
net: {
|
||||||
|
title: '网络端口GE1/0/1',
|
||||||
|
formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'},
|
||||||
|
formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'},
|
||||||
|
// echartFors: [
|
||||||
|
// {title: 'GE1/0/1的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
|
||||||
|
// {title: 'GE1/0/1的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
|
||||||
|
// {title: 'GE1/0/1的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
|
||||||
|
// {title: 'GE1/0/1的网络速率(bites/sec)', oneName: '端口实时接收速率(bites/sec)', twoName: '端口实时发送速率(bites/sec)'},
|
||||||
|
// ],
|
||||||
|
echartList: [{
|
||||||
|
title: 'GE1/0/1的丢包数',
|
||||||
|
dateShowType: 'datetimerange',
|
||||||
|
dateDataTrans: {transList: true},
|
||||||
|
dataVal: {
|
||||||
|
titleVal: {textAlign: 'left', left: '1%'},
|
||||||
|
yAxisName: ' ',
|
||||||
|
gridTop: '35%',
|
||||||
|
legend: {top: '15%', left: '10%'},
|
||||||
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
||||||
|
dataList: [{
|
||||||
|
name: '入站丢包',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
},{
|
||||||
|
name: '出站丢包',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
title: '光模块sabc',
|
||||||
|
formList: {name: '光模块端口名称'},
|
||||||
|
formModel: {name: 'sabc'},
|
||||||
|
echartFors: [
|
||||||
|
{title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
|
||||||
|
{title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
|
||||||
|
],
|
||||||
|
echartList: []
|
||||||
|
},
|
||||||
|
mpu: {
|
||||||
|
title: 'MPU1',
|
||||||
|
formList: {name: 'MPU名称', system: 'MPU的操作系统'},
|
||||||
|
formModel: {name: 'MPU1', system: 'xxxx'},
|
||||||
|
echartFors: [
|
||||||
|
{title: 'MPU1的CPU使用率(%)', oneName: 'CPU利用率'},
|
||||||
|
{title: 'MPU1的内存使用率(%)', oneName: '内存利用率'},
|
||||||
|
{title: 'MPU1的温度(°C)', oneName: '温度'},
|
||||||
|
],
|
||||||
|
echartList: []
|
||||||
|
},
|
||||||
|
pw: {
|
||||||
|
title: '电源PW1',
|
||||||
|
formList: {name: '电源名称', status: '电源状态'},
|
||||||
|
formModel: {name: 'PW1', status: '正在供电'},
|
||||||
|
echartFors: [
|
||||||
|
{title: '电源电流(mA)', oneName: '电源电流'},
|
||||||
|
{title: '电源电压(mV)', oneName: '电源电压'}
|
||||||
|
],
|
||||||
|
echartList: []
|
||||||
|
},
|
||||||
|
fan: {
|
||||||
|
title: '风扇FAN1',
|
||||||
|
formList: {name: '风扇名称', status: '风扇状态'},
|
||||||
|
formModel: {name: 'FAN1', status: 'xxx'},
|
||||||
|
echartFors: [],
|
||||||
|
echartList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
let startData = '';
|
||||||
|
let endData = '';
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月
|
||||||
|
const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8）
|
||||||
|
const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
|
||||||
|
startData = `${year}-${month}-${prevDay} 00:00:00`;
|
||||||
|
endData = `${year}-${month}-${day} 00:00:00`;
|
||||||
|
this.currTimeList = {startTime: startData, endTime: endData};
|
||||||
|
this.defaultTimes = [startData, endData];
|
||||||
|
this.paramsData = this.$route && this.$route.query;
|
||||||
|
this.handleClick();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async handleClick(tab, event) {
|
||||||
|
this.loading = false;
|
||||||
|
if (this.activeName === 'first') {
|
||||||
|
await Promise.all([
|
||||||
|
this.getMonitorData(),
|
||||||
|
this.getCpuData(),
|
||||||
|
this.getMemData(),
|
||||||
|
this.getPowerData()
|
||||||
|
]);
|
||||||
|
this.loading = true;
|
||||||
|
} else {
|
||||||
|
await this.fnInterFaceNameList();
|
||||||
|
this.loading = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getMonitorData() {
|
||||||
|
this.formData = {formFirst: this.formFirst};
|
||||||
|
switchMonitorData({clientId: this.paramsData.clientId}).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
this.formData['formValue'] = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getCpuData(val) {
|
||||||
|
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
|
||||||
|
switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||||||
|
cpuData['fnEvent'] = 'getCpuData';
|
||||||
|
if (res && res.data) {
|
||||||
|
cpuData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||||||
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||||||
|
cpuData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchCpuUse'] && res.data['yData']['switchCpuUse'].length > 0 ? res.data['yData']['switchCpuUse'] : [];
|
||||||
|
}
|
||||||
|
// this.firstChartList[0] = cpuData;
|
||||||
|
this.$set(this.firstChartList, 0, cpuData);
|
||||||
|
}).catch(() => {
|
||||||
|
this.firstChartList[0] = cpuData;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getMemData(val) {
|
||||||
|
let memData = JSON.parse(JSON.stringify(this.resultData[1]));
|
||||||
|
switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||||||
|
memData['fnEvent'] = 'getMemData';
|
||||||
|
if (res && res.data) {
|
||||||
|
memData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||||||
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||||||
|
memData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
|
||||||
|
}
|
||||||
|
// this.firstChartList[1] = memData;
|
||||||
|
this.$set(this.firstChartList, 1, memData);
|
||||||
|
}).catch(() => {
|
||||||
|
this.firstChartList[1] = memData;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getPowerData(val) {
|
||||||
|
let powerData = JSON.parse(JSON.stringify(this.resultData[2]));
|
||||||
|
switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||||||
|
powerData['fnEvent'] = 'getPowerData';
|
||||||
|
if (res && res.data) {
|
||||||
|
powerData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||||||
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||||||
|
powerData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchAvgPower'] && res.data['yData']['switchAvgPower'].length > 0 ? res.data['yData']['switchAvgPower'] : [];
|
||||||
|
powerData.dataVal.dataList[1].data = res.data && res.data['yData'] && res.data['yData']['switchcurrentPower'] && res.data['yData']['switchcurrentPower'].length > 0 ? res.data['yData']['switchcurrentPower'] : [];
|
||||||
|
}
|
||||||
|
// this.firstChartList[2] = powerData;
|
||||||
|
this.$set(this.firstChartList, 2, powerData);
|
||||||
|
}).catch(() => {
|
||||||
|
this.firstChartList[2] = powerData;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// two
|
||||||
|
// 接口名称
|
||||||
|
async fnInterFaceNameList(val) {
|
||||||
|
this.activeNames = [];
|
||||||
|
try {
|
||||||
|
const res = await postInterFaceName({clientId: this.paramsData.clientId});
|
||||||
|
// .then(res => {
|
||||||
|
res && res.forEach(async(item,index) => {
|
||||||
|
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||||||
|
oneData.title = item && item.interfaceName;
|
||||||
|
this.secondChartList[item.interfaceName] = oneData;
|
||||||
|
if (index === 0) {
|
||||||
|
this.$modal.loading();
|
||||||
|
await Promise.all([
|
||||||
|
this.getNetDiscards(this.currTimeList, item),
|
||||||
|
// this.getNetTotal(this.currTimeList, item),
|
||||||
|
// this.getNetErrDisc(this.currTimeList, item),
|
||||||
|
// this.getNetSpeed(this.currTimeList, item)
|
||||||
|
]);
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!this.activeNames.includes(item.interfaceName)) this.activeNames.push(item.interfaceName);
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
},2000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// });
|
||||||
|
} catch (error) {
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
console.error('获取接口名称列表失败：', error);
|
||||||
|
// 可添加错误提示，如this.$message.error('数据加载失败')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 基本信息
|
||||||
|
getNetData() {
|
||||||
|
switchNetDetails({clientId: this.paramsData.clientId}).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
this.formData['formValue'] = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 丢包
|
||||||
|
getNetDiscards(times,val) {
|
||||||
|
const interfaceName = val.interfaceName;
|
||||||
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||||
|
if (netEcharts && netEcharts.dateDataTrans) {
|
||||||
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||||
|
}
|
||||||
|
netEcharts.fnEvent = 'getNetDiscards';
|
||||||
|
switchNetDiscards(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||||
|
this.$set(this.secondChartList[interfaceName].echartList, 0, []);
|
||||||
|
if (res && res.data) {
|
||||||
|
this.eventDataMap['interfaceName'] = false;
|
||||||
|
netEcharts.title = `${interfaceName}的丢包数`;
|
||||||
|
console.log('');
|
||||||
|
netEcharts.dataVal.lineXData = res.data?.xData.length > 0 ? res.data.xData : this.firstChartTrans?.timeList || [];
|
||||||
|
// 入
|
||||||
|
netEcharts.dataVal.dataList[0] = {
|
||||||
|
name: this.secondChartList[interfaceName].echartFors[0].oneName,
|
||||||
|
data: res.data.yData?.netInDiscardsData || []
|
||||||
|
};
|
||||||
|
// 出
|
||||||
|
netEcharts.dataVal.dataList[1] = {
|
||||||
|
name: this.secondChartList[interfaceName].echartFors[0].twoName,
|
||||||
|
data: res.data.yData?.netOutDiscardsData || []
|
||||||
|
};
|
||||||
|
this.$set(this.secondChartList[interfaceName].echartList, 0, netEcharts);
|
||||||
|
this.$set(this.eventDataMap, interfaceName, true);
|
||||||
|
if (this.firstChartTrans?.timeList) {
|
||||||
|
this.matchNum['interfaceName'] = val.interfaceName;
|
||||||
|
this.$set(this.matchNum, 'num', Math.floor(Math.random() * 9000));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 总数
|
||||||
|
getNetTotal(times,val) {
|
||||||
|
const interfaceName = val.interfaceName;
|
||||||
|
// let netData = JSON.parse(JSON.stringify(this.secondChartList[interfaceName]));
|
||||||
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||||
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||||
|
netEcharts.fnEvent = 'getNetTotal';
|
||||||
|
switchNeTotal(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
netEcharts.title = `${interfaceName}的Bites总数`;
|
||||||
|
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
|
||||||
|
// 入
|
||||||
|
netEcharts.dataVal.dataList[0] = {
|
||||||
|
name: this.secondChartList[interfaceName].echartFors[1].oneName,
|
||||||
|
data: res.data.yData?.netInTotalData || []
|
||||||
|
};
|
||||||
|
// 出
|
||||||
|
netEcharts.dataVal.dataList[1] = {
|
||||||
|
name: this.secondChartList[interfaceName].echartFors[1].twoName,
|
||||||
|
data: res.data.yData?.netOutTotalData || []
|
||||||
|
};
|
||||||
|
this.$set(this.secondChartList[interfaceName].echartList, 1, netEcharts);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 错误丢包
|
||||||
|
getNetErrDisc(times, val) {
|
||||||
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||||
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||||
|
netEcharts.fnEvent = 'getNetErrDisc';
|
||||||
|
switchNetErrDiscard(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
netEcharts.title = `${val.interfaceName}的错误包数量`;
|
||||||
|
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
|
||||||
|
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[2].oneName;
|
||||||
|
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInErrDiscardsData || [];
|
||||||
|
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[2].twoName;
|
||||||
|
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutErrDiscardsData || [];
|
||||||
|
this.$set(this.secondChartList[val.interfaceName].echartList, 2, netEcharts);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 实时流量
|
||||||
|
getNetSpeed(times, val) {
|
||||||
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||||
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||||
|
netEcharts.fnEvent = 'getNetSpeed';
|
||||||
|
switchNetSpeed(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||||
|
if (res && res.data) {
|
||||||
|
netEcharts.title = `${val.interfaceName}的网络速率(bites/sec)`;
|
||||||
|
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
|
||||||
|
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[3].oneName;
|
||||||
|
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
|
||||||
|
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
|
||||||
|
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
|
||||||
|
this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
collapseChangeData(valList) {
|
||||||
|
valList && valList.forEach(item => {
|
||||||
|
if (!this.eventDataMap[item]) {
|
||||||
|
this.$modal.loading();
|
||||||
|
this.getNetDiscards(this.currTimeList, {interfaceName: item});
|
||||||
|
this.getNetTotal(this.currTimeList, {interfaceName: item});
|
||||||
|
this.getNetErrDisc(this.currTimeList, {interfaceName: item});
|
||||||
|
this.getNetSpeed(this.currTimeList, {interfaceName: item});
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!this.activeNames.includes(item)) this.activeNames.push(item);
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
},2500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
chartFnEvent(valData, fnName, tabName) {
|
||||||
|
console.log('ccccc===',fnName,'vvv==', typeof this[fnName] === 'function');
|
||||||
|
this.firstChartTrans = valData;
|
||||||
|
// 检查函数是否存在，避免报错
|
||||||
|
if (typeof this[fnName] === 'function') {
|
||||||
|
// 调用实际函数，并传递参数（如选中的值、当前项）
|
||||||
|
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, {interfaceName: tabName});
|
||||||
|
} else {
|
||||||
|
console.warn(`函数 ${fnName} 未定义`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
this.$router.push("/resource/switchRegister");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
239
src/views/resource/serverRegister/monitorStrategy.vue
Normal file
239
src/views/resource/serverRegister/monitorStrategy.vue
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div style="width: 80%; margin: auto;">
|
||||||
|
<Form ref="formRef" :formList="formList" :config="{labelWidth: '140px',buttonGroup: []}" :ruleFormData="ruleFormData" @fnClick="callback"></Form>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 style="background: #d4e3fc;padding: 15px 10px;">策略内容</h3>
|
||||||
|
<el-tabs v-model="activeName" class="plr-20">
|
||||||
|
<el-tab-pane label="监控项" name="first">
|
||||||
|
<div v-for="item of firstData">
|
||||||
|
<div class="plr-50">
|
||||||
|
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
|
||||||
|
<div class="disInlineBlock w50">
|
||||||
|
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
|
||||||
|
<span>{{city.metricName}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="disInlineBlock" style="color: #606266">
|
||||||
|
采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable>
|
||||||
|
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="自动发现项" name="second">
|
||||||
|
<el-collapse v-model="activeTwoName">
|
||||||
|
<el-collapse-item v-for="(item,key,index) of secondData" :title="item.title" :name="index">
|
||||||
|
<template slot="title">
|
||||||
|
<span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
|
||||||
|
<div style="font-size: 13px;margin-left: 10%;">
|
||||||
|
采集周期：<el-select v-model="item['time']" id="selDisabled" :disabled="key === 'switchNet' ? true : false" clearable placeholder="请选择">
|
||||||
|
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="plr-50">
|
||||||
|
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
|
||||||
|
<span style="width: 300px" class="disInlineBlock">{{city.metricKey}}</span>
|
||||||
|
<span>{{city.metricName}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<el-button style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Form from '@/components/form/index.vue';
|
||||||
|
export default {
|
||||||
|
name: "MonitorStrategy",
|
||||||
|
components: {Form},
|
||||||
|
dicts: ['rm_register_resource_type', 'collection_cycle'],
|
||||||
|
props: {
|
||||||
|
open: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
open: {
|
||||||
|
handler(val) {
|
||||||
|
if (!val) {
|
||||||
|
// 清空form
|
||||||
|
this.$refs['formRef'].$refs.ruleForm.resetFields();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeName: 'first',
|
||||||
|
activeTwoName: [0,1,2,3,4],
|
||||||
|
timeOptions: [],
|
||||||
|
ruleFormData: {},
|
||||||
|
formList: [],
|
||||||
|
firstData: [
|
||||||
|
{checkList: [
|
||||||
|
{id: '1', metricKey: 'sysDescr', metricName: '系统描述', time: ''},
|
||||||
|
{id: '2', metricKey: 'sysObjectID', metricName: '系统ObjectID', time: ''},
|
||||||
|
{id: '3', metricKey: 'sysUpTime', metricName: '系统运行时间', time: ''},
|
||||||
|
{id: '4', metricKey: 'hwStackSystemMac', metricName: '系统MAC地址', time: ''},
|
||||||
|
{id: '5', metricKey: 'entPhysicalSoftwareRev', metricName: '设备软件版本', time: ''},
|
||||||
|
{id: '6', metricKey: 'hwEntityMemUsage', metricName: '设备内存使用率(%)', time: ''},
|
||||||
|
]}
|
||||||
|
],
|
||||||
|
secondData: {
|
||||||
|
switchNet: {title: '网络端口发现', time: '300',
|
||||||
|
checkList: [
|
||||||
|
{id: '11', metricKey: 'ifIndex', metricName: '端口索引'},
|
||||||
|
{id: '12', metricKey: 'ifHCOutOctets', metricName: '端口发送Bites总数'},
|
||||||
|
{id: '13', metricKey: 'ifRevRate', metricName: '端口实时接收速率(bites/sec)'},
|
||||||
|
{id: '14', metricKey: 'ifSentRate', metricName: '端口实时发送速率(bites/sec)'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
switchModule: {title: '光模块发现', time: '',
|
||||||
|
checkList: [
|
||||||
|
{id: '15', metricKey: 'fiberEntIndex', metricName: '光模块端口索引'},
|
||||||
|
{id: '16', metricKey: 'hwEntityOpticalTxLowThreshold', metricName: '光模块发送光衰阈值(dBm)'},
|
||||||
|
{id: '17', metricKey: 'hwEntityOpticalRxLowThreshold', metricName: '光模块接收光衰阈值(dBm)'},
|
||||||
|
{id: '18', metricKey: 'hwEntityOpticalTxPower', metricName: '光模块发送功率(dBm)'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
switchMpu: {title: 'MPU发现', time: '',
|
||||||
|
checkList: [
|
||||||
|
{id: '19', metricKey: 'mpuEntIndex', metricName: 'MPU索引'},
|
||||||
|
{id: '20', metricKey: 'mpuEntityCpuUsage', metricName: 'MPU的CPU使用率'},
|
||||||
|
{id: '21', metricKey: 'mpuEntityMemUsage', metricName: 'MPU的内存使用率'},
|
||||||
|
{id: '22', metricKey: 'mpuPhysicalSoftwareRev', metricName: 'MPU的操作系统'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
switchPwr: {title: '电源发现', time: '',
|
||||||
|
checkList: [
|
||||||
|
{id: '23', metricKey: 'pwrEntIndex', metricName: '电源索引'},
|
||||||
|
{id: '24', metricKey: 'pwrName', metricName: '电源名称'},
|
||||||
|
{id: '25', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
|
||||||
|
{id: '26', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
switchFan: {title: '风扇发现', time: '',
|
||||||
|
checkList: [
|
||||||
|
{id: '27', metricKey: 'fanEntIndex', metricName: '风扇索引'},
|
||||||
|
{id: '28', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
|
||||||
|
{id: '29', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
|
||||||
|
{id: '30', metricKey: 'pwrEntityPwrVoltage', metricName: '电源电压(mV)'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
console.log('dddd===');
|
||||||
|
this.timeOptions = this.dict.type.collection_cycle;
|
||||||
|
this.fnFormList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// formList集合
|
||||||
|
fnFormList(objVal) {
|
||||||
|
this.formList = [{
|
||||||
|
config: {},
|
||||||
|
controls: {
|
||||||
|
id: {label: 'ID',hidden: true},
|
||||||
|
switchName: {label: '策略名称', span: 24, type: 'input', required: true},
|
||||||
|
hardwareSn: {label: '描述', span: 24, type: 'textarea'},
|
||||||
|
resourceType: {label: '交换机类型', span: 24, type: 'select', required: true, options: this.dict.type.rm_register_resource_type},
|
||||||
|
bushu: {label: '部署设备', span: 24, type: 'textarea', rows: 15},
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
},
|
||||||
|
// form验证
|
||||||
|
fnFormValid() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
this.ruleFormData = {};
|
||||||
|
const formValid = this.$refs.formRef.$refs.ruleForm;
|
||||||
|
// 3. 操作form（如验证）
|
||||||
|
formValid.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.ruleFormData = formValid.model;
|
||||||
|
resolve(true);
|
||||||
|
} else {
|
||||||
|
resolve(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async submit() {
|
||||||
|
if (!await this.fnFormValid()) return;
|
||||||
|
// 监控项
|
||||||
|
let idsList = [];
|
||||||
|
this.firstData.forEach(item => {
|
||||||
|
item && item.checkList.forEach(ids => {
|
||||||
|
if (ids && ids.time) {
|
||||||
|
idsList.push({id: ids.id, collectionCycle: ids.time});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 自动发现项
|
||||||
|
let autoIds = [];
|
||||||
|
Object.keys(this.secondData).forEach(key => {
|
||||||
|
if (this.secondData[key].time) {
|
||||||
|
this.secondData[key] && this.secondData[key].checkList.forEach(ids => {
|
||||||
|
autoIds.push({id: ids.id, collectionCycle: this.secondData[key].time});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('ruleFormData===',this.ruleFormData);
|
||||||
|
console.log('idsList===',idsList);
|
||||||
|
console.log('autoIds===',autoIds);
|
||||||
|
this.$emit("dialogResult", {open: false});
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.$emit("dialogResult", {open: false});
|
||||||
|
},
|
||||||
|
// 监听事件
|
||||||
|
callback(result, dataVal, formVal) {
|
||||||
|
if (result && result.fnCode) {
|
||||||
|
switch (result.fnCode) {
|
||||||
|
case 'submit':
|
||||||
|
let fnType = addHandle;
|
||||||
|
if (dataVal && dataVal.id) {
|
||||||
|
fnType = updateHandle;
|
||||||
|
}
|
||||||
|
fnType(dataVal).then(response => {
|
||||||
|
this.$modal.msgSuccess(response.msg);
|
||||||
|
this.$router.push("/resource/switchRegister");
|
||||||
|
}).catch(() => {
|
||||||
|
this.$modal.msgError("操作失败")
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'cancel':
|
||||||
|
this.$router.push("/resource/switchRegister");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
::v-deep #selDisabled{
|
||||||
|
color: #303133!important;
|
||||||
|
}
|
||||||
|
::v-deep .el-collapse-item__header {
|
||||||
|
background-color: #d4e3fc!important;
|
||||||
|
/*color: #fff!important;*/
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
105
src/views/resource/serverRegister/secondAutoFind.vue
Normal file
105
src/views/resource/serverRegister/secondAutoFind.vue
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<div style="padding: 8px 20px 20px;">
|
||||||
|
<el-collapse v-model="activeShowList" @change="collapseChange">
|
||||||
|
<el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val.title}】`" :name="val.title">
|
||||||
|
<div class="mt10 w100">
|
||||||
|
<div class="w100 plr-20" style="font-size: 14px">
|
||||||
|
<div v-for="(item,key,index) of val.formList" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
|
||||||
|
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val.formModel[key] || '-'}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="item of val.echartList" :key="`div-${val.title}-${item.title}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
|
||||||
|
<EchartsLine class="w100 h100" :key="`chart-${val.title}-${item.title}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import EchartsLine from "@/components/echartsList/line.vue";
|
||||||
|
export default {
|
||||||
|
name: 'SecondAutoFind',
|
||||||
|
components: {EchartsLine},
|
||||||
|
props: {
|
||||||
|
secondChartList: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
activeNames: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
defaultTimes: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
matchNum: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
activeNames: {
|
||||||
|
handler(val) {
|
||||||
|
console.log('val==',val);
|
||||||
|
this.activeShowList = val;
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true
|
||||||
|
},
|
||||||
|
secondChartList: {
|
||||||
|
handler(val) {
|
||||||
|
console.log('val=000000=',val);
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
// immediate: true
|
||||||
|
},
|
||||||
|
matchNum: {
|
||||||
|
handler(val) {
|
||||||
|
// if (val && val.interfaceName) {
|
||||||
|
// let newData = JSON.parse(JSON.stringify(this.secondChartList));
|
||||||
|
// this.secondChartList[val.interfaceName].echartList = [];
|
||||||
|
// setTimeout(() => {
|
||||||
|
// // this.secondChartList[val.interfaceName].echartList = newData[val.interfaceName].echartList;
|
||||||
|
// },1000);
|
||||||
|
// console.log('val=matchNum=',val,'this.secondChartList=====',this.secondChartList);
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeShowList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
collapseChange(val) {
|
||||||
|
this.activeShowList = this.activeNames;
|
||||||
|
this.$emit("collapseChangeData", val);
|
||||||
|
},
|
||||||
|
chartDataEvent(valData, funcName, tabName) {
|
||||||
|
this.$emit("chartFnEvent", valData, funcName, tabName);
|
||||||
|
// // 检查函数是否存在，避免报错
|
||||||
|
// if (typeof this[funcName] === 'function') {
|
||||||
|
// // 调用实际函数，并传递参数（如选中的值、当前项）
|
||||||
|
// // this[funcName]({startTime: valData[0], endTime: valData[1]});
|
||||||
|
// } else {
|
||||||
|
// console.warn(`函数 ${funcName} 未定义`);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
::v-deep .el-collapse-item__header {
|
||||||
|
background-color: #d4e3fc!important;
|
||||||
|
/*color: #fff!important;*/
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
loading: false,
|
loading: false,
|
||||||
currTimeList: {},
|
currTimeList: {},
|
||||||
defaultTimes: [],
|
defaultTimes: [],
|
||||||
activeName: 'second',
|
activeName: 'first',
|
||||||
paramsData: {},
|
paramsData: {},
|
||||||
// 第一栏
|
// 第一栏
|
||||||
firstChartTrans: {},
|
firstChartTrans: {},
|
||||||
|
|||||||
Reference in New Issue
Block a user