monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by XuHaoJie
Commit ea00029535cb0653de048b22657115da05e821b0 1 parent 19895b89

test

Inline Side-by-side
Showing 4 changed files with 593 additions and 221 deletions
/**
* @Description 水平多环形图
* @Author XuHaoJie
* @Date 2022/2/25 11:11
*/
export const monitorMoreCapacity = {
code: 'monitor-more-capacity',
type: 'html',
label: '水平多环形图',
icon: 'icon020kongxinbingtu',
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: 'rgba(151, 151, 151, 0.13)',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'bgColor',
required: false,
placeholder: '',
value: '#f6f9fe',
},
{
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: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 180,
},
],
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: [
{
title:'vmware-144.12.64.58',
capacityList:[
{
name:'CPU容量',
value:'75',
unit:'%',
},
{
name:'存储容量',
value:'65',
unit:'%',
},
{
name:'内存容量',
value:'95',
unit:'%',
}
]
},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
value: '',
},
],
}
}
... ...
<template>
<div class="more_capacity_div" :style="styleObj">
<div class="more_capacity_title">{{ styleTitle.title }}</div>
<div class="more_capacity_content">
<div class="more_capacity_content_annular" v-for="(item,index) in styleAnnularList" :key="index">
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
"name": "moreCapacity",
"data"() {//Vue 实例的数据对象
return {
"options": {},
"optionsSetUp": {},
"optionsPosition": {},
"optionsData": {},
"staticDataList": [],
"dynamicDataList": [],
}
},
"components": {},
"props": {////可以是数组或对象，用来接收父组件的数据
"value": Object,
"ispreview": Boolean
},
"computed": { //计算属性 计算属性将被混入到Vue实例中。getter和sretter的this上下文自动绑定为Vue实例，如果使用箭头函数，则this不会指向这个组件的实例。计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算
"transStyle"() {//将options属性合并成为一个对象
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-repeat': 'no-repeat',//背景图像将仅显示一次。
'background-size': 'contain'//属性规定背景图像的尺寸。 contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
};
},
//设置标题样式
"styleTitle"() {
const titleStyle = this.staticDataList;
return {
"title": titleStyle[0].title ? titleStyle[0].title : '',
};
},
//设置环形图属性
"styleAnnularList"() {
const annularStyle = this.staticDataList;
return annularStyle[0].capacityList;
}
},
"watch": {//一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。 Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。 相当于监听
"value": {
"handler"(val) {
this.options = val;
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
this.optionsData = val.data;
this.handlerData();
},
"deep": true //为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
}
},
"mounted"() {//实例被挂载后调用 不会保证所有子组件也都被挂载完成 该钩子在服务器端渲染期间不被调用。
this.options = this.value;
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.handlerData();
//实例化环形图
this.creationAnnularMaps();
},
"methods": {//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
//处理数据
"handlerData"() {
const resData = this.optionsData;
resData.dataType == "staticData"
? this.handlerStaticData(resData.staticData)
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
},
//处理静态数据
"handlerStaticData"(data) {
this.staticDataList = data;
},
//处理动态数据
"handlerDynamicData"(data, refreshTime) {
if (!data) return;
},
//实例化环形图
"creationAnnularMaps"() {
let that = this;
debugger
$.each($('.more_capacity_content_annular'),function (i,v) {
that.creationAnnularMap($(this));
});
},
//创建环形图
"creationAnnularMap"(item) {
debugger
let myChart = echarts.init(item);
let option = {
color: ['#5fb878', '#eeeeee'],
title: {
text: '质量问题预警'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false, //关闭放大动画
selectedOffset: 0, //选中块的偏移量
label: {
show: false,
position: 'center',
formatter: '{d}%'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 495,
name: '直接访问',
selected: true, //默认选中第一块
label: {
show: true, //默认显示第一块
fontSize: '20',
fontWeight: 'bold'
}
},
{ value: 310, name: '邮件营销' }
]
}
]
};
option && myChart.setOption(option);
},
}
}
</script>
<style scoped lang="scss">
.more_capacity_div {
display: flex;
flex-direction: column;
}
.more_capacity_title {
font-size: 16px;
color: #333;
font-weight: bold;
width: 100%;
height: 30%;
padding-left: 10px;
display: flex;
align-items: center;
border: 1px salmon solid;
}
.more_capacity_content {
width: 100%;
height: 70%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border: 1px salmon solid;
}
.more_capacity_content_annular {
border: 1px salmon solid;
width: 100%;
height: 100%;
}
</style>
... ...
... ... @@ -11,96 +11,98 @@
</template>
<script>
import widgetHref from "./widgetHref.vue";
import widgetText from "./widgetText.vue";
import WidgetMarquee from "./widgetMarquee.vue";
import widgetTime from "./widgetTime.vue";
import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetHref from "./widgetHref.vue";
import widgetText from "./widgetText.vue";
import WidgetMarquee from "./widgetMarquee.vue";
import widgetTime from "./widgetTime.vue";
import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
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";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
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";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
import monitorMoreCapacity from "./monitor/moreCapacity";
export default {
name: "WidgetTemp",
components: {
widgetHref,
widgetText,
WidgetMarquee,
widgetTime,
widgetImage,
widgetSlider,
widgetVideo,
WidgetIframe,
widgetBarchart,
widgetGradientColorBarchart,
widgetLinechart,
widgetBarlinechart,
WidgetPiechart,
WidgetFunnel,
WidgetGauge,
WidgetPieNightingaleRoseArea,
widgetTable,
widgetMap,
widgetPiePercentageChart,
widgetAirBubbleMap,
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart,
widgetDecoratePieChart,
export default {
name: "WidgetTemp",
components: {
widgetHref,
widgetText,
WidgetMarquee,
widgetTime,
widgetImage,
widgetSlider,
widgetVideo,
WidgetIframe,
widgetBarchart,
widgetGradientColorBarchart,
widgetLinechart,
widgetBarlinechart,
WidgetPiechart,
WidgetFunnel,
WidgetGauge,
WidgetPieNightingaleRoseArea,
widgetTable,
widgetMap,
widgetPiePercentageChart,
widgetAirBubbleMap,
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart,
widgetDecoratePieChart,
monitorHealthStatus,
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
},
model: {
prop: "value",
event: "input"
},
props: {
type: String,
value: {
type: [Object],
default: () => {
}
}
},
data() {
return {};
},
mounted() {
},
methods: {}
};
monitorHealthStatus,
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart,
monitorMoreCapacity
},
model: {
prop: "value",
event: "input"
},
props: {
type: String,
value: {
type: [Object],
default: () => {
}
}
},
data() {
return {};
},
mounted() {
},
methods: {}
};
</script>
<style scoped lang="scss"></style>
... ...
... ... @@ -22,147 +22,149 @@
</template>
<script>
import widgetHref from "./widgetHref.vue";
import widgetText from "./widgetText.vue";
import WidgetMarquee from "./widgetMarquee.vue";
import widgetTime from "./widgetTime.vue";
import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetHref from "./widgetHref.vue";
import widgetText from "./widgetText.vue";
import WidgetMarquee from "./widgetMarquee.vue";
import widgetTime from "./widgetTime.vue";
import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
import widgetMap from "./widgetMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
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";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
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";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
import monitorMoreCapacity from "./monitor/moreCapacity";
export default {
name: "Widget",
components: {
widgetHref,
widgetText,
WidgetMarquee,
widgetTime,
widgetImage,
widgetSlider,
widgetVideo,
WidgetIframe,
widgetBarchart,
widgetGradientColorBarchart,
widgetLinechart,
widgetBarlinechart,
WidgetPiechart,
WidgetFunnel,
WidgetGauge,
WidgetPieNightingaleRoseArea,
widgetTable,
widgetMap,
widgetPiePercentageChart,
widgetAirBubbleMap,
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart,
widgetDecoratePieChart,
monitorHealthStatus,
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
},
model: {
prop: "value",
event: "input"
},
props: {
/*
widget-text widget-marquee widget-href widget-time widget-image widget-slider widget-video widget-table widget-iframe widget-universal
widget-linechart widget-barlinechart widget-piechart widget-hollow-piechart widget-funnel widget-gauge widget-china-map
*/
index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
type: String,
bigscreen: Object,
value: {
type: [Object],
default: () => {
}
},
step: Number
},
data() {
return {
data: {
setup: {},
data: {},
position: {}
}
export default {
name: "Widget",
components: {
widgetHref,
widgetText,
WidgetMarquee,
widgetTime,
widgetImage,
widgetSlider,
widgetVideo,
WidgetIframe,
widgetBarchart,
widgetGradientColorBarchart,
widgetLinechart,
widgetBarlinechart,
WidgetPiechart,
WidgetFunnel,
WidgetGauge,
WidgetPieNightingaleRoseArea,
widgetTable,
widgetMap,
widgetPiePercentageChart,
widgetAirBubbleMap,
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart,
widgetLineCompareChart,
widgetDecoratePieChart,
monitorHealthStatus,
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart,
monitorMoreCapacity
},
model: {
prop: "value",
event: "input"
},
props: {
/*
widget-text widget-marquee widget-href widget-time widget-image widget-slider widget-video widget-table widget-iframe widget-universal
widget-linechart widget-barlinechart widget-piechart widget-hollow-piechart widget-funnel widget-gauge widget-china-map
*/
index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
type: String,
bigscreen: Object,
value: {
type: [Object],
default: () => {
}
},
step: Number
},
data() {
return {
data: {
setup: {},
data: {},
position: {}
}
};
},
computed: {
widgetsWidth() {
return this.value.position.width;
},
widgetsHeight() {
return this.value.position.height;
},
widgetsLeft() {
return this.value.position.left;
},
widgetsTop() {
return this.value.position.top;
},
widgetsZIndex() {
return this.value.position.zIndex || 1;
}
},
mounted() {
},
methods: {
handleFocus({index, left, top, width, height}) {
},
handleBlur({index, left, top, width, height}) {
this.$emit("onActivated", {index, left, top, width, height});
this.$refs.draggable.setActive(true);
}
}
};
},
computed: {
widgetsWidth() {
return this.value.position.width;
},
widgetsHeight() {
return this.value.position.height;
},
widgetsLeft() {
return this.value.position.left;
},
widgetsTop() {
return this.value.position.top;
},
widgetsZIndex() {
return this.value.position.zIndex || 1;
}
},
mounted() {
},
methods: {
handleFocus({index, left, top, width, height}) {
},
handleBlur({index, left, top, width, height}) {
this.$emit("onActivated", {index, left, top, width, height});
this.$refs.draggable.setActive(true);
}
}
};
</script>
<style scoped lang="scss">
.vue-draggalbe {
position: absolute;
}
.vue-draggalbe {
position: absolute;
}
.widget-active {
cursor: move;
border: 1px dashed #09f;
background-color: rgba(115, 170, 229, 0.5);
}
.widget-active {
cursor: move;
border: 1px dashed #09f;
background-color: rgba(115, 170, 229, 0.5);
}
.avue-draggable {
padding: 0 !important;
}
.avue-draggable {
padding: 0 !important;
}
</style>
... ...