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 76 additions and 60 deletions
.com-title-size {
.busniess-title-size {
position: absolute;
left: 9.5%;
top: 2.5%;
left: 13%;
top: 3%;
}
.com-title-img {
.busniess-title-img {
position: absolute;
left: 7.5%;
left: 5%;
top: 2%;
}
.com-box-title {
.busniess-box-title {
margin-left: 8%;
}
.com-circle-left {
.busniess-circle-left {
position: absolute;
left: 19%;
top: 59%;
}
.com-circle-right {
.busniess-circle-right {
position: absolute;
left: 63%;
top: 59%;
}
.com-circle-text {
.busniess-circle-text {
text-align: center;
}
\ No newline at end of file
... ...
... ... @@ -7,8 +7,8 @@
.span-box-title {
position: absolute;
color: #FEFEFE;
top: 1%;
left: 5.2%;
top: 1%;
left: 6%;
}
@font-face{
... ...
.com-title-size {
.topfive-title-size {
position: absolute;
left: 13%;
top: 8%;
left: 16%;
top: 7%;
}
.com-title-img {
.topfive-title-img {
position: absolute;
left: 10%;
top: 7%;
left: 5%;
top: 5%;
}
\ No newline at end of file
... ...
<div class="com-container">
<div class="com-chart" id="availability_ref"></div>
<div class="topfive-box-title">
<img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="topfive-title-size">业务可用性</span>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -33,6 +33,19 @@ export default {
window.removeEventListener('resize', this.screenAdapter)
clearInterval(this.timerId)
},
computed: {
comtitleTextStyle () {
return {
fontSize: this.titleFontSize / 2 + 'px'
}
},
comtitleImgStyle () {
return {
height: this.titleFontSize * 1.2 + 'px',
width: this.titleFontSize * 8 + 'px'
}
}
},
methods: {
initChart () {
this.chartInstance = echarts.init(document.getElementById('availability_ref'))
... ... @@ -97,10 +110,10 @@ export default {
const title = this.allData.polyline.title
const unit = this.allData.polyline.unit
const dataOption = {
title: {
text: '{Sunny| 业务可用性 }',
show: true
},
// title: {
// text: '{Sunny| 业务可用性 }',
// show: true
// },
xAxis: {
data: timeArr
},
... ... @@ -138,23 +151,23 @@ export default {
screenAdapter () {
this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
const adapterOption = {
title: {
left: this.titleFontSize * 2,
textStyle: {
fontSize: this.titleFontSize,
color: '#F0F3F8'
// rich: {
// Sunny: {
// // 这样设定 backgroundColor 就可以是图片了。
// backgroundColor: {
// image: require('../assets/img/bg_box_3.png')
// },
// // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
// height: this.titleFontSize * 1.5
// }
// }
}
},
// title: {
// left: this.titleFontSize * 2,
// textStyle: {
// fontSize: this.titleFontSize,
// color: '#F0F3F8'
// // rich: {
// // Sunny: {
// // // 这样设定 backgroundColor 就可以是图片了。
// // backgroundColor: {
// // image: require('../assets/img/bg_box_3.png')
// // },
// // // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
// // height: this.titleFontSize * 1.5
// // }
// // }
// }
// },
legend: {
itemWidth: this.titleFontSize,
itemHeight: this.titleFontSize,
... ...
<div class="com-container">
<div class="com-chart" id="volume_ref"></div>
<div class="com-box-title">
<img :style="comtitleImgStyle" src="../assets/img/bg_box_3.png" class="com-title-img"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="com-title-size">本月业务量</span>
<div class="busniess-box-title">
<img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="busniess-title-img"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="busniess-title-size">本月业务量</span>
</div>
<div class="com-circle-text" :style="comcircletextStyle">
<div class="com-circle-left">今日<br/>业务量</div>
<div class="com-circle-right">本月<br/>业务量</div>
<div class="busniess-circle-text" :style="comcircletextStyle">
<div class="busniess-circle-left">今日<br/>业务量</div>
<div class="busniess-circle-right">本月<br/>业务量</div>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -26,13 +26,12 @@ export default {
computed: {
comtitleTextStyle () {
return {
fontSize: this.titleFontSize / 1.5 + 'px'
fontSize: this.titleFontSize / 1.3 + 'px'
}
},
comtitleImgStyle () {
return {
height: this.titleFontSize * 1.2 + 'px',
width: this.titleFontSize * 4.5 + 'px'
height: this.titleFontSize * 1.5 + 'px'
}
},
comcircletextStyle () {
... ...
... ... @@ -6,7 +6,7 @@
<div class="grid-content bg-purple">
<span>
<!--title_box_1.png-->
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_1.png">
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
<span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
</span>
</div>
... ...
... ... @@ -30,8 +30,8 @@ export default {
isTwoCommaShow: false,
declaredAmountNumber: 1283, // 左边数
undeclaredAmountNumber: 0, // 右边数
leftTitle: '今日已申报数',
rightTitle: '本日申报未导入'
leftTitle: '本月已申报数',
rightTitle: '本月未申报'
}
},
computed: {
... ... @@ -42,7 +42,7 @@ export default {
},
comTitleimgStyle () {
return {
width: this.titleFontSize * 7 + 'px'
width: this.titleFontSize * 12 + 'px'
}
},
comTitleSizeStyle () {
... ...
... ... @@ -6,7 +6,7 @@
<div class="grid-content bg-purple">
<span>
<!--title_box_1.png-->
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_1.png">
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
<span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
</span>
</div>
... ...
... ... @@ -42,7 +42,7 @@ export default {
},
comTitleimgStyle () {
return {
width: this.titleFontSize * 7 + 'px'
width: this.titleFontSize * 12 + 'px'
}
},
comTitleSizeStyle () {
... ...
<div class="com-container">
<div class="com-chart" id="topfive_ref"></div>
<div class="com-box-title">
<img :style="comtitleImgStyle" src="../assets/img/bg_box_3.png" class="com-title-img"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="com-title-size">涉税文书TOP5业务量</span>
<div class="topfive-box-title">
<img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="topfive-title-size">涉税文书TOP5业务量</span>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -27,13 +27,13 @@ export default {
computed: {
comtitleTextStyle () {
return {
fontSize: this.titleFontSize / 1.5 + 'px'
fontSize: this.titleFontSize / 1.2 + 'px'
}
},
comtitleImgStyle () {
return {
height: this.titleFontSize * 1.4 + 'px',
width: this.titleFontSize * 10 + 'px'
height: this.titleFontSize * 2 + 'px',
width: this.titleFontSize * 14 + 'px'
}
}
},
... ...
... ... @@ -5,7 +5,7 @@
</div>
<span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
<div class="title-left">
<img src="/static/img/time-icon.png" :style="timelogoStyle" class="timelog">
<img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
<span :style="datetimeStyle" >2049-01-01 00:00:00</span>
</div>
</header>
... ...