monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 33767c6b905176aeace8a82f71ee93a8a98b0404 1 parent 720b7326

自定义进度条组件及配置，修改背景组件标题样式

Inline Side-by-side
Showing 8 changed files with 640 additions and 9 deletions
... ... @@ -18,6 +18,70 @@ export const monitorBgBorder = {
placeholder: '',
value: '背景',
},
[{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '是否有标题',
name: 'isTitle',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-text',
label: '标题名称',
name: 'titleName',
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: 'titleFontSize',
required: false,
placeholder: '',
value: '18'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'titleColor',
required: false,
placeholder: '',
value: 'rgb(30,159,255)'
},
{
type: 'el-select',
label: '字体粗细',
name: 'titleFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
]
}],
{
type: 'el-switch',
label: '加边框',
... ...
/*
* @Descripttion: 百分比图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:34:01
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:18:45
* @Author: lsq
* @Date: 2022-03-03
* @LastEditors: lsq
* @LastEditTime: 2022-03-03
*/
export const monitorCustomLiquidFillChart = {
code: 'monitor-custom-liquid-fill-chart',
... ...
/*
* @Descripttion: 进度条
* @version:
* @Author: lsq
* @Date: 2022-03-03
* @LastEditors: lsq
* @LastEditTime: 2022-03-03
*/
export const monitorProgressInformation = {
code: 'monitor-progress-information',
type: 'chart',
label: '进度条',
icon: 'iconbaifenbi',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '进度条',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '显示',
name: 'flexFlow',
required: false,
placeholder: '',
selectOptions: [
{code: 'row', name: '横排'},
{code: 'column', name: '竖排'},
],
value: 'column'
},
[
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '是否有标题',
name: 'isTitle',
required: false,
placeholder: '',
value: true,
},
{
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: 'titleFontSize',
required: false,
placeholder: '',
value: '18'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'titleColor',
required: false,
placeholder: '',
value: '#666'
},
{
type: 'el-select',
label: '字体粗细',
name: 'titleFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
]
},
{
name: '副标题设置',
list: [
{
type: 'el-switch',
label: '是否有副标题',
name: 'isProposalTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlignProposal',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'titleProposalFontSize',
required: false,
placeholder: '',
value: '16'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'titleProposalColor',
required: false,
placeholder: '',
value: '#666'
},
{
type: 'el-select',
label: '字体粗细',
name: 'titleProposalFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
]
},
{
name: '进度条设置',
list: [
{
type: 'el-switch',
label: '进度条文字显示',
name: 'showText',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: '文字显示在内',
name: 'textInside',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '进度条宽度',
name: 'progressWidth',
required: false,
placeholder: '',
value: '16'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'progressFontSize',
required: false,
placeholder: '',
value: '16'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'progressColor',
required: false,
placeholder: '',
value: '#666'
},
{
type: 'el-select',
label: '字体粗细',
name: 'progressFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'vue-color',
label: '60%以下颜色',
name: 'progressColorGood',
required: false,
placeholder: '',
value: '#24ca3c'
},
{
type: 'vue-color',
label: '90%以下颜色',
name: 'progressColorWorse',
required: false,
placeholder: '',
value: '#fbb248'
},
{
type: 'vue-color',
label: '90%以上颜色',
name: 'progressColorWorst',
required: false,
placeholder: '',
value: '#ec3839'
},
]
},
],
],
// 数据
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: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"num":40,'name':'CUP容量信息','proposal':'结论建议'},
{"num":60,'name':'内存容量信息','proposal':'结论建议'},
{"num":90,'name':'存储容量信息','proposal':'结论建议'}
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
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: 420,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 630,
},
],
}
}
... ...
... ... @@ -48,6 +48,7 @@ import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/m
import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group";
import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend";
import {monitorCustomLiquidFillChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart";
import {monitorProgressInformation} from "./echartsConfigJson/monitorConfigJson/monitor-progress-information";
export const {widgetTool,monitor} = {
... ... @@ -108,6 +109,8 @@ export const {widgetTool,monitor} = {
//折线趋势图
monitorCustomLineTrend,
//水球
monitorCustomLiquidFillChart
monitorCustomLiquidFillChart,
//进度条
monitorProgressInformation
]
}
... ...
<template>
<div class="basicInformation-container" :style="styleObj">
<div class="info-title" :style="titleStyle">{{optionsSetUp.titleName}}</div>
</div>
... ... @@ -43,7 +44,15 @@ export default {
'background-size':'contain'
};
},
titleStyle(){
return{
'display':this.transStyle.isTitle?'block':'none',
'text-align':this.transStyle.textAlign,
'font-size':this.transStyle.titleFontSize+'px',
color: this.transStyle.titleColor,
'font-weight': this.transStyle.titleFontWeight
}
}
},
... ... @@ -96,5 +105,7 @@ export default {
</script>
<style scoped lang="scss">
.info-title{
padding:5px;
}
</style>
... ...
<template>
<div :style="styleObj" class="progressContainer">
<div class="progress-item" :style="itemStyle" v-for="item in progressData">
<div class="progress-title" :style="titleStyle">{{ item.name }}</div>
<div class="progress-title-proposal" :style="titleProposalStyle">{{item.proposal}}</div>
<div class="progress-content" :style="progressStyle">
<div class="content-all">
<span class="content-total">总空间：383GHZ</span>
</div>
<div class="progress-ele">
<el-progress :percentage="item.num" :show-text="showTextStyle" :text-inside="textInsideStyle" :stroke-width="progressWidthStyle" :color="customColorMethod" />
</div>
<div class="content-all">
<span class="content-use" :style="textColor(item.num)">已用：220GHZ</span>
<span class="content-use">剩余：234GHZ</span>
</div>
</div>
</div>
</div>
</template>
<script>
var per = 60;
export default {
name: "progressInformation",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
percentage:50,
progressData:[],//数据
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,
'flex-flow':this.optionsSetup.flexFlow
};
},
//进度条宽度样式设置
progressWidthStyle(){
return this.optionsSetup.progressWidth;
},
//进度条文字是否显示
showTextStyle(){
return this.optionsSetup.showText;
},
//进度条文字显示在进度条内或者外
textInsideStyle(){
return this.optionsSetup.textInside;
},
//横排竖排 排版设置
itemStyle(){
return{
width:this.optionsSetup.flexFlow=='column'?'100%':'auto'
}
},
//标题样式设置
titleStyle(){
return{
'display':this.optionsSetup.isTitle?'block':'none',
'text-align':this.optionsSetup.textAlign,
'font-size':this.optionsSetup.titleFontSize+'px',
color: this.optionsSetup.titleColor,
'font-weight': this.optionsSetup.titleFontWeight
}
},
//副标题样式设置
titleProposalStyle(){
return{
'display':this.optionsSetup.isProposalTitle?'block':'none',
'text-align':this.optionsSetup.textAlignProposal,
'font-size':this.optionsSetup.titleProposalFontSize+'px',
color: this.optionsSetup.titleProposalColor,
'font-weight': this.optionsSetup.titleProposalFontWeight
}
},
//进度条样式设置
progressStyle(){
return{
'font-size':this.optionsSetup.progressFontSize+'px',
color: this.optionsSetup.progressColor,
'font-weight': this.optionsSetup.progressFontWeight
}
}
},
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: {
editorOptions() {
this.setOptionsData();
},
//设置进度条不同数值的颜色
customColorMethod(percentage){
if (percentage < 60) {
return this.optionsSetup.progressColorGood;
}
if (percentage < 90) {
return this.optionsSetup.progressColorWorse;
}
return this.optionsSetup.progressColorWorst;
},
//设置文字不同数值的颜色
textColor(val){
return{
color:val<60?this.optionsSetup.progressColorGood:val<90?this.optionsSetup.progressColorWorse:this.optionsSetup.progressColorWorst
}
},
// 数据解析
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime
);
},
staticDataFn(val) {
if(val && val.length>0) {
this.progressData=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 => {
if(res && res.length>0){
this.progressData=res;
}
});
},
}
};
</script>
<style scoped lang="scss">
.progressContainer{
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: space-around;
}
.progress-item{
font-size: 14px;
text-align: left;
flex:1;
margin:10px 20px;
}
.progress-title-proposal{
margin-top:20px;
}
.progress-content{
margin:20px 0 15px;
}
.progress-ele{
margin:15px 0;
}
.content-all{
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
... ...
... ... @@ -51,6 +51,7 @@ import monitorCustomBarLineChart from "./monitor/customBarLineChart";
import monitorButtonGroup from "./monitor/buttonGroup";
import monitorCustomLineTrend from "./monitor/customLineTrend";
import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
import monitorProgressInformation from "./monitor/progressInformation";
export default {
name: "WidgetTemp",
... ... @@ -94,7 +95,8 @@ export default {
monitorCustomBarLineChart,
monitorButtonGroup,
monitorCustomLineTrend,
monitorCustomLiquidFillChart
monitorCustomLiquidFillChart,
monitorProgressInformation
},
model: {
prop: "value",
... ...
... ... @@ -62,6 +62,7 @@ import monitorCustomBarLineChart from "./monitor/customBarLineChart";
import monitorButtonGroup from "./monitor/buttonGroup";
import monitorCustomLineTrend from "./monitor/customLineTrend";
import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
import monitorProgressInformation from "./monitor/progressInformation";
export default {
name: "Widget",
... ... @@ -104,7 +105,8 @@ export default {
monitorCustomBarLineChart,
monitorButtonGroup,
monitorCustomLineTrend,
monitorCustomLiquidFillChart
monitorCustomLiquidFillChart,
monitorProgressInformation
},
model: {
prop: "value",
... ...