monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit b1b61c4dd9dc9edacf795a727d5f01b696378f88 2 parents 37b6062b d3989807

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

更改大屏页面样式



See merge request !41
Inline Side-by-side
Showing 17 changed files with 164 additions and 203 deletions
... ... @@ -96,7 +96,7 @@
height:10px;
content: '';
position: absolute;
top: 4px;
top: 9px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/vue3/src/assets/images/zjdp/tip.png')
... ...
... ... @@ -3,6 +3,9 @@
background-position: center;*/
height: 100%;
}
.cloud-container .container-title{
padding-left: 20%;
}
.ypt {
position: relative;
height: 100%;
... ... @@ -26,7 +29,7 @@
max-width: 475px;
max-height: 403px;
background-size: contain;
background-position: inherit;
background-position: center;
margin-left: 12px;
margin-right: 2px;
}
... ... @@ -51,7 +54,8 @@
}
.ypt .item .ui_base {
position: relative;
left: 5px;
top:11%;
left: 9%;
width: 100%;
height: 100%;
-webkit-perspective: 1000px;
... ...
.ypt {
position: relative;
height: 1.108374rem;
padding-top: .08rem;
font-size: 0;
z-index: 10;
}
/**3D环绕开始*/
.ypt .swiper-container{
height: 1.6rem;
}
.ypt .item {
background: url(../images/ypt/bg-cycle.png) 100% 100% no-repeat;
display: inline-block;
position: relative;
width: 3.0rem;
height: 1.508374rem;
background-size: contain;
margin-left: .12rem;
margin-right: .2rem;
}
.ypt .item.active{
display: block;
-moz-transition: top 3s, left 3s;
-webkit-transition: top 3s, left 3s;
transition: top 3s, left 3s;
}
.ypt .item .u_p3d {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ypt .item .ui_base {
position: relative;
left: .5rem;
width: 3.508374rem;
height: 0px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 0%;
-moz-perspective-origin: 50% 0%;
-o-perspective-origin: 50% 0%;
-ms-perspective-origin: 50% 0%;
perspective-origin: 50% 0%
}
.ypt .item .ball_c {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 260px;
height: 177px;
text-align: center;
background: url(../images/ypt/cloud_bg.png) no-repeat;
left: .35rem;
top: .5rem;
}
.ypt .item .ball_c.HuaWeiCloud{
background: url(../images/ypt/HuaWeiCloud.png) no-repeat;
}
.ypt .item .ball_c.AliCloud{
background: url(../images/ypt/AliCloud.png) no-repeat;
}
.ypt .item .ball_c div{
font-size: .14rem;
color: #e3e9f0;
position: relative;
top: .14rem;
left:-.05rem;
font-weight: bolder;
/**3D旋转*/
-webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-o-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
}
.ypt .item .ball {
width: .7rem;
height: .4rem;
background: url("../images/ypt/bg-s.png") no-repeat;
background-size: contain;
}
.ypt .item .ball_base .ball{
font-size: .12rem;
color: #fff;
text-align: center;
}
.ypt .item .ball_base .ball p{
font-size: .08rem;
padding-top: .03rem;
position: relative;
}
.ypt .item .ball_base .ball b{
top: .05rem;
position: relative;
}
.ypt .item .ball_base{
position: absolute;
width: .72rem;
-moz-transition: top 1.5s, left 1.5s;
-webkit-transition: top 1.5s, left 1.5s;
transition: top 1.5s, left 1.5s;
cursor: pointer;
transform: scale(0.9);
}
.ypt__info div.ball_base:nth-child(1) {
top: .002rem;
left: .05rem;
}
.ypt__info div.ball_base:nth-child(2) {
top: .002rem;
left: 1.45rem;
}
.ypt__info div.ball_base:nth-child(3) {
top: .55rem;
left: 1.9rem;
}
.ypt__info div.ball_base:nth-child(4) {
top: 1.1rem;
left: 1.3rem;
}
.ypt__info div.ball_base:nth-child(5) {
top: 1.10rem;
left: .04rem;
}
.ypt__info div.ball_base:nth-child(6) {
top: .55rem;
left: -.55rem;
}
.ypt__info .ball_base.active{
-moz-transition: top 0.3s;
-webkit-transition:top 0.3s;
transition: top 0.3s;
}
.ypt__info .ball_base.active div{
transform: scale(1.4);
background: url("../images/ypt/bg-s-active.png") no-repeat;
background-size: contain;
}
\ No newline at end of file
... ... @@ -18,7 +18,7 @@
background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
background-position: center;
background-repeat: no-repeat;
margin-top:10px;
margin-top:15px;
height: 53px;
}
.total-title{
... ... @@ -33,13 +33,14 @@
color:#d5e1f5;
display: flex;
justify-content: space-around;
margin-top:20px;
}
.proportion-num{
font-size: 16px;
color:#4fc9fc;
}
.declare-today{
margin-top:20px;
margin-top:30px;
}
.declare-title{
color: #fff;
... ...
... ... @@ -11,10 +11,7 @@
#network-echart{
width: 100%;
height: 100%;
background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.network-title{
position: absolute;
... ...
.statistics-container{
background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
/*background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");*/
/*background-position: center;*/
height: 100%;
max-width: 420px;
max-width: 480px;
}
.el-carousel__item h3 {
color: #FFFFFF;
... ... @@ -21,7 +21,7 @@
/*background-color: #d3dce6;*/
}
.statisticsItem{
background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png");
background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg-1.png");
background-position: top;
background-size: contain;
background-repeat: no-repeat;
... ... @@ -37,15 +37,15 @@
.listItem-health{
display: flex;
position: absolute;
left: 24px;
top:33px;
left: 18px;
top:36px;
}
.listItem:nth-child(1) .listItem-health{
left: 12px;
/*left: 7px;*/
}
.listItem:nth-child(3) .listItem-health{
left: 28px;
/*left: 18px;*/
}
.listItem{
... ... @@ -57,50 +57,58 @@
}
.listItem-num{
position: absolute;
top:33%;
top:36%;
font-size: 15px;
color:#61c5d5;
width: 24px;
}
.listItem-icon{
position: absolute;
top:209px;
top:53%;
}
.listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
right: 12px;
right: -20px;
}
.listItem:nth-child(2n) .listItem-num,.listItem:nth-child(2n) .listItem-icon{
left: 56px;
.listItem:nth-child(2) .listItem-num,.listItem:nth-child(2) .listItem-icon{
left: 74px;
}
.listItem:nth-child(3) .listItem-num,.listItem:nth-child(3) .listItem-icon{
left: 11px;
left: 26px;
}
.listItem:nth-child(4) .listItem-num,.listItem:nth-child(4) .listItem-icon{
left: -23px;
}
.listItem-icon-name{
position: absolute;
top: 243px;
top: 244px;
font-size: 12px;
color: #61c5d5;
width: 50px;
}
.listItem:nth-child(1) .listItem-icon-name{
right: 2px;
right: -36px;
}
.listItem:nth-child(2) .listItem-icon-name{
left: 50%;
}
.listItem:nth-child(2n) .listItem-icon-name{
left: 45px;
.listItem:nth-child(3) .listItem-icon-name{
left: 14%;
}
.listItem:nth-child(3) .listItem-icon-name{
left: 0;
left: -28%;
}
.healthList{
display: flex;
flex-flow: column;
font-size: 12px;
font-family: "PingFang SC";
width: 32px;
width: 29px;
}
.healthList span{
padding:0 5px;
}
.healthList span.listNum{
padding: 3px 5px;
padding: 2px 5px;
}
.listText{
font-size: 13px;
... ... @@ -115,7 +123,7 @@
.statisticsTotal{
text-align: center;
position: absolute;
bottom: 94px;
bottom: 82px;
width: 100%;
font-size:15px;
color:#61c5d5;
... ...
body{font-size: 15px;}
#zjdapingIndex{
background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
background-size: cover;
}
.screen-bg{
background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
background-position: top;
background-repeat: no-repeat;
background-size: 100%;
}
.zj-screen{
padding:0 10px;
... ... @@ -19,25 +26,54 @@ body{font-size: 15px;}
margin-left: 12px;
}
.left-40{
width:48%;
width:45%;
}
.section-right{
width:52%;
width:55%;
}
.data-cloud{
display: flex;
}
.flex-data,.flex-cloud,.flex-declare,.flex-chart{
width:50%;
.flex-data{
width:55%;
}
.flex-cloud{
width:45%
}
.flex-declare{
width:323px;
max-width: 323px;
}
.flex-chart{
flex:1;
display: flex;
flex-flow: column;
justify-content: space-between;
padding-bottom: 20px;
}
.declare-chart{
display: flex;
height: 560px;
}
.screen-nav{
margin-bottom: 30px;
padding-right: 20px;
}
.screen-res-performance{
display: flex;
justify-content: space-between;
}
.performance-lineChart{
margin-top:30px;
}
.screen-performance{
flex:1;
}
.performance-container .container-title{
margin-left:40px;
}
/**提示展示动画 从左到右进入*/
@-webkit-keyframes fadeInLeft {
... ...
<div id="bar-echart" style="width:100%;height:225px;"></div>
<div id="bar-echart" style="width:100%;height:290px;"></div>
... ...
... ... @@ -33,7 +33,7 @@ export default {
let legendData=[];
$.each(monitoringBarData,function (i,v){
proxy.ySeriesCommonData.unshift(v.value)
legendData.push(i)
legendData.push(i+1)
})
proxy.legendData=legendData
}
... ... @@ -43,8 +43,9 @@ export default {
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
color: 'rgba(180, 180, 180, 0.1)'
},
barWidth:8,
itemStyle:{
normal:{
barBorderRadius: [3,3,0,0],
... ...
... ... @@ -5,7 +5,7 @@
<el-carousel height="50px" :autoplay="false" indicator-position="none" arrow="never" ref="cardShow">
<el-carousel-item v-for="item in listItem" :key="item" >
<div class="tabContaier">
<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>
<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>
</div>
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const busId = Vue.toRef(store.state, 'busId')
return {
busId
}
}
export default {
name: 'navTabs',
template: '',
... ... @@ -7,6 +18,7 @@ export default {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getbizListByUser?access_token=',
checkId:0,//当前选中的tabs
listItem:1,//轮播数-总页数
pageSize:5,//每页显示5条数据
currentPage:0,//当前页
... ... @@ -18,6 +30,8 @@ export default {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let accessToken = localStorage.getItem('access_token');
// 获取状态
const { busId} = indirectManage()
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl+accessToken,function (res) {
... ... @@ -25,11 +39,13 @@ export default {
if (data && data.data) {
let navTabsData=data.data;
proxy.listArray=navTabsData;
proxy.checkId=navTabsData[0].busId;
busId.value=navTabsData[0].busId
}
})
})
const arrowClick=(val)=>{
if(val=='right'){
proxy.$refs.cardShow.next();
... ... @@ -51,11 +67,16 @@ export default {
if (proxy.currentPage == 0) return;
proxy.currentPage--;
}
const clickTabs=(val)=>{
proxy.checkId=val;
busId.value=val
}
return{
arrowClick,
nextPage,
prePage
prePage,
clickTabs
}
},
computed:{
... ...
... ... @@ -3,5 +3,5 @@
<div class="container-title network-title">
<img src="/vue3/src/assets/images/zjdp/title-network.png" alt="">
</div>
<div id="network-echart" v-if="mapData" style="height:400px"></div>
<div id="network-echart" v-if="mapData" style="height:560px"></div>
</div>
... ...
<div class="statistics-container">
<div class="container-title">
<img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt="">
</div>
<el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000">
<el-carousel-item v-for="item in 2" :key="item">
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const busId = Vue.toRef(store.state, 'busId')
return {
busId
}
}
export default {
name: 'resourceStatistics',
template: '',
... ... @@ -7,24 +18,60 @@ export default {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getResTotal',
resourceStatisticsData:'',
busId:'53bebbd79f384f619513b50666ea1d48'
busId:''//'53bebbd79f384f619513b50666ea1d48'
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 获取状态
const { busId} = indirectManage()
// 监听编辑状态
Vue.watch(() =>busId.value, (newVal, oldVlaue) => {
// console.log("333",busId.value)
proxy.busId=busId.value
proxy.getData();
});
// 挂载完
Vue.onMounted(() => {
// proxy.getData();
})
const getData=()=>{
$.get(proxy.domainName +proxy.apiUrl+'?busId='+proxy.busId,function (res) {
const data = res;
if(data && data.data){
proxy.resourceStatisticsData=data.data;
// proxy.resourceStatisticsData=data.data;
let resData=data.data;
if(resData.length<4){
for(let i=0;i<4-resData.length;i++){
resData.push({
"resTypeAllNum": 2,
"code": "other",
"name": "其他",
"excellentNum": 0,
"middleNum": 0,
"goodNum": 0,
"excellentPercent": 0,
"middlePercent": 0,
"goodPercent": 0
})
}
}
proxy.resourceStatisticsData=resData;
}
})
})
}
return{
getData
}
}
}
\ No newline at end of file
... ...
... ... @@ -10,7 +10,7 @@
</div>
</header>
<div class="screen-body zj-screen">
<section class="screen-left left-40" >
<section class="screen-left left-40 screen-bg" >
<div class="left-top">
<!--省局网络拓扑-->
<NetworkTopology ></NetworkTopology>
... ...
... ... @@ -43,9 +43,9 @@ export default {
}
},
setup() {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
console.log('aaa',Vue.EventBus)
let datetimeStyle=()=>{// 左上角日期时间大小
fontSize: proxy.titleFontSize / 3 + 'px';
marginLeft: proxy.titleFontSize / 5 + 'px'
... ...