Authored by 鲁尚清

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

Showing 25 changed files with 187 additions and 34 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
... ...
... ... @@ -166,12 +166,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"]{
... ...
... ... @@ -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;
... ...
... ... @@ -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>
... ...
... ... @@ -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
... ...
... ... @@ -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();
... ...
... ... @@ -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>
... ...
... ... @@ -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
}
... ... @@ -54,9 +58,23 @@ export default {
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;
}
},
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
... ...
... ... @@ -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,13 @@ 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++){
console.log("$",resData.length,4-resData.length)
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,8 +63,10 @@ export default {
"goodPercent": 0
})
}
console.log("***",resData)
}
proxy.resourceStatisticsData=resData;
... ...