monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 95ab53e5d5a2ed56fdbef927c8ba2bb55ec2fae0 2 parents 4ef1e303 769a41ab

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

大屏及电子税务局页面样式修改，柱状图提示，导航轮播，系统资源统计样式及数据，今日业务量无数据时展示



See merge request !50
Inline Side-by-side
Showing 30 changed files with 321 additions and 123 deletions
... ... @@ -44,4 +44,14 @@
display: flex;
flex-flow: column;
justify-content: space-around;
}
.condition-row{
text-align: left;
color:#409EFF;
}
.bottom-condition .el-dropdown,.bottom-condition .el-button{
width: 100%;
}
.bottom-condition .el-input__inner,.bottom-condition .el-button{
border-color:#409eff;
}
\ No newline at end of file
... ...
... ... @@ -86,15 +86,13 @@
justify-content: space-around;
}
.width-86{
width:86%;
width:96%;
margin-bottom: 10px;
align-items: flex-end;
}
.middle-right{
width: 20%;
/*flex: 1;*/
position: relative;
left: -5%;
display: flex;
flex-flow: column;
justify-content: center;
... ... @@ -118,7 +116,7 @@
}
.middle-left-declare-rate{
height: 36%;
width:86%;
width:96%;
}
.screen-middle #middle-bottom {
... ... @@ -166,12 +164,11 @@
cursor: pointer;
margin-right: 15px;
}
.el-dropdown__popper .el-dropdown-menu{
.cpuDropdown.el-dropdown-menu{
background-color: rgba(0,0,0,0.5);
border:none;
}
.el-dropdown-menu__item{
.cpuDropdown .el-dropdown-menu__item{
color:#ffffff;
}
.el-dropdown__popper.el-popper[role="tooltip"]{
... ... @@ -211,4 +208,8 @@
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.width-13{
flex: 0 0 14%;
max-width: 14%;
}
\ No newline at end of file
... ...
... ... @@ -28,9 +28,9 @@
height: 100%;
max-width: 475px;
max-height: 403px;
background-size: contain;
background-size: auto;
background-position: center;
margin-left: 12px;
/*margin-left: 12px;*/
margin-right: 2px;
}
.ypt .item.active{
... ... @@ -55,7 +55,7 @@
.ypt .item .ui_base {
position: relative;
top:11%;
left: 9%;
left: 5%;
width: 100%;
height: 100%;
-webkit-perspective: 1000px;
... ... @@ -108,8 +108,8 @@
}
.ypt .item .ball {
width: 56px;
height: 56px;
width: 70px;
height: 67px;
background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat;
background-size: contain;
word-break: break-all;
... ... @@ -145,29 +145,29 @@
transform: scale(1.0);
}
.ypt__info div.ball_base:nth-child(1) {
top: 17px;
left: 133px;
top: 0;
left: 129px;
}
.ypt__info div.ball_base:nth-child(2) {
top: 68px;
left: 50px;
top: 51px;
left:30px;
}
.ypt__info div.ball_base:nth-child(3) {
top: 68px;
left: 214px;
top: 51px;
left: 224px;
}
.ypt__info div.ball_base:nth-child(4) {
top: 150px;
left: 50px;
left: 30px;
}
.ypt__info div.ball_base:nth-child(5) {
top: 150px;
left: 210px;
left: 230px;
}
.ypt__info div.ball_base:nth-child(6) {
top: 190px;
left: 133px;
top: 205px;
left: 129px;
}
.ypt__info .ball_base .ball.active{
-moz-transition: top 0.3s;
... ...
... ... @@ -50,4 +50,11 @@
}
.tabItem:hover,.tabItem.active{
background-color: #0b1943;
}
.nullDiv{
width:20%;
padding: 0px 8px;
}
.navTabs-card .el-carousel__item--card{
width:20%;
}
\ No newline at end of file
... ...
... ... @@ -38,7 +38,7 @@
display: flex;
position: absolute;
left: 18px;
top:36px;
top:30px;
}
.listItem:nth-child(1) .listItem-health{
/*left: 7px;*/
... ...
... ... @@ -52,6 +52,12 @@
<div class="add-bottom">
<el-row>
<el-col :span="6" class="bottom-condition">
<el-row class="condition-row">
<el-col :span="24">
<i class="icon-condition"></i>
<span class="condition-title">查询条件</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
... ... @@ -59,7 +65,7 @@
电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-menu >
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
... ...
... ... @@ -12,7 +12,8 @@ export default {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
// busId:'247c0c978f574285bf642f55611ea75d',
busId: '',
performanceData:'',
xAxisData:'',
yAxisData:'',
... ...
... ... @@ -22,7 +22,7 @@ export default {
{ name: "网络发票",value: "712204", color: "#A35CFF"}
]
}],
colorData:['#0D45FE','#00FFB9','#A35CFF'],
colorData:['#0D45FE','#00FFB9','#A35CFF','#3d4b73'],
titleFontSize: 30
}
},
... ... @@ -94,6 +94,7 @@ export default {
const seriesArr = this.allData.map((item, index) => {
const dataArr = []
let colorData=[];
if(item.data){
item.data.map(inner => {
dataArr.push({
... ... @@ -104,19 +105,24 @@ export default {
}*/
})
})
colorData=this.colorData;
}else{
dataArr.push({
name: '暂无数据',
value: 0
for(let i=0;i<3;i++){
dataArr.push({
name: ' ',
value: 0
})
})
}
colorData=this.colorData[3]
}
return {
type: 'pie',
radius: ['28%', '42%'],
center: centerArr[index],
color:this.colorData,
color:colorData,
itemStyle: {
borderRadius: 2,
borderWidth: 2
... ...
... ... @@ -283,7 +283,9 @@ export default {
lineStyle: {
color:'#0a1b31'
}
}
},
min:0,
max:100,
},
series: seriesData
... ...
... ... @@ -27,68 +27,68 @@
</span>
</div>
</el-col>-->
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 13%;" v-if="isOneCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 55%;" v-if="isTwoCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
</span>
</div>
</el-col>
... ...
... ... @@ -27,68 +27,68 @@
</span>
</div>
</el-col>-->
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 13%;" v-if="isOneCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 55%;" v-if="isTwoCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
</span>
</div>
</el-col>
... ...
... ... @@ -271,7 +271,9 @@ export default {
lineStyle: {
color:'#0a1b31'
}
}
},
min:0,
max:100
},
series: seriesData
... ...
... ... @@ -39,12 +39,15 @@ export default {
let monitoringBarData=data.data;
let legendData=[];
$.each(monitoringBarData,function (i,v){
proxy.ySeriesCommonData.unshift(v.value)
legendData.push(i+1)
proxy.ySeriesCommonData.unshift(
{value:v.value,date:v.date}
)
legendData.push(
{value:i+1,date:v.date}
)
})
proxy.legendData=legendData
}
// proxy.ySeriesCommon=
proxy.optionInti()
})
... ... @@ -55,6 +58,20 @@ export default {
text: '',
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
},
formatter: function(params) {
var res = '<div>'+params[0].data.date+'</div>'+params[0].data.value;
return res;
}
},
grid: {
top:'4%',
left: '3%',
... ...
... ... @@ -67,7 +67,7 @@
</div>
<div id="right-bottom">
<div class="cpu-dropdown">
<el-dropdown @command="handleCommand" >
<el-dropdown @command="handleCommand" class="elSelf" :popper-append-to-body="false">
<span class="el-dropdown-link">
{{commandName}}
<i class="icon-arrow"></i>
... ...
... ... @@ -18,9 +18,40 @@ export default {
// 挂载完
Vue.onMounted(() => {
let yptRunTimer = null;
$.get(proxy.domainName +"/api-web/datavis/getCloudInfo"+'?access_token='+localStorage.getItem('access_token'),function(res){
$.get(proxy.domainName +"/api-web/bigScreen/getCloudInfo"+'?access_token='+localStorage.getItem('access_token'),function(res){
const data = res.data;
if(data && data.length > 0){
data.map((item,index)=>{
if(item.kpi && item.kpi.length==0){
item.kpi.push(
{
"kpiValue": "0%",
"kpiName": "CPU分配率"
},
{
"kpiValue": "0%",
"kpiName": "内存分配率"
},
{
"kpiValue": "0%",
"kpiName": "存储分配率"
},
{
"kpiValue": '0%',
"kpiName": "CPU核数"
},
{
"kpiValue": "0",
"kpiName": "内存大小"
},
{
"kpiValue": "0",
"kpiName": "存储空间总量"
}
)
}
})
proxy.cloudData=data;
run();
... ... @@ -48,28 +79,28 @@ export default {
function run() {
const yptpostion = [
{
top: '17px',//1
left: '133px'
top: '0',//1
left: '129px'
},
{
top: '68px', // 2
left: '50px'
top: '51px', // 2
left: '30px'
},
{
top: '68px', // 3
left: '214px'
top: '51px', // 3
left: '224px'
},
{
top: '150px', // 4
left: '50px'
left: '30px'
},
{
top: '150px', // 5
left: '210px'
left: '230px'
},
{
top: '190px', // 6
left: '133px'
top: '205px', // 6
left: '129px'
}
];
// 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]];
... ...
... ... @@ -46,7 +46,7 @@
<span class="volume-num">{{item.num1}}</span>
</div>
<div class="volume-today-container" v-else style="justify-content: center;">
<span>暂无数据</span>
<span>0</span>
</div>
</div>
... ...
... ... @@ -11,6 +11,7 @@ export default {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/digitalBoardData',//本月已申报/未申报
apiUrl1:'/api-web/bigScreen/findPortfolio',//今日业务量
allData:'',
volumeData:'',//业务量数据
declareData:'',
reportable:0,//本月应申报
... ... @@ -27,24 +28,33 @@ export default {
styleVolumeNet:'',
opactiyNum:0, //不透明显示的个数
opactiyNumMath:0, //不透明显示的个数中间量
opactiyNumTotal:20//总透明数
opactiyNumTotal:20,//总透明数
curve: 'KPIDA0ACBBP',
rateTitle: 'KPIDA0ACBBK',
numerTitle: 'KPIDA0ACBBG'
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD'+'&access_token='+localStorage.getItem('access_token'),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);
//本月应申报及申报率
let params = {
curve: proxy.curve,
rateTitle: proxy.rateTitle,
numerTitle: proxy.numerTitle
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
proxy.allData = res.obj;
const declareRate = proxy.allData.polyline.declareRate
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.reportable = proxy.allData.polyline.declareNumer
let declareRateNum=0;
if(declareRate.indexOf('%') > 0){
declareRateNum = parseInt(declareRate.split('%')[0] )
}
proxy.opactiyNumMath=(declareRateNum/100)*proxy.opactiyNumTotal
if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
... ... @@ -53,7 +63,21 @@ export default {
proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
}
proxy.declarationRate=declarationRate*100+'%';
proxy.declarationRate=declareRate;
}
});
$.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD'+'&access_token='+localStorage.getItem('access_token'),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);
// let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);
// proxy.reportable=proxy.numberFilter(reportable,-1);
}
... ...
... ... @@ -74,7 +74,7 @@ export default {
})
const optionInit=()=>{
let xAxisDataLength=proxy.ySeriesCommon[0].length;
let xAxisDataLength=proxy.ySeriesCommon[0].data.length;
let xAxisData=[];
for(let i=1;i<=xAxisDataLength;i++){
xAxisData.push(i)
... ...
... ... @@ -33,8 +33,12 @@ export default {
let monitoringBarData=data.data;
let legendData=[];
$.each(monitoringBarData,function (i,v){
proxy.ySeriesCommonData.unshift(v.value)
legendData.push(i+1)
proxy.ySeriesCommonData.unshift(
{value:v.value,date:v.date}
)
legendData.push(
{value:i+1,date:v.date}
)
})
proxy.legendData=legendData
}
... ... @@ -48,15 +52,34 @@ export default {
title: {
text: '近30天访问量',
x:'center',
y:'7px',
y:'9px',
textStyle:{
color:"#ffffff",
fontSize:14
}
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
},
formatter: function(params) {
var res = '<div>'+params[0].data.date+'</div>'+params[0].data.value;
return res;
}
},
grid: {
left: '10%',
right: '4%',
bottom: '10%',
},
xAxis: {
type: 'category',
data: props.legendData,
data: proxy.legendData,
axisLine:{
show:true,//是否显示坐标线
lineStyle: {
... ...
... ... @@ -2,14 +2,23 @@
<div class="rightArrow">
<img src="/vue3/src/assets/images/zjdp/icon-left.png" @click="arrowClick('left')" alt="">
</div>
<!--<el-carousel class="navTabs-card" :interval="4000" type="card" height="50px" arrow="never" indicator-position="none" >
<el-carousel-item v-for="(item,index) in listArray" :key="item">
<div class="tabContaier">
<div @click="clickTabs(itemData.busId)" v-if="listArray" :class="['tabItem', {'active':checkId==item.busId,'borderColorGood':item.healthStatus==2,'borderColorMi':item.healthStatus==1}]">{{item.busTypeName}}</div>
</div>
</el-carousel-item>
</el-carousel>-->
<el-carousel height="50px" :autoplay="true" indicator-position="none" arrow="never" ref="cardShow">
<el-carousel-item v-for="item in listItem" :key="item" >
<el-carousel-item v-for="(item,index) in listItem" :key="item" >
<div class="tabContaier">
<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>
<div v-for="i in isDiv" class="nullDiv" ></div>
</el-carousel-item>
</el-carousel>
<div class="rightArrow">
<img src="/vue3/src/assets/images/zjdp/icon-right.png" @click="arrowClick('right')" alt="">
... ...
... ... @@ -16,6 +16,7 @@ export default {
},
data(){
return {
timer:null,
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getbizListByUser?access_token=',
checkId:0,//当前选中的tabs
... ... @@ -41,10 +42,40 @@ export default {
proxy.listArray=navTabsData;
proxy.checkId=navTabsData[0].busId;
busId.value=navTabsData[0].busId
proxy.startInterval();
}
})
})
const startInterval=()=>{
if (proxy.timer) {
clearInterval(proxy.timer)
}
proxy.timer=setInterval(function (){
let listArray=[];
proxy.listArray.map((item,index)=>{
listArray.push(item.busId)
})
let index=listArray.indexOf(proxy.checkId)
if(index!=-1){
if(index>=4){
proxy.arrowClick('right')
}
if(index+1==listArray.length){
proxy.checkId=listArray[0]
proxy.arrowClick('left')
}else{
proxy.checkId=listArray[index+1]
}
proxy.clickTabs(proxy.checkId)
}
},4000)
}
const arrowClick=(val)=>{
if(val=='right'){
... ... @@ -76,6 +107,7 @@ export default {
arrowClick,
nextPage,
prePage,
startInterval,
clickTabs
}
},
... ... @@ -85,8 +117,16 @@ export default {
let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length)
return this.listArray.slice(start, end)
},
isDiv:function (){
let length=this.dataShow.length;
let num=5-length;
return num;
},
pageNum: function(){
return Math.ceil(this.listArray.length / this.pageSize) || 1 ;
}
}
},
unmounted () {
clearInterval(this.timer)
},
}
\ No newline at end of file
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const busId = Vue.toRef(store.state, 'busId')
return {
busId
}
}
export default {
name: 'performance',
template: '',
... ... @@ -11,7 +22,8 @@ export default {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
// busId:'247c0c978f574285bf642f55611ea75d',
busId:'',
performanceData:'',
xAxisData:'',
yAxisData:'',
... ... @@ -24,6 +36,14 @@ export default {
const xAxisData=Vue.ref();
const yAxisData=Vue.ref([]);
const legendData=Vue.ref([]);
// 获取状态
const { busId} = indirectManage()
// 监听编辑状态
Vue.watch(() =>busId.value, (newVal, oldVlaue) => {
// console.log("333",busId.value)
proxy.busId=busId.value
proxy.getData();
});
// 半透明的颜色值
const colorArr1 = [
'rgba(151,213,244, 0.8)',
... ...
... ... @@ -34,7 +34,7 @@
</div>
</li>
</ul>
<div class="statisticsTotal">资源总量</div>
<!-- <div class="statisticsTotal">资源总量</div>-->
</div>
</el-carousel-item>
... ...
... ... @@ -23,6 +23,7 @@ export default {
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let resourceStatisticsData=Vue.ref();
// 获取状态
const { busId} = indirectManage()
... ... @@ -45,10 +46,12 @@ export default {
if(data && data.data){
// proxy.resourceStatisticsData=data.data;
let resData=data.data;
if(resData.length<4){
for(let i=0;i<4-resData.length;i++){
let length=resData.length;
if(length<4){
for(let i=0;i<4-length;i++){
console.log("&&&",i)
resData.push({
"resTypeAllNum": 2,
"resTypeAllNum": 0,
"code": "other",
"name": "其他",
"excellentNum": 0,
... ... @@ -59,12 +62,8 @@ export default {
"goodPercent": 0
})
}
}
proxy.resourceStatisticsData=resData;
}
})
... ...