|
|
|
<template>
|
|
|
|
<div class="basicInformation-container" :style="styleObj" @click="closePressingDialog" @click.stop="visible = false">
|
|
|
|
<div class="title-div" :style="styleColor" v-if="hackReset">
|
|
|
|
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
|
|
|
|
<div v-if="imgStyle.titleName" class="title-name">
|
|
|
|
{{imgStyle.titleName}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="basic-ul">
|
|
|
|
<div class="basic-ul-left ">
|
|
|
|
<img :style="imgSizeStyle" :src="imgStyle.logoAdressBg"/>
|
|
|
|
</div>
|
|
|
|
<dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>
|
|
|
|
<div class="basic-ul-right" >
|
|
|
|
<div @mouseenter="mouseFun" @mouseleave="leaveFun">
|
|
|
|
<el-row :style="fontStyle">
|
|
|
|
<el-col aria-colspan="2">
|
|
|
|
<a class="link-type" :href="resUrl" target="_blank">{{informationData[0].name}}====={{$store.state.actions}}</a>
|
|
|
|
<i class="el-icon-info" v-if="visible" @click="resTopo"/>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
<el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index">
|
|
|
|
|
|
|
|
<el-col v-if="index > 0 && item.state==2 " class="basic-border basic-item-title basic-flex" :span="10">
|
|
|
|
{{ item.name }}
|
|
|
|
<!-- <span class="basic-img" v-if="item.id=='KPIE13DD9A3'"></span>-->
|
|
|
|
</el-col>
|
|
|
|
<el-col v-if="index > 0 && item.state==2 " class="basic-border basic-item-content" :span="14"><span>{{ item.value }}</span>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- 直接点击表格数据展示 -->
|
|
|
|
<customDialog :dialogVisible="topoVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
|
|
|
|
:widthStyle="widthStyle" :title-name="dialogName"
|
|
|
|
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
|
|
|
|
>
|
|
|
|
<template v-slot>
|
|
|
|
<div class="txtScroll-top">
|
|
|
|
<iframe :src="topoSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</customDialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
// import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
|
|
|
|
import customDialog from "../../designerComponents/customDialog";
|
|
|
|
import dynamicTableComponents from "../../designerComponents/dynamicTableComponents";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "basicInformationTwo",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
options: {},
|
|
|
|
optionsSetUp: {},
|
|
|
|
optionsPosition: {},
|
|
|
|
optionsData: {},
|
|
|
|
informationData: [],
|
|
|
|
informationDataAll: [],
|
|
|
|
tableDate: [],
|
|
|
|
pressingVisible: false,
|
|
|
|
pressingVisibleTip: false,
|
|
|
|
visible: false,
|
|
|
|
hackReset: true,
|
|
|
|
tableDataValue: {kpiId: ''},
|
|
|
|
tableDataValueHead: {},
|
|
|
|
resType: '',
|
|
|
|
marginStyle: '',//弹框距离顶部距离
|
|
|
|
heightStyle: '',//弹框遮罩层高度
|
|
|
|
widthStyle: ';',//弹框宽度样式
|
|
|
|
topoSrc: '',
|
|
|
|
resUrl: 'http://www.baidu.com', //跳转详情页面
|
|
|
|
topoVisible: false, //资源topo弹框
|
|
|
|
dialogName: "" //弹框标题
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {customDialog, dynamicTableComponents},//customMenuBox
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean,
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
transStyle() {
|
|
|
|
return this.objToOne(this.options);
|
|
|
|
},
|
|
|
|
styleObj() {
|
|
|
|
const allStyle = this.optionsPosition;
|
|
|
|
return {
|
|
|
|
position: this.ispreview ? "absolute" : "static",
|
|
|
|
width: allStyle.width + "px",
|
|
|
|
height: allStyle.height + "px",
|
|
|
|
left: allStyle.left + "px",
|
|
|
|
top: allStyle.top + "px",
|
|
|
|
'background-image': 'url(' + this.transStyle.imageAdressBg + ')',
|
|
|
|
// 'background-position':'center',
|
|
|
|
'background-repeat': 'no-repeat',
|
|
|
|
'background-size': 'contain'
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
styleColor() {
|
|
|
|
return {
|
|
|
|
"text-align": this.transStyle.textAlign,
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
fontStyle() {
|
|
|
|
return {
|
|
|
|
"font-size": this.transStyle.fontSize + "px",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
imgStyle() {
|
|
|
|
return {
|
|
|
|
imageAdress: this.transStyle.imageAdress ? this.transStyle.imageAdress : require("../../../../../../assets/images/healthStatus/title-asset.png"),
|
|
|
|
titleName: this.transStyle.titleName,
|
|
|
|
isName: this.transStyle.isName,
|
|
|
|
dataNum: this.transStyle.dataNum ? this.transStyle.dataNum : '6',
|
|
|
|
probeDown: this.transStyle.probeDown,
|
|
|
|
logoAdressBg: this.transStyle.logoAdressBg ? this.transStyle.logoAdressBg : require("../../../../../../assets/images/healthStatus/title-asset.png"),
|
|
|
|
};
|
|
|
|
},
|
|
|
|
//图片大小
|
|
|
|
imgSizeStyle() {
|
|
|
|
return {
|
|
|
|
"width": this.transStyle.pictureSize + "px",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//表格下探列表
|
|
|
|
// calcDetailMenubox() {
|
|
|
|
// const menubox = this.transStyle;
|
|
|
|
// let detailMenuBox = [];
|
|
|
|
// if (menubox.alarm_setting) {
|
|
|
|
// detailMenuBox.push({
|
|
|
|
// name: '告警设置',
|
|
|
|
// type: 'alarm_setting'
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
// if (menubox.filter_sheet_indicator) {
|
|
|
|
// detailMenuBox.push({
|
|
|
|
// name: '过滤单指标',
|
|
|
|
// type: 'filter_sheet_indicator'
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
// if (menubox.filter_multiple_indicators) {
|
|
|
|
// detailMenuBox.push({
|
|
|
|
// name: '过滤多指标',
|
|
|
|
// type: 'filter_multiple_indicators'
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
// if (menubox.performance_trends) {
|
|
|
|
// detailMenuBox.push({
|
|
|
|
// name: '性能趋势',
|
|
|
|
// type: 'performance_trends'
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
// if (menubox.pressing_times) {
|
|
|
|
// detailMenuBox.push({
|
|
|
|
// name: '压制次数',
|
|
|
|
// type: 'pressing_times'
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
// if (menubox.include_capacity_forecast) {
|
|
|
|
// detailMenuBox.push({
|
|
|
|
// name: '纳入容量预测',
|
|
|
|
// type: 'include_capacity_forecast'
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
// return detailMenuBox;
|
|
|
|
// },
|
|
|
|
//动态显示基本信息指标
|
|
|
|
//动态表格数据渲染
|
|
|
|
dynamicDataRender() {
|
|
|
|
// var tableDate=[];
|
|
|
|
|
|
|
|
return {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value: {
|
|
|
|
handler(val) {
|
|
|
|
this.options = val;
|
|
|
|
this.optionsSetUp = val.setup;
|
|
|
|
this.optionsPosition = val.position;
|
|
|
|
this.optionsData = val.data;
|
|
|
|
this.handlerData();
|
|
|
|
//console.log("====formatter==========",this.formatter);
|
|
|
|
},
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// this.initImageUrl();
|
|
|
|
this.options = this.value;
|
|
|
|
this.optionsSetUp = this.value.setup;
|
|
|
|
this.optionsPosition = this.value.position;
|
|
|
|
this.optionsData = this.value.data;
|
|
|
|
this.handlerData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
dtInformationData(formatter){
|
|
|
|
debugger
|
|
|
|
console.log("获取得动态数据：", formatter);
|
|
|
|
},
|
|
|
|
handlerData() {
|
|
|
|
const resData = this.optionsData;
|
|
|
|
resData.dataType == "staticData"
|
|
|
|
? this.handlerStaticData(resData.staticData)
|
|
|
|
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
|
|
|
|
},
|
|
|
|
handlerStaticData(data) {
|
|
|
|
this.informationDataAll = data;
|
|
|
|
|
|
|
|
if (this.imgStyle.dataNum) {
|
|
|
|
|
|
|
|
this.informationData = this.informationDataAll.slice(0, this.imgStyle.dataNum);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
handlerDynamicData(data, refreshTime) {
|
|
|
|
if (!data) return;
|
|
|
|
if (this.ispreview) {
|
|
|
|
this.getEchartData(data);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
getEchartData(val) {
|
|
|
|
const data = this.queryEchartsData(val);
|
|
|
|
data.then(res => {
|
|
|
|
if (res && res[0].code == 0)
|
|
|
|
this.informationDataAll = res[0].data;
|
|
|
|
if (this.informationDataAll && this.informationDataAll.length > 0) {
|
|
|
|
this.informationDataAll.map(item => {
|
|
|
|
if (typeof (item.value) != 'string') {
|
|
|
|
item.value = item.value[0].state
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if (this.imgStyle.dataNum) {
|
|
|
|
this.informationData = this.informationDataAll.slice(0, this.imgStyle.dataNum);
|
|
|
|
}
|
|
|
|
this.hackResetFun();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// vue hack 之强制刷新组件
|
|
|
|
hackResetFun() {
|
|
|
|
this.hackReset = false;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.hackReset = true;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
pressingDialog() {
|
|
|
|
},
|
|
|
|
pressingTimes() {
|
|
|
|
this.pressingVisible = true;
|
|
|
|
},
|
|
|
|
closePressingDialog() {
|
|
|
|
this.pressingVisible = false;
|
|
|
|
this.pressingVisibleTip = false;
|
|
|
|
},
|
|
|
|
//鼠标悬浮事件
|
|
|
|
mouseFun() {
|
|
|
|
this.visible = true;
|
|
|
|
// $(".el-icon-info").attr("src","http://www.qq.com");
|
|
|
|
// $("#resTopo").on("click",function(index){
|
|
|
|
// alert("asasas");
|
|
|
|
// });
|
|
|
|
},
|
|
|
|
//鼠标悬浮离开事件
|
|
|
|
leaveFun() {
|
|
|
|
this.visible = false;
|
|
|
|
},
|
|
|
|
//
|
|
|
|
resTopo() {
|
|
|
|
this.topoSrc = "http://www.baidu.com";
|
|
|
|
this.topoVisible = true;
|
|
|
|
},
|
|
|
|
//弹框关闭确定
|
|
|
|
hideDialog() {
|
|
|
|
this.topoVisible = false;
|
|
|
|
},
|
|
|
|
okFunc() {
|
|
|
|
this.topoVisible = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.basicInformation-container {
|
|
|
|
/*border:1px solid #f6f6f6;
|
|
|
|
border-bottom: none;*/
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-flex {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.title-div {
|
|
|
|
text-align: left;
|
|
|
|
padding: 8px 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-ul-left {
|
|
|
|
/*border: 0;*/
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
/*padding-left: 10px;*/
|
|
|
|
/*float: left;*/
|
|
|
|
display: flex;
|
|
|
|
/*flex-wrap: nowrap*/
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-ul-left img {
|
|
|
|
width: 140px;
|
|
|
|
height: 140px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-ul-right {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
/*display: flex;*/
|
|
|
|
/*flex-wrap: nowrap*/
|
|
|
|
/*width: 50%;*/
|
|
|
|
/*height:50%;*/
|
|
|
|
/*float: left;*/
|
|
|
|
/*margin-left: 45%;*/
|
|
|
|
/*margin-bottom: 100px;*/
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
资源名称不换行
|
|
|
|
*/
|
|
|
|
.link-type {
|
|
|
|
white-space: nowrap;
|
|
|
|
color: #0d82e9;
|
|
|
|
}
|
|
|
|
|
|
|
|
.title-name {
|
|
|
|
color: rgb(30, 159, 255);
|
|
|
|
font-size: 16px;
|
|
|
|
/*padding:10px;*/
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-ul {
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
.basic-item:nth-child(even) {
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-item {
|
|
|
|
border-top: 1px solid #f6f6f6;
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-item:last-child {
|
|
|
|
border-bottom: 1px solid #f6f6f6;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-ul-all {
|
|
|
|
.basic-item:nth-child(even) {
|
|
|
|
background-color: #262323 !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-item {
|
|
|
|
text-align: left;
|
|
|
|
font-size: 14px;
|
|
|
|
/* border-top:1px solid #f6f6f6;*/
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-border {
|
|
|
|
padding: 7px 10px;
|
|
|
|
border-left: 1px solid rgba(151, 151, 151, 0.13);
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-border:first-child {
|
|
|
|
border-left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-img {
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
display: inline-block;
|
|
|
|
/*display: none;*/
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*.basic-item-title:hover{
|
|
|
|
.basic-img{
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
}*/
|
|
|
|
.basic-ul-all {
|
|
|
|
.basic-item-content {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.basic-pressing-times {
|
|
|
|
position: absolute;
|
|
|
|
border: 1px solid #d2d2d2;
|
|
|
|
padding: 16px 20px;
|
|
|
|
z-index: 1;
|
|
|
|
background: #ffffff;
|
|
|
|
color: #666666;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: #0d82e9;
|
|
|
|
color: #f6f6f6;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.span-green {
|
|
|
|
color: #0BAC33;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
