monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit cbfcc35705255f61674826c3dfdb92ebbf7383e0 1 parent 26d660d5

map地图组件引入，折线图、柱状图接口联调，导航轮播组件

Inline Side-by-side
Showing 36 changed files with 708 additions and 356 deletions
... ... @@ -34,4 +34,6 @@
@import "../css/resourceStatistics.css";
@import "../css/cloudPlatform.css";
\ No newline at end of file
@import "../css/cloudPlatform.css";
@import "../css/navTabs.css";
\ No newline at end of file
... ...
... ... @@ -75,7 +75,10 @@
position: relative;
z-index: 1;
}
.yxqk .tip .asset-tip{
display: inline-block;
position: relative;
}
.yxqk .tip b {
color:#00b3fe;
... ... @@ -199,7 +202,7 @@
opacity: .9;
position: absolute;
top: -10px;
left: 270px;
left: 70px;
z-index: 999;
width: 132px;
height: 170px;
... ...
.declare-container{
.declare-container,.declare-lineChart{
background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
height: 100%;
overflow: hidden;
}
.declare-container{
max-width:323px;
}
.declare-total{
font-size: 16px;
... ...
.navTabs-container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.navTabs-container .el-carousel{
flex: 1;
}
.navTabs-container .el-carousel__item {
display: flex;
justify-content: center;
align-items: center;
}
.navTabs-container .el-carousel__arrow--left {
left: 3px;
}
.navTabs-container .el-carousel__arrow--right{
right:3px;
}
.rightArrow,.leftArrow{
cursor: pointer;
}
.tabContaier{
display: flex;
justify-content: space-around;
flex: 1;
}
.tabItem{
padding:5px 30px;
border-bottom: 3px solid #1ac045;
background-color: #0c1532;
border-radius: 3px;
color: #fff;
font-size: 16px;
cursor: pointer;
font-family: "PingFang SC";
box-sizing: border-box;
height: 43px;
align-items: center;
display: flex;
}
.borderColorGood{
border-bottom: 3px solid #d2bf3f;
}
.borderColorMi{
border-bottom: 3px solid #f31515;
}
.tabItem:hover,.tabItem.active{
background-color: #0b1943;
}
\ No newline at end of file
... ...
.network-container{
width: 100%;
height: 100%;
background-image: url("/vue3/src/assets/images/bg.jpg");
background-position: center;
/* background-image: url("/vue3/src/assets/images/bg.jpg");
background-position: center;*/
text-align: left;
overflow: visible;
position: relative;
}
#network-echart{
... ... @@ -13,4 +14,10 @@
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;
top: -10px;
z-index: 1;
}
\ No newline at end of file
... ...
... ... @@ -3,10 +3,21 @@ body{font-size: 15px;}
background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
}
.zj-screen{
padding:0 10px;
}
.container-title{
color: white;
text-align: left;
}
.screen-header .title-date{
color: #ffff;
left:2%;
top:44%;
}
.title-date span{
margin-left: 12px;
}
.left-40{
width:48%;
}
... ...
... ... @@ -104,14 +104,6 @@ const routes = [{
path: '/zjdaping',
name: 'zjdaping',
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/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',
... ...
... ... @@ -6,20 +6,24 @@
<div class="asset-overview yxqk">
<div class="asset-overview-tip">
<div class="tip yxqk_tips_div">
<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
<div class="asset-tip">
<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
<!--悬浮提示信息-->
<div class="yxqk_tips_container" v-show="isShow" >
<ul class="items" id="yxjk_resource_type_count_tips" >
<div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
<li v-for="(item,index) in assetOverviewDataAll">
<i :class="'icon-'+item.code"></i>
<span >{{item.name}}：{{item.num}}台</span>
</li>
</div>
</ul>
</div>
</div>
<b id="yxjk_total_resource">{{totalData}}</b>
<!--悬浮提示信息-->
<div class="yxqk_tips_container" v-show="isShow" >
<ul class="items" id="yxjk_resource_type_count_tips" >
<div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
<li v-for="(item,index) in assetOverviewDataAll">
<i :class="'icon-'+item.code"></i>
<span >{{item.resTypeName}}：{{item.num}}台</span>
</li>
</div>
</ul>
</div>
</div>
<div id="all_resource_status" :class="['yxqk__pie',pieClass]">
... ... @@ -38,7 +42,7 @@
<li :class="'list-'+index" v-for="(item,index) in assetOverviewData">
<img :src="'src/assets/images/zjdp/'+item.code+'.png'">
<div style="margin-left: .02rem;">
<p>{{item.resTypeName}}</p>
<p>{{item.name}}</p>
<div class="listNum">
<b>{{item.num}}</b><span>台</span>
</div>
... ...
... ... @@ -20,7 +20,8 @@ export default {
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl,function (res) {
const data = res.map;
const data = res;
// const data = res.object;
//状态
if(data && data.healthStatus){
if(data.healthStatus == '2'){//问题
... ... @@ -34,19 +35,19 @@ export default {
proxy.healthStatusName=data.healthStatusName;
}
//资源总量
if(data && data.total){
proxy.totalData=data.total;
if(data && data.count){
proxy.totalData=data.count;
}
//分类总量
if(data && data.data){
if(data && data.object){
// //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
// var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER'];
let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
const showData = [];//展示的类型
//华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
// 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
$.each(data.data,function (i,v) {
const resType = v.resType;
$.each(data.object,function (i,v) {
const resType = v.code;
if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
... ... @@ -54,16 +55,16 @@ export default {
if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
});
showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
showData.push({resTypeName:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
showData.push({resTypeName:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
showData.push({resTypeName:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});
showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
showData.push({name:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
showData.push({name:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
showData.push({name:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
showData.push({name:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
showData.push({name:"存储",num:storage,code:'STORAGE'});
showData.push({name:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
//类型统计
proxy.assetOverviewData=showData;
proxy.assetOverviewDataAll=data.data;
proxy.assetOverviewDataAll=data.object;
//悬浮提示
... ...
<div class="barChart">
<div id="bar-echart" style="width:100%;height:225px;"></div>
</div>
\ No newline at end of file
<div id="bar-echart" style="width:100%;height:225px;"></div>
... ...
export default {
name: 'barChart',
template: '',
props:['yAxisData','seriesData','legendData','chartId'],
components: {
},
data(){
return {
domainName:'http://192.168.0.159:8080/api-web',
chartId:'bar-echart'
}
},
... ... @@ -13,10 +15,9 @@ export default {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
const chartDom = document.getElementById('bar-echart');
const chartDom=proxy.$el
const myChart = echarts.init(chartDom);
let option;
option = {
title: {
text: '近30天访问量',
... ... @@ -29,7 +30,7 @@ export default {
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: props.legendData,
axisLine:{
show:true,//是否显示坐标线
lineStyle: {
... ... @@ -58,32 +59,18 @@ export default {
},
axisLabel:{
color:'#ffffff',
fontSize:12
},
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle:{
normal:{
barBorderRadius: [3,3,0,0],
color:new echarts.graphic.LinearGradient(
0,0,0,1,
[
{offset:0,color:'#3ac9fb'},
{offset:1,color:'#2a81f3'}
]
)
// color:"#ff0000"
fontSize:12,
formatter:function (value,index){
if(value>=10000 &&value<10000000){
value=value/10000 +"万";
}else if(value>=10000000){
value=value/10000000+"千万";
}
return value;
}
}
]
},
series: props.seriesData
};
option && myChart.setOption(option);
... ...
... ... @@ -21,7 +21,7 @@
</div>
</div>
<div class="declare-today-num">
<Digital :numm="56631" :numLen="7"></Digital>
<Digital v-if="declaredToday" :numm="declaredToday" :numLen="7"></Digital>
</div>
</div>
<div class="declare-today">
... ... @@ -33,19 +33,19 @@
</div>
</div>
<div class="declare-today-num">
<Digital :numm="5640397" :numLen="7"></Digital>
<Digital v-if="declaredMonth" :numm="declaredMonth" :numLen="7"></Digital>
</div>
</div>
<div class="declare-today">
<div class="declare-title">
<div class="declare-bg volume-today"></div>
</div>
<div class="volume-today-container">
<span class="volume-text">网络发票</span>
<span class="volume-proportion" :style="styleVolume"></span>
<span class="volume-num">{{volumeNum}}</span>
<div class="volume-today-container" v-for="(item,index) in volumeData">
<span class="volume-text">{{item.name}}</span>
<span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span>
<span class="volume-num">{{item.num1}}</span>
</div>
<div class="volume-today-container">
<!-- <div class="volume-today-container">
<span class="volume-text">涉税文书</span>
<span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
<span class="volume-num num-doc">{{volumeNumDoc}}</span>
... ... @@ -54,7 +54,7 @@
<span class="volume-text">网上申报</span>
<span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
<span class="volume-num num-net">{{volumeNumNet}}</span>
</div>
</div>-->
</div>
</div>
<div class="declare-right">
... ...
... ... @@ -8,15 +8,20 @@ export default {
},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/digitalBoardData',//本月已申报/未申报
apiUrl1:'/api-web/bigScreen/findPortfolio',//今日业务量
volumeData:'',//业务量数据
declareData:'',
reportable:0,//本月应申报
reportableToday:0,//本日申报未导入
declaredToday:0,//今日已申报数
reportableMonth:0, //本月未申报数
declaredMonth:0,//本月已申报数
declarationRate:0.94,//申报率
volumeNumDoc:0,//涉税文书业务量
volumeNumNet:0,//网上申报业务量
volumeNum:0, //业务量数
// volumeNumDoc:0,//涉税文书业务量
// volumeNumNet:0,//网上申报业务量
// volumeNum:0, //业务量数
styleVolume:'',//业务量style样式
styleVolumeDoc:'',
styleVolumeNet:'',
... ... @@ -29,41 +34,64 @@ export default {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
proxy.reportable=proxy.numberFilter('1006105',-1);
proxy.reportableToday=proxy.numberFilter('1006506',-1);
proxy.reportableMonth=proxy.numberFilter('2848',-1);
$.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD',function (res) {
const data = res;
if(data && data.map){
let reportableMonth=data.map.rightNumber;
proxy.declaredMonth=data.map.leftNumber;
proxy.reportableMonth=proxy.numberFilter(reportableMonth,-1);
proxy.volumeNum=proxy.numberFilter('5765404',-1);
proxy.volumeNumDoc=proxy.numberFilter('5458044',-1);
proxy.volumeNumNet=proxy.numberFilter('698423',-1);
let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);
proxy.reportable=proxy.numberFilter(reportable,-1);
let declarationRate=(parseInt(proxy.declaredMonth) /reportable).toFixed(2);
proxy.opactiyNumMath=declarationRate*proxy.opactiyNumTotal
proxy.opactiyNumMath=proxy.declarationRate*proxy.opactiyNumTotal
if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
}else{
proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
}else{
proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
}
proxy.declarationRate=declarationRate*100+'%';
}
proxy.declarationRate=proxy.declarationRate*100+'%';
}
let num1=5765404;
let num2=5458044;
let num3=698423;
})
proxy.styleVolume='width:'+proxy.eleWidthNum(num1,num1,num2,num3)+'px'
proxy.styleVolumeDoc='width:'+proxy.eleWidthNum(num2,num1,num2,num3)+'px'
proxy.styleVolumeNet='width:'+proxy.eleWidthNum(num3,num1,num2,num3)+'px'
$.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBS&kipValue2=KPIDA0ACBBE',function (res) {
const data = res;
if(data && data.map){
let reportableToday=data.map.rightNumber;
proxy.declaredToday=data.map.leftNumber;
proxy.reportableToday=proxy.numberFilter(reportableToday,-1);
}
})
//业务量
$.get(proxy.domainName +proxy.apiUrl1,function (res) {
const data = res;
if(data && data.data){
let volumeData=data.data;
let maxVal=0;
$.each(volumeData,function (i,v){
v.num1=proxy.numberFilter(v.num,-1)
if(v.num>maxVal){
maxVal=v.num;
}
})
$.each(volumeData,function (i,v){
v.styleVolume='width:'+proxy.eleWidthNum(v.num,maxVal)+'px'
})
proxy.volumeData=volumeData;
}
})
})
const eleWidthNum=(num,num1,num2,num3)=>{
let maxNum = num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3);
const eleWidthNum=(num,maxNum)=>{
let widthNum=Math.ceil((num*150)/maxNum)
console.log("aaa",num,widthNum)
let widthData=0;
if(widthNum!='' && widthNum!=null && widthNum!=undefined){
widthData=widthNum;
... ...
<div class="declare-lineChart">
<LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :chartId="chartId"></LineChart>
<LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></LineChart>
</div>
... ...
... ... @@ -9,10 +9,11 @@ export default {
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
resourceStatisticsData:'',
apiUrl:'/api-web/bigScreen/PortFolioLineChart',
declareLineData:'',
yAxisCommon:[],
ySeriesCommon:[],
legendData:[],
chartId:'line-echart-declare'
}
},
... ... @@ -21,11 +22,40 @@ export default {
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl,function (res) {
const data = res;
let ySeriesCommon=[];
if (data && data.data) {
let declareLineData=data.data;
let legendData=[];
$.each(declareLineData,function (i,v){
ySeriesCommon.push({
name:v.name,
type:'line',
smooth:true,
stack:'Total',
data:v.number,
// yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1',//tooltip里的小圆点颜色
lineStyle:{
color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1'
}
}
},
})
legendData.push(v.name)
})
proxy.ySeriesCommon=ySeriesCommon;
proxy.legendData=legendData;
}
})
//一般y序列
proxy.yAxisCommon={
type: 'value',
... ... @@ -39,7 +69,7 @@ export default {
},
}
//一般y轴数据
proxy.ySeriesCommon=[
/* proxy.ySeriesCommon=[
{
name: '网络投票',
type: 'line',
... ... @@ -92,7 +122,7 @@ export default {
}
},
},
]
]*/
})
return{
... ...
<div class="digital">
<!-- 数字滚动显示-->
<div class="box-item">
<li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'number-item-color':item==0&&index<numDiff,'number-item-comma':index==0||index==3 }"
<li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'number-item-color':item==0&&index<numDiff,'number-item-comma':index==0||index==3 }"
v-for="(item,index) in orderNum"
:key="index" :style="cStyle">
<span v-if="!isNaN(item)">
... ...
... ... @@ -17,6 +17,7 @@ export default {
// numm: 传入的数字 numLen: 默认显示几位数
let numVal=numm.value+'';
proxy.numDiff=parseInt(numLen.value)-parseInt(numVal.split("").length);
console.log("numDiff--",proxy.numDiff)
const toOrderNum = (num) => {
num = num.toString();
... ...
export default {
name: 'lineChart',
template: '',
props:['yAxisData','seriesData','chartId'],
props:['yAxisData','seriesData','legendData','chartId'],
components: {
},
data(){
... ... @@ -25,6 +25,11 @@ export default {
proxy.seriesData=props.seriesData;
proxy.chartId=props.chartId;
// const chartDom = document.getElementById('line-echart-declare');
let xAxisDataLength=proxy.seriesData[0].data.length;
let xAxisData=[];
for(let i=1;i<=xAxisDataLength;i++){
xAxisData.push(i)
}
const chartDom=proxy.$el
const myChart = echarts.init(chartDom);
let option;
... ... @@ -39,11 +44,12 @@ export default {
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
}
},
legend: {
data: ['网络投票', '涉税文书', '网上申报'],
data: props.legendData,
itemHeight:0,//图例圆圈大小设置
y:'7px',
textStyle: {
... ... @@ -58,15 +64,15 @@ export default {
bottom: '3%',
containLabel: true,
},
toolbox: {
/*toolbox: {
feature: {
saveAsImage: {}
}
},
},*/
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7'],
data: xAxisData,
axisLine:{
show:false,//是否显示坐标线
... ... @@ -88,43 +94,11 @@ export default {
option && myChart.setOption(option);
let xAxisData=proxy.getRangeData();
// console.log('111',xAxisData)
})
//获取当前月份的最后一天,当前日期
const getRangeData=()=> {
const date = new Date();
let currentMonth = date.getMonth();
const nextMonth = ++currentMonth;
const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
const oneDay = 1000 * 60 * 60 * 24;
const lastTime = new Date(nextMonthFirstDay - oneDay);
const lastDay = lastTime.getDate();
const dd = date.getDate();
let rangeData=[];
if(dd+15>lastDay){
const start=lastDay-15;
const end=lastDay;
for(let i=start;i<end;i++){
rangeData.push(i+1)
}
}else{
const start=dd;
const end=dd+15;
for(let i=start;i<end;i++){
rangeData.push(i)
}
}
return rangeData;
}
return{
getRangeData
}
}
}
\ No newline at end of file
... ...
<div class="monitoring-bar">
<BarChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></BarChart>
</div>
... ...
export default {
name: 'performance',
template: '',
components: {
'BarChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/barChart/index')
)
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/thirtyDayMonitor?kipId=KPI63C5B2E5',
declareLineData:'',
yAxisCommon:[],
ySeriesCommon:[],
legendData:[],
ySeriesCommonData:[],
}
},
watch:{
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl,function (res) {
const data = res;
if (data && data.data) {
let monitoringBarData=data.data;
let legendData=[];
$.each(monitoringBarData,function (i,v){
proxy.ySeriesCommonData.unshift(v.value)
legendData.push(i)
})
proxy.legendData=legendData
}
proxy.ySeriesCommon=[
{
data: proxy.ySeriesCommonData,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle:{
normal:{
barBorderRadius: [3,3,0,0],
color:new echarts.graphic.LinearGradient(
0,0,0,1,
[
{offset:0,color:'#3ac9fb'},
{offset:1,color:'#2a81f3'}
]
)
// color:"#ff0000"
}
}
}
]
})
})
return{
}
}
}
\ No newline at end of file
... ...
<div class="navTabs-container">
<div class="rightArrow">
<img src="/vue3/src/assets/images/zjdp/icon-left.png" @click="arrowClick('left')" alt="">
</div>
<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>
</el-carousel-item>
</el-carousel>
<div class="rightArrow">
<img src="/vue3/src/assets/images/zjdp/icon-right.png" @click="arrowClick('right')" alt="">
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'navTabs',
template: '',
components: {
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getbizListByUser?access_token=',
listItem:1,//轮播数-总页数
pageSize:5,//每页显示5条数据
currentPage:0,//当前页
listArray:'' //导航数据
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let accessToken = localStorage.getItem('access_token');
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl+accessToken,function (res) {
const data = res;
if (data && data.data) {
let navTabsData=data.data;
proxy.listArray=navTabsData;
}
})
})
const arrowClick=(val)=>{
if(val=='right'){
proxy.$refs.cardShow.next();
proxy.nextPage();
}else{
proxy.$refs.cardShow.prev();
proxy.prePage();
}
}
const nextPage= ()=>{
if (proxy.currentPage == proxy.pageNum - 1) return;
proxy.currentPage++;
}
const prePage=()=>{
if (proxy.currentPage == 0) return;
proxy.currentPage--;
}
return{
arrowClick,
nextPage,
prePage
}
},
computed:{
dataShow: function(){
let start = this.currentPage*this.pageSize;
let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length)
return this.listArray.slice(start, end)
},
pageNum: function(){
return Math.ceil(this.listArray.length / this.pageSize) || 1 ;
}
}
}
\ No newline at end of file
... ...
... ... @@ -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"></div>
<div id="network-echart" v-if="mapData" style="height:400px"></div>
</div>
... ...
... ... @@ -12,6 +12,7 @@ export default {
mapJsonUrl: 'public/data/zhejiang.json',
// cityUrl: '/datavis/getEchartsMap',
cityUrl: '/api-web/bigScreen/getEchartsMap',
mapData:'',
// 标记各地市的坐标
geoCoordMap: {
"省局": [119.453576, 30.005871],
... ... @@ -61,8 +62,6 @@ export default {
// 挂载完
Vue.onMounted(() => {
let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
console.log("444",proxy.divIdName)
// 解析地图数据包
$.getJSON(proxy.mapJsonUrl, function(geoJson) {
// 注册地图,传入数据
... ... @@ -71,6 +70,7 @@ export default {
$.get(proxy.domainName +proxy.cityUrl,function(res){
if(res.data && res.data.length > 0){
const mapData = res.data;
proxy.mapData=mapData;
const obj = res.object;
const optionMap = {
timeline: {
... ... @@ -122,160 +122,180 @@ export default {
tooltip: {
show:false
},
series: [{
// 坐标点参数和样式
type: 'effectScatter',
coordinateSystem: 'geo',
data: proxy.convertData(mapData),
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color:'#fff',
fontSize:16
}
},
itemStyle: {
normal: {
//点的颜色
color: function (data) {
return colors[data.value[2]];
},
shadowBlur: 2,
shadowColor: '#03BED9',
symbolSize: 5
}
}
},
{
// 线条参数和样式
type: 'lines',
// 变化频率
zlevel: 2,
effect: {
show: true,
// 箭头指向速度，值越小速度越快
period: 4,
// 特效尾迹长度,取值0到1,值越大,尾迹越长
trailLength: 0.03,
symbol: 'arrow',
// 图标大小
symbolSize: 6
},
lineStyle: {
normal: {
//线条颜色
color: function (data) {
// return colors[0];//线条跟着点的颜色一致
if(data.value == 0){
return '#00eaff';
}else{
return '#D81E06';
}
},
// 尾迹线条宽度
width: 1,
// 尾迹线条透明度
opacity: 1,
// 尾迹线条曲直度
curveness: 0.3
}
},
data: proxy.convertToLineData(mapData)
},
{//被攻击点
// type: 'scatter',
type:'effectScatter',
hoverAnimation:true,//鼠标移入是否显示动画
series: [
{
// 坐标点参数和样式
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
number:3,
period: 4,
brushType: 'fill',
scale: 2
},
symbol: 'circle',
symbolSize: 30,
itemStyle:{
color:'#EE4237',
data: proxy.convertData(mapData),
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: false,
position: 'left',
formatter: '省局',
textStyle: {
color: "#0f0"
},
formatter: '{b}',
position: 'right',
show: true,
color:'#fff',
fontSize:16
},
emphasis: {
show: false,
color: "#0f0"//鼠标移入字体颜色
}
},
data: [{
name: '省局',
value: proxy.geoCoordMap['省局'].concat([10])
}]
}]
itemStyle: {
normal: {
//点的颜色
color: function (data) {
return colors[data.value[2]];
},
shadowBlur: 2,
shadowColor: '#03BED9',
symbolSize: 5
}
}
},
{
// 线条参数和样式
type: 'lines',
// 变化频率
zlevel: 2,
effect: {
show: true,
// 箭头指向速度，值越小速度越快
period: 4,
// 特效尾迹长度,取值0到1,值越大,尾迹越长
trailLength: 0.03,
symbol: 'arrow',
// 图标大小
symbolSize: 6
},
lineStyle: {
normal: {
//线条颜色
color: function (data) {
// return colors[0];//线条跟着点的颜色一致
if(data.value == 0){
return '#00eaff';
}else{
return '#D81E06';
}
},
// 尾迹线条宽度
width: 1,
// 尾迹线条透明度
opacity: 1,
// 尾迹线条曲直度
curveness: 0.3
}
},
data: proxy.convertToLineData(mapData)
},
{//被攻击点
// type: 'scatter',
type:'effectScatter',
hoverAnimation:true,//鼠标移入是否显示动画
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
number:3,
period: 4,
brushType: 'fill',
scale: 2
},
symbol: 'circle',
symbolSize: 30,
itemStyle:{
color:'#EE4237',
},
label: {
normal: {
show: false,
position: 'left',
formatter: '省局',
textStyle: {
color: "#0f0"
},
fontSize:16
},
emphasis: {
show: false,
color: "#0f0"//鼠标移入字体颜色
}
},
data: [{
name: '省局',
value: proxy.geoCoordMap['省局'].concat([10])
}]
}]
}]
};
setTimeout(function (){
let map_chart = echarts.init(document.getElementById('network-echart'));
// let map_chart=echarts.init($(proxy.divIdName)[0])
map_chart.setOption(optionMap);
map_chart.on('mouseout', 'geo', function (params) {
$('.map_tips').hide();
});
//当鼠标移入当前区域显示提示信息
map_chart.on('mouseover', 'geo',function (params) {
let name = params.name;
//先删除原来的
$(proxy.divIdName).find('.map_tips').remove();
//当前城市提示信息
let currentCity = obj[name];
if(currentCity && currentCity.length > 0){
let cityInfos = '';
$.each(currentCity,function (i,v) {
cityInfos += '<div class="map_tips_group">' +
' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +
' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +
' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +
' </div>';
});
// 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) {
$('.map_tips').hide();
});
//当鼠标移入当前区域显示提示信息
map_chart.on('mouseover', 'geo',function (params) {
let name = params.name;
//先删除原来的
$(proxy.divIdName).find('.map_tips').remove();
//当前城市提示信息
let currentCity = obj[name];
if(currentCity && currentCity.length > 0){
let cityInfos = '';
$.each(currentCity,function (i,v) {
cityInfos += '<div class="map_tips_group">' +
' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +
' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +
' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +
' </div>';
});
//地图区域悬浮提示
let cityTips =
'<div class="map_tips">' +
' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'
+ cityInfos +
'</div>';
//提示框拼接在echar区域
$(cityTips).appendTo($(proxy.divIdName));
//地图区域悬浮提示
let cityTips =
'<div class="map_tips">' +
' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'
+ cityInfos +
'</div>';
//提示框拼接在echar区域
$(cityTips).appendTo($(proxy.divIdName));
if ($('.map_tips').is(':hidden')) {
$('.map_tips').show();
}
//城市名称从左到右滑入效果
$('.map_tips_res').addClass("map_tips_city_0");
$('.map_tips_sxll').addClass("map_tips_city_1");
$('.map_tips_xxll').addClass("map_tips_city_2");
if ($('.map_tips').is(':hidden')) {
$('.map_tips').show();
//根据鼠标位置定位
let layerX = params.event.offsetX;
let layerY = params.event.offsetY;
//随鼠标移动
if(name == '湖州市' || name == '嘉兴市'){
$('.map_tips').css({
'top': layerY + 10,
'left': layerX + 15
});
}else{
$('.map_tips').css({
'top': layerY -120,
'left': layerX + 15
});
}
}else{
$('.map_tips').hide();
}
//城市名称从左到右滑入效果
$('.map_tips_res').addClass("map_tips_city_0");
$('.map_tips_sxll').addClass("map_tips_city_1");
$('.map_tips_xxll').addClass("map_tips_city_2");
//根据鼠标位置定位
});
//鼠标移动，提示信息随鼠标走
map_chart.on('mousemove', 'geo', function (params) {
let name = params.name;
//随鼠标移动
let layerX = params.event.offsetX;
let layerY = params.event.offsetY;
//随鼠标移动
... ... @@ -290,29 +310,8 @@ export default {
'left': layerX + 15
});
}
}else{
$('.map_tips').hide();
}
});
//鼠标移动，提示信息随鼠标走
map_chart.on('mousemove', 'geo', function (params) {
let name = params.name;
//随鼠标移动
let layerX = params.event.offsetX;
let layerY = params.event.offsetY;
//随鼠标移动
if(name == '湖州市' || name == '嘉兴市'){
$('.map_tips').css({
'top': layerY + 10,
'left': layerX + 15
});
}else{
$('.map_tips').css({
'top': layerY -120,
'left': layerX + 15
});
}
});
});
},500)
}
});
});
... ... @@ -322,5 +321,10 @@ export default {
convertData,
convertToLineData
}
},
onMounted(){
}
}
... ...
... ... @@ -4,6 +4,6 @@
</div>
<div class="performance-lineChart">
<LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance"></LineChart>
<LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance" v-if="seriesDataPerformance"></LineChart>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -21,6 +21,15 @@ export default {
// 挂载完
Vue.onMounted(() => {
let data3=[350, 350, 350, 350, 350, 350, 350];
let data4=[220, 182, 191, 234, 290, 330, 310];
let data2=[100, 100, 100, 100, 100, 100, 100];
let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
let min1=proxy.calMin([data1,data2]);
let max1=proxy.calMax([data1,data2]);
let min2=proxy.calMin([data3,data4]);
let max2=proxy.calMax([data3,data4]);
//业务性能指标y序列
proxy.yAxisDataPerformance=[
{
... ... @@ -29,6 +38,15 @@ export default {
axisLabel: {
formatter: '{value} %'//以百分比显示
},
splitLine:{
lineStyle: {
color:'#0a1b31'
}
},
min:0,
max:100,
splitNumber:10,
interval:(100-0)/10
}, {
name: '单位:万',
type: 'value',
... ... @@ -36,6 +54,15 @@ export default {
show: true,
interval: 'right',//居中显示
},
splitLine:{
lineStyle: {
color:'#0a1b31'
}
},
min:min2,
max:max2,
splitNumber:10,
interval:(max2-min2)/10
},
]
//业务双y轴数据
... ... @@ -46,19 +73,30 @@ export default {
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
data:data3,
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4'
color:'#97d5f4',
width:1
}
}
},
areaStyle: {
color:'rgba(151,213,244,0.1)'
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
offset: 0,
color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
offset: 1,
color: 'rgba(151,213,244,0.1)'
}])
}
},
},
{
... ... @@ -67,19 +105,20 @@ export default {
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
data:data1,
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#efe0a7",//tooltip里的小圆点颜色
lineStyle:{
color:'#efe0a7'
color:'#efe0a7',
width:1
}
}
},
areaStyle: {
color:'rgba(239,224,167,0.2)'
color:'rgba(239,224,167,0)'
},
},
{
... ... @@ -88,19 +127,20 @@ export default {
smooth:true,
// stack: 'Total',
show:false,
data:[220, 182, 191, 234, 290, 330, 310],
data:data2,
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#e5abd1",//tooltip里的小圆点颜色
lineStyle:{
color:'#e5abd1'
color:'#e5abd1',
width:1
}
}
},
areaStyle: {
color:'rgba(229,171,209,0.3)'
color:'rgba(229,171,209,0)'
},
},
{
... ... @@ -109,25 +149,61 @@ export default {
smooth:true,
// stack: 'Total',
show:false,
data:[150,232,201,154,190,330,410],
data:data4,
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97aaff",//tooltip里的小圆点颜色
lineStyle:{
color:'#97aaff'
color:'#97aaff',
width:1,
}
}
},
areaStyle: {
color:'rgba(151,170,255,0.4)'
color:'rgba(151,170,255,0)'
},
}
]
})
//计算最大值
const calMax=(arr)=>{
let max=0;
arr.forEach((el)=>{
el.forEach((el1)=>{
if(!(el1 === undefined || el1 === '')){
if(max<el1){
max=el1;
}
}
})
})
let maxint=Math.ceil(max/9.5);
let maxval=maxint * 10;//让显示的刻度是整数
return maxval;
}
//计算最小值
const calMin=(arr)=>{
let min=0;
arr.forEach((el)=>{
el.forEach((el1)=>{
if(!(el1 === undefined || el1 === '')){
if(min>el1){
min=el1;
}
}
})
})
let minint=Math.floor(min/10);
let minval=minint * 10;//让显示的刻度是整数
return minval;
}
return{
calMax,
calMin
}
}
}
\ No newline at end of file
... ...
... ... @@ -8,30 +8,30 @@
<!-- <h3 class="medium">{{ item }}</h3>-->
<div class="medium ">
<ul class="statisticsItem">
<li class="listItem" v-for="itemData in 3 ">
<li class="listItem" v-for="itemData in resourceStatisticsData ">
<div class="listItem-health">
<div class="healthList">
<span class="listText">优</span>
<span class="listNum">4</span>
<span class="listPercent">100%</span>
<span class="listNum">{{itemData.excellentNum}}</span>
<span class="listPercent">{{itemData.excellentPercent}}%</span>
</div>
<div class="healthList">
<span class="listText listText2">良</span>
<span class="listNum">0</span>
<span class="listPercent">0%</span>
<span class="listNum">{{itemData.goodNum}}</span>
<span class="listPercent">{{itemData.goodPercent}}%</span>
</div>
<div class="healthList">
<span class="listText listText3">中</span>
<span class="listNum">0</span>
<span class="listPercent">0%</span>
<span class="listNum">{{itemData.middleNum}}</span>
<span class="listPercent">{{itemData.middlePercent}}%</span>
</div>
</div>
<div class="listItem-num">299</div>
<div class="listItem-num">{{itemData.resTypeAllNum}}</div>
<div class="listItem-icon">
<i class="iconImg"><img src="/vue3/src/assets/images/zjdp/icon-sys.png" alt=""></i>
<i class="iconImg"><img :src="'/vue3/src/assets/images/zjdp/icon-'+itemData.code+'.png'" alt=""></i>
</div>
<div class="listItem-icon-name">
操作系統</i>
{{itemData.name}}</i>
</div>
</li>
</ul>
... ...
... ... @@ -5,8 +5,9 @@ export default {
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
resourceStatisticsData:''
apiUrl:'/api-web/bigScreen/getResTotal',
resourceStatisticsData:'',
busId:'53bebbd79f384f619513b50666ea1d48'
}
},
setup(props, {attrs, slots, emit}) {
... ... @@ -14,6 +15,13 @@ export default {
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl+'?busId='+proxy.busId,function (res) {
const data = res;
if(data && data.data){
proxy.resourceStatisticsData=data.data;
}
})
})
return{
... ...
... ... @@ -4,16 +4,16 @@
<img style="width: 100%" src="/vue3/src/assets/images/zjdp/img-top-bg2.png" alt="">
</div>
<div class="title-left">
<img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
<div class="title-left title-date">
<img src="/vue3/src/assets/images/zjdp/time-icon.png" :style="timelogoStyle" class="timelog">
<span :style="datetimeStyle" >{{dateTime}}</span>
</div>
</header>
<div class="screen-body">
<div class="screen-body zj-screen">
<section class="screen-left left-40" >
<div class="left-top">
<!--省局网络拓扑-->
<!-- <NetworkTopology ></NetworkTopology>-->
<NetworkTopology ></NetworkTopology>
</div>
<div class="left-bottom data-cloud">
<div class="left-bottom-left flex-data">
... ... @@ -44,12 +44,14 @@
<!--折线图-->
<DeclareLine></DeclareLine>
<!--柱状图-->
<BarChart></BarChart>
<MonitoringMonth></MonitoringMonth>
</div>
</div>
<div class="screen-right-bottom">
<!--导航轮播-->
<div class="screen-nav"></div>
<div class="screen-nav">
<NavTabs></NavTabs>
</div>
<div class="screen-res-performance">
<div class="screen-res">
<!--系统资源统计-->
... ...
... ... @@ -26,11 +26,14 @@ export default {
'DeclareLine': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/declareLine/index')
),
'BarChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/barChart/index')
'MonitoringMonth': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/monitoringMonth/index')
),
'Performance': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/performance/index')
),
'NavTabs': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/navTabs/index')
)
},
data() {
... ... @@ -44,21 +47,25 @@ export default {
const {proxy} = Vue.getCurrentInstance();
let datetimeStyle=()=>{// 左上角日期时间大小
fontSize: this.titleFontSize / 3 + 'px';
marginLeft: this.titleFontSize / 5 + 'px'
fontSize: proxy.titleFontSize / 3 + 'px';
marginLeft: proxy.titleFontSize / 5 + 'px'
}
let timeFormat =(number)=> {
return number.length == 1 ? ('0' + number) : number
}
// 挂载完
Vue.onMounted(() => {
// 获取当前系统时间
let myDate = new Date();
// proxy.dateTime = myDate.getFullYear() + '-' + proxy.timeFormat(myDate.getMonth() + 1 + '') + '-' + proxy.timeFormat(myDate.getDate() + '') // + ' ' + proxy.timeFormat(myDate.getHours() + '') + ':' + proxy.timeFormat(myDate.getMinutes() + '') + ':' + proxy.timeFormat(myDate.getSeconds() + '');
proxy.dateTime = myDate.getFullYear() + '-' + proxy.timeFormat(myDate.getMonth() + 1 + '') + '-' + proxy.timeFormat(myDate.getDate() + '') // + ' ' + proxy.timeFormat(myDate.getHours() + '') + ':' + proxy.timeFormat(myDate.getMinutes() + '') + ':' + proxy.timeFormat(myDate.getSeconds() + '');
})
return {
datetimeStyle
datetimeStyle,
timeFormat
}
}
}
... ...