monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 52be0b51e24e2df490a04b85f73a6aca23c85aea 2 parents 0a15df8f b0824a7a

Merge branch 'master-ajreport-lushangqing' into 'master' 

新增背景边框组件，基本信息组件，详细表格组件(一部分)



See merge request !4
Inline Side-by-side
Showing 14 changed files with 1333 additions and 15 deletions
/*
* 健康度情况json
* author lsq
* 2022/01/13
* */
export const monitorBasicInformation = {
code: 'monitor-basic-information',
type: 'html',
label: '基本信息',
icon: 'iconbiaoge',
options: {
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '基本信息',
},
{
type: 'el-input-text',
label: '标题名称',
name: 'titleName',
required: false,
placeholder: '',
value: '基本信息',
},
/*{
type: 'custom-upload',
label: '标题图片地址',
name: 'imageAdress',
required: false,
placeholder: '',
value: require("../../../../../../../assets/images/healthStatus/title-asset.png"),
},*/
{
type: 'el-input-number',
label: '显示数据数',
name: 'dataNum',
required: false,
placeholder: '',
value: '6'
},
/*{
type: 'el-switch',
label: '显示资源名称',
name: 'isName',
required: false,
placeholder: '',
value: true
},*/
{
type: 'custom-upload',
label: '背景图片',
name: 'imageAdressBg',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-select',
label: '标题位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '14'
}
],
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 30000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{
name:'监控连接状态',
value:'连接成功',
code:'link'
},
{
name:'最近采集时间',
value:'2022-01-17 09:10:11',
code:'time'
},
{
name:'主机名',
value:'iZk5e05caqfuum4vs2jbm0Z',
code:'hostName'
},
{
name:'操作系统',
value:'CentOS Linux release 7.6.1810 (',
code:'OS'
},
{
name:'运行时长',
value:'905days',
code:'days'
},
{
name:'密码过期剩余时间',
value:'从不过期',
code:'time_remaining'
},
{
name:'cpu数量',
value:'4个',
code:'cpu_num'
},
{
name:'频率',
value:'2394MHZ',
code:'rate'
}
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 416,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 220,
},
]
}
}
... ...
/*
* 健康度情况json
* author lsq
* 2022/01/13
* */
export const monitorBgBorder = {
code: 'monitor-bg-border',
type: 'html',
label: '背景',
icon: 'iconbiaoge',
options: {
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '背景',
},
{
type: 'el-switch',
label: '加边框',
name: 'isBorder',
required: false,
placeholder: '',
value: true
},
{
type: 'el-switch',
label: '加描边',
name: 'isShadow',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '边框颜色',
name: 'borderColor',
required: false,
placeholder: '',
value: '#dddddd',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'bgColor',
required: false,
placeholder: '',
value: '#f4f5fa',
},
{
type: 'custom-upload',
label: '背景图片',
name: 'imageAdress',
required: false,
placeholder: '',
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 700,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 400,
},
]
}
}
... ...
/*
* @Descripttion: 表格json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:16:10
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:19:54
*/
export const monitorDetailTable = {
code: 'monitor-detail-table',
type: 'html',
label: '详情表格',
icon: 'iconbiaoge',
options: {
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '表格',
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '16'
},
{
type: 'el-input-number',
label: '显示行数',
name: 'vis',
required: false,
placeholder: '',
value: '5'
},
{
type: 'el-input-number',
label: '行高',
name: 'rowHeight',
required: false,
placeholder: '',
value: '50'
},
{
type: 'el-switch',
label: '开启滚动',
name: 'isRoll',
required: false,
placeholder: '',
value: false
},
{
type: 'el-select',
label: '动画效果',
name: 'effect',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '上滚动'},
{code: 'topLoop', name: '上循环滚动'},
],
value: 'topLoop'
},
{
type: 'el-input-number',
label: '滚动间隔(毫秒)',
name: 'interTime',
required: false,
placeholder: '',
value: 2500
},
{
type: 'el-input-number',
label: '动效时间(毫秒)',
name: 'delayTime',
required: false,
placeholder: '',
value: 500
},
{
type: 'el-input-number',
label: '滚动个数',
name: 'scroll',
required: false,
placeholder: '',
value: 1
},
{
type: 'el-switch',
label: '边框线',
name: 'isLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '边框宽度',
name: 'borderWidth',
required: false,
placeholder: '',
value: 1
},
{
type: 'vue-color',
label: '边框颜色',
name: 'borderColor',
required: false,
placeholder: '',
value: '#fff'
},
[
{
name: '表头设置',
list: [
{
type: 'el-switch',
label: '表头显隐',
name: 'isHeader',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '表头颜色',
name: 'headColor',
require: false,
placeholder: '',
value: 'rgb(30,159,255)',
},
{
type: 'vue-color',
label: '表头背景',
name: 'headBackColor',
require: false,
placeholder: '',
value: 'rgb(235,245,249)',
},
],
},
{
name: '表体设置',
list: [
{
type: 'vue-color',
label: '文字颜色',
name: 'bodyColor',
required: false,
placeholder: '',
value: '#333333',
},
{
type: 'vue-color',
label: '表格背景色',
name: 'tableBgColor',
require: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '奇行颜色',
name: 'oldColor',
require: false,
placeholder: '',
value: '#ffffff',
},
{
type: 'vue-color',
label: '偶行颜色',
name: 'eventColor',
required: false,
placeholder: '',
value: '#f2f2f2'
}
],
},
],
{
type: 'dynamic-add-table',
label: '',
name: 'dynamicAddTable',
required: false,
placeholder: '',
value: [
{name: '日期', key: 'date', width: '50%'},
{name: '姓名', key: 'name', width: '50%'},
{name: '地址', key: 'address', width: '200%',
}]
}
],
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 30000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0002'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0003'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0004'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0005'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0006'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0007'},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 600,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
]
}
}
... ...
... ... @@ -91,6 +91,14 @@ export const monitorHealthStatus = {
value: require("../../../../../../../assets/images/healthStatus/state_03.png"),
},
{
type: 'custom-upload',
label: '背景图片',
name: 'imageAdressBg',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-select',
label: '标题位置',
name: 'textAlign',
... ...
... ... @@ -90,6 +90,14 @@ export const monitorResourceStatus = {
value: require("../../../../../../../assets/images/healthStatus/state_03.png"),
},
{
type: 'custom-upload',
label: '背景图片',
name: 'imageAdressBg',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-select',
label: '标题位置',
name: 'textAlign',
... ... @@ -111,6 +119,14 @@ export const monitorResourceStatus = {
value: '14'
},
{
type: 'vue-color',
label: '文字颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '图片宽度',
name: 'imgWidth',
... ...
... ... @@ -36,6 +36,9 @@ import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie";
import {monitorHealthStatus} from "./echartsConfigJson/monitorConfigJson/monitor-health-status";
import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monitor-resource-status";
import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information";
import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
export const widgetTool = [
// type=html类型的组件
... ... @@ -66,5 +69,8 @@ export const widgetTool = [
widgetLineCompare,
widgetDecoratePie,
monitorHealthStatus,
monitorResourceStatus
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder
]
... ...
<template>
<div class="basicInformation-container" :style="styleObj" @click="closePressingDialog">
<div class="title-div" :style="styleColor">
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
<div v-if="imgStyle.titleName" class="title-name">
{{imgStyle.titleName}}
<el-tooltip v-model="visible">
<template #content>
<div class="basic-ul-all" style="width:720px;" @click="pressingVisibleTip=false">
<el-row class="basic-item" :style="fontStyle" v-for="item in informationDataAll">
<el-col class="basic-border basic-item-title basic-flex" :span="10">
{{ item.name }}
<span class="basic-img" v-if="item.code=='link'">
<img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingVisibleTip=true">
<span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisibleTip">
<i class="el-icon-link"></i>压制次数
</span>
</span>
</el-col>
<el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col>
</el-row>
</div>
</template>
<i class="el-icon-info" @mouseenter="visible = true" @mouseleave="visible = false" />
</el-tooltip>
</div>
</div>
<div class="basic-ul">
<el-row class="basic-item" :style="fontStyle" v-for="item in informationData">
<el-col class="basic-border basic-item-title basic-flex" :span="10">
{{ item.name }}
<span class="basic-img" v-if="item.code=='link'">
<img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
<span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisible">
<i class="el-icon-link"></i>压制次数
</span>
</span>
</el-col>
<el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "basicInformation",
data() {
return {
options: {},
optionsSetUp: {},
optionsPosition:{},
optionsData:{},
informationData:[],
informationDataAll:[],
pressingVisible:false,
pressingVisibleTip:false,
visible:false,
}
},
components: {},
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'
};
}
},
watch: {
value: {
handler(val) {
this.options = val;
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
this.optionsData=val.data;
this.handlerData();
},
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: {
handlerData() {
const resData = this.optionsData;
console.log("resdata",resData)
resData.dataType == "staticData"
? this.handlerStaticData(resData.staticData)
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
},
handlerStaticData(data) {
this.informationData = data;
this.informationDataAll = data;
if(this.imgStyle.dataNum){
this.informationData=this.informationData.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);
}*/
},
pressingDialog(){
},
pressingTimes(){
this.pressingVisible=true;
},
closePressingDialog(){
this.pressingVisible=false;
this.pressingVisibleTip=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;
}
.title-name{
color:rgb(30,159,255);
font-size: 16px;
/*padding:10px;*/
font-weight: bold;
}
.basic-ul{
.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;
}
}
</style>
... ...
<template>
<div class="basicInformation-container" :style="styleObj">
</div>
</template>
<script>
export default {
name: "basicInformation",
data() {
return {
options: {},
optionsSetUp: {},
optionsPosition:{},
optionsData:{},
}
},
components: {},
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':this.transStyle.bgColor,
'border':this.transStyle.isBorder?'0.5px solid '+this.transStyle.borderColor:'none',
'box-shadow':this.transStyle.isShadow?'0px 3px 12px '+this.transStyle.borderColor:'none',
'background-image':'url(' + this.transStyle.imageAdress + ')',
// 'background-position':'center',
'background-repeat':'no-repeat',
'background-size':'contain'
};
},
},
watch: {
value: {
handler(val) {
this.options = val;
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
// this.handlerData();
},
deep: true
}
},
mounted() {
// this.initImageUrl();
this.options=this.value;
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
// this.handlerData();
},
methods: {
handlerData() {
const resData = this.optionsData;
resData.dataType == "staticData"
? this.handlerStaticData(resData.staticData)
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
},
handlerStaticData(data) {
},
handlerDynamicData(data, refreshTime) {
if (!data) return;
/* if (this.ispreview) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
}, refreshTime);
} else {
this.getEchartData(data);
}*/
}
},
}
</script>
<style scoped lang="scss">
</style>
... ...
<template>
<div :style="styleObj">
<superslide v-if="hackReset" :options="options" class="txtScroll-top">
<!--表头-->
<div class="title">
<div
v-for="(item, index) in header"
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
:key="index"
>
{{ item.name }}
</div>
</div>
<!--数据-->
<div class="bd">
<ul class="infoList">
<li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
<div class="infoList-flex"
v-for="(itemChild, idx) in header"
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
>
{{ item[itemChild.key] }}
<div class="basic-img">
<img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
<div class="info-ul" v-if="pressingVisible">
<div class="basic-pressing-times" @click="pressingDialog" v-for="i in 4">
<i class="el-icon-link"></i>压制次数
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</superslide>
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
vue.use(VueSuperSlide);
export default {
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
hackReset: true,
options: {
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "topLoop",
autoPage: true,
//effect: "top",
autoPlay: true,
vis: 5,
rowHeight:'50px'
},
header: [],
list: [],
optionsSetUp: {},
optionsPosition: {},
optionsData: {},
pressingVisible:false,
isHover:false,
};
},
computed: {
styleObj() {
console.log(this.optionsSetUp);
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: this.optionsSetUp.tableBgColor
};
},
headerTableStlye() {
const headStyle = this.optionsSetUp;
return {
"text-align": headStyle.textAlign,
"font-size": headStyle.fontSize + "px",
"border-style": headStyle.isLine ? "solid" : "none",
"border-width": headStyle.borderWidth + "px",
"border-color": headStyle.borderColor,
display: headStyle.isHeader ? "block" : "none",
color: headStyle.headColor,
"background-color": headStyle.headBackColor
};
},
bodyTableStyle() {
const bodyStyle = this.optionsSetUp;
return {
"text-align": bodyStyle.textAlign,
"font-size": bodyStyle.fontSize + "px",
"border-style": bodyStyle.isLine ? "solid" : "none",
"border-width": bodyStyle.borderWidth + "px",
"border-color": bodyStyle.borderColor,
color: bodyStyle.bodyColor,
"background-color": bodyStyle.tableBgColor
};
}
},
watch: {
value: {
handler(val) {
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
this.optionsData = val.data;
this.initData();
},
deep: true
}
},
mounted() {
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.initData();
},
methods: {
initData() {
this.handlerRollFn();
this.handlerHead();
this.handlerData();
this.visConfig();
},
visConfig(){
this.options.vis = this.optionsSetUp.vis;
},
handlerRollFn() {
const options = this.options;
const rollSet = this.optionsSetUp;
options.autoPlay = rollSet.isRoll;
options.effect = rollSet.effect;
options.interTime = rollSet.interTime;
options.delayTime = rollSet.delayTime;
options.scroll = rollSet.scroll;
this.options = options;
this.hackResetFun();
},
handlerHead() {
const head = this.optionsSetUp.dynamicAddTable;
this.header = head;
},
handlerData() {
const tableData = this.optionsData;
tableData.dataType == "staticData"
? this.handlerStaticData(tableData.staticData)
: this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
},
handlerStaticData(data) {
this.list = data;
},
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 => {
this.list = res;
this.hackResetFun();
});
},
// vue hack 之强制刷新组件
hackResetFun() {
this.hackReset = false;
this.$nextTick(() => {
this.hackReset = true;
});
},
// 计算 奇偶背景色
bodyTable(index) {
var styleJson = {};
if (index % 2) {
styleJson["background-color"] = this.optionsSetUp.eventColor
} else {
styleJson["background-color"] = this.optionsSetUp.oldColor
}
return styleJson;
},
tableRowHeight(){
var styleJson = {};
if(this.optionsSetUp.rowHeight){
styleJson['height'] = this.optionsSetUp.rowHeight+'px';
styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
}else{
styleJson['height'] =this.options.rowHeight
styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
}
return styleJson;
},
tableFiledWidth(index){
var styleJson = {};
if(this.optionsSetUp.dynamicAddTable[index].width ){
styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
}
return styleJson
},
//表格下探
pressingDialog(){
},
pressingTimes(){
this.pressingVisible=true;
},
}
};
</script>
<style lang="scss" scoped>
/* 本例子css */
.txtScroll-top {
overflow: hidden;
position: relative;
}
.title {
display: flex;
flex-direction: row;
width: 100%;
}
.title > div {
height: 50px;
line-height: 50px;
width: 100%;
}
.txtScroll-top .bd {
width: 100%;
}
.txtScroll-top .infoList li {
height: 50px;
line-height: 50px;
display: flex;
flex-direction: row;
}
.txtScroll-top .infoList li > div {
width: 100%;
}
/*.txtScroll-top .infoList li:nth-child(n) {
background: rgb(0, 59, 81);
}
.txtScroll-top .infoList li:nth-child(2n) {
background: rgb(10, 39, 50);
}*/
.infoList-flex{
display: flex;
align-items: center;
justify-content: center;
}
.basic-img{
width: 16px;
height: 16px;
display: flex;
cursor: pointer;
img{
width:100%;
}
}
.info-ul{
position: absolute;
border:1px solid #d2d2d2;
padding: 16px 20px;
z-index: 1;
background: #ffffff;
color:#666666;
.basic-pressing-times{
&:hover{
background: #0d82e9;
color:#f6f6f6;
}
}
}
</style>
... ...
... ... @@ -5,7 +5,7 @@
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
</div>
<el-row>
<el-row class="padding-top-20">
<el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">
<div class="health-service">
<span v-if="imgStyle.isName" class="health-name">{{item.name}}</span>
... ... @@ -99,7 +99,10 @@ export default {
height: allStyle.height + "px",
left: allStyle.left + "px",
top: allStyle.top + "px",
// background:this.transStyle.BgColor
'background-image':'url(' + this.transStyle.imageAdressBg + ')',
// 'background-position':'center',
'background-repeat':'no-repeat',
'background-size':'contain'
};
},
... ... @@ -291,9 +294,12 @@ export default {
.title-name{
color:rgb(30,159,255);
font-size: 16px;
padding:10px;
/*padding:10px;*/
font-weight: bold;
}
.padding-top-20{
padding-top: 20px;
}
.health-service{
position: relative;
}
... ...
... ... @@ -3,13 +3,13 @@
<!-- <div class="healthStatus-container">-->
<div class="title-div" :style="styleColor">
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
</div>
<el-row>
<el-row class="padding-top-30">
<!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">-->
<el-col class="flex-around" :span="24" >
<div class="health-service">
<span v-if="imgStyle.isName" :style="lineHeightStyle" class="health-name">{{healthNumData.state}}</span>
<span v-if="imgStyle.isName" :style="healthNameStyle" class="health-name">{{healthNumData.state}}</span>
<img :style="imgStyleContent" width="100%" :src="healthStatusUrl" alt="">
</div>
<div class="health-num-content" :style="fontStyle" >
... ... @@ -41,7 +41,7 @@ import {
getHealth
} from "@/api/platform";
export default {
name: "healthStatus",
name: "resourceStatus",
data() {
return {
options: {},
... ... @@ -79,10 +79,12 @@ export default {
height: allStyle.height + "px",
left: allStyle.left + "px",
top: allStyle.top + "px",
// background:this.transStyle.BgColor
'background-image':'url(' + this.transStyle.imageAdressBg + ')',
// 'background-position':'center',
'background-repeat':'no-repeat',
'background-size':'contain'
};
},
styleColor() {
return {
"text-align": this.transStyle.textAlign,
... ... @@ -93,11 +95,13 @@ export default {
return{
"font-size": this.transStyle.fontSize + "px",
'height':this.transStyle.imgWidth+'px',
color:this.transStyle.textColor
}
},
lineHeightStyle(){
healthNameStyle(){
return{
'line-height':this.transStyle.imgWidth+'px',
color:this.transStyle.textColor
}
},
imgStyleContent(){
... ... @@ -233,9 +237,12 @@ export default {
.title-name{
color:rgb(30,159,255);
font-size: 16px;
padding:10px;
/*padding:10px;*/
font-weight: bold;
}
.padding-top-30{
padding-top: 30px;
}
.health-service{
position: relative;
}
... ... @@ -249,13 +256,13 @@ export default {
}
.health-num-content{
font-size: 14px;
color:#666666;
justify-content: space-around;
display: flex;
flex-flow: column;
}
.health-num-title{
margin-left: 30px;
color:#666666;
}
.health-num-item:nth-child(2){
/*margin: 60px 0;*/
... ...
... ... @@ -39,6 +39,9 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import monitorHealthStatus from "./monitor/healthStatus";
import monitorResourceStatus from "./monitor/resourceStatus";
import monitorBasicInformation from "./monitor/basicInformation";
import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
export default {
name: "WidgetTemp",
... ... @@ -70,7 +73,10 @@ export default {
widgetDecoratePieChart,
monitorHealthStatus,
monitorResourceStatus
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder
},
model: {
prop: "value",
... ...
... ... @@ -50,6 +50,9 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import monitorHealthStatus from "./monitor/healthStatus";
import monitorResourceStatus from "./monitor/resourceStatus";
import monitorBasicInformation from "./monitor/basicInformation";
import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
export default {
... ... @@ -81,7 +84,10 @@ export default {
widgetLineCompareChart,
widgetDecoratePieChart,
monitorHealthStatus,
monitorResourceStatus
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder
},
model: {
prop: "value",
... ...