monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 2ede2ffe06c897916a4042bd131c84330cf45d09 2 parents 4c591dfd 87ce0796

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

Inline Side-by-side
Showing 18 changed files with 165 additions and 204 deletions
@@ -71,7 +71,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','reslist','sessions',' @@ -71,7 +71,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','reslist','sessions','
71 resize: false, 71 resize: false,
72 content: laytpl(res.body).render(JSON.stringify(params)), 72 content: laytpl(res.body).render(JSON.stringify(params)),
73 btn: ["选择","取消"], 73 btn: ["选择","取消"],
74 - id:'layui-layer11',//设定一个id，防止重复弹出 74 + id:'alarm_template_Table_tactics',//设定一个id，防止重复弹出
75 success: function (index, layero) { 75 success: function (index, layero) {
76 76
77 }, 77 },
@@ -96,7 +96,7 @@ @@ -96,7 +96,7 @@
96 height:10px; 96 height:10px;
97 content: ''; 97 content: '';
98 position: absolute; 98 position: absolute;
99 - top: 4px; 99 + top: 9px;
100 background-repeat: no-repeat; 100 background-repeat: no-repeat;
101 background-size: cover; 101 background-size: cover;
102 background-image: url('/vue3/src/assets/images/zjdp/tip.png') 102 background-image: url('/vue3/src/assets/images/zjdp/tip.png')
@@ -3,6 +3,9 @@ @@ -3,6 +3,9 @@
3 background-position: center;*/ 3 background-position: center;*/
4 height: 100%; 4 height: 100%;
5 } 5 }
  6 +.cloud-container .container-title{
  7 + padding-left: 20%;
  8 +}
