monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 4d7470a8443fb1e612c093aec31a0c4b83f621b6 2 parents c96dff8a 3840b2c2

Merge branch 'master-yjp' into 'master' 

比对分析第二页开发



See merge request !81
Inline Side-by-side
Showing 2 changed files with 399 additions and 19 deletions
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 </el-dropdown-menu> 20 </el-dropdown-menu>
21 </template> 21 </template>
22 </el-dropdown> 22 </el-dropdown>
23 - <el-dropdown @command="frequencycheck"> 23 + <el-dropdown @command="handleCommand">
24 <el-button type="primary"> 24 <el-button type="primary">
25 契合频率 25 契合频率
26 <el-icon class="el-icon--right"> 26 <el-icon class="el-icon--right">
@@ -28,9 +28,10 @@ @@ -28,9 +28,10 @@
28 </el-icon> 28 </el-icon>
29 </el-button> 29 </el-button>
30 <template #dropdown> 30 <template #dropdown>
31 - <el-dropdown-menu>  
32 - <el-dropdown-item v-for="(item,index) in frequencyArr" v-text="item"  
33 - :command="item"></el-dropdown-item> 31 + <el-dropdown-menu >
  32 + <el-dropdown-item v-for="item in frequencyArr"
  33 + :key = "item.ddicId"
  34 + :command="{value:item.ddicId,label:item.ddicName,flag:1}">{{item.ddicName}}</el-dropdown-item>
34 </el-dropdown-menu> 35 </el-dropdown-menu>
35 </template> 36 </template>
36 </el-dropdown> 37 </el-dropdown>
@@ -39,8 +40,8 @@ @@ -39,8 +40,8 @@
39 </el-row> 40 </el-row>
40 <el-row> 41 <el-row>
41 <el-col :span="24"> 42 <el-col :span="24">
42 - <div class="classLine">  
43 - <lineChart></lineChart> 43 + <div class="classLine" id="responsemonitor_ref">
  44 + <LineChart :optionData="optionData" v-if="optionData" ref="responseLine"></LineChart>
44 </div> 45 </div>
45 </el-col> 46 </el-col>
46 </el-row> 47 </el-row>
@@ -94,7 +95,7 @@ @@ -94,7 +95,7 @@
94 </el-row> 95 </el-row>
95 <el-row> 96 <el-row>
96 <el-col span="6" class="analysis-bottom-button"> 97 <el-col span="6" class="analysis-bottom-button">
97 - <el-button type="primary" @click="reset()">重置</el-button> 98 + <el-button type="primary" @click="onReset()">重置</el-button>
98 99
99 </el-col> 100 </el-col>
100 <el-col span="6" class ="analysis-bottom-button"> 101 <el-col span="6" class ="analysis-bottom-button">
@@ -106,17 +107,35 @@ @@ -106,17 +107,35 @@
106 <el-col :span="18"> 107 <el-col :span="18">
107 <el-tabs type="border-card"> 108 <el-tabs type="border-card">
108 <el-tab-pane label="已添加"> 109 <el-tab-pane label="已添加">
109 - <cm-table-page :columns="addedObj.columns" :dataList="addedObj.maps" @loaddata="getPage" 110 + <cm-table-page :columns="columns" :dataList="addedObj" @loaddata="getPage"
110 :showIndex="true" 111 :showIndex="true"
111 :showBorder="true" :currentPage="currentPage" :total="addedTotal" :loading="false" 112 :showBorder="true" :currentPage="currentPage" :total="addedTotal" :loading="false"
112 :showPage="true" :height="(height - 95)" :maxWidth="max"> 113 :showPage="true" :height="(height - 95)" :maxWidth="max">
  114 + <template #tools>
  115 + <el-table-column label="操作" align="center">
  116 + <template #default="scope">
  117 + <el-button type="text" size="mini" @click.prevent="deleteRow(row,scope.$index)">
  118 + <i class="el-icon-delete"/>
  119 + </el-button>
  120 + </template>
  121 + </el-table-column>
  122 + </template>
