diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.html b/hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.html
new file mode 100644
index 0000000..21006b0
--- /dev/null
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.html
@@ -0,0 +1,13 @@
+<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>
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.js b/hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.js
new file mode 100644
index 0000000..005fbaf
--- /dev/null
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/inputusertree/index.js
@@ -0,0 +1,131 @@
+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() {
+
+
+ }
+}
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/main.js b/hg-monitor-web-base/src/main/resources/static/vue3/src/main.js
index f6ecc26..778803e 100644
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/main.js
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/main.js
@@ -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 中时……
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshot/index.js b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshot/index.js
index 3508f02..0aa45b8 100644
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshot/index.js
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshot/index.js
@@ -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',
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.html b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.html
index 7352735..9e0815c 100644
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.html
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.html
@@ -1,7 +1,33 @@
<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>
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.js b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.js
index e558e43..1900ff4 100644
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.js
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/snapshotOverview/index.js
@@ -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
}
}
}