monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 3489c3522bd7ec26704faac73d2e4db5ced7d3c4 1 parent 0ad61b56

快照概览添加快捷搜索

Inline Side-by-side
Showing 6 changed files with 262 additions and 40 deletions
  1 +<div>
  2 + <el-select :size="$global.elementConfig.size.input" :collapse-tags="true" :filter-method="selectFilterMethod" :filterable="isFilter"
  3 + :size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="选择用户"
  4 + style="min-width: 120px;" v-model="modelValueLabel">
  5 + <el-option :value="modelValue" style="height: auto;padding: 0;">
  6 + <el-tree :check-on-click-node="true" :check-strictly="false" :data="list" :default-expand-all="isDefaultAll"
  7 + :empty-text="emptyText" :expand-on-click-node="true" :filter-node-method="filterNode"
  8 + :props="defaultProps" :show-checkbox="isMultiple" :show-checkbox="checkbox" @check-change="handleCheckChange"
  9 + node-key="id" node-key="id" ref="userTree">
  10 + </el-tree>
  11 + </el-option>
  12 + </el-select>
  13 +</div>
  1 +export default {
  2 + template: '',
  3 + name: 'user-tree-input',
  4 + props: {
  5 + // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
  6 + echoObj: {},
  7 + // 是否开启搜索
  8 + isFilter: {
  9 + default: true
  10 + },
  11 + // 尺寸
  12 + size: {
  13 + default: ''
  14 + },
  15 + placeholderText: {
  16 + default: '选择用户'
  17 + },
  18 + isTag: {
  19 + default: true
  20 + },
  21 + isDefaultAll: {
  22 + default: true
  23 + },
  24 + // 点击节点是否展开
  25 + expandClickNode: {
  26 + default: false
  27 + },
  28 + // 字段key，用于取出数据中的名字
  29 + fieldName: {
  30 + default: 'title'
  31 + },
  32 + emptyText: {
  33 + default: '无匹配项'
  34 + },
  35 + // 字段key， 数据中的id
  36 + fieldId: {
  37 + default: ''
  38 + },
  39 + // 配置是否可多选
  40 + isMultiple: {
  41 + type: Boolean,
  42 + default: true
  43 + },
  44 +
  45 + },
  46 + data() {
  47 + return {
  48 + defaultProps: {
  49 + children: 'children',
  50 + label: 'nickname'
  51 + },
  52 + list: [],
  53 + // 实际选中值
  54 + modelValue: [],
  55 + // 下拉框绑定值(选中值名字)
  56 + modelValueLabel: []
  57 + }
  58 + },
  59 + methods: {
  60 + selectClose(bool) {
  61 + if (bool) {
  62 + this.selectFilterMethod('')
  63 + }
  64 + },
  65 + selectFilterMethod(val) {
  66 + // 下拉框调用tree树筛选
  67 + this.$refs.userTree.filter(val)
  68 + },
  69 + selectChangeMethod(e) {
  70 + var arrNew = []
  71 + var dataLength = this.modelValue.length
  72 + var eLength = e.length
  73 + for (var i = 0; i < dataLength; i++) {
  74 + for (var j = 0; j < eLength; j++) {
  75 + if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
  76 + arrNew.push(this.modelValue[i])
  77 + }
  78 + }
  79 + }
  80 + // 设置勾选的值
  81 + this.$refs.userTree.setCheckedNodes(arrNew)
  82 + },
  83 + filterNode(value, data) {
  84 + if (!value) return true
  85 +
  86 + return data[this.fieldName].indexOf(value) !== -1
  87 + },
  88 + handleCheckChange(data, checked, indeterminate) {
  89 + let that = this;
  90 +
  91 + var selectArr = [];
  92 + selectArr.push(data);
  93 + // data[that.defaultProps.children].forEach(function (v) {
  94 + // selectArr.push(data);
  95 + // });
  96 +
  97 + if (checked) {
  98 + // 已选中
  99 + that.modelValue = that.modelValue.concat(selectArr)
  100 + } else {
  101 + that.modelValue.forEach(function (v, i) {
  102 + selectArr.forEach(function (v1) {
  103 + if (v.busId == v1.busId) {
  104 + that.modelValue.splice(i, 1);
  105 + }
  106 + })
  107 + })
  108 + }
  109 + that.modelValueLabel = that.modelValue.map(function (v) {
  110 + return v[that.defaultProps.label];
  111 + });
  112 + that.$emit('callback', this.modelValue)
  113 + }
  114 + },
  115 + watch: {},
  116 + mounted() {
  117 + let that = this;
  118 + //加载资源列表
  119 + const {proxy} = Vue.getCurrentInstance()
  120 + // 加载列表
  121 + proxy.$http.get("/api-user/users/getAll", {}, function (res) {
  122 + if (res) {
  123 + that.list = res;
  124 + }
  125 + })
  126 + },
  127 + created() {
  128 +
  129 +
  130 + }
  131 +}