113 </cm-table-page> 123 </cm-table-page>
114 </el-tab-pane> 124 </el-tab-pane>
115 <el-tab-pane label="未添加"> 125 <el-tab-pane label="未添加">
116 - <cm-table-page :columns="noaddObj.columns" :dataList="noaddObj.maps" @loaddata="getPage" 126 + <cm-table-page :columns="columns" :dataList="noaddObj" @loaddata="getPage"
117 :showIndex="true" 127 :showIndex="true"
118 :showBorder="true" :currentPage="currentPage" :total="noaddTotal" :loading="false" 128 :showBorder="true" :currentPage="currentPage" :total="noaddTotal" :loading="false"
119 :showPage="true" :height="(height - 95)" :maxWidth="max"> 129 :showPage="true" :height="(height - 95)" :maxWidth="max">
  130 + <template #tools>
  131 + <el-table-column label="操作" align="center">
  132 + <template #default="scope">
  133 + <el-button type="text" size="mini" @click.prevent="handleUpdate(row,scope.$index)">
  134 + <i class="el-icon-folder-add"/>
  135 + </el-button>
  136 + </template>
  137 + </el-table-column>
  138 + </template>
120 </cm-table-page> 139 </cm-table-page>
121 </el-tab-pane> 140 </el-tab-pane>
122 </el-tabs> 141 </el-tabs>
@@ -124,4 +143,33 @@ @@ -124,4 +143,33 @@
124 </el-row> 143 </el-row>
125 </div> 144 </div>
126 </el-row> 145 </el-row>
  146 + <el-dialog :title="选择追加分类" :visible.sync="dialogFormVisible">
  147 + <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
  148 + <el-form-item label="flag" prop="flag">
  149 + <div style="display:inline-block;">
  150 + <el-radio-group v-model="autoWidth">
  151 + <el-radio :label="true" border>
  152 + 追加场景分类
  153 + </el-radio>
  154 + <el-radio :label="false" border>
  155 + 新增场景分类
  156 + </el-radio>
  157 + </el-radio-group>
  158 + </div>
  159 + </el-form-item>
  160 + <el-form-item label="Status">
  161 + <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
  162 + <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
  163 + </el-select>
  164 + </el-form-item>
  165 + </el-form>
  166 + <div slot="footer" class="dialog-footer">
  167 + <el-button @click="dialogFormVisible = false">
  168 + 取消
  169 + </el-button>
  170 + <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
  171 + 确认
  172 + </el-button>
  173 + </div>
  174 + </el-dialog>