6 .ypt { 9 .ypt {
7 position: relative; 10 position: relative;
8 height: 100%; 11 height: 100%;
@@ -26,7 +29,7 @@ @@ -26,7 +29,7 @@
26 max-width: 475px; 29 max-width: 475px;
27 max-height: 403px; 30 max-height: 403px;
28 background-size: contain; 31 background-size: contain;
29 - background-position: inherit; 32 + background-position: center;
30 margin-left: 12px; 33 margin-left: 12px;
31 margin-right: 2px; 34 margin-right: 2px;
32 } 35 }
@@ -51,7 +54,8 @@ @@ -51,7 +54,8 @@
51 } 54 }
52 .ypt .item .ui_base { 55 .ypt .item .ui_base {
53 position: relative; 56 position: relative;
54 - left: 5px; 57 + top:11%;
  58 + left: 9%;
55 width: 100%; 59 width: 100%;
56 height: 100%; 60 height: 100%;
57 -webkit-perspective: 1000px; 61 -webkit-perspective: 1000px;
1 -.ypt {  
2 - position: relative;  
3 - height: 1.108374rem;  
4 - padding-top: .08rem;  
5 - font-size: 0;  
6 - z-index: 10;  
7 -}  
8 -/**3D环绕开始*/  
9 -.ypt .swiper-container{  
10 - height: 1.6rem;  
11 -}  
12 -.ypt .item {  
13 - background: url(../images/ypt/bg-cycle.png) 100% 100% no-repeat;  
14 - display: inline-block;  
15 - position: relative;  
16 - width: 3.0rem;  
17 - height: 1.508374rem;  
18 - background-size: contain;  
19 - margin-left: .12rem;  
20 - margin-right: .2rem;  
21 -}  
22 -.ypt .item.active{  
23 - display: block;  
24 - -moz-transition: top 3s, left 3s;  
25 - -webkit-transition: top 3s, left 3s;  
26 - transition: top 3s, left 3s;  
27 -}  
28 -.ypt .item .u_p3d {  
29 - -webkit-transform-style: preserve-3d;  
30 - -ms-transform-style: preserve-3d;  
31 - -o-transform-style: preserve-3d;  
32 - -moz-transform-style: preserve-3d;  
33 - transform-style: preserve-3d;  
34 -}  
35 -  
36 -.ypt .item .ui_base {  
37 - position: relative;  
38 - left: .5rem;  
39 - width: 3.508374rem;  
40 - height: 0px;  
41 - -webkit-perspective: 1000px;  
42 - -moz-perspective: 1000px;  
43 - -ms-perspective: 1000px;  
44 - -o-perspective: 1000px;  
45 - perspective: 1000px;  
46 - -webkit-perspective-origin: 50% 0%;  
47 - -moz-perspective-origin: 50% 0%;  
48 - -o-perspective-origin: 50% 0%;  
49 - -ms-perspective-origin: 50% 0%;  
50 - perspective-origin: 50% 0%  
51 -}  
52 -  
53 -.ypt .item .ball_c {  
54 - -webkit-transform-origin: 50% 50%;  
55 - -moz-transform-origin: 50% 50%;  
56 - -ms-transform-origin: 50% 50%;  
57 - -o-transform-origin: 50% 50%;  
58 - transform-origin: 50% 50%;  
59 - position: absolute;  
60 - width: 260px;  
61 - height: 177px;  
62 - text-align: center;  
63 - background: url(../images/ypt/cloud_bg.png) no-repeat;  
64 - left: .35rem;  
65 - top: .5rem;  
66 -}  
67 -.ypt .item .ball_c.HuaWeiCloud{  
68 - background: url(../images/ypt/HuaWeiCloud.png) no-repeat;  
69 -}  
70 -.ypt .item .ball_c.AliCloud{  
71 - background: url(../images/ypt/AliCloud.png) no-repeat;  
72 -}  
73 -.ypt .item .ball_c div{  
74 - font-size: .14rem;  
75 - color: #e3e9f0;  
76 - position: relative;  
77 - top: .14rem;  
78 - left:-.05rem;  
79 - font-weight: bolder;  
80 - /**3D旋转*/  
81 - -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);  
82 - -moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);  
83 - -ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);  
84 - -o-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);  
85 - transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);  
86 -}  
87 -  
88 -.ypt .item .ball {  
89 - width: .7rem;  
90 - height: .4rem;  
91 - background: url("../images/ypt/bg-s.png") no-repeat;  
92 - background-size: contain;  
93 -}  
94 -  
95 -.ypt .item .ball_base .ball{  
96 - font-size: .12rem;  
97 - color: #fff;  
98 - text-align: center;  
99 -}  
100 -.ypt .item .ball_base .ball p{  
101 - font-size: .08rem;  
102 - padding-top: .03rem;  
103 - position: relative;  
104 -}  
105 -.ypt .item .ball_base .ball b{  
106 - top: .05rem;  
107 - position: relative;  
108 -}  
109 -  
110 -.ypt .item .ball_base{  
111 - position: absolute;  
112 - width: .72rem;  
113 - -moz-transition: top 1.5s, left 1.5s;  
114 - -webkit-transition: top 1.5s, left 1.5s;  
115 - transition: top 1.5s, left 1.5s;  
116 - cursor: pointer;  
117 - transform: scale(0.9);  
118 -}  
119 -.ypt__info div.ball_base:nth-child(1) {  
120 - top: .002rem;  
121 - left: .05rem;  
122 -}  
123 -  
124 -.ypt__info div.ball_base:nth-child(2) {  
125 - top: .002rem;  
126 - left: 1.45rem;  
127 -}  
128 -.ypt__info div.ball_base:nth-child(3) {  
129 - top: .55rem;  
130 - left: 1.9rem;  
131 -}  
132 -.ypt__info div.ball_base:nth-child(4) {  
133 - top: 1.1rem;  
134 - left: 1.3rem;  
135 -}  
136 -.ypt__info div.ball_base:nth-child(5) {  
137 - top: 1.10rem;  
138 - left: .04rem;  
139 -}  
140 -.ypt__info div.ball_base:nth-child(6) {  
141 - top: .55rem;  
142 - left: -.55rem;  
143 -}  
144 -.ypt__info .ball_base.active{  
145 - -moz-transition: top 0.3s;  
146 - -webkit-transition:top 0.3s;  
147 - transition: top 0.3s;  
148 -}  
149 -.ypt__info .ball_base.active div{  
150 - transform: scale(1.4);  
151 - background: url("../images/ypt/bg-s-active.png") no-repeat;  
152 - background-size: contain;  
153 -}  
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 background-image: url("/vue3/src/assets/images/zjdp/declare-title.png"); 18 background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
19 background-position: center; 19 background-position: center;
20 background-repeat: no-repeat; 20 background-repeat: no-repeat;
21 - margin-top:10px; 21 + margin-top:15px;
22 height: 53px; 22 height: 53px;
23 } 23 }
24 .total-title{ 24 .total-title{
@@ -33,13 +33,14 @@ @@ -33,13 +33,14 @@
33 color:#d5e1f5; 33 color:#d5e1f5;
34 display: flex; 34 display: flex;
35 justify-content: space-around; 35 justify-content: space-around;
  36 + margin-top:20px;
36 } 37 }
37 .proportion-num{ 38 .proportion-num{
38 font-size: 16px; 39 font-size: 16px;
39 color:#4fc9fc; 40 color:#4fc9fc;
40 } 41 }
41 .declare-today{ 42 .declare-today{
42 - margin-top:20px; 43 + margin-top:30px;
43 } 44 }
44 .declare-title{ 45 .declare-title{
45 color: #fff; 46 color: #fff;
@@ -11,10 +11,7 @@ @@ -11,10 +11,7 @@
11 #network-echart{ 11 #network-echart{
12 width: 100%; 12 width: 100%;
13 height: 100%; 13 height: 100%;
14 - background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");  
15 - background-position: center;  
16 - background-repeat: no-repeat;  
17 - background-size: 100%; 14 +
18 } 15 }
19 .network-title{ 16 .network-title{
20 position: absolute; 17 position: absolute;
1 .statistics-container{ 1 .statistics-container{
2 - background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");  
3 - background-position: center; 2 + /*background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");*/
  3 + /*background-position: center;*/
4 height: 100%; 4 height: 100%;
5 - max-width: 420px; 5 + max-width: 480px;
6 } 6 }
7 .el-carousel__item h3 { 7 .el-carousel__item h3 {
8 color: #FFFFFF; 8 color: #FFFFFF;
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 /*background-color: #d3dce6;*/ 21 /*background-color: #d3dce6;*/
22 } 22 }
23 .statisticsItem{ 23 .statisticsItem{
24 - background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png"); 24 + background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg-1.png");
25 background-position: top; 25 background-position: top;
26 background-size: contain; 26 background-size: contain;
27 background-repeat: no-repeat; 27 background-repeat: no-repeat;
@@ -37,15 +37,15 @@ @@ -37,15 +37,15 @@
37 .listItem-health{ 37 .listItem-health{
38 display: flex; 38 display: flex;
39 position: absolute; 39 position: absolute;
40 - left: 24px;  
41 - top:33px; 40 + left: 18px;
  41 + top:36px;
42 } 42 }
43 .listItem:nth-child(1) .listItem-health{ 43 .listItem:nth-child(1) .listItem-health{
44 - left: 12px; 44 + /*left: 7px;*/
45 45
46 } 46 }
47 .listItem:nth-child(3) .listItem-health{ 47 .listItem:nth-child(3) .listItem-health{
48 - left: 28px; 48 + /*left: 18px;*/
49 49
50 } 50 }
51 .listItem{ 51 .listItem{
@@ -57,50 +57,58 @@ @@ -57,50 +57,58 @@
57 } 57 }
58 .listItem-num{ 58 .listItem-num{
59 position: absolute; 59 position: absolute;
60 - top:33%; 60 + top:36%;
61 font-size: 15px; 61 font-size: 15px;
62 color:#61c5d5; 62 color:#61c5d5;
  63 + width: 24px;
63 } 64 }
64 .listItem-icon{ 65 .listItem-icon{
65 position: absolute; 66 position: absolute;
66 - top:209px; 67 + top:53%;
67 } 68 }
68 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{ 69 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
69 - right: 12px; 70 + right: -20px;
70 } 71 }
71 -.listItem:nth-child(2n) .listItem-num,.listItem:nth-child(2n) .listItem-icon{  
72 - left: 56px; 72 +.listItem:nth-child(2) .listItem-num,.listItem:nth-child(2) .listItem-icon{
  73 + left: 74px;
73 } 74 }
74 .listItem:nth-child(3) .listItem-num,.listItem:nth-child(3) .listItem-icon{ 75 .listItem:nth-child(3) .listItem-num,.listItem:nth-child(3) .listItem-icon{
75 - left: 11px; 76 + left: 26px;
  77 +}
  78 +.listItem:nth-child(4) .listItem-num,.listItem:nth-child(4) .listItem-icon{
  79 + left: -23px;
76 } 80 }
77 .listItem-icon-name{ 81 .listItem-icon-name{
78 position: absolute; 82 position: absolute;
79 - top: 243px; 83 + top: 244px;
80 font-size: 12px; 84 font-size: 12px;
81 color: #61c5d5; 85 color: #61c5d5;
  86 + width: 50px;
82 } 87 }
83 .listItem:nth-child(1) .listItem-icon-name{ 88 .listItem:nth-child(1) .listItem-icon-name{
84 - right: 2px; 89 + right: -36px;
  90 +}
  91 +.listItem:nth-child(2) .listItem-icon-name{
  92 + left: 50%;
85 } 93 }
86 -.listItem:nth-child(2n) .listItem-icon-name{  
87 - left: 45px; 94 +.listItem:nth-child(3) .listItem-icon-name{
  95 + left: 14%;
88 } 96 }
89 .listItem:nth-child(3) .listItem-icon-name{ 97 .listItem:nth-child(3) .listItem-icon-name{
90 - left: 0; 98 + left: -28%;
91 } 99 }
92 .healthList{ 100 .healthList{
93 display: flex; 101 display: flex;
94 flex-flow: column; 102 flex-flow: column;
95 font-size: 12px; 103 font-size: 12px;
96 font-family: "PingFang SC"; 104 font-family: "PingFang SC";
97 - width: 32px; 105 + width: 29px;
98 } 106 }
99 .healthList span{ 107 .healthList span{
100 padding:0 5px; 108 padding:0 5px;
101 } 109 }
102 .healthList span.listNum{ 110 .healthList span.listNum{
103 - padding: 3px 5px; 111 + padding: 2px 5px;
104 } 112 }
105 .listText{ 113 .listText{
106 font-size: 13px; 114 font-size: 13px;
@@ -115,7 +123,7 @@ @@ -115,7 +123,7 @@
115 .statisticsTotal{ 123 .statisticsTotal{
116 text-align: center; 124 text-align: center;
117 position: absolute; 125 position: absolute;
118 - bottom: 94px; 126 + bottom: 82px;
119 width: 100%; 127 width: 100%;
120 font-size:15px; 128 font-size:15px;
121 color:#61c5d5; 129 color:#61c5d5;
1 body{font-size: 15px;} 1 body{font-size: 15px;}
2 #zjdapingIndex{ 2 #zjdapingIndex{
3 - background: url("/vue3/src/assets/images/zjdp/img-bg.png"); 3 + background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
4 background-position: center; 4 background-position: center;
  5 + background-size: cover;
  6 +}
  7 +.screen-bg{
  8 + background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
  9 + background-position: top;
  10 + background-repeat: no-repeat;
  11 + background-size: 100%;
5 } 12 }
6 .zj-screen{ 13 .zj-screen{
7 padding:0 10px; 14 padding:0 10px;
@@ -19,25 +26,54 @@ body{font-size: 15px;} @@ -19,25 +26,54 @@ body{font-size: 15px;}
19 margin-left: 12px; 26 margin-left: 12px;
20 } 27 }
21 .left-40{ 28 .left-40{
22 - width:48%; 29 + width:45%;
23 } 30 }
24 .section-right{ 31 .section-right{
25 - width:52%; 32 + width:55%;
26 } 33 }
27 .data-cloud{ 34 .data-cloud{
28 display: flex; 35 display: flex;
29 36
30 } 37 }
31 -.flex-data,.flex-cloud,.flex-declare,.flex-chart{  
32 - width:50%; 38 +.flex-data{
  39 + width:55%;
  40 +}
  41 +.flex-cloud{
  42 + width:45%
  43 + }
  44 +.flex-declare{
  45 + width:323px;
  46 + max-width: 323px;
  47 +}
  48 +.flex-chart{
  49 + flex:1;
  50 + display: flex;
  51 + flex-flow: column;
  52 + justify-content: space-between;
  53 + padding-bottom: 20px;
33 } 54 }
34 55
35 .declare-chart{ 56 .declare-chart{
36 display: flex; 57 display: flex;
  58 + height: 560px;
37 59
38 } 60 }
  61 +.screen-nav{
  62 + margin-bottom: 30px;
  63 + padding-right: 20px;
  64 +}
39 .screen-res-performance{ 65 .screen-res-performance{
40 display: flex; 66 display: flex;
  67 + justify-content: space-between;
  68 +}
  69 +.performance-lineChart{
  70 + margin-top:30px;
  71 +}
  72 +.screen-performance{
  73 + flex:1;
  74 +}
  75 +.performance-container .container-title{
  76 + margin-left:40px;
41 } 77 }
42 /**提示展示动画 从左到右进入*/ 78 /**提示展示动画 从左到右进入*/
43 @-webkit-keyframes fadeInLeft { 79 @-webkit-keyframes fadeInLeft {
1 -<div id="bar-echart" style="width:100%;height:225px;"></div> 1 +<div id="bar-echart" style="width:100%;height:290px;"></div>
@@ -33,7 +33,7 @@ export default { @@ -33,7 +33,7 @@ export default {
33 let legendData=[]; 33 let legendData=[];
34 $.each(monitoringBarData,function (i,v){ 34 $.each(monitoringBarData,function (i,v){
35 proxy.ySeriesCommonData.unshift(v.value) 35 proxy.ySeriesCommonData.unshift(v.value)
36 - legendData.push(i) 36 + legendData.push(i+1)
37 }) 37 })
38 proxy.legendData=legendData 38 proxy.legendData=legendData
39 } 39 }
@@ -43,8 +43,9 @@ export default { @@ -43,8 +43,9 @@ export default {
43 type: 'bar', 43 type: 'bar',
44 showBackground: true, 44 showBackground: true,
45 backgroundStyle: { 45 backgroundStyle: {
46 - color: 'rgba(180, 180, 180, 0.2)' 46 + color: 'rgba(180, 180, 180, 0.1)'
47 }, 47 },
  48 + barWidth:8,
48 itemStyle:{ 49 itemStyle:{
49 normal:{ 50 normal:{
50 barBorderRadius: [3,3,0,0], 51 barBorderRadius: [3,3,0,0],
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 <el-carousel height="50px" :autoplay="false" indicator-position="none" arrow="never" ref="cardShow"> 5 <el-carousel height="50px" :autoplay="false" indicator-position="none" arrow="never" ref="cardShow">
6 <el-carousel-item v-for="item in listItem" :key="item" > 6 <el-carousel-item v-for="item in listItem" :key="item" >
7 <div class="tabContaier"> 7 <div class="tabContaier">
8 - <div v-if="listArray" v-for="(itemData,index) in dataShow" :class="['tabItem', {'active':index==0,'borderColorGood':itemData.healthStatus==2,'borderColorMi':itemData.healthStatus==1}]">{{itemData.busTypeName}}</div> 8 + <div @click="clickTabs(itemData.busId)" v-if="listArray" v-for="(itemData,index) in dataShow" :class="['tabItem', {'active':checkId==itemData.busId,'borderColorGood':itemData.healthStatus==2,'borderColorMi':itemData.healthStatus==1}]">{{itemData.busTypeName}}</div>
9 </div> 9 </div>
10 10
11 11
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const busId = Vue.toRef(store.state, 'busId')
  7 +
  8 + return {
  9 + busId
  10 + }
  11 +}
1 export default { 12 export default {
2 name: 'navTabs', 13 name: 'navTabs',
3 template: '', 14 template: '',
@@ -7,6 +18,7 @@ export default { @@ -7,6 +18,7 @@ export default {
7 return { 18 return {
8 domainName:sessionStorage.getItem('domainName'), 19 domainName:sessionStorage.getItem('domainName'),
9 apiUrl:'/api-web/sxview/getbizListByUser?access_token=', 20 apiUrl:'/api-web/sxview/getbizListByUser?access_token=',
  21 + checkId:0,//当前选中的tabs
10 listItem:1,//轮播数-总页数 22 listItem:1,//轮播数-总页数
11 pageSize:5,//每页显示5条数据 23 pageSize:5,//每页显示5条数据
12 currentPage:0,//当前页 24 currentPage:0,//当前页
@@ -18,6 +30,8 @@ export default { @@ -18,6 +30,8 @@ export default {
18 setup(props, {attrs, slots, emit}) { 30 setup(props, {attrs, slots, emit}) {
19 const {proxy} = Vue.getCurrentInstance(); 31 const {proxy} = Vue.getCurrentInstance();
20 let accessToken = localStorage.getItem('access_token'); 32 let accessToken = localStorage.getItem('access_token');
  33 + // 获取状态
  34 + const { busId} = indirectManage()
21 // 挂载完 35 // 挂载完
22 Vue.onMounted(() => { 36 Vue.onMounted(() => {
23 $.get(proxy.domainName +proxy.apiUrl+accessToken,function (res) { 37 $.get(proxy.domainName +proxy.apiUrl+accessToken,function (res) {
@@ -25,11 +39,13 @@ export default { @@ -25,11 +39,13 @@ export default {
25 if (data && data.data) { 39 if (data && data.data) {
26 let navTabsData=data.data; 40 let navTabsData=data.data;
27 proxy.listArray=navTabsData; 41 proxy.listArray=navTabsData;
28 - 42 + proxy.checkId=navTabsData[0].busId;
  43 + busId.value=navTabsData[0].busId
29 } 44 }
30 }) 45 })
31 46
32 }) 47 })
  48 +
33 const arrowClick=(val)=>{ 49 const arrowClick=(val)=>{
34 if(val=='right'){ 50 if(val=='right'){
35 proxy.$refs.cardShow.next(); 51 proxy.$refs.cardShow.next();
@@ -51,11 +67,16 @@ export default { @@ -51,11 +67,16 @@ export default {
51 if (proxy.currentPage == 0) return; 67 if (proxy.currentPage == 0) return;
52 proxy.currentPage--; 68 proxy.currentPage--;
53 } 69 }
  70 + const clickTabs=(val)=>{
  71 + proxy.checkId=val;
  72 + busId.value=val
  73 + }
54 74
55 return{ 75 return{
56 arrowClick, 76 arrowClick,
57 nextPage, 77 nextPage,
58 - prePage 78 + prePage,
  79 + clickTabs
59 } 80 }
60 }, 81 },
61 computed:{ 82 computed:{
@@ -3,5 +3,5 @@ @@ -3,5 +3,5 @@
3 <div class="container-title network-title"> 3 <div class="container-title network-title">
4 <img src="/vue3/src/assets/images/zjdp/title-network.png" alt=""> 4 <img src="/vue3/src/assets/images/zjdp/title-network.png" alt="">
5 </div> 5 </div>
6 - <div id="network-echart" v-if="mapData" style="height:400px"></div> 6 + <div id="network-echart" v-if="mapData" style="height:560px"></div>
7 </div> 7 </div>
1 <div class="statistics-container"> 1 <div class="statistics-container">
2 <div class="container-title"> 2 <div class="container-title">
3 <img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt=""> 3 <img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt="">
4 -  
5 </div> 4 </div>
6 <el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000"> 5 <el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000">
7 <el-carousel-item v-for="item in 2" :key="item"> 6 <el-carousel-item v-for="item in 2" :key="item">
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const busId = Vue.toRef(store.state, 'busId')
  7 +
  8 + return {
  9 + busId
  10 + }
  11 +}
1 export default { 12 export default {
2 name: 'resourceStatistics', 13 name: 'resourceStatistics',
3 template: '', 14 template: '',
@@ -7,24 +18,60 @@ export default { @@ -7,24 +18,60 @@ export default {
7 domainName:sessionStorage.getItem('domainName'), 18 domainName:sessionStorage.getItem('domainName'),
8 apiUrl:'/api-web/bigScreen/getResTotal', 19 apiUrl:'/api-web/bigScreen/getResTotal',
9 resourceStatisticsData:'', 20 resourceStatisticsData:'',
10 - busId:'53bebbd79f384f619513b50666ea1d48' 21 + busId:''//'53bebbd79f384f619513b50666ea1d48'
11 } 22 }
12 }, 23 },
13 setup(props, {attrs, slots, emit}) { 24 setup(props, {attrs, slots, emit}) {
14 const {proxy} = Vue.getCurrentInstance(); 25 const {proxy} = Vue.getCurrentInstance();
15 26
  27 + // 获取状态
  28 + const { busId} = indirectManage()
  29 + // 监听编辑状态
  30 + Vue.watch(() =>busId.value, (newVal, oldVlaue) => {
  31 + // console.log("333",busId.value)
  32 + proxy.busId=busId.value
  33 + proxy.getData();
  34 + });
  35 +
16 // 挂载完 36 // 挂载完
17 Vue.onMounted(() => { 37 Vue.onMounted(() => {
  38 + // proxy.getData();
  39 +
  40 +
  41 + })
  42 + const getData=()=>{
18 $.get(proxy.domainName +proxy.apiUrl+'?busId='+proxy.busId,function (res) { 43 $.get(proxy.domainName +proxy.apiUrl+'?busId='+proxy.busId,function (res) {
19 const data = res; 44 const data = res;
20 if(data && data.data){ 45 if(data && data.data){
21 - proxy.resourceStatisticsData=data.data; 46 + // proxy.resourceStatisticsData=data.data;
  47 + let resData=data.data;
  48 + if(resData.length<4){
  49 + for(let i=0;i<4-resData.length;i++){
  50 + resData.push({
  51 + "resTypeAllNum": 2,
  52 + "code": "other",
  53 + "name": "其他",
  54 + "excellentNum": 0,
  55 + "middleNum": 0,
  56 + "goodNum": 0,
  57 + "excellentPercent": 0,
  58 + "middlePercent": 0,
  59 + "goodPercent": 0
  60 + })
  61 + }
  62 +
  63 + }
  64 + proxy.resourceStatisticsData=resData;
  65 +
  66 +
  67 +
22 } 68 }
23 69
24 }) 70 })
25 - }) 71 + }
26 72
27 return{ 73 return{
  74 + getData
28 } 75 }
29 } 76 }
30 } 77 }
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 </div> 10 </div>
11 </header> 11 </header>
12 <div class="screen-body zj-screen"> 12 <div class="screen-body zj-screen">
13 - <section class="screen-left left-40" > 13 + <section class="screen-left left-40 screen-bg" >
14 <div class="left-top"> 14 <div class="left-top">
15 <!--省局网络拓扑--> 15 <!--省局网络拓扑-->
16 <NetworkTopology ></NetworkTopology> 16 <NetworkTopology ></NetworkTopology>
@@ -43,9 +43,9 @@ export default { @@ -43,9 +43,9 @@ export default {
43 43
44 } 44 }
45 }, 45 },
46 - setup() { 46 + setup(props, {attrs, slots, emit}) {
47 const {proxy} = Vue.getCurrentInstance(); 47 const {proxy} = Vue.getCurrentInstance();
48 - 48 + console.log('aaa',Vue.EventBus)
49 let datetimeStyle=()=>{// 左上角日期时间大小 49 let datetimeStyle=()=>{// 左上角日期时间大小
50 fontSize: proxy.titleFontSize / 3 + 'px'; 50 fontSize: proxy.titleFontSize / 3 + 'px';
51 marginLeft: proxy.titleFontSize / 5 + 'px' 51 marginLeft: proxy.titleFontSize / 5 + 'px'