monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 3072fa6b1ab27b2d0a2dfdf3c89c579679447823 2 parents 8098af81 76cc004b

Merge branch 'master-v32-lushangqing' into 'master' 

大屏及电子税务局页面样式修改



See merge request !54
Inline Side-by-side
Showing 14 changed files with 73 additions and 38 deletions
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 .ypt { 9 .ypt {
10 position: relative; 10 position: relative;
11 height: 100%; 11 height: 100%;
12 - padding-top: 10px; 12 + padding-top: 42px;
13 font-size: 0; 13 font-size: 0;
14 z-index: 10; 14 z-index: 10;
15 } 15 }
@@ -29,8 +29,8 @@ @@ -29,8 +29,8 @@
29 max-width: 475px; 29 max-width: 475px;
30 max-height: 403px; 30 max-height: 403px;
31 background-size: auto; 31 background-size: auto;
32 - background-position: center;  
33 - /*margin-left: 12px;*/ 32 + /*background-position: center;*/
  33 + padding-left: 12px;
34 margin-right: 2px; 34 margin-right: 2px;
35 } 35 }
36 .ypt .item.active{ 36 .ypt .item.active{
@@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
40 color:#4fc9fc; 40 color:#4fc9fc;
41 } 41 }
42 .declare-today{ 42 .declare-today{
43 - margin-top:30px; 43 + margin-top:24px;
44 } 44 }
45 .declare-title{ 45 .declare-title{
46 color: #fff; 46 color: #fff;
@@ -29,10 +29,11 @@ @@ -29,10 +29,11 @@
29 top: -10px; 29 top: -10px;
30 } 30 }
31 .declare-report .grid-content.rate-container{ 31 .declare-report .grid-content.rate-container{
32 - background-image: url("/vue3/src/assets/images/digitalDp/icon-rate.png"); 32 + /*background-image: url("/vue3/src/assets/images/digitalDp/icon-rate.png");
33 background-repeat: no-repeat; 33 background-repeat: no-repeat;
  34 +
  35 + background-position: center top;*/
34 height: 156px; 36 height: 156px;
35 - background-position: center top;  
36 } 37 }
37 .declare-report .rate-container .rate-num{ 38 .declare-report .rate-container .rate-num{
38 margin-top:10px; 39 margin-top:10px;
@@ -37,12 +37,12 @@ body{font-size: 15px;} @@ -37,12 +37,12 @@ body{font-size: 15px;}
37 37
38 } 38 }
39 .flex-data{ 39 .flex-data{
40 - width:58%; 40 + width:56%;
41 } 41 }
42 .flex-cloud{ 42 .flex-cloud{
43 - width:42% 43 + width:44%
44 } 44 }
45 -.left-top{height:550px;} 45 +.left-top{height:523px;}
46 .flex-declare{ 46 .flex-declare{
47 width:330px; 47 width:330px;
48 /*max-width: 323px;*/ 48 /*max-width: 323px;*/
@@ -57,7 +57,7 @@ body{font-size: 15px;} @@ -57,7 +57,7 @@ body{font-size: 15px;}
57 57
58 .declare-chart{ 58 .declare-chart{
59 display: flex; 59 display: flex;
60 - height: 550px; 60 + height: 523px;
61 61
62 } 62 }
63 .declare-lineChart{ 63 .declare-lineChart{
@@ -227,4 +227,11 @@ body{font-size: 15px;} @@ -227,4 +227,11 @@ body{font-size: 15px;}
227 .lineChart,.barChart{ 227 .lineChart,.barChart{
228 background-image: url("/vue3/src/assets/images/zjdp/img-bg.png"); 228 background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
229 background-position: center; 229 background-position: center;
230 -}  
  230 +}
  231 +.statistics-container .container-title,.performance-container .container-title{
  232 + margin: 10px 0 15px 0;
  233 +}
  234 +.asset-container .container-title{
  235 + position: relative;
  236 + top: 14px;
  237 +}
@@ -183,6 +183,13 @@ export default { @@ -183,6 +183,13 @@ export default {
183 trigger: 'axis', 183 trigger: 'axis',
184 backgroundColor:'rgba(50,50,50,0.7)', 184 backgroundColor:'rgba(50,50,50,0.7)',
185 borderColor:"#333", 185 borderColor:"#333",
  186 + formatter:function(params){
  187 + let str='<div>'+params[0].name+'</div>';
  188 + for(let i=0;i<params.length;i++){
  189 + str+="<div style='display:flex;justify-content: space-between'><span>"+params[i].marker+params[i].seriesName+"</span><span style='margin-left:10px;'>"+params[i].data+"个</span></div>"
  190 + }
  191 + return str
  192 + },
186 textStyle:{ 193 textStyle:{
187 color:"#fff", 194 color:"#fff",
188 align:'left' 195 align:'left'
1 <div class="com-container"> 1 <div class="com-container">
2 - <div class="com-chart" id="volume_ref"></div> 2 + <div class="com-chart" id="volume_ref" ></div>
3 <div class="busniess-box-title"> 3 <div class="busniess-box-title">
4 <img :style="comtitleImgStyle" src="./src/assets/images/digitalDp/title-volume.png" class="busniess-title-img"> <!-- bor1_6 --> 4 <img :style="comtitleImgStyle" src="./src/assets/images/digitalDp/title-volume.png" class="busniess-title-img"> <!-- bor1_6 -->
5 <!-- <span :style="comtitleTextStyle" class="busniess-title-size">本月业务量</span>--> 5 <!-- <span :style="comtitleTextStyle" class="busniess-title-size">本月业务量</span>-->
@@ -136,8 +136,8 @@ export default { @@ -136,8 +136,8 @@ export default {
136 const seriesArr = this.allData.map((item, index) => { 136 const seriesArr = this.allData.map((item, index) => {
137 const dataArr = [] 137 const dataArr = []
138 let colorData=[]; 138 let colorData=[];
139 - // if(item.data && item.data.length>0){  
140 - if(item.data ){ 139 + if(item.data && item.data.length>0){
  140 + // if(item.data ){
141 item.data.map(inner => { 141 item.data.map(inner => {
142 dataArr.push({ 142 dataArr.push({
143 name: inner.name, 143 name: inner.name,
@@ -165,16 +165,18 @@ export default { @@ -165,16 +165,18 @@ export default {
165 radius: ['28%', '42%'], 165 radius: ['28%', '42%'],
166 center: centerArr[index], 166 center: centerArr[index],
167 color:colorData, 167 color:colorData,
168 - minAngle: 15,//最小角度  
169 - startAngle:120, //起始角度 168 + // minAngle: 15,//最小角度
  169 + // startAngle:110, //起始角度
170 itemStyle: { 170 itemStyle: {
171 borderRadius: 2, 171 borderRadius: 2,
172 borderWidth: 2 172 borderWidth: 2
173 }, 173 },
  174 + // left:20,
174 label: { 175 label: {
175 - position: 'outer',  
176 - alignTo: 'labelLine',  
177 - formatter: '{c}', 176 + // position: 'outer',
  177 + // alignTo: 'labelLine',
  178 + formatter: '{c}个',
  179 + padding:[10,-20,5,10],
178 color:'#ffffff' 180 color:'#ffffff'
179 }, 181 },
180 data: dataArr 182 data: dataArr
@@ -77,7 +77,7 @@ export default { @@ -77,7 +77,7 @@ export default {
77 var params = { 77 var params = {
78 resId: that.resId1, 78 resId: that.resId1,
79 kpiIds: that.kpiIds, 79 kpiIds: that.kpiIds,
80 - subResId: 'vmem', 80 + subResId: 'cpu',
81 startTime:'', 81 startTime:'',
82 endTime:'', 82 endTime:'',
83 access_token:localStorage.getItem("access_token") 83 access_token:localStorage.getItem("access_token")
@@ -107,7 +107,7 @@ export default { @@ -107,7 +107,7 @@ export default {
107 var params = { 107 var params = {
108 resId: that.resId, 108 resId: that.resId,
109 kpiIds: that.kpiIds, 109 kpiIds: that.kpiIds,
110 - subResId: 'vmem', 110 + subResId: 'cpu',
111 startTime:'', 111 startTime:'',
112 endTime:'', 112 endTime:'',
113 access_token:localStorage.getItem("access_token") 113 access_token:localStorage.getItem("access_token")
@@ -224,6 +224,13 @@ export default { @@ -224,6 +224,13 @@ export default {
224 trigger: 'axis', 224 trigger: 'axis',
225 backgroundColor:'rgba(50,50,50,0.7)', 225 backgroundColor:'rgba(50,50,50,0.7)',
226 borderColor:"#333", 226 borderColor:"#333",
  227 + formatter:function(params){
  228 + let str='<div>'+params[0].name+'</div>';
  229 + for(let i=0;i<params.length;i++){
  230 + str+="<div style='display:flex;justify-content: space-between'><span>"+params[i].marker+params[i].seriesName+"</span><span style='margin-left:10px;'>"+params[i].data+"%</span></div>"
  231 + }
  232 + return str
  233 + },
227 textStyle:{ 234 textStyle:{
228 color:"#fff", 235 color:"#fff",
229 align:'left' 236 align:'left'
@@ -129,9 +129,10 @@ export default { @@ -129,9 +129,10 @@ export default {
129 //x轴数据 129 //x轴数据
130 let xAxisDataLength=seriesData.length; 130 let xAxisDataLength=seriesData.length;
131 let xAxisData=[]; 131 let xAxisData=[];
132 - for(let i=1;i<=xAxisDataLength;i++){ 132 + /* for(let i=1;i<=xAxisDataLength;i++){
133 xAxisData.push(i) 133 xAxisData.push(i)
134 - } 134 + }*/
  135 + xAxisData=timeArr;
135 this.optionData = { 136 this.optionData = {
136 title: { 137 title: {
137 text: '' 138 text: ''
@@ -34,7 +34,7 @@ export default { @@ -34,7 +34,7 @@ export default {
34 { 34 {
35 name:'89.12.97.3', 35 name:'89.12.97.3',
36 datas:[1,1,1,1,1,1,1,1], 36 datas:[1,1,1,1,1,1,1,1],
37 - flag:'vmem' 37 + flag:'cpu'
38 } 38 }
39 ] 39 ]
40 } 40 }
@@ -71,7 +71,7 @@ export default { @@ -71,7 +71,7 @@ export default {
71 var params = { 71 var params = {
72 resId: that.resId1, 72 resId: that.resId1,
73 kpiIds: that.kpiIds, 73 kpiIds: that.kpiIds,
74 - subResId: 'vmem', 74 + subResId: 'cpu',
75 startTime:'', 75 startTime:'',
76 endTime:'', 76 endTime:'',
77 access_token:localStorage.getItem("access_token") 77 access_token:localStorage.getItem("access_token")
@@ -99,7 +99,7 @@ export default { @@ -99,7 +99,7 @@ export default {
99 var params = { 99 var params = {
100 resId: that.resId, 100 resId: that.resId,
101 kpiIds: that.kpiIds, 101 kpiIds: that.kpiIds,
102 - subResId: 'vmem', 102 + subResId: 'cpu',
103 startTime:'', 103 startTime:'',
104 endTime:'', 104 endTime:'',
105 access_token:localStorage.getItem("access_token") 105 access_token:localStorage.getItem("access_token")
@@ -209,6 +209,13 @@ export default { @@ -209,6 +209,13 @@ export default {
209 trigger: 'axis', 209 trigger: 'axis',
210 backgroundColor:'rgba(50,50,50,0.7)', 210 backgroundColor:'rgba(50,50,50,0.7)',
211 borderColor:"#333", 211 borderColor:"#333",
  212 + formatter:function(params){
  213 + let str='<div>'+params[0].name+'</div>';
  214 + for(let i=0;i<params.length;i++){
  215 + str+="<div style='display:flex;justify-content: space-between'><span>"+params[i].marker+params[i].seriesName+"</span><span style='margin-left:10px;'>"+params[i].data+"%</span></div>"
  216 + }
  217 + return str
  218 + },
212 textStyle:{ 219 textStyle:{
213 color:"#fff", 220 color:"#fff",
214 align:'left' 221 align:'left'
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 5
6 </div> 6 </div>
7 <div class="ypt"> 7 <div class="ypt">
8 - <el-carousel direction="vertical" :autoplay="true" indicator-position="none" > 8 + <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="4000" >
9 <el-carousel-item v-for="(item,index) in cloudData" :key="index"> 9 <el-carousel-item v-for="(item,index) in cloudData" :key="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">
@@ -67,7 +67,7 @@ export default { @@ -67,7 +67,7 @@ export default {
67 align:'left' 67 align:'left'
68 }, 68 },
69 formatter: function(params) { 69 formatter: function(params) {
70 - var res = '<div>'+params[0].data.date+'</div>'+params[0].data.value; 70 + var res = '<div>'+params[0].data.date+'</div>'+params[0].data.value+'个';
71 return res; 71 return res;
72 } 72 }
73 73
@@ -46,10 +46,6 @@ export default { @@ -46,10 +46,6 @@ export default {
46 proxy.startInterval(); 46 proxy.startInterval();
47 } 47 }
48 }) 48 })
49 - $.get(proxy.domainName +proxy.apiUrl1+accessToken,function (res){  
50 -  
51 - })  
52 -  
53 }) 49 })
54 const startInterval=()=>{ 50 const startInterval=()=>{
55 if (proxy.timer) { 51 if (proxy.timer) {
@@ -48,14 +48,14 @@ export default { @@ -48,14 +48,14 @@ export default {
48 const colorArr1 = [ 48 const colorArr1 = [
49 'rgba(151,213,244, 0.8)', 49 'rgba(151,213,244, 0.8)',
50 'rgba(239,224,167, 0.8)', 50 'rgba(239,224,167, 0.8)',
51 - 'rgba(229,171,209, 0.8)', 51 + 'rgba(119,250,162, 0.8)',
52 'rgba(151,170,255, 0.8)' 52 'rgba(151,170,255, 0.8)'
53 ] 53 ]
54 // 全透明的颜色值 54 // 全透明的颜色值
55 const colorArr2 = [ 55 const colorArr2 = [
56 'rgba(151,213,244, 0)', 56 'rgba(151,213,244, 0)',
57 'rgba(239,224,167, 0)', 57 'rgba(239,224,167, 0)',
58 - 'rgba(229,171,209, 0)', 58 + 'rgba(119,250,162, 0)',
59 'rgba(151,170,255, 0)' 59 'rgba(151,170,255, 0)'
60 ] 60 ]
61 61
@@ -153,7 +153,7 @@ export default { @@ -153,7 +153,7 @@ export default {
153 areaStyle: { 153 areaStyle: {
154 // color:'rgba(151,213,244,0.4)', 154 // color:'rgba(151,213,244,0.4)',
155 normal:{ 155 normal:{
156 - color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变 156 + color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
157 offset: 0, 157 offset: 0,
158 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明 158 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
159 }, { 159 }, {
@@ -187,6 +187,13 @@ export default { @@ -187,6 +187,13 @@ export default {
187 trigger: 'axis', 187 trigger: 'axis',
188 backgroundColor:'rgba(50,50,50,0.7)', 188 backgroundColor:'rgba(50,50,50,0.7)',
189 borderColor:"#333", 189 borderColor:"#333",
  190 + formatter:function(params){
  191 + let str='<div>'+params[0].name+'</div>';
  192 + for(let i=0;i<params.length;i++){
  193 + str+="<div style='display:flex;justify-content: space-between'><span>"+params[i].marker+params[i].seriesName+"</span><span style='margin-left:10px;'>"+params[i].data+"个</span></div>"
  194 + }
  195 + return str
  196 + },
190 textStyle:{ 197 textStyle:{
191 color:"#fff", 198 color:"#fff",
192 align:'left' 199 align:'left'
@@ -196,7 +203,7 @@ export default { @@ -196,7 +203,7 @@ export default {
196 legend: { 203 legend: {
197 data: proxy.legendData, 204 data: proxy.legendData,
198 itemHeight:0,//图例圆圈大小设置 205 itemHeight:0,//图例圆圈大小设置
199 - y:'7px', 206 + y:'0px',
200 textStyle: { 207 textStyle: {
201 color: '#ffffff', 208 color: '#ffffff',
202 fontsize:"12px" 209 fontsize:"12px"
@@ -204,10 +211,10 @@ export default { @@ -204,10 +211,10 @@ export default {
204 211
205 }, 212 },
206 grid: { 213 grid: {
207 - top:'2%', 214 + top:'10%',
208 left: '3%', 215 left: '3%',
209 right: '4%', 216 right: '4%',
210 - bottom: '30%', 217 + bottom: '20%',
211 containLabel: true, 218 containLabel: true,
212 }, 219 },
213 xAxis: { 220 xAxis: {