monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit fce662ad9346f5b834bcfc3f7a9689ab500d5857 2 parents 75f48309 4d7470a8

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web

Inline Side-by-side
Showing 7 changed files with 539 additions and 34 deletions
@@ -2911,6 +2911,92 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -2911,6 +2911,92 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
2911 '#' + id, {tips: 1}); 2911 '#' + id, {tips: 1});
2912 } 2912 }
2913 2913
  2914 + },
  2915 + //详情页事件
  2916 + detailPage: function (resId,resType,editFlag,provider,name,ip,resTypeName,adminName,manageIp,collProtocol) {
  2917 + if(resType == 'NETHARDWARE_LINK'){
  2918 + return;
  2919 + }
  2920 + // 共享设备，厂商是H3C、HDS的设备不让查看详情页，没有数据
  2921 + if(resType == 'STORAGE_SHARE' && (provider == 'H3C' || provider == 'HDS')){
  2922 + return;
  2923 + }
  2924 + // 阿里云，华为云不能点击
  2925 + if(resType == 'ALI_CLOUD_PLAT' || resType == 'HUAWEI_CLOUD_PLAT'){
  2926 + return ;
  2927 + }
  2928 + var nameClickLoading = layer.load(2);
  2929 + var resName = name;
  2930 + if (name && name !== '') {
  2931 + name += '|';
  2932 + }
  2933 + if (resTypeName && resType !== 'HOST_X86SERVER') {
  2934 + name += resTypeName + '|';
  2935 + }
  2936 + if (ip) {
  2937 + if (resType === 'HOST_X86SERVER') {
  2938 + if (collProtocol && (collProtocol.split(",").length > 1 || collProtocol === 'SSH')) {
  2939 + name += '应用IP-' + ip + '|';
  2940 + }
  2941 + } else {
  2942 + name += ip + '|';
  2943 + }
  2944 + }
  2945 + if (resType === 'HOST_X86SERVER' && collProtocol && collProtocol.indexOf('SNMP') !== -1 ) {
  2946 + if (manageIp) {
  2947 + name += '管理IP-' + manageIp + '|';
  2948 + }
  2949 + }
  2950 + if (adminName) {
  2951 + name += adminName + '|';
  2952 + }
  2953 + if (name.length > 0) {
  2954 + name = name.substr(0, name.length - 1);
  2955 + }
  2956 + if (editFlag) {
  2957 + commonDetail.openDetail(resId, resType, name, editFlag, function (data) {
  2958 + $.each(data, function (i, e) {
  2959 + var obj = {};
  2960 + obj.resId = resId;
  2961 + obj.resName = resName;
  2962 + obj.kpiId = e.kpiId;
  2963 + obj.kpiName = e.kpiName;
  2964 + obj.flag = e.flag;
  2965 + obj.unit = e.unit;
  2966 + obj.name = e.name;
  2967 + obj.interval = 'DAY';
  2968 + if (e.kpiName != e.name) {
  2969 + obj.showName = e.kpiName + e.name;
  2970 + } else {
  2971 + obj.showName = e.kpiName;
  2972 + }
  2973 + tabDom(resName, obj.showName, e.name, JSON.stringify(obj))
  2974 + })
  2975 + $(".choose-tab>a").unbind("click").on("click", function () {
  2976 + $(this).parent().remove();
  2977 + })
  2978 + })
  2979 + } else {
  2980 + var pingEnable = $(this).data("pingenable"); //获取pingEnable的值 joke add 20200619
  2981 + if (pingEnable == '2') { //如果pingEnable为2，则进入ping状态详情页面
  2982 + commonDetail.openNewWin('template/detail/pingIndex', name, {'resId': resId}, false);
  2983 + } else { //否则进入监控详情页面
  2984 + commonDetail.openDetail(resId, resType, name, editFlag,null,null,null,true);
  2985 + }
  2986 + }
  2987 + layer.close(nameClickLoading);
  2988 + function tabDom(resName, kpiName, name, info) {
  2989 + //<div class="choose-tab"><span>浙江税务_出口退税_sc_134-内存使用率</span><a href="javascript:;">x</a></div>
  2990 + var html =
  2991 + '<div class="choose-tab">' +
  2992 + '<input type="hidden" name="chooseDataInfo">' +
  2993 + '<span>' + resName + '-' + kpiName + '</span>' +
  2994 + '<a href="javascript:;">x</a>' +
  2995 + '</div>'
  2996 + var $dom = $(html)
  2997 + $dom.find("input[type=hidden][name=chooseDataInfo]").val(info);
  2998 + $(".choose-resKpiInfo>.layui-card-header").append($dom);
  2999 + }
2914 } 3000 }
2915 }; 3001 };
2916 //对外暴露的接口 3002 //对外暴露的接口
@@ -2763,8 +2763,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -2763,8 +2763,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
2763 2763
2764 }, 2764 },
2765 2765
2766 - //打开详细信息  
2767 - openDetail:function (resId,resType,title,editFlag,fn,cancelfn,type) { 2766 + //打开详细信息 旧版不传sign 新版传sign_
  2767 + openDetail:function (resId,resType,title,editFlag,fn,cancelfn,type,sign_) {
2768 resId = encodeURIComponent(resId) 2768 resId = encodeURIComponent(resId)
2769 layer.load(2); 2769 layer.load(2);
2770 if(editFlag && editFlag == true){ 2770 if(editFlag && editFlag == true){
@@ -2941,7 +2941,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -2941,7 +2941,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
2941 layer.alert('该资源只对接TRAP告警信息!',{icon:0}); 2941 layer.alert('该资源只对接TRAP告警信息!',{icon:0});
2942 return; 2942 return;
2943 } 2943 }
2944 - obj.openNewWin(url, title, params, editFlag, fn, cancelfn, type); 2944 + obj.openNewWin(url, title, params, editFlag, fn, cancelfn, type,sign_);
2945 }, 2945 },
2946 error: function () { 2946 error: function () {
2947 layer.closeAll('loading'); 2947 layer.closeAll('loading');
@@ -2990,7 +2990,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -2990,7 +2990,9 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
2990 return cssStyle; 2990 return cssStyle;
2991 }, 2991 },
2992 //打开弹框 2992 //打开弹框
2993 - openNewWin:function (url,name,params,editFlag,fn,cancelfn,type) { 2993 + openNewWin:function (url,name,params,editFlag,fn,cancelfn,type,sign_) {
  2994 + //新视图设置百分百
  2995 + var area= sign_?['100%','100%']:['90%','90%'];
2994 if(!name){ name = "信息"; } 2996 if(!name){ name = "信息"; }
2995 var btns = false; 2997 var btns = false;
2996 //如果是编辑状态展示确定按钮 2998 //如果是编辑状态展示确定按钮
@@ -3003,12 +3005,16 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -3003,12 +3005,16 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
3003 title: [name, 'font-size:20px;background-color: #d0ddec;'], 3005 title: [name, 'font-size:20px;background-color: #d0ddec;'],
3004 type: 1, 3006 type: 1,
3005 id: md5(url), 3007 id: md5(url),
3006 - area: ['90%','90%'], 3008 + area: area ,
3007 shadeClose: true,//开启遮罩层 3009 shadeClose: true,//开启遮罩层
3008 content: laytpl(res.body).render(JSON.stringify(params)), 3010 content: laytpl(res.body).render(JSON.stringify(params)),
3009 btn:btns, 3011 btn:btns,
3010 move:false, 3012 move:false,
3011 - success:function(index){ 3013 + success:function(layero,index){
  3014 + if(sign_){
  3015 + //关闭悬浮框有上角叉号
  3016 + layero.find(".layui-layer-close1").addClass("hide");
  3017 + }
3012 if(params.state == 'stop' || params.state == 'alarmIgnore'){ 3018 if(params.state == 'stop' || params.state == 'alarmIgnore'){
3013 $("a[data-opts='start']").show(); 3019 $("a[data-opts='start']").show();
3014 }else if(params.state == 'monitor'){ 3020 }else if(params.state == 'monitor'){
@@ -219,6 +219,17 @@ layui.extend({ @@ -219,6 +219,17 @@ layui.extend({
219 if(href.indexOf('?Authorization') != -1 && href.indexOf('&show=0&url=') != -1 && pathURL !== '/page/forward'){ 219 if(href.indexOf('?Authorization') != -1 && href.indexOf('&show=0&url=') != -1 && pathURL !== '/page/forward'){
220 return location.hash = "/page/forward"; 220 return location.hash = "/page/forward";
221 } 221 }
  222 + //跳转到告警页面
  223 + let params=new URLSearchParams(location.search);
  224 + let [bizId]=[params.get('bizId')];
  225 + //活动告警页面
  226 + if( href.indexOf('&show=3') != -1 && pathURL !== '/alarm/activewarning'){
  227 + return location.hash = "/alarm/activewarning/bizId="+bizId;
  228 + }
  229 + //历史告警页面
  230 + if( href.indexOf('&show=4') != -1 && pathURL !== '/alarm/historywarning'){
  231 + return location.hash = "/alarm/historywarning/bizId="+bizId;
  232 + }
222 233
223 //独立页面 234 //独立页面
224 if(isIndPage || pathURL === '/user/login'|| pathURL === '/page/forward'){ //此处单独判断登入页，是为了兼容旧版（即未在 sessions.js 配置 indPage 的情况） 235 if(isIndPage || pathURL === '/user/login'|| pathURL === '/page/forward'){ //此处单独判断登入页，是为了兼容旧版（即未在 sessions.js 配置 indPage 的情况）
  1 +<div class="detail_page_common" style="min-width: 100%;min-height: 100%" data-name="detail_page_common">
  2 +
  3 +</div>
1 <script type="text/javascript"> 4 <script type="text/javascript">
2 //资源指标列表 5 //资源指标列表
3 - layui.define(['table', 'form','sessions','common'], function (exports) {  
4 - var commonDetail = layui.commonDetail;  
5 - 6 + layui.define(['table', 'form','sessions','common','commonCols'], function (exports) {
  7 + var commonCols= layui.commonCols;
  8 + var router = layui.router();
  9 + var item=router.search;
  10 + //获取传递过来的数据 初始化默认值
  11 + let obj ={
  12 + resId:item.resId?item.resId:"",//资源id
  13 + resType:item.resType?item.resType:"",//资源类型
  14 + editFlag: item.editFlag?item.editFlag:false,//编辑标识
  15 + provider:item.provider?item.provider:"",//厂商
  16 + name:item.name?item.name:"",//资源名称
  17 + ip:item.ip?item.ip:"",//IP
  18 + resTypeName:item.resTypeName?item.resTypeName:"",//资源类型名称
  19 + adminName:item.adminName?item.adminName:"",//管理员名称
  20 + manageIp:item.manageIp?item.manageIp:"",//管理ip
  21 + collProtocol:item.collProtocol?item.collProtocol:"",//采集协议
  22 + }
6 //对外暴露的接口 23 //对外暴露的接口
7 - commonDetail.openDetail(resId,resType,"详情页",true,function(data){  
8 - if(data){  
9 - console.log(111); 24 + function initDetailPage(){
  25 + commonCols.detailPage(obj.resId,obj.resType,obj.editFlag,obj.provider,obj.name,obj.ip,obj.resTypeName,obj.adminName,obj.manageIp,obj.collProtocol);
10 } 26 }
11 - }); 27 + initDetailPage()
12 }); 28 });
13 </script> 29 </script>
@@ -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
15 }, 37 },
16 - setup() { 38 + pageSize: {
  39 + type: Number,
  40 + default: 10
  41 + },
  42 + },
  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 }
@@ -71,8 +71,10 @@ export default { @@ -71,8 +71,10 @@ export default {
71 71
72 }else{ 72 }else{
73 if(val=='left'){ 73 if(val=='left'){
74 - proxy.checkId=listArray[index+1] 74 + proxy.checkId=listArray[index-1]
75 }else{ 75 }else{
  76 +
  77 + // proxy.checkId=listArray[index+1]
76 proxy.preNext() 78 proxy.preNext()
77 } 79 }
78 } 80 }
@@ -85,13 +87,17 @@ export default { @@ -85,13 +87,17 @@ export default {
85 proxy.clickNext() 87 proxy.clickNext()
86 }else{ 88 }else{
87 proxy.checkId=listArray[index-1] 89 proxy.checkId=listArray[index-1]
  90 + if(index==5){
  91 + proxy.preNext()
  92 + }
88 } 93 }
89 }else{ 94 }else{
90 - proxy.checkId=listArray[index+1]  
91 if(index>=4){ 95 if(index>=4){
92 proxy.clickNext() 96 proxy.clickNext()
93 97
94 } 98 }
  99 + proxy.checkId=listArray[index+1]
  100 +
95 } 101 }
96 102
97 103