monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit aff4b74b9f6a0aab079f91371fcb539f8e031200 2 parents bc575217 7feef60c

Merge branch 'master-500-dev-xwx' into 'master-500-dev' 

快照概览添加快捷搜索



See merge request !778
Inline Side-by-side
Showing 6 changed files with 262 additions and 40 deletions
<div>
<el-select :size="$global.elementConfig.size.input" :collapse-tags="true" :filter-method="selectFilterMethod" :filterable="isFilter"
:size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="选择用户"
style="min-width: 120px;" v-model="modelValueLabel">
<el-option :value="modelValue" style="height: auto;padding: 0;">
<el-tree :check-on-click-node="true" :check-strictly="false" :data="list" :default-expand-all="isDefaultAll"
:empty-text="emptyText" :expand-on-click-node="true" :filter-node-method="filterNode"
:props="defaultProps" :show-checkbox="isMultiple" :show-checkbox="checkbox" @check-change="handleCheckChange"
node-key="id" node-key="id" ref="userTree">
</el-tree>
</el-option>
</el-select>
</div>
... ...
export default {
template: '',
name: 'user-tree-input',
props: {
// echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
echoObj: {},
// 是否开启搜索
isFilter: {
default: true
},
// 尺寸
size: {
default: ''
},
placeholderText: {
default: '选择用户'
},
isTag: {
default: true
},
isDefaultAll: {
default: true
},
// 点击节点是否展开
expandClickNode: {
default: false
},
// 字段key，用于取出数据中的名字
fieldName: {
default: 'title'
},
emptyText: {
default: '无匹配项'
},
// 字段key， 数据中的id
fieldId: {
default: ''
},
// 配置是否可多选
isMultiple: {
type: Boolean,
default: true
},
},
data() {
return {
defaultProps: {
children: 'children',
label: 'nickname'
},
list: [],
// 实际选中值
modelValue: [],
// 下拉框绑定值(选中值名字)
modelValueLabel: []
}
},
methods: {
selectClose(bool) {
if (bool) {
this.selectFilterMethod('')
}
},
selectFilterMethod(val) {
// 下拉框调用tree树筛选
this.$refs.userTree.filter(val)
},
selectChangeMethod(e) {
var arrNew = []
var dataLength = this.modelValue.length
var eLength = e.length
for (var i = 0; i < dataLength; i++) {
for (var j = 0; j < eLength; j++) {
if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
arrNew.push(this.modelValue[i])
}
}
}
// 设置勾选的值
this.$refs.userTree.setCheckedNodes(arrNew)
},
filterNode(value, data) {
if (!value) return true
return data[this.fieldName].indexOf(value) !== -1
},
handleCheckChange(data, checked, indeterminate) {
let that = this;
var selectArr = [];
selectArr.push(data);
// data[that.defaultProps.children].forEach(function (v) {
// selectArr.push(data);
// });
if (checked) {
// 已选中
that.modelValue = that.modelValue.concat(selectArr)
} else {
that.modelValue.forEach(function (v, i) {
selectArr.forEach(function (v1) {
if (v.busId == v1.busId) {
that.modelValue.splice(i, 1);
}
})
})
}
that.modelValueLabel = that.modelValue.map(function (v) {
return v[that.defaultProps.label];
});
that.$emit('callback', this.modelValue)
}
},
watch: {},
mounted() {
let that = this;
//加载资源列表
const {proxy} = Vue.getCurrentInstance()
// 加载列表
proxy.$http.get("/api-user/users/getAll", {}, function (res) {
if (res) {
that.list = res;
}
})
},
created() {
}
}
... ...
... ... @@ -46,9 +46,9 @@ Promise.all([
//富文本框组件
.component('cm-wang-editor', Vue.defineAsyncComponent(() => myImport('components/common/wangEditorComponent/index')))
//告警通知统计信息
.component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index')));
.component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index')))
//告警通知统计信息
.component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index')));
// // 自定义指令
// app.directive('permissions', {
// // 当被绑定的元素插入到 DOM 中时……
... ...
... ... @@ -158,6 +158,22 @@ export default {
type: 'category',
data: [],
axisTick:false,
axisLabel: {
interval: 0,
formatter: val => {
// 一行字数
const max = 6
// 标签长度
const valLength = val.length
// 换行数
const rowNum = valLength / 6
if (valLength > 6) {
return val.slice(0,5) + '...';
} else {
return val
}
}
}
},
yAxis: {
type: 'value',
... ... @@ -205,22 +221,21 @@ export default {
data: [],
axisTick:false,
axisLabel: {
// x轴文本换行
formatter: function (params,index) {
if (params.length>10){
var newParamsName = '' // 最终拼接成的字符串
let end1 = Math.ceil(params.length / 2);
let end2 = params.length-end1;
let str1 = params.substr(0,end1);
let str2 = params.substr(end1+1,end2);
newParamsName = str1+'\n'+str2;
return newParamsName
}else {
return params
interval: 0,
formatter: val => {
// 一行字数
const max = 6
// 标签长度
const valLength = val.length
// 换行数
const rowNum = valLength / 6
if (valLength > 6) {
return val.slice(0,5) + '...';
} else {
return val
}
}
}
},
yAxis: {
type: 'value',
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
<div class="search">
<div class="condition esData-conditon" style="justify-content: end;width: 100%;">
<div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
<el-form :inline="true">
<el-form-item>
<el-tooltip placement="bottom-start">
<template #content> 资源名称 <br /> 资源ip <br /> 业务名称</template>
<el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" />
</el-tooltip>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-user-type-tree-input @callback="getUser" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button>
</el-form-item>
</el-form>
<el-button-group>
<el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
<el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近7天</el-button>
... ...
... ... @@ -8,6 +8,10 @@ export default {
let datetimerange = Vue.ref([]);
let visiblePopover = Vue.ref(false);
let queryParams = Vue.ref({
keyWord:'',
resType:'',
busId:'',
userName:'',
time:"today",
pageNum: 1,
pageSize: 10,
... ... @@ -89,14 +93,11 @@ export default {
};
let getEchartsData = ()=>{
let obj = {
time:queryParams.value.time,
}
let resTypeData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/overview/resTypeTop`,obj,(res)=>{
proxy.$http.get(`/api-web/snapshot/overview/resTypeTop`,queryParams.value,(res)=>{
res.object.forEach(item=>{
resTypeData.xaxis.push(item.xaxis);
resTypeData.yaxis.push(item.yaxis)
... ... @@ -119,7 +120,7 @@ export default {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/overview/busTop`,obj,(res)=>{
proxy.$http.get(`/api-web/snapshot/overview/busTop`,queryParams.value,(res)=>{
res.object.forEach(item=>{
busTypeData.xaxis.push(item.xaxis);
busTypeData.yaxis.push(item.yaxis)
... ... @@ -142,7 +143,7 @@ export default {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/overview/snapshotNum`,obj,(res)=>{
proxy.$http.get(`/api-web/snapshot/overview/snapshotNum`,queryParams.value,(res)=>{
res.object.forEach(item=>{
snapshotNumData.xaxis.push(item.xaxis);
snapshotNumData.yaxis.push(item.yaxis)
... ... @@ -162,10 +163,10 @@ export default {
})
var peopleSSChartsData = [];
proxy.$http.get(`/api-web/snapshot/overview/snapshotNumByUser`,obj,(res)=>{
proxy.$http.get(`/api-web/snapshot/overview/snapshotNumByUser`,queryParams.value,(res)=>{
res.object.forEach(item=>{
let list = {};
list.name = item.xaxis + item.yaxis;
list.name = item.xaxis + '('+item.yaxis+ ')';
list.value = item.yaxis;
peopleSSChartsData.push(list);
})
... ... @@ -181,6 +182,31 @@ export default {
console.log(err);
})
}
// 查询事件
let handleQuery = ()=> {
queryParams.value.pageSize=10;
queryParams.value.pageNum=1;
getDataList();
getEchartsData();
}
let getResType = (arr) => {
let types = arr.map(function (v) {
return v.id;
});
queryParams.value.resType = types.join(',');
}
let getBizType = (arr) => {
let types = arr.map(function (v) {
return v.busId;
});
queryParams.value.busId = types.join(',');
}
let getUser = (arr) => {
let types = arr.map(function (v) {
return v.username;
});
queryParams.value.userName = types.join(',');
}
// 按钮组点击事件
let handleBtnGroup = (val)=>{
... ... @@ -226,6 +252,18 @@ export default {
type: 'category',
data: [],
axisTick:false,
axisLabel: {
interval: 0,
formatter: val => {
// 标签长度
const valLength = val.length
if (valLength > 8) {
return val.slice(0,7) + '...';
} else {
return val
}
}
}
},
yAxis: {
type: 'value',
... ... @@ -273,19 +311,14 @@ export default {
data: [],
axisTick:false,
axisLabel: {
// x轴文本换行
formatter: function (params,index) {
if (params.length>10){
var newParamsName = '' // 最终拼接成的字符串
let end1 = Math.ceil(params.length / 2);
let end2 = params.length-end1;
let str1 = params.substr(0,end1);
let str2 = params.substr(end1+1,end2);
newParamsName = str1+'\n'+str2;
// console.log(params.length,params);
return newParamsName
}else {
return params
interval: 0,
formatter: val => {
// 标签长度
const valLength = val.length
if (valLength > 8) {
return val.slice(0,7) + '...';
} else {
return val
}
}
}
... ... @@ -419,7 +452,7 @@ export default {
proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('删除成功');
getDataList();
handleQuery();
}
})
}
... ... @@ -491,7 +524,11 @@ export default {
showBus,
cancelBtn,
title,
busType
busType,
getResType,
getBizType,
handleQuery,
getUser
}
}
}
... ...