monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 4711b7509de7498dbce0e9f5613f12c8be9062ac 2 parents a8c9a766 23870cdc

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-V32-XuHaoJie

Inline Side-by-side
Showing 8 changed files with 127 additions and 30 deletions
@@ -13,7 +13,7 @@ export default { @@ -13,7 +13,7 @@ export default {
13 allData: { 13 allData: {
14 polyline: { 14 polyline: {
15 title: "申报库CPU监控", 15 title: "申报库CPU监控",
16 - unit: "cpu使用率%", 16 + unit: "使用率%",
17 data: [{ 17 data: [{
18 name: "80.12.97.3", 18 name: "80.12.97.3",
19 datas: ["12","15","21","18","20","37","45","23","12","5","7","14"] 19 datas: ["12","15","21","18","20","37","45","23","12","5","7","14"]
@@ -109,8 +109,15 @@ export default { @@ -109,8 +109,15 @@ export default {
109 109
110 } 110 }
111 that.allData.polyline.data.push(resData.series[0]) 111 that.allData.polyline.data.push(resData.series[0])
112 - that.updateChart() 112 + that.allData.polyline.data.map((item,index)=>{
  113 + if(index==0){
  114 + item.name="80.12.97.3"
  115 + }else{
  116 + item.name="80.12.97.2"
113 117
  118 + }
  119 + })
  120 + that.updateChart()
114 121
115 }); 122 });
116 }, 123 },
@@ -143,7 +150,7 @@ export default { @@ -143,7 +150,7 @@ export default {
143 that.allData = { 150 that.allData = {
144 polyline: { 151 polyline: {
145 title: "申报库CPU监控", 152 title: "申报库CPU监控",
146 - unit: "cpu使用率%", 153 + unit: "使用率%",
147 data: seriesData1 154 data: seriesData1
148 }, 155 },
149 xAxis: { 156 xAxis: {
@@ -251,7 +258,8 @@ export default { @@ -251,7 +258,8 @@ export default {
251 258
252 }, 259 },
253 legend: { 260 legend: {
254 - data: ["80.12.97.3","80.12.97.2"], 261 + // data: ["80.12.97.3","80.12.97.2"],
  262 + data: legendArr,
255 itemHeight:0,//图例圆圈大小设置 263 itemHeight:0,//图例圆圈大小设置
256 right: '5%', 264 right: '5%',
257 top: '5%', 265 top: '5%',
@@ -286,7 +294,7 @@ export default { @@ -286,7 +294,7 @@ export default {
286 }, 294 },
287 yAxis: { 295 yAxis: {
288 type: 'value', 296 type: 'value',
289 - name:'cpu使用率%', 297 + name:unit,
290 nameTextStyle:{ 298 nameTextStyle:{
291 color:'#ffffff', 299 color:'#ffffff',
292 padding:[0,0,0,-20] 300 padding:[0,0,0,-20]
@@ -12,7 +12,7 @@ export default { @@ -12,7 +12,7 @@ export default {
12 allData: { 12 allData: {
13 polyline: { 13 polyline: {
14 title: "文书库CPU监控", 14 title: "文书库CPU监控",
15 - unit: "cpu使用率%", 15 + unit: "使用率%",
16 data: [{ 16 data: [{
17 name: "80.12.97.7", 17 name: "80.12.97.7",
18 data: ["12","15","21","18","20","37","45","23","12","5","7","14"] 18 data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
@@ -104,6 +104,14 @@ export default { @@ -104,6 +104,14 @@ export default {
104 resData=that.res2.data 104 resData=that.res2.data
105 } 105 }
106 that.allData.polyline.data.push(resData.series[0]) 106 that.allData.polyline.data.push(resData.series[0])
  107 + that.allData.polyline.data.map((item,index)=>{
  108 + if(index==0){
  109 + item.name="80.12.97.7"
  110 + }else{
  111 + item.name="80.12.97.8"
  112 +
  113 + }
  114 + })
107 that.updateChart() 115 that.updateChart()
108 }); 116 });
109 }, 117 },
@@ -135,7 +143,7 @@ export default { @@ -135,7 +143,7 @@ export default {
135 that.allData = { 143 that.allData = {
136 polyline: { 144 polyline: {
137 title: "文书库CPU监控", 145 title: "文书库CPU监控",
138 - unit: "cpu使用率%", 146 + unit: "使用率%",
139 data: seriesData1 147 data: seriesData1
140 }, 148 },
141 xAxis: { 149 xAxis: {
@@ -237,7 +245,8 @@ export default { @@ -237,7 +245,8 @@ export default {
237 245
238 }, 246 },
239 legend: { 247 legend: {
240 - data: ["80.12.97.7","80.12.97.8"], 248 + // data: ["80.12.97.7","80.12.97.8"],
  249 + data: legendArr,
241 itemHeight:0,//图例圆圈大小设置 250 itemHeight:0,//图例圆圈大小设置
242 right: '5%', 251 right: '5%',
243 top: '5%', 252 top: '5%',
@@ -52,7 +52,8 @@ export default { @@ -52,7 +52,8 @@ export default {
52 return { 52 return {
53 titleFontSize: 30, 53 titleFontSize: 30,
54 dateTime: '00-00-00 00:00:00', 54 dateTime: '00-00-00 00:00:00',
55 - colorData:['#0D45FE','#00FFB9','#A35CFF'], 55 + // colorData:['#0D45FE','#00FFB9','#A35CFF'],
  56 + colorData:["#97d5f4",'#efe0a7','#e5abd1'],
56 commandName:'最大值', 57 commandName:'最大值',
57 commandVal:'max' 58 commandVal:'max'
58 } 59 }
@@ -5,8 +5,8 @@ @@ -5,8 +5,8 @@
5 5
6 </div> 6 </div>
7 <div class="ypt"> 7 <div class="ypt">
8 - <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="4000" >  
9 - <el-carousel-item v-for="(item,index) in cloudData" :key="index"> 8 + <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="20000" ref="cloudCarousel" >
  9 + <el-carousel-item v-for="(item,index) in cloudData" :key="index" name="index">
10 <div class="item swiper-slide" > 10 <div class="item swiper-slide" >
11 <div class="ui_base u_p3d"> 11 <div class="ui_base u_p3d">
12 <!--<div class="circlediv"> 12 <!--<div class="circlediv">
@@ -54,9 +54,14 @@ export default { @@ -54,9 +54,14 @@ export default {
54 }) 54 })
55 proxy.cloudData=data; 55 proxy.cloudData=data;
56 56
  57 + setTimeout(function (){
  58 + proxy.$refs.cloudCarousel.setActiveItem(1);
  59 +
  60 + },1000)
  61 +
57 run(); 62 run();
58 //鼠标移入停止环绕动画 63 //鼠标移入停止环绕动画
59 - $(".ypt__info .ball_base").hover(function() { 64 + $(".ypt__info .ball_base").hover(function() {
60 //停止平台切换 65 //停止平台切换
61 const top = $(this).position().top; 66 const top = $(this).position().top;
62 if(top < 10){ 67 if(top < 10){
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 5
6 </div> 6 </div>
7 <div class="sjzx"> 7 <div class="sjzx">
8 - <div class="item sjzx_machineroom" v-for="item in jfdata" > 8 + <div class="item sjzx_machineroom" v-for="(item,index) in jfdata" >
9 <h5 >{{item.machineRoomName}}</h5> 9 <h5 >{{item.machineRoomName}}</h5>
10 <div class="imgDiv"> 10 <div class="imgDiv">
11 <!-- <img @click="isShow(item)" class="imgDiv-video" src="/vue3/src/assets/images/zjdp/icon-jf.png">--> 11 <!-- <img @click="isShow(item)" class="imgDiv-video" src="/vue3/src/assets/images/zjdp/icon-jf.png">-->
@@ -14,8 +14,8 @@ @@ -14,8 +14,8 @@
14 </div> 14 </div>
15 15
16 <ul class="float-container"> 16 <ul class="float-container">
17 - <li><i class='icon-wd'></i><span>温度：{{item.wd}}</span></li>  
18 - <li><i class='icon-sd'></i><span>湿度：{{item.sd}}</span></li> 17 + <li><i class='icon-wd'></i><span v-show="index==0">机柜：252</span><span v-show="index==1">机柜：42</span></li>
  18 + <li><i class='icon-sd'></i><span v-show="index==0">资产：1568</span><span v-show="index==1">资产：46</span></li>
19 <li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li> 19 <li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li>
20 </ul> 20 </ul>
21 </div> 21 </div>
@@ -16,6 +16,7 @@ export default { @@ -16,6 +16,7 @@ export default {
16 ySeriesCommon:[], 16 ySeriesCommon:[],
17 legendData:[], 17 legendData:[],
18 xAxisDataDate:[], 18 xAxisDataDate:[],
  19 + yAxisData:[],
19 optionData:'', 20 optionData:'',
20 colorData:["#97d5f4",'#efe0a7','#e5abd1'], 21 colorData:["#97d5f4",'#efe0a7','#e5abd1'],
21 chartId:'line-echart-declare' 22 chartId:'line-echart-declare'
@@ -42,14 +43,21 @@ export default { @@ -42,14 +43,21 @@ export default {
42 let declareLineData=data.data; 43 let declareLineData=data.data;
43 let legendData=[]; 44 let legendData=[];
44 let xAxisDataDate=[]; 45 let xAxisDataDate=[];
  46 + let yAxisData=[];
45 $.each(declareLineData,function (i,v){ 47 $.each(declareLineData,function (i,v){
  48 + let index=0;
  49 + if(i==2){
  50 + index=1;
  51 + }else{
  52 + index=0;
  53 + }
46 ySeriesCommon.push({ 54 ySeriesCommon.push({
47 name:v.name, 55 name:v.name,
48 type:'line', 56 type:'line',
49 smooth:true, 57 smooth:true,
50 - stack:'Total', 58 + // stack:'Total',//修改数据值在最大值时折线被遮挡
51 data:v.number, 59 data:v.number,
52 - // yAxisIndex:0, 60 + yAxisIndex:index,
53 showSymbol:false, 61 showSymbol:false,
54 itemStyle : { 62 itemStyle : {
55 normal : { 63 normal : {
@@ -64,6 +72,7 @@ export default { @@ -64,6 +72,7 @@ export default {
64 } 72 }
65 }, 73 },
66 }) 74 })
  75 + yAxisData.push(v.number);
67 legendData.push(v.name); 76 legendData.push(v.name);
68 xAxisDataDate.push(v.days); 77 xAxisDataDate.push(v.days);
69 78
@@ -71,6 +80,7 @@ export default { @@ -71,6 +80,7 @@ export default {
71 proxy.ySeriesCommon=ySeriesCommon; 80 proxy.ySeriesCommon=ySeriesCommon;
72 proxy.legendData=legendData; 81 proxy.legendData=legendData;
73 proxy.xAxisDataDate=xAxisDataDate[0]; 82 proxy.xAxisDataDate=xAxisDataDate[0];
  83 + proxy.yAxisData=yAxisData;
74 proxy.optionInit(); 84 proxy.optionInit();
75 } 85 }
76 }) 86 })
@@ -78,6 +88,14 @@ export default { @@ -78,6 +88,14 @@ export default {
78 88
79 }) 89 })
80 const optionInit=()=>{ 90 const optionInit=()=>{
  91 + console.log("888",proxy.yAxisData)
  92 + let data1=proxy.yAxisData[0];
  93 + let data2=proxy.yAxisData[1];
  94 + let data3=proxy.yAxisData[2];
  95 + let min1=proxy.calMin([data1,data2]);
  96 + let max1=proxy.calMax([data1,data2]);
  97 + let min2=proxy.calMin([data3,data3]);
  98 + let max2=proxy.calMax([data3,data3]);
81 99
82 proxy.optionData = { 100 proxy.optionData = {
83 title: { 101 title: {
@@ -132,26 +150,81 @@ export default { @@ -132,26 +150,81 @@ export default {
132 }, 150 },
133 151
134 }, 152 },
135 - yAxis:{  
136 - type: 'value',  
137 - splitLine:{  
138 - lineStyle: {  
139 - color:'#0a1b31'  
140 - } 153 + yAxis:[
  154 + {
  155 + type: 'value',
  156 + splitLine:{
  157 + lineStyle: {
  158 + color:'#0a1b31'
  159 + }
  160 + },
  161 + axisLabel:{
  162 + color:'#ffffff',
  163 + },
  164 + splitNumber:5,
  165 + min:min1,
  166 + max:max1,
  167 + interval:(max1-min1)/5
141 }, 168 },
142 - axisLabel:{  
143 - color:'#ffffff',  
144 - },  
145 - }, 169 + {
  170 + type: 'value',
  171 + splitLine:{
  172 + lineStyle: {
  173 + color:'#0a1b31'
  174 + }
  175 + },
  176 + axisLabel:{
  177 + color:'#ffffff',
  178 + },
  179 + splitNumber:5,
  180 + min:min2,
  181 + max:max2,
  182 + interval:(max2-min2)/5
  183 + }
  184 + ],
146 series: proxy.ySeriesCommon, 185 series: proxy.ySeriesCommon,
147 itemStyle:{ 186 itemStyle:{
148 showSymbol:false 187 showSymbol:false
149 } 188 }
150 }; 189 };
151 } 190 }
  191 + //计算最大值
  192 + const calMax=(arr)=>{
  193 + let max=0;
  194 + arr.forEach((el)=>{
  195 + el.forEach((el1)=>{
  196 + if(!(el1 === undefined || el1 === '')){
  197 + if(max<el1){
  198 + max=el1;
  199 + }
  200 + }
  201 + })
  202 + })
  203 + let maxint=Math.ceil(max/9.5);
  204 + let maxval=maxint * 10;//让显示的刻度是整数
  205 + return maxval;
  206 + }
  207 + //计算最小值
  208 + const calMin=(arr)=>{
  209 + let min=0;
  210 + arr.forEach((el)=>{
  211 + el.forEach((el1)=>{
  212 + if(!(el1 === undefined || el1 === '')){
  213 + if(min>el1){
  214 + min=el1;
  215 + }
  216 + }
  217 + })
  218 + })
  219 + let minint=Math.floor(min/10);
  220 + let minval=minint * 10;//让显示的刻度是整数
  221 + return minval;
  222 + }
152 223
153 return{ 224 return{
154 - optionInit 225 + optionInit,
  226 + calMax,
  227 + calMin
155 } 228 }
156 } 229 }
157 } 230 }
@@ -196,7 +196,7 @@ export default { @@ -196,7 +196,7 @@ export default {
196 }, 196 },
197 {//被攻击点 197 {//被攻击点
198 // type: 'scatter', 198 // type: 'scatter',
199 - type:'effectScatter', 199 + type:'effectScatter',//涟漪状态
200 hoverAnimation:true,//鼠标移入是否显示动画 200 hoverAnimation:true,//鼠标移入是否显示动画
201 coordinateSystem: 'geo', 201 coordinateSystem: 'geo',
202 zlevel: 3, 202 zlevel: 3,
@@ -206,7 +206,8 @@ export default { @@ -206,7 +206,8 @@ export default {
206 brushType: 'fill', 206 brushType: 'fill',
207 scale: 2 207 scale: 2
208 }, 208 },
209 - symbol: 'circle', 209 + // symbol: 'circle',//圆形涟漪状态
  210 + symbol: 'pin',
210 symbolSize: 30, 211 symbolSize: 30,
211 itemStyle:{ 212 itemStyle:{
212 color:'#EE4237', 213 color:'#EE4237',