127 </div> 175 </div>
1 export default { 1 export default {
2 name: 'addIndex', 2 name: 'addIndex',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data() { 9 data() {
6 return { 10 return {
  11 + commandVal:'max',
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + apiUrl:'/api-web/ContrastAnalysis/getLineData',
  14 + optionData:'',
  15 + titleFontSize:'30',
  16 + allData: '',
  17 + newCommandVal:this.commandVal,
  18 + startValue: 0, // 区域缩放的起点值
  19 + endValue: 6, // 区域缩放的终点值
  20 + timerId: null,// 定时器的标识
7 props: { 21 props: {
8 label: 'label', 22 label: 'label',
9 children: 'children' 23 children: 'children'
@@ -11,9 +25,22 @@ export default { @@ -11,9 +25,22 @@ export default {
11 } 25 }
12 }, 26 },
13 created() { 27 created() {
14 - this.loadResList() 28 + this.loadResList();
  29 + this.loadFrequency();
  30 + this.getData()
  31 + },
  32 + props: {
  33 + dialogFormVisible:false,
  34 + height: {
  35 + type: Number,
  36 + default: 0
  37 + },
  38 + pageSize: {
  39 + type: Number,
  40 + default: 10
  41 + },
15 }, 42 },
16 - setup() { 43 + setup(props, {attrs, slots, emit}) {
17 const {proxy} = Vue.getCurrentInstance(); 44 const {proxy} = Vue.getCurrentInstance();
18 // 分页信息 45 // 分页信息
19 const pageInfo = Vue.reactive({ 46 const pageInfo = Vue.reactive({
@@ -23,15 +50,60 @@ export default { @@ -23,15 +50,60 @@ export default {
23 keyWords: '' 50 keyWords: ''
24 51
25 }) 52 })
  53 + let temp ={
  54 + }
  55 + let dialogFormVisible= false
  56 + let dialogStatus= ''
  57 + let textMap ={
  58 + update: '追加场景',
  59 + create: 'Create'
  60 + }
  61 + let columns = Vue.ref([
  62 +
  63 + {
  64 + prop: 'busId',
  65 + label: '业务系统',
  66 + sortable: true,
  67 + align: 'right',
  68 + },
  69 + {
  70 + prop: 'resTypeName',
  71 + label: '资源类型',
  72 + sortable: true,
  73 + align: 'right',
  74 + },
  75 + {
  76 + prop: 'resName',
  77 + label: '资源名称',
  78 + sortable: true,
  79 + align: 'right',
  80 + },
  81 + {
  82 + prop: 'ip',
  83 + label: 'ip地址',
  84 + sortable: true,
  85 + align: 'right',
  86 + },
  87 + {
  88 + prop: 'kpiId',
  89 + label: '指标类型',
  90 + sortable: true,
  91 + align: 'right',
  92 + }
  93 +
  94 + ]);
  95 + const allData=Vue.ref({});
  96 + let currentPage = Vue.ref(1);
  97 + let frequencyArr= Vue.ref([]);
26 // 表格数据对象 98 // 表格数据对象
27 - const addedObj = Vue.ref({}); 99 + const addedObj = Vue.ref([]);
28 let resTypeArr = Vue.ref([]); 100 let resTypeArr = Vue.ref([]);
29 let busTypeArr = Vue.ref([]); 101 let busTypeArr = Vue.ref([]);
30 let kpiTypeArr = Vue.ref([]); 102 let kpiTypeArr = Vue.ref([]);
31 // 搜索框内容 103 // 搜索框内容
32 let addedTotal = Vue.ref(0); 104 let addedTotal = Vue.ref(0);
33 // 表格数据对象 105 // 表格数据对象
34 - const noaddObj = Vue.ref({}); 106 + const noaddObj = Vue.ref([]);
35 107
36 let noaddTotal = Vue.ref(0); 108 let noaddTotal = Vue.ref(0);
37 // 计算减去左侧树的宽度 109 // 计算减去左侧树的宽度
@@ -40,35 +112,79 @@ export default { @@ -40,35 +112,79 @@ export default {
40 let treeWidth = (right / 24) * 4; 112 let treeWidth = (right / 24) * 4;
41 return right - treeWidth; 113 return right - treeWidth;
42 })(); 114 })();
  115 + let loadFrequency = ()=> {
  116 + let param = {
  117 + ddicName:'Day'
  118 + }
  119 + proxy.$http.get(`/api-web/ContrastAnalysis/selectTogetherRate`, param, function (res) {
  120 + if (res && res.data) {
  121 + frequencyArr = res.data;
  122 + console.log(frequencyArr);
  123 + }
  124 + });
  125 + }
43 let loadResList = () => { 126 let loadResList = () => {
44 // 查询参数 127 // 查询参数
45 let params = { 128 let params = {
46 page: pageInfo.page, 129 page: pageInfo.page,
47 limit: pageInfo.limit, 130 limit: pageInfo.limit,
48 - // keyWords: pageInfo.keyWords, 131 + // keyWords: this.form.keyWords.value,
49 resType: resTypeArr.value.join(','), 132 resType: resTypeArr.value.join(','),
50 kpiType: kpiTypeArr.value.join(','), 133 kpiType: kpiTypeArr.value.join(','),
51 bizType: busTypeArr.value.join(','), 134 bizType: busTypeArr.value.join(','),
52 - configId: 1, 135 + configId: 64,
53 } 136 }
54 proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) { 137 proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
55 - if (res && res.object) { 138 + if (res && res.data) {
56 addedObj.value = res.data; 139 addedObj.value = res.data;
57 addedTotal.value = res.count; 140 addedTotal.value = res.count;
58 } 141 }
59 }); 142 });
60 proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) { 143 proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
61 - if (res && res.object) { 144 + if (res && res.data) {
62 noaddObj.value = res.data; 145 noaddObj.value = res.data;
63 noaddTotal.value = res.count; 146 noaddTotal.value = res.count;
64 } 147 }
65 }); 148 });
66 } 149 }
  150 + let deleteRow = (row,index) => {
  151 + proxy.$global.confirm("确认删除该项吗？", function () {
  152 + if(row.isAdd && row.isAdd == 1){
  153 + proxy.$global.showMsg("删除成功！")
  154 + dataList.value.splice(index, 1);
  155 + } else {
  156 + // 删除配置项
  157 + proxy.$http.post(`/api-web/ContrastAnalysis/delete/${row.id}`, {}, function (res) {
  158 + if (res && res.success) {
  159 + proxy.$global.showMsg("删除成功！");
  160 + dataList.value.splice(index, 1);
  161 + } else {
  162 + proxy.$global.showMsg(res.msg && res.msg != '' ? res.msg : "删除失败！", "error");
  163 + }
  164 + });
  165 + }
  166 + })
  167 + }
  168 + let handleUpdate =(row,index) =>{
  169 + console.log(row);
  170 + console.log(index);
  171 + // this.temp = Object.assign({}, row) // copy obj
  172 + // this.temp.timestamp = new Date(this.temp.timestamp)
  173 + // this.dialogStatus = 'update'
  174 + dialogFormVisible = true
  175 + // this.nextTick(() => {
  176 + // this.$refs['dataForm'].clearValidate()
  177 + // })
  178 + }
