monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit e6b6b97f406ec71e55e1e3f9a674752525db4108 1 parent f736793d

大屏引入所写组件

Inline Side-by-side
Showing 25 changed files with 637 additions and 301 deletions
... ... @@ -7,7 +7,8 @@
position: relative;
text-align: center;
height:100%;
width: 530px;
width: 100%;
max-width: 490px;
}
.yxqk__pie {
... ... @@ -104,11 +105,13 @@
.yxqk .items {
position: absolute;
top:10px;
width:530px;
/*width:530px;*/
width:100%;
}
.yxqk .items li {
width: 182px;
/*width: 182px;*/
width: 34%;
height: 38px;
background-repeat: no-repeat;
background-size: 100% 100%;
... ... @@ -157,7 +160,7 @@
left:20px;
}
.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{
left:60px;
left:52px;
}
.yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{
right:20px;
... ...
.cloud-container{
/*background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;*/
height: 100%;
}
.ypt {
position: relative;
height: 125px;
height: 100%;
padding-top: 10px;
font-size: 0;
z-index: 10;
}
.el-carousel__container{
height:400px;
}
/**3D环绕开始*/
.ypt .swiper-container{
/*.ypt .swiper-container{
height: 160px;
}
}*/
.ypt .item {
background: url('/vue3/src/assets/images/zjdp/cycle-bg.png') 100% 100% no-repeat;
background: url('/vue3/src/assets/images/zjdp/cycle-bg.png') center no-repeat;
display: inline-block;
position: relative;
width: 300px;
height: 150px;
width: 100%;
height: 100%;
max-width: 475px;
max-height: 403px;
background-size: contain;
background-position: inherit;
margin-left: 12px;
margin-right: 2px;
}
... ... @@ -32,12 +43,17 @@
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ypt .item .ypt__info{
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.ypt .item .ui_base {
position: relative;
left: 5px;
width: 35px;
height: 0px;
width: 100%;
height: 100%;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
... ... @@ -57,12 +73,14 @@
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 260px;
height: 177px;
max-width: 260px;
max-height: 177px;
width:100%;
height:100%;
text-align: center;
background: url('/vue3/src/assets/images/zjdp/cloud-bg.png') no-repeat;
left: .35rem;
top: .5rem;
left: 57px;
top: 24px;
}
.ypt .item .ball_c.HuaWeiCloud{
/*background: url('/vue3/src/assets/images/zjdp/HuaWeiCloud.png') no-repeat;*/
... ... @@ -74,33 +92,39 @@
font-size: 14px;
color: #e3e9f0;
position: relative;
top: 14px;
left:-5px;
top: 96px;
left:-23px;
font-weight: bolder;
/**3D旋转*/
-webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
/* -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
-moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
-ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
-o-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);*/
}
.ypt .item .ball {
width: 70px;
height: 40px;
width: 56px;
height: 56px;
background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat;
background-size: contain;
word-break: break-all;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.ypt .item .ball_base .ball{
font-size: 12px;
color: #fff;
color: #61c5d5;
text-align: center;
line-height: 14px;
}
.ypt .item .ball_base .ball p{
font-size: 8px;
padding-top: 3px;
position: relative;
margin:0;
}
.ypt .item .ball_base .ball b{
top: 5px;
... ... @@ -114,40 +138,64 @@
-webkit-transition: top 1.5s, left 1.5s;
transition: top 1.5s, left 1.5s;
cursor: pointer;
transform: scale(0.9);
transform: scale(1.0);
}
.ypt__info div.ball_base:nth-child(1) {
top: 2px;
left: 5px;
top: 17px;
left: 133px;
}
.ypt__info div.ball_base:nth-child(2) {
top: 2px;
left: 14px;
top: 68px;
left: 50px;
}
.ypt__info div.ball_base:nth-child(3) {
top: 55px;
left: 190px;
top: 68px;
left: 214px;
}
.ypt__info div.ball_base:nth-child(4) {
top: 110px;
left:130px;
top: 150px;
left: 50px;
}
.ypt__info div.ball_base:nth-child(5) {
top: 110px;
left: 4px;
top: 150px;
left: 210px;
}
.ypt__info div.ball_base:nth-child(6) {
top: 55px;
left: -55px;
top: 190px;
left: 133px;
}
.ypt__info .ball_base.active{
.ypt__info .ball_base .ball.active{
-moz-transition: top 0.3s;
-webkit-transition:top 0.3s;
transition: top 0.3s;
}
.ypt__info .ball_base.active div{
.ypt__info .ball_base .ball.active{
color:#ffffff;
transform: scale(1.4);
background: url("/vue3/src/assets/images/zjdp/cloudItem-hover.png") no-repeat;
background-size: contain;
}
\ No newline at end of file
}
/**云平台底部动画样式*/
/*
.circlediv{
position: absolute;
top: 35px;
transform: skewY(0) rotateZ(90deg) rotateX(8deg) rotateY(-79deg);
left: 35px;
}
@keyframes rollImg {
0% {
transform :rotatey(5deg);
}
100% {
transform :rotatey(1000deg);
}
}
.rollimg{
animation:20s rollImg linear infinite normal;
transform: skewX(-45deg);
}*/
... ...
.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
... ...
... ... @@ -16,7 +16,7 @@
background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
background-position: center;
background-repeat: no-repeat;
margin-top:20px;
margin-top:10px;
height: 53px;
}
.total-title{
... ...
... ... @@ -22,7 +22,8 @@
}
.statisticsItem{
background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png");
background-position: center;
background-position: top;
background-size: contain;
background-repeat: no-repeat;
height: 100%;
color: #FFFFFF;
... ... @@ -37,7 +38,7 @@
display: flex;
position: absolute;
left: 24px;
top:4px;
top:33px;
}
.listItem:nth-child(1) .listItem-health{
left: 12px;
... ... @@ -62,7 +63,7 @@
}
.listItem-icon{
position: absolute;
bottom: 96px;
top:209px;
}
.listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
right: 12px;
... ... @@ -75,7 +76,7 @@
}
.listItem-icon-name{
position: absolute;
bottom: 66px;
top: 243px;
font-size: 12px;
color: #61c5d5;
}
... ... @@ -114,7 +115,7 @@
.statisticsTotal{
text-align: center;
position: absolute;
bottom: 24px;
bottom: 94px;
width: 100%;
font-size:15px;
color:#61c5d5;
... ...
... ... @@ -5,9 +5,29 @@ body{font-size: 15px;}
}
.container-title{
color: white;
padding: 7px;
text-align: left;
}
.left-40{
width:48%;
}
.section-right{
width:52%;
}
.data-cloud{
display: flex;
}
.flex-data,.flex-cloud,.flex-declare,.flex-chart{
width:50%;
}
.declare-chart{
display: flex;
}
.screen-res-performance{
display: flex;
}
/**提示展示动画 从左到右进入*/
@-webkit-keyframes fadeInLeft {
0% {
... ...
... ... @@ -103,14 +103,15 @@ const routes = [{
{
path: '/zjdaping',
name: 'zjdaping',
// component: () => myImport('views/zjdaping/index')
component: () => myImport('views/zjdaping/index')
// component: () => myImport('views/zjdaping/components/networkTopology/index')
// component: () => myImport('views/zjdaping/components/dataCenter/index')
component: () => myImport('views/zjdaping/components/cloudPlatform/index')
// component: () => myImport('views/zjdaping/components/cloudPlatform/index')
// component: () => myImport('views/zjdaping/components/assetOverview/index')
// component: () => myImport('views/zjdaping/components/declare/index')
// component: () => myImport('views/zjdaping/components/lineChart/index')
// component: () => myImport('views/zjdaping/components/resourceStatistics/index')
// component: () => myImport('views/zjdaping/components/performance/index')
},
{
path:'/zjdapingchart',
... ...
<div class="barChart">
<div id="bar-echart" style="width:100%;height:700px;"></div>
<div id="bar-echart" style="width:100%;height:225px;"></div>
</div>
\ No newline at end of file
... ...
... ... @@ -5,32 +5,23 @@
</div>
<div class="ypt">
<el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="4000">
<el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="10000" >
<el-carousel-item v-for="(item,index) in cloudData" :key="index">
<div class="swiper-container swiper-no-swiping" id="ypt_banner">
<div class="swiper-wrapper" id="ypt_cloud_kpis_id">
<div id="ypt_cloud_kpis_id_Tmpl">
<div class="item swiper-slide" >
<div class="ui_base u_p3d">
<div class="circlediv">
<img class="rollimg" src="src/assets/images/zjdp/cycle-bg.png">
</div>
<div class="ball_c {{item.code}}"><div>华为云{{item.name}}</div></div>
<div class="base u_p3d ypt__info">
<div v-for="(kpiItem,index) in item.kpi" class="ball_base u_p3d ball_{{index+1}}">
<div class="ball" v-if="kpiItem != ''">
<p>分配率{{kpiItem.kpiName}}</p><b>{{kpiItem.skpiValue}}</b>
</div>
</div>
</div>
<div class="item swiper-slide" >
<div class="ui_base u_p3d">
<!--<div class="circlediv">
<img class="rollimg" src="src/assets/images/zjdp/cycle-bg-1.png">
</div>-->
<div :class="'ball_c '+ item.code"><div>{{item.name}}</div></div>
<div class="base u_p3d ypt__info">
<div v-for="(kpiItem,index) in item.kpi" :class="'ball_base u_p3d ball_'+index+1">
<div @mouseenter="addActive(index)" @mouseleave="closeActive" :class="['ball',{'active':isActive===index}]" v-if="kpiItem != ''">
<p>{{kpiItem.kpiName}}</p><b>{{kpiItem.kpiValue}}</b>
</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
... ...
... ... @@ -8,6 +8,7 @@ export default {
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
isActive:false,
cloudData:''
}
},
... ... @@ -21,20 +22,11 @@ export default {
const data = res.data;
if(data && data.length > 0){
proxy.cloudData=data;
// const html = $("#ypt_cloud_kpis_id_Tmpl").render(data);
// $("#ypt_cloud_kpis_id").html(html);
console.log("aaa",data)
/*let ypt_banner = new Swiper('#ypt_banner', {
autoplay: 15000,
loop: true,
direction: 'vertical'
});*/
/* run();
run();
//鼠标移入停止环绕动画
$(".ypt__info .ball_base").hover(function() {
//停止平台切换
ypt_banner.stopAutoplay();
const top = $(this).position().top;
if(top < 10){
$(this).css({
... ... @@ -45,46 +37,46 @@ export default {
clearTimeout(yptRunTimer);
$(this).addClass("active");
}, function() {
$(".swiper-slide-active div.ball_base").removeClass("active");
ypt_banner.startAutoplay();//开启自动切换
$(".swiper-slide-active div.ball_base .ball").removeClass("active");
run();//鼠标移开立即执行
});*/
});
}
});
/*//云平台的指标定时轮播
//云平台的指标定时轮播
let i = 0;
function run() {
const yptpostion = [
{
top: '.002rem', // 1
left: '.05rem'
top: '17px',//1
left: '133px'
},
{
top: '.002rem', // 2
left: '1.45rem'
top: '68px', // 2
left: '50px'
},
{
top: '.55rem', // 3
left: '1.9rem'
top: '68px', // 3
left: '214px'
},
{
top: '1.1rem', // 4
left: '1.3rem'
top: '150px', // 4
left: '50px'
},
{
top: '1.10rem', // 5
left: '.04rem'
top: '150px', // 5
left: '210px'
},
{
top: '.55rem', // 6
left: '-.55rem'
top: '190px', // 6
left: '133px'
}
];
const runpostions = [[1, 2, 3, 4, 5, 0], [2, 3, 4, 5, 0, 1], [3, 4, 5, 0, 1, 2], [4, 5, 0, 1, 2, 3], [5, 0, 1, 2, 3, 4], [0, 1, 2, 3, 4, 5]];
// const runpostions = [[1, 2, 3, 4, 5, 0], [2, 3, 4, 5, 0, 1], [3, 4, 5, 0, 1, 2], [4, 5, 0, 1, 2, 3], [5, 0, 1, 2, 3, 4], [0, 1, 2, 3, 4, 5]];
const runpostions = [[2, 4, 5, 3, 1, 0], [4, 5, 3, 1, 0, 2 ], [5, 3, 1, 0, 2, 4], [3, 1, 0, 2, 4, 5], [1, 0, 2, 4, 5, 3], [0, 2, 4, 5, 3, 1]];
const p = runpostions[i];
$.each(p,function (i,v) {
$(".swiper-slide-active div.ball_base").eq(i).css(yptpostion[v]);
$(".el-carousel__item.is-active div.ball_base").eq(i).css(yptpostion[v]);
});
if(i>4){
i = 0;
... ... @@ -92,11 +84,18 @@ export default {
i++;
}
yptRunTimer = setTimeout(run, 1000 * 5);
}*/
}
})
const addActive=(index)=>{
proxy.isActive=index;
}
const closeActive=()=>{
proxy.isActive='';
}
return{
addActive,
closeActive
}
}
}
... ...
... ... @@ -46,7 +46,6 @@ export default {
proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
}
console.log(proxy.opactiyNumMath)
proxy.declarationRate=proxy.declarationRate*100+'%';
let num1=5765404;
... ...
<div class="declare-lineChart">
<LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :chartId="chartId"></LineChart>
</div>
... ...
export default {
name: 'performance',
template: '',
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
)
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
resourceStatisticsData:'',
yAxisCommon:[],
ySeriesCommon:[],
chartId:'line-echart-declare'
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
//一般y序列
proxy.yAxisCommon={
type: 'value',
splitLine:{
lineStyle: {
color:'#0a1b31'
}
},
axisLabel:{
color:'#ffffff',
},
}
//一般y轴数据
proxy.ySeriesCommon=[
{
name: '网络投票',
type: 'line',
smooth:true,
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4'
}
}
},
},
{
name: '涉税文书',
type: 'line',
smooth:true,
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
showSymbol:false,
yAxisIndex:0,
itemStyle : {
color:"#ffffff",
normal : {
color:'#efe0a7',
lineStyle:{
color:'#efe0a7'
}
}
},
},
{
name: '网上申报',
type: 'line',
smooth:true,
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:'#e5abd1',
lineStyle:{
color:'#e5abd1'
}
}
},
},
]
})
return{
}
}
}
\ No newline at end of file
... ...
... ... @@ -45,8 +45,6 @@ export default {
})
const setNumberTransform=()=> {
// 结合CSS 对数字字符进行滚动,显示数量
console.log("test",proxy.orderNum.length)
console.log("aaa",proxy.$refs)
for (let index = 0; index < proxy.orderNum.length; index++) {
const ele = proxy.$refs[`numberItem${index}`];
... ...
<div class="lineChart">
<div id="line-echart" style="width:100%;height:700px;"></div>
<div :id="chartId" style="width:100%;height:225px;"></div>
</div>
\ No newline at end of file
... ...
export default {
name: 'lineChart',
template: '',
props:['yAxisData','seriesData','chartId'],
components: {
},
data(){
... ... @@ -8,183 +9,11 @@ export default {
domainName:'http://192.168.0.245:8180/api-web',
yAxisData:'',//y序列的数据
seriesData:[],//y轴数据
chartId:'line-echart'
}
},
setup(props, {attrs, slots, emit}) {
//业务性能指标y序列
let performanceData=[
{
type: 'value',
axisLabel: {
formatter: '{value} %'//以百分比显示
},
}, {
name: '单位:万',
type: 'value',
axisLabel: {
show: true,
interval: 'right',//居中显示
},
},
]
//一般y序列
let yAxisCommon={
type: 'value',
splitLine:{
lineStyle: {
color:'#0a1b31'
}
},
axisLabel:{
color:'#ffffff',
},
}
//业务双y轴数据
let performanceYData=[
{
name:'可用性',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4'
}
}
},
areaStyle: {
color:'rgba(151,213,244,0.1)'
},
},
{
name:'成功率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#efe0a7",//tooltip里的小圆点颜色
lineStyle:{
color:'#efe0a7'
}
}
},
areaStyle: {
color:'rgba(239,224,167,0.2)'
},
},
{
name:'响应率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[220, 182, 191, 234, 290, 330, 310],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#e5abd1",//tooltip里的小圆点颜色
lineStyle:{
color:'#e5abd1'
}
}
},
areaStyle: {
color:'rgba(229,171,209,0.3)'
},
},
{
name:'交易量',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[150,232,201,154,190,330,410],
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97aaff",//tooltip里的小圆点颜色
lineStyle:{
color:'#97aaff'
}
}
},
areaStyle: {
color:'rgba(151,170,255,0.4)'
},
}
]
//一般y轴数据
let ySeriesCommon=[
{
name: '网络投票',
type: 'line',
smooth:true,
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4'
}
}
},
},
{
name: '涉税文书',
type: 'line',
smooth:true,
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
showSymbol:false,
yAxisIndex:0,
itemStyle : {
color:"#ffffff",
normal : {
color:'#efe0a7',
lineStyle:{
color:'#efe0a7'
}
}
},
},
{
name: '网上申报',
type: 'line',
smooth:true,
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:'#e5abd1',
lineStyle:{
color:'#e5abd1'
}
}
},
},
]
const {proxy} = Vue.getCurrentInstance();
// 挂载完
... ... @@ -192,11 +21,14 @@ export default {
/*$.get(proxy.domainName,function(res){
})*/
proxy.yAxisData=performanceData;
proxy.seriesData=performanceYData;
console.log('222',proxy.yAxisData)
const chartDom = document.getElementById('line-echart');
proxy.yAxisData=props.yAxisData;
proxy.seriesData=props.seriesData;
proxy.chartId=props.chartId;
console.log('ddd',proxy.chartId)
// const chartDom = document.getElementById('line-echart');
const chartDom = document.getElementById(proxy.chartId);
console.log('d3e3',$(proxy.chartId))
const myChart = echarts.init(chartDom);
let option;
... ... @@ -237,7 +69,7 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: ['1', '2', '3', '4', '5', '6', '7'],
axisLine:{
show:false,//是否显示坐标线
... ... @@ -279,7 +111,6 @@ export default {
const dd = date.getDate();
let rangeData=[];
if(dd+15>lastDay){
console.log("11",dd)
const start=lastDay-15;
const end=lastDay;
for(let i=start;i<end;i++){
... ... @@ -289,7 +120,6 @@ export default {
const start=dd;
const end=dd+15;
for(let i=start;i<end;i++){
console.log("44",i)
rangeData.push(i)
}
}
... ...
... ... @@ -61,6 +61,8 @@ export default {
// 挂载完
Vue.onMounted(() => {
let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
console.log("444",proxy.divIdName)
// 解析地图数据包
$.getJSON(proxy.mapJsonUrl, function(geoJson) {
// 注册地图,传入数据
... ... @@ -231,6 +233,9 @@ export default {
};
// let map_chart = echarts.init(document.getElementById('network-echart'));
console.log("555",proxy.divIdName)
console.log("666",$(proxy.divIdName))
let map_chart=echarts.init($(proxy.divIdName)[0])
map_chart.setOption(optionMap);
map_chart.on('mouseout', 'geo', function (params) {
... ...
<div className="performance-container">
<div className="container-title">
<img src="/vue3/src/assets/images/zjdp/title-performance.png" alt="">
</div>
<div class="performance-lineChart">
<LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance"></LineChart>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'performance',
template: '',
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
)
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
resourceStatisticsData:'',
yAxisDataPerformance:[],
seriesDataPerformance:[]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
//业务性能指标y序列
proxy.yAxisDataPerformance=[
{
type: 'value',
axisLabel: {
formatter: '{value} %'//以百分比显示
},
}, {
name: '单位:万',
type: 'value',
axisLabel: {
show: true,
interval: 'right',//居中显示
},
},
]
//业务双y轴数据
proxy.seriesDataPerformance=[
{
name:'可用性',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4'
}
}
},
areaStyle: {
color:'rgba(151,213,244,0.1)'
},
},
{
name:'成功率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#efe0a7",//tooltip里的小圆点颜色
lineStyle:{
color:'#efe0a7'
}
}
},
areaStyle: {
color:'rgba(239,224,167,0.2)'
},
},
{
name:'响应率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[220, 182, 191, 234, 290, 330, 310],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#e5abd1",//tooltip里的小圆点颜色
lineStyle:{
color:'#e5abd1'
}
}
},
areaStyle: {
color:'rgba(229,171,209,0.3)'
},
},
{
name:'交易量',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[150,232,201,154,190,330,410],
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97aaff",//tooltip里的小圆点颜色
lineStyle:{
color:'#97aaff'
}
}
},
areaStyle: {
color:'rgba(151,170,255,0.4)'
},
}
]
})
return{
}
}
}
\ No newline at end of file
... ...
... ... @@ -3,7 +3,7 @@
<img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt="">
</div>
<el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="4000">
<el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000">
<el-carousel-item v-for="item in 2" :key="item">
<!-- <h3 class="medium">{{ item }}</h3>-->
<div class="medium ">
... ... @@ -16,12 +16,12 @@
<span class="listPercent">100%</span>
</div>
<div class="healthList">
<span class="listText">良</span>
<span class="listText listText2">良</span>
<span class="listNum">0</span>
<span class="listPercent">0%</span>
</div>
<div class="healthList">
<span class="listText">中</span>
<span class="listText listText3">中</span>
<span class="listNum">0</span>
<span class="listPercent">0%</span>
</div>
... ...
... ... @@ -10,30 +10,57 @@
</div>
</header>
<div class="screen-body">
<section class="screen-left" >
<section class="screen-left left-40" >
<div class="left-top">
<!--省局网络拓扑-->
<!-- <NetworkTopology ></NetworkTopology>-->
<NetworkTopology ></NetworkTopology>
</div>
<div class="left-bottom">
<div class="left-bottom-left">
<div class="left-bottom data-cloud">
<div class="left-bottom-left flex-data">
<div class="left-bottom-left-top">
<!--数据中心-->
<DataCenter></DataCenter>
<!-- <DataCenter></DataCenter>-->
</div>
<div class="left-bottom-left-bottom">
<!--资产概览-->
<AssetOverview></AssetOverview>
<!-- <AssetOverview></AssetOverview>-->
</div>
</div>
<div class="left-bottom-right">
云平台
</div>
<div class="left-bottom-right flex-cloud">
<!--云平台-->
<!-- <CloudPlatform></CloudPlatform>-->
</div>
</div>
</section>
<section class="screen-right" >
<section class="screen-right section-right" >
<div class="screen-right-top declare-chart">
<div class="right-container flex-declare">
<!--今日申报-->
<!-- <Declare></Declare>-->
</div>
<div class="right-chart flex-chart">
<!--折线图-->
<!-- <DeclareLine></DeclareLine>-->
<!--柱状图-->
<!-- <BarChart></BarChart>-->
</div>
</div>
<div class="screen-right-bottom">
<!--导航轮播-->
<div class="screen-nav"></div>
<div class="screen-res-performance">
<div class="screen-res">
<!--系统资源统计-->
<!-- <ResourceStatistics></ResourceStatistics>-->
</div>
<div class="screen-performance">
<!--业务性能指标-->
<!-- <Performance></Performance>-->
</div>
</div>
</div>
</section>
... ...
... ... @@ -11,8 +11,26 @@ export default {
'AssetOverview': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/assetOverview/index')
),
'Digital': Vue.defineAsyncComponent(
/*'Digital': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/digital/index')
),*/
'CloudPlatform': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/cloudPlatform/index')
),
'ResourceStatistics': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/resourceStatistics/index')
),
'Declare': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/declare/index')
),
'DeclareLine': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/declareLine/index')
),
'BarChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/barChart/index')
),
'Performance': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/performance/index')
)
},
data() {
... ...