monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by CN守护者
Commit 15bbb4fc797d3955a25d098563ab01175d9807b2 1 parent 148fd0ac

浙江大屏前端初版提交（补充）

Inline Side-by-side
Showing 15 changed files with 75 additions and 59 deletions
1 -.com-title-size { 1 +.busniess-title-size {
2 position: absolute; 2 position: absolute;
3 - left: 9.5%;  
4 - top: 2.5%; 3 + left: 13%;
  4 + top: 3%;
5 } 5 }
6 -.com-title-img { 6 +.busniess-title-img {
7 position: absolute; 7 position: absolute;
8 - left: 7.5%; 8 + left: 5%;
9 top: 2%; 9 top: 2%;
10 } 10 }
11 -.com-box-title { 11 +.busniess-box-title {
12 margin-left: 8%; 12 margin-left: 8%;
13 } 13 }
14 -.com-circle-left { 14 +.busniess-circle-left {
15 position: absolute; 15 position: absolute;
16 left: 19%; 16 left: 19%;
17 top: 59%; 17 top: 59%;
18 } 18 }
19 -.com-circle-right { 19 +.busniess-circle-right {
20 position: absolute; 20 position: absolute;
21 left: 63%; 21 left: 63%;
22 top: 59%; 22 top: 59%;
23 } 23 }
24 -.com-circle-text { 24 +.busniess-circle-text {
25 text-align: center; 25 text-align: center;
26 } 26 }
@@ -7,8 +7,8 @@ @@ -7,8 +7,8 @@
7 .span-box-title { 7 .span-box-title {
8 position: absolute; 8 position: absolute;
9 color: #FEFEFE; 9 color: #FEFEFE;
10 -top: 1%;  
11 - left: 5.2%; 10 + top: 1%;
  11 + left: 6%;
12 } 12 }
13 13
14 @font-face{ 14 @font-face{
1 -.com-title-size { 1 +.topfive-title-size {
2 position: absolute; 2 position: absolute;
3 - left: 13%;  
4 - top: 8%; 3 + left: 16%;
  4 + top: 7%;
5 } 5 }
6 -.com-title-img { 6 +.topfive-title-img {
7 position: absolute; 7 position: absolute;
8 - left: 10%;  
9 - top: 7%; 8 + left: 5%;
  9 + top: 5%;
10 } 10 }
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="availability_ref"></div> 2 <div class="com-chart" id="availability_ref"></div>
  3 + <div class="topfive-box-title">
  4 + <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->
  5 + <span :style="comtitleTextStyle" class="topfive-title-size">业务可用性</span>
  6 + </div>
3 </div> 7 </div>
@@ -33,6 +33,19 @@ export default { @@ -33,6 +33,19 @@ export default {
33 window.removeEventListener('resize', this.screenAdapter) 33 window.removeEventListener('resize', this.screenAdapter)
34 clearInterval(this.timerId) 34 clearInterval(this.timerId)
35 }, 35 },
  36 + computed: {
  37 + comtitleTextStyle () {
  38 + return {
  39 + fontSize: this.titleFontSize / 2 + 'px'
  40 + }
  41 + },
  42 + comtitleImgStyle () {
  43 + return {
  44 + height: this.titleFontSize * 1.2 + 'px',
  45 + width: this.titleFontSize * 8 + 'px'
  46 + }
  47 + }
  48 + },
36 methods: { 49 methods: {
37 initChart () { 50 initChart () {
38 this.chartInstance = echarts.init(document.getElementById('availability_ref')) 51 this.chartInstance = echarts.init(document.getElementById('availability_ref'))
@@ -97,10 +110,10 @@ export default { @@ -97,10 +110,10 @@ export default {
97 const title = this.allData.polyline.title 110 const title = this.allData.polyline.title
98 const unit = this.allData.polyline.unit 111 const unit = this.allData.polyline.unit
99 const dataOption = { 112 const dataOption = {
100 - title: {  
101 - text: '{Sunny| 业务可用性 }',  
102 - show: true  
103 - }, 113 + // title: {
  114 + // text: '{Sunny| 业务可用性 }',
  115 + // show: true
  116 + // },
104 xAxis: { 117 xAxis: {
105 data: timeArr 118 data: timeArr
106 }, 119 },
@@ -138,23 +151,23 @@ export default { @@ -138,23 +151,23 @@ export default {
138 screenAdapter () { 151 screenAdapter () {
139 this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6 152 this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
140 const adapterOption = { 153 const adapterOption = {
141 - title: {  
142 - left: this.titleFontSize * 2,  
143 - textStyle: {  
144 - fontSize: this.titleFontSize,  
145 - color: '#F0F3F8'  
146 - // rich: {  
147 - // Sunny: {  
148 - // // 这样设定 backgroundColor 就可以是图片了。  
149 - // backgroundColor: {  
150 - // image: require('../assets/img/bg_box_3.png')  
151 - // },  
152 - // // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。  
153 - // height: this.titleFontSize * 1.5  
154 - // } 154 + // title: {
  155 + // left: this.titleFontSize * 2,
  156 + // textStyle: {
  157 + // fontSize: this.titleFontSize,
  158 + // color: '#F0F3F8'
  159 + // // rich: {
  160 + // // Sunny: {
  161 + // // // 这样设定 backgroundColor 就可以是图片了。
  162 + // // backgroundColor: {
  163 + // // image: require('../assets/img/bg_box_3.png')
  164 + // // },
  165 + // // // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
  166 + // // height: this.titleFontSize * 1.5
  167 + // // }
  168 + // // }
155 // } 169 // }
156 - }  
157 - }, 170 + // },
158 legend: { 171 legend: {
159 itemWidth: this.titleFontSize, 172 itemWidth: this.titleFontSize,
160 itemHeight: this.titleFontSize, 173 itemHeight: this.titleFontSize,
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="com-box-title">  
4 - <img :style="comtitleImgStyle" src="../assets/img/bg_box_3.png" class="com-title-img"> <!-- bor1_6 -->  
5 - <span :style="comtitleTextStyle" class="com-title-size">本月业务量</span> 3 + <div class="busniess-box-title">
  4 + <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="busniess-title-img"> <!-- bor1_6 -->
  5 + <span :style="comtitleTextStyle" class="busniess-title-size">本月业务量</span>
6 </div> 6 </div>
7 - <div class="com-circle-text" :style="comcircletextStyle">  
8 - <div class="com-circle-left">今日<br/>业务量</div>  
9 - <div class="com-circle-right">本月<br/>业务量</div> 7 + <div class="busniess-circle-text" :style="comcircletextStyle">
  8 + <div class="busniess-circle-left">今日<br/>业务量</div>
  9 + <div class="busniess-circle-right">本月<br/>业务量</div>
10 </div> 10 </div>
11 </div> 11 </div>
@@ -26,13 +26,12 @@ export default { @@ -26,13 +26,12 @@ export default {
26 computed: { 26 computed: {
27 comtitleTextStyle () { 27 comtitleTextStyle () {
28 return { 28 return {
29 - fontSize: this.titleFontSize / 1.5 + 'px' 29 + fontSize: this.titleFontSize / 1.3 + 'px'
30 } 30 }
31 }, 31 },
32 comtitleImgStyle () { 32 comtitleImgStyle () {
33 return { 33 return {
34 - height: this.titleFontSize * 1.2 + 'px',  
35 - width: this.titleFontSize * 4.5 + 'px' 34 + height: this.titleFontSize * 1.5 + 'px'
36 } 35 }
37 }, 36 },
38 comcircletextStyle () { 37 comcircletextStyle () {
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <div class="grid-content bg-purple"> 6 <div class="grid-content bg-purple">
7 <span> 7 <span>
8 <!--title_box_1.png--> 8 <!--title_box_1.png-->
9 - <img :style="comTitleimgStyle" src="./src/assets/img/title_box_1.png"> 9 + <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
10 <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span> 10 <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
11 </span> 11 </span>
12 </div> 12 </div>
@@ -30,8 +30,8 @@ export default { @@ -30,8 +30,8 @@ export default {
30 isTwoCommaShow: false, 30 isTwoCommaShow: false,
31 declaredAmountNumber: 1283, // 左边数 31 declaredAmountNumber: 1283, // 左边数
32 undeclaredAmountNumber: 0, // 右边数 32 undeclaredAmountNumber: 0, // 右边数
33 - leftTitle: '今日已申报数',  
34 - rightTitle: '本日申报未导入' 33 + leftTitle: '本月已申报数',
  34 + rightTitle: '本月未申报'
35 } 35 }
36 }, 36 },
37 computed: { 37 computed: {
@@ -42,7 +42,7 @@ export default { @@ -42,7 +42,7 @@ export default {
42 }, 42 },
43 comTitleimgStyle () { 43 comTitleimgStyle () {
44 return { 44 return {
45 - width: this.titleFontSize * 7 + 'px' 45 + width: this.titleFontSize * 12 + 'px'
46 } 46 }
47 }, 47 },
48 comTitleSizeStyle () { 48 comTitleSizeStyle () {
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <div class="grid-content bg-purple"> 6 <div class="grid-content bg-purple">
7 <span> 7 <span>
8 <!--title_box_1.png--> 8 <!--title_box_1.png-->
9 - <img :style="comTitleimgStyle" src="./src/assets/img/title_box_1.png"> 9 + <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
10 <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span> 10 <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
11 </span> 11 </span>
12 </div> 12 </div>
@@ -42,7 +42,7 @@ export default { @@ -42,7 +42,7 @@ export default {
42 }, 42 },
43 comTitleimgStyle () { 43 comTitleimgStyle () {
44 return { 44 return {
45 - width: this.titleFontSize * 7 + 'px' 45 + width: this.titleFontSize * 12 + 'px'
46 } 46 }
47 }, 47 },
48 comTitleSizeStyle () { 48 comTitleSizeStyle () {
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="topfive_ref"></div> 2 <div class="com-chart" id="topfive_ref"></div>
3 - <div class="com-box-title">  
4 - <img :style="comtitleImgStyle" src="../assets/img/bg_box_3.png" class="com-title-img"> <!-- bor1_6 -->  
5 - <span :style="comtitleTextStyle" class="com-title-size">涉税文书TOP5业务量</span> 3 + <div class="topfive-box-title">
  4 + <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->
  5 + <span :style="comtitleTextStyle" class="topfive-title-size">涉税文书TOP5业务量</span>
6 </div> 6 </div>
7 </div> 7 </div>
@@ -27,13 +27,13 @@ export default { @@ -27,13 +27,13 @@ export default {
27 computed: { 27 computed: {
28 comtitleTextStyle () { 28 comtitleTextStyle () {
29 return { 29 return {
30 - fontSize: this.titleFontSize / 1.5 + 'px' 30 + fontSize: this.titleFontSize / 1.2 + 'px'
31 } 31 }
32 }, 32 },
33 comtitleImgStyle () { 33 comtitleImgStyle () {
34 return { 34 return {
35 - height: this.titleFontSize * 1.4 + 'px',  
36 - width: this.titleFontSize * 10 + 'px' 35 + height: this.titleFontSize * 2 + 'px',
  36 + width: this.titleFontSize * 14 + 'px'
37 } 37 }
38 } 38 }
39 }, 39 },
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 </div> 5 </div>
6 <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span> 6 <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
7 <div class="title-left"> 7 <div class="title-left">
8 - <img src="/static/img/time-icon.png" :style="timelogoStyle" class="timelog"> 8 + <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
9 <span :style="datetimeStyle" >2049-01-01 00:00:00</span> 9 <span :style="datetimeStyle" >2049-01-01 00:00:00</span>
10 </div> 10 </div>
11 </header> 11 </header>