67 // 点击按钮搜索 179 // 点击按钮搜索
68 let onBtnSearch = () => { 180 let onBtnSearch = () => {
69 pageInfo.page = 1; 181 pageInfo.page = 1;
70 loadResList(); 182 loadResList();
71 } 183 }
  184 +
  185 + let onReset = () => {
  186 +
  187 + }
72 let getResType = (arr) => { 188 let getResType = (arr) => {
73 console.log(arr); 189 console.log(arr);
74 var types = arr.map(function (v) { 190 var types = arr.map(function (v) {
@@ -79,7 +195,7 @@ export default { @@ -79,7 +195,7 @@ export default {
79 } 195 }
80 let getKpiType = (arr) => { 196 let getKpiType = (arr) => {
81 console.log(arr); 197 console.log(arr);
82 - var types = arr.map(function (v) { 198 + var types = arr.map(function (v) {e
83 return v.kpiId; 199 return v.kpiId;
84 }); 200 });
85 kpiTypeArr.value = types; 201 kpiTypeArr.value = types;
@@ -94,10 +210,21 @@ export default { @@ -94,10 +210,21 @@ export default {
94 loadResList(); 210 loadResList();
95 } 211 }
96 return { 212 return {
  213 + allData,
  214 + temp,
  215 + dialogFormVisible,
  216 + dialogStatus,
  217 + textMap,
  218 + loadFrequency,
  219 + frequencyArr,
97 loadResList, 220 loadResList,
98 getResType, 221 getResType,
99 getKpiType, 222 getKpiType,
100 onBtnSearch, 223 onBtnSearch,
  224 + handleUpdate,
  225 + deleteRow,
  226 + currentPage,
  227 + columns,
101 addedObj, 228 addedObj,
102 addedTotal, 229 addedTotal,
103 noaddObj, 230 noaddObj,
@@ -105,5 +232,210 @@ export default { @@ -105,5 +232,210 @@ export default {
105 max 232 max
106 } 233 }
107 234
  235 + },
  236 + mounted () {
  237 + this.getData()
  238 + window.addEventListener('resize', this.screenAdapter)
  239 + this.screenAdapter()
  240 + },
  241 + unmounted () {
  242 + window.removeEventListener('resize', this.screenAdapter)
  243 + },
  244 + watch:{
  245 + commandVal(newValue, oldValue) {
  246 + this.newCommandVal=newValue
  247 + this.getData()
  248 + }
  249 +
  250 + },
  251 + methods: {
  252 + getData () {
  253 + let that=this;
  254 + console.log(this.domainName)
  255 + console.log(this.apiUrl)
  256 +
  257 + // 查询参数
  258 + let params = {
  259 + access_token: localStorage.getItem('access_token'),
  260 + timeScope: 'Day',
  261 + frequency: 5,
  262 + resource :{
  263 + resId :'i-k5e0597zznlzz1iaa8cc',
  264 + kpiId : 'KPI05227E45',
  265 + kpiFlg : 'base'
  266 + }
  267 +
  268 + }
  269 + that.$http.post(this.domainName +this.apiUrl, params, function (ret) {
  270 + if(ret){
  271 + let dataArr=[];
  272 + let xAxisData='';
  273 + if(ret.map){
  274 + dataArr=ret.map.y
  275 + xAxisData=ret.map.x
  276 + }else{
  277 + for(let i=0;i<12;i++){
  278 + dataArr.push('0')
  279 + }
  280 +
  281 + }
  282 +
  283 + that.allData= {
  284 + polyline: {
  285 + title: '',
  286 + legend : ret.map.legend,
  287 + unit: ret.map.units,
  288 + data: {
  289 + data: dataArr
  290 + }
  291 + },
  292 + xAxis: xAxisData
  293 +
  294 + }
  295 + that.updateChart()
  296 + }
  297 + })
  298 +
  299 + },
  300 + updateChart () {
  301 + console.log("ddd",this.allData)
  302 + // 半透明的颜色值
  303 + const colorArr1 = [
  304 + 'rgba(11, 168, 44, 0.5)',
  305 + 'rgba(44, 110, 255, 0.5)',
  306 + 'rgba(22, 242, 217, 0.5)',
  307 + 'rgba(35, 255, 255, 0.5)',
  308 + 'rgba(254, 33, 30, 0.5)',
  309 + 'rgba(250, 105, 0, 0.5)'
  310 + ]
  311 + // 全透明的颜色值
  312 + const colorArr2 = [
  313 + 'rgba(11, 168, 44, 0)',
  314 + 'rgba(44, 110, 255, 0)',
  315 + 'rgba(22, 242, 217, 0)',
  316 + 'rgba(35, 255, 255, 0)',
  317 + 'rgba(254, 33, 30, 0)',
  318 + 'rgba(250, 105, 0, 0)'
  319 + ]
  320 + const timeArr = this.allData.xAxis
  321 + const seriesData = this.allData.polyline.data
  322 + // 图例的数据
  323 + // const legendArr = this.allData.polyline.data.map(item => {
  324 + // return item.name
  325 + // })
  326 + const legendArr=[];
  327 + legendArr.push(this.allData.polyline.legend);
  328 + const title = this.allData.polyline.title
  329 +
  330 +
  331 + this.optionData = {
  332 + title: {
  333 + text: title,
  334 + left: '10%',
  335 + textStyle: {
  336 + fontSize: this.titleFontSize*0.6,
  337 + color:'#ffffff'
  338 + }
  339 + },
  340 + tooltip: {
  341 + trigger: 'axis',
  342 + backgroundColor:'rgba(50,50,50,0.7)',
  343 + borderColor:"#333",
  344 + textStyle:{
  345 + color:"#fff",
  346 + align:'left'
  347 + }
  348 +
  349 + },
  350 + legend: {
  351 + data: legendArr,
  352 + itemHeight:0,//图例圆圈大小设置
  353 + top:'10%',
  354 + right:'20%',
  355 + textStyle: {
  356 + color: '#ffffff',
  357 + fontsize:"12px"
  358 + }
  359 +
  360 + },
  361 + grid: {
  362 + left: '3%',
  363 + right: '4%',
  364 + bottom: '3%',
  365 + containLabel: true,
  366 + },
  367 + xAxis: {
  368 + type: 'category',
  369 + boundaryGap: false,
  370 + data: timeArr,
  371 +
  372 + axisLine:{
  373 + show:false,//是否显示坐标线
  374 + },
  375 + axisTick: {
  376 + show: false //是否显示坐标刻度
  377 + },
  378 + axisLabel:{
  379 + color:'#ffffff',
  380 + },
  381 +
  382 + },
  383 + yAxis: {
  384 + axisLabel: {
  385 + color:'#ffffff',
  386 + },
  387 + splitLine:{
  388 + lineStyle: {
  389 + color:'#0a1b31'
  390 + }
  391 + },
  392 +
  393 + },
  394 + series: {
  395 + type: 'line',
  396 + data: seriesData,
  397 + smooth: true,
  398 + showSymbol:false,
  399 + color:colorArr1[1],
  400 + areaStyle: {
  401 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  402 + {
  403 + offset: 0,
  404 + color: colorArr1[1]
  405 + }, // %0的颜色值
  406 + {
  407 + offset: 1,
  408 + color: colorArr2[1]
  409 + } // 100%的颜色值
  410 + ])
  411 + }
  412 + },
  413 + itemStyle:{
  414 + showSymbol:false
  415 + }
  416 + };
  417 +
  418 + },
  419 +
  420 + screenAdapter () {
  421 + this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
  422 + const adapterOption = {
  423 + title: {
  424 + textStyle: {
  425 + fontSize: this.titleFontSize / 1.5
  426 + }
  427 + },
  428 + legend: {
  429 + itemWidth: this.titleFontSize,
  430 + itemHeight: this.titleFontSize,
  431 + itemGap: this.titleFontSize,
  432 + textStyle: {
  433 + fontSize: this.titleFontSize / 2
  434 + }
  435 + }
  436 + }
  437 +
  438 + },
  439 +
108 } 440 }
109 } 441 }