@@ -46,9 +46,9 @@ Promise.all([ @@ -46,9 +46,9 @@ Promise.all([
46 //富文本框组件 46 //富文本框组件
47 .component('cm-wang-editor', Vue.defineAsyncComponent(() => myImport('components/common/wangEditorComponent/index'))) 47 .component('cm-wang-editor', Vue.defineAsyncComponent(() => myImport('components/common/wangEditorComponent/index')))
48 //告警通知统计信息 48 //告警通知统计信息
49 - .component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index')));  
50 -  
51 - 49 + .component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index')))
  50 + //告警通知统计信息
  51 + .component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index')));
52 // // 自定义指令 52 // // 自定义指令
53 // app.directive('permissions', { 53 // app.directive('permissions', {
54 // // 当被绑定的元素插入到 DOM 中时…… 54 // // 当被绑定的元素插入到 DOM 中时……
@@ -158,6 +158,22 @@ export default { @@ -158,6 +158,22 @@ export default {
158 type: 'category', 158 type: 'category',
159 data: [], 159 data: [],
160 axisTick:false, 160 axisTick:false,
  161 + axisLabel: {
  162 + interval: 0,
  163 + formatter: val => {
  164 + // 一行字数
  165 + const max = 6
  166 + // 标签长度
  167 + const valLength = val.length
  168 + // 换行数
  169 + const rowNum = valLength / 6
  170 + if (valLength > 6) {
  171 + return val.slice(0,5) + '...';
  172 + } else {
  173 + return val
  174 + }
  175 + }
  176 + }
161 }, 177 },
162 yAxis: { 178 yAxis: {
163 type: 'value', 179 type: 'value',
@@ -205,22 +221,21 @@ export default { @@ -205,22 +221,21 @@ export default {
205 data: [], 221 data: [],
206 axisTick:false, 222 axisTick:false,
207 axisLabel: { 223 axisLabel: {
208 - // x轴文本换行  
209 - formatter: function (params,index) {  
210 - if (params.length>10){  
211 - var newParamsName = '' // 最终拼接成的字符串  
212 - let end1 = Math.ceil(params.length / 2);  
213 - let end2 = params.length-end1;  
214 - let str1 = params.substr(0,end1);  
215 - let str2 = params.substr(end1+1,end2);  
216 - newParamsName = str1+'\n'+str2;  
217 - return newParamsName  
218 - }else {  
219 - return params 224 + interval: 0,
  225 + formatter: val => {
  226 + // 一行字数
  227 + const max = 6
  228 + // 标签长度
  229 + const valLength = val.length
  230 + // 换行数
  231 + const rowNum = valLength / 6
  232 + if (valLength > 6) {
  233 + return val.slice(0,5) + '...';
  234 + } else {
  235 + return val
220 } 236 }
221 } 237 }
222 } 238 }
223 -  
224 }, 239 },
225 yAxis: { 240 yAxis: {
226 type: 'value', 241 type: 'value',
1 <div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}"> 1 <div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"> 2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
3 <div class="search"> 3 <div class="search">
4 - <div class="condition esData-conditon" style="justify-content: end;width: 100%;"> 4 + <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
  5 + <el-form :inline="true">
  6 + <el-form-item>
  7 + <el-tooltip placement="bottom-start">
  8 + <template #content> 资源名称 <br /> 资源ip <br /> 业务名称</template>
  9 + <el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" />
  10 + </el-tooltip>
  11 + </el-form-item>
  12 + <el-form-item>
  13 + <el-dropdown>
  14 + <cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/>
  15 + </el-dropdown>
  16 + </el-form-item>
  17 + <el-form-item>
  18 + <el-dropdown>
  19 + <cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/>
  20 + </el-dropdown>
  21 + </el-form-item>
  22 + <el-form-item>
  23 + <el-dropdown>
  24 + <cm-user-type-tree-input @callback="getUser" clearable collapseTags multiple/>
  25 + </el-dropdown>
  26 + </el-form-item>
  27 + <el-form-item>
  28 + <el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button>
  29 + </el-form-item>
  30 + </el-form>
5 <el-button-group> 31 <el-button-group>
6 <el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button> 32 <el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
7 <el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近7天</el-button> 33 <el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近7天</el-button>
@@ -8,6 +8,10 @@ export default { @@ -8,6 +8,10 @@ export default {
8 let datetimerange = Vue.ref([]); 8 let datetimerange = Vue.ref([]);
9 let visiblePopover = Vue.ref(false); 9 let visiblePopover = Vue.ref(false);
10 let queryParams = Vue.ref({ 10 let queryParams = Vue.ref({
  11 + keyWord:'',
  12 + resType:'',
  13 + busId:'',
  14 + userName:'',
11 time:"today", 15 time:"today",
12 pageNum: 1, 16 pageNum: 1,
13 pageSize: 10, 17 pageSize: 10,
@@ -89,14 +93,11 @@ export default { @@ -89,14 +93,11 @@ export default {
89 }; 93 };
90 94
91 let getEchartsData = ()=>{ 95 let getEchartsData = ()=>{
92 - let obj = {  
93 - time:queryParams.value.time,  
94 - }  
95 let resTypeData = { 96 let resTypeData = {
96 xaxis:[], 97 xaxis:[],
97 yaxis:[], 98 yaxis:[],
98 } 99 }
99 - proxy.$http.get(`/api-web/snapshot/overview/resTypeTop`,obj,(res)=>{ 100 + proxy.$http.get(`/api-web/snapshot/overview/resTypeTop`,queryParams.value,(res)=>{
100 res.object.forEach(item=>{ 101 res.object.forEach(item=>{
101 resTypeData.xaxis.push(item.xaxis); 102 resTypeData.xaxis.push(item.xaxis);
102 resTypeData.yaxis.push(item.yaxis) 103 resTypeData.yaxis.push(item.yaxis)
@@ -119,7 +120,7 @@ export default { @@ -119,7 +120,7 @@ export default {
119 xaxis:[], 120 xaxis:[],
120 yaxis:[], 121 yaxis:[],
121 } 122 }
122 - proxy.$http.get(`/api-web/snapshot/overview/busTop`,obj,(res)=>{ 123 + proxy.$http.get(`/api-web/snapshot/overview/busTop`,queryParams.value,(res)=>{
123 res.object.forEach(item=>{ 124 res.object.forEach(item=>{
124 busTypeData.xaxis.push(item.xaxis); 125 busTypeData.xaxis.push(item.xaxis);
125 busTypeData.yaxis.push(item.yaxis) 126 busTypeData.yaxis.push(item.yaxis)
@@ -142,7 +143,7 @@ export default { @@ -142,7 +143,7 @@ export default {
142 xaxis:[], 143 xaxis:[],
143 yaxis:[], 144 yaxis:[],
144 } 145 }
145 - proxy.$http.get(`/api-web/snapshot/overview/snapshotNum`,obj,(res)=>{ 146 + proxy.$http.get(`/api-web/snapshot/overview/snapshotNum`,queryParams.value,(res)=>{
146 res.object.forEach(item=>{ 147 res.object.forEach(item=>{
147 snapshotNumData.xaxis.push(item.xaxis); 148 snapshotNumData.xaxis.push(item.xaxis);
148 snapshotNumData.yaxis.push(item.yaxis) 149 snapshotNumData.yaxis.push(item.yaxis)
@@ -162,10 +163,10 @@ export default { @@ -162,10 +163,10 @@ export default {
162 }) 163 })
163 164
164 var peopleSSChartsData = []; 165 var peopleSSChartsData = [];
165 - proxy.$http.get(`/api-web/snapshot/overview/snapshotNumByUser`,obj,(res)=>{ 166 + proxy.$http.get(`/api-web/snapshot/overview/snapshotNumByUser`,queryParams.value,(res)=>{
166 res.object.forEach(item=>{ 167 res.object.forEach(item=>{
167 let list = {}; 168 let list = {};
168 - list.name = item.xaxis + item.yaxis; 169 + list.name = item.xaxis + '('+item.yaxis+ ')';
169 list.value = item.yaxis; 170 list.value = item.yaxis;
170 peopleSSChartsData.push(list); 171 peopleSSChartsData.push(list);
171 }) 172 })
@@ -181,6 +182,31 @@ export default { @@ -181,6 +182,31 @@ export default {
181 console.log(err); 182 console.log(err);
182 }) 183 })
183 } 184 }
  185 + // 查询事件
  186 + let handleQuery = ()=> {
  187 + queryParams.value.pageSize=10;
  188 + queryParams.value.pageNum=1;
  189 + getDataList();
  190 + getEchartsData();
  191 + }
  192 + let getResType = (arr) => {
  193 + let types = arr.map(function (v) {
  194 + return v.id;
  195 + });
  196 + queryParams.value.resType = types.join(',');
  197 + }
  198 + let getBizType = (arr) => {
  199 + let types = arr.map(function (v) {
  200 + return v.busId;
  201 + });
  202 + queryParams.value.busId = types.join(',');
  203 + }
  204 + let getUser = (arr) => {
  205 + let types = arr.map(function (v) {
  206 + return v.username;
  207 + });
  208 + queryParams.value.userName = types.join(',');
  209 + }
184 210
185 // 按钮组点击事件 211 // 按钮组点击事件
186 let handleBtnGroup = (val)=>{ 212 let handleBtnGroup = (val)=>{
@@ -226,6 +252,18 @@ export default { @@ -226,6 +252,18 @@ export default {
226 type: 'category', 252 type: 'category',
227 data: [], 253 data: [],
228 axisTick:false, 254 axisTick:false,
  255 + axisLabel: {
  256 + interval: 0,
  257 + formatter: val => {
  258 + // 标签长度
  259 + const valLength = val.length
  260 + if (valLength > 8) {
  261 + return val.slice(0,7) + '...';
  262 + } else {
  263 + return val
  264 + }
  265 + }
  266 + }
229 }, 267 },
230 yAxis: { 268 yAxis: {
231 type: 'value', 269 type: 'value',
@@ -273,19 +311,14 @@ export default { @@ -273,19 +311,14 @@ export default {
273 data: [], 311 data: [],
274 axisTick:false, 312 axisTick:false,
275 axisLabel: { 313 axisLabel: {
276 - // x轴文本换行  
277 - formatter: function (params,index) {  
278 - if (params.length>10){  
279 - var newParamsName = '' // 最终拼接成的字符串  
280 - let end1 = Math.ceil(params.length / 2);  
281 - let end2 = params.length-end1;  
282 - let str1 = params.substr(0,end1);  
283 - let str2 = params.substr(end1+1,end2);  
284 - newParamsName = str1+'\n'+str2;  
285 - // console.log(params.length,params);  
286 - return newParamsName  
287 - }else {  
288 - return params 314 + interval: 0,
  315 + formatter: val => {
  316 + // 标签长度
  317 + const valLength = val.length
  318 + if (valLength > 8) {
  319 + return val.slice(0,7) + '...';
  320 + } else {
  321 + return val
289 } 322 }
290 } 323 }
291 } 324 }
@@ -419,7 +452,7 @@ export default { @@ -419,7 +452,7 @@ export default {
419 proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) { 452 proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) {
420 if (res && res.success) { 453 if (res && res.success) {
421 proxy.$global.showMsg('删除成功'); 454 proxy.$global.showMsg('删除成功');
422 - getDataList(); 455 + handleQuery();
423 } 456 }
424 }) 457 })
425 } 458 }
@@ -491,7 +524,11 @@ export default { @@ -491,7 +524,11 @@ export default {
491 showBus, 524 showBus,
492 cancelBtn, 525 cancelBtn,
493 title, 526 title,
494 - busType 527 + busType,
  528 + getResType,
  529 + getBizType,
  530 + handleQuery,
  531 + getUser
495 } 532 }
496 } 533 }
497 } 534 }