|
|
|
<template>
|
|
|
|
<div :style="styleObj" class="flex-div-content" >
|
|
|
|
<div :style="styleObjItem" class="flex-div card-item" @click="goJump(item)" v-for="(item,index) in busCardData" :key="index">
|
|
|
|
<div class="busCard-title" :style="titleStyle">
|
|
|
|
<span class="busCard-titleName"> {{item.busTypeName}}</span>
|
|
|
|
<el-tooltip
|
|
|
|
class="box-item"
|
|
|
|
effect="dark"
|
|
|
|
content="查看拓扑图"
|
|
|
|
placement="top"
|
|
|
|
>
|
|
|
|
<i :class="[optionsSetup.toop,'title-i']" v-if="optionsSetup.isToop" @click="resTopo(item)"></i>
|
|
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
|
|
<div class="busCardContainer" :style="flexStyle">
|
|
|
|
<div class="bus-container-item bus-total">
|
|
|
|
<div class="bus-num" :style="busNumStyle">{{item.total}}</div>
|
|
|
|
<div class="bus-name" :style="busNameStyle">总量</div>
|
|
|
|
</div>
|
|
|
|
<div class="bus-container-item bus-normal">
|
|
|
|
<div :class="['bus-num',{'text-white':item.normal>0}]" :style="[item.normal>0?circleNormal:'',busNumStyle]">{{item.normal}}</div>
|
|
|
|
<div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleNormal"></i>优</div>
|
|
|
|
</div>
|
|
|
|
<div class="bus-container-item bus-worse">
|
|
|
|
<div :class="['bus-num',{'text-white':item.worse>0}]" :style="[item.worse>0?circleWorse:'',busNumStyle]">{{item.worse}}</div>
|
|
|
|
<div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleWorse"></i>良</div>
|
|
|
|
</div>
|
|
|
|
<div class="bus-container-item bus-worst">
|
|
|
|
<div :class="['bus-num',{'text-white':item.worst>0}]" :style="[item.worst>0?circleWorst:'',busNumStyle]">{{item.worst}}</div>
|
|
|
|
<div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleWorst"></i>中</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div :style="styleObjItemSup" class="flex-div" v-for="(item,index) in 3"></div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: "busCard",
|
|
|
|
components: {},
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
busCardData:'',//数据
|
|
|
|
angle: 0,
|
|
|
|
optionsStyle: {}, // 样式
|
|
|
|
optionsData: {}, // 数据
|
|
|
|
optionsCollapse: {}, // 图标属性
|
|
|
|
optionsSetup: {}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
styleObj() {
|
|
|
|
return {
|
|
|
|
position: this.ispreview ? "absolute" : "static",
|
|
|
|
width: this.optionsStyle.width + "px",
|
|
|
|
height: this.optionsStyle.height + "px",
|
|
|
|
left: this.optionsStyle.left + "px",
|
|
|
|
top: this.optionsStyle.top + "px",
|
|
|
|
background: this.optionsSetup.background,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
styleObjItem(){
|
|
|
|
return{
|
|
|
|
width: this.optionsSetup.widthCard + "px",
|
|
|
|
height: this.optionsSetup.heightCard + "px",
|
|
|
|
cursor:this.optionsSetup.isNextPage?'pointer':'',
|
|
|
|
background: this.optionsSetup.backgroundItem,
|
|
|
|
'border-radius':this.optionsSetup.radiusCard+'px',
|
|
|
|
'border':this.optionsSetup.isBorder?(this.optionsSetup.borderWidth+'px'+' solid '+ this.optionsSetup.borderColor):'none'
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//补充空div
|
|
|
|
styleObjItemSup(){
|
|
|
|
return{
|
|
|
|
width: this.optionsSetup.widthCard + "px",
|
|
|
|
height: this.optionsSetup.heightCard + "px",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
flexStyle(){
|
|
|
|
return{
|
|
|
|
// 'flex-flow':this.optionsSetup.flexFlow
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//标题样式设置
|
|
|
|
titleStyle(){
|
|
|
|
return{
|
|
|
|
'display':this.optionsSetup.isTitle?'flex':'none',
|
|
|
|
'text-align':this.optionsSetup.textAlign,
|
|
|
|
'justify-content':this.optionsSetup.textAlign=='left'?'start':this.optionsSetup.textAlign=='center'?'center':'flex-end',
|
|
|
|
'font-size':this.optionsSetup.titleFontSize+'px',
|
|
|
|
color: this.optionsSetup.titleColor,
|
|
|
|
'font-weight': this.optionsSetup.titleFontWeight,
|
|
|
|
'background':this.optionsSetup.titleBgColor
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//circle小圆点样式
|
|
|
|
circleNormal(){
|
|
|
|
return{
|
|
|
|
background:this.optionsSetup.normalColor
|
|
|
|
}
|
|
|
|
},
|
|
|
|
circleWorse(){
|
|
|
|
return{
|
|
|
|
background:this.optionsSetup.worseColor
|
|
|
|
}
|
|
|
|
},
|
|
|
|
circleWorst(){
|
|
|
|
return{
|
|
|
|
background:this.optionsSetup.worstColor
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//数值样式
|
|
|
|
busNumStyle(){
|
|
|
|
return{
|
|
|
|
'font-size':this.optionsSetup.textNumFontSize+'px',
|
|
|
|
'font-weight':this.optionsSetup.textNumFontWeight
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//数值名称样式
|
|
|
|
busNameStyle(){
|
|
|
|
return{
|
|
|
|
'font-size':this.optionsSetup.textNameFontSize+'px',
|
|
|
|
'font-weight':this.optionsSetup.textNameFontWeight
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value: {
|
|
|
|
handler(val) {
|
|
|
|
this.optionsStyle = val.position;
|
|
|
|
this.optionsData = val.data;
|
|
|
|
this.optionsCollapse = val.collapse;
|
|
|
|
this.optionsSetup = val.setup;
|
|
|
|
this.editorOptions();
|
|
|
|
},
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.optionsStyle = this.value.position;
|
|
|
|
this.optionsData = this.value.data;
|
|
|
|
this.optionsCollapse = this.value.collapse;
|
|
|
|
this.optionsSetup = this.value.setup;
|
|
|
|
this.editorOptions();
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
resTopo(item) {
|
|
|
|
let param = {
|
|
|
|
type:'topology',
|
|
|
|
data:{
|
|
|
|
busId:item.busId,
|
|
|
|
resId: item.resId,
|
|
|
|
resType: item.resType
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
window.parent.postMessage(param, '*')
|
|
|
|
},
|
|
|
|
editorOptions() {
|
|
|
|
this.setOptionsData();
|
|
|
|
},
|
|
|
|
// 数据解析
|
|
|
|
setOptionsData() {
|
|
|
|
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
|
|
|
optionsData.dataType == "staticData"
|
|
|
|
? this.staticDataFn(optionsData.staticData)
|
|
|
|
: this.dynamicDataFn(
|
|
|
|
optionsData.dynamicData,
|
|
|
|
optionsData.refreshTime
|
|
|
|
);
|
|
|
|
},
|
|
|
|
staticDataFn(val) {
|
|
|
|
this.setData(val)
|
|
|
|
},
|
|
|
|
//处理数据
|
|
|
|
setData(val){
|
|
|
|
this.busCardData=val;
|
|
|
|
},
|
|
|
|
dynamicDataFn(val, refreshTime) {
|
|
|
|
if (!val) return;
|
|
|
|
if (this.ispreview) {
|
|
|
|
this.getEchartData(val);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(val);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(val);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
getEchartData(val) {
|
|
|
|
const data = this.queryEchartsData(val);
|
|
|
|
data.then(res => {
|
|
|
|
this.setData(res)
|
|
|
|
});
|
|
|
|
},
|
|
|
|
goJump(item){
|
|
|
|
let locationUrl=this.$route.query;
|
|
|
|
if(this.optionsSetup.isNextPage){
|
|
|
|
let nextRouter=this.optionsSetup.nextRouter;
|
|
|
|
if( this.$route.query.second_router){
|
|
|
|
nextRouter=this.$route.query.second_router
|
|
|
|
}
|
|
|
|
if(nextRouter){
|
|
|
|
this.$router.push({
|
|
|
|
path: `/bigscreen/viewer`,
|
|
|
|
query: { reportCode: nextRouter,titleName:item.busTypeName ,busId:item.busId,resType: item.resType,access_token:locationUrl.access_token},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.flex-div-content{
|
|
|
|
display: flex;
|
|
|
|
//justify-content: space-between;
|
|
|
|
justify-content: flex-start;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
.card-item{
|
|
|
|
margin-right:10px;
|
|
|
|
}
|
|
|
|
.flex-div{
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
.busCardContainer{
|
|
|
|
box-sizing: content-box;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-around;
|
|
|
|
flex:1;
|
|
|
|
|
|
|
|
}
|
|
|
|
.busCard-title{
|
|
|
|
/* display: flex;
|
|
|
|
justify-content: center;*/
|
|
|
|
padding:20px;
|
|
|
|
}
|
|
|
|
.busCard-titleName{
|
|
|
|
flex:1;
|
|
|
|
}
|
|
|
|
.title-i{
|
|
|
|
width:16px;
|
|
|
|
}
|
|
|
|
.box-item{
|
|
|
|
margin-left:5px;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.circle-i{
|
|
|
|
display: inline-block;
|
|
|
|
margin-right: 5px;
|
|
|
|
width: 12px;
|
|
|
|
height: 12px;
|
|
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
.bus-num{
|
|
|
|
background:#F2F2F2;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
padding: 5px 8px;
|
|
|
|
display: inline-block;
|
|
|
|
border-radius: 2px;
|
|
|
|
|
|
|
|
}
|
|
|
|
.text-white{
|
|
|
|
color:#fff;
|
|
|
|
}
|
|
|
|
.bus-container-item{
|
|
|
|
border-right:1px solid #F2F2F2;
|
|
|
|
flex:1;
|
|
|
|
}
|
|
|
|
.bus-container-item:last-child{
|
|
|
|
border:none